Whatnot est un site pour aider les élèves de collège de mdesnos à apprendre l’Anglais. Il comporte une partie publique avec des articles sur l’apprentissage de l’Anglais, et une partie réservée aux membres, correspondant aux cours et exercices en relation avec le travail effectué en classe.
J’avais réalisé la première version en 2010, et cet été (tout cet été), je me suis occupé de la nouvelle version, avec de très nombreux changements à la clé ! Le projet était ambitieux, suffisamment pour que je ne puisse pas vraiment me consacrer à d’autres projets durant cette période !

Contexte

Comme vous le savez peut-être déjà, je me suis fortement intéressé aux vidéos d’analyse de jeux vidéos de la chaine Extra Credits, et en particulier toute la série sur la notion de gamification liée à l’éducation. J’ai même pris le temps de synchroniser les sous-titres de deux de ces vidéos, car je trouvais qu’elles méritaient vraiment d’être comprises par un plus grand nombre.

Si je résumais la problématique évoquée, je le formulerai de cette manière : Comment cela se fait-il qu’un enfant puisse se concentrer des heures durant sur un jeu vidéo, réessayant sans se décourager après un échec, alors que son attention est beaucoup plus fragile en classe et que la non-réussite des exercices entraine de fortes frustrations ?

À ces questions, des neurologues et des docteurs spécialisés en psychologie cognitive, notamment Judy Willis, donnent quelques réponses, évoqués dans les vidéos d’Extra-Credits sus-mentionnées.
Il est question de nombreux concepts que je trouve très intéressant : la durée du cycle entre échec/possibilité de réessayer, la notion de gratification/récompense, le visual learning, la coopération, le rythme d’apprentissage personnalisé etc… Je vous laisse regardé Extra-Credits si vous voulez avoir des notions sur ce passionnant sujet !

Le fait est que Whatnot, codé en HTML5 et CSS3 encore naissant à l’époque, proposait déjà des exercices en ligne, générés par feu « HotPotatoes, mais il n’y avait pas de notion de progression. Les quiz étaient faisables mais les résultats n’étaient pas sauvegardés. On ne pouvait même pas laisser de commentaire.

C’est pourquoi, lorsque mdesnos m’a dit qu’elle voulait refaire son site, je me suis dit « ok, c’est le moment d’appliquer tous ces concepts pour engager vraiment les élèves dans leur apprentissage ».
Il s’avère que mdesnos n’avait certes pas vu les vidéos d’Extra-Credits, mais avait lu les travaux de Lindsay Hutton. De ce fait, lorsque j’ai proposé de refaire le site avec gestion de membres, de badges/récompenses, de système de points, de podium, avec des commentaires pour le « feedback » des élèves etc, le défis a été tout de suite accepté.

Parce que oui, défis, c’est le mot. Il s’agit ni plus ni moins du site le plus complexe que je n’ai jamais fait, et j’ai du en apprendre des choses pour venir à mes fins (notamment les bases de PHP, Javascript, Jquery et des notions avancées de WordPress, en un temps relativement limité).

Mise en place

Le site est basé est donc basé sous WordPress, mon CMS de prédilection, que je commence à bien connaître. Mais WordPress seul ne suffit pas pour faire ce genre de chose, et je me suis profondément renseigné sur les LMS (Learning Management System) en général, et sur ceux qui pouvaient être implémentés dans WordPress.
Il en fallait un avec un business modèle honnête (pas le truc qui coûte 200€ par an), qui soit performant, bien pensé en terme d’ergonomie utilisateur, facile à gérer, et en développement actif.
Par chance, après une journée entière de recherche et de comparaison, j’ai trouvé le plugin qui allait être le fondement de Whatnot 2.0 : LearnDash, créé par Justin Ferriman.

LearnDash permet de gérer des cours, et de faire des quiz, avec de nombreuses options, comme la possibilité de les refaire si on ne les a pas réussi, la gestion d’un temps limité etc…
De plus, LearnDash a une très bonne intégration avec de nombreux plugins, ce qui le rend très modulable. Indispensable dans une architecture WordPress.

C’est le plugin BadgeOS que j’ai choisi pour le système de récompense, car son intégration avec LearnDash est parfaite, et c’est le plugin ‘recommandée par Justin lui-même. De plus, il est développé en Open Source, ce qui permet, avec un peu de connaissances et beaucoup de temps, de faire de nombreuses choses (ce pourquoi, une initiation au PHP a été plus que nécessaire).
BadgeOS permet de créer des badges et un système de points pour récompenser les utilisateurs après certaines actions… dont la réussite à des quiz LearnDash, et c’est sans aucun doute le plugin pour lequel j’ai passé le plus de temps. De longues heures à lire l’API et à essayer de faire quelques fonctions personnalisées… et au final, je m’en suis plutôt bien tiré (mais pfiou, c’était pas facile), grâce à l’aide du support technique et à de nombreuses journées de persévérances.

Et pour le reste, la gestion des membres, la sécurité etc… ? Et bien, beaucoup de plugins WordPress. Il y en a 67 d’activer, j’ai dû installer au moins le double (car je teste toujours l’éventail des possibilités intéressantes avant de faire un choix). Oui, ça aussi ça a pris beaucoup de temps 😀

Mais le résultat devait être prêt pour la rentrée de septembre 2014, et toute une série de difficultés allaient rendre la chose bien difficile.

Spécificités

Client

Et oui, pour une fois, je ne faisais pas un WordPress pour moi mais pour quelqu’un d’autre, qui n’avait jamais fait de WordPress avant. Cela change beaucoup de choses. Ainsi, de nombreux plugins ne servent que du côté admin, pour arranger l’interface, permettre de faire des actions plus transparentes ou plus facilement accessibles pour l’administrateur (comme éviter que le slug d’un post rentre un conflit avec un slug de la corbeille, autoriser le changement de post-type, afficher des mémos sur le tableau de bord, intégrer les statistiques du site à l’intérieur de WordPress et non pas en externe comme j’ai l’habitude de le faire, donner la possibilité de réorganiser les colonnes, le menu de la sidebar etc)…
Bref, beaucoup de choses ont été penser pour le confort et la souplesse de l’administration. Le choix du thème lui-même s’est fait aussi en grande partie en fonction de ses possibilités de personnalisation dans l’interface WordPress. L’idée est que mdesnos puisse gérer son site sans assistance en toute autonomie.

Design

Le design lui aussi avait quelques contraintes, il se devait notamment d’être entièrement mobile friendly, pour permettre aux élèves de faire leur devoirs où ils veulent, sans avoir besoin de monopoliser « l’ordinateurs des parents ».
Si cela paraît de prime abord relativement simple dans le cas d’un site en flat design (dont la responsabilité est facilement ajustable), certaines fonctions ont nécessité un peu plus de recherches.
En effet, comment rendre un tableau responsive ? Comme faire une infobulles touch-friendly ? Autant de problématiques que je ne m’étais jamais posé et auxquelles j’ai du trouvé des solutions.

J’ai redéfinis la taille des textes du thème pour qu’elle soit basée sur une échelle modulaire (comme pour ce site), ce que je trouve bien plus confortable à lire. Malgré le peu d’élément de design, l’apparence calibrée du texte donne tout de suite une impression visuelle tout à fait agréable.

Utilisateurs

La plus grosse des difficultés, elle est ici. Gérer un plateforme qui accueille des utilisateurs, c’est prévoir des rôles, des autorisations, des groupes, des espaces réservés, mais aussi interdir l’accès au backend, permettre de laisser des commentaires, de les éditer, d’envoyer des mails aux membres, créer une page de profil publique, mettre le formulaire d’inscription en front-end, et fournir un système pour les bug reports, la gestion des avatars et j’en passe.
Et ce qui est « marrant » c’est que le moindre détail peut prendre un temps fou. Ainsi, il m’a fallu presque une journée entière pour trouver comment linker le nom d’utilisateurs à son profil public. Si dit comme cela, ça vous paraît simple, et bien sachez que c’est loin d’être facile, en témoigne le peu de ressources sur le sujet sur le web. (Enfin maintenant que j’ai réussi à programmer la fonction à partir d’un bout de code trouver en ligne, je n’ai plus qu’à la copier coller si j’en ai besoin ailleurs !)
Autre chose à prendre en considération : l’âge des membres. Une communauté de mineurs, ce n’est pas comme n’importe quelle communauté. La modération du contenu (commentaires et avatar) doit être sérieusement prise en compte.

J’ai pendant un temps à hésiter à utiliser BuddyPress, le célèbre plugin WordPress pour créer des réseaux sociaux, mais en fait je passais plus de temps à essayer d’enlever des fonctions du BuddyPress et à rajouter des choses que j’arrivais très bien à faire sans (du genre le formulaire d’inscription personnalisé en AJAX etc…). De plus, certains plugins se devait d’etre spécialement BuddyPres compatibles. Bref, ce n’était pas adapté au projet, dans la mesure où les utilisateurs ne sont pas censés uploadés leur propre contenu, rédiger leurs propres articles, et communiquer entre eux de manière directes (autres que par les commentaires).

Au final, avec de nombreux plugins (pour rajouter des captchas, créer des données métas pour l’utilisateur, pour modérer les inscriptions, pour actualiser les commentaires en AJAX et j’en passe) ont du être nécessaire pour mener à bien le projet.

Plugins

Je ne cesserai de vanter les mérites de la modularité en général, et en particulier pour WordPress. Comme je le disais précédemment, j’en ai vraiment utiliser des dizaines. Et non, aucun d’entre eux n’est inutile, chacun à une fonction bien précise dont il serait dur de se passer. Une site communautaire et un site de e-learning ont besoins de beaucoup de fonctionnalités non-natives à WordPress pour être pleinement satisfaisant pour les utilisateurs, et pour les administrateurs.

Dans ce lot de plugins, de belles surprises (des plugins qui fonctionnent exactement comme on aurait pu l’imaginer), de grandes découvertes (des plugins géniaux tout récents avec moins de 200 téléchargements), des plugins avec des API d’une richesse inégalée permettant de les personnaliser à souhait…
Vous en faire la liste et vous expliquer le détails me prendrait au moins 2 jours, je n’ai donc pas prévu de le faire pour le moment. 😀

La grosse difficulté cependant, c’est que je devais me contenter de plugins gratuits (à part LearnDash). Il est évidant que le site ne sera pas monétiser, on ne pouvait donc pas se permettre d’investir des centaines d’euros pour le réaliser. Donc en gros, plutôt qu’avoir quelques super plugins à tout faire, j’ai du assembler des choses en utilisant la fonctionnalité de celui-ci, puis la fonctionnalité de celui-là… C’est surtout pour ça qu’il y a plein de plugins d’ailleurs.

Évidemment il y a des petites contraintes à utiliser autant de plugins. Il arrive en effet que dans de très rare cas, deux plugins interagissent entre eux d’une manière imprévisible et indésirable. Par exemple, l’activation du plugin que j’ai mis pour changer le slug des utilisateurs effaçait une des méta données personnalisée attribuée à ces derniers pendant l’inscription. Mais ça, on ne peut le savoir qu’en testant !

Côté performance, ça reste tout à fait acceptable en front-end, c’est plutôt en backend que ça prend un peu plus de temps (comme je l’ai dit tout à l’heure, de nombreux plugins agissent en backend). Mais bon d’un côté c’est normal, quand on rajoute plein de fonctionnalités, c’est plus lent que quand il y en a pas beaucoup.
Cependant, c’est plus rapide avec 67 plugins sur cet hébergeur qu’avec 10 sur l’ancien. 😛 Je n’ai cependant pas encore fait de test de performance pour vous donner des données chiffrées.

Et maintenant ?

Le site a ouvert le jour de la rentrée, et évidemment, quand il y a 90 personnes dessus, on se rend mieux compte de ce qu’il manque ! 😛 Mais à partir de maintenant ce sera plutôt de la maintenance et de l’optimisation au fur et à mesure des idées et des compétences acquises.
La mise à jour des plugins, que ce soit suite aux nombreuses discutions que j’ai pu avoir avec les développeurs, ou que ce soit parce qu’ils ont déjà prévu leur propre améliorations, devra permettre d’améliorer l’expérience utilisateur au cours du temps. Il faut avouer que j’ai utiliser des technologies en développement, ce n’est pas parfait à l’heure actuelle, mais petit à petit, cela s’améliorera !
À son apogée, le site devra accueillir environ 150 personnes.

Remerciements

Je tiens à remercier les nombreux développeurs que j’ai contacté au fur et à mesure de l’élaboration du site, notamment Michael Beckwith du support BadgeOS et Justin Ferriman de LearnDash, à qui j’ai fait appel de bien nombreuses fois !
Je tiens à remercier tous les développeurs qui proposent généreusement des plugins/thèmes gratuits et qui permettent de faire de gros/beaux projets même pour ceux qui ne peuvent pas trop de moyens financiers.
Et bien sûr, merci à mdesnos pour m’avoir fait confiance pour mener à bien ce projet !

J’ai appris de nombreuses choses durant cette élaboration, qui sans aucun doute, me serviront pour tout types de projets ! 🙂

Bref après deux mois de pauses – pour mes AUTRES projets – il est temps que je remette à la tâche !

Cheers ! 😀