Webmedia est une chaîne éditoriale destinée à structurer, enrichir et diffuser des ressources audiovisuelles et sonores sur le web. Ses fonctionnalités seront détaillées ici afin de préparer les participants à enrichir leur propre production.

Vous enrichirez un document vidéo (et éventuellement un document sonore) en réalisant un chapitrage, puis en ajoutant des références avec liens hypertextes, un glossaire, une bibliographie et une page de crédits.

Webmedia nécessite une préparation soigneuse du travail avant d'être utilisé. Contrairement à un traitement de texte, il s'agit plutôt d'un outil d'assemblage pour des matériaux déjà préparés à l'avance.

Les vidéos enrichies avec Webmedia se prêtent particulèrement bien à une utilisation comme capsules pour la classe inversée.
Pour faciliter la compréhension des explications à venir, il est préférable de commencer par visionner le résultat final que vous produirez durant cette formation.

Les ressources générales

Vitrine des réalisations

Un florilège de vidéos et podcasts enrichis réalisés avec WebMedia2. Beaucoup de conférences. Voyez tout particulièrement les enrichissements de l'émission de TV Kezako et... les tutoriels WebMedia2.

Guide de l'utilisateur WebMedia2

La documentation officielle, réalisée avec Scenari... Cette mise à jour récente prend en compte les changements intervenus danns la nouvelle version 2.2.

Manuel WebMedia2

Version papier de 76 pages, à télécharger, au format PDF, du guide ci-dessus, décrivant en détail le logiciel.

Glossaire Webmedia

Un extrait de trois pages du manuel officiel, présentant les différents éléments quelque peu particuliers du vocabulaire Webmedia.

Le forum WebMedia

Espace de discussion officiel de la communauté WebMedia et lien avec les développeurs. Assez réactif. C'est ici que vous demanderez de l'aide en tout dernier recours.

Produire un podcast augmenté avec Scenari 4.0

Un tutoriel détaillé présentant l'enrichissement basique d'un document sonore consacré à Simone Veil. Un document CLEMI réalisé par Anne Sophie HARTVICK, documentaliste à Lisieux. Voyez également le résultat final. Vous pouvez télécharger cette archive (simone_veil.zip, 4.7mo) contenant l'ensemble des fichiers permettant de réaliser le tutoriel.

Téléchargement des documents de formation

L'archive de la formation

Téléchargez l'ensemble des fichiers vidéo, texte et image utiles à la réalisation des exemples proposés ci-dessous (archive zip, 67 mo).

Webmedia n'est pas un logiciel autonome. Il ne peut fonctionner que grâce à la plateforme ScenariChain, qu'il vous faudra installer préalablement.

Scenari Chain et WebMedia

Tijani Rasmi, enseignant au CUEEP LILLE 1, vous présente ScenariChain et la façon d'y installer le module Opale. La procédure est exactement identique pour Webmedia, au choix du fichier .wspack près.

Scenari Chain

Scenari Chain est une plateforme de saisie de contenus structurés pour les auteurs, permettant des exportations dans divers formatq.Ce logiciel libre et gratuit est développé à l’origine par l’UTC de Compiègne et édité par la société Kelis. Pour pouvoir créer des documents, il vous faudra lui intégrer des modèles documentaires : Opale, pour la création de cours universitaires est le plus répandu.
Attention aux problèmes de compatibilité de version : Scenari Chain 4.1 n'est pas compatible avec le module WebMedia2. Il faut, en attendant une mise à jour de ce dernier, installer Scenari Chain 4.0. Voyez ce tutoriel pour l'installation et la gestion des modèles documentaires.

Télécharger Scenari Chain

WebMedia2

WebMedia2 est une chaîne éditoriale, développée pour l'INA, qui s'installe dans la plateforme Scenari Chain. Elle permet (assez) simplement un enrichissement des fichiers son ou vidéos chapitrage, liens hypertextes, glossaire... synchronisés au défilement.
La version actuelle n'est pas compatible avec le nouveau Scenari Chain 4.1.

Télécharger WebMedia2

