Oukka.net, créer un site web à école

Une fois que l’on a maîtrisé les possibilités offertes par les éditeurs HTML, la tentation est forte de vouloir " en mettre plein la vue " et, pour imiter les sites commerciaux à la mode, de se lancer dans une débauche audiovisuelle, en intégrant des animations, des graphiques à profusion et des séquences sonores ou musicales. Il faut résister à cette tentation.

Pour des raisons communicationnelles, d’abord. L’usager ordinaire (que les concepteurs super-équipés avec du matériel de pointe ont tendance à oublier) n’a pas nécessairement la vitesse, la mémoire et les modules supplémentaires requis pour faire afficher rapidement les pages lourdement graphiques, pas davantage que le grand écran nécessaire à la visualisation de pages en haute résolution. Le site a beau être rutilant, si l’affichage de la page d’accueil prend trois minutes à charger tous les éléments, l’usager ordinaire sera déjà rendu ailleurs et ne verra rien de votre produit. Testez votre site avec un lien modem , un écran 640 x 480 et une allocation mémoire standard à votre fureteur. Vous aurez alors une idée très précise de ce qui est convivial ou pas pour votre visiteur (qui est, ne l’oubliez pas, votre destinataire, la raison d’être de votre site). Vous découvrirez sans doute, vous aussi, que " la modération a bien meilleur goût "!

Pour des raisons pédagogiques ensuite. Ce projet, ne l’oublions pas, est d’abord un prétexte à des apprentissages scolaires et ceux-ci risquent d’être oblitérés si l’élève consacre l’essentiel de son énergie à maîtriser des gadgets de programmation.

2- LA COHÉRENCE

Pensez encore à votre visiteur. Même si votre site contient de nombreuses sections et sous-sections (si chaque élève a sa page, par exemple), n’imposez pas à votre visiteur de devoir décoder chaque fois quelle procédure utiliser pour, par exemple, revenir à la page d’accueil ou accéder au sommaire du site.

L’interface générale de navigation doit être conçue globalement au départ. Les hyperliens ou les boutons permettant d’accéder à la page d’accueil, au sommaire du site et aux principales sections devront être regroupés dans un bandeau de navigation (ou dans un cadre — voir plus bas) facilement identifiable sur la page d’accueil. De même, des éléments de navigation (au minimum le bouton de retour à la page d’accueil) devront être présents sur chaque page du site, se présenter de la même façon et être localisés au même endroit sur l’écran.

Il faut aussi viser une cohérence esthétique : les couleurs ou les images de fond, les barres séparatrices, les couleurs des titres et les autres éléments graphiques devront, sans nécessairement être uniformes, présenter un " air de famille ". De même, la présence des hyperliens devra être signalée de la même façon (généralement par un choix de couleur spécifique et réservée) dans toutes les pages du site). Il importera donc de préciser au départ ce qui sera imposé d’office à toutes les pages à titre de normes de publication, ce qui devra être choisi parmi une liste prédéfinie et ce qui est laissé à la créativité de l’élève ou des équipes d’élèves.

3- LA LISIBILITÉ

