« STIC:STIC II - exercice 14 (Nestor-Pixel) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
m (Nouvelle page : {{stic12}} == Enoncé de l'exercice 14 == Cet exercice du cours STIC II vous permet de vous familiariser * avec le language JavaScript * avec le DOM (Document Objec...)
 
 
(18 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic_archive}}
== Enoncé de l'exercice 14 ==
== Enoncé de l'exercice 14 ==


Ligne 8 : Ligne 8 :
=== Tâche ===
=== Tâche ===


Créez un '''petite''' application Formulaire (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données et l'application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiple. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple exemple une visualisation de fonctions mathématiques .
Créez une '''petite''' application Formulaire (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données et l'application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiple. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple exemple une visualisation de fonctions mathématiques .


* Emplacement du rapport  
* Emplacement du rapport  
Ligne 14 : Ligne 14 :
  /etu-maltt/nestor/<login>/stic/ex14/
  /etu-maltt/nestor/<login>/stic/ex14/


http://tecfax.unige.ch/moodle/course/view.php?id=80
; Exercice alternatif
 
* Uniquement pour une '''seule''' personne qui connaît déjà un peu JavaScript: Mettre à jour la page JavaScript dans ce wiki. Y compris créer une page "liens JavaScript". La page JavaScript elle-même devrait présenter un petit survol du langage et de ses usages (un peu comme sur Wikipedia mais plus centré EduTech). Me contacter ...


=== Outils ===
=== Outils ===
Ligne 24 : Ligne 26 :
# 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
# Il faut un minimum de traitement (pas juste utiliser JS pour ouvrir un popup ou un lien)
# dispositif: HTML/XHTML ou XForms en input (formulaires)
# dispositif: HTML/XHTML ou XForms en input (formulaires)
# Les utilisateurs doivent recevoir un feed-back intéressant (en fonction du thème choisi). Lorsque, par exemple, il s'agit d'un test pédagogique il faut donner un bon feedback (négatif ou positif).
# Les utilisateurs doivent recevoir un feed-back intéressant (en fonction du thème choisi). Lorsque, par exemple, il s'agit d'un test pédagogique il faut donner un bon feedback (négatif ou positif).
Ligne 30 : Ligne 33 :
'''Le rapport''':
'''Le rapport''':
* Titre, auteur et date
* Titre, auteur et date
* Liens vers le résulat:
* Liens vers le résulat (fichier HTML et le code JavaScript)
*" ** Lien vers le module dans Moodle (pour LAMS)
** Lien vers le fichier zip (pour les 2 cas). LAMS et Reload sauvent en format IMS CP.
* Objectifs du module: Il sert à quoi / quelle population ?
* Objectifs du module: Il sert à quoi / quelle population ?
* Objectifs pédagogiques: L'apprenant sera capable de ...
* Design du cours: Principes adoptés
* La production: '''bref''' résumé de la démarche
* La production: '''bref''' résumé de la démarche
* Difficultés, auto-évaluation, remarques
* Difficultés, auto-évaluation, remarques
Ligne 51 : Ligne 50 :


== Activités en classe ==
== Activités en classe ==
* PopUP
** http://tecfa.unige.ch/guides/js/ex-intro/fenetre.html


* Quiz simple
* Quiz simple
** ( http://tecfa.unige.ch/guides/js/ex-intro/test1.html )
** ( http://tecfa.unige.ch/guides/js/ex-intro/test1.xhtml )
** http://tecfa.unige.ch/guides/js/ex-intro/test-dom.html + http://tecfa.unige.ch/guides/js/ex-intro/test-dom.js
* DHTML simple
* DHTML simple
** http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking3.html
** http://tecfa.unige.ch/guides/js/ex/dom-animate/move-object1.html
** http://tecfa.unige.ch/guides/js/ex/dom-intro/insert4.html
* SVG dynamique simple
* SVG dynamique simple
** http://tecfa.unige.ch/guides/svg/ex/svg-dom/xhtml-omme.xhtml
* DHTML plus compliqué (Events)
** http://tecfa.unige.ch/guides/js/ex/dom-event/


== Liens ==
== Liens ==


; Slides
; Pages edutechwiki EN
* [[:en:Javascript tutorial - basics]]
* [[:en:DHTML]] (utilisé en '''classe''')
* [[:en:HTML forms tutorial]] (rappel)
* [[:en:JavaScript links]] (bon liens tutoriels et librairies pour ex. 15)
 
; Outils
* [[:en:Web_authoring_system#Useful_browser_extensions|Extensions navigateur]]
 
; Slides en Anglais
* [http://tecfa.unige.ch/guides/te/files/js-intro.pdf js-intro.pdf]
* [http://tecfa.unige.ch/guides/te/files/dyn-html.pdf dyn-html.pdf] (utilisé en '''classe''')
 
; Slides en français


* http://tecfa.unige.ch/guides/tie/html/html-forms/html-forms.html (rappel)
* 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/js-intro/js-intro.html (utilisé en '''classe''')
* http://tecfa.unige.ch/guides/tie/html/xml-dyn/xml-dyn.html (à option)
* http://tecfa.unige.ch/guides/tie/html/xml-dyn/xml-dom.html (à option)
* http://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.html
* http://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.html


Ligne 73 : Ligne 98 :
; JavaScript - Introductions ailleurs
; JavaScript - Introductions ailleurs
* C.f. [[:en:JavaScript]]
* C.f. [[:en:JavaScript]]
[[Category: STIC]]

Dernière version du 16 mars 2011 à 17:50

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

Enoncé de l'exercice 14

Cet exercice du cours STIC II vous permet de vous familiariser

  • avec le language JavaScript
  • avec le DOM (Document Object Model), et notamment avec l'interface pour traiter les formulaires

Tâche

Créez une petite application Formulaire (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données et l'application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiple. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple exemple une visualisation de fonctions mathématiques .

  • Emplacement du rapport
/etu-maltt/nestor/<login>/stic/ex14/
Exercice alternatif
  • Uniquement pour une seule personne qui connaît déjà un peu JavaScript: Mettre à jour la page JavaScript dans ce wiki. Y compris créer une page "liens JavaScript". La page JavaScript elle-même devrait présenter un petit survol du langage et de ses usages (un peu comme sur Wikipedia mais plus centré EduTech). Me contacter ...

Outils

  • Un éditeur HTML/JavaScript

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. Il faut un minimum de traitement (pas juste utiliser JS pour ouvrir un popup ou un lien)
  4. dispositif: HTML/XHTML ou XForms en input (formulaires)
  5. Les utilisateurs doivent recevoir un feed-back intéressant (en fonction du thème choisi). Lorsque, par exemple, il s'agit d'un test pédagogique il faut donner un bon feedback (négatif ou positif).
  6. Le feedback peut se faire avec une fenêtre popup, une nouvelle page ou encore via une modification du contenu de la page (c.a.d vous pouvez utiliser DHTML ou SVG dynamique).

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
  • Difficultés, auto-évaluation, remarques
  • Ressources utilisées, bibliographie.

Evaluation

  1. le script 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 (par ex. "instructional design pour des QCM)
  7. points bonus: tester si l'utilisateur a bien rempli le formulaire, utilisation de nouvelles fenêtres html pour le feedback, etc.

Activités en classe

Liens

Pages edutechwiki EN
Outils
Slides en Anglais
Slides en français
DOM - Introductions ailleurs
JavaScript - Introductions ailleurs
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_II_-_exercice_14_(Nestor-Pixel)&oldid=19987 »