Conception et Développement Web au Canopé / Pôle...

MASTER2 MANAGEMENT DE L’INNOVATION

Spécialité Ingénierie et Management de la Formation en Ligne

2015 – M2 MI – IMFL

CABRÉ Allan

CONCEPTION ET DEVELOPPEMENT WEB AU CANOPE / POLE NUMERIQUE

DE L'ACADEMIE DE CRETEIL

ENCADRANTS :

E. DELOZANNE F. LARSONNEUR

Résumé

Ce stage réalisé au sein du pôle numérique de Créteil dans le service développement du

Canopé a été l’occasion de contribuer à de nombreux projets depuis septembre 2014, en

soutien des équipes éditoriales. Les plus importants seront détaillés assez rapidement dans

la première partie de ce mémoire. Mon implication a été particulièrement importante dans

la remise à plat d’un projet de squelette modulaire pour spip 3, l’organisation d’un travail

en équipe, puis la conduite d’un projet de déploiement de ce squelette à l’ensemble des sites

de circonscriptions du 1er degré de l’académie, y compris l’accompagnement et la formation

des utilisateurs amenés à utiliser le logiciel développé sur un nouveau système serveur.

Développement web,

Gestion de projet,

Cycle de conception,

Accompagnement des utilisateurs

Remerciements

Je voudrais remercier ici l’ensemble des enseignants et intervenants rencontrés depuis 2013

en DU IFL, M2 IMFL et Androide, pour leur investissement auprès des étudiants, leurs

regards croisés et riches sur les pratiques professionnelles, leurs veilles technologique,

documentaire, pédagogique soutenues, pour leur point de vue critique autant

qu’enthousiaste, en bref la passion qu’ils ont su nous communiquer pendant ces deux

années.

Parmi les professeurs, un remerciement tout particulier pour Elizabeth Delozanne qui a

toujours été un phare auprès des étudiants qui ramaient face au vent dans leur petite

barque… la plupart sont arrivé à bon port, alors je lui souhaite à son tour un vent favorable

vers les berges paisibles auprès desquelles elle accostera...

Merci à François Larsonneur, Elie Allouche, Noémie Bernard, et Jean-Marc Labat du Pôle

numérique de Créteil, ainsi qu’à Chris, Marylène, Isabelle, Florian, Eric, Dominique, Patrice

et toute l’équipe pour leur accueil immédiat et chaleureux au sein du Canopé et de la Dane,

et je ne dis pas ça seulement pour les croissants du vendredi matin...

Remerciement spécial à ma chérie et aux deux monstres qui ont su me supporter (dans les

deux sens du terme) lors des périodes universitaires intenses depuis bientôt deux ans.

Merci enfin à Bertrand Marne pour ses copieux et précieux commentaires « inline », dont

voici un extrait légèrement adapté qui résume parfaitement plusieurs centaines d’heures de

travail durant ce stage :

// ### Je ne sais pas trop à quoi ça sert,

// ### mais il ne faut pas effacer le bout de code ci-dessous…

Sommaire

Résumé ...................................................................................................................................... 1

Remerciements ......................................................................................................................... 2

Introduction - Contexte ............................................................................................................ 4

I – Projets et missions ............................................................................................................... 5

I.1 ) Projet « M2G » (septembre à novembre 2014, mai 2015) .............................................. 5

I.2) Projet « CNRD » : (janvier 2015 et mai 2015) .................................................................. 8

I.3) Projet « Apprendre avec le Jeu Numérique » (juin 2015) ............................................. 10

I.4) Autres Projets et activités support ................................................................................ 11

Forum Virtu@liteach : (octobre 2014) ....................................................................... 11

Salon Educ@TICE (fin novembre 2014) : ................................................................... 11

Histoire des arts au collège (mars 2015) : .................................................................. 11

Chaine éditoriale « Canopé Créteil » : ....................................................................... 12

II - Projet Mélusine 2 (décembre 2014 à mai 2015) ................................................................. 13

Présentation du projet .......................................................................................................... 13

Contexte ................................................................................................................................ 15

Première étape : Appropriation du projet ........................................................................... 15

Définition du problème............................................................................................. 16

Organisation du travail en équipe ............................................................................. 17

Deuxième étape : Maturation du développement.............................................................. 18

Troisième étape : Déploiement ........................................................................................... 20

Quatrième étape : Accompagnement des usagers ............................................................. 24

Formations, Réunions, Contacts .............................................................................. 24

Site support .............................................................................................................. 25

Bilan intermédiaire (Evaluation) ........................................................................................ 26

Conclusion ............................................................................................................................... 28

Références ............................................................................................................................... 29

Annexes ................................................................................................................................... 30

Introduction - Contexte

Canopé de Créteil ? Pôle numérique ?

Les Centre Départementaux et Régionaux de Documentation Pédagogique (CRDP, CDDP,

SCEREN-CNDP) ont vécu : ils sont désormais redéployés en réseau1, dont le nom Canopé a

été choisi en hommage à la richesse de l’écosystème homonyme, sa diversité et les échanges

qui s’y déroulent2. Quant à sa lettre É final accentuée, le visuel reprend évidemment celui

du ministère de l’Éducation pour signifier son fort ancrage dans le monde éducatif.

Le nouveau réseau dispose d’une « tête » nationale (administrative et technique) sise au

Futuroscope de Poitiers, mais aussi de nombreuses antennes de proximité accueillant le

public : les « Ateliers Canopé », et enfin plusieurs directions territoriales où se dérouleront

les activités de production éditoriale transmédia et de coordination événementielle.

L’académie de Créteil, de son côté, fait valoir depuis plusieurs années une volonté de

promotion du numérique éducatif qui se traduit in fine par la mise à disposition de ses

personnels dans de nombreux projets développés conjointement par le Canopé, la Dane, ou

le Clemi. Cette coopération est localement estampillée « Pôle numérique » car elle permet

de répartir au mieux les compétences et les moyens humains, notamment en conception,

développement et accompagnement des projets sans se soucier du « service » académique

à leur origine.

C’est dans ce contexte de transformation du CRDP de Créteil en une composante de la

future direction territoriale Ile de France que j’ai intégré à mi-temps le service

développement du Canopé en septembre 2014, pour travailler sur des projets portés par le

pôle numérique de l’académie de Créteil.

Recruté en tant qu’expert TICE chargé de développement, mes missions consistent en

grande partie à de la programmation et des tests d’applications logicielles à destination

pédagogiques, ainsi que l’accompagnement des usages par les enseignants et les corps

d’inspection (Fiche de poste en Annexe 1).

1 Création du nouvel établissement national et des statuts juridiques du réseau : décret n° 2014-1631

du 26 décembre 2014

2 Canopée : « Etage sommital de la forêt tropicale humide, qui abrite la majorité des espèces y vivant. » (Petit Larousse, 2007)

Les premières tâches qui m’ont été confiées au sein du Canopé m’ont permis de me former

progressivement à de nombreux outils de développement et de langages ou technologies

dont je n’avais pas une connaissance poussée, tels que le PHP, les framework JavaScript, le

CSS et la compilation LESS, les Expressions Régulières, la manipulation de bases SQL, le

YAML, les CMS3 Drupal et Spip, entre autres.

Assez rapidement, j’ai également été mis à contribution pour l’assistance de plusieurs

projets éditoriaux portés par le pôle transmédia du Canopé, ce qui explique la quantité assez

importante de projets cités plus avant dans ce mémoire. Je ne développerai donc dans une

première partie que ceux pour lesquels ma contribution aura été notable, de façon à peu

près chronologique, puis une deuxième partie de ce mémoire sera consacrée à un projet qui

m’aura occupé plusieurs mois et dont j’ai assuré la conduite avec ma collègue Noémie

Bernard : le projet Mélusine.

I – Projets et missions

Voici en résumé, différentes missions qui m’ont été confiées depuis le mois de septembre et

les activités que j’ai été amené à développer.

I.1 ) PROJET « M2G » (SEPTEMBRE A NOVEMBRE 2014, MAI 2015)

Adresse : http://edu.museedelagrandeguerre.eu/

Description :

Le Musée de la Grande Guerre du pays de Meaux est à l’origine d’une commande au Canopé

afin d’offrir des points d’entrée pédagogiques destinés aux enseignants et au public scolaire.

Le site du musée dispose d’une section « espace pédagogique » qui renvoie vers notre

« edu ». Il s’agit donc d’un site web jumelé au site du musée proprement dit, dont la gestion

et les contenus sont assurés par nos équipes documentaires et vidéastes, sous contrôle de

publication par le musée.

En particulier, la charte graphique du site pédagogique est donc imposée par celle du site

du musée.

3 Content Management System ou Système de Gestion de Contenus (SGC)

http://edu.museedelagrandeguerre.eu/

Activités réalisées :

Dès mon arrivée au Canopé, une de mes premières tâches fut justement d’harmoniser les

thèmes visuels utilisés par notre site en cours d’achèvement, pour leur faire correspondre

du mieux possible au modèle du site du musée, sachant que celui-ci a été intégré avec

d’autres outils, au rendu forcément un peu différent :

Figure 1 : Comparaison des bandeaux d’entêtes des deux sites (en haut celui du musée)

Pour cela, j’ai dû me former à une série d’outils, de systèmes et de technologies de

développement employées sur le site :

- Formation au système de gestion de contenu Drupal 7 et aux technologies utilisées

sur ce site en cours de finalisation :

- Système de vues et de thème Drupal

- Templates HTML5 / PHP

- Import-export de base de données SQL

- Définition de modules Drupal (PHP)

- Utilisation de taxonomies

- Intégration de vues dédiées à des types de contenus variés : Liseuse ePub/PDF, Vue

3D rotative à 360°, frise chronologique adaptative (finalement non implémentée)

- Intégration d’icône contextuelle dans les vignettes en fonction du support

document, d’après une taxonomie

- Mise en conformité de la charte graphique avec le site du musée, placement de

logos, nombreuses adaptation de styles CSS.

- Compilation LESS pour la gestion des CSS paramétrés.

- Media queries CSS pour adapter l’affichage au cas de petits afficheurs

Figure 2 : Icône et message contextualisé au type de contenu de chaque bloc

Le site a été préparé et mis en ligne avant le 11 novembre, mais j’ai été amené à retravailler

dessus au mois d’avril, lorsque le musée nous a demandé d’intégrer un système d’affichage

des visites guidées : « parcours découvertes » ou « ateliers pédagogiques » (des contenus qui

avaient été apparemment oubliés) avec la possibilité de filtrer ces éléments par niveau

scolaire. Nous avions très peu de temps à consacrer au développement de cette

fonctionnalité « de dernière minute » alors François Larsonneur m’a demandé de l’épauler

sur l’intégration de la page tandis qu’il effectuait des essais pour tenter d’intégrer dans les

vues/thèmes actuels un module sous AngularJS capable d’effectuer cette sélection

multicritères sur les éléments taxons.

Nous avons finalement réussi à implémenter un tri à la fois plus puissant et plus esthétique

que ce qui nous était demandé, en combinant une recherche plein texte et des cases à cocher

avec un tri instantané qui rafraichit l’affichage sans rechargement de page.

Figure 3 : Sélection multicritères pour les visites « Ateliers pédagogiques »

I.2) PROJET « CNRD » : (JANVIER 2015 ET MAI 2015)

Adresse : https://www.reseau-canope.fr/cnrd/

Description :

Le portail officiel des ressources pour le Concours National de la Résistance et de la

Déportation présente ses dossiers documentaires pédagogiques annuels sur un site

maintenu par le Canopé de Créteil.

L’ensemble du site est centré sur le concours de l’année, et ne permet pas de diversifier

l’affichage d’un dossier pédagogique reliés à l’actualité, mais pas forcément au concours

proprement dit. Ce fut le cas cette année à deux reprises, tout d’abord à l’occasion des 70

ans de la libération du camp d’Auschwitz (proche du thème mais pas un axe de travail

officiel), puis lors de l’entrée au Panthéon au mois de mai de 4 figures de la résistance.

https://www.reseau-canope.fr/cnrd/

Activités :

Mise en ligne d’un axe pédagogique déconnecté du concours annuel : Anniversaire de la

libération d’Auschwitz en janvier, ( https://www.reseau-canope.fr/cnrd/axe/auschwitz ).

Pour cela, j’ai dû détourner de son usage un style d’affichage dédié aux axes des dossiers

documentaires, tout en adaptant le style pour cacher les éléments superflus, puis créer une

redirection d’url dans le CMS Drupal afin d’avoir une adresse d’accès signifiante.

Un procédé similaire a servi au mois de mai pour la mise en ligne de l’événement « Panthéon

2015 » des quatre grandes figures de la résistance.

https://www.reseau-canope.fr/cnrd/axes/pantheon2015

Figure 4 : Adaptation du thème CNRD pour l'événement Panthéon 2015

https://www.reseau-canope.fr/cnrd/axe/auschwitz

https://www.reseau-canope.fr/cnrd/axes/pantheon2015

I.3) PROJET « APPRENDRE AVEC LE JEU NUMERIQUE » (JUIN 2015)

Adresse : http://jeuxvideo.crdp-creteil.fr/app/#/

Description : Apprendre avec le Jeu Numérique est un projet en cours de réalisation, pour

une commande ministérielle destinée à intégrer le portail Eduscol. L’objectif du projet est

de transformer une base de données de scénarios pédagogiques développée par le CRDP de

Créteil depuis plusieurs années pour les publier.

Activités :

Participation à la conception de l’interface du futur site de référence sur les jeux sérieux et

aux besoins d’adaptation de l’indexation des données lors de la migration depuis l’ancienne

base.

Formation au développement de modules avec AngularJS. Interfaçage de ces modules avec

une API de requête générant du JSON indépendamment du CMS.

Figure 5 : Aperçu d'une fiche pédagogique (travail préliminaire)

http://jeuxvideo.crdp-creteil.fr/app/#/

I.4) AUTRES PROJETS ET ACTIVITES SUPPORT

Parmi les activités que j’ai été amené à pratiquer durant ce stage, parfois parallèlement à

d’autres projets, je souhaite citer mon implication dans quelques activités de co-design ou

de communication pour différents projets dans lesquels je n’ai pas été directement partie

prenante, mais plutôt dans un rôle de testeur ou de soutien d’équipe :

Forum Virtu@liteach : (octobre 2014)

Le projet Virtualiteach est une plateforme d’apprentissage immersif basée sur les

technologies de Réalité Virtuelle et un ensemble d’applications logicielles pour les sciences

et techniques industrielles, notamment pour les nouveaux baccalauréats STI2D. Un site

forum authentifié devait permettre des échanges entre les éditeurs de la plateforme, les

corps d’inspection, les enseignants et les élèves concernés.

Conception en équipe de l’interface et de la structure des données de ce forum à partir du

cahier des charges client. En particulier, nous avons étudié la gestion des droits utilisateurs,

et la forme adéquate à donner aux questions et aux réponses modérées.

Site web : (accès réservé)

Salon Educ@TICE (fin novembre 2014) :

Salon majeur à portée nationale des professionnels de l’éducation et des nouvelles

technologies pédagogiques et multimédia.

Participation au stand « Académie de Créteil » à l’occasion de sa mise en place avec les

équipes Dane et Canopé, où se sont déroulées des présentations de matériels innovants et

de projets éditoriaux publiés récemment par les diverses composantes du Pôle numérique

de Créteil.

Site web : http://www.educatec-educatice.com/

Histoire des arts au collège (mars 2015) :

Participation aux bêta-tests sur différentes plateformes pour ce projet éditorial transmédia,

publié en tant qu’ouvrage numérique.

Site web : http://hist-arts2015.canope-creteil.fr/

http://www.educatec-educatice.com/

http://hist-arts2015.canope-creteil.fr/

Chaine éditoriale « Canopé Créteil » :

Projet initié et développé en interne du pôle développement Canopé, par François

Larsonneur et Jean-Marc Labat, afin de se doter d’outils génériques d’édition et de

modification de la forme finale de publication d’un même contenu transmédia.

La chaîne inclut un éditeur de contenus XML en ligne avec gestion multi-utilisateurs et de

workflow, et les outils de transformation vers la forme finale souhaitée (HTML5, ePub, PDF

par exemple). Ce projet a été mis en avant au niveau national pour une réutilisation au sein

d’autres équipes Canopé, même si un développement important reste à accomplir.

Ma contribution à ce projet, limitée, s’inscrit dans les réflexions d’équipe, l’aide à

