« STIC:STIC I (Nestor-Pixel) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
mAucun résumé des modifications
Ligne 55 : Ligne 55 :
* Sensibilisation à XSLT (XML -> HTML)
* Sensibilisation à XSLT (XML -> HTML)


{{:STIC:STIC I/ex1}}
{{:STIC:STIC I - exercice 1}}


{{:STIC:STIC I - exercice 2}}


{{:STIC:STIC I/ex2}}
{{:STIC:STIC I - exercice 3}}
 
 
{{:STIC:STIC I/ex3}}
 


{{:STIC:STIC I - exercice 4}}


== Periode 2 ==
== Periode 2 ==

Version du 17 septembre 2007 à 23:19

Sciences et Technologies de l'information et de la communication

Plan de cours

Daniel K. Schneider avec Stéphane Morand<

promotion "Nestor 2007-2008"

Le domaine STIC comprend deux UF obligatoires (STIC-1 et STIC-2) documentés ici et une UF libre. Les deux UF obligatoires traitent des bases techniques des systèmes d’information et de communication médiatisés par ordinateur. Elles permettent d’abord de concevoir des documents pour réaliser un système d’information partagé (XHTML, XML, XSLT, SVG), de s’initier aux applications interactives sur Internet (PhP, JavaScript) et de se familiariser avec les logiciels et les environnements qui supportent une interaction personne-personne à travers un réseau de communication (portails, groupewares et mondes virtuels). En d’autres termes, il s’agit d’acquérir un certain savoir-faire pratique de fournisseur de services Internet, et particulièrement dans le domaine de l’éducation. Cet enseignement est donc très technique: les participants vont apprendre les outils informatiques de base nécessaires (y compris une petite initation à la programmation) et les mettre en oeuvre mais il comporte également des aspects théoriques et conceptuels qui seront surtout abordés au travers d’une lecture individuelle.

Objectif principal: Bases techniques et conceptuelles pour la réalisation de dispositifs en ligne (conception, rédaction, programmation et mise en forme). D’un point de vue technique, voici les sujets les plus importants:

Stic I: Formats Internet

  • HTML avancé (pages interactives, CSS, etc.);
  • XML de base (DTD, XSLT de base, XPATH);
  • langages du XML Framework (XSLT, XSL/FO, RDF, SVG, etc.)
  • graphismes vectoriels interactifs et animés avec SVG / X3D
  • Formats pédagogiques

Stic II: Applications Web

  • concepts de base de la programmation, langages: PHP et Javascript;
  • introduction à la programmation “GUI” (user interfaces), langage: Javascript;
  • introduction au “scripting server-side”, langage: PHP;
  • introduction aux bases de données SQL sur Internet, système MySQL, langage: PHP.

Travaux

L’apprentissage technique ainsi que l’évaluation des étudiants se fera essentiellement par le biais des travaux. Consultez les instructions en ce qui concerne votre “espace travaux” sur le WWW. http://tecfa.unige.ch/tecfa/teaching/staf10/survival.html

En règle générale un exercice consiste à faire un dispositif informatique. Il doit être opérationnel pour un certain public cible (que vous définissez). Il doit fonctionner sur un plan technique et sur un plan ergonomique et il doit répondre à un petit cahier des charges en rapport avec une thématique «MALTT». Pour obtenir une note maximale il est indispensable de fournir également un très bon travail conceptuel (en rapport avec les thèmes MALTT plus théoriques par exemple). Chaque exercice est accompagé d'une page d'introduction et qui comprend un petit rapport.

Espace travaux

je vous demande de placer vos travaux dans des répertoires précis. Un page d'accueil doit les accompagner

Voici le schéma: 

/etu-maltt/nestor/login/stic/exXX/

Par exemple: 

/etu-maltt/nestor/dupont/stic/ex1/welcome.html

ou 

/etc/-maltt/nestor/duran/stic/ex4/welcome.php

Il est donc obligatoire d’utiliser un fichier que le serveur Web reconnaît comme “index”

Important: Chaque page déposée sur notre serveur doit être datée et signée avec votre page travail ou encore votre home page !

Periode 1

  • Introduction à Internet et au WWW.
  • Exemples de dispositifs Internet (XHTML, XML, Javascript, PHP, VRML, etc.) développés par les étudiants dans le cadre des cours STAF-14 et STIC 1/2
  • Design de simples sites et panorama de “home pages” à Tecfa
  • CSS pour (X)HTML
  • Introduction technique à XML
  • CSS pour XML
  • Sensibilisation à XSLT (XML -> HTML)

STIC:STIC I - exercice 1

STIC:STIC I - exercice 2

STIC:STIC I - exercice 3

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

Contraintes

  1. Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
  2. 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)
  3. L'utilisation doit être ergonomique
  4. 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)
  5. 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

Démo video HTML5

Autres fichiers à explorer:

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)

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

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

  • 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

Periode 2

Periode 3

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_(Nestor-Pixel)&oldid=6066 »