LE SITE INTERNET DU COLLÈGE I) Introduction 1) Présentation Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs, de mettre en page des articles de façon simple, SPIP gère le site Web à la façon d'un magazine, c est-à-dire qu'il est composé principalement de rubriques, de sous-rubriques et d articles. 2) Principe général : On peut comparer le site à un «iceberg» : la partie visible par tous les internautes et la partie «cachée» accessible dans l espace privé. L espace privé est constitué d une interface très simple qui vous permet d'écrire les articles et de les enregistrer facilement dans une base de données. La structure du site est figée et contrôlée par ce qu on appelle un squelette (comme pour les blogs). Le contenu des articles s affichera donc toujours de la même façon. II) Participer à la vie du site 1) Accéder à l espace privé Facile, il suffit de cliquer sur l icône «Espace privé» sur le site. Vous devrez alors fournir votre login puis votre mot de passe. Page 1
Présentation de l interface privée des rédacteurs avec les différents boutons et leurs fonctions. Page d accueil de l espace privé, c est à partir d ici que vous pourrez : - écrire un nouvel article ou une nouvelle brève - voir des informations sur le site Pour accéder à une sous rubrique, voir tous ses articles et y écrire un article. Pour accéder site public. Pour accéder au forum interne, y lire ou poster un message. Pour voir la liste des auteurs. Aide sur le site. Nom de l auteur connecté Pour changer de langue La messagerie SPIP Pour quitter L agenda des rédacteurs Si vous voulez changer les couleur de l interface Pour trouver une rubrique, un article, une brève, un auteur à partir d un mot Pour passer en plein écran Pour écrire un article ou naviguer dans les rubriques Interface complète ou simplifiée Pour voir tout le site ou juste une rubrique Sur l icône auteur, il vous sera possible de personnaliser votre compte, changer de mot de passe, indiquer votre adresse mail (invisible pour les visiteurs du site et conseillé pour avoir un suivi des forums publiques concernant vos articles!) Vous pourrez également afficher la liste des autres rédacteurs et communiquer avec eux par l intermédiaire d une messagerie et d'un forum interne. Page 2
2) Ecrire un nouvel article En cliquant sur l icône «édition», vous visualisez l arborescence du site. En cliquant sur une rubrique, ou une sous-rubrique, vous pouvez éditer un nouvel article. Donner un titre On clique sur l icône «Ecrire un nouvel article» et là, Important!, n oubliez pas de donner un titre à votre article, sinon il s appellera «Nouvel article»...! Titre de l article Nom de la rubrique Site à conseiller ou en lien avec l article Barre des outils Le texte de l article Page 3
Ecrire le descriptif de l article (Pas obligatoire) Ecrire le texte de l article avec SPIP 3 Mettre en forme un nouvel article avec la barre des outils de SPIP On retrouve dans cette barre, les outils habituels des autres logiciels de traitement de texte. exposant note de bas de page chercher/ remplacer prévisualisation mettre en rouge sous-titres ancres caractères spéciaux italique petites majuscules faire un lien vers wikipédia galerie des images Aide gras transformer en lien hypertexte créer/modifier un tableau Statistiques du document En cas de soucis, consulter l aide!! Page 4
4 D autres petites choses à connaître a- Créer des paragraphes Pour créer des paragraphes, il suffit de laisser une ligne vide, un peu comme on sépare les paragraphes dans un email (on «saute» une ligne). Le fait de simplement «revenir à la ligne» (retour-chariot) sans séparer les deux paragraphes par une ligne vide ne suffit pas pour provoquer un changement de paragraphe (cela ne provoque même pas un retour à la ligne). Vous pouvez laisser plusieurs lignes vides à la suite sans que cela modifie la présentation. Si vous voulez faire un retour à la ligne ou laisser plusieurs lignes vides, il faudra taper _ (le trait de soulignement ou underscore) au début de la ligne, suivi d une espace (si, si, en typographie, espace est féminin!). Par exemple : si je tape Une ligne _une deuxième ligne une autre ligne J obtiendrai : Une ligne Une deuxième ligne Une autre ligne b- Fabriquer des listes ou des énumérations On peut fabriquer des listes dans SPIP en revenant à la ligne et en commençant la nouvelle ligne avec un tiret. Par exemple : si je tape - et un - et deux - et trois... zéro J obtiendrai : et un et deux et trois... zéro On peut faire des énumérations imbriquées en ajoutant des étoiles après le tiret d énumération. Page 5
Par exemple : si je tape - {{animaux}} -* vertébrés -** mammifères -** oiseaux -** reptiles -** batraciens -** poissons -* invertébrés - {{végétaux}} -* à fleurs J obtiendrai : animaux végétaux vertébrés o mammifères o oiseaux o reptiles o batraciens o poissons invertébrés à fleurs Enfin, on peut faire des listes numérotées en utilisant le dièse (#) à la place de l étoile (*) : Par exemple : si je tape -# mon premier est -# mon deuxième est -# mon troisième est - mon tout est J obtiendrai : 1. mon premier est 2. mon deuxième est 3. mon troisième est mon tout est Page 6
c- Décaler du texte Pour faire cela, il faut utiliser la balise HTML «quote». Par exemple : si je tape SPIP, c'est géniaaaaal. <quote>en tout cas Pierre en est convaincu</quote> <quote><quote>et moi aussi</quote></quote> donnera : SPIP, c est géniaaaaal. En tout cas Pierre en est convaincu Et moi aussi d- Mettre de la couleur Pour cela, on va enfermer le texte dans une balise «span» à qui on donnera le style «color» puis on définira cette couleur avec les noms de couleur en anglais. Je vois rouge Bleu comme l océan J espère que vous suivez se codera <span style="color:red">je vois rouge</span> _ <span style="color:blue"">bleu comme l'océan</span> _ <span style="color:green">j'espère que vous suivez</span> e- Tracer un trait de séparation horizontal Il est très simple d insérer un trait de séparation horizontal sur toute la largeur du texte : il suffit de placer une ligne ne contenant qu une succession d au moins quatre tirets. 5 Enregistrer son article Pour finir on clique sur "Enregistrer" en bas. 6 - Insérer des images Cela s effectue en trois étapes : préparer l image puis vous devez envoyer le fichier de votre image vers le site, puis insérer l image à l intérieur du texte. Page 7
Préparation : Formats et poids des images Lorsque vous créez vos images (avec votre logiciel habituel), vous devez les créer à l un des formats suivants : GIF (extension.gif) JPEG (extension.jpg) PNG (extension.png). Les formats les plus adaptés au Web sont le GIF, le JPG et le PNG. Le Gif ne peut afficher que 256 couleurs mais permet la transparence et l animation d images. Le JPG permet l affichage en millions de couleurs, mais agresse l image par une compression très forte, il est à privilégier pour les images à tons continus (les paysages par exemple). Veillez particulièrement à ce que le nom de vos fichiers ait une terminaison indiquant leur format :.gif,.jpg ou.png. Si vous installez un fichier dont le nom ne contient pas cette extension, le système ne saura pas utiliser l image. Soyez raisonnables dans la taille de vos images. Je propose de choisir des largeurs de maximum de 400 px (pixels) et de considérer que 150 px en largeur est raisonnable pour insérer des images à gauche ou à droite. De plus, je vous conseille de choisir une résolution d image de 72 px/pouce maximum si vous voulez que votre image s affiche rapidement. Scannez en conservant des paramètres optimisés pour le Web, c est à dire avec une résolution faible (72 ppp). Pour diminuer encore le "poids" de l image si celle-ci vient d un appareil photo, on peut enlever ce qu on appelle les données EXIF. On diminue ainsi d environ 50% le poids de l image. Et pour faire tout ça, pas besoin d un logiciel très complet, XnView, qui est gratuit, le fait très bien. Si vous voulez un logiciel plus complet pour faire entre autres des retouches de photos, il y a Gimp, libre et gratuit. Page 8
Installation des images sur le serveur Avant de pouvoir insérer vos images à l intérieur du texte, il faut d abord positionner le curseur dans votre article à l endroit où vous voulez insérer l image. Il faut ensuite utiliser l interface «Ajouter une image» en haut à droite quand vous écrivez l article. Attention, enregistrez votre texte avant d utiliser cette interface. Dans cette interface, cliquez sur «parcourir» et choisissez l image que vous voulez transférer sur le serveur du site puis cliquez sur "télécharger". Voilà, c est fait! Insertion de l image dans votre article Avant d insérer votre image, donnez-lui un titre et éventuellement une description. Pour insérer l image sans commentaires, tapez ou copiez/collez un des 3 raccourcis (xx correspond au numéro de l image) : <imgxx left> pour mettre l image à gauche <imgxx center> pour mettre l image au centre <imgxx right> pour mettre l image à droite A noter que si l image est au centre, le texte sera dessus et dessous mais que si elle est placée à gauche ou à droite, le texte va «habiller» l image sur les côtés. A proscrire donc si l image est en fin d article car l image va déborder sur ce qui sera affiché dessous! Pour insérer l image avec titre et description, c est la même procédure mais il faut remplacer «img» par «doc». D un autre côté, si on n enregistre pas de titre ni de descriptif, «doc» peut être utilisé aussi et donnera le même résultat que «img». Vous pouvez recommencer l opération avec autant d images que vous le désirez (un article peut contenir autant d images que nécessaire). Page 9
7 - Insérer des images L interface de SPIP vous permet de proposer sur votre site des fichiers multimédia (son, vidéo, textes...). Les rédacteurs peuvent joindre des documents aux articles. Ces documents peuvent être soit présentés à la suite du texte (à la façon de «pièces jointes»), soit présentés à l intérieur du texte sous la forme d une vignette de prévisualisation. Les administrateurs du site peuvent, de plus, installer des documents directement dans les rubriques. Notez bien la différence importante entre ces deux utilisations : - joints aux articles, les documents sont des «pièces jointes», qui n ont pas d intérêt sans l article auquel ils sont associés (dans la navigation dans le site, on peut consulter de tels fichiers à partir des articles). - lorsqu ils sont installés directement dans les rubriques, les documents deviennent des éléments du site comparables aux articles et aux brèves, et non plus des compléments d information. Étape 1 : Installation des documents sur le serveur L installation des fichiers sur le serveur se fait au travers de l interface «Joindre un document» qui est présente quand vous modifiez un article. Avant d installer vos fichiers, vous devez les créer sur votre ordinateur. L interface d envoi des documents vous rappelle la liste des formats autorisés sur ce système. Veillez absolument à nommer vos fichiers avec la terminaison correcte (par exemple, «xxxxxx.mp3» pour un fichier au format MP3. L interface est la même que pour les images : le bouton «Fichier», ou «File», ou «Parcourir», «Browse» (selon les navigateurs) ouvre une fenêtre qui vous permet de sélectionner le fichier sur votre disque dur. Une fois ce fichier sélectionné, cliquez sur «Télécharger» pour envoyer le fichier. Attention : selon la taille de votre fichier, cette opération peut prendre du temps. Page 10
Étape 2 : Informations et vignette Une fois le fichier transféré sur le serveur, une boîte d information apparaît. Plusieurs opérations peuvent y être réalisées. - Vignette de prévisualisation Cette notion est très importante : contrairement aux images, que l on insère dans le corps du texte, les documents n apparaissent pas directement. Une vignette de prévisualisation est présentée au visiteur, sur laquelle il pourra cliquer pour obtenir le document correspondant. La partie supérieure de la boîte d information vous permet de choisir la vignette de prévisualisation. Vous pouvez opter pour une vignette par défaut, ou installer un logo personnalisé. La vignette par défaut est installée automatiquement par le système, en fonction du format du document. L avantage de laisser une telle vignette est que la présentation des documents d un même type sur l ensemble du site sera uniforme. Si vous préférez, vous pouvez installer un logo (de taille réduite de préférence, et au format GIF, JPG ou PNG), qui apparaîtra à la place de la vignette par défaut. Une fois un tel logo installé, un lien «Supprimer la vignette personnalisée» vous permettra de revenir à la vignette par défaut si nécessaire. - Dans la page de modification des articles, les «raccourcis» vous permettant d insérer le document dans le code source sont présentés. - La partie inférieure vous permet de donner un titre et de fournir un descriptif pour votre document. Inutile d indiquer ici le format et le poids du fichier multimédia, cette information sera fournie automatiquement par SPIP. Il ne reste plus qu à valider. - Enfin, le bouton «Supprimer ce document» permet d effacer les documents inutiles. Notez bien : il est impératif de supprimer les documents non désirés, faute de quoi ils apparaîtront sur le site public. - Lorsque vous publierez l article, ces documents apparaîtront à la suite du texte sous la forme d une liste de documents joints. Étape 3 : Insérer les documents dans le texte des articles On peut également décider d insérer les vignettes de prévisualisation à l intérieur du texte. Vous obtiendrez ainsi des images cliquables à l intérieur de l article. Ici, la procédure est exactement la même que pour les images, à la différence près que les vignettes seront des éléments cliquables. Insérez un raccourci dans le code source de la forme Page 11
- <imgxx yy> pour afficher uniquement la vignette - <docxx yy> pour afficher la vignette avec le titre et le descriptif. Notez bien : les documents que vous aurez installés à l intérieur du texte n apparaîtront plus sous l article. Pour les articles, il y a donc deux emplacements où apparaissent les documents : à l intérieur du texte (vignette cliquable), ou à la suite de l article sous la mention «Document joint». 8 - Publier l article Et on n oublie pas de le soumettre à la publication en cliquant en bas sur... "soumettre à la publication". Un administrateur pourra ensuite soit le jeter «à la poubelle», soit le renvoyer pour correction «refusé», soit le valider «publié en ligne». Attention! A partir du moment où un article est proposé à la publication, un rédacteur ne peut plus le modifier ; seul un administrateur le peut! Mais on peut toujours demander à un administrateur de remettre cet article «en cours de rédaction» pour le modifier. 9 - Modifier un article Choisir l article à modifier On clique sur «Edition du site» puis «Tous vos articles» et on clique sur l article à modifier puis on clique sur «Modifier cet article». Modifier l article Bon courage! Page 12