STIC:STIC II - exercice 15 (Nestor-Pixel)
Aller à la navigation
Aller à la recherche
Enoncé de l'exercice 15
Cet exercice du cours STIC II vous permet de vous familiariser des librairies de code JavaScript
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 dans les tutoriels pour développeurs comme http://www.webreference.com/programming/javascript/[ webreference] ou dans des livres)
- Emplacement du rapport
/etu-maltt/nestor/<login>/stic/ex15/
Outils
- Un éditeur HTML/JavaScript
- Sites Internet avec des librairies
Contraintes
- 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
- Dispositif: HTML ou SVG, plus une librairie JavaScript
- La page doit servir à quelque chose d'utile et le code JS y joue un rôle important, par exemple:
- Elle inclut un éditeur TTW pour récupérer des histoires.
- 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é
- 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:
- Titre, auteur et date
- Liens vers le résulat (fichier HTML et le code JavaScript)
- Objectifs du module: Il sert à quoi / quelle population ?
- La production: bref résumé de la démarche
- Evaluation de la librarie et de sa documentation
- Difficultés, auto-évaluation, remarques
- Ressources utilisées, bibliographie.
Evaluation
- le dispositif marche
- validité de (X)HTML (et SVG ou autres formats utilisés)
- créativité
- utilité
- ergonomie de la page
- respect de principes de design
- Bonus: Inclusion d'une composante server-side (PHP par exemple)
Activités en classe
- Quiz simple
- DHTML simple
- SVG dynamique simple
Liens
- Slides
- 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
- DOM - Introductions ailleurs
- Level 0 DOM et sa traduction française par Peter-Paul Koch
- W3C DOM-Introduction par Peter-Paul Koch
- HTML DOM Tutorial (W3Schools)
- Sites web avec du code