DASI – Pôle web – Coralie Vilport

14

Charte web académique des établissements Principes éditoriaux, graphiques et techniques

1

Avant-propos

La présente charte web académique des établissements accompagne la mise en œuvre du premier service « Mise à disposition d’un modèle de site établissement » proposé par la Direction Académique des Systèmes d’Information (DASI) de l’académie de Montpellier.

Elle présente les points clés à respecter tant d'un point de vue graphique, qu'éditorial.

En tant que document de référence, la charte web académique des établissements est mise à disposition des chefs d’établissement ayant souscrit une demande de service auprès de la DASI.

Conformément aux recommandations ministérielles et à la stratégie web du ministère de l’éducation nationale ( B.O. N°21 du 26 mai 2011), l’académie de Montpellier a engagé depuis fin 2010 une démarche de rationalisation web afin d'améliorer la lisibilité des sites web académiques pour l'usager.

Cette démarche a pour objectif de garantir la cohérence des sites web de l’académie (site grand public, espace des personnels, portail Intranet, sites des directions des services départementaux, etc.)

A partir de 2014, les autres sites sous la responsabilité du rectorat (sites disciplinaires, sites de circonscription, sites d'école, de collège ou de lycée, etc.) sont ou seront concernés par la démarche de rationalisation web.

Il s'agit d'offrir aux internautes, quel que soit leur point d'entrée sur les sites de l’éducation nationale, un ensemble de contenus et de services en ligne cohérent, régulièrement actualisé et répondant aux nouveaux usages des supports numériques.

Les recommandations exposées dans la charte web académique des établissements font référence à la charte web ministérielle, la charte web des sites internet publics et la charte de l’internet de l’Etat.

La DASI est à votre disposition pour vous conseiller et vous accompagner dans votre projet de rénovation du site web de votre établissement.

Il s'agit d'offrir aux internautes […] un ensemble de contenus et de services en ligne cohérent, régulièrement actualisé et répondant aux nouveaux usages des supports numériques. (B.O. n°21 du 26 mai 2011)

2

1. PRESENTATION DU SERVICE « MISE A DISPOSITION D’UN SITE WEB D’ETABLISSEMENT »............................................................................................................................ 3

2. LE SITE WEB DE L’ETABLISSEMENT : LES GRANDS PRINCIPES ILLUSTRES ........................................................................................................................................................ 5

3. CHOIX GRAPHIQUES ET ERGONOMIQUES GENERAUX ............................................................................................................................................................................... 6

3.1. ORGANISATION DE L’INFORMATION ....................................................................................................................................................................................................................... 6 3.2. SYSTEMES DE NAVIGATION ..................................................................................................................................................................................................................................... 7 3.3. LA PAGE D’ACCUEIL ............................................................................................................................................................................................................................................. 8 3.4. LA PAGE DE RUBRIQUE .......................................................................................................................................................................................................................................... 9 3.5. LA PAGE DE CONTENU ........................................................................................................................................................................................................................................ 10 3.6. LES STYLES DU THEME « ETABLISSEMENT » ................................................................................................................................................................................................................ 11

4. L’IMAGE....................................................................................................................................................................................................................................................... 12

4.1. PLACE ET ROLE DE L’IMAGE DANS LE SITE DE L’ETABLISSEMENT .................................................................................................................................................................................. 12 4.2. LA BANQUE D’IMAGES ........................................................................................................................................................................................................................................ 13 4.3. TYPOLOGIE DES ILLUSTRATIONS ............................................................................................................................................................................................................................. 14

5. LA CONTRIBUTION AU SITE WEB ETABLISSEMENT ....................................................................................................................................................................................... 15

5.1. LES ROLES .......................................................................................................................................................................................................................................................... 15 5.2. LA CHAINE DE VALIDATION ET ACCES AUX CONTENUS ............................................................................................................................................................................................ 15 5.3. LA LIGNE EDITORIALE ........................................................................................................................................................................................................................................... 16

6. BONNES PRATIQUES POUR METTRE EN VALEUR SON SITE .......................................................................................................................................................................... 17

6.1. VALORISER L’ACTUALITE ...................................................................................................................................................................................................................................... 17 6.2. SOIGNER LA REDACTION DE TOUS LES CONTENUS ................................................................................................................................................................................................... 17

7. LES MENTIONS LEGALES .............................................................................................................................................................................................................................. 19

3

1. Présentation du service « Mise à disposition d’un site web d’établissement »

En 2013, la Direction académique des systèmes d’information (DASI) de l’académie de Montpellier s’engage dans la mise en œuvre de son catalogue de services.

Le service « Mise à disposition d’un modèle de site établissement » offre aux établissements un site web d’établissement basé sur le socle technique DRUPAL, respectant les recommandations de la charte graphique ministérielle. Le site est hébergé dans le réseau sécurisé de l’académie et maintenu en conditions opérationnelles par les services de la DASI.

Les demandes de service « Mise à disposition d’un modèle de site établissement » sont faites par le chef d’établissement à partir du :

portail Intranet de l’académie, rubrique Services et outils informatiques > Catalogue de services > Mise à disposition d'un site web établissement site « Le numérique - L'ENT », rubrique Les autres usages du numérique > Les sites d'établissement

4

L’établissement bénéficiaire n’a pas à négocier, ni payer ces prestations et bénéficie de l’accès gratuit aux supports d’accompagnement, d’assistance et de formation.

Les engagements de l’établissement sont :

Accepter la présente charte web établissement Désigner un webmestre pour :

o gérer le site web o participer à la formation « « gestion et alimentation d’un site web

d’établissement sous Drupal » o être l’interlocuteur unique avec le pôle d’assistance académique

Les données à fournir par l’établissement sont : Coordonnées du responsable de l’établissement et d’un webmestre, RNE (UAI) de l’établissement

5

2. Le site web de l’établissement : les grands principes illustrés

Le choix de langue permet d’offrir un site multilingue. L’identité de l’établissement (1) est valorisée par l’ajout d’un slogan personnalisé et d’un Label d’excellence.

Une navigation horizontale (2) offre une visibilité sur l’ensemble des thématiques et leurs sous-niveaux par l’apparition d’un méga-menu déroulant. Les menus En ce moment et A ne pas manquer placent les informations valorisées en accès rapide.

Actualités en deux parties :

4 actualités défilantes et 4 actualités courantes avec vignette

Une place plus importante accordée à l’image pour accentuer les événements les plus attendus.

Une organisation de l’actualité courante en quatre accroches avec vignette. Un accès simplifié à l’ensemble des actualités courantes.

Zones d’accès pratiques (3) : Présentes sur l’ensemble du site, les zones de services offrent - un lien de connexion à l’ENT (ou accès au site « le numérique-l’ENT ») - des listes de raccourcis vers des infos internes ou externes au site (CDI, Menus cantine, activités de l’internat, …) sous forme de pictogrammes - un agenda dédié aux évènements à venir.

Six zones de remontées de ressources thématiques, d’informations pratiques, de publications récentes organisées par mot clé / tags.

Zones de liens partenaires (4), institutionnels, pratiques.

Une zone de contact (1) avec les coordonnées de l’établissement et un accès à un formulaire de contact protégé.

Une zone de logos des partenaires territoriaux. Une zone de liens en pied de page (5) : Connexion, Mentions légales, …

6

3. Choix graphiques et ergonomiques généraux

L’architecture de l’information du modèle de site web d’établissement, c’est-à-dire l’organisation des contenus pour aider l’utilisateur à répondre à ses besoins en information, a été définie par le groupe utilisateurs, représentant des usagers.

Elle est faite sur la base des contenus existants et attentes exprimées, de leur regroupement par affiliation et de leur niveau de hiérarchie. Ces étapes concourent à définir une organisation ergonomique basée sur la rapidité d’accès à l’information, la cohérence des regroupements d’information et la clarté de l’organisation des contenus.

3.1. Organisation de l’information

Le modèle de site web d’établissement se base sur un thème pour définir la structure de ces pages sur l’ensemble du site.

Des éléments permanents, présents sur l'ensemble du site, permettent une cohérence et une harmonisation. Ils sont conservés sur chaque gabarit spécifique qui structure les différents types de page (page d'accueil, page de rubrique, page de contenu, etc.). La zone d’entête et la zone de contact(1), les menus de navigation (2), les zones d’accès pratiques et d’informations complémentaires (3), la zone de liens partenaires (4), la zone de pied de page (5) composent ces éléments permanents.

