« 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
mAucun résumé des modifications
Ligne 4 : Ligne 4 :
== Enoncé de l'exercice 17 ==
== Enoncé de l'exercice 17 ==


Cet exercice du cours [[STIC:STIC II|STIC II]] vous permet de vous familiariser des 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)


=== Tâche ===
=== Tâche ===


Créez une page web interactive (X)HTML/JavaScript ou SVG/JavaScript de votre choix et qui est basée sur l'utilisation d'une librairie JavaScript ou sur l'adaptation d'un exemple de code (du type qu'on trouve par exemple dans les tutoriels pour développeurs comme [http://www.webreference.com/programming/javascript/ webreference] ou dans des livres)
Créez une page web interactive qui contient au moins une vidéo soutitrée et une audio


* Emplacement du rapport  
* Emplacement du rapport  
Ligne 23 : Ligne 23 :
# 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: HTML ou SVG, plus une librairie JavaScript
# Dispositif: HTML5 plus une librairie JavaScript
# La page doit servir à quelque chose d'utile et le code JS y joue un rôle important. Exemples:
# La page doit servir à quelque chose d'utile et la video doit y jouer un rôle important. Exemples:
#* Elle inclut un éditeur [[:en:Through the web editor|TTW]] pour récupérer des histoires.
* A faire ....
#* Elle inclut une visualisation et/ou animation intéressante faite avec DHTML ou SVG.
#* Elle contient un formulaire qui fait appel à un code de vérification.
#* Elle contient un menu de navigation sophistiqué et/ou des tooltips


* Vous n'avez pas le droit d'utiliser un simple générateur de code (genre Hot Potatoes). L'exercice consiste à intégrer manuellement du code dans votre page et de faire le nécessaire pour qu'il marche.


'''Le rapport''':
'''Le rapport''':
* Titre, auteur et date
* Titre, auteur et date
* Liens vers le résulat (fichier HTML et le code JavaScript)
* Liens vers le résulat (fichier HTML)
* 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 et de sa documentation
* '''Evaluation''' de la librarie (HTML5 Player) et de sa documentation
* Une évaluation de l'ergonomie du dispositif
* Une évaluation de l'ergonomie du dispositif
* Difficultés, remarques
* Difficultés, remarques
Ligne 45 : Ligne 41 :


# le dispositif marche
# le dispositif marche
# validité de (X)HTML (et SVG ou autres formats utilisés)
# validité de HTML5
# créativité
# créativité
# utilité
# utilité
Ligne 51 : Ligne 47 :
# respect de principes de design
# respect de principes de design
# qualité de l'évaluation
# qualité de l'évaluation
# Bonus: Inclusion d'une composante server-side (PHP par exemple). Donc il est tout à fait possible de programmer une petite application AJAX.
 


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


* Quiz simple
Modification de fichiers dans:
* DHTML simple
* http://tecfa.unige.ch/guides/html/html5-video/
* SVG dynamique simple


== Liens ==
== Liens ==


; Slides
; Matériel d'enseignement
 
* http://tecfa.unige.ch/guides/tie/html/html-forms/html-forms.html (rappel)
* http://tecfa.unige.ch/guides/tie/html/js-intro/js-intro.html
* http://tecfa.unige.ch/guides/tie/html/xml-dyn/xml-dyn.html (à option)
* http://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.html
* http://tecfa.unige.ch/guides/tie/html/svg-dyn/svg-dyn.html
 
; DOM - Introductions ailleurs
 
* [http://www.quirksmode.org/js/dom0.html Level 0 DOM] et sa [http://www.misfu.com/static/Javascript/dom0.html traduction française] par Peter-Paul Koch
* [http://www.quirksmode.org/dom/intro.html W3C DOM-Introduction] par Peter-Paul Koch
* [http://www.w3schools.com/htmldom/default.asp HTML DOM Tutorial] (W3Schools)


; Sites web avec du code
* [[:en:HTML audio and video]]
* [[:en:JavaScript links]]
* [http://tecfa.unige.ch/guides/js/ex/coap/ COAP examples] (Qqs. exemples faits par DKS)

Version du 9 mai 2012 à 12:43

Cette page fait partie des cours STIC I et STIC II

Enoncé 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 soutitrée et une audio

  • Emplacement du rapport
/etu-maltt/nestor/<login>/stic-2/ex17/

Outils

  • Un éditeur HTML/JavaScript
  • Sites Internet avec des librairies

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 plus une librairie JavaScript
  4. La page doit servir à quelque chose d'utile et la video doit y jouer un rôle important. Exemples:
  • A faire ....


Le rapport:

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

Evaluation

  1. le dispositif marche
  2. validité de HTML5
  3. créativité
  4. utilité
  5. ergonomie de la page
  6. respect de principes de design
  7. qualité de l'évaluation


Activités en classe

Modification de fichiers dans:

Liens

Matériel d'enseignement