Caliméro, un nouvel outil du CCDMD pour créer des sites Web adaptatifs et accessibles

Par Réjean Jobin, coordonnateur des ressources, et Cathie Dugas, chargée de projets (CCDMD)

NDLR : Ce texte est paru en janvier 2013 dans le numéro 81 du bulletin CLIC.

Le Centre collégial de développement de matériel didactique (CCDMD) a publié de nombreux sites Web au cours des 10 dernières années. Ces sites offrent aux enseignants et aux étudiants l’accès à du matériel pédagogique adapté à leurs besoins. Dans le catalogue des produits, sur le site du CCDMD, on trouve 72 sites Web et, si l’on considère ceux qui sont actuellement en production, on prévoit qu’il y en aura environ 80 cette année. Le défi d’un organisme comme le CCDMD n’est pas seulement de développer des sites Web pour répondre aux besoins du réseau, mais aussi de maintenir à jour les sites en production ou déjà produits.

Un contexte complexe en constante évolution
À la fin des années 90, la popularité du Web nous avait facilité la tâche, en quelque sorte, pour ce qui était de rendre accessible notre matériel didactique. Il suffisait de produire un site et de s’assurer qu’il fonctionnait bien sur les principaux fureteurs. C’était la belle époque !, diraient certains.

Depuis quelques années, l’industrie nous a montré de quoi elle est capable pour favoriser l’accès à l’information. Ainsi, l’arrivée des téléphones intelligents, des tablettes, des systèmes d’exploitation qui s’adaptent à ces nouveaux outils, ou encore, la guerre des brevets, qui font apparaître ou disparaître des plugiciels, et l’adoption de nouvelles normes, tout cela complique quelque peu notre tâche.

Inutile de dire que tant la société que notre système éducatif suivent de près tous ces changements. Déjà de nombreux collèges et écoles ont décidé que téléphones intelligents et tablettes remplaceraient en partie leurs ordinateurs. De plus, l’adoption par le gouvernement du Québec de standards concernant l’accessibilité des sites Web introduit diverses contraintes lors du développement de sites. Bref, nous vivons actuellement une véritable métamorphose en ce qui concerne l’accès à l’information.

Une solution informatique souple et accessible
Dans un tel contexte, comment ajuster nos façons de faire pour maintenir l’accès au matériel didactique du CCDMD et continuer à développer des produits ?

La solution réside dans la recherche d’une nouvelle approche de développement qui tienne compte de la réalité d’aujourd’hui. C’est ainsi que le Centre a entrepris divers projets visant à mettre au point des outils permettant de produire et de maintenir à jour le patrimoine éducatif qu’il accumule depuis 20 ans. Le premier de ces projets est Caliméro. Il a été affectueusement baptisé ainsi à l’interne, comme nom de code, en référence au célèbre petit poussin noir d’une bande dessinée qui se promène toujours avec sa coquille sur la tête.

L’idée de mettre au point une « coquille » informatique qui servirait de modèle pour la création d’un grand nombre de sites Web nous est venue à la suite d’une analyse de l’utilisation des appareils mobiles et de leurs impacts sur l’ergonomie de nos sites.

Cette « coquille » devait tenir compte des diverses fonctionnalités de nos sites, particulièrement ceux qui offrent du matériel à libre accès (Maladie des arbres, Les poupons au service de garde, Simulation d’interventions policières, Le développement de l’enfant, Les gestes de la science, etc.), et permettre leur consultation au moyen de produits technologiques utilisés en éducation (téléphones, tablettes et ordinateurs), et ce, tout en tenant compte des standards d’accessibilité Web en vigueur afin d’en faciliter l’utilisation par toute personne, handicapée ou non. La « coquille » devait enfin simplifier la mise à jour et le suivi de l’évolution de nos sites.

Deux principes incontournables dans la mise au point de Caliméro
Le premier principe sur lequel nous nous sommes entendus était de travailler avec des logiciels libres (Open source) en raison de leur grande flexibilité, de leur performance et de leur accessibilité. Nous avons choisi d’utiliser un système de gestion de contenu (ou SGC, de l’anglais CMS : Content Management System) que nous pouvons modifier s’il le faut à notre guise. Le SGC devait, autant que possible, permettre de gérer facilement les standards d’accessibilité Web. Notre choix s’est porté sur Drupal, qui non seulement possède les caractéristiques recherchées, mais est supporté par une très grande communauté de développeurs. Drupal permet de réaliser les projets les plus variés (sites vitrines, communautés en ligne, réseaux sociaux, e-commerce, intranet, etc.). Ce SGC, qui a fait ses preuves dans divers secteurs d’activité, offre une grande flexibilité due à son architecture modulaire. Les personnes qui aimeraient en savoir davantage sur cet outil peuvent consulter le site http://www.drupalfr.org.

