Créer et faire vivre un site web pédagogique

Créer et faire vivre un site web pédagogique 1. Créer un site web... 2 2. Utilisation d un CMS... 2 3. SPIP : Système de Publication Internet Partagé... 2 4. Le site de la Cité Scolaire Jean Moulin... 3 5. Structure du site (système SPIP)... 3 6. Les différents types d utilisateur... 4 7. Les statuts d un article... 4 8. Connexion à la partie privée... 4 9. Compléter / Modifier son profil... 5 10. Saisir un nouvel article... 5 11. Créer une sous-rubrique... 6 12. Penser à la navigation du visiteur... 7 13. Organisation «automatique» des rubriques et articles... 7 14. Mise en forme enrichie du texte... 8 15. Les liens hypertextes... 10 16. Insertion d image... 10 17. Joindre des documents à un article ou à une rubrique... 12 18. TP n 1 : Se connecter à l espace privé... 13 19. TP n 2 : Créer un nouvel article... 13 20. TP n 3 : Créer une rubrique... 13 21. TP n 4 : Utiliser la mise en forme enrichie... 13 22. TP n 5 : Insérer une image... 14 23. TP n 6 : Joindre un document... 14 Stage TICE novembre 2009 C. Thoré Page 1/14

1. Créer un site web Un site web dynamique est constitué de deux ensembles : Les fichiers : Les pages html Les objets (images, documents joints, fichiers video ) La base de données : Contenu du site web (texte) Paramètres de fonctionnement L installation comporte les étapes suivantes : Copie des fichiers sur le serveur distant : Utilisation d un logiciel FTP (FileZilla, WinScp ) Création de la base de données : Outil d administration de base de données (PhpMyAdmin ) Paramétrage du fonctionnement du site 2. Utilisation d un CMS CMS : Content Management System Système de gestion de contenu Les principaux systèmes existants : Performant mais très complexe Orienté «blog» Moins de fonctionnalités intéressantes pour un établissement scolaire Très utilisé dans les établissements scolaires et milieux associatifs 3. SPIP : Système de Publication Internet Partagé Permet de mettre en ligne des pages Internet sans connaissance du langage HTML ou autre Système collaboratif, plusieurs personnes peuvent participer Système sécurisé, respect des standards Simple d utilisation et très performant Squelette personnalisable -> Sarka-Spip par exemple. Stage TICE novembre 2009 C. Thoré Page 2/14

4. Le site de la Cité Scolaire Jean Moulin Adresse Internet : www.lyc-jeanmoulin.ac-poitiers.fr 1- Le portail du site : Le portail est le point d entrée du site de la cité scolaire, c est l espace de diffusion d informations (actualités dominantes). Les informations proposées par l ensemble de la communauté scolaire sont mises en ligne par les animateurs TICE de la cité scolaire. Il donne l identité du site et permet un accès direct aux rubriques principales. 2- Le site : Le site est basé sur un système de publication partagée, c'est-à-dire que tous les personnels de la cité peuvent, s ils le souhaitent, participer. Aucune connaissance du langage Html n est nécessaire. Le système utilisé est un SPIP, majoritairement adopté par les établissements scolaires. 5. Structure du site (système SPIP) Le site comporte deux parties : 1- La partie publique : C est la partie vue par les visiteurs du site. Elle contient les informations que les rédacteurs ont décidé de mettre en ligne. 2- La partie privée : C est l interface permettant d éditer le contenu du site. Seules les personnes autorisées ont accès à cette partie. Un système SPIP est construit sur une structure arborescente basée sur des «Rubriques» et «Sous - rubriques» dans lesquelles seront publiés des articles : Rubriques (ou secteurs) Sous-rubriques Articles Extrait du site : Stage TICE novembre 2009 C. Thoré Page 3/14