A retenir : L’architecture de l’information doit répondre aux besoins d’information de l’usager et non pas être le simple reflet de la structure organisationnelle de l’établissement scolaire.

A retenir La conception graphique du site respecte le principe du responsive webdesign. C’est –à-dire qu’elle ne propose qu’un seul et unique design qui s’adapte parfaitement à toutes les tailles d’écrans, qu’il s’agisse de celui d’un smartphone, d’une tablette ou de celui d’un ordinateur de bureau.

7

Les choix graphiques et ergonomiques tiennent compte des critères d'accessibilité conformément au référentiel général d'accessibilité des administrations (RGAA).

3.2. Systèmes de navigation

Le modèle de site web établissement est livré avec un système de navigation défini par le thème principal : menus de navigation, menus contextuels, navigation par mot-clés, etc.

Des contenus reliés entre eux de manière efficace permettent une navigation cohérente et garantissent la satisfaction des usagers.

Ceux-ci pourront alors se concentrer sur le contenu présenté dans le site et non pas sur la recherche et la compréhension des mécanismes de navigation permettant d’y avoir accès.

Grâce à une navigation claire, et une organisation de l’information par zones correctement identifiées, l’usager comprend rapidement où aller chercher l’information et comment y accéder.

Chaque parcours de navigation étant différent selon les usagers, il est conseillé de concevoir une navigation multiple entre chaque contenu d’information (liens internes, mot-clé, navigation principale, liens pictos, …).

A retenir : Il est primordial que la position des éléments du système de navigation soit respectée pour fournir un parcours cohérent sur l’ensemble des pages du site.

8

3.3. La page d’accueil

La page d’accueil est organisée en zones d’information distinctes :

Le zonage permet :

- d’organiser et de hiérarchiser l’information. - d’aérer la page, sans dépasser sept zones par page - d’attribuer à chaque zone une fonction et un type d’information

Zones d’identité : - Logo académique cliquable, logo établissement et nom de l’établissement cliquables pour un retour à la page d’accueil - Informations de contact

Zones de navigation : -Menu principal -Menu « En ce moment » -Liens partenaires -Pied de page

Zones d’actualité -Actualités défilantes -Actualités tièdes -Agenda des événements

Zones d’informations secondaires -Informations par thème ou par mot-clé

Zones accès pratiques - « A ne pas manquer » - « C’est pratique »

9

3.4. La page de rubrique

La page de rubrique et de sous-rubrique donne un aperçu rapide du contenu.

Elle se compose de :

une accroche sous forme de chapô* de rubrique, c’est-à-dire un texte court qui introduit un contenu plus dense. une entrée vers chaque niveau inférieur par une description ou, à défaut, le début de contenu de chaque niveau. A l’aide d’un titre court et d’une illustration adaptée, chaque entrée est valorisée et la rubrique agréablement agencée pour une consultation optimale.

Pour maintenir l’équilibre d’une page de rubrique, le nombre d’entrées vers les niveaux inférieurs doit être à minima de 2 et au maximum de 6.

A retenir : Les internautes malvoyants utilisent des navigateurs à synthèse vocale. Aussi, les intitulés des liens et titres doivent être courts et explicites. L’usage des acronymes en tant que lien, est à éviter ( ex : MDL , CVL, ..)

10

3.5. La page de contenu

La page de contenu est à la fois un point d’entrée sur le site de l’établissement et le résultat d’une recherche d’informations. Il est alors nécessaire de soigner sa présentation pour permettre à l’usager de poursuivre sa navigation de la manière la plus agréable.

La page de contenu sert à présenter une information plus complète, très souvent sous forme d'article.

La rédaction des contenus doit être simple, logique et ordonnée : titre, chapô, sous-titres, corps du texte, images, encadrés.

Les illustrations (photos, images, logos) doivent faire l'objet d'un traitement et de demandes d'autorisation avant usage, si nécessaire. Elles seront soigneusement choisies et agencées pour respecter l’équilibre de la page et offrir une lecture agréable.

La lecture sur Internet n'est pas une transposition de la lecture papier. Il est important de limiter la longueur des pages de contenu à trois écrans en résolution 1024x768 avec une taille de police standard.

Dans le cas d'un article très long, une navigation interne (exemple : un sommaire propre à la page) peut être nécessaire.

La page de contenu est très souvent enrichie d’informations complémentaires sous forme de fichiers à télécharger (formulaire, plaquette de communication, ...) ou de liens vers des sites web externes.

A retenir : L'information principale doit toujours figurer dans la page web et ne doit pas être contenue uniquement dans un fichier téléchargeable. Les liens internes, externes, ou de téléchargement doivent être régulièrement contrôlés et, le cas échéant, mis à jour.

11

3.6. Les styles du thème « établissement »

Afin d'harmoniser l'ensemble des contenus du site web d’établissement, un thème spécifique aux établissements a été développé.

Ce thème contient l'ensemble des caractéristiques de mise en forme associées aux éléments textuels et aux images.

Les styles sont définis dans un document unique appelé feuille de styles.

