STIC:STIC II - exercice 15 (Nestor-Pixel)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

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 par exemple dans les tutoriels pour développeurs comme 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

  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: HTML ou SVG, plus une librairie JavaScript
  4. La page doit servir à quelque chose d'utile et le code JS y joue un rôle important. Exemples:
    • 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é 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:

  • 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
  • Une évaluation de l'ergonomie du dispositif
  • Difficultés, remarques
  • Ressources utilisées, bibliographie.

Evaluation

  1. le dispositif marche
  2. validité de (X)HTML (et SVG ou autres formats utilisés)
  3. créativité
  4. utilité
  5. ergonomie de la page
  6. respect de principes de design
  7. qualité de l'évaluation
  8. 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

  • Quiz simple
  • DHTML simple
  • SVG dynamique simple

Liens

Slides
DOM - Introductions ailleurs
Sites web avec du code
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_II_-_exercice_15_(Nestor-Pixel)&oldid=7633 »