Bug Flash : Webmedia utilise en interne le Flash Player pour l'affichage des vidéos. Avec certaines versions de Flash, il arrive que les fichiers MP4 ou MP3 ne s'affichent pas. Dans ce cas, il faut supprimer la segmentation puis transcoder le fichier en WMV ou en OGG. Recréez ensuite votre segmentation. Pour davantage de détails, voir cette discussion sur le forum.
Cet inconvénient semble avoir été éradiqué à partir de la version 2.2 de Webmedia2

Autres outils logiciels

Aegisub

Aegisub est l'un des meilleurs logiciels desiné au sous-titrage de vidéos. Libre et gratuit, il existe en versions Windows, Mac et Linux.
Sa richesse fonctionnelle rend la première prise en main un peu délicate : un tutoriel très simple proposé par l'Académie de Guyane vous y aidera. Pour aller plus loin, préférez cette présentation vidéo très complète sur Daylimotion ou l'article plus ancien Timer avec Aegisub.

Télécharger Aegisub

Notepad++

Notepad++ est l'un des meilleurs éditeurs de texte existant sous Windows. Il vous permet de travailler en mode texte de façon extrêmement efficace. Nous vous recommandons son utilisation pour rédiger ou éditer les textes que vous insérer dans Scribus, car il ne "pollue pas" le texte par des formatages indésirables comme le font les logiciels de traitement de texte.
Contrairement au logiciel Notepad fourni avec Windows, Notepad++ permet de lire tous les jeux de caractères et vous évite l'apparition de signes cabalistiques à l'écran.

Notepad++ est un logiciel libre et gratuit disponible sous Licence publique générale GNU. Il est traduit en français.

Télécharger Notepad++

VLC Media Player

VLC est un lecteur multimédia gratuit et libre, capable de lire la plupart des fichiers multimédias ainsi que des DVD, des CD Audio, des VCD, et divers protocoles de streaming. Il permet également de nombreuses conversions de fichier, par exemple de .wmv en .mp4. Voir un tutoriel rapide pour un exemple de conversion. VLC est disponible pour Windows, Linux et Mac.

Télécharger VLC

Tijani Rasmi nous propose un tutoriel détaillé (30 minutes) sur Youtube. L'enrichissement se fait ici sur une vidéo. Il s'agit pour l'instant du document de référence le plus clair et le plus complet sur Webmedia. À voir et revoir absolument !

Afin de pouvoir réaliser l'ensemble de cette formation dans le temps imparti, nous travaillerons avec des documents tout prêts, à prendre dans l'archive de la formation.

Pour cette formation, nous utiliserons le dessin animé argentin Gran Dillama, réalisé par Pablo Vazquez avec des logiciels libres et publié sous licence Creative Commons BY

Le plus gros du travail se fait sans ouvrir Scenari : vous préparez les matériaux, textes et images qui y seront ensuite insérés par copier-coller. Un éditeur de texte, comme Notepad++ sous Windows, sera le meilleur outil pour la partie textuelle. Gimp, Photofiltre ou Paint.net pour les illustrations et photos.

Visualisez à de nombreuses reprises le film à enrichir, repérez les chapitres (segments), rédigez les enrichissements synchronisés courts (notes de marge), puis longs (compléments), et enfin les enrichissements globaux (extras).

Les segments

Définissez les différents chapitres (segments, dans le vocabulaire Webmedia). Donnez leur un titre, repérez leur durée. Ici, j'ai choisi :

1. Titre : Amers pâturages - Début : 00.00.00
2. Titre : Le fruit défendu - Début : 00.33.69
3. Titre : Mission impossible - Début : 1.15.60
4. Titre : Chute - Début : 1.38.68
5. Titre : Générique - Début : 1.58.50
6. Titre : Épilogue - Début : 2.10. 00

Les notes de marge

Rédigez un titre et un texte très court, notez la cible d'un lien éventuel.
Distinguez entre notes relevant du glossaire et de la bibliographie/webographie.

Les compléments

Choisissez un titre. Rédigez votre texte avec des intertitres et des paragraphes courts. N'oubliez pas de noter vos sources pour toute citation.
Notez la référence des images à insérer.

Les images

Les sous-titres

