Rapport exercice 4 (08/12/2014) - Victor Garretas Ruiz

Le Résultat

  1. Vidéo annotée avec HTML5
  2. Contributions Wiki

1. Production d'une vidéo annotée avec HTML5

Objectifs de la page

Cette page est destinées à tout le monde. Cependant elle est plus destinées à des personnes parlant soit le français soit l'anglais désirant apprendre quelques mots en espagnol. Le but de cette vidéo est donc de montrer comment on appelle les principaux animaux en espagnol et comment il s'écrivent. Les sous-titres ont toute leur importance car ils permettent de comprendre le nom de l'animal dans notre langue (français et anglais disponible) si l'image choisie n'est pas assez explicite. De plus, cette vidéo pourrait également s'adresser à des petits enfants espagnols commençant leur scolarité. Ils pourraient ainsi apprendre le nom des principaux animaux dans leur langue.
La vidéo et les sous-titres semblent s'afficher parfaitement sur Internet Explorer et Google Chrome. La vidéo s'affiche correctement sur Mozilla Firefox. Cependant pour une raison inconue nous ne pouvons pas choisir les sous-titres et cela nous oblige à afficher le premier fichier de sous-titres qu'on a mis à disposition dans le document HTML.

Production

J'ai commencé à faire pleins de travaux pour tenter de faire l'exercice que j'ai abandoné avant de réaliser cette production. J'ai pensé à faire une vidéo permettant d'apprendre du vocabulaire. Alors j'ai pensé à pleins de sujets possibles jusqu'à ce que je tombe sur celui des animaux. J'ai alors décidé de faire une vidéo pour montrer comment les principaux animaux s'appellent en espagnol. J'ai commencé par sélectionner ceux que j'allais montrer dans ma vidéo. J'ai ensuite crée un tableau dans un fichier Word où j'ai écrit chaque mot du vocabulaire puis dans dans deux autres colones sa traduction en français et en anglais. J'ai ensuite recherché des images correspondant à chaque animal sur Internet. Après j'ai fait un montage vidéo à l'aide de Windows Movie Maker et j'ai placer des sous-titres pour écrire le nom de l'animal en espagnol pour que ce sous-titre soit forcément affiché lors de la lecture de la vidéo. Ensuite je me suis enregistré à l'aide d'audacity en train de prononcé chaque mot de vocabulaire et donner des explications si besoin. J'ai exporté la vidéo puis je l'ai converti en mp4, ogv et webmn. J'ai ensuite intégré ma vidéo dans la page en utilisant le lecteur Leanback Player puis j'ai ajouté une vignette dans la vidéo. J'ai finalement sous-titré en format vtt une première fois la vidéo en espagnol. Ensuite j'ai crée les fichiers de sous-titres pour la langue française et la langue anglaise. Ces deux fichiers de sous-titres se sont crées plus rapidement car je suis parti de la base du premier fichier de sous-titres que j'avais fait en espagnol ce qui fait que la synchronisation entre les sous-titres et la vidéo était déjà faite. Il ne m'a que fallut traduire les sous-titres.

Difficultés, auto-évaluation, remarques

J'ai rencontré plusieurs difficultés:

Ma plus grosse difficulté a été de choisir le sujet. Etant donné que si on voulait chosir une vidéo déjà existante il fallait en prendre une libre de droits cela m'a déjà un peu contraint mais ceci n'a été qu'un léger problème car au final j'ai comme même trouvé des vidéos intéressantes. Cependant comme il était demandé de produire au moins une partie de la vidéo je n'ai pas su que intégrer et lorsque j'intégrais quelque chose cela ne me parraissait pas suffisant comme travail. Tout ceci a fait que j'ai perdu beaucoup de temps à faire des recherches (en jours...) et débuter des productions n'allant nulle part.

La difficulté suivante a été de faire fonctionner le lecteur Leanback player. Cela ne s'est pas passé sans accros. En effet j'ai pu constater que dépendamment le navigateur que l'on choisi celui-ci fonctionne de façons différente. Contre toute attente Internet Explorer a été le navigateur qui a semblé le mieux gérer Leanback Player ainsi que son intégration de sous-titres. Les premiers problèmes de fonctionnement de Leanback Player venaient du type de la vidéo. J'ai par exemple encodé plusieurs fois ma vaidéo en mp4 avant de comprendre que l'attribut "codecs" avait une grande importance. En effet j'encodais ma vidéo en mp4 mais je ne précisais pas les bon codecs dans le document HTML. Pour convertir les vidéos en webm et ogv je n'ai pas eu de problèmes particuliers car le plugin firefogg de Firefox fonctionne à merveille.

J'ai également eu des diffucultés à valider le HTML. Le HTML n'est pas valide EXPRÈS car en fait il me suffirait d'enlever 

type="text/vtt"
dans la balise track. Cependant si je le fais alors les sous-titres ne s'affichent plus du tout sur Mozilla Firefox. J'ai donc décidé de priviligier l'aspect fonctionnel à la validité à 100% de mon code.

La dernière difficulté concerne l'ajout des sous-titres. Je n'ai pas eu de difficultés à intégrer des sous-titres en sois mais plutôt dans la synchronisation (surtout pour mes premières productions qui n'ont pas abouti) car il fallait écouter plusieurs fois la vidéo, l'arrêter noter les sous-titres. C'était donc la synchronisation qui prenait le plus de temps. Pour cette vidéo cela était plus simple car c'est moi qui ait créé la vidéo par conséquent je savait combien de temps duraient mes transitions d'images (7 secondes) donc j'ai simplement du calculer de tête la synchronisation des sous-titres (incrémenter de 7 secondes le sous-titre suivant). Cependant après avoir tout sous-titré j'ai remarqué que La première transition faisait 6 secondes donc cela à faussé toutes mes synchronisations et j'ai dû recommencer.

Ressources

Pour réaliser la vidéo j'ai utilisé mes connaissances en espagnol et des images prises sur le Web. Voici un tableau citant l'URL de provenance de toutes ces images:

2. Contributions Wiki

Objectifs

Continuer la traduction d'un article expliquant comment utiliser Inkscape pour faire de l'animation web.

Production

J'ai continué la traduction en français (le point 4) du tutoriel anglais en:Using Inkscape for web animation. J'ai donc ajouté le point "4 Traitement des Path" dans la page Wiki suivante:
http://edutechwiki.unige.ch/fr/Utiliser_Inkscape_pour_l%27animation_web
J'ai également pris le soin d'enregistrer les images qui se trouvaient dans le Wiki anglais, de la retoucher et d'ajouter la traduction du texte qui était écrit, en français:
http://edutechwiki.unige.ch/fr/Fichier:Inkscape-editor-3-traduit.svg
http://edutechwiki.unige.ch/fr/Fichier:Inkscape-editor-3-traduit.svg

Difficultés, auto-évaluation, remarques

Je n'ai pas eu de difficultés particulières pour faire cette partie. En effet j'ai simplement copié ce qui se trouvait dans le wiki anglais pour garder la mise en forme identique puis j'ai pris le soin de l'adapter en traduisant le texte et en ajoutant la nouvelle image. Cette fois il a été plus simple de retoucher l'image car elle était au format SVG donc il était beaucoup plus facile d'enlever les sous-titres originaux.