Créer des contenus interactifs en HTML5 directement depuis votre site avec H5P

H5P

Du contenu interactif dans vos pages web

H5P est un fabuleux système à intégrer à un site pour ensuite créer directement depuis l’interface de votre blog, toute une série de contenus interactifs : qcm, glisser/déposer, champs à compléter etc… mais aussi des images ou des vidéos interactives, des jeux, des lignes du temps… bref, le service propose plus d’une vingtaine d’activités du plus bel effet, il est même possible de créer les vôtres.

Des exercices interactifs et bien plus encore

Lorsque l’on édite un site d’école, il n’est pas rare de chercher à y intégrer différents types de contenus, notamment des leçons et des exercices interactifs. Pour cela, je vous propose de découvrir H5P , un système clé en main qui a la particularité de proposer de nombreux types de contenus, le tout en HTML5 et Responsive (affichage adapté aux mobiles).

Pour se faire une idée des possibilités, il suffit de se rendre sur la page Examples & downloads (hé oui, c’est en anglais), puis de parcourir les différentes activités proposées : Vidéo interactive, ligne du temps, présentation en diaporama, image interactive etc… sans oublier les traditionnels questions à choix multiples, les glisser/déposer, les champs à compléter… tout en passant par le memory, et même une interface de création de jeux, la liste est longue…

Exemples d'activités

En fait, les différentes activités sont reprises sous quatre rubriques : les jeux, le multimédia, les questions et le média social.

Deux solutions pour la création des contenus

A la base, deux solutions s’offrent à nous pour la création des contenus. La première consiste à s’inscrire sur le site pour ensuite disposer d’une interface d’administration. Grâce à celle-ci, il suffit de choisir le type d’activité voulue, puis de compléter les champs nécessaires à la création du contenu. Une fois l’exercice terminé, il vous sera alors possible de l’intégrer à votre site par un simple code à copier/coller dans votre page. On retrouve ce principe dans des services bien connus comme LearningApps ou Educaplay.

La deuxième méthode, pour ceux qui éditent un site sous WordPress, Drupal ou Joomla, consiste à installer le plugin H5P pour retrouver l’interface de création d’activités directement dans l’administration de son site ! Même plus besoin de s’inscrire au service, nous voilà complètement autonome.

Installation du plugin dans WordPress

Pour se familiariser avec l’outil, nous allons procéder à l’installation du plugin dans l’un des CMS ciblés, à savoir WordPress.
Disponible sous le nom de H5P dans le Répertoire des plugins, commençons par installer l’extension en nous rendant simplement dans l’administration de WordPress, et en choisissant dans le menu principal « Extensions > Ajouter » puis lancer une recherche avec le terme « H5P ».

Installer le plugin WordPress

Une fois repéré, cliquez simplement sur « Installer maintenant » puis activez l’extension selon la procédure habituelle.
A ce stade, l’extension est installée et visible dans le menu principal mais un message nous indique qu’il est nécessaire d’installer la librairie correspondant au type d’activité que nous souhaitons utiliser.

Installation des librairies

Pourquoi donc devoir encore passer par une étape supplémentaire à ce stade me direz-vous? Simplement pour pouvoir installer les librairies de son choix, sans devoir télécharger tout l’arsenal pour seulement un ou deux types d’activités. C’est aussi l’occasion de s’inspirer d’une activité créée et partagée par un autre utilisateur pour ne pas avoir à réinventer la roue à tour de bras.
Notez qu’il est bien entendu possible d’installer la librairie complète pour disposer de l’ensemble des contenus, ce que nous allons faire sans peu tarder.

Précisons tout de même que sous chaque contenu exploré précédemment sur la page « Examples & downloads », un bouton « Download » nous permettra de télécharger la librairie correspondant à ce type de contenu. C’est donc ce fichier de type .h5p qu’il nous faudra utiliser pour installer la librairie en question.

Installation des librairies

Pour la découverte des différentes possibilités, nous n’allons pas résister à installer le pack complet librairies.h5p (Précisons qu’une installation de WordPress en local est évidemment d’une grande utilité pour ce genre d’expérimentation.)
Une fois le fichier téléchargé sur votre ordinateur, retour vers l’administration de WordPress pour choisir cette fois « H5P Content > Librairies », on s’en doutait.
Il ne nous reste plus qu’à cliquer sur le bouton « Parcourir » pour sélectionner la librairie voulue, puis à cliquer enfin sur le bouton « Upload ».

Création d’un contenu

Cela commence à se concrétiser puisque nous allons maintenant choisir « H5P Content > Add New » et ajouter notre premier contenu interactif.
Classique dans WP, nous allons tout d’abord donner un titre à ce contenu.
Puis nous cliquerons ensuite sur le menu déroulant pour choisir le type d’activité. Pour faire simple dans un premier temps, je vous propose de choisir l’intitulé « Drag and drop text » qui consiste simplement à glisser/déposer du texte sur les champs correspondants.

Créer un contenu

Une fois le type de contenu sélectionné, des champs spécifiques à la création de l’activité font leur apparition. Rien de bien sorcier, il suffit de compléter. Les habitués des exercices interactifs s’y retrouveront vite puisqu’on y retrouve bien entendu les fondamentaux: consigne, réponses possibles, réponse attendue etc…

Intégrer les données

Pour le coup, dans notre exemple, nous allons devoir fournir une consigne puis rédiger les différentes phrases dans le champ « Texfield ». Là, il nous suffira de d’encadrer le texte à glisser/déposer par des * pour que la magie s’opère.
Exemple:  La capitale de l’Espagne est *Madrid*. Le terme « Madrid » se transformera alors en un joli texte à déplacer sur le champ correspondant. Ecrivez dès lors une série de phrases comprenant les différents termes à traiter par les * et vous vous retrouvez avec un exercice de texte à trous en deux temps trois mouvements.