Nous voulions utiliser un SGC pour faciliter la maintenance de nos sites. L’objectif, c’était qu’il suffise de mettre à jour notre coquille et son système de gestion de contenu pour ensuite pouvoir mettre à jour tous les sites développés avec cette coquille. Voilà pourquoi Caliméro est bâti avec le SGC Drupal.

Le deuxième principe est l’emploi d’un design adaptatif. Cette façon de faire rend plus accessibles nos ressources. Le concept est simple : il suffit de construire un site qui s’adapte aux dimensions des différents appareils. Ainsi, les sites Web présentant des vidéos, comme celui de l’Activité-projet, qui sera le premier site à utiliser la coquille Caliméro, s’adapteront aux formats d’écrans d’ordinateurs, de tablettes comme le iPad et de téléphones intelligents comme le iPhone; les contenus varieront en fonction de l’appareil utilisé (la largeur de l’écran, son orientation), selon certaines déclinaisons (présentation sur une colonne pour un téléphone, deux ou trois colonnes sur une tablette, quatre colonnes sur un portable, etc.).

Différents formats d’écrans auxquels peut s’adapter un site Web

On pourrait penser que tout cela nécessite une programmation complexe, mais ce n’est absolument pas le cas. Le plus difficile, c’est de concevoir une interface graphique adaptée aux différents supports. Voici, pour mieux visualiser le concept, quelques pages-écrans du site Activité-projet, qui devrait paraître autour de février 2013.

Quatre déclinaisons en pixels pour le site Activité-projet : iPhone-320, iPad-420, Portatif-1024, grand écran-2200

C’est là que le concept de « design adaptatif » intervient : il faut que chaque appareil présente le design le mieux adapté. Pour y arriver, on utilise les requêtes de médias (media queries), qui sont des propriétés CSS permettant d’adapter une page HTML à différents types d’écrans et de résolutions.

Au fond, le plus complexe, c’est de mettre au point le design :

1. Repenser la densité informationnelle d’un site en donnant plus de place aux contenus et en les priorisant. Dans un site comme Activité-projet, ce sont les vidéos qui forment l’essence du site.
2. Mettre en place une interaction simplifiée (un nombre réduit de menus).
3. Permettre une meilleure visibilité des outils d’aide à la recherche (toujours accessibles).
4. Offrir une taille adaptée pour les éléments cliquables (boutons et espaces ajustés au type d’écran). 
5. Optimiser l’utilisation du pied de page.

Concrètement, cela implique une bonne réflexion lors de la conception du site. Par exemple, le nombre de menus principaux qui s’affiche est réduit à trois ou quatre items qui pourront se placer de différentes façons selon les tailles des écrans. Les espaces entre les boutons et les menus ainsi que leur grosseur pourront varier pour permettre une meilleure utilisation sur les écrans tactiles sans souris. Bien que cela semble simple, c’est par une conception fluide d’un site que cela doit passer. En utilisant un design adaptatif, on peut développer un site qui s’ajustera parfaitement à n’importe quelle taille d’écran.

Voilà donc l’essentiel du projet Caliméro, un outil maison que le CCDMD utilisera pour réaliser les sites Web de type banque de ressources (vidéos, images, PDF). Ainsi, vous verrez apparaître à partir de cette année sur les serveurs du Centre de plus en plus de sites Web adaptatifs. En quelques mois, le CCDMD devrait pouvoir refaire plusieurs de ses sites et non seulement les rendre ainsi plus accessibles, mais aussi les maintenir à jour plus facilement. Quand se produiront des changements technologiques, qu’il s’agisse de matériel ou de logiciel, Caliméro nous permettra de mettre à jour d’un seul coup un grand nombre de nos sites.

D’autres projets de développement d’outils en cours tiennent également compte de ces besoins. Ainsi, NetquizWeb permettra de maintenir plus facilement à jour les exercices que les utilisateurs auront élaborés. Un autre projet, intitulé Collige, rendra possible la création de sites Web impliquant du travail collaboratif et aussi, de récupérer tous les contenus de logiciels outils devenus désuets, tels Chronos et Interprète. Comme vous pouvez le constater, le CCDMD n’a pas l’intention de faire du surplace !