Tutoriel)«)Intégration)Code)») 313)

!!

Après / avant le cours ... « intégration du code » dans le cahier de textes, dans Moodle ... (depuis Youtube, Dailymotion, Vimeo, Deezer, Spotify ... et autres sites)

Les enjeux actuels du cours d’éducation musicale dépassent largement l’espace de la classe et les horaires du cours. Poursuivre ou anticiper les activités permet d’envisager notre pédagogie de façon différente. La question des supports liés aux espaces numériques de travail, au cahier de textes électronique, au Moodle (ou autre outil pour les ressources partagées) revient alors souvent.

Ce tutoriel n’a pour objectif que de donner des pistes pour « l’intégration du code » et aux ressources disponibles sur les plateformes de diffusion, et pour lesquelles la question des droits d’auteur ne nous engagent ... « pas trop » in fine.

Pour le Moodle et les supports comme Deezer ou Spotify, des tutoriels spécifiques ont été réalisés, avec autorisation demandée aux parents ou tuteurs pour l’ouverture d’un compte sur ces sites en streaming (cf. « l’identité numérique » des élèves : lire à ce sujet les fiches « Legamedia » sur EDUSCOL : http://eduscol.education.fr/internet-responsable/ressources/legamedia.html).

SOMMAIRE

1. Situation la plus simple pour retrouver et intégrer un lien 2. Intégration d’un lien vidéo avec lancement d’un minutage précis 3. Intégration d’un lien dans Pronote

4. Avec l’application académique Cahier de textes 5. Intégration complète du code : « embed code » 6. Pour « intégrer du code » dans Moodle ...

!

1. Situation la plus simple : retrouver et intégrer un lien dans ...

• Un copier/coller de l’adresse URL de la vidéo que vous voulez intégrer comme support de travail ou de révision pour les élèves (cahier de textes ou un cours Moodle) [ci-contre un lien URL Youtube. Faire de même avec Dailymotion, Vimeo ...]

• Selon les sites, vous pouvez cliquer sur l’icône « Partager » ou « Share » : pour Dailymotion, l’icône se trouve sur l’image vidéo elle-même : un lien raccourci s’affiche (choisir alors la mini URL sous Permalien).

• Avec Spotify, la méthode est un peu différente : faites un clic droit sur le titre puis sur « Copier le lien vers le titre ».

• Avec Deezer : faites un clic droit sur le titre puis cliquez sur « Partager » et enfin sur « Copier l’URL Deezer ».

Ensuite, collez votre lien dans votre cahier de textes, dans un cours Moodle, dans votre ENT,

éventuellement dans votre blog ...

ou ou

!

2. Intégration d’un lien vidéo avec lancement d’un minutage précis :

• Avec Youtube : cliquez sur « Partager » puis cochez sur « Démarrer à : ». Enfin copiez le code avec l’URL qui permettra de lancer la vidéo à l’instant précis souhaité ...

⇒ Youtube propose une autre méthode : faites un clic droit sur la vidéo et vous pouvez copier le code directement pour un départ précis : « copier l’URL de la vidéo à partir de cette séquence »

• Avec Dailymotion : cliquez sur « Exporter » puis cochez « Débute à : » [petite différence avec Youtube, le minutage dans le code est calculé « à la seconde » : 1mn 43s = 103 s]

• Avec Vimeo : cliquez sur « Partager » ou sur l’icône dans l’image. Puis cliquez à l’intérieur du lien pour faire apparaître « start video at ... » qu’il faut cocher.

⇒ Petite astuce : vous pouvez manuellement écrire le moment où vous voulez faire débuter la vidéo en ajoutant : « #t=secondes » à la fin de l’URL. Exemple : https://vimeo.com/42962767#t=82s

Tutoriel)«)Intégration)Code)») 323)

3. Intégration d’un lien dans PRONOTE :

Vous pouvez coller « simplement » les liens dans Pronote mais il est possible d’aller plus loin avec le lecteur HTML, en cliquant sur « Aa » : • Vous écrivez normalement votre texte, un mot : • Vous le sélectionnez ensuite, puis vous cliquez sur

l’icône « insérer/éditer un lien » ......................... • Collez votre lien dans « URL du lien ». Dans la partie

« Cible », laissez : « Ouvrir dans une nouvelle fenêtre » o Cliquez enfin sur « insérer » en bas de fenêtre.

• Vous pouvez faire de même en insérant une image : ! il suffit de faire un copier/coller d’une image qui se