Pensez toujours à votre visiteur. Si vous employez une image de fond, assurez-vous que tous les caractères du texte ressortent clairement. Règle générale, contrastez fortement les caractères et le fond (des caractères foncés sur fond pâle constituent habituellement le choix logique.

Évitez de définir vos propre polices de caractères dans l’éditeur HTML et tenez-vous en aux polices génériques; ainsi, si l’usager ne dispose pas de telle police précise dans son système, l’affichage se fera néanmoins sans problèmes. Si, pour un élément précis (un titre ou un logo, par exemple) vous tenez à une police particulière, il est préférable de gérer cet élément globalement comme une image (de type GIF ou JPG); vous serez ainsi assuré du même affichage sur n’importe quel ordinateur et avec n’importe quel fureteur. Soyez cependant conscient que si des clics en différents endroits de l’image doivent conduire à des endroits différents, il vous faudra définir des zones cliquables sur cette image (des " imagemaps ", en jargon); c’est simple, mais il faut savoir le faire.

Finalement, privilégiez des pages-écrans courtes, qui s’affichent rapidement et qui ne forcent pas l’usager à utiliser les barres de défilement. Un long texte a avantage à être fractionné en plusieurs écrans (avec un bouton SUITE au bas de chacun) plutôt qu’à être chargé entièrement dans une seule page interminable. La gestion des liens est un peu plus complexe, mais la facilité accrue pour l’usager en vaut la peine.

4- LA GESTION DES FICHIERS

Chaque fichier (c’est-à-dire chaque page et chaque image) doit être nommé. Si c’est une page, le suffixe du fichier doit être .html ou .htm. Si c’est une image, le suffixe doit obligatoirement être .gif ou .jpg. Le nom du fichier lui-même (qui précède le suffixe) ne doit pas contenir d’espaces ou de caractères accentués : un fichier que l’on souhaiterait nommer " école branchée " devra se nommer, par exemple, " ecolebranchee.html ". Sur certains serveurs (tous les serveurs UNIX, notamment), majuscules et minuscules ne sont pas indifférentes : un lien portant sur MonPortrait.html, par exemple, sera invalide si le fichier de destination se nomme en réalité monportrait.html. Pour parer à toute éventualité, choisissez une convention et imposez-la (par exemple : tout en minuscules; ou encore, la première lettre de chaque mot en majuscules et le reste en minuscules).

Donnez des noms " parlants " à vos fichiers; cela facilitera grandement la gestion de votre site. Un fichier nommé texte22.html ne vous dira pas grand-chose quelques semaines plus tard; s’il se nomme VisiteZoo.html, vous aurez une idée beaucoup plus précise de son contenu.

Organisez logiquement vos fichiers dans des sous-répertoires (ou dossiers), eux aussi nommés logiquement. Pensez que la place d’un fichier dans un sous-répertoire donné conditionne l’adresse URL du lien qui y conduit. Une fois que vous avez créé des hyperliens vers un fichier donné, sachez que renommer le fichier ou le déplacer vers un autre répertoire vient automatiquement de rendre invalides tous les liens qui y conduisaient et qu’il faut donc corriger à la main chacun d’eux. Une tâche qui peut devenir fastidieuse et colossale, et qui plaide en faveur de la stabilité!

Placez dans le même répertoire (dossier) toutes les images (.gif ou .jpg) communes (icônes, logos, barres séparatrices, flèches, boutons, etc.) et demandez à vos élèves de s’y référer lorsqu’ils les intègrent dans leurs pages. Vous vous assurez ainsi d’une cohérence de l’interface, vous vous donnez les moyens de modifier facilement d’un seul coup tel ou tel élément de l’interface et vous économisez de l’espace-disque sur le serveur en ne chargeant qu’un seul exemplaire de chaque image.

5- LES CADRES

Les Français en parlent, faut-il s’en étonner, sous le nom de " frames "! Il s’agit d’une technique d’interface consistant à subdiviser l’écran en fenêtres indépendantes. Bien utilisée, c’est une technique très puissante qui permet, par exemple, d’afficher en permanence un bandeau de navigation et de ne plus jamais s’en préoccuper ensuite dans la conception des autres pages du site. Il vaut certainement la peine de faire l’effort de comprendre et de maîtriser cette fonctionnalité du langage HTML.

Toutefois, certaines règles s’appliquent. Ne pas en abuser, en tout premier lieu : pas plus de deux cadres par page (en général, un cadre de navigation assez discret et un cadre principal servant à l’affichage). Ensuite, éviter l’emploi des barres de défilement dans le cadre de navigation : tous ses éléments doivent être affichés d’un seul coup à l’écran. Bien maîtriser le paramètre target dans le langage HTML, de façon que les liens affichent les bonnes pages dans les bons cadres. Et, finalement, vous assurer que les liens qui conduisent à l’extérieur de votre site portent bien le paramètre "TARGET=_top", pour ne pas imposer à votre visiteur la présence de votre cadre tout au long de son parcours sur le Web.

6- LA PAGE D’ACCUEIL

C’est l’élément le plus important de votre site et il exige une attention particulière. Non seulement s’agit-il de la vitrine (qui accrochera le visiteur ou pas et lui donnera instantanément une impression de l’allure générale du site) mais cette page est aussi le carrefour à partir duquel votre visiteur va s’orienterpour la suite de sa navigation). Sa mise en page doit être aussi soignée que la Une d’un journal.