6. Les différents types d utilisateur Un système SPIP dispose de 5 niveaux : Webmestre (administrateur) : Droit de modification de la structure et du squelette du système. Administrateur : Droit de publication dans toutes les rubriques Administrateur restreint : Droit de publication dans les rubriques désignées par un administrateur. Auteur (rédacteur) : Rédaction et proposition d articles. Visiteur : N accède qu à la partie publique du site 7. Les statuts d un article 1. En cours de rédaction : Il n est visible que par le rédacteur et les administrateurs dans la partie privée. 2. Proposé à l évaluation : Il n est visible que dans la partie privée par le rédacteur et par les administrateurs. Ces derniers peuvent décider de le mettre en ligne. 3. Publié en ligne : L article est publié (si la date de rédaction est antérieure à la date du jour). L auteur, s il n est pas administrateur, ne peut plus le modifier. 4. A la poubelle : L article a été effacé. Il reste dans la base de données mais n est plus visible dans la partie publique 5. Refusé : Rédigé par un simple auteur, il a été refusé par un administrateur. L auteur ne peut plus y accéder. 8. Connexion à la partie privée 1. Cliquez sur connexion (bandeau à gauche, sous le menu) 2. Rentrez vos identifiant, puis validez : Stage TICE novembre 2009 C. Thoré Page 4/14

3. Vous pouvez ensuite entrer dans la partie privée en cliquant sur le bouton «Espace privé» au dessus de votre nom : 9. Compléter / Modifier son profil 1. Cliquez sur «Auteur» (badeau supérieur) 2. Puis sur votre nom 3. Cliquez sur «Modifier cet auteur» 4. Vous pouvez ensuite modifier votre nom, indiquer votre email (invisible sur l espace public!), indiquer qui vous êtes, et modifier votre mot de passe. 5. Cliquez sur «Enregistrer» en bas de page pour enregistrer les modifications. Indiquer son email permet au visiteur de vous contacter par email à l aide d un formulaire de contact sur l espace public sans connaître votre adresse (anti-spam). 10. Saisir un nouvel article Pour écrire un nouvel article, il existe 2 solutions : 1. A partir de l accueil de l espace privé : - Cliquez sur le bouton «A suivre» (en haut à gauche) - Puis sur «Écrire un nouvel article» Il faudra ensuite penser à placer l article dans la rubrique ou sous-rubrique choisie. 2. A partir de la rubrique où devra apparaître l article : - Cliquez sur le bouton «Édition» (en haut à gauche) - Parcourir l arborescence du site jusqu à la rubrique souhaitée - Puis sur «Écrire un nouvel article» Stage TICE novembre 2009 C. Thoré Page 5/14

Avant de saisir le contenu de l article, pour ne pas oublier, il faut indiquer les informations importantes : 1. Le titre de l article : C est la première chose que verra le visiteur, pensez à lui donner du sens. 2. Son emplacement dans les rubriques : Cliquez sur la loupe et choisissez la rubrique. 3. Le descriptif rapide (facultatif) : Le descriptif rapide est utilisé pour la navigation à l intérieur du site : il permet d indiquer brièvement, dans les sommaires par exemple, le thème de l article. Si vous ne mettez rien, SPIP fera le résumé pour vous en prenant les premiers mots de l article (À vérifier dans l espace public, il n a parfois aucun sens ) Vous pouvez ensuite saisir l article (ou utiliser le précieux «copier-coller») dans le champ «texte». Cliquez sur «Enregistrer» (en bas à droite) lorsque vous avez terminé. Pour effectuer un retour à la ligne, il faut sauter une ligne. Ceci provoque un changement de paragraphe. 11. Créer une sous-rubrique Pour créer une rubrique, il faut d abord se placer dans la rubrique (ou sousrubrique) qui doit contenir la nouvelle sous-rubrique et être au moins administrateur restreint de cette rubrique : 1. cliquez sur «Édition» 2. En dessous du descriptif de la rubrique, cliquez sur «Créer une sous-rubrique» Stage TICE novembre 2009 C. Thoré Page 6/14

Comme pour l édition d un article, il faut pré remplir les informations importantes : 1. Le titre de la rubrique : Même chose que pour les articles, c est la première chose que verra le visiteur, pensez à lui donner du sens. 2. Son emplacement : Cliquez sur la loupe et choisissez la rubrique. 3. Le descriptif rapide (facultatif) : N APPARAÎT PAS DANS L ESPACE PUBLIC. Le descriptif rapide d une rubrique est utilisé pour la navigation à l intérieur de l espace privé uniquement! Il permet d indiquer au autres rédacteurs ce que contient la rubrique. 4. Texte explicatif : Facultatif mais important si on s attache à guider le visiteur dans la rubrique, avec une mise en forme enrichie, il peut permettre de créer un sommaire, des liens hypertextes vers les articles (ou sous-rubriques) importants de la rubrique. 12. Penser à la navigation du visiteur Lorsque l on édite le contenu d un site web, il faut constamment penser à la façon dont le visiteur va percevoir sa visite. - Soit il cherche une information précise sur le site : il faut alors qu il puisse trouver facilement une information (on parle souvent de la «règle des 3 clics» : 3 clics maximum pour trouver l information recherchée) - Soit il «surf» sans but précis : il ne faut pas qu il se perde dans une masse d informations mal organisée 13. Organisation «automatique» des rubriques et articles Comme dans la plupart des CMS, SPIP ordonne les articles et les rubriques en plaçant les éléments les plus récents en haut de page (première position). Il est toutefois possible de forcer un ordre précis en indiquant un numéro en tête du titre. Exemple : Ce numéro est automatiquement supprimé dans l espace public si la syntaxe suivante est respectée : numéro/point/1espace/titre de l élément (sans les /). La numérotation de 10 en 10 permet d intercaler des éléments sans renuméroter l ensemble. Stage TICE novembre 2009 C. Thoré Page 7/14

14. Mise en forme enrichie du texte Dans SPIP, la mise en forme enrichie du texte fait appel aux «raccourcis typographiques». Exemples : - texte en italique : il faut écrire le texte à mettre en italique entre accolades - texte en gras : faut écrire le texte à mettre en italique entre doubles accolades Les champs où le texte peut être enrichi sont surmontés d une barre de «raccourcis typographiques» Il suffit de sélectionner le texte voulu et de cliquer sur le bouton. Lorsque l on enregistre un article ou une rubrique, la visualisation dans l espace privé n est qu un aperçu du résultat. Pour avoir une idée précise du résultat final, il faut utiliser les liens «Prévisualiser» ou «Voir en ligne» : Pour la création de tableaux complexes, un assistant est disponible dans la barre d'outil : Stage TICE novembre 2009 C. Thoré Page 8/14

Encadrement / mise en valeur <quote> Texte mis en valeur </quote> permet de mettre en valeur un texte par une ligne verticale Cadre <cadre>texte qui apparaitra dans une zone de formulaire facilitant le copier/coller</cadre> Stage TICE novembre 2009 C. Thoré Page 9/14

De nombreux raccourcis typographiques existent, une liste complète est disponible dans l aide en ligne : 15. Les liens hypertextes Sur une page web les liens hypertextes sont importants. Il existe deux types de liens Les liens internes, vers une rubrique, vers un autre article : Ces liens permettent de créer des «raccourcis» voire un sommaire pour le visiteur. Les liens externes, vers un site externe, un document externe D une manière générale, il faut encadrer le texte du lien par des crochets, un tiret «-» suivi de «>» (ceci dessine une flèche) et ensuite indiquer l URL du lien. 1. Les liens internes : Pour créer un lien vers un article, les syntaxes possibles sont les suivantes : [Texte du lien (cliquable)->article 12] [Texte du lien (cliquable)->art12] [Texte du lien (cliquable)->12] Pour créer un lien vers une rubrique : [Texte du lien (cliquable)->rubrique 25] [Texte du lien (cliquable)->rub25] Pour créer un lien vers un auteur : [Texte du lien (cliquable)->auteur15] [Texte du lien (cliquable)->aut25] 2. Les liens externes : Pour créer un lien externe : [lien vers google->http://www.google.fr] Là encore, un éditeur de lien est disponible dans la barre de raccourcis typographiques 16. Insertion d image Avant de placer une image sur le site, il faut adapter (si besoin) cette image à l affichage sur une page Web. Il faut que cette image ne soit pas trop «lourde», elle ne devrait pas excéder 30 à 50 ko, sauf pour des photos qui nécessitent une grande résolution. Si l on souhaite l afficher en taille réelle, elle ne doit pas dépasser 550 pixels (largueur de la partie centrale de notre site) Stage TICE novembre 2009 C. Thoré Page 10/14

Pour préparer cette image, il faut utiliser un logiciel de traitement d images/photos, tel que GIMP (gratuit mais pour utilisateurs «confirmés») ou mieux encore PHOTOFILTRE. Il peut être nécessaire de : Redimensionner la taille de l image (son poids diminue avec la taille) Recadrer l image Gérer la transparence de l arrière plan Les images ne peuvent pas être directement placées dans la rubrique ou l'article, on doit suivre la procédure suivante : 1. Éditer l'article, entrer le texte 2. Ajouter les images dans l'article par la fenêtre de gauche en : a. sélectionnant l'image «Parcourir» b. envoyant l'image sur le site «Télécharger» 3. Une fois l'image transférée sur le site vous obtenez la fenêtre suivante (SPIP génère automatiquement une vignette de 150px) 4. Vous pouvez donner un titre à l'image 5. Insérer ensuite les images dans votre texte en utilisant les balises encadrées en rouge. Ici, le numéro 309 est «la référence» de la photo. Plusieurs configurations sont possibles (à tester) : <img309 left> : vignette (150 pixels) alignée à gauche <img309 center> : vignette (150 pixels) centrée <img309 right> : vignette (150 pixels) alignée à droite Dans l espace public, les images insérées seront automatiquement transformées en vignettes (cliquables pour agrandissement) de 150 pixels de large. On peut définir une autre largeur, sans dépasser la taille native de l image : <img309 left taille=200> : vignette (200 pixels) alignée à gauche <img309 center taille=200> : vignette (200 pixels) centrée <img309 right taille=200> : vignette (200 pixels) alignée à droite On peut choisir d afficher l image taille réelle en remplaçant «img» par «emb» : <emb309 left>, <emb309 center> ou <emb309 right> Stage TICE novembre 2009 C. Thoré Page 11/14

17. Joindre des documents à un article ou à une rubrique Deux méthodes sont possibles pour joindre un document : Comme une image pendant l édition de l article ou de la rubrique, le lien sera présent dans le corps de l élément. Ou après l enregistrement de l article (ci-contre), le lien vers le document sera placé en dessous de l article. Les formats reconnus sont : documents «traitements de texte» word, openoffice,... des fichiers PDF, ce format est à privilégier pour la communication (les pages du site peuvent être exportées au format PDF) des animations au format flash: swf des vidéos au format flash vidéo : flv des fichiers sons au format mp3 : mp3 des fichiers compressés au format zip, dans ce cas le SPIP propose 2 options : o soit le fichier est conservé tel-quel et peut être téléchargé par les visiteurs o soit le fichier est décompressé et ses composants sont insérés comme documents joints à l'article ou à la rubrique.(pour un zip contenant des images elles sont incluses dans le portefolio) Stage TICE novembre 2009 C. Thoré Page 12/14

18. TP n 1 : Se connecter à l espace privé Se connecter avec les identifiants suivants : Nom d utilisateur «pnom» Mot de passe : jmoulin 1. Accédez à l espace privé 2. Complétez vos informations (qui êtes-vous et adresse email) 3. Modifiez votre mot de passe 4. Déconnectez-vous et reconnectez-vous pour tester votre nouveau mot de passe. 19. TP n 2 : Créer un nouvel article 1. Créez un nouvel article dans la rubrique «Stage» 2. Remplissez les champs utiles 3. Enregistrez et prévisualisez en ligne 4. Publiez en ligne 5. Visualisez en ligne (dans l espace public) 20. TP n 3 : Créer une rubrique 1. Créez une nouvelle sous-rubrique dans la rubrique «Stage» 2. Remplissez les champs utiles et enregistrez 3. Placez votre article dans cette sous-rubrique 4. Visualisez en ligne (dans l espace public) 21. TP n 4 : Utiliser la mise en forme enrichie 1. Modifiez votre article en utilisant les principaux raccourcis typographiques (gras, italique, surbrillance, intertitre, ) 2. Visualisez le résultat dans l espace public. 3. Créez des liens internes et externes 4. Visualisez le résultat dans l espace public. 5. Créez un tableau 6. Visualisez le résultat dans l espace public. Stage TICE novembre 2009 C. Thoré Page 13/14

22. TP n 5 : Insérer une image 1. Préparez, si besoin, l image avec photofiltre 2. Chargez l image dans votre article 3. Testez les différentes configurations possibles 4. Visualisez en ligne à chaque fois 23. TP n 6 : Joindre un document 1. Testez les deux méthodes pour joindre un document à votre article 2. Testez le téléchargement en ligne (espace public) 3. Même chose sur une rubrique. Stage TICE novembre 2009 C. Thoré Page 14/14