Mise en production du site de l'Office for Climate Education

Les objectifs du projet

La fondation La Main à la pâte abrite l’Office For Climate Education (OCE), une fondation qui vise à promouvoir l’éducation au changement climatique. L’OCE est en charge d’un réseau international composé d’institutions scientifiques, d’ONG, d’institutions scolaires, destiné à proposer des ressources pédagogiques. La fondation a confié à notre équipe la refonte de son site www.oce.global avec Drupal 8 incluant la conception UX et UI, le développement et l’intégration, l’optimisation SEO et de la performance, et enfin la maintenance préventive du site pendant 5 ans.

Le projet devait répondre aux objectifs principaux suivants : 

• Offrir une banque de ressources pédagogiques multilingue ; 
• Favoriser la communication autour des projets et les échanges entre enseignants et scientifiques ; 
• Proposer une plateforme de travail collaboratif permettant aux acteurs du réseau de produire des ressources ; 
• Proposer une plateforme permettant un accès dynamique aux contacts sur le terrain ; 
• Partager et communiquer sur l’institution de l’OCE ainsi que les partenaires du réseau. 

Les enjeux majeurs de cette refonte se sont concentrés sur l’optimisation de l’expérience utilisateur pour une recherche intuitive de ressources, et la mise en place de certaines fonctionnalités pour faciliter le travail collaboratif entre les acteurs du réseau.  

Les particularités UX et UI 

Riche de ses documents, l'enjeu principal, en matière d'expérience utilisateur, a consisté à proposer une recherche efficace.  

• Un système de filtres à facettes, avec un rafraîchissement des résultats en temps réel (Ajax) ; 
• Une mise en avant des ressources et des workshops en page d’accueil pour permettre un accès rapide aux derniers contenus publiés ; 
• Un bouton "Accessibilité", qui permet de régler les contrastes ainsi que la taille des textes pour une lecture adaptée au besoin ; 
• Un système d’onglets dans les pages éditoriales qui permettent de naviguer plus facilement entre les différents contenus ; 
• Un espace personnel où l’utilisateur peut personnaliser ses informations, retrouver rapidement les contenus mis en favoris ainsi que proposer ses propres publications ; 
• Proposer une dimension collaborative et de partage en permettant à l’utilisateur d’ajouter ses propres contenus et de compléter son profil utilisateur pour apparaître en autres sur la carte du réseau de l’OCE (Network).

Du côté du design d’interface, nous étions en charge de l’élaboration de la charte webdesign, basée sur la charte graphique très colorée de l’OCE composée de 7 couleurs. 

Les fonctionnalités principales 

Le site propose les fonctionnalités suivantes : 

• Multilinguisme : le site est disponible en quatre langues (FR, EN, DE, ES) et supporte les langues latines et non latines (chinois, arabe). 
• Workflow : un système de workflow simple a été mis en place. Le circuit de publication concerne les contenus (brouillon, publié, etc.) mais également la validation des inscriptions à un groupe de travail appelé workshop. 
• Workshop : le site propose une fonctionnalité de gestion de groupes de travail (workshop). Les utilisateurs consultent des contenus associés après s'être inscrits au workshop, publient des ressources sur un groupe de travail, etc. 
• Network – carte interactive : cette rubrique propose une carte interactive qui permet à l’utilisateur de trouver des membres ou des institutions près de chez lui. En plus de la carte, la rubrique propose également un champ libre de saisie ainsi que des filtres pour affiner la recherche. 
• Moteur de recherche multicritères à facette : un système de recherche avancé a été mis en place sur l’ensemble du site avec un champ de saisie libre et des filtres à facettes.
• Espace utilisateur : un espace personnel est disponible et permet aux utilisateurs de gérer leur profil ainsi que leurs contenus (mise en favoris de contenus, création et publication de ressources…)
• Gestion des médias : le site propose des fonctionnalités de gestion des fichiers multimédias (images, vidéos, documents PDF, …)
• Newsletter : le site propose une fonctionnalité d’abonnement à la newsletter de l’OCE. 
• Partage sur les réseaux sociaux/ téléchargement/ impression : des boutons sont disponibles pour le partage sur les réseaux sociaux et également pour le téléchargement des ressources et l’impression des pages de contenus. 

Cadre technique – Drupal 8 

Nous avons développé la plateforme avec Drupal 8. Pour répondre au besoin du projet, nous avons utilisé les principales modules suivants : 

• Group : ce module permet de créer des groupes comme entités à part entière. Chaque groupe peut intégrer des utilisateurs, configurer ses propres rôles et permissions. Dans le projet OCE, nous avons jugé intéressant d’utiliser Group pour administrer les groupes d’utilisateurs partageant des ressources communes, une fonctionnalité sollicitée pour les workshops. 
• Media : module de référence pour la gestion des fichiers multimédias (images, vidéos, fichiers…). 
• Flag : ce module permet de gérer des favoris.
• Leaflet : nous avons préconisé cette librairie Open Source pour mettre une carte de style Google Map à disposition des utilisateurs - avec un fond de carte Open Street Map, pour la partie Network permettant de présenter les acteurs et partenaires du réseau OCE. 
• Search API : ce dernier permet de proposer une recherche avancée avec Solr au sein du site. Combiné avec le module Facets, nous avons crée des filtres dynamiques pour affiner la recherche.

Quelques particularités techniques...

Le besoin demandé a impliqué certaines particularités techniques, dont : 

• L’accessibilité : le projet a demandé un niveau d’accessibilité de niveau AA du RGAA. Cette exigence a été contrainte par le fonctionnement du cache de Drupal. En effet, dans son environnement de production, Drupal sert le même code html à tout le monde. Il a par conséquent fallu ajouter en Ajax une ou plusieurs classes CSS et exclure la réponse Ajax du cache Drupal pour que cela soit appropriée aux paramétrages de chacun. 
• La carte Network : La demande de la carte Network pour présenter le réseau de l’OCE a nécessité un développement sur-mesure pour permettre l’affichage du détail d’un utilisateur à côté de la carte (chargement Ajax). 

Pour aller plus loin : https://oce.global/fr/