Il est important, entre autres, de s’assurer de la présence des éléments suivants sur votre page d’accueil :

· le titre du site; il peut être fantaisiste (" Le placard à surprises ") ou descriptif (" le site des élèves de 5e de l’école Isaac-Newton, de Laval ");

· si cela n’a pas été fait dans le titre même, une identification claire de l’école et du groupe, de la ville et du pays (il faut penser aux visiteurs d’autres pays à qui la ville de Laval ne dira rien!);

· un lien ou un bouton vers un sommaire ou une carte du site, sorte de table des matières qui permettra au visiteur d’en avoir une vue d’ensemble;

· des liens vers les principales section du site (les " chapitres ");

· la date de mise à jour;

· un lien courriel pour recueillir les commentaires des visiteurs.

Une démarche

Il est évident que c’est la mise en ligne initiale du site qui mobilisera le plus d’énergie, car elle exige des prises de décision (vocation, titre, page d’accueil, conception graphique globale) qui détermineront le cadre à l’intérieur duquel s’effectueront les éventuelles mises à jour. Nous vous proposons ci-dessous les grandes étapes d’une démarche qui conduira à la réalisation de la mise en ligne initiale: les mises à jour ultérieures n’en reprendront que les éléments pertinents.

1) LES PRÉALABLES

On suppose tout d’abord que les élèves ont déjà navigué sur Internet et qu’ils sont à l’aise avec le langage et l’allure générale du Web. Si ce n’est pas le cas, il faut différer la réalisation du site Web scolaire et assurer d’abord ce préalable.

Même avec des élèves à qui le Web est familier, un tel projet ne s’annonce pas de but en blanc en classe sans une préparation soigneuse du terrain. Essentiellement, cette phase vise à réunir deux préalables :

· la motivation des élèves à réaliser un site Web;

· la connaissance de base des caractéristiques d’un site Web, avec les possibilités et les contraintes inhérentes à ce mode de communication.

Deux approches sont possibles. Dans le premier cas, on invite les élèves à visiter et à analyser des sites Web scolaires . Il est fort possible que le fait de voir ce que d’autres classes ont réalisé leur donne l’envie de les imiter. Dans le second cas, on s’efforce de faire émerger le besoin d’un projet de communication d’abord, d’orienter les élèves vers le site Web comme un moyen de satisfaire ce besoin et, finalement, de leur faire connaître les caractéristiques essentielles de ce médium..

La visite, l’étude et la comparaison de divers sites devraient permettre aux élèves de découvrir les caractéristiques énoncées précédemment (un ensemble de fichiers textuels et graphiques, aisément navigable, cohérent et régulièrement mis à jour) et d’en dégager les principales constantes :

· graphiques : titre, logo, icônes, boutons, bandeaux de navigation, fonds, textures, tableaux, couleurs, etc.

· formelles : le rôle particulier de la page d’accueil, titrage et sous-titrage, lignes séparatrices, cadres, etc.

· structurelles : distinction entre textes d’information, d’opinion et d’expression, liens avec l’actualité,

2) LA VOCATION DU SITE

C’est au cours de cette étape que se prennent les décisions, évoquées précédemment, relatives à l’intention de communication. Elle peut être de :

· faire connaître les élèves, leurs activités, leurs réalisations, leur groupe, leur école ou leur milieu;

· traiter de sujets ou de thématiques qui les intéressent (loisirs, vedettes, sports, musique, mode juvénile…);

· refléter l’actualité (locale, mais aussi régionale, nationale ou internationale : plusieurs sites scolaires se donnent comme vocation de choisir des événements de l’actualité générale et de les expliquer dans un langage de jeunes).

