Optimiser la réutilisation et la multidiffusion des ressources pédagogiques avec l'utilisation du code embarqué (embed code)

1. Utiliser le
”embed code”
en formation
Auteur : Idremeau
Consultante-formatrice Digital Learning
Avril 2017

2. 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.

3. 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 »

4. 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

5.  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

6. ▸ Pour tout type de ressources
Vidéos,
Diaporamas,
Sites,
Documents
Images
Quiz
Exercices
Tableau blanc
Animations

7.  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

8. 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

9. Où le trouver ?
Identification et repérage
3 clics !!

10. 1. Repérer le logo
2. Outil de personnalisation (taille, couleur, cadre,… )
▸ la balise « embed »
<embed>
signifie
- insérer
- intégrer

11. 1. Cliquer sur
« partager »
2. Cliquer sur
« intégrer »
▸ Exemple
3. Copier le code

12. ▸autre exemple
1. Cliquer sur
« intégrer »
2. Copier le
code

13. Attention !
l’URL du lien
n’est pas le
code
embarqué
https://www.youtube.c
om/watch?v=_PF-
7KxOsgc
<embed width="560"
height="315"
src="https://www.yout
ube.com/embed/_PF-
7KxOsgc?rel=0"
frameborder="0"
allowfullscreen></emb
ed>
lien
embed
code
▸ Ne pas confondre !

14. < OBJECT …
<DIV …
<EMBED …
▸ Comment le reconnaître ?

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

16. 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

17. 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

18. « 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)

19. Comment
l’utiliser?
Procédure en 4 étapes

20. ▸ 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 »

21. ▸ Etape 2 et 3
Copiez le code
Collez
dans
l’éditeur
html ouvert

22. 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

23. 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

24. 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

25. 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/Cont
enuWidget
Intégrer une
carte
géographique
https://www.embed-
map.com/
Intégrer un
quiz de type
« Ed-Puzzle »
(pdf; p.6)

26. Merci !
Contact
▸ idremeau@wanadoo.fr
Site
▸http://e-learningbretagne.blogspirit.com/
PresentationtemplatebySlidesCarnival