SlideShare une entreprise Scribd logo
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
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.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 !
< 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/Cont
enuWidget
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/
PresentationtemplatebySlidesCarnival

Contenu connexe

Similaire à Utiliser le code embarqué en formation

Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEOSébastien Delorme
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
Stéphane HULARD
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
Claire Chignard
 
La révolution Docker
La révolution DockerLa révolution Docker
La révolution Docker
Nicolas De Loof
 
Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0Loïc Haÿ
 
20121128 licences libres
20121128 licences libres20121128 licences libres
20121128 licences libres
Sylvain DENIS
 
Formation : Techniques de rédaction web - Hack/Hackers Dakar
Formation : Techniques de rédaction web - Hack/Hackers DakarFormation : Techniques de rédaction web - Hack/Hackers Dakar
Formation : Techniques de rédaction web - Hack/Hackers Dakar
Mountaga CISSE
 
Globinaire "Licences Creative Commons en formation"
Globinaire "Licences Creative Commons en formation"Globinaire "Licences Creative Commons en formation"
Globinaire "Licences Creative Commons en formation"
Isabelle Dremeau
 
GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2
GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2
GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2
Laurent Chasset
 
À La découverte de flow3 - t3con12
À La découverte de flow3 -  t3con12À La découverte de flow3 -  t3con12
À La découverte de flow3 - t3con12mguermazi
 
Rewics MB
Rewics MBRewics MB
Rewics MB
Media animation
 
CocoaHeads Rennes #6
CocoaHeads Rennes #6CocoaHeads Rennes #6
CocoaHeads Rennes #6
CocoaHeadsRNS
 
Licences cc version 1
Licences cc version 1Licences cc version 1
Licences cc version 1
Françoise Grave
 
Formation Play! framework
Formation Play! frameworkFormation Play! framework
Formation Play! framework
Benoît Simard
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0Dominique74930
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0vedelipac
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0audreyabbonen
 
WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?
mirabelleformation
 
GWT no-dto
GWT no-dtoGWT no-dto
GWT no-dto
François Wauquier
 
Docker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à DockerDocker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à Docker
Thibaut Marmin
 

Similaire à Utiliser le code embarqué en formation (20)

Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
 
La révolution Docker
La révolution DockerLa révolution Docker
La révolution Docker
 
Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0
 
20121128 licences libres
20121128 licences libres20121128 licences libres
20121128 licences libres
 
Formation : Techniques de rédaction web - Hack/Hackers Dakar
Formation : Techniques de rédaction web - Hack/Hackers DakarFormation : Techniques de rédaction web - Hack/Hackers Dakar
Formation : Techniques de rédaction web - Hack/Hackers Dakar
 
Globinaire "Licences Creative Commons en formation"
Globinaire "Licences Creative Commons en formation"Globinaire "Licences Creative Commons en formation"
Globinaire "Licences Creative Commons en formation"
 
GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2
GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2
GTT #2 | 2014-07-02 | GEPPIA TROUVE TOUT N°2
 
À La découverte de flow3 - t3con12
À La découverte de flow3 -  t3con12À La découverte de flow3 -  t3con12
À La découverte de flow3 - t3con12
 
Rewics MB
Rewics MBRewics MB
Rewics MB
 
CocoaHeads Rennes #6
CocoaHeads Rennes #6CocoaHeads Rennes #6
CocoaHeads Rennes #6
 
Licences cc version 1
Licences cc version 1Licences cc version 1
Licences cc version 1
 
Formation Play! framework
Formation Play! frameworkFormation Play! framework
Formation Play! framework
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0
 
Support de formation aout 2011 outils web 2.0
Support de formation aout 2011   outils web 2.0Support de formation aout 2011   outils web 2.0
Support de formation aout 2011 outils web 2.0
 
WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?
 
GWT no-dto
GWT no-dtoGWT no-dto
GWT no-dto
 