Un site peut aussi combiner plusieurs de ces vocations. Il s’agit aussi, à ce stade, d’envisager de façon large l’ensemble du site, y compris avec ses possibilités futures d’expansion, et pas nécessairement ce que sera mis en ligne lors du lancement.

Il est souhaitable que ce travail s’effectue de façon collective : brainstorming, formulation d’hypothèses, critique et, finalement, prise de décision — par vote si nécessaire.

3) LA MAQUETTE ET LES NORMES DU PUBLICATION

On détermine ici le cadre graphique général qui sera commun à toutes les pages du site et qui encadrera la forme et la présentation des textes et des images.

Voici, entre autres, les éléments faisant partie d’une maquette générale d’un site:

· le titre du site, le graphisme et la couleur de ce titre, son logo s’il y a lieu, sa localisation sur la page d’accueil et, s’il y a lieu sur les principales pages d’entrée des sections;

· l’identification de la classe, de la ville et du pays;

· l’interface de navigation (boutons, bandeau de navigation, cadres, etc.);

· la structure de la mise en page et, particulièrement, l’utilisation des cadres ou des tableaux;

· la page d’accueil : son contenu et ses repères de navigation.

· la longueur moyenne des textes;

· les normes de publication : couleur ou texture de fond, taille et couleur des caractères utilisés pour le texte ainsi que pour les titres et sous-titres (pour les raisons évoquées plus haut, on travaillera avec une police générique et on ne se préoccupera donc pas de cet aspect). Vu le caractère technique de ces normes et la nécessité d’une cohérence globale, il serait souhaitable que l’enseignant fournisse à ses élèves des matrices électronique (c’est-à-dire des fichiers HTML vierges de contenu, mais déjà pré-formatés).

À l’exception des normes de publication qui relèvent, comme on vient de le dire, de l’enseignant, il est souhaitable que la maquette fasse l’objet d’une élaboration collective ou, au minimum, d’une prise de décision finale par le groupe. Cette partie du projet est l’endroit idéal pour exploiter une approche compétitive-coopérative : il peut être très intéressant d’organiser un concours pour trouver le titre du site ou de demander à différentes équipes de préparer un schéma de disposition de la page d’accueil — le groupe choisissant ensuite le meilleur des projets présentés.

Finalement, de façon à donner aux élèves une représentation concrète du produit final, il sera utile de fournir quelques exemples de fichiers HTML respectant les normes de publication mais exploitant des dispositions différentes : par exemple un album de photos avec leurs légendes, ou un texte disposé en blocs à l’aide d’un tableau, etc.

4) LE PLAN DU SITE

Il s’agit, essentiellement, d’un travail de contenu. Indépendamment des modalités de réalisation (que l’on déterminera à l’étape suivante), on fixe ici ce que doit et peut contenir la page (ou la section) personnelle de chaque élève. De même, on détermine les textes à produire, le sujet de chacun, sa longueur approximative et la section où ils logeront dans le site. Même si, lors du montage final du site avant sa mise en ligne, des changements peuvent toujours être apportés, on devrait néanmoins, au terme de cette étape, avoir une idée assez claire du contenu de chaque page.

Une fois cela décidé, l’enseignant devrait produire le squelette du site. On entend par là qu’il crée un fichier HTML vierge pour chaque texte à produire, lui donne un titre et le relie à l’interface de navigation. Ainsi, même avant que les élèves n’aient commencé à produire le contenu, tout le monde sait ce que va contenir le site, où on va trouver chaque texte à partir de la page d’accueil et de la table des matières et y parvenir effectivement. Il s’agit là non seulement d’une source de motivation importante pour les élèves qui voient rapidement leur site prendre forme, mais aussi d’un outil indispensable de coordination des travaux.

Le contenu dépend évidemment des choix effectués précédemment quant à la vocation et à la structure générale du site. Pour les sections générales du site, il faut, au terme d’un brainstorming et d’une discussion collectifs, choisir les sujets des textes et des images en prenant en compte des critères de diversité, d’intérêt des lecteurs et d’actualité. S’il y a des sections thématiques, il faut explorer les divers aspects du thème et s’assurer d’en couvrir les principales facettes.