trouve sur un site Internet (vérifiez l’origine de ce site) ! sélectionnez ensuite l’image dans le lecteur HTML et

reprenez la méthode utilisée pour un lien sur un texte. o Petite astuce : « alignez à droite » cette image ...

4. Avec l’application académique Cahier de textes :

• La méthode est identique avec l’icône pour l’insertion de liens simples.

• L’insertion d’une image : icône avec lien sur un site internet par copier/coller de l’adresse URL de l’image. L’image peut devenir elle-même un lien vers une ressource musicale : cliquez alors sur l’image puis qui correspond à l’icône « insérer un lien ».

!

5. Intégration complète du code : « embed code »

Cette méthode permet de visualiser directement la ressource sans sortir de l’outil avec lequel on travaille (cahier de textes, Moodle). Celle-ci n’est pas encore disponible avec Pronote.

• Avec le « Cahier de textes académique » : ⇒ Vous devez préalablement copier le code depuis

la source : cliquez sur Partager puis sur Intégrer

⇒ Copiez le code (qui commence par < iframe...), puis le coller dans le cahier de textes avec l’outil : le lien Youtube (exemple ci-contre) s’affichera directement sans sortir du cahier de textes.

• Avec Dailymotion, cliquez sur « Exporter » puis sur « Copier le code d’intégration »

• Avec Vimeo, cliquez sur Partager puis Intégrer

• Avec Deezer, faites un clic droit sur le fichier son puis Partager, puis sur le bouton « </> ». Sur la nouvelle page ouverte, cliquez sur « Get the code »

• Avec Spotify, il suffit de faire un clic droit sur le titre souhaité, puis « copier le code embed »

Remarque pour tous ces liens : en cliquant sur « options » ou « plus » (selon les sites), vous pouvez ajuster la taille du lecteur vidéo, les commentaires ou le titre, lancer la lecture automatiquement, refuser les propositions d’autres vidéos...

6. Pour « intégrer du code » dans Moodle : suivez ce tutoriel en ligne : https://goo.gl/059Svt Mais aussi le tutoriel spécifique de prise en main de Moodle.

Groupe de formateurs / Numérique / Education Musicale / Orléans-Tours

Groupe de formateurs / Numérique / Education musicale – 2016

Intégration « particulière » du code dans PRONOTE

Ces compléments présentent l’intérêt d’éviter d’ouvrir dans un nouvel onglet les liens vidéos mais sans faire apparaître toutes les autres propositions de vidéos, commentaires ... D’autre part, la partie « 1/b » (cf. Youtube) permet de ne faire entendre qu’un extrait

d’une vidéo et permet d’intégrer le code dans d’autres outils (Sconet ; Moodle ; Blog ...)

1. Avec Youtube : a. Exemple : url de la vidéo : https://www.youtube.com/watch?v=BYca8EJlz0g

Remplacer par : embed/ ! ne pas oublier le slash Qui devient : https://www.youtube.com/embed/BYca8EJlz0g

b. Pour ne choisir qu’un extrait sur la vidéo :

Ajouter à la fin de l’url : https://www.youtube.com/embed/BYca8EJlz0g?start=22&end=87

Début en seconde (22 secondes) – Fin en seconde (87 secondes)

c. Si on ne veut aucune info (lien) sur la vidéo :! Ajouter à la fin de l’url après début/fin : &showinfo=0 ou ?showinfo=0 Soit : https://www.youtube.com/embed/BYca8EJlz0g?start=22&end=87&showinfo=0

Ou : https://www.youtube.com/embed/BYca8EJlz0g?showinfo=0

2. Avec Dailymotion :

a. Exemple : Url de la vidéo : http://www.dailymotion.com/video/xgreek_steve-reich-a-propos-de-different-trains_music

Ajouter dans l’Url avant video : embed/ ! ne pas oublier le slash Soit : http://www.dailymotion.com/embed/video/xgreek_steve-reich-a-propos-de-different-trains_music

b. Pour choisir le début de la vidéo :

Ajouter : ?start=25 à la fin de l’url pour un début à 25 secondes par exemple

Soit : http://www.dailymotion.com/embed/video/xgreek_steve-reich-a-propos-de-different-trains_music?start=25

3. Avec Vimeo :

Exemple :! Url de la vidéo : https://vimeo.com/17772908

Ajouter ici : player. et video/ ! ne pas oublier le « point » à « player. » et le « slash » à « video/ » Soit : https://player.vimeo.com/video/17772908