Voir la source de H5P

== Introduction ==

H5P est un plugin pouvant être installé sur certaines [[Plateforme pédagogique|plateformes pédagogiques]] (Angl. ''Learning Management System, LMS'') qui permet de créer du contenu interactif comme des vidéos interactives, des jeux, des quiz etc. H5P facilite la création, le partage et la réutilisation de contenus et d'applications HTML5 (interopérabilité).  
 
Selon Wikipédia, {{quotation| H5P - abréviation de HTML5 Package - est un logiciel libre (licence MIT) de création de contenu interactif, basé sur HTML5 et JavaScript. Il est développé depuis 2014. H5P comporte un éditeur de contenu intuitif qui permet de générer aisément des contenus interactifs bien que l'interface soit uniquement en langue anglaise. Les contenus créés peuvent être utilisés en ligne directement sur le site, téléchargés pour être transmis ou intégrés dans une autre plateforme H5P. H5P peut être interfacé dans [[Drupal]], [[Moodle]] et WordPress3. Les utilisateurs acceptent que le contenu créé le soit sous licence Creative commons attribution 4.0 international (CC BY 4.0).}}, consulté le 21 Avril 2020.

== Utilisation en ligne ==

Vous pouvez télécharger des contenus déjà présents sous [https://h5p.org/content-types-and-applications Type de contenu et applications]. , tout est sous Licence Creative commons attribution 4.0 international (CC BY 4.0). Le site étant en anglais, la majorité des contenus le sont aussi. 

Vous pouvez également créer des contenus en créant un compte (30 jours gratuits) sous https://eu-west-1.h5p.com/register

== Intégration sur un LMS  ==

=== Types d'intégration H5P ===
Il y a 3 types d'intégration de H5p :
* Lien direct ou intégration à partir de H5P.com
* Intégration à travers la norme IMS LTI (''Learning Tools Interoperability (LTI)'' (option payante). Cette norme permet de communiquer avec un système externe depuis le LMS que vous utilisez sans que les utilisateurs n'aient besoin d'une nouvelle authentification. tout en faisant remonter des informations vers le LMS. 
* Intégration en tant que plugin dans les plateformes pédagogiques comme Moodle, Drupal ou WordPress (option gratuite).

Ces différentes installations sont documentées dans la documentation officielle concernant l'[https://h5p.org/integrations intégration de H5P]. Elles traitent aussi de l'intégration des différents types de contenus interactifs et de leurs mises à jour. A TECFA, nous avons l'installation du plugin H5P sur notre TecfaMoodle.

=== Mise à jour H5P dans Moodle === 
Dans Moodle, H5P consiste en un ensemble ensemble de bibliothèques Javascript permettant de créer les différents contenus interactifs. '''(à faire)''' Voir https://docs.moodle.org/3x/fr/H5P#Consid.C3.A9rations_techniques_pour_les_administrateurs

== Insérer un contenu interactif H5p dans Moodle ==

⚠️ contenu de cette section à mettre à jour [[Utilisateur:Lydie BOUFFLERS|Lydie Boufflers]] ([[Discussion utilisateur:Lydie BOUFFLERS|discussion]]) 19 mai 2021 à 20:52 (CEST) 

Pour insérer un contenu interactif H5P, ajoutez d'abord une activité H5P dans Moodle (cf. image ci-dessous)
# Activer le mode édition
# Ajouter une activité ou une ressource
# Sélectionner Contenu interactif H5P

[[Fichier:H5p integrationmoodle.png|600px|none|thumb|Intégration d'un contenu interactif H5P dans Moodle]]

== Utilisation de base ==

Une fois l'activité créée, vous avez deux possibilités (cf. image ci-dessous) :  créer un contenu interactif (<code>Ajouter une activité</code>) ou importer un contenu interactif H5P (<code>Téléverser</code>)

[[Fichier:Ajout-activté H5P.png|600px|none|thumb|Créer ou téléverser une activité H5P]]

Pour créer un nouveau contenu, commencez par sélectionner une activité parmi les 41 proposés dans la liste. 
Vous pouvez avoir deux cas de figure : 
* une icône indiquant <code>obtenir</code> pour installer et utiliser ce contenu. 
* une icône indiquant <code>détails</code> pour avoir un descriptif de l'activité (cela signifie que le type de contenu est déjà installé).

Voici par exemple avec le contenu "paires d'images". En cliquant sur <code>obtenir</code>, il est possible d'avoir accès à une démonstration et d'installer ce type de contenu (cf. les deux encadrés de l'image ci-dessous).

[[Fichier:H5p ajoutcontenu.png|500px|none|thumb|Obtenir un contenu]]

Une fois le contenu installé, cliquer ensuite sur <code>Utiliser</code> pour avoir accès à l'interface vous permettant de designer votre activité.

[[Fichier:H5p usecontenu.png|500px|none|thumb|Utiliser un contenu]]

=== Créer un nouveau contenu ===
Dans notre exemple, nous avons choisi "image pairing" (paires d'images) pour faire une illustration des champs pouvant être paramétrés et remplis. Ces champs sont différents pour chaque type de contenu proposé. A vous d'explorer et de consulter les [https://h5p.org/documentation/for-authors/tutorials tutoriels] et les [https://h5p.org/content-types-and-applications exemples d'applications] dans la documentation officielle.

Vous noterez au passage que l'interface est quasiment exclusivement en anglais sauf quelques termes qui ont été traduit en français. Cependant, il est possible de modifier les instructions faites aux apprenants en français de telle sorte que ceci soit transparent pour eux en remplissant les instructions (surlignés en jaune ci-dessous) mais aussi en remplaçant les éléments de l'interface (voir plus loin).

Dans l'exemple ci-dessous, vous devez remplir différents champs : 
* Titre 
* Métadonnées 
* Description de la tâche (''Task description'')
* Texte alternatif pour les images (''Alternative Text for images'') pour que l'outil soit [[Outils d'aide et d'accessibilité|accessible]] à toute personne comme la majorité des contenus H5P (plus d'informations sur l'accessibilité des contenus dans la page [https://h5p.org/documentation/installation/content-type-accessibility content type accessibility]).

[[Fichier:H5p-image-pairing1.png|none|600px|thumb|Configuration de l'activité]]

Dans la même fenêtre un peu plus bas, vous avez accès à deux types de paramétrages pour cet exemple : 
* Définition du comportement de l'activité i.e l'apprenant a t'il le droit de refaire une tentative ? 
* Options et texte. Ces paramètres vous permettent de personnaliser les boutons et le feedback envoyés aux étudiants (voir plus loin). Par exemple, traduire en français le bouton "check" comme dans l'exemple ci dessous. 

[[Fichier:H5p interfacemoodle3.png|none|600px|thumb|Options de configuration de l'activité]]

Enfin, pour les [[Métadonnée|métadonnées]], vous pouvez (devez) remplir un certain nombre d'éléments utilisés dans les [[Langage de modélisation pédagogique|langages de modélisation pédagogique]] pour faciliter la recherche, l'indexation et la réutilisation des contenus d'apprentissages.

Dans l'activité, il suffit de cliquer sur <code>métadonnées</code> à côté de titre pour ouvrir la fenêtre permettant de renseigner les métadonnées (cf. ci-dessous). Dans cette fenêtre, vous devez renseigner un les éléments et notamment choisir la licence. A ce propos, attention au travail que vous réutilisez dans le cadre notamment d'une licence libre. Vous devez remettre cette licence mais aussi indiquer les modifications que vous avez réalisées sur l’œuvre dans le <code>journal des modifications </code>. Une fois que vous avez terminé d'entrer les métadonnées, cliquer sur "enregistrer les métadonnées" en haut à droite. 

[[Fichier:H5p metadonnées.png|none|600px|thumb|Métadonnées]]

L'ensemble de ces étapes réalisées, vous pouvez maintenant enregistrer votre séquence. 

Dans notre exemple, voici ce que l'étudiant peut visualiser :

[[Fichier:ActivitéH5P-2.png|none|600px|thumb|Simulation de l'activité "image pairing" sur les animaux]]

Voici le résultat une fois que l'étudiant a réalisé l'activité. Vous pouvez voir que les changements que nous avons fait dans "options et textes" (cf. plus haut) sont affichés ici comme par exemple le bouton "réessayer". 

[[Fichier:ActivitéH5P-3.png|none|600px|thumb|Résultat de l'activité "image pairing" réalisée par un étudiant]]

Ceci est un exemple simple pour illustrer le fonctionnement, voyez l'[https://h5p.org/image-pairing exemple 'image pairing' de la documentation officielle].

=== Export et import de contenus ===

Comme mentionné plus haut, H5P permet de réutiliser du contenu en exportant ou important un contenu H5P.

Pour exporter du contenu dans Moodle, cliquer sur <code>réutiliser</code> et une nouvelle fenêtre s'ouvre qui permet d''''exporter''' le contenu créer sous forme de fichier H5P en cliquant <code>Download as an .h5p file </code> ou de copier le contenu en cliquant sur <code>copy content</code>. 

[[Fichier:H5p reuse.png|none|800px|thumb|Exporter un contenu (fichier H5P ou copier le contenu)]]

L''''importation''' d'un fichier H5P peut se faire dans Moodle mais aussi dans un autre LMS compatible H5P et ayant le plugin H5P installé. Pour '''importer''' un fichier H5P dans Moodle, cliquer sur <code>Téléverser </code> (cf. point 3.[[H5P#Utilisation de base|Utilisation de base]]). Une fois le contenu importé, un message vous signale que l'opération s'est correctement déroulée.

[[Fichier:H5pteleversement.png|none|600px|thumb|Importer un contenu]]

Pour importer une activité que vous avez copiée via ''copy content'', vous devez : 
# Créer une nouvelle activité H5P dans Moodle
# Cliquer sur <code>coller</code> comme dans l'image ci-dessous

Remarque : à ce stade, l'activité et son paramétrage est collée mais les images ne sont pas importées. Il est donc nécessaire de réimporter les images. Pour le moment, nous conseillons de réaliser un export en H5P (explorer un peu plus pour le collage d'activité, [[Utilisateur:Lydie BOUFFLERS|Lydie BOUFFLERS]] ([[Discussion utilisateur:Lydie BOUFFLERS|discussion]]) 29 avril 2020 à 11:26 (CEST))

[[Fichier:H5p coller.png|none|600px|thumb|Coller un contenu]]

== '''Limitations d’exportation des contenus H5P.''' ==
   1.    Formats compatibles avec différentes plateformes :

Expliquer que les contenus H5P exportés sous le format .h5p sont compatibles avec des plateformes spécifiques comme Moodle, WordPress et Drupal lorsqu’elles possèdent le plugin H5P intégré.

   2.    Restrictions sur l’utilisation hors ligne :

Les contenus exportés sous format .h5p nécessitent une plateforme compatible pour être utilisés. Une lecture hors ligne directe n’est pas possible sans une solution tierce.

   3.    Compatibilité des plugins avec les types de contenu récents :

Certains types de contenus interactifs récents peuvent ne pas être pris en charge par des versions plus anciennes des plugins H5P. Il est recommandé de maintenir les plugins à jour pour garantir une compatibilité optimale.

== Types de contenus == 

H5P permet d'insérer plusieurs types de contenus interactifs, il en existe au total 41 (Avril 2020) que l'on peut classifier en trois catégories principales:
* Questionnaires (Single choice Set, Arithmetic Quiz): Utilisés pour évaluer rapidement les connaissances des étudiants, par exemple, dans une leçon de mathématiques.
* Contenus interactifs (Accordion Tutorial, Timeline): Idéal pour organiser des contenus complexes, comme une chronologie des événements historiques ou une fiche de révision pour un cours de biologie.
* Jeux (Drag the Words, Fill in the Blanks): Parfaits pour renforcer des compétences linguistiques en permettant aux apprenants de compléter des phrases ou de jumeler des concepts.

Chaque contenu a un tutoriel dédié sur le site de H5P, consultez la liste et lisez le tutoriel sur la page [https://h5p.org/documentation/for-authors/tutorials tutoriels pour les auteurs] (EN) et [https://h5p.org/documentation Documentation H5P].

== Résultats == 
(à développer) 
Le plugin H5P stocke les résultats de base tels que les heures de début et de fin, les scores des utilisateurs par type de contenu H5P. Notamment, pour le scoring, c'est via le paramétrage que vous faites que ces scores seront remontés (note en point, barème etc.).

== Liens == 

; Documentation et tutoriels :
* Lien générique vers la [https://h5p.org/documentation documentation officielle] (EN)
* [https://h5p.org/documentation/for-authors/the-basics Utilisation de base H5P]
* [https://h5p.org/documentation/for-authors/tutorials Tutoriels sur tous les contenus interactifs]
* [https://h5p.org/content-types-and-applications Exemples de contenus interactifs et téléchargements de démo]
* [https://h5p.org/documentation/for-authors/import-and-export Import et export de contenus]

; Installation H5P sur Moodle : 
* Documentation H5P : [https://h5p.org/moodle 5P sur Moodle]
* Documentation Moodle [https://docs.moodle.org/3x/fr/H5P H5P sur Moodle]

[[Catégorie:Moodle]] 
[[Catégorie:Standards]]