Exemple de glisser-déposer

Vous remarquerez la présence de paramètres complémentaires à configurer. Encore une fois, ce n’est pas bien sorcier et même si les termes sont en anglais, ils sont relativement simples à assimiler.
Il vous sera alors possible d’afficher ou non le bouton « Recommencer » et le bouton « Solution ».
Vous pourrez également choisir si le corrigé est instantané après chaque réponse ou fourni en fin d’exercice avec le bouton « Vérifier ».

Configurer le contenu

Un autre volet vous permettra enfin de traduire certains termes propres à l’activité, notamment les boutons liés à l’interactivité: « Vérifier », « Suivant », « Retour » etc…
« Keep your cool », même si la base du système est en anglais, on va néanmoins pouvoir présenter aux élèves un contenu entièrement traduit.

Intégration d’un contenu dans les pages du site

L’intégration des différents contenus dans les pages est un jeu d’enfant. Il suffit de se rendre dans l’édition d’une page classique (ou un article dans WP) pour voir apparaître un nouveau bouton au dessus de l’éditeur  « Add H5P ». Une fenêtre s’ouvre avec une liste des derniers contenus réalisés, il suffit de choisir le votre puis de cliquer sur le bouton « Insert ».

Intégrer un contenu dans une page

Vous verrez alors apparaitre ce que l’on appelle communément un « shortcode » dans le jargon. Il ne vous reste plus qu’à publier votre page pour voir le résultat final.
Pas mal ! D’un point de vue ergonomique, les interactions sont fluides et le rendu est agréable graphiquement.

Se familiariser avec l’outil

Chaque type de contenu possède ses propres paramètres de création. Et même si l’interface est très ergonomique, cela demande du temps pour faire le tour de toutes les possibilités ! D’autant que le système est modulaire et qu’il est parfois possible d’intégrer un type de contenu dans un autre.
Les exemples déjà construits sont bien pratiques pour se donner une idée du résultat final à atteindre. Prenez le temps de les étudier, de les expérimenter… commencez par les plus faciles.

H5P en français

Si le système se suffit à lui-même pour présenter aux élèves des contenus en français, il n’en demeure pas moins que l’interface d’administration est en anglais. Fort heureusement, la situation n’est pas figée puisque les plugins WordPress peuvent être traduits ! Voici donc une archive .zip contenant les fichiers h5p-fr_FR.po et h5p-fr_FR.mo qu’il vous faudra placer dans le dossier « wp-content > plugins > languages » pour disposer du plugin H5P en français.

Reste maintenant à traduire les librairies… La philosophie de H5P reposant sur un travail communautaire, il y a fort à parier, à la lecture du forum, que les librairies en français arriveront prochainement. A suivre…

Les résultats

Un dernier item « My Results » est disponible dans le menu principal. Bien qu’il s’agisse d’un récapitulatif relativement sommaire, mais toutefois intéressant, on y trouve les exercices réalisés, le score obtenu, la date et le temps écoulé, mais celui-ci n’est disponible qu’individuellement pour chaque utilisateur. Le professeur aurait-il alors difficilement accès à l’ensemble des résultats de ses élèves? Que neni, pour ce faire, il faut sélectionner un contenu dans la liste « All H5P Content » puis cliquer sur le bouton « Results ». Vous trouverez alors les statistiques correspondant à cet exercice pour l’ensemble de vos utilisateurs.

D’autre part un élève enregistré sur le site en tant que « Contributeur » aura la possibilité de créer des contenus H5P. Ce qui est fort bien en soit, mais l’administrateur ne peut débrayer cette possibilité par une simple case à cocher. Pour peu que le site de l’école offre aux élèves la possibilité d’écrire des articles en tant que « Contributeurs », la situation pourrait s’avérer compliquée. (Il est possible d’éditer le fichier functions.php afin d’ajouter des actions et agencer le menu principal selon le type d’utilisateur, je n’ai pas essayé dans le cas précis de H5P).
Notons que les utilisateurs enregistrés en tant que simples « Abonnés » n’ont bel et bien accès qu’à leurs résultats et ne peuvent créer des contenus.

Au final

C’est un premier tour d’horizon ! Le système semble bigrement bien fichu ! Modulaire et communautaire qui plus est ! Ce genre d’outil donne véritablement une nouvelle dimension à l’usage des technologies web dans un contexte scolaire.
Certes, il faut dompter la bête mais le jeu en vaut vraiment la chandelle !

Lien de la ressource
Découvrir H5P
Vous aimez cet article? Partagez-le sur les réseaux !

2 réflexions au sujet de « Créer des contenus interactifs en HTML5 directement depuis votre site avec H5P »

  1. Le , Thomas a dit :

    Bonsoir, vous pouvez aussi créer des contenus interactif facilement avec une plateforme gratuite et nouvelle comme Genially ( http://www.genial.ly ).

  2. Le , Patrick Finot a dit :

    Merci pour votre commentaire Thomas,
    On notera toutefois qu’il ne s’agit pas vraiment du même genre d’outil.
    Genialy semble davantage orienté sur la création de contenus graphiques (affiches, infographies…) même si, effectivement, il est question d’interactivité puisque l’on peut ajouter des liens.
    H5P, quant à lui, est véritablement conçu pour la création d’activités interactives (exercices, jeux…) et on est dans un tout autre monde, me semble-t-il.
    Ceci dit, encore merci pour cette info Thomas 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *