Embed Size (px)
Citation preview
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
Site
▸http://e-learningbretagne.blogspirit.com/
Pre
se
nta
tion te
mp
late
by S
lide
sC
arn
ival
