« STIC:STIC II - exercice 16 (Stella) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(20 versions intermédiaires par 3 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic_archive}}
<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>
== Enoncé de l'exercice 16 ==
== Enoncé de l'exercice 16 ==
Ligne 5 : Ligne 5 :
Cet exercice du cours [[STIC:STIC II|STIC II]] vous permet de vous familiariser
Cet exercice du cours [[STIC:STIC II|STIC II]] vous permet de vous familiariser
* avec le language JavaScript
* avec le language JavaScript
* avec le DOM (Document Object Model), et notamment avec l'interface pour traiter les formulaires
* avec le DOM (Document Object Model), et notamment avec l'interface pour traiter les formulaires et DHTML


=== Tâche ===
=== Tâche ===


Créez une '''petite''' page (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données avec un formulaire et/ou déclencher un événement. Ensuite une 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 ou encore une page "multimédia" avec des animations.
Créez une '''petite''' page (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données avec un formulaire et/ou pouvoir déclencher un événement. Ensuite, une application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiples. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple une visualisation de fonctions mathématiques ou encore une page "multimédia" avec des animations. Finalement, vous avez le droit d'utiliser une librairie JavaScript prête à être utilisée (meilleur conseil pour les gens qui n'ont pas le temps d'apprendre à programmer) ou encore une librairie JavaScript pour développeurs, par exemple [[:en:D3.js]].


* Emplacement du rapport  
* Emplacement du rapport  
Ligne 17 : Ligne 17 :
; Exercices alternatifs (une personne / page)
; Exercices alternatifs (une personne / page)


* 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. C.f. la page [[:en:DHTML]] et [[:en:Javascript tutorial - basics]] par exemple.
A ne pas confondre avec la contribution wiki obligatoire. Ici il s'agit d'une contribution substantielle.
 
* Mettre à jour la documentation JavaScript dans ce wiki. Y compris créer une bonne page "liens JavaScript". La page JavaScript elle-même devrait présenter un petit survol du langage et de ses usages.
 
* Créer une page spécialisée sur JavaScript. Voir par exemple les pages [[:en:DHTML]] et [[:en:Javascript tutorial - basics]] par exemple. Sinon, à discuter....


* Faire un article d'introduction sur l'élément Canevas de HTML5
* Faire un article d'introduction sur l'élément Canevas de HTML5


* Commencer l'article [[Tutoriel SVG interactif et animé avec DOM]]
* Améliorer l'article [[Tutoriel SVG interactif et animé avec DOM]]


=== Outils ===
=== Outils ===
Ligne 32 : Ligne 36 :
# 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)
# 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: soit HTML, XHTML ou SVG en input
# 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).
# 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 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).
Ligne 56 : Ligne 60 :
== Activités en classe ==
== Activités en classe ==


La plupart de ces exemples sont utilisé dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]
La plupart de ces exemples sont utilisés dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]
Chablon de base
<source lang="JavaScript">
<?xml version = "1.0"?>
<!DOCTYPE html>
 
<html>
  <head>
      <title>Object Model</title>
      <script type = "text/javascript">
        window.onload = start;
        function start()
        {
            var my_para = document.getElementById("p1");
            alert( "Paragraph contents : " + my_para.innerHTML );
        }
      </script>
  </head>
 
  <body>
      <p id = "p1">Welcome to our Web page!</p>
  </body>
</html>
</source>