l’élaboration de présentations et à de l’assistance lors des nombreux essais.

Site web : (accès réservé)

II - Projet Mélusine 2 (décembre 2014 à mai 2015)

PRESENTATION DU PROJET

Mélusine est le nom donné à un système de squelette en plug-in pour SPIP 3. Il s’agit d’une

commande de l’académie de Créteil via le pôle numérique, qui a souhaité faire évoluer la

solution d’hébergement proposée aux webmestres, en particulier les sites qui revêtent une

parenté institutionnelle (les sites de disciplines du second degré, les missions spécifiques,

les circonscriptions du 1er degré, mais aussi les sites d’établissements.)

Les éléments-clés du cahier des charges initial, étaient :

- l’utilisation d’un CMS éprouvé, robuste, simple d’accès et de mise en œuvre pour

des webmestres et des rédacteurs néophytes : Spip ;

- une grande modularité des éléments affichables sur la page ;

- une cohérence visuelle entre les sites, identifiés comme institutionnels.

Le développement d’un squelette académique pour SPIP s’inscrit dans un long historique

avec de nombreux intervenants qu’il m’est impossible de citer ici. A l’origine, il semble que

le plug-in « DATICE » fut une adaptation (« fork ») du célèbre jeu de squelette Sarka-spip.

La version actuelle de Mélusine est issue d’une réécriture par Bertrand Marne et Jean-Marc

Labat, librement inspirée du framework Z-core et d’autres plug-ins majeurs tels que

Noizetier.

Daniel Guillon-Legeay, webmestre du site de la DANE, a travaillé sur l’élaboration d’une

charte graphique et ses choix d’agencements ont été validés pour une intégration par défaut

dans le squelette Mélusine.

L’une des originalités majeures du squelette Mélusine est le fait de posséder un mode de

configuration en « front-office administrateur ». Là où la plupart des squelettes en plug-ins

pour Spip ont un très long menu de configuration dans le back-office pour préciser, par

exemple le nombre et l’emplacement des modules de contenus enfichables, dans Mélusine

tout se fait de façon graphique à partir de l’affichage public enrichi de cadres et de boutons

contextuels.

Voir pour comparaison les figures 6 et 7 ci-après :

Figure 6 : « Affichage public » du site (enrichi pour le webmestre)

Figure 7 : « Configuration Mélusine » avec blocs visibles et boutons contextuels

L’objectif de ce projet est de fournir un squelette modulaire aux établissements, aux sites

disciplinaires, aux circonscriptions du 1er degré, facile d’emploi et simple d’accès à des

rédacteurs néophytes, voire à des webmestres débutants.

La DSI4 du rectorat de Créteil gère l’hébergement et les mises à jour du moteur Spip 3 pour

augmenter la sécurité et décharger cette maintenance technique des usagers.

CONTEXTE

J’ai intégré l’équipe-projet à partir du mois de novembre, au moment où Jean-Marc Labat

s’en éloignait progressivement afin de se focaliser sur d’autres projets tels que la chaîne

éditoriale… Noémie Bernard est donc devenue développeuse principale du projet, bien

qu’elle n’ait pas participé à sa genèse.

A cette époque, le squelette avait été jugé suffisamment stable pour être déployé sur le site

officiel de la DANE 5 ( http://dane.ac-creteil.fr ). De nombreux webmestres des sites

disciplinaires ou de missions académiques qui avaient engagé une rénovation de leur site

étaient en attente de pouvoir profiter du nouveau squelette. Entre autres les sites de SVT,

Economie/gestion, ASH6, CARDIE7, Philosophie.

Enfin il est important de noter, puisqu’il s’agit d’un projet porté par la DANE, que le chef de

projet « naturel » était l’IA-IPR référent (« le DAN ») Claudio Cimelli, qui ne fut pas

remplacé immédiatement lors de son départ pour le ministère en septembre.

PREMIERE ETAPE : APPROPRIATION DU PROJET

De mon point de vue, le projet semblait bien avancé, le squelette étant déjà diffusé pour des

tests, et des contacts ont pris avec la DSI pour démarrer un déploiement à plus grand échelle.

4 Direction des Systèmes d’Information 5 Délégation Académique au Numérique Educatif (ex-Datice) 6 Aide à la Scolarisation des élèves Handicapés 7 Cellule académique recherche, développement, innovation, expérimentation

http://dane.ac-creteil.fr/

Définition du problème

Arrivant avec un regard neuf sur ce projet, ma première tâche a été de traquer les bugs et

de répertorier un maximum de problèmes : visuels, fonctionnels, ergonomiques… J’en ai

profité pour réaliser une inspection « experte non formelle », c’est-à-dire un bêta-test

systématique de chaque bouton, chaque menu, afin de noter mes impressions d’utilisateur

et les bugs éventuels.

Il n’y eut pas besoin de procéder à une inspection heuristique ou à l’étude d’un scénario

d’utilisation pour détecter des problèmes majeurs d’ergonomie de l’interface. A titre

d’exemple, le webmestre du site de la DANE avait une peine immense pour comprendre

l’agencement des cadres dans Mélusine, et si ses actions avaient été prises en compte lors

du moindre clic. Une raison toute simple expliquait sa confusion : le cadre mis en avant par

le survol de la souris impliquait un voile blanc sur le reste de la page, qui avait pratiquement

le même aspect que lorsqu’une page est en cours de rechargement. Il ne savait donc jamais

s’il cliquait sur un cadre inactif ou si la page se rechargeait.

De même, un manque flagrant de feedback lorsque des paramètres étaient modifiés (‘‘mes

actions ont-elles été prises en compte par le système ?’’)

De nombreux dysfonctionnements ont été relevés, et d’autres éléments étaient de nature à

freiner la bonne marche du projet :

- La pluralité de concepteurs, développeurs impliqués dans diverses parties du code

- le fait de travailler avec des sites déjà en production, obligeant à conserver une

compatibilité qui empêche des remaniements profonds, ou nécessite de mettre en place des

procédures de mise à jour en base, pas toujours bien prévisibles.

- la complexité du système de gabarits proposé (héritage des layouts d’anciens plug-ins)

- nombreux interlocuteurs ayant chacun leur avis à donner,

- Peu ou pas (ou plus) de pilotage du projet, qui entraine des soucis de coordination du

développement et de priorisation de tâches.

- Pas de cahier des charges formalisé

Dans les points positifs, on peut citer

- une structure de code saine,

- un CMS connu et éprouvé

- de nombreux intervenants prêts à tester des versions intermédiaires et à nous faire

part de retours avec leurs contenus « en situation réelle ».

- une grande liberté pour les choix de conception.

Organisation du travail en équipe

Les collègues de la DANE qui s’occupent du site participent à la réflexion sur l’ergonomie et

à la récolte de bugs : Eric Jousse, Dominique Fazilleau, Daniel Guillon-Legeay.

Pour coordonner les efforts et optimiser le travail collaboratif, plusieurs avancées sont

proposées :

- Elaboration d’une feuille tableur partagée (via Google docs) pour récapituler les

bugs ou les suggestions d’améliorations : ToDo-list unique

- Démarrage d’un SVN

- Commentaire systématique du code

- Points informels quotidiens sur l’avancée de chacun

- Réunions plus fréquentes avec les équipes de la DANE, avec les webmestres

testeurs, avec le nouvel IA-DAN Philippe Roederer

Figure 8 : Extrait de la ToDo-list partagée

DEUXIEME ETAPE : MATURATION DU DEVELOPPEMENT

Après cette première phase de recentrage, et l’éradication des principaux défauts, nous

avons adopté un mode de développement proche du prototypage itératif continu, à l’aide

du SVN et de l’outil de ToDo-list partagée.

Tout d’abord, une phase « horizontale » a été rapidement accomplie, afin de tenir compte

des critiques majeures soulevées précédemment. En particulier, le webmestre du site de la

DANE a réussi à prendre en main l’interface d’administration Mélusine à partir de ce

moment.

Une deuxième phase, qualifiée de « verticale » a alors débuté.

Les nombreuses concertations avec les testeurs ont inévitablement fait surgir des nouveaux

besoins qui s’expriment souvent à travers des demandes de ‘fonctionnalités’ :

Certaines de ces fonctionnalités pouvaient être prévues, et attendaient simplement

d’être implémentées ;

D’autres besoins exprimés correspondaient à des dysfonctionnements temporaires

qui pouvaient laisser à penser qu’une solution alternative était à nécessaire, alors

qu’il suffisait d’envisager certaines corrections : le discernement des développeurs-

concepteurs est alors crucial pour distinguer l’intention des usagers à travers les

demandes formulées ;

Quelques idées formulées doivent être écartées sans froisser les forces de

propositions car elles ne correspondent pas aux buts recherchés par l’application ou

sont trop spécifiques à une utilisation particulière. En particulier, bien que Mélusine

soit « hautement modulaire et personnalisable », la personnalisation de l’apparence

(via les styles) est volontairement très peu développée afin de conserver une

ressemblance entre les sites utilisant le squelette. Des évolutions sont néanmoins

possibles et feront l’objet de développements futurs, motivées notamment par les

besoins en accessibilité ;

Certaines propositions enfin sont d’authentiques bonnes idées, qui peuvent sembler

évidentes une fois énoncées, mais n’auraient peut-être pas pu être émises plus en

amont dans la conception (du fait du prototypage itératif), et bien qu’elles réclament

alors un peu de code à implémenter, font souvent progresser rapidement le projet

vers une utilisabilité accrue.

Intégration des fonctionnalités selon les besoins exprimés

Début Janvier, plusieurs webmestres se sont portés volontaires pour s’essayer au nouveau

squelette Mélusine : SVT, ASH, CARDIE, Economie-Gestion. Le cas de la philosophie a été

plus problématique car le site avait subi une attaque et une récupération a dû être menée

en urgence par Éric Jousse de la DANE à partir de sauvegardes partielles. Une gestion

spécifique a eu lieu pour accompagner la webmestre pour la mise en ligne d’un site

fonctionnel avec quelques adaptations. Le résultat est très imparfait encore aujourd’hui.

Durant cette période, un gros travail d’homogénéisation de paramètres disponibles dans

chaque module a été accompli.

Plusieurs modules ont été entièrement créés ou réécrits : « Boutons paramétrable » et

« Liste de boutons », « Widget externe », « Carousel Bootstrap » …

Voici un aperçu de quelques modules et leurs paramétrages disponibles :

Figure 9 : Fenêtres de configuration ou d’ajout de modules

TROISIEME ETAPE : DEPLOIEMENT

Au 15 janvier, la quasi-totalité des sites d’établissements, d’écoles, de circonscriptions du 1er

degré, hébergés sur les domaines ac-creteil.fr ont été stoppés suite à des attaques et des

« défaçages » massifs.

Il se trouve que les circonscriptions du premier degré étaient en réflexion avec la DSI du

rectorat (service en charge de la sécurité logicielle et matérielle des réseaux) pour améliorer

la solution d’hébergement, et notamment homogénéiser les CMS utilisés afin d’en faciliter

la maintenance, et par voie de conséquence la sécurité.

Le fait d’harmoniser l’apparence de ces sites institutionnels par l’utilisation d’un même

squelette est un effet collatéral plutôt apprécié des corps d’inspection.

Une solution a donc été retenue : un noyau Spip mutualisé qui permet une maintenance

réduite assurée par la DSI, au lieu d’être déléguée aux webmestres : Chaque site possède sa

propre base de données mais les fichiers du noyau sont communs.

Figure 10 : Principe du noyau spip mutualisé

Une réunion de calage a été organisée mi-janvier entre la DSI, la DANE et les développeurs

du pôle numérique :

- Une centaine de sites sont concernés sur les trois départements de l’académie (cf.

listes en annexe 2)

- Gabarit de nommage des sous-domaines : ien-XXX.circo.ac-creteil.fr

- Public-cible : autant de directeurs de publication que de sites (les IEN8), environ la

moitié de webmestres (MF-Tice9), puis par ricochet une multiplicité de rédacteurs

de contenus (en particulier les enseignants CPC10).

8 Inspecteurs de l’Education Nationale 9 Maîtres-Formateurs TICE, exerçant souvent sur plusieurs circonscriptions. 10 Conseillers Pédagogiques de Circonscription

Plug-ins

Noyau spip 3

site 1 (fichiers)

site 2 (fichiers)

site 3 (fichiers)

Compte tenu de l’ampleur du projet de déploiement, il a été décidé de procéder par une

phase préliminaire d’essais et de formation, s’appuyant sur le réseau de conseillers MF-TICE,

au premier chef desquels, les trois conseillers pédagogiques départementaux (CPD-TICE)

qui serviront de référents puis de relais dans l’accompagnement des équipes concernées.

Trois circonscriptions se sont portées volontaires pour effectuer les premiers essais en

production.

Rapidement après cette réunion, la DSI a installé le nouvel espace serveur sécurisé dédié

aux sites de circonscriptions, avec un seul noyau de spip 3 configuré avec le plug-in

« mutualisation », ainsi que notre dernière version de Mélusine et ses dépendances.

De notre côté, nous avons aussi rapidement préparé avec Noémie Bernard une formation

pour les premiers publics volontaires, cette préparation ayant consisté à créer un support

de présentation, et à réaliser une maquette de site « zéro » fourni à la DSI pour duplication,

afin de disposer d’un contenu illustratif modifiable lors de la formation. En effet, Mélusine

n’est qu’un squelette qui structure et affiche du contenu, celui-ci doit donc préexister. Nous

avons inclus des articles de remplissage (avec quelques illustrations libres), des auteurs (tels

que webmestre, dir-pub, rédacteur, visiteur), quelques mots-clés (focus, carousel…).

Cette formation a eu lieu le 22 janvier en présence des trois CPD, de deux IEN et d’une

dizaine d’enseignants CPC ou MF-Tice amenés à intervenir sur leur site web de

circonscription. En voici le déroulé :

- présentation générale de Spip et des possibilités d’édition, publication ;

- présentation des objectifs et du fonctionnement de Mélusine ;

- prise en main des outils proposés, et réalisation d’une maquette personnalisée avec

notre assistance.

L’objectif de cette séance était double :

- évaluer la réception de l’environnement proposé et peut-être en modifier certains

aspects qui s’avèreraient trop peu intuitifs

- composer trois maquettes « témoin » avec les CPD qui serviraient de base à déployer

dans chaque département (en effet, des différences peuvent apparaître d’un

département à l’autre, chacun étant administré par une inspection d’académie, et

donc un IA-DASEN différents).

A l’issue de la séance, il est apparu très clairement qu’un délai serait nécessaire à la fois pour

corriger plusieurs modules de Mélusine qui se sont avérés peu satisfaisants, et pour laisser

aux CPD le temps de réaliser « leur » maquette, destinée à être dupliquée et fournie comme

point de départ à une trentaine de sites.

Figure 11 : Exemple de maquette–témoin réalisée pour le Val-de-Marne

Parmi les corrections à apporter, nous avons décelé des difficultés d’accès à plusieurs sous-

répertoires (bug relatif au mode mutualisé) et des droits d’accès à attribuer plus en

profondeur sur l’arborescence par la DSI, sinon certaines actions comme le téléversement

de fichiers joints à un article s’avérait impossible.

Je dois dire que la coopération avec la DSI a été particulièrement efficace malgré notre

handicap à ne pas pouvoir directement accéder aux fichiers par ftp, mais deux personnes

étant dédiées à la maintenance des sites hébergés, et furent très réactives à nos demandes.

Une deuxième réunion-formation fut organisée le 12 février à l’ESPÉ 11 de Livry-Gargan

spécifiquement pour les MF-Tice et CPD de Seine-Saint-Denis, et les mêmes constats ont

émergé, tant sur la réception du produit, que les remarques et les points notés pour

amélioration, et la demande d’un délai pour préparer la maquette-témoin.

Ce délai a été fixé au 31 mars lors d’une deuxième réunion-cadre tenue le 16 mars, jalon

important sur cette étape de déploiement où nous avons fixé avec le DAN, la DSI et les CPD

11 Ecole Supérieure du Professorat et de l’Éducation (ex-IUFM)

quelques orientations futures concernant les procédures de migration éventuelle des

anciens sites, celle concernant des demandes de plug-ins additionnels ou de fonctionnalités

pour mélusine, et surtout le passage en production de l’ensemble des circonscriptions à

compter du 1er avril, mais une publicité à leur sujet prévue seulement à la prochaine rentrée

scolaire.

Au 31 mars, il faut reconnaître que les maquettes « témoin » étaient assez loin d’être

déployables, et j’ai dû procéder à un gros travail de nettoyage et de normalisation :

- ajout des comptes auteurs de base avec des mots de passe à réinitialiser

- ajout d’un compte admin_support à notre intention, afin de récupérer ou vérifier

des paramétrages défaillants lors d’une remontée de dysfonctionnement, ou

encore retrouver un mot de passe de webmestre égaré (cela s’est produit !)

- définition d’une zone à accès restreint visible après identification (login

nécessaire)

- inclusion du module d’identification dans la maquette de base

- modification de certaines images pour ne conserver que celles libres de droits

- ajout de descriptions sur les rubriques pré-incluses, les mots-clés, et les auteurs

par défaut, afin de rendre l’ensemble le plus auto-explicatif et documenté possible.

Début avril : empaquetage des trois maquettes différentes, et transmission à la DSI pour le

grand déploiement.

QUATRIEME ETAPE : ACCOMPAGNEMENT DES USAGERS

Ainsi, 96 sous-domaines ont été ouverts la première semaine d’avril, de façon à permettre

aux webmestres concernés de se familiariser avec le nouvel environnement et de procéder

à des migrations ou des créations de contenus durant les vacances.

Formations, Réunions, Contacts

Outre les réunions-jalon du projet, et la présentation aux équipes lors des formations déjà

citées, deux autres rendez-vous ont eu lieu pour aider à la prise en main par les équipes et

prendre en compte les retours des utilisateurs du nouveau tandem spip3/mélusine fourni.

L’une à l’Atelier Canopé de Champigny avec des MF-Tice dé départements 77 et 94, l’autre

à Livry-Gargan pour les équipes du 93 le 7 mai (la Seine-Saint-Denis ayant le plus gros

volume de sites déployés).

Ce fut l’occasion de présenter, non seulement les maquettes réalisées à leur intention, et les

dernières améliorations apportés à Mélusine proprement dit (en particulier les nombreux

modules mieux paramétrables, le carousel, le module « widget externe » entre autres), mais

aussi les moyens mis à leur disposition pour se documenter, demander ou obtenir de l’aide,

ou contacter les équipes de conception ou de maintenance.

- Rencontres directes telles que les formations menées

- Entraide via le réseau des MF-Tice animé par chaque CPD

- Aide en ligne fournie dans les différents paramétrages de mélusine ou de Spip

- Site support / documentation (voir ci-dessous)

- Courriel de contact spécifique aux sites de circonscriptions :

[email protected] , qui transmet à une liste des intervenants DSI et des

développeurs, pour signaler des bugs ou des demandes d’améliorations, par

exemple ajouter un plug-in issu de la spip-zone.

mailto:[email protected]

Figure 12 - Liens vers le support dans le back-office de spip

Site support

La multiplication des sites et des interlocuteurs nous a conduits à envisager un site

reprenant des procédures de configuration, des conseils, des réponses aux questions

fréquentes (plan du site en annexe 3).

Ce site utilise évidemment le plug-in Mélusine développé, afin d’en illustrer au passage son

fonctionnement.

Site web : http://dane.ac-creteil.fr/melusine

Figure 13 : Site support de Mélusine 2

http://dane.ac-creteil.fr/melusine

BILAN INTERMEDIAIRE (EVALUATION)

Malgré quelques craintes, il n’y a pas eu de création d’oppositions lors du déploiement

légèrement forcé des nouveaux sites de circonscriptions. Au contraire, les attentes étaient

fortes (après les ruptures de service récurrentes depuis 2013), et nous avons tenté de

capitaliser sur cet enthousiasme pour profiter des retours rapides lors des propositions

spontanées des utilisateurs.

Pour bien comprendre ces utilisateurs et estimer leur taux d’acceptation à la nouveauté, il

me semble important d’avoir conscience de la réelle rupture que constitue la solution qui

leur est proposée par rapport à ce qu’ils avaient pu connaître auparavant :

Avant la fermeture forcée des anciens sites début janvier,

- environ 50% seulement fonctionnaient sous spip 2 ou 3 enrichi de plug-ins et de

squelettes choisis par chaque webmestre,

- environ 30% utilisaient le CMS GuppY,

- 5% le CMS Joomla,

- les autres circonscriptions n’avaient plus de site maintenu.

Même les webmestres connaisseurs du CMS spip 3 (une minorité) ont dû modifier leurs

habitudes, puisqu’il n’est plus question d’accès ftp, et que l’emploi de Mélusine impose de

nouvelles façons de travailler avec spip avant, peut-être, d’en simplifier l’usage.

Près de deux mois après avoir mis à disposition des circonscriptions ce nouvel outil, on peut

dire selon la terminologie du modèle diffusioniste 12 que l’adoption est en passe d’être

confirmée. Ceci est probablement dû à l’exposition progressive des utilisateurs-cibles et leur

implication dans le processus d’élaboration et de raffinement de leur futur outil, mais aussi

peut-être grâce à des propriétés inhérentes au produit lui-même.

La théorie diffusionniste décrit cinq caractéristiques perçues d’une innovation pouvant

favoriser son taux d’adoption par un groupe d’individus. Appliquons ce modèle au cas de

« l’innovation » Spip/Mélusine :

- son avantage relatif : abolition des contraintes techniques de maintenance,

configuration simplifiée et maquette de site fournie au départ.

- sa compatibilité avec les valeurs du groupe d'appartenance : spip est un cms très

largement utilisé et soutenu parmi les communautés enseignantes francophones,

et le développement de mélusine est assuré par des « pairs ».

12 Cf. théorie de diffusion des innovations par Everett M. Rogers (1962) [5]

sa complexité : il était important de fournir à la fois un modèle de site fonctionnel

clé-en-mains et une documentation fournie, nécessaire aux besoins de

personnalisation qui apparaissent au moment de l’appropriation.

- la possibilité de la tester : ce fut le but des séances de formation récurrentes et des

phases d’élaboration des maquettes-témoin.

- sa visibilité : le squelette est reconnaissable, l’outil porte un (pré)nom qui se retient

bien, le réseau de formateurs MF-Tice a commencé à acquérir une expertise de

l’outil déterminante pour générer un effet prescriptif.

Ce bilan plutôt optimiste, n’est qu’intermédiaire, car un cycle s’est achevé avec la mise en

ligne des sites de circonscription. Du chemin reste encore à parcourir pour que les 93 sites

soient pleinement opérationnels et proposent un contenu enrichi d’ici à la rentrée de

septembre qui soit le fruit d’une équipe de rédacteurs.

D’autre part, le développement du plug-in est en pause, mais nécessite encore des

améliorations profondes, en particulier du côté de l’intégration des paramètres généraux ou

de la personnalisation des styles et de l’accessibilité.

Il existe aujourd’hui plus de 100 sites actifs qui utilisent une version ou une autre du

squelette Mélusine, avec plus ou moins de réussite. En voici quelques (bons) exemples :


http://ien-epinay.circo.ac-creteil.fr/

http://ash.ac-creteil.fr/

La prochaine étape du projet Mélusine consistera à proposer un squelette qui soit

exploitable par les sites disciplinaires ainsi que les sites d’établissements, dont les besoins

en personnalisations sont nettement plus importants, et dont le simple nombre

(potentiellement plusieurs centaines) nécessitera un pilotage nettement plus serré.


http://ien-epinay.circo.ac-creteil.fr/

http://ash.ac-creteil.fr/

Conclusion

Ce stage au long cours a été très riche pour moi, à travers les nombreux projets et la diversité

des actions menées.

Le pôle numérique éducatif est une originalité et une richesse manifeste pour l’académie de

Créteil, car elle permet une interaction forte entre des équipes pourvoyeuses de contenus

et celles qui ont les compétences pour les intégrer, tout en développant des synergies et un

climat propice à l’innovation.

J’ai passé beaucoup de temps à me former sur des outils et des technologies web qui vont

probablement me resservir de plus en plus fréquemment : Notre préoccupation et celle de

François Larsonneur (le chef du service développement au Canopé) en particulier, est de se

doter progressivement d’outils modulaires, commentés de façon générique et réutilisables

afin de gagner en productivité. C’est l’esprit qui a présidé à la genèse de la chaîne éditoriale

en cours de développement.

Dans le cas de Mélusine 2 sur lequel j’ai bété beaucoup impliqué cette année, la maitrise

d’ouvrage est probablement trop proche de la maitrise d’œuvre, ce qui a tendance à produire

trop d’implicites et à manquer de rigueur dans la définition des objectif à atteindre. Le fait

de travailler au but d’un déploiement ciblé a nettement amélioré la qualité du travail

accompli. J’ose espérer que la prochaine phase de ce projet, qui conduira à la mise à

disposition du package Mélusine installable par un usager lambda, avec toute

documentation nécessaire, et le moins possible d’accompagnement présentiel de notre part,

devrait nous contraindre à planifier davantage le développement logiciel et à implémenter

différemment certains points qui reposent encore trop sur des adaptations ou des héritages

de versions antérieures qui n’ont plus lieu d’être.

Références

A propos d’ergonomie et d’utilisabilité des applications web :

[1]

A. Boucher, Ergonomie web: Pour des sites web efficaces. Editions Eyrolles, 2011.

[2]

E. Brangier et J. Barcenilla, Concevoir un produit facile à utiliser: adapter les

technologies à l’homme. Ed. d’Organisation, 2003.

A propos de la gestion de projets :

[3]

P. M. Institute, A Guide to the Project Management Body of Knowledge (PMBOK®

Guide) - Fifth Ed. Project Management Institute, 2014. (Guide du Corpus des connaissances en management de projet (Guide PMBOK®) – Cinquième édition)

[4] R.Bachelet, ABC de la gestion de projet (MOOC GdP2). Unow/Ecole Centrale de Lille, 2013

A propos du diffusionnisme :

[5]

E. M. Rogers, Diffusion of Innovations, 5th Edition. Simon and Schuster, 2003.

[6]

P. Flichy, L’innovation technique: récents développements en sciences sociales, vers une

nouvelle théorie de l’innovation. La Découverte, 1995.

Programmation avancée :

[7]

J. VanDyk et T. Tomlinson, Pro Drupal 7 Development. Apress, 2010.

[8]

A. Freeman, Pro AngularJS. Apress, 2014.

http://contrib.spip.net/Cours-SPIP-3-pour-redacteur

http://contrib.spip.net/Cours-SPIP-3-pour-redacteur

Annexes

ANNEXE 1 – FICHE DE POSTE

ANNEXE 2 – ANNUAIRE DES NOUVEAUX SITES DE CIRCONSCRIPTIONS

SEINE ET MARNE (77)


SEINE SAINT-DENIS (93)


VAL DE MARNE (94)

ANNEXE 3 – PLAN DU SITE SUPPORT

Conception et Développement Web au Canopé / Pôle...

Documents

Transcript of Conception et Développement Web au Canopé / Pôle...