Intégrer une page externe
- Moodle UCLouvain
Si vous souhaitez intégrer une page externe contenant par exemple une infographie (réalisée avec Canva, Genially, Sutori, …), plusieurs approches sont possibles et cette page vous aide à sélectionner l’approche qui vous convient le mieux.
Comparaison des différentes approches
| URL intégrée | Embed code dans une Page | H5P IFrame Embedder |
|---|---|---|---|
Présentation | Le contenu de la page est affiché dans un cadre de la largeur de la page et d’une hauteur de 400px (une hauteur d'écran) avec une barre de défilement. | L’affichage de la page est géré via un script externe proposé par l’hébergeur original. Souvent, ce script adapte l’affichage du contenu en largeur et en hauteur selon la taille de la fenêtre de navigation. | Le contenu de la page est affiché dans un cadre de la largeur de la page et d’une hauteur fixe définie en pixels. |
Limitations | Même sur un grand écran, l’utilisateur visionne le contenu dans une fenêtre très petite. Mais il n’y a jamais de problème pour visionner tout le contenu. | Nous ne pouvons pas garantir que tous les embed codes externes fonctionnent dans Moodle car ils se basent sur un script externe pour gérer le redimensionnement. Des problèmes ont notamment été constatés lors de l’intégration de pages très longues qui sont tronquées. Il est parfois possible de contourner le problème en adaptant le embed code. | Il n’est pas aisé de définir une hauteur de page qui s’affiche correctement sur tous les navigateurs et tous les écrans. Testez la hauteur de page minimal et ajoutez une marge de 10% de sécurité. |
Mon choix |
Intégrer ma page sous forme d’une URL intégrée
Intégrer une page externe sous forme d’une URL intégrée, c’est la solution la plus simple !
Créer une ressource de type URL
Compléter le nom de votre page et copier le lien d’affichage de votre page externe dans le champ URL externe
Spécifier le mode d’affichage Intégrer et valider
Intégrer le embed code de ma page dans une Page
Les outils externes propose différentes options de partage pour leurs contenus et proposent souvent un code d’intégration lié ou embed code. Que faire de ce code ?
Créer une ressource de type Page
Editer le code source du contenu de la page
Coller le embed code et valider
En cas de problème d’affichage (contenu tronqué notamment), supprimez le contenu des balises <script> … </script> pour voir si cela améliore la situation.
Sinon, considérez une option pour l’intégration de votre contenu.
Intégrer ma page dans un contenu H5P IFrame Embedder
Créer une ressource de type H5P IFrame Embedder
compléter le titre du contenu
spécifier une largeur standard et une largeur minimale (le contenu sera adapté en largeur à la taille de la fenêtre)
spécifier le hauteur (tester différentes valeur jusqu'à obtenir un affichage complet de la page et prévoyez une marge de 10% supplémentaire)
coller le lien d’affichage de la page dans le champ Source
notez que vous pouvez autoriser le redimensionnement de la page mais que le défilement n’est pas supporté par l’affichage en pleine page
Licence Creative Commons by-sa