L'activité "Document" recèle de nombreuses fonctionnalités, il n'est pas toujours aisé de les maîtriser quand on arrive pour la première fois sur cette activité. Cet article va se focaliser sur la fonctionnalité "Ressources web".

Plus qu'un lien vers un site web ou un logiciel SaaS quelconque, la Ressource Web vous permet de faire une intégration "iFrame".

Mais qu'est ce que l'iFrame ?

iFrame est le nom donné à une balise HTML utilisée dans le langage informatique pour intégrer dans une page HTML (une page web donc) le contenu d'une autre page HTML.

La balise iFrame a plusieurs utilités. Beaucoup l'emploient pour afficher sur une page Web un contenu (texte, image, etc.) en provenance d'un autre serveur, sans que l'internaute puisse être en mesure d'identifier l'origine de ce contenu.

Vous l'aurez donc compris, grâce à cela vous allez pouvoir offrir un contenu riche et diversifié à vos apprenants sans qu'ils aient à passer d'une plateforme à l'autre ! Et pour vous rien de plus simple il suffit de copier/coller l'url du site que vous souhaitez partager ou récupérer la fameuse balise iFrame du logiciel tierce. 🎉

Iframe mais pas que !

La ressource web va vous permettre de venir injecter du code "embed" directement dans cette dernière.

Ce code sera donc entouré de "balises HTML", comme présenté ci-dessous en rouge :

Il pourra également y avoir d'autres balises HTML dans le code injecté, comme "href" ou "img" en bleu ci-dessus.

Pour des questions de sécurités, les balises injectées dans ces bouts de code devront forcément exister dans notre liste officielle.
Si votre ressource web ne fonctionne pas correctement, c'est certainement qu'elle utilise une balise non conforme.

Voir la liste des balises HTML conformes ✅

[
  'a',
  'abbr',
  'acronym',
  'address',
  'area',
  'article',
  'aside',
  'audio',
  'b',
  'bdi',
  'bdo',
  'big',
  'blink',
  'blockquote',
  'body',
  'br',
  'button',
  'canvas',
  'caption',
  'center',
  'cite',
  'code',
  'col',
  'colgroup',
  'content',
  'data',
  'datalist',
  'dd',
  'decorator',
  'del',
  'details',
  'dfn',
  'dialog',
  'dir',
  'div',
  'dl',
  'dt',
  'element',
  'em',
  'fieldset',
  'figcaption',
  'figure',
  'font',
  'footer',
  'form',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'head',
  'header',
  'hgroup',
  'hr',
  'html',
  'i',
  'img',
  'input',
  'ins',
  'kbd',
  'label',
  'legend',
  'li',
  'main',
  'map',
  'mark',
  'marquee',
  'menu',
  'menuitem',
  'meter',
  'nav',
  'nobr',
  'ol',
  'optgroup',
  'option',
  'output',
  'p',
  'picture',
  'pre',
  'progress',
  'q',
  'rp',
  'rt',
  'ruby',
  's',
  'samp',
  'section',
  'select',
  'shadow',
  'small',
  'source',
  'spacer',
  'span',
  'strike',
  'strong',
  'style',
  'sub',
  'summary',
  'sup',
  'table',
  'tbody',
  'td',
  'template',
  'textarea',
  'tfoot',
  'th',
  'thead',
  'time',
  'tr',
  'track',
  'tt',
  'u',
  'ul',
  'var',
  'video',
  'wbr',
]

A cette liste s'ajoute les iframe dont la source est une url valide de type http ou https.

Concrètement comment je fais pour créer mon parcours e-learning ?

Prenons quelques exemples concrets d'intégration facile. 😊

Les vidéos : cela vous permet de ne pas être limités à Youtube / Viméo ou en intégration directe depuis votre ordinateur. Récupérez l'url de la vidéo et copiez la simplement.

⬆️ Notez tout de même qu'en passant par ce biais vos apprenants ne sera pas obligé de visionner un certain pourcentage de la vidéo. 💡
Les différents logiciels de Google Workplace 👉 voir comment les intégrer ici. En utilisant la suite google vous ainis intégrer les Slides ou bien des formulaires Google Form.
Genially pour gamifier vos parcours e-learning 👉 voir comment les intégrer ici.
Calendly pour proposer des rendez-vous facilement à vos apprenants. Copiez/collez l'URL de votre agenda dans les Ressources web et l'intégration sera parfaitement exécutée : vos apprenants n'auront plus qu'à choisir leur créneau.
Articulate 360 pour ajouter des modules e-learning.
Et finalement la majorité des sites comme par exemple ce site d'enregistrement vocal.

Évidemment les possibilités sont nombreuses, nous ne pouvons pas toutes les lister ici 😉

N'hésitez pas également à nous faire part de vos tests/expériences de sites que vous avez intégrés via la fonctionnalité "Ressources web" sur le chat !