« H5P » : différence entre les versions
(Page créée avec « {{En construction}} == Introduction == Selon Wikipédia, {{quotation| H5P - abréviation de HTML5 Package - est un logiciel libre (licence MIT) de création de contenu in... ») |
|||
(101 versions intermédiaires par 4 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
{{ | == 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 est composé d'un ensemble de librairies 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]] | |||
== 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 | |||
* Contenus interactifs : Accordion Tutorial, Timeline | |||
* Jeux : Drag the words, Fill in the Blanks | |||
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). | |||
== | == 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 == | == 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]] |
Dernière version du 19 mai 2021 à 20:03
Introduction
H5P est un plugin pouvant être installé sur certaines 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, “ 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 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'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 est composé d'un ensemble de librairies 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 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
Utilisation de base
Une fois l'activité créée, vous avez deux possibilités (cf. image ci-dessous) : créer un contenu interactif (Ajouter une activité
) ou importer un contenu interactif H5P (Téléverser
)
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
obtenir
pour installer et utiliser ce contenu. - une icône indiquant
détails
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 obtenir
, 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).
Une fois le contenu installé, cliquer ensuite sur Utiliser
pour avoir accès à l'interface vous permettant de designer votre activité.
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 tutoriels et les 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 accessible à toute personne comme la majorité des contenus H5P (plus d'informations sur l'accessibilité des contenus dans la page content type accessibility).
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.
Enfin, pour les métadonnées, vous pouvez (devez) remplir un certain nombre d'éléments utilisés dans les 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 métadonnées
à 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 journal des modifications
. Une fois que vous avez terminé d'entrer les métadonnées, cliquer sur "enregistrer les métadonnées" en haut à droite.
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 :
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".
Ceci est un exemple simple pour illustrer le fonctionnement, voyez l'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 réutiliser
et une nouvelle fenêtre s'ouvre qui permet d'exporter le contenu créer sous forme de fichier H5P en cliquant Download as an .h5p file
ou de copier le contenu en cliquant sur copy content
.
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 Téléverser
(cf. point 3.Utilisation de base). Une fois le contenu importé, un message vous signale que l'opération s'est correctement déroulée.
Pour importer une activité que vous avez copiée via copy content, vous devez :
- Créer une nouvelle activité H5P dans Moodle
- Cliquer sur
coller
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é, Lydie BOUFFLERS (discussion) 29 avril 2020 à 11:26 (CEST))
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
- Contenus interactifs : Accordion Tutorial, Timeline
- Jeux : Drag the words, Fill in the Blanks
Chaque contenu a un tutoriel dédié sur le site de H5P, consultez la liste et lisez le tutoriel sur la page tutoriels pour les auteurs (EN).
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 documentation officielle (EN)
- Utilisation de base H5P
- Tutoriels sur tous les contenus interactifs
- Exemples de contenus interactifs et téléchargements de démo
- Import et export de contenus
- Installation H5P sur Moodle
- Documentation H5P : 5P sur Moodle
- Documentation Moodle H5P sur Moodle