La feuille de styles est un fichier informatique rédigé à l'aide d'un langage de balisage (CSS)

permettant de mettre en forme un contenu.

A retenir : L’usage des styles du thème garantit l'harmonisation de l'ensemble des contenus et une mise en forme soignée et rapide.

12

4. L’image

4.1. Place et rôle de l’image dans le site de l’établissement

Le modèle de site web d’établissement laisse une part importante à l’image. Ainsi, dès la page d’accueil, l’image est valorisée dans les actualités défilantes et accompagne chacune des actualités de second niveau.

Il est préconisé de renforcer l’utilisation de la photo afin d’illustrer les différentes événements de l’établissement.

Comme indiqué dans le chapitre précédent, le thème conditionne l’affichage des images et s’applique sur tous les terminaux de consultation selon les principes du responsive webdesign. Aucune adaptation préalable de format n’est nécessaire.

Exemple de l’actualité défilante :

Affichage sur ordinateur de bureau

A retenir : Tout reportage photo doit faire l’objet de demandes d’autorisation de droit à l’image, pour les élèves comme pour les adultes. La responsabilité du directeur de publication du site, en l’occurrence le chef d’établissement, est engagée. Aucune photo ne peut être mise en ligne sans avoir recueilli les autorisations.

Affichage sur tablette

Affichage sur smartphone

13

4.2. La banque d’images

Le modèle de site web d’établissement contient une banque d’images accessible depuis chaque type de contenu.

Les services de la Direction académique des Systèmes d’Information (DASI) et la cellule Communication du Rectorat fournissent une trentaine de photos génériques libres de droit achetées à partir d’une banque d’image en ligne (Fotolia) ou mises à disposition par le Ministère de l’Education nationale.

A leur chargement à partir des types de contenu, l’image reçoit un traitement d’affichage adapté pour respecter l’harmonisation du site.

L’usage des images requiert quelques règles strictes qu’il est bon de rappeler à tout contributeur d’un site web.

La responsabilité du chef d’établissement en tant que directeur de publication du site web de l’établissement est engagée.

Sources : Fotolia, Delcom MEN

14

4.3. Typologie des illustrations

Le choix des illustrations est fait selon le type d’actualité et les niveaux d’information.

Images liées à une campagne nationale ou académique

- utiliser les visuels transmis par le ministère (ex : rentrée scolaire, mon orientation en ligne, ...)

- veiller à ne pas changer leur aspect : couleur, logo, etc.