* PopUP
* PopUP
Ligne 71 : Ligne 98 :
* DHTML + CSS simple
* DHTML + CSS simple
** http://tecfa.unige.ch/guides/js/ex/dhtml/change-background-style.html
** http://tecfa.unige.ch/guides/js/ex/dhtml/change-background-style.html
** [http://tecfa.unige.ch/guides/js/ex/dhtml/get-elements-by-classname.html get-elements-by-classname.html]
** http://tecfa.unige.ch/guides/js/ex/dhtml/change-style-2.html
** http://tecfa.unige.ch/guides/js/ex/dhtml/change-style-2.html
** http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking3.html
** 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-animate/move-object1.html
** http://tecfa.unige.ch/guides/js/ex/dom-intro/insert4.html
** http://tecfa.unige.ch/guides/js/ex/dom-intro/insert4.html
* SVG dynamique simple


* SVG DOM
* SVG DOM
** http://tecfa.unige.ch/guides/svg/ex/svg-dom/xhtml-omme.xhtml
** http://tecfa.unige.ch/guides/svg/ex/svg-dom/omme-dom1.svg


* DHTML plus compliqué (DOM 2 Events, comme dans ActionScript)
* DHTML plus compliqué (DOM 2 Events, comme dans ActionScript)
Ligne 90 : Ligne 117 :
* [[:en:HTML forms tutorial]]  
* [[:en:HTML forms tutorial]]  
* [[:en:JavaScript links]] (bon liens tutoriels et librairies, modifié printemps 2010 ....)
* [[:en:JavaScript links]] (bon liens tutoriels et librairies, modifié printemps 2010 ....)
; Wikipedia
* [http://en.wikipedia.org/wiki/JavaScript_syntax JavaScript syntax]
* .... et [http://en.wikipedia.org/wiki/Category:JavaScript pleins d'autres] ! Wikipedia.fr contient aussi [http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:JavaScript plusieurs entrées].


; Outils
; Outils
Ligne 109 : Ligne 140 :
* [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/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.quirksmode.org/dom/intro.html W3C DOM-Introduction] par Peter-Paul Koch
* [https://developer.mozilla.org/en/Gecko_DOM_Reference/Introduction Introduction] (Gecko Dom reference) -  [https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_du_DOM_Gecko/Introduction Introduction] (traduction française).
* [http://www.w3schools.com/htmldom/default.asp HTML DOM Tutorial] (W3Schools)
* [http://www.w3schools.com/htmldom/default.asp HTML DOM Tutorial] (W3Schools)
; Event handlers à la ActionScript
* [https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener element.addEventListener] (Mozilla manual)
* [http://www.howtocreate.co.uk/tutorials/javascript/domevents DOM events] (How to create, JavaScript tutorials)
* [http://www.quirksmode.org/dom/events/index.html Event compatibility tables] (Quirksmode)


; JavaScript - Introductions ailleurs
; JavaScript - Introductions ailleurs
* C.f. [[:en:JavaScript]]
* C.f. [[:en:JavaScript]]
; Javascript text color edit
* [http://www.ezineasp.net/Samples/Javascript/Javascript-DOM/Change-Text-Color-of-HTML-Elements/Default.aspx Change color text]
* [http://rainbow.arch.scriptmania.com/scripts/color_change.html Animated color text]

Dernière version du 15 mai 2014 à 15:52

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

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 16

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 et DHTML

Tâche

Créez une petite page (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données avec un formulaire et/ou pouvoir déclencher un événement. Ensuite, une application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiples. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple une visualisation de fonctions mathématiques ou encore une page "multimédia" avec des animations. Finalement, vous avez le droit d'utiliser une librairie JavaScript prête à être utilisée (meilleur conseil pour les gens qui n'ont pas le temps d'apprendre à programmer) ou encore une librairie JavaScript pour développeurs, par exemple en:D3.js.

  • Emplacement du rapport
/etu-maltt/nestor/<login>/stic-2/ex16/
Exercices alternatifs (une personne / page)

A ne pas confondre avec la contribution wiki obligatoire. Ici il s'agit d'une contribution substantielle.

  • Mettre à jour la documentation JavaScript dans ce wiki. Y compris créer une bonne page "liens JavaScript". La page JavaScript elle-même devrait présenter un petit survol du langage et de ses usages.
  • Faire un article d'introduction sur l'élément Canevas de HTML5

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: soit HTML, XHTML ou SVG en input
  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

La plupart de ces exemples sont utilisés dans en:DHTML et en:Javascript tutorial - basics Chablon de base 

<?xml version = "1.0"?>
<!DOCTYPE html>

<html>
   <head>
      <title>Object Model</title>
      <script type = "text/javascript">
         window.onload = start;
         function start() 
         {
            var my_para = document.getElementById("p1");
            alert( "Paragraph contents : " + my_para.innerHTML );
         }
      </script>
   </head>

   <body>
      <p id = "p1">Welcome to our Web page!</p>
   </body>
</html>

Liens

Pages edutechwiki EN
Wikipedia
Outils
Slides en Anglais
Slides en français (assez dépassés ...)
DOM - Introductions ailleurs
Event handlers à la ActionScript
JavaScript - Introductions ailleurs
Javascript text color edit
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_II_-_exercice_16_(Stella)&oldid=36385 »