« 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 1 : Ligne 1 :
{{stic12}}
{{stic12}}
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
{{stic_archive}}
== Enoncé de l'exercice 17 ==
Cet exercice du cours [[STIC:STIC II|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 [http://www.webreference.com/programming/javascript/ webreference] ou dans des livres)
* Emplacement du rapport
/etu-maltt/nestor/<login>/stic/ex17/
=== 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. Exemples:
#* Elle inclut un éditeur [[:en:Through the web editor|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 ===
# 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
# 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 ==
* 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
* [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:JavaScript links]]
* [http://tecfa.unige.ch/guides/js/ex/coap/ COAP examples] (Qqs. exemples faits par DKS)

Version du 5 mai 2011 à 20:41

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

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,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/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
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_17_(Stella)&oldid=20274 »