Photos génériques (page d'accueil, page de rubrique)

- utiliser les photos génériques mises à disposition dans la médiathèque ou utiliser les banques d’images libres de droit

- rester dans le cadre professionnel (pas de photos touristiques) - la photo doit être explicite et illustrer l'environnement scolaire français

Photos illustrant des événements dans l’établissement ou des sujets de terrain

- utiliser les photos réalisées dans le cadre scolaire lors des événements - demander une autorisation explicite des personnes concernées lors des

reportages - légender les photos pour les sujets de terrain

15

5. La contribution au site web établissement

5.1. Les rôles

Le modèle de site web d’établissement possède 4 rôles. Chaque rôle possède ses propres permissions.

Par ordre de permissions décroissantes, les rôles sont :

‐ Responsable : ce rôle est exclusivement réservé au chef d’établissement ‐ Webmestre : ce rôle est attribué par le chef d’établissement au personnel désigné en tant que webmestre ‐ Valideur (ou validateur) : ce rôle permet de créer des contenus et de valider la publication ou non d’un contenu proposé ‐ Contributeur : ce rôle permet de créer des contenus dont la publication sera soumise à validation ‐

La création des utilisateurs et l’attribution de rôle est réservée au responsable du site et au webmestre.

Lorsque l’utilisateur est un personnel de l’académie, il est conseillé de se baser sur ses identifiants académiques pour créer son compte utilisateur dans le site de l’établissement. Lorsque l’utilisateur n’est pas un personnel de l’académie et ne dispose pas d’identifiants de messagerie académique (ex : élève), le webmestre et/ou responsable lui attribue un nom d’utilisateur et l’adresse de messagerie de son choix.

La procédure de création est détaillée dans le guide pratique du webmestre, disponible sur le portail intranet académique.

5.2. La chaîne de validation et accès aux contenus

En tant que responsable du site web de l’établissement, le chef d’établissement est garant de l’intégrité des informations publiées.

La publication des contenus est réservée aux rôles de responsable, webmestre et valideur, désignés par le chef d’établissement.

Lorsqu’un contributeur n’a pas les droits nécessaires pour publier, alors une chaîne de validation avec notification est mise en place, permettant ainsi aux rôles valideur, webmestre et responsable d’avoir une action de modération sur la publication ou non des contenus.

16

Chaque contenu possède trois états : « brouillon », « nécessite vérification » et « publié ». Seuls les contenus dont le statut est « publié » sont accessibles à tous les usagers du site.

5.3. La ligne éditoriale

Le site web d’établissement suit les recommandations éditoriales fixées dans les directives ministérielles sur la communication numérique.

Dans le respect de ces recommandations, le chef d’établissement veille à faire appliquer les meilleures pratiques pour la rédaction des contenus web et respecter les standards établis pour une lecture optimale sur l’ensemble des supports numériques.

La cohérence éditoriale entre les sites de l’Education nationale doit être une préoccupation constante des responsables de site.

Pour garantir la qualité et la fiabilité des contenus, le chef d’établissement peut mettre en place un comité rédactionnel réunissant les contributeurs-auteurs. Ce comité permet de prioriser les choix d’information et de valorisation des actions de l’établissement sur le site.

A retenir : Le responsable et le webmestre ont accès à tous les contenus du site (pages web, fichiers, images, …), peu importe leur état. Ils peuvent ainsi intervenir simplement et rapidement sur le site si besoin.

17

6. Bonnes pratiques pour mettre en valeur son site

6.1. Valoriser l’actualité

Un site régulièrement actualisé permet de répondre aux attentes de ses usagers et est souvent mieux consulté.

La page d’accueil reste la vitrine d’un site web et nécessite une actualisation régulière, voire quotidienne. Néanmoins, l’actualisation des contenus concerne l’ensemble du site.

Actualisation et réactivité

S’assurer chaque jour que l’information est toujours d’actualité.

Faire vivre la page d’accueil pour garantir l’attractivité du site

Proposer l’information officielle de référence sur les sujets d’actualité en renvoyant vers la page dédiée du site www.ac-montpellier.fr ou www.education.gouv.fr

Proximité et complémentarité

Valoriser les initiatives dans l’établissement (ateliers pédagogiques, concours, radio, événements sportifs, …)

Inciter l’utilisateur à « aller plus loin » et fournir des liens transversaux vers d’autres contenus du site ou vers des sites complémentaires

6.2. Soigner la rédaction de tous les contenus

La lecture sur écran ne répond pas aux mêmes codes que la lecture sur papier. La grande majorité des internautes « balayent » ou « scannent » les contenus d’une page web. C’est-à-dire qu’ils parcourent rapidement une page afin de savoir si l’information recherchée s’y trouve.

Malgré la diversité des supports numériques actuels et l’amélioration dans le confort de lecture, l’internaute se fatigue plus rapidement la vue sur un écran que sur un support papier.

Pour faciliter la consultation de votre site web d’établissement, quelques règles d’écriture sont bonnes à savoir et à appliquer :

18

Suivre la règle des 3 clics : page d’accueil > rubrique > page Faire court : un texte court et bien organisé, une thématique par page, éviter la dispersion d’information dans plusieurs pages Hiérarchiser et structure l’information : aller à l’essentiel, séparer l’information principale des compléments d’informations Adopter un langage clair : éviter le jargon, expliciter les sigles, choisir un langage accessible, informatif et direct Rendre votre site accessible à tous : respecter lors de la rédaction les normes d’accessibilité définies dans le Référentiel Général d’Accessibilité pour les Administrations (https://references.modernisation.gouv.fr/rgaa-accessibilite) (ex : texte alternatif à une image, libellés des liens lisibles,…)

19

7. Les mentions légales Conformément à la loi pour la confiance dans l’économie numérique (LCEN) de juin 2004, les sites web des établissements sont fournis avec une page « mentions légales » à compléter à l’aide de vos informations :

nom du chef d’établissement nom et contact du webmestre hébergement et maintenance DASI crédits photos : MEN, Fotolia,…

Cette page sert à identifier les différents responsables du site et, le cas échéant, à informer du numéro de déclaration du traitement auprès de la Commission Nationale Informatique et Libertés (CNIL).

La CNIL fournit des modèles types de mentions légales depuis son site http://www.cnil.fr/vos-obligations/informations-legales

Depuis 2006, la CNIL dispense les établissements scolaires du second degré de déclaration lorsque ceux-ci mettent en place un site vitrine, à condition qu’ils respectent la dispense n°7 (http://www.cnil.fr/documentation/deliberations/deliberation/delib/107/)