Docker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à DockerDocker Tours Meetup #1 - Introduction à Docker
Docker Tours Meetup #1 - Introduction à Docker
 

Plus de Isabelle Dremeau

Classe virtuelle "Présentation Mooc Team"
Classe virtuelle "Présentation Mooc Team"Classe virtuelle "Présentation Mooc Team"
Classe virtuelle "Présentation Mooc Team"
Isabelle Dremeau
 
Quels outils numériques pour créer des vidéo avec quiz ?
Quels outils numériques pour créer des vidéo avec quiz ?Quels outils numériques pour créer des vidéo avec quiz ?
Quels outils numériques pour créer des vidéo avec quiz ?
Isabelle Dremeau
 
Comment faire collaborer les apprenants à distance ?
Comment faire collaborer les apprenants à distance ?Comment faire collaborer les apprenants à distance ?
Comment faire collaborer les apprenants à distance ?
Isabelle Dremeau
 
Animer une classe virtuelle
Animer une classe virtuelleAnimer une classe virtuelle
Animer une classe virtuelle
Isabelle Dremeau
 
Comment s'enregistrer pour réaliser un cours en vidéo ?
Comment s'enregistrer pour réaliser un cours en vidéo ?Comment s'enregistrer pour réaliser un cours en vidéo ?
Comment s'enregistrer pour réaliser un cours en vidéo ?
Isabelle Dremeau
 