Dans sa dernière version, Webmedia2 permet l'adjonction de sous-titres à votre film. Il n'accepte malheureusement que le format le plus fruste, en .srt.
La réalisation effective de sous-titrages dépasse le cadre de cette formation. Voyez ci-dessus la notice du logiciel Aegisub pour des liens vers des tutoriels spécialisés.

Structurez l'atelier (dont segmentation et séquence), créez les segments, ajoutez les notes de marge, ajoutez les compléments, ajoutez les extras, définissez les paramètres de publication.
Une fois la structuration mise en place, il est prudent d'effectuer un cycle de génération / visionnement de votre travail.

Structuration de l'atelier Webmedia

Créez dans le panneau Explorateur de votre atelier la structure ci-dessus pour y ranger vos matériaux.

1. Un premier espace gran_dillama, incluant la totalité de votre projet.
2. Trois sous-espaces, media, references (pas d'accent !) et ressources
3. Dans ressources, créez deux nouveaux sous-espaces, images et section

Mise en place des matériaux

L'ensemble des matériaux à insérer sont disponibles danss l'archive formation_webmedia.zip, (57 mo). Décompactez-là et déposez, en les faisant glisser avec la souris, les fichiers images et vidéo dans l'arborescence de l'atelier, comme visible ci-dessus.

Déposez également le fichier des sous-titres, lama.srt, dans l'espace media.

Métadonnées

Cliquez sur gran_dillama.mp4 pour ouvrir l'onglet correspondant dans le panneau principal. Entrez les mentions ci-dessous dans les champs correspondants :

• Titre, légende : Gran Dillama
• Paternité, Copyright : Caminandes - Pablo Vazquez
• Date, version : Novembre 2013
• Licence : Paternité

Le sous-titrage se met en place également dans cet onglet, en renseignant la zone Accessibilité du panneau principal.

• Renseignez le champ Langue / Type en utilisant une abréviation standard (fr, en, de...).
• Tirez le fichier de sous-titres llama.srt vers l'îcone du champ Fichier / vidéo de sous-titrage.
• Sauvegardez votre travail en cliquant sur l'icône en forme de disquette en haut de l'onglet Segmentation.
• Remarquez la petite icône d'alerte rouge , visible et dans le panneau Navigateur et dans l'onglet Segmentation. Elle indique une erreur à corriger : ici, l'absence de titre pour le premier segment. Nous l'indiquerons ultérieurement.

La segmentation

L'onglet de la segmentation est l'endroit où se fera le plus gros du travail d'enrichissement de notre vidéo. Faites bien attention aux nombreuses petites icônes et aux textes très clairs : l'ergonomie pourrait être grandement améliorée.

Pour pouvoir mettre en place la segmentation, il faut créer deux items dans le panneau Navigateur : la segmentation et la séquence.

Renseigner l'onglet Segmentation

Glissez avec la souris le fichier gran_dillama.mp4 depuis le panneau Explorateur vers l'îcone du champ Media.

Une forme d'onde correspondant à la bande son de la video doit être visible en bas de l'onglet Segmentation comme dans la copie d'écran ci-dessous. Un éventuel message Des timecodes ont été corrigés. peut être négligé et fermé.

Voyez le fichier textes_a_inserer.txt dans notre archive pour les éléments associés à Gran Dillama.

Utilisez le chapitrage proposé ci-dessous pour définir les six segments de notre dessin animé Gran Dillama

1. Titre : Amers pâturages - Début : 00.00.00
2. Titre : Le fruit défendu - Début : 00.33.69
3. Titre : Mission impossible - Début : 1.15.60
4. Titre : Chute - Début : 1.38.68
5. Titre : Générique - Début : 1.58.50
6. Titre : Épilogue - Début : 2.10. 00

Pour le premier segment, renseignez simplement le champ Titre.

Pours les segments suivants, en utilisant la barre de boutons Magnétoscope en bas de l'onglet, faites défiler le film jusqu'à amener le curseur à l'endroit voulu (la touche Espace du clavier tient lieu de Pause). Cliquez alors sur le petit bouton +. Un nouveau segment est créé. Vous pouvez aussi entrer manuellement un time code (la valeur de début du segment) dans le champ voulu.

Vous pouvez affiner le positionnement en sélectionnant dans le haut de l'onglet Segmentation le mot Segment correspondant au segment sur lequel vous êtes en train de travailler. La barre bleue de séparation des segments dans la Time Line s'épaissit et peut alors être déplacée à la souris.

Renseignez le titre de chaque nouveau segment.

Vérification du travail

Il est très important de vérifier régulièrement votre travail, en effectuant une génération des fichiers html, puis un affichage de ceux-ci dans votre navigateur Internet. Ces opérations sont pilotées depuis l'onglet Séquence.

• Dans l'onglet Séquence, cliquez sur le petit onglet vertical Pub.
• Cliquez ensuite sur l'icône Générer.
• Une animation de l'icône se lance pour vous faire patienter : attendez son arrêt.
• Une icône Consulter apparaît. Cliquez pour voir votre travail dans le navigateur Internet.

6. Mise en place des notes de marge

Notes de marge : il y a une seule note de marge par segment. Elle contient des liens vers des références.
Rédérences : juste une courte définition, avec lien sur un autre document ou une page web. Pas d'images ou de textes longs.

Créer une référence

• Dans l'espace "references", créer un nouvel item de type reference
• Sélectionner references | Clic droit | Créer un item | Cliquer sur Références dans la boîte de dialogue | Choisir Définition
• Renseigner "Nom de l'item" (ne sera jamais affiché)
• Valider en cliquant sur Créer

Renseigner la définition

• Renseigner le champ Titre
• Renseigner le champ Définition
• Insérer un lien hypertexte
  Copier l'adresse de la page à lier dans le presse-papier
  Sélectionner les mots à lier
  Dans la barre d'outils du glossaire, cliquer sur l'icône (crayon) Insérer dans le paragraphe (ou raccourci CTRL-U)
  Coller l'adresse dans la boîte de dialogue. Valider.
• Sauvegarder en cliquant sur Enregistrer (disquette). Noter la disparition des icônes d'alerte .

Insérer la référence dans le segment

• Ouvrir la segmentation : double-clic dans la fenêtre de l'atelier ou sélection de l'onglet "segmentation" dans la fenêtre de droite si la segmentation a déjà été ouverte.
• Sélectionner le segment adéquat
• Repérer au-dessous du mot Segment la ligne (gris clair, peu visible) Notes de marge. Cliquez pour en déplier le champ Texte.
• Avec la souris, tirer la référence désirée depuis le panneau Explorateur dans ce champ Texte.
• Sauvegarder en cliquant sur l'icône Disquette.

Insérer plusieurs références

• Pour insérer une deuxième référence, dans le champ Texte du segment, créer une nouvelle ligne en appuyant sur Entrée.
• Y tirer la référence désirée.
• On peut également ajouter un texte libre dans les notes de marge, par exemple pour titrer l'ensemble. Ici "Notes" et "Voir aussi".
• Pour une mise en gras, sélectionner ce titre, puis dans la barre d'outils, cliquer sur l'icône (crayon) Insérer dans le paragraphe | Important.

Voici les notes à de marge insérer dans les différents segments :

1. Gran Dillama, Lama, Puna, Ichu
2. Calafate, Tatou
3. Rideau de fer, Mission impossible, Black-out
4. Bib-bip et le coyote
5. Ne rien insérer pour l'instant
6. Arc-en-ciel

Affichage du glossaire

Il est possible d'afficher l'ensemble du glossaire dans un onglet pendant toute la durée du film.

• Sélectionner la séquence | onglet Edition
• Cliquer sur Paramètres de publication | Paramètres des annexes | Publier le glossaire | Oui
• Sauvegarder

Éléments de bibliographie

Les élements de bibliographie sont créés exactement comme les références. À deux différences près : l'item s'appelle ici Document et il faut remplir un champ Sources

Pour le segment 5, Générique, mettez en place une note de marge titrée Voir aussi : et contenant les pages Web Professeur Kouro, archive.org, Portail, et Formation Canopé. Vous trouverez tous les détails dans le fichier textes_a_inserer.txt.

Comme le glossaire et suivant la même méthode, la bibliographie peut être rendue disponible pendant toute la durée du film.

7. Les compléments et les extras

Les uns et les autres sont des items "Section", insérés respectivement dans un segment ou dans la séquence. Ils permettent l'affichage de textes longs, comprenant des images. La plupart des manipulations sont analogues à celles vues ci-dessus pour les références.

Créer une section

• Dans l'espace "ressources | sections", créer un nouvel item de type Items communs
• Sélectionner ressources | Clic droit | Créer un item | Cliquer sur Items communs dans la boîte de dialogue | Choisir Section
• Renseigner "Nom de l'item" (ne sera jamais affiché)
• Valider en cliquant sur Créer

Renseigner une section

En vous servant du texte présent dans le fichier textes_a_inserer.txt, renseignez la section Le fruit défendu comme montré dans la capture d'écran ci-dessous.
Le cas échéant, utilisez la structure de bloc des sections : un nouveau bloc pour une structure intertitre+paragraphes(s)

Ajouter une image dans la section

Les items "Images" se créent en tirant simplement les fichiers dans le panneau Navigateur. Ici, nous allons insérer la gravure fruit_defendu.jpg dans notre section.

1. Cliquez deux fois sur fruit_defendu.jpg dans le panneau Explorateur. Ceci ouvre l'onglet Image JPEG, qui permet de nombreuses opérations sur les images.
2. Repérez les deux petits onglets verticaux Visu. et Props. Remplissez les propriétés dans l'onglet Props. Pensez à indiquer auteur et licence dans le champ légende.
3. Dans l'onglet Visu. le curseur latéral permet d'affiner la taille d'affichage de l'image. Réduisez celle ci jusqu'à apparition de la graduation horizontale sous l'image.

Insérer la section dans le segment

• Ouvrir la segmentation : double-clic dans la fenêtre de l'atelier ou sélection de l'onglet "segmentation" dans la fenêtre de droite si la segmentation a déjà été ouverte.
• Sélectionner le segment adéquat : ici Le fruit défendu
• Repérer au-dessous du mot Segment la ligne (gris clair, peu visible) Complément.
• Avec la souris, tirer la section désirée depuis le panneau Explorateur dans l'icône située à côté du mot Complémént.
• Sauvegarder en cliquant sur l'icône Disquette.

Section avec galerie d'images

La galerie d'images permet l'insertion d'une série de vignettes cliquables dans la page. En mode agrandi, elle peuvent défiler comme un diaporama.

• Créez une nouvelle section Creative Commons comme précédemment. Renseignez-là en vous servant du texte présent dans le fichier textes_a_inserer.txt.
• Cliquez sur la petite étoile jaune (très peu visible) immédiatement en dessous du texte. Dans le menu, choisissez Galerie d'images.
• Dans le panneau Explorateur, sélectionnez ressources | images. Faites un clic droit pour créer un item. Dans la boîte de dialogue, choisissez dans Items communs | Galerie d'images
• Dans l'onglet Galerie d'images, donnez le titre Licences Creative Commons.
• Pour insérer une première image dans la galerie, faites glisser by.png depuis le panneau Explorateur dans l'icône du champ Image.
• Pour insérer les images suivantes, cliquez sur la petite étoile jaune en bas du champ Image. Cliquez ensuite sur image. Glissez le fichier image suivant comme ci-dessus. Recommencez l'opération jusqu'à ce que la galerie soit complète.

Les extras

De la même façon que nous avons ajouté des compléments aux segments, nous allons maintenant ajouter des extras à la séquence.

1. Créez deux nouvelles sections,Blender et Crédits
2. Renseignez-les en vous servant du texte présent dans le fichier textes_a_inserer.txt.
3. Insérez l'image big_buck_bunny.jpg pour illustrer la section Blender

Insérer un extra

Attention : cette opération est rendue délicate par une ergonomie discutable. Suivez attentivement les instructions.

Ouvrez l'onglet Séquence | Édition. Repérez le champ Extra et sa petite icône .

Cliquez sur l'icône et choisissez Item externe dans le menu. Une nouvelle icône apparaît alors dans le champ Extra

Avec la souris, tirer la section désirée depuis le panneau Explorateur dans cette icône

Pour insérer un deuxième Extra, cliquez sur la petite étoile jaune située immédiatement en dessous du champ Extra. Dans le menu, cliquez sur Extra.

Recommencer les opérations précédentes pour renseigner ce nouveau champ Extra.