« STIC:STIC I - exercice 4 » : différence entre les versions

Dernière version du 23 septembre 2014 à 17:33

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

Énoncé de l'exercice 4

Cet exercice du cours STIC I vous permet de vous familiariser avec HTML5 video et audio, des "HTML5 players" (librairies de code JavaScript) et à option (!) Flash + Timed Text.

Tâche

Créez une page web qui contient au moins une vidéo avec une piste audio.

La vidéo doit être réalisée pour HTML5
La présentation de la vidéo doit impérativement inclure des sous-titres utiles et intéressants.

Conseils:
- Produisez des vidéos de petite résolution s'il s'agit de vignettes. Aussi petit que possible, mais néanmoins ergonomique...
- Ajoutez des sous-titres en utilisant un navigateur qui sache les digérer ou en utilisant un player (exemple LeanBack Player).
- Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm
- Si tel n'est pas le cas, utilisez un transcoder gratuit pour convertir la vidéo, par exemple FireOgg (plugin Firefox) XMedia-recode
- Vous pouvez chercher des synergies avec le cours BASES.

Emplacement du rapport

/etu-maltt/<promotion>/<login>/stic-1/ex4/

Outils et dépositoires

Voir aussi: activités en salle de classe (ci-dessous)

Un éditeur HTML/JavaScript
Librairies JavaScript (HTML5 players), en cours on utilise LeanBack Player
- LeanBack Player documentation
- LeanBack Player HTML generator (utile pour produire tout le code HTML + JS)
Video download
- Vimeo Vidéos de qualité, mais il faut s'enregistrer
- Google video search
- Video downloadhelper, Firefox extension, permet de prendre des vidéos de YouTube par exemple
en:Sound Assets (trouver des sons)
Convertisseurs
- Online-convert.com Online converter service for various file formats.
- MediaConverter.org Online converter. Also can download from websites.
- OnlineVideoConverter.com. Online converter. Heavy adds.
- Installez FireOgg, a Firefox plugin for creating ogg and webm video files
- Note: Il faudrait aussi tester le MediaEncoder de Adobe (puisque vous l'avez)
http://edutechwiki.unige.ch/en/Video_editing (outils video divers)

Contraintes

Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
La vidéo doit jouer un rôle central dans le dispositif. Si vous ne voulez pas produire une vidéographie, pensez à produire des vignettes utiles dans un contexte pédagogique, dans cas vous pouvez produire plus qu'une seule vidéo. Vous avez aussi le droit de réutiliser des vidéos, à condition d'en produire au moins un ségment vous-même (pour l'introduction par exemple)
L'utilisation doit être ergonomique
Dispositif: HTML5 vidéo avec sous-titres. Soit vous trouvez un navigateur où cela marche, soit vous le réalisez avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre (Kaltura par exemple)
Voir les promotions R2D2 et Stella (stic-2/ex17) pour des exemples.

Le rapport:

Titre, auteur et date
Liens vers le résultat (fichier HTML, fichier vidéo, fichier sous-titres,)
Objectifs du module: Il sert à quoi / quelle population ?
La production: bref résumé de la démarche
Évaluation de la libraire (HTML5 Player) et de sa documentation
Evaluation de l'ergonomie et de l'utilité du dispositif
Difficultés, remarques
Ressources utilisées, bibliographie.

Suggestions contributions wiki

Traduire une partie des articles en:WebVTT et
Documenter un format vidéo en détail
Utilisation pédagogique de vidéos annotées
Documentation d'un logiciel (un petit tutoriel)
C.f. aussi l'exercice alternatif en bas

Évaluation

Selon la grille d'analyse utilisée pour les travaux précédents.

Activités en classe

(correspond à la procédure la plus simple à suivre pour réussir l'exercice 4)

Encodage de video MP4 en webm et ogv

Installez FireOgg

Démo video HTML5

Répertoire de fichiers dans html5-video (y compris videos)
Notamment html5-video-track-leanbackplayer.html

Autres fichiers à explorer:

html5-video-simple.html
html5-video-with_style.html
html5-video-track.html (ne marche qu'avec Chrome)
subtitles_en.vtt (exemple VTT)

Utilisation d'un player

(3a) Option 1:

Téléchargez LeanBack Player du site
Générez du code avec le generator
Installez le player dans un répertoire
Corrigez les liens dans le code généré (il faut notamment remplacer ou tuer "http://yourdoomain.com/")

<!-- LeanBack Player - CSS Theme -->
<link rel="stylesheet" media="screen" type="text/css" href="http://yourdomain.com/leanbackPlayer.default.css" />
<!-- LeanBack Player - JS Source -->
<script type="text/javascript" src="http://yourdomain.com/leanbackPlayer.pack.js"></script>
<!-- LeanBack Player Translation(s) (Examples) - JS Source -->
<script type="text/javascript" src="http://yourdomain.com/leanbackPlayer.en.js"></script><!-- LeanBack Player - English Translation -->
<script type="text/javascript" src="http://yourdomain.com/leanbackPlayer.de.js"></script><!-- LeanBack Player - German Translation -->

(3b) Option 2 (prend plus de temps)

Copiez html5-video-track-leanbackplayer.html et tout le répertoire leanbackplayer

(4) Modification du code pour ajouter des éléments track

(5) Editer des fichiers VTT, en partant des exemples

Produire des vidéographies

Ressources:

Énoncé de l'exercice 4 (alternative pour deux étudiant(e)s

Je cherche deux personnes qui s'intéressent à l'aspect technique. Idéalement, vous devriez commencer rapidement (une première ébauche pour fin novembre). Puisque tout le monde doit contribuer au wiki, les autres peuvent également vous aider ...

(1) Améliorez une des deux pages suivantes.

Vidéographie par Mohamed
Production de fichiers vidéo pour le web par XXXX (mettez votre nom ici, une seule personne B)

(2) Faite un petit tutoriel pour 1-2 logiciels:

Outil vidéographie Jing par Damien (pas le plus pratique, car il enregistre uniquement en Flash, sans la webcam et 5 minutes maximum).
Outil vidéographie BB Flashback par Damien (plus pratique, exporte en Flash et AVI et peut enregistrer la webcam).

Outil édition/conversion vidéo ZZZ par (mettez votre nom ici, une seule personne B)

... qc. de simple qui suffira pour produire les screencast/vidéos pour le cours BASES !

(3) Faites un rapport (comme pour les autres exercices)

Liens

Matériel d'enseignement pour les vidéos HTML5

Pour Flash

Voir STIC:STIC I - exercice 5 (Stella)

@@ Ligne 1 : / Ligne 1 : @@
+{{stic_archive}}
-{{stic12}}
 <categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
-== Énoncé de l'exercice 17 ==
+== Énoncé de l'exercice 4 ==
-Cet exercice du cours [[STIC:STIC II|STIC II]] vous permet de vous familiariser avec HTML5 video et audio et des "HTML5 players" (librairies de code JavaScript)
+Cet exercice du cours [[STIC:STIC_I |STIC I]] vous permet de vous familiariser avec HTML5 video et audio, des "HTML5 players" (librairies de code JavaScript) et à option (!) Flash + Timed Text.
 === Tâche ===
-Créez une page web interactive qui contient au moins une vidéo sous-titrée et une audio.
+Créez une page web qui contient au moins une vidéo avec une piste audio.
+* La vidéo doit être réalisée pour HTML5
+* La présentation de la vidéo doit impérativement inclure des sous-titres utiles et intéressants.
 * Conseils:
-** Choisissez une vidéo de petite résolution
+** Produisez des vidéos de petite résolution s'il s'agit de vignettes. Aussi petit que possible, mais néanmoins ergonomique...
-** Mettez une vidéo avec un objectif éducatif et ajoutez des sous-titres en utilisant un player (exemple [http://leanbackplayer.com/ LeanBack Player]).
+** Ajoutez des sous-titres en utilisant un navigateur qui sache les digérer ou en utilisant un player (exemple [http://leanbackplayer.com/ LeanBack Player]).
 ** Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm
-** Si tel n'est pas le cas, utilisez un transcoder gratuit pour convertir la vidéo, par exemple [http://www.xmedia-recode.de/download.html XMedia-recode]
+** Si tel n'est pas le cas, utilisez un transcoder gratuit pour convertir la vidéo, par exemple [http://firefogg.org/ FireOgg] (plugin Firefox) [http://www.xmedia-recode.de/download.html XMedia-recode]
+** Vous pouvez chercher des synergies avec le cours BASES.
 * Emplacement du rapport
   /etu-maltt/<promotion>/<login>/stic-1/ex4/
@@ Ligne 38 : / Ligne 39 : @@
 ** [http://www.mediaconverter.org/ MediaConverter.org] Online converter. Also can download from websites.
 ** [http://www.onlinevideoconverter.com/ OnlineVideoConverter.com]. Online converter. Heavy adds.
-** Install [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files
+** Installez [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files
 ** Note: Il faudrait aussi tester le MediaEncoder de Adobe (puisque vous l'avez)
 * http://edutechwiki.unige.ch/en/Video_editing (outils video divers)
@@ Ligne 45 : / Ligne 46 : @@
 # Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
+# La vidéo doit jouer un rôle central dans le dispositif. Si vous ne voulez pas produire une vidéographie, pensez à produire des vignettes utiles dans un contexte pédagogique, dans cas vous pouvez produire plus qu'une seule vidéo. Vous avez aussi le droit de réutiliser des vidéos, à condition d'en produire au moins un ségment vous-même (pour l'introduction par exemple)
 # L'utilisation doit être ergonomique
-# Dispositif: HTML5 vidéo avec sous-titres. Soit vous trouvez un navigateur où cela marche, soit vous le réaliséz avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre.
+# Dispositif: HTML5 vidéo avec sous-titres. Soit vous trouvez un navigateur où cela marche, soit vous le réalisez avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre (Kaltura par exemple)
-# La page doit servir à quelque chose d'utile dans le contexte "MALTT" et la vidéo doit y jouer un rôle important. Voir les promotions R2D2 et Stella (stic-2/ex17) pour des exemples.
+# Voir les promotions R2D2 et Stella (stic-2/ex17) pour des exemples.
 '''Le rapport''':
@@ Ligne 62 : / Ligne 64 : @@
 * Traduire une partie des articles [[:en:WebVTT]] et [[en:HTML5 audio and video]]
-* Documenter un format video
+* Documenter un format vidéo en détail
 * Utilisation pédagogique de vidéos annotées
-* ....
+* Documentation d'un logiciel (un petit tutoriel)
+* C.f. aussi l'exercice alternatif en bas
 === Évaluation ===
-Selon la grille d'analyse utilisée pour les travaux précédants.
+Selon la grille d'analyse utilisée pour les travaux précédents.
 == Activités en classe ==
-(correspond à la procédure la plus simple à suivre pour réussir l'exercice 17)
+(correspond à la procédure la plus simple à suivre pour réussir l'exercice 4)
-(1) Encodage de video MP4 en webm et ogv:
+=== Encodage de video MP4 en webm et ogv ===
 * Installez [http://firefogg.org/ FireOgg]
-(2) Démo video HTML5
+=== Démo video HTML5 ===
-* Commentaire sur les fichiers dans [http://tecfa.unige.ch/guides/html/html5-video/ html5-video]
+* Répertoire de fichiers dans [http://tecfa.unige.ch/guides/html/html5-video/ html5-video] (y compris [http://tecfa.unige.ch/guides/html/html5-video/videos/ videos])
 * Notamment [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html]
@@ Ligne 87 : / Ligne 90 : @@
 * [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (exemple VTT)
-(3) Création de code HTML/JS
+=== Utilisation d'un player ===
 (3a) Option 1:
@@ Ligne 112 : / Ligne 115 : @@
 * [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt]
 * [http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt subtitles_fr.vtt]
+=== Produire des vidéographies ===
+Ressources:
+* la [[vidéographie]]
+* [[Production de fichiers vidéo pour le web‎‎]]
+== Énoncé de l'exercice 4 (alternative pour deux étudiant(e)s ==
+Je cherche deux personnes qui s'intéressent à l'aspect technique. Idéalement, vous devriez commencer rapidement (une première ébauche pour fin novembre). Puisque tout le monde '''doit''' contribuer au wiki, les autres peuvent également vous aider ...
+(1) Améliorez une des deux pages suivantes.
+* [[Vidéographie]] par Mohamed
+* [[Production de fichiers vidéo pour le web]] par XXXX (mettez votre nom ici, une seule personne B)
+(2) Faite un petit tutoriel pour 1-2 logiciels:
+* [[Vidéographie_tutoriel_-_Jing | Outil vidéographie Jing]] par [[Utilisateur:Damien_Gauthier | Damien]]  (pas le plus pratique, car il enregistre uniquement en Flash, sans la webcam et 5 minutes maximum).
+* [[Vidéographie_tutoriel_-_BB_Flashback | Outil vidéographie  BB Flashback]] par [[Utilisateur:Damien_Gauthier | Damien]]  (plus pratique, exporte en Flash et AVI et peut enregistrer la webcam).
+* Outil édition/conversion vidéo ZZZ par (mettez votre nom ici, une seule personne B)
+... qc. de simple qui suffira pour produire les screencast/vidéos pour le cours BASES !
+(3) Faites un rapport (comme pour les autres exercices)
 == Liens ==
-; Matériel d'enseignement
+; Matériel d'enseignement pour les vidéos HTML5
 * [[:en:HTML5 audio and video]]
 * [[:en:WebVTT]]
-* [http://tecfa.unige.ch/guides/html/html5-audio/ html5-audio/] et [http://tecfa.unige.ch/guides/html/html5-audio/ html5-audio/]
+* [http://tecfa.unige.ch/guides/html/html5-audio/ html5-audio/]
 * [[:en:Multimedia container format]]
 * [[:en:Video editing and conversion]]
+; Pour Flash
+* Voir [[STIC:STIC I - exercice 5 (Stella)]]

« STIC:STIC I - exercice 4 » : différence entre les versions

Dernière version du 23 septembre 2014 à 17:33

Sommaire

Énoncé de l'exercice 4

Tâche

Outils et dépositoires

Contraintes

Suggestions contributions wiki

Évaluation

Activités en classe

Encodage de video MP4 en webm et ogv

Démo video HTML5

Utilisation d'un player

Produire des vidéographies

Énoncé de l'exercice 4 (alternative pour deux étudiant(e)s

Liens

Menu de navigation

« STIC:STIC I - exercice 4 » : différence entre les versions

Dernière version du 23 septembre 2014 à 17:33

Énoncé de l'exercice 4

Tâche

Outils et dépositoires

Contraintes

Suggestions contributions wiki

Évaluation

Activités en classe

Encodage de video MP4 en webm et ogv

Démo video HTML5

Utilisation d'un player

Produire des vidéographies

Énoncé de l'exercice 4 (alternative pour deux étudiant(e)s

Liens

Menu de navigation

Rechercher

« STIC:STIC I - exercice 4 » : différence entre les versions