(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...
(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...
(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...
Isabelle Dremeau
 
Badges numériques en formation
Badges numériques en formationBadges numériques en formation
Badges numériques en formation
Isabelle Dremeau
 
Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"
Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"
Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"
Isabelle Dremeau
 
14 outils de vidéo-quiz
14 outils de vidéo-quiz14 outils de vidéo-quiz
14 outils de vidéo-quiz
Isabelle Dremeau
 
Webinaire "Outils numériques et feedback pédagogique"
Webinaire "Outils numériques et feedback pédagogique"Webinaire "Outils numériques et feedback pédagogique"
Webinaire "Outils numériques et feedback pédagogique"
Isabelle Dremeau
 
Sketchnoting : Usages et outils pour l'apprentissage
Sketchnoting : Usages et outils pour l'apprentissageSketchnoting : Usages et outils pour l'apprentissage
Sketchnoting : Usages et outils pour l'apprentissage
Isabelle Dremeau
 
Créer un parcours e-learning sans LMS
Créer un parcours e-learning sans LMSCréer un parcours e-learning sans LMS
Créer un parcours e-learning sans LMS
Isabelle Dremeau
 
Veille ciblée en formation
Veille ciblée en formationVeille ciblée en formation
Veille ciblée en formation
Isabelle Dremeau
 
Présentation webconférence
Présentation webconférencePrésentation webconférence
Présentation webconférence
Isabelle Dremeau
 
Webconférence "Outils collaboratifs en classe de langue"
Webconférence "Outils collaboratifs en classe de langue"Webconférence "Outils collaboratifs en classe de langue"
Webconférence "Outils collaboratifs en classe de langue"
Isabelle Dremeau
 
6 outils de création de nuages de mots-clés dynamiques
6 outils de création de nuages de mots-clés dynamiques6 outils de création de nuages de mots-clés dynamiques
6 outils de création de nuages de mots-clés dynamiques
Isabelle Dremeau
 
7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif
Isabelle Dremeau
 
Table Ronde Vocable - Expolangues 2013
Table Ronde Vocable - Expolangues 2013Table Ronde Vocable - Expolangues 2013
Table Ronde Vocable - Expolangues 2013
Isabelle Dremeau
 
Carte des outils 2.0 en français (2011)
Carte des outils 2.0 en français (2011)Carte des outils 2.0 en français (2011)
Carte des outils 2.0 en français (2011)
Isabelle Dremeau
 
Les frontières 2.0 de la formation
Les frontières 2.0 de la formationLes frontières 2.0 de la formation
Les frontières 2.0 de la formation
Isabelle Dremeau
 

Plus de Isabelle Dremeau (20)

Classe virtuelle "Présentation Mooc Team"
Classe virtuelle "Présentation Mooc Team"Classe virtuelle "Présentation Mooc Team"
Classe virtuelle "Présentation Mooc Team"
 
Quels outils numériques pour créer des vidéo avec quiz ?
Quels outils numériques pour créer des vidéo avec quiz ?Quels outils numériques pour créer des vidéo avec quiz ?
Quels outils numériques pour créer des vidéo avec quiz ?
 
Comment faire collaborer les apprenants à distance ?
Comment faire collaborer les apprenants à distance ?Comment faire collaborer les apprenants à distance ?
Comment faire collaborer les apprenants à distance ?
 
Animer une classe virtuelle
Animer une classe virtuelleAnimer une classe virtuelle
Animer une classe virtuelle
 
Comment s'enregistrer pour réaliser un cours en vidéo ?
Comment s'enregistrer pour réaliser un cours en vidéo ?Comment s'enregistrer pour réaliser un cours en vidéo ?
Comment s'enregistrer pour réaliser un cours en vidéo ?
 
(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...
(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...
(#actualisation) Globinaire "Les lignes du temps : outils 2.0 et applications...
 
Badges numériques en formation
Badges numériques en formationBadges numériques en formation
Badges numériques en formation
 
Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"
Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"
Globinaire "Les lignes du temps : outils 2.0 et applications pédagogiques"
 
14 outils de vidéo-quiz
14 outils de vidéo-quiz14 outils de vidéo-quiz
14 outils de vidéo-quiz
 
Webinaire "Outils numériques et feedback pédagogique"
Webinaire "Outils numériques et feedback pédagogique"Webinaire "Outils numériques et feedback pédagogique"
Webinaire "Outils numériques et feedback pédagogique"
 
Sketchnoting : Usages et outils pour l'apprentissage
Sketchnoting : Usages et outils pour l'apprentissageSketchnoting : Usages et outils pour l'apprentissage
Sketchnoting : Usages et outils pour l'apprentissage
 
Créer un parcours e-learning sans LMS
Créer un parcours e-learning sans LMSCréer un parcours e-learning sans LMS
Créer un parcours e-learning sans LMS
 
Veille ciblée en formation
Veille ciblée en formationVeille ciblée en formation
Veille ciblée en formation
 
Présentation webconférence
Présentation webconférencePrésentation webconférence
Présentation webconférence
 
Webconférence "Outils collaboratifs en classe de langue"
Webconférence "Outils collaboratifs en classe de langue"Webconférence "Outils collaboratifs en classe de langue"
Webconférence "Outils collaboratifs en classe de langue"
 
6 outils de création de nuages de mots-clés dynamiques
6 outils de création de nuages de mots-clés dynamiques6 outils de création de nuages de mots-clés dynamiques
6 outils de création de nuages de mots-clés dynamiques
 
7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif
 
Table Ronde Vocable - Expolangues 2013
Table Ronde Vocable - Expolangues 2013Table Ronde Vocable - Expolangues 2013
Table Ronde Vocable - Expolangues 2013
 
Carte des outils 2.0 en français (2011)
Carte des outils 2.0 en français (2011)Carte des outils 2.0 en français (2011)
Carte des outils 2.0 en français (2011)
 
Les frontières 2.0 de la formation
Les frontières 2.0 de la formationLes frontières 2.0 de la formation
Les frontières 2.0 de la formation
 

Dernier

Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
BenotGeorges3
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
M2i Formation
 
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
cristionobedi
 
Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025
Billy DEYLORD
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
Txaruka
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
Friends of African Village Libraries
 

Dernier (8)

Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
 
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
 
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
 
Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025Cycle de Formation Théâtrale 2024 / 2025
Cycle de Formation Théâtrale 2024 / 2025
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
 

Utiliser le code embarqué en formation

  • 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.
  • 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)
  • 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)