STIC:STIC II - exercice 17 (Stella)

Cette page fait partie des cours STIC I et STIC II

STIC

Archives STIC

Chantier STIC

Initiation à la pensée computationnelle avec JavaScript

Productions STIC

Ressources STIC

STIC:Contribution Wiki

STIC:Rapport STIC I et II

STIC:STIC I (Edda)

STIC:STIC I - Atelier technique 2

STIC:STIC I - exercice 1 (Drakkar)

STIC:STIC I - exercice 1 (Edda)

STIC:STIC I - exercice 2 (Edda)

STIC:STIC I - exercice 3 (Edda)

STIC:STIC I - exercice 4 (Edda)

STIC:STIC I - exercice 5 (Edda)

STIC:STIC I - exercice 6 (Edda)

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

Enoncé de l'exercice 17

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

• 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

• 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

• en:JavaScript links
• COAP examples (Qqs. exemples faits par DKS)