Utiliser le code embarqué en formation

Utiliser le

”embed code” en formation

Auteur : Idremeau

Consultante-formatrice Digital Learning

Avril 2017

Définition

Le "code embarqué" est un code d'intégration (html) qui permet de lire du contenu d'un site sur un autre site en faisant un simple copié-collé d'un code à insérer dans l'éditeur de code du site web cible.

Principe 1

<iframe width="560" height="315"

src="https://www.youtube.com/embed/_PF-7KxOsgc?rel=0"

frameborder="0" allowfullscreen></iframe>

« Derrière

toute ressource

se cache du

code »

Principe 2

▹ Participer à l’intelligence collective

en publiant des ressources re-diffusables

▹ Accessibilité aux ressources facilitée

▹ Multi-diffusion de la ressource

« Le partage

des ressources

créées par les

internautes est

la philosophie

du Web 2.0 »

Illustration : CC BY SA Ja458vier

du partage à la réutilisation

« Il ne s’agit plus simplement de

partager sur les réseaux, mais

d’intégrer, de réutiliser et de

scénariser les ressources »

<Embed>

Illustration : CC -By Martial Red

insérer

isoler

réutiliser

scénariser

▸ Pour tout type de ressources

Vidéos,

Diaporamas,

Sites,

Documents

Images

Quiz

Exercices

Tableau blanc

Animations

Images cliquables (ThingLink, ..) Des fichiers word, excel, pdf ..

(Box.com, Google Drive …) Des vidéos (Youtube, Dailymotion …) Des diaporamas (Slideshare,

Voicethread ..) Des outils interactifs

(Answergarden, Padlet, …) Des sites de musiques (Soundcloud, …) Vidéo-quizz, sondages (Playposit) Bandes dessinées (Pixton) Cartes mindmap (Mindomo, Popplet) …

Une grande variété de ressources

Des ressources créées avec des services et des outils 2.0

Les avantages en formation

▹ Présence de la ressource dans un espace apprenant neutre (pas de publicité ni de distractions)

▹ Créer facilement des parcours avec des ressources en ligne

▹ Lecteur interactif associé à la ressource (pdf, doc) et possibilité de modifier les paramètres d’intégration

▹ Pas de connaissances informatiques requises

Où le trouver ? Identification et repérage

3 clics !!

1. Repérer le logo

2. Outil de personnalisation (taille, couleur, cadre,… )

▸ la balise « embed »

<embed>

signifie

- insérer - intégrer

copier 1. Cliquer sur

« partager »

2. Cliquer sur

« intégrer »

▸ Exemple

3. Copier le code

▸autre exemple

1. Cliquer sur

« intégrer »

2. Copier le

code

Attention ! l’URL du lien n’est pas le code embarqué

https://www.youtube.com/watch?v=_PF-7KxOsgc <embed width="560" height="315" src="https://www.youtube.com/embed/_PF-7KxOsgc?rel=0" frameborder="0" allowfullscreen></embed>

lien

embed code

▸ Ne pas confondre !

< OBJECT …

<DIV …

<EMBED …

▸ Comment le reconnaître ?

Que dit le droit ? Utilisation et réutilisation des ressources

en France et en Europe*

▸Une autorisation de l’auteur est requise pour sa réutilisation, modification, traduction …

▸ Cas particulier

des ressources « embed »

*Cour Européenne de

justice

▸Sans mention particulière tout contenu diffusé sur internet est protégé par le droit d’auteur.

▸Propriété intellectuelle

Par Audrey

Ego (Doctorante en

droit privé à

l'Université de

Lille 2)

Le « embed » et droit d’auteur

• Donner l’origine de la source

et le nom de l’auteur

• S’assurer que la ressource

respecte les droits d’auteur

« (…) Autorisation incluse dans les Conditions d’Utilisation des services »

https://www.youtube.com/watch?v=9prY5VVBR_A

« Embed » et droit d’auteur

▸Streaming (vidéo) ▸Pas de téléchargement de la ressource

▸Copie et intégration du lecteur permettant de visualiser la ressource

▸ Autorisation de

l’auteur (désactivation possible)

Comment l’utiliser?

Procédure en 4 étapes

▸ Se placer en mode édition html sur le site cible, site de « réception »

Le code copié ne peut être reconnu que

par un éditeur « html » en ligne !

▸ Etape 1

Cliquer sur

le mode

« html »

▸ Etape 2 et 3

Copiez le code

Collez

dans

l’éditeur

html ouvert

Rebasculez

en mode

mode

d’édition

normal

▸ Etape 4

La ressource apparaît telle

qu’elle était sur le site source :

Elle est visionnable entièrement

et interactive.

▸ Editeur de texte en mode édition normal

Testez votre code en ligne !

http://htmledit.squarefree.com/

Coller le code embarqué dans l’espace bleu

On voit ensuite apparaître la ressource au-dessous

http://www.gettyimages.fr/resources/embed#

* Sur sites non marchands

Image embarquée

Cliquez ici pour

accéder au code

Embarquez des images de qualité !

• Page dédiée à la recherche d’images « à embarquer »* sur le site Gettyimages

• Utilisable sur des sites non marchands

• Choix entre plus de 66 millions d’images !

• Possibilité d’embarquer un diaporama de plusieurs images

Tutoriels & Liens

Intégrer un

avatar « VOKI »

dans un LMS http://fr.calameo.co

m/read/001055084d

21c873774cf

Autres exemples de widget-ressources : http://outils-reseaux.org/ContenuWidget

Intégrer une

carte

géographique https://www.embed-

map.com/

Intégrer un

quiz de type

« Ed-Puzzle »

(pdf; p.6)

Merci ! Contact

▸ idremeau@wanadoo.fr

Site

▸http://e-learningbretagne.blogspirit.com/

Pre

se

nta

tion te

mp

late

by S

lide

sC

arn

ival