H5P : un outil libre pour créer des activités interactives

Qu’est-ce que le H5P ?

Vous l’avez peut-être croisé au détour d’un menu Moodle ou dans les coulisses de WordPress. Derrière ce nom, un rien rébarbatif, se cache un formidable outil qui rend la création d’activités interactives accessible à tous.

Disons-le d’emblée : je suis très enthousiaste par rapport à cet outil et je pense qu’il gagnerait à être mieux connu tout simplement parce qu’il permet de faire des choses incroyables, sans connaissances techniques, telle qu’une visite de musée interactive ou un escape game.

Mais aussi parce qu’il est libre et évolutif à souhait, son principe étant somme toute assez élémentaire.

Sommaire

• • Le principe
  • Une solution ouverte
  • Dans la pratique
  • Les limites qui n’en sont peut-être pas
  • Documentation
  • Vous pouvez gagner ce livre

Le principe

H5P, c’est l’acronyme de « HTML5 Package », une archive à base de HTML, de JavaScript et de CSS, dont l’extension est .h5p. En fait, il s’agit d’une spécification pour créer des contenus interactifs en HTML5. Elle permet aux développeurs et aux développeuses de créer des modèles d’activités génériques réutilisables par les créateurs de contenus. La collection officielle en contient actuellement une cinquantaine. Celle-ci est intégrée nativement ou via un plug-in aux plateformes d’e-learning les plus courantes, ainsi qu’à des CMS comme WordPress ou Drupal, sous le nom d’Activités H5P. En séparant ainsi clairement la conception technique de la création des contenus, elle permet aux formateurs et formatrices de réaliser simplement des activités assez poussées tout en encourageant les développeurs à enrichir et diversifier la base de modèles. En outre chaque contenu peut lui-même servir de modèle, favorisant ainsi un cercle vertueux de partage et de mutualisation.

Une solution ouverte

Né en 2015 d’une initiative commune de plusieurs comtés norvégiens pour favoriser la création de ressources éducatives de haute qualité accessibles à tous, le projet est porté par la startup Joubel dans le cadre d’un partenariat public-privé.

Ouvert et gratuit, l’outil a, dès le départ, été conçu dans un esprit de partage et de facilité de mise en œuvre.

L’universalité du trio HTML, CSS et JavaScript facilite la création ou la personnalisation des activités existantes.

Dans la pratique

Ces modèles se présentent comme une sorte de formulaire ou une boîte de configuration, plus ou moins complexe selon la nature de l’activité, mais toujours très orientée contenu. L’interface de la plupart des activités est à peu près construite de la même manière. Le plus difficile reste à choisir le modèle d’activité adapté à ce que l’on veut obtenir, qui ne s’impose pas toujours d’emblée, surtout quand on débute. Le modèle se charge d’assembler les différents éléments que vous fournissez (textes, images, vidéos, audios) tel que vous l’avez paramétré et de générer l’activité à mettre à disposition de l’utilisateur final (l’apprenant).

Comme vous pouvez le voir sur la capture d’écran, l’interface des modèles d’activité est plutôt élémentaire. Les libellés ne sont pas toujours très bien localisés, mais cela n’a pas d’incidences sur l’activité produite, tout ce qui apparaît à l’utilisateur final (l’apprenant) étant paramétrable.

Ainsi en cinq minutes vous pouvez réaliser un petit jeu d’images comme celui-ci. Je l’ai créé avec l’application Lumi et exporté en HTML. Vous pouvez télécharger le package H5P correspondant si cela vous intéresse.

Vous pouvez concevoir ainsi toutes sortes d’exercices auto-correctifs, des quiz, des comparaisons d’images, avec un curseur pour basculer de l’une à l’autre, des jeux d’assemblage, des dictées, des mots fléchés, des parcours immersifs à choix multiples, des images augmentées, des vidéos interactives, et j’en passe. Combinés aux fonctionnalités des plateformes d’e-learning, les résultats des tests ou le travail qui en résultent peuvent être soumis pour évaluation, par exemple via l’activité Moodle Devoir.

L’intérêt de ces activités dépasse largement le cadre académique : visite guidée d’un monument, présentation multimédia d’une association, mode d’emploi d’un appareil, activité ludique à des fins de communication, etc.

Pour vous inspirer, je vous invite à consulter la vaste bibliothèque partagée d’activités du Studio H5P de l’eCampusOntario.

Les limites qui n’en sont peut-être pas

La création et la mise en ligne des activités H5P se font principalement par l’intermédiaire d’une plateforme d’e-learning (Moodle, LearnDash, Blackboard, Brightspace, Canva) ou d’un CMS (WordPress, Drupal). Cela couvre une grande partie des besoins, mais ne suffira peut-être pas.

Vous disposez alors de deux types d’alternatives :

• passer par une solution de création hors-ligne (exemples : Logiquiz ou Lumi-Education qui font très bien le job et offrent une fonctionnalité d’export en HTML) ;

• passer par un hub communautaire (exemples : H5P.org, Digiquiz) ou payant (exemple : H5P.com), qui vous permettra ensuite d’intégrer les activités dans vos pages web via un iframe.

Documentation

• La documentation sur le site officiel (en anglais) : vous trouverez toutes les informations de base pour démarrer, mais aussi un guide du développeur pour ceux qui souhaiteraient contribuer à la création de nouveaux types d’activités.

• Livre H5P – le contenu pédagogique interactif à la portée de tous écrit par Christophe Coussement, publié par D-BookeR : ce livre est une sorte de boîte à outils pour vous aider à tirer pleinement parti du H5P et stimuler votre imagination, à travers un panel varié de cas d’utilisation, pour accroître votre potentiel pédagogique.

Vous pouvez gagner ce livre

Tout simplement en œuvrant au mieux pour LinuxFR :)

Désormais, l’une des meilleures contributions du mois pourra choisir un livre, numérique ou imprimé, dans le catalogue des éditions D-BookeR (hors pack).

Aller plus loin

• Site officiel de H5P (555 clics)
• Roadmap et historique de H5P (49 clics)
• Site développeur du projet (57 clics)
• Logiquiz (212 clics)
• Lumi Éducation (123 clics)
• Digiquiz  (125 clics)
• Documentation officielle (46 clics)
• H5P - le contenu interactif pédagogique à la portée de tous (275 clics)
• Contribuer à la localisation de H5P (62 clics)