5) L'ORGANISATION DU TRAVAIL

Si l’on exclut la mise en ligne, le travail de réalisation comporte deux grandes phases: la rédaction et la production.

La rédaction comporte la recherche d’information, l’écriture des textes, leur saisie et leur révision linguistique. Entre aussi dans cette phase la recherche ou la réalisation des illustrations.

La production comporte la mise en page, le formatage, le traitement graphique et l’établissement des hyperliens.

Pour la rédaction, les modèles possibles d’organisation du travail sont nombreux. Chaque élève aura-t-il un texte à écrire? Certains textes seront-ils écrits en collaboration? Lesquels requièrent une recherche préalable, une visite ou une entrevue? Lesquels sont liés à un événement précis dans le temps? Utilisera-t-on des mécanismes de compétition (deux élèves ou groupes d’élèves présentant des propositions différentes pour un même texte)? Les élèves devront-ils élaborer un plan de leur texte et le faire approuver avant de le rédiger? Tout le travail doit-il se réaliser en classe ou une partie peut-elle se réaliser à l’extérieur, sous forme de travaux personnels? La révision linguistique des articles sera-t-elle effectuée par l’auteur? Par un autre élève? Par un comité d’élèves? Par l’enseignant? Quel usage sera fait des correcteurs électroniques? Des apprentissages technologiques (principalement des techniques de traitement de texte et d’édition HTML) sont-ils à prévoir pour que les élèves puissent réaliser la saisie de leurs textes? Quelles illustrations sont à rechercher ou à réaliser?

Il est à noter que des questions similaires se posent même si le contenu rédactionnel du site est peu considérable et si le site est davantage orienté vers les arts, le graphisme ou la photo, voire le multimédia.

En tenant compte des réponses à ces questions, du temps à allouer aux élèves pour chacune des tâches, on établira un échéancier qui précisera, pour chacun des élèves concernés, la date à laquelle devront avoir été accomplies les tâches qui leur auront été attribuées, ainsi qu’une date de tombée. À cette date, tous les textes et toutes les illustrations du numéro devront être disponibles dans leur forme définitive, en fichiers HTML pour les textes, accompagnés des fichiers graphiques GIF ou JPG qui y seront intégrés pour les illustrations. On précisera aussi une date de lancement, qui sera celle de la mise en ligne du site sur le serveur.

La phase de production devrait être relativement brève si l’on a pris soin de travailler avec des matrices et des normes de publication claires. Il s’agit essentiellement d’équilibrer harmonieusement les textes et les éléments graphiques, d’aérer la mise en écran par des sous-titres ou des barres séparatrices, d’exploiter (mais avec modération) la couleur pour certaines mises en relief, à fractionner en plusieurs écrans successifs les pages trop denses, etc., etc.

Chaque élève le fait pour sa page (ou sa section) personnelle. Pour les sections collectives, on répartit le travail entre diverses équipes.

Le travail final de production (navigation complète du site, vérification de la cohérence de tous les liens, approbation finale du contenu et mise en ligne) devrait être pris en charge par l’enseignant.

6) LA DIFFUSION

Le travail ne s’arrête pas avec la mise en ligne du site, surtout si on entend lui donner un caractère évolutif et permanent. Il faut ensuite le faire connaître. Des projets de marketing du site, propices à de nombreux apprentissages diversifiés, peuvent utilement prolonger la réalisation proprement dite du site.

Logique oblige, il faut d’abord penser à un marketing électronique. Si, par exemple, on inscrit le site dans les principaux moteurs de recherche, il faudra penser à en rédiger une courte description. Si l’on souhaite que le site soit inscrit sur les liens recommandés par tel ou tel site pédagogique, les élèves auront l’occasion d’apprendre à écrire une lettre au responsable de ce site et de la lui faire parvenir par courrier électronique. On peut aussi faire partie de cercles d’écoles qui correspondent, échangent des fichiers ou même travaillent en commun à la réalisation d’un projet qui pourra ensuite être mis en ligne sur leurs sites respectifs. Les possibilités sont quasi-infinies et ne sont pas à négliger.

