Refonte sites établissements

Contexte

Durant ces 10 semaines de stage, ma mission a été de repenser le design des sites établissements de l’Académie de Reims (premier et second degré), le tout, en mettant en place l’accessibilité RGAA (Référentiel Général d'Amélioration de l'Accessibilité) et WCGA (Web Content Accessibility Guidelines). Le RGAA définit une méthode technique et propose un cadre opérationnel de vérification de la conformité aux exigences d'accessibilité. Parmi elles, le contraste des couleurs, l’interlignage adaptés à une lecture simple... Quand à lui, le WCAG repose sur 4 principes fondamentaux : perceptibilité, utilisabilité, compréhension et robustesse. A savoir que les sites établissements sont des sites web proposées aux établissements de l’Académie de Reims afin qu’ils puissent l’alimenter et s’en servir comme vitrine de leur établissement. C’est aussi un support et un moyen d’informer les parents de la vie de l’établissement. A noter que ces sites sont conçus en multisite avec le CMS Wordpress.

Contribution

Dans un premier temps, j'ai réalisé l'analyse des sites existants. Il s'agissait de comprendre comment sont construits les sites actuels, quelles sont les informations indispensables à retrouver sur la nouvelle version des sites mais aussi comment rendre ces informations accessibles et facile à comprendre. J’ai donc rédigé un document dans lequel j’ai répertorié toutes les spécificités, qu’elles soient positives ou négatives, des sites établissements existants. Toutefois, j’ai également analysé les sites web d’établissements privées ainsi que mon bureau numérique (MBN). Le but était de comprendre au mieux comment sont hiérarchisées les informations mais aussi comment elles sont présentées. De fait, j’ai repéré plusieurs points d’amélioration : le choix des couleurs avec un contraste facilitant l’accès aux informations, la mise en place d'un design responsive (adaptabilité au format mobile et tablette), l'aération du contenu et la hiérarchisation des informations afin de faciliter la compréhension des informations, la mise en place du dark mode, indispensable pour la réduction de la fatigue visuelle, etc...

Ensuite, j’ai établi la palette de couleurs qui allait constituer les nouveaux sites établissements du premier degré (1D). À nouveau, le choix des couleurs est un élément primordial et celles-ci doivent être cohérentes. De ce fait, dans le but de garantir une certaine homogénéité entre les établissements du second et du premier degré, et pour les raisons évoquées dans le choix des couleurs du second degré, j’ai opté pour du violet comme couleur d’accent principal. J’ai donc sélectionné un violet un peu plus doux pour qu'il s’accorde au mieux avec l’esprit des établissements du premier degré. Néanmoins, je souhaitais ajouter un peu plus de couleurs pour dynamismer et rendre plus attractif le site. C’est pourquoi j’ai choisi des couleurs telles que le vert, qui évoque l’équilibre. Le violet évoque lui le calme et la créativité. Le orange quant à lui, rappelle la positivité et la bonne humeur. Le rose suggère l’optimisme. Enfin le bleu, faisant allusion au bien-être et à la sérénité. À noter que j’ai veillé au bon contraste des couleurs en me servant une nouvelle fois de l’outil Color Contrast Checker du site coolors.co.

Afin de faciliter l'utilisation, le développement et la maintenance des 50 sites établissements recensés pour l'Académie de Reims, l'utilisation d'un multisite était une solution la plus adaptée. Ainsi, j'ai développé un site parent neutre en intégrant et en créant une multitude de compositions que les établissements et donc les sites enfants, pourront réutiliser à leur convenance. Par la suite, je me suis ensuite attelée à la gestion des articles. Toutefois, il m’a fallu une réflexion préalable car il fallait trouver un moyen de séparer les articles selon leur classification (CDI, collège européen...). J’ai de ce fait créé des catégories dans lesquelles j’ai créé des articles. Cela m’a par la suite permis de n’afficher par exemple que les articles concernant le collège européen dans la page dédiée au collège européen. Également, j’ai créé des sous-catégories afin d’optimiser un maximum la gestion des articles et de l’affichage. Par exemple, pour le collège européen, j’ai créé dans la catégorie “Collège européen”, deux sous-catégories : “2023-2024” et “2024-2025”. Également, dans la même optique que pour les articles, à savoir la gestion simplifiée, j’ai dû réfléchir à la gestion des événements. Pour ce faire, j’ai téléchargé une extension, The Events Calendar, qui permet de gérer efficacement les événements sur un site web WordPress. J’ai donc là aussi créé des catégories et des sous-catégories afin de classer chacun des événements.

Après avoir intégré l'ensemble du contenu, j'ai pu identifier les modifications nécessaires au niveau du code, particulièrement pour l'implémentation du mode sombre. Ainsi, j'ai mobilisé trois outils : l'inspecteur de navigateur, l'invite de commande et FileZilla. L'inspecteur de navigateur s'est révélé indispensable pour localiser avec précision les éléments de mes pages web (classes, id...). Cette identification m’a ensuite permis de retrouver le fichier source correspondant et d'apporter les modifications nécessaires directement dans le code. Cependant, l'inspecteur ne fournissait pas toujours les différents chemins d’accès aux feuilles de style, et certaines modifications devaient être effectuées directement dans le code JavaScript ou PHP. Dans ces situations, l'invite de commande était l’outil idéal. Après avoir établie la connexion SSH*, je pouvais accéder aux fichiers de mon projet WordPress et j’utilisais la commande grep -Rni "element-recherche" depuis le répertoire concerné. Ainsi, je pouvais localiser toutes les occurrences de l'élément recherché à travers l'ensemble des fichiers du projet. Une fois le bon fichier trouvé, je pouvais y accéder et le modifier grâce à FileZilla, qui me permettait d’avoir accès à ces différents fichiers. Cet outil permet de transférer des fichiers d’un ordinateur à un serveur distant et inversement. C’est donc ici que j’ai rencontré la plus grande difficulté en termes de développement. Également, le fait d'avoir installé des extensions non native au thème que j'ai choisi, il a fallu revoir l'apparence de ces extensions. Par exemple, l'extension The Event Calendar permettant de gérer facilement les évènements. Lorsque l'on cliquait sur un évènement précis, tout un tas d'informations apparaissaient : espace commentaire, suggestions d'autres évènements, informations personnelles sur la personne ayant publié l'évènement... Toutes ces informations n'étaient pas utiles et n'avaient pas leur place sur un site comme un site établissement. Pour adapter cette extension, j'ai à nouveau utilisé l'invite de commande et la commande grep car il s'agissait là de masquer des bouts de code php entier. J'ai donc pris le partie de ne pas les supprimer complétement mais de commenter les lignes concernées. Ainsi, si émerge un quelconque besoin d'ajouter une section commentaire par exemple, il sera très simple de faire réapparaître de cette section.

Difficultés

La difficulté principale a été la customisation du thème WordPress. En effet, j'ai notamment ajouté la fonctionnalité du Dark Mode. Cela a impliqué de nombreux ajustement dans le code afin d'adapter les couleurs notamment.