Créer une activité H5P et l’intégrer facilement sur n’importe quelle page web

22 octobre 2024 LABO & TESTS, LEARNING, OUTILS WEB, OUTILS TICE, RICHMEDIA
H5P plugin Moodle Learning wordpress Timeline HTML5

Les activités H5P sont souvent intégrées dans des plateformes de e-learning (LMS), comme Moodle, où vous créez directement votre contenu H5P. Une autre option courante est l’utilisation de WordPress ou Drupal. Une fois le plugin installé, vous pouvez créer et modifier vos activités depuis le back-office, puis les intégrer à vos pages via un shortcode sur WordPress ou un champ H5P sur Drupal.

Mais que faire si vous ne possédez ni LMS, ni site WordPress ou Drupal ? La première solution est d'utiliser la plateforme en ligne H5P.org. Vous y créez vos activités et les intégrez sur votre site web, comme vous le feriez avec une vidéo YouTube. Toutefois, cela implique que votre contenu soit hébergé sur H5P.org, ce qui permet à d'autres utilisateurs de l’intégrer également sur leurs pages, une option qui peut être avantageuse selon les cas.

Une alternative, et celle sur laquelle nous nous concentrerons, est d'utiliser des logiciels comme Lumi Education ou Logiquiz. Ces outils vous permettent de créer des activités H5P hors ligne, puis de les exporter en HTML pour les intégrer directement dans le code de vos pages web.

Créez vos activités H5P localement grâce à une application dédiée – Oui, c'est possible !

Lumi Education est un logiciel développé par Jan Philip Schellenberg et Sebastien Rettig, qui est mis à votre disposition gratuitement. Vous pouvez choisir de l’installer sur votre ordinateur ou d’accéder à la version en ligne. Si vous optez pour cette dernière, il est important de prendre en compte certains aspects : Lumi est une petite entreprise qui vous fournit des ressources serveurs et un outil fonctionnel. Cependant, elle se réserve le droit de fermer un compte inactif après vous avoir prévenu, et elle décline toute responsabilité en cas de problème serveur. Il est donc essentiel de sauvegarder sur vos propres supports l’archive .h5p des activités que vous créez en ligne et que vous souhaitez conserver pour une utilisation future.

L'application est compatible avec Windows, macOS et Linux, et comprend un éditeur H5P ainsi qu'un outil d'analyse. Lors du lancement de l'éditeur, vous avez la possibilité d'importer une activité externe ou de créer votre contenu à partir des modèles officiels, présentés de manière similaire aux plugins H5P.

L'éditeur s'utilise comme sur les différents CMS (Drupal ou Wordpress) ou sur les plateformeSs Elearning (Moodle)

Exportez votre activité de questions ou de présentation H5P en HTML

Après avoir finalisé votre activité, vous avez la possibilité de l'exporter au format HTML ou en paquet SCORM via le menu Fichier > Exporter…

La fenêtre d'exportation vous permet de choisir entre un fichier unique ou plusieurs fichiers multimédias. De plus, elle propose plusieurs options de configuration pour personnaliser l'affichage, y compris l'ajout d'une feuille de style CSS.

Intégrez le code HTML à votre page web

Le fichier HTML exporté constitue une page autonome. En cliquant dessus, elle s'ouvrira directement dans votre navigateur. Pour intégrer cette activité dans une autre page HTML, vous pouvez utiliser une balise <iframe>. Par exemple, si votre fichier s'intitule MonActiviteH5P.html et se trouve dans le même dossier que votre page HTML cible, vous pouvez insérer l'activité avec le code suivant :

<iframe id="Module1"
    title="Connaisance des Fruits"
    width="600"
    height="300"
    src="https://lecerfraphael.fr/MonActiviteH5P.html">
</iframe>