Whatnot — Conception d’un Site de e-Learning

whatnot2014

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.

whatnotQuiz
Exemple d’un quiz simple généré par LearnDash

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.

badges List Whatnot
Listes de Badges générés avec Credly via BadgeOS pour Whatnot.

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).

user List Whatnot
Liste des utilisateurs de Whatnot, dans un tableau responsive, avec le tri par colonnes.

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.

whatnotCourseProgression
La page Progression, permettant à l’utilisateur de savoir où il en est dans sa formation.

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 ! 😀

  • Content de voir que je n’ai pas été le seul à bosser sur un site tout l’été. 😉

    J’étais déjà passé pour te remercier de la traduction de BadgeOS et je t’ai repéré sur le forum “Support” du plugin avec tes questions pertinentes qui m’ont été bien utiles !

    Je travaille sur le même genre de projet (mais sans client) et j’avais effectivement moi aussi sélectionné LearnDash. J’ai cependant dû abandonner cette voie : si on n’a pas des modules clairement définis et déjà prêts, la progression des utilisateurs part en vrille dès qu’on fait un changement (ajout d’une leçon par exemple). Ce manque de souplesse a été totalement rédhibitoire pour moi qui ait besoin de faire évoluer mes contenus et qui n’ait pas du “tout prêt” à injecter. Je garde cependant un œil sur les news de ce côté, j’ai payé pour la licence après tout. 😉

    À tout hasard, aurais-tu un site de test où l’on puisse voir le “Congratulations” add-on à l’œuvre ?

    Au plaisir !

  • Effectivement oui, je participe beaucoup sur le forum de BadgeOS (aussi sur celui de LearnDash je dois avouer), j’espère qu’ils ne me trouvent pas trop bavard (quoique ce serait le plus soft des ajectifs) 😛

    Alors LearnDash niveau ergonomie est pas forcément incroyable, mais est très performant. Cependant, il faut noter que le plugin est relativement jeune, et que les développeurs sont très ouverts : raisons de plus pour participer sur les forums et essayer de participer à son amélioration 😛
    Sinon, il y a un plugin tout jeune qui vient de sortir il y a quelque heures (oui oui, tout jeune :P) : CoursePress dont la version Pro pourra peut-être t’intéresser.
    Il n’a pas encore la puissance ni la modularité de LearnDash (qui lui se combine avec BadgeOS par exemple) mais niveau ergonomie côté admin, je dois dire que j’ai été très surpris : c’est limpide !
    Par contre, il semblerait qu’il faille utiliser leur thème pour qu’il marche bien (ou alors modifier intensément un thème existant). Je dis bien il semblerait, parce que peut-être qu’il y a juste un petit truc que j’ai raté ! 😛

    Quand à BadgeOS, il serait bien qu’ils mettent en place un site de démo avec tous leur plugins parce que c’est vrai que ça manque de démonstration ! – je surement leur soumettre l’idée 😛
    Mon nombre de licence est limité, et je n’ai donc encore installer le plugin ailleurs, et je ne pense pas que mdesnos apprécierait le fait que je fasse visiter le site à d’autres personnes que ses élèves (ce qui serait tout à fait compréhensible, en plus le log des achievement serait conserver), mais si jamais je fais un site où tu peux voir ça en démo, je te préviendrais ! 🙂

    Merci encore pour tes commentaires ! 🙂

  • Désolé pour la réponse un peu tardive et merci d’avoir pris le temps de me répondre. 😉

    Je te suis totalement pour LearnDash (les devs sont clairement dynamiques et en veulent) et j’avais aussi repéré CoursePress étant un grand fan de WPMUdev et de Chris Knowles en particulier. 😉 CoursePress est vraiment impressionnant pour un “premier jet” ! Le problème reste cependant le même pour moi : ces plugins essaient plus ou moins de reproduire ce qui se fait en terme de LMS “standalone”. Mais, personnellement, je trouve que ce n’est pas le mode de partage des savoirs le plus adapté. Je vais quand même essayer de creuser un peu. 😉

    Pas de soucis pour la démo. Je comprends tout à fait !

    À très bientôt et bonne continuation. 😉

  • Juste par curiosité, tu essaies de faire un site pour enseigner quoi et comment ?
    En tout cas si aucun LMS ne correspond à tes attentes – mais que tu dois en choisir un quand même -, peut être qu’un ensemble de plugins combinés permettrait de répondre à tes besoins ? Dans ce cas, je te conseillerai d’aller vers le LMS que tu trouves le plus modulable.
    Ou peut-etre peux tu te passer de te LMS et contenter des taxonomies WordPress ?

    A bientôt 😛

  • C’est un site visant les profs et formateurs, plus particulièrement les profs de FLE et de langue en général. Les contenus à enseigner tournent donc autour de toutes les compétences que ce genre de métier nécessite.
    Tu as vu juste : la “solution” d’un ensemble de plugins combinés entre eux est celle que j’ai choisie. Cela me laisse beaucoup plus de flexibilité mais il y a un petit côté bricolage pas toujours évident à gérer.
    Je t’enverrai un lien lorsqu’il y aura un peu plus de concret si tu veux. 😉
    À plus !

  • Excellent tout ça ! Je suis vraiment étonné et à la fois fier de ton travail. Tu m’en diras un peu plus “in private” si tu le souhaite ! En attendant c’est mdesnos qui doit être contente !

  • Oui, je te montrerai le back-end avec plaisir, et le code sources des fonctions que j’ai développés 😛
    mdesnos est effectivement très contente, mais aussi ces élèves, qui participent activement !
    Merci pour tes encouragements, ça fait toujours plaisir après un travail si intense !! 🙂

  • Oh oui il y en a du bricolages (comme je disais, j’ai du mettre plus de 60 plugins, sans compter les fonctions que j’ai du développer moi-même), mais c’est ça l’esprit WordPress finalement 😀
    Je ne manquerai pas de te prévenir si jamais j’écris un article qui rentre un petit peu plus dans les détails techniques !
    Tu pourras toujours passer le lien, ça peut être intéressant de voir ce que font d’autres personnes avec les mêmes outils à disposition !
    Bon courage pour la suite de ton projet !