« STIC:STIC II - exercice 17 (Stella) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(28 versions intermédiaires par 3 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic_archive}}
<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>
<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>


== Enoncé de l'exercice 17 ==
== Énoncé de l'exercice 17 ==


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 II|STIC II]] vous permet de vous familiariser avec HTML5 video et audio et des "HTML5 players" (librairies de code JavaScript)
Ligne 8 : Ligne 8 :
=== Tâche ===
=== Tâche ===


Créez une page web interactive qui contient au moins une vidéo soutitrée et une audio
Créez une page web interactive qui contient au moins une vidéo sous-titrée et une audio.
 
* Conseils:
** Choisissez une vidéo de petite résolution
** Mettez une vidéo avec un objectif éducatif et ajoutez des sous-titres 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]


* Emplacement du rapport  
* Emplacement du rapport  


  /etu-maltt/nestor/<login>/stic-2/ex17/
  /etu-maltt/<promotion>/<login>/stic-2/ex17/


=== Outils et dépositoires ===
=== Outils et dépositoires ===
Voir aussi: activités en salle de classe (ci-dessous)


* Un éditeur HTML/JavaScript
* Un éditeur HTML/JavaScript
* Librairies JavaScript (HTML5 players), en course on utilise [http://leanbackplayer.com/ LeanBack Player]
* Librairies JavaScript (HTML5 players), en cours on utilise [http://leanbackplayer.com/ LeanBack Player]
** [http://www.leanbackplayer.com/player_documentation.html LeanBack Player documentation]
** [http://www.leanbackplayer.com/generator/ LeanBack Player HTML generator] (utile pour produire tout le code HTML + JS)
* Video download
* Video download
** [https://vimeo.com/ Vimeo] Best quality video repository. For download, you will have to register.
** [https://vimeo.com/ Vimeo] Vidéos de qualité, mais il faut s'enregistrer
** http://video.google.com/videoadvancedsearch (Google video search)
** [http://video.google.com/videoadvancedsearch Google video search]
** [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension. Allows to download from sites like YouTube.
** [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension, permet de prendre des vidéos de YouTube par exemple
* [[Sound Assets]]  
* [[:en:Sound Assets]] (trouver des sons)
* Video and audio converters
* Convertisseurs
** [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats.
** [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats.
** [http://www.mediaconverter.org/ MediaConverter.org] Online converter. Also can download from websites.
** [http://www.mediaconverter.org/ MediaConverter.org] Online converter. Also can download from websites.
** [http://www.onlinevideoconverter.com/ OnlineVideoConverter.com]. Online converter. Heavy adds.
** [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
** Install [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)


=== Contraintes ===
=== Contraintes ===
Ligne 33 : Ligne 45 :
# Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
# Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
# L'utilisation doit être ergonomique
# L'utilisation doit être ergonomique
# Dispositif: HTML5 plus une librairie JavaScript
# Dispositif: HTML5 vidéo avec sous-titres réalisés avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre.
# La page doit servir à quelque chose d'utile et la video doit y jouer un rôle important. Exemples:
# La page doit servir à quelque chose d'utile dans le contexte "MALTT" et la vidéo doit y jouer un rôle important. Voir la promotion R2D2 pour des exemples.
* A faire ....
 


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


=== Evaluation ===
=== Suggestions contributions wiki ===
 
* Traduire une partie des articles [[:en:WebVTT]] et [[en:HTML5 audio and video]]
* Documenter un format video
* Utilisation pédagogique de vidéos annotées
* ....


# le dispositif marche
=== Évaluation ===
# validité de HTML5
# créativité
# utilité
# ergonomie de la page
# respect de principes de design
# qualité de l'évaluation


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


== Activités en classe ==
== Activités en classe ==


Modification de fichiers dans:
(correspond à la procédure la plus simple à suivre pour réussir l'exercice 17)
* http://tecfa.unige.ch/guides/html/html5-video/


Notamment:
(1) Encodage de video MP4 en webm et ogv:
* Installez [http://firefogg.org/ FireOgg]
 
(2) Démo video HTML5
* Commentaire sur les fichiers dans [http://tecfa.unige.ch/guides/html/html5-video/ html5-video]
* Notamment [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html]
 
Autres fichiers à explorer:
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html html5-video-simple.html]
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html html5-video-simple.html]
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html] (possible départ pour le projet 17)
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-with_style.html html5-video-with_style.html]
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-with_style.html html5-video-with_style.html]
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html html5-video-track.html] (ne marche qu'avec Chrome)
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html html5-video-track.html] (ne marche qu'avec Chrome)
* [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (exemple VTT)
* [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (exemple VTT)
(3) Création de code HTML/JS
(3a) Option 1:
* Téléchargez LeanBack Player du [http://www.leanbackplayer.com/player_download.html?type=player site]
* Générez du code avec le [http://www.leanbackplayer.com/generator/ 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/")
<source lang="XML">
<!-- 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 -->
</source>
(3b) Option 2 (prend plus de temps)
* Copiez [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html] et tout le répertoire [http://tecfa.unige.ch/guides/html/html5-video/leanbackplayer/ leanbackplayer]
(4) Modification du code pour ajouter des éléments track
(5) Editer des fichiers VTT, en partant des exemples
* [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]


== Liens ==
== Liens ==
Ligne 75 : Ligne 116 :
; Matériel d'enseignement
; Matériel d'enseignement


* [[:en:HTML audio and video]]
* [[: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/]
* [[:en:Multimedia container format]]
* [[:en:Video editing and conversion]]

Dernière version du 13 février 2014 à 18:40

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

STIC
Archives STIC
Chantier STIC
Initiation à la pensée computationnelle avec JavaScript
Productions STIC
Ressources STIC
STIC:Ateliers techniques
STIC:Contribution Wiki
STIC:Cours STIC (Drakkar)
STIC:Rapport STIC I et II
STIC:STIC I (Drakkar)
STIC:STIC I - Atelier technique 1
STIC:STIC I - Atelier technique 2
STIC:STIC I - Atelier technique 3
STIC:STIC I - Atelier technique 4
STIC:STIC I - Atelier technique 5
STIC:STIC I - exercice 1 (Drakkar)
STIC:STIC I - exercice 2 (Drakkar)
STIC:STIC I - exercice 3 (Drakkar)
STIC:STIC I - exercice 4 (Drakkar)
STIC:STIC I - exercice 5 (Drakkar)
STIC:STIC I - exercice 6 (Drakkar)
STIC:STIC II (Baldur)
STIC:STIC III
STIC:STIC III (2022)
STIC:STIC III (2022)/Exploration des Problématiques Liées aux Ponts et Détails
STIC:STIC IV

Énoncé de l'exercice 17

Cet exercice du cours STIC II vous permet de vous familiariser avec HTML5 video et audio et des "HTML5 players" (librairies de code JavaScript)

Tâche

Créez une page web interactive qui contient au moins une vidéo sous-titrée et une audio.

  • Conseils:
    • Choisissez une vidéo de petite résolution
    • Mettez une vidéo avec un objectif éducatif et ajoutez des sous-titres 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 XMedia-recode
  • Emplacement du rapport
/etu-maltt/<promotion>/<login>/stic-2/ex17/

Outils et dépositoires

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

Contraintes

  1. Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
  2. L'utilisation doit être ergonomique
  3. Dispositif: HTML5 vidéo avec sous-titres réalisés avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre.
  4. La page doit servir à quelque chose d'utile dans le contexte "MALTT" et la vidéo doit y jouer un rôle important. Voir la promotion R2D2 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 video
  • Utilisation pédagogique de vidéos annotées
  • ....

Évaluation

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

Activités en classe

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

(1) Encodage de video MP4 en webm et ogv:

(2) Démo video HTML5

Autres fichiers à explorer:

(3) Création de code HTML/JS

(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)

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

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

Liens

Matériel d'enseignement
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_II_-_exercice_17_(Stella)&oldid=34070 »