Il faut aussi penser à informer la communauté locale (au premier titre, les parents, mais aussi les autres élèves de l’école) du lancement de ce nouveau site scolaire. Lettres publicitaires, affiches, kiosque interactif à l’occasion d’une visite de parents sont autant d’occasions de créer des projets de communication subsidiaires qui viendront enrichir le projet principal.

7) L'ENTRETIEN ET LA MISE À JOUR

La suite des travaux dépend évidemment des décisions qui auront été prises concernant la dynamique du site. Sauf si l’on a choisi de laisser le site dans son état initial et de passer ensuite à autre chose, il faudra bientôt prévoir des séances de travail collectif pour déterminer ce que l’on produira dans les semaines ou les mois suivants pour enrichir et développer le site. Il faudra de même identifier dès maintenant les pages du site qui sont " périssables " (parce que collées sur l’actualité, par exemple) et qu’on devra (en précisant pour quelle date) retirer ou remplacer.

De même, si des pages du site comportent des liens vers des sites extérieurs (c’est le cas de rubriques du type " Nos sites préférés ", par exemple), il faut régulièrement vérifier si ces liens sont toujours valides. Si les sites vers lesquels pointaient ces liens ont déménagé ou disparu (et les choses vont vite, sur le Web!), il faudra rectifier ou remplacer ces liens.

L'évaluation

Il importe ici de distinguer trois objets d'évaluation bien différents : l'évaluation du produit, l'évaluation de la démarche et, finalement, l'évaluation des apprentissages.

1) LE PRODUIT

Il s'agit ici d'effectuer, collectivement, un retour critique sur le produit final. Le respect du plan et de la maquette, l'intérêt et la pertinence des textes et des illustrations, la qualité linguistique, la clarté et la lisibilité de la mise en page, la qualité de l'impression sont les principaux critères sur lesquels devrait porter cette évaluation.

Cette évaluation doit, bien entendu, être placée dans une optique prospective : qu'est-ce qui est à conserver et qu'est-ce qui est à corriger lors de la production du prochain numéro? Faut-il remettre en question certaines décisions qui ont été prises pour ce numéro?

2) LA DÉMARCHE

De la même façon, collectivement (cela peut se réaliser au cours de la même séance), on invitera le groupe à son fonctionnement lors des diverses étapes du projet : répartition des tâches, attribution des responsabilités, respect des engagements, qualité des prises de décision collectives, fonctionnement des diverses équipes, souci d'entraide, capacité de critique constructive, débrouillardise sont les principaux aspects à évaluer et à débattre. Logique oblige, la contribution de l'enseignant devrait elle aussi faire partie de cette évaluation!

Là aussi, le retour sur la démarche doit d'abord viser à améliorer le fonctionnement futur.

3) LES APPRENTISSAGES

L’évaluation des apprentissages est évidemment conditionnée par les compétences que l’enseignant aura choisir de développer à travers ce projet. Il s’agira aussi bien de compétences disciplinaires (en français et en arts plastiques pratiquement d’office, plus d’autres programmes qui peuvent être touchés par le contenu de certains textes) que des compétences transversales.

Nous voudrions ici insister plutôt sur l’importance de s’assurer que chaque élève aura eu l’occasion d’effectuer l’ensemble des apprentissages prévus (les mêmes pour tout le monde) et qu’il sera évalué sur ses apprentissages personnels, et non sur ceux de son équipe ou de son groupe. Si des tâches sont réalisées en équipe et si le jugement final porte sur le produit de l’équipe, il faudra aussi se donner les moyens d’identifier la contribution individuelle de chaque élève.

Finalement, il convient de rappeler que si l’auto-évaluation et l’évaluation par les pairs ont toute leur utilité dans l’évaluation formative, l’évaluation sommative demeure la responsabilité de l’enseignant. S’il choisit (ce qui est correct) d’y intégrer des jugements d’autres provenances, il lui incombe toujours de superviser et de valider ces derniers.

retour