« STIC:STIC I - exercice 3 (Volt) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{stic12}} <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</ca... »)
 
mAucun résumé des modifications
 
(17 versions intermédiaires par 7 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic archive}}
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
== Enoncée du Projet 3 ==
== Enoncé de l'exercice 3 ==


Ce projet vous permet:
Cet exercice vous permet:


* d'apprendre quelques notions de JavaScript
* d'apprendre quelques notions de JavaScript et de la programmation en général
* de vous familiariser avec l'utilisation d'une bibliothèque d'animation en JavaScript
* comprendre la logique de la programmation DOM et des gestionnaires d'événements
* d'apprendre quelques concepts d'animation
* d'apprendre quelques concepts d'animation CSS3 ou alors de continuer avec SVG
 
Ce projet est similaire au projet 2. La technologie est différente. Ceci dit, vous pouvez tout à fait réutiliser des dessins SVG


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


Imaginez un design pédagogique qui nécessite une animation ....
Imaginez un design pédagogique qui nécessite des interactions suivies d'une animation ...


* Créez une page HTML5 qui contient au moins un graphisme animé avec la bibliothèque "Greensocks"
* Créez une page HTML5 qui contient au moins deux éléments interactifs (l'utilisateur peut cliquer dessus, bouger la souris dessus, etc., à votre choix)
* Ajoutez un élément interactif, par exemple un bouton start/stop ou encore des paramètres d'animation.
* Ajoutez au moins un élément de changement de contenu suite à une interaction.
* Ajoutez au moins un élément d'animation suite à une interaction
* Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)
* Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)


Ligne 23 : Ligne 22 :
=== Outil ===
=== Outil ===


* [[Tutoriel GreenSock GSAP|GSAP]]
* Editeur de programmation


=== Contraintes ===
=== Contraintes ===


* Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
* Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
* La page doit soit contenir un élément animé et au moins un élément interactif (par exemple un bouton)
* La page doit soit contenir au moins 2 éléments interactifs (par exemple des boutons), une zone de texte modifiable, une animation.
* La page doit être bien formée et valide.
* La page doit être bien formée et valide.
* Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML ''et'' dans le rapport.
* Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML ''et'' dans le rapport.
Ligne 35 : Ligne 34 :
* Titre, auteur et date
* Titre, auteur et date
* Liens vers le résultat (fichier HTML) et indiquez avec '''quelle configuration on peut voir votre contenu'''.
* Liens vers le résultat (fichier HTML) et indiquez avec '''quelle configuration on peut voir votre contenu'''.
* Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos objectifs d'apprentissage....)
* Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos propres objectifs d'apprentissage....)
* Discussion du design
* Discussion du design
* 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
* Ressources utilisées, bibliographie.
* Ressources utilisées, bibliographie.
=== A rendre ===


Emplacement du rapport avec les liens vers le dispositif html/svg:
Emplacement du rapport avec les liens vers le dispositif html/svg:
  /etu-maltt/utopia/<login>/stic-1/ex3/
  /etu-maltt/volt/<login>/stic-1/ex3/
 
'''Délai'''
 
* lundi 24h une semaine avant le début de la période 3
 
=== Autre exercice de la même période ===
*[[STIC:STIC I - exercice 4 (Volt)|Exercice 4]]


== Activité en salle de classe ==
== Activité en salle de classe ==


Discussion:
===Programme===
* Que peut-on animer ?
 
* Comment utiliser l'animation dans l'éducation ?
* 09:00 - 09:30 : présentation de JavaScript dans le contexte du développement web
* Comment rendre une animation plus interactive ?
* 09:30 - 10:30 : introduction à la syntaxe de JavaScript
* -- pause --
* 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
* 11:45 - 12:30 : transfert de connaissances, JavaScript avec CSS3 et SVG
 
====Présentation de JavaScript====
 
Brève mise en contexte de JavaScript dans le développement web :
 
* Développement frontend et backend
* Importance de l'environnement
* JavaScript côté client
 
[http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/slides/Introduction%20%C3%A0%20JavaScript.pdf Slides présentation] (format PDF)
 
====Introduction à la syntaxe de JavaScript====
 
Survol des éléments fondamentaux du langage :
 
* Syntaxe
* Éléments principaux (variables, opérateurs, types de données, structure de contrôle, boucles, ...)
 
Références :
 
* [[Tutoriel JavaScript de base]]
 
====JavaScript et le DOM====
 
Interaction de JavaScript avec le navigateur web :
 
* L'objet global window
* Inclure JavaScript dans une page HTML
* Manipulation du DOM
* Gestionnaire d'événements
 
Workshop Codepen.io :
 
* Présentation Codepen.io
* Fork et travail sur les exemples
 
Références :
 
* [[Tutoriel JavaScript de base]]
* Exemples Codepen.io :
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript]
** [http://codepen.io/mafritz/pen/NGzpEo Événements liés à la souris]
** [http://codepen.io/mafritz/pen/OyZJvx L'éléments this dans le DOM]
** [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML]
 
====Transfert de connaissances : JavaScript avec CSS3 et SVG====


Tâche:
Utiliser JavaScript avec :
* Faire fonctionner le code ci-dessous
* Ajouter une animation "Greensock"


Ce type d'exemple est expliqué dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]
* SVG :
** [http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/svg/javascript-svg-ex1.html Ajouter des éléments SVG]
** [http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/svg/javascript-svg-ex2.html Rendre des éléments SVG interactifs]
** [http://codepen.io/mafritz/pen/gazXQR Simple animation]
* CSS
** [http://codepen.io/mafritz/pen/OyZzpw Utiliser dynamiquement les classes CSS avec JavaScript]
** [http://codepen.io/mafritz/pen/meLqYw Animation CSS3 avec classes et @keyframes]


'''Chablon de base manipuler un élément HTML'''
===Squelette HTML5===
<source lang="JavaScript">
<!DOCTYPE html>


<source lang="HTML5">
<!doctype html>
<html>
<html>
  <head>
<head>
      <title>Object Model</title>
    <meta charset="UTF-8">
      <script type = "text/javascript">
    <title>Untitled Document</title>
        // Une fois que Windows est chargé, la fonction start est appelée
</head>
        window.onload = start;
<body>
        // Définition de la fonction 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>
</body>
</html>
</html>
</source>
</source>


'''Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript'''
==Contributions Wiki==
<source lang="JavaScript">
 
<!DOCTYPE html>
C'est la première année qu'on aborde "sérieusement" JavaScript en STIC I, par conséquence les ressources wiki disponibles à présent sont limitées et créées en peu de temps, il manque par conséquent une structure des pages. Voici quelques conseils pour les contributions :
<html>
 
  <head>
===Contributions de "base"/minimalistes===
      <title>Event handling</title>
 
      <script type = "text/javascript">
Pas mal de fautes de français (désolé!) et concepts peu/pas clairs!
        window.onload = start;
 
        // var my_para_button  ="";
; [[Introduction à la programmation]]
 
* Modifications/corrections (surtout orthographe! ;))
 
; JavaScript
 
* [[Tutoriel JavaScript de base]] se limiter à modifications/corrections car la page est déjà très lourde, si jamais créer une nouvelle page qui explique mieux une certaine partie du Tutoriel de base
* [[JavaScript]] modifications/corrections mais la page devrait rester plutôt conceptuelle, pas trop de code
* [[Liens JavaScript]] contrôler liens (actualité, qualité) : ajouter, effacer, réorganiser...
 
===Contributions "intermédiaire"===
 
; [[HTML5]]
 
* Ajouter une partie sur les nouveaux inputs pour les formulaires (range, date, etc.)
* Expliquer intérêts des API
** Eg, [[Canvas (HTML5)]]
 
; CSS3
 
* Créer une page CSS3 avec animations sans et avec JavaScript
 
; [[Tutoriel SVG dynamique avec DOM]]
 
* Mettre à jour (refaire?) la page avec notions de manipulation du DOM avec JavaScript
 
; Codepen.io
 
* Créer page/tutoriel sur Codepen.io
 
===Contributions avancées===
 
; [[Bibliothèques JavaScript]]


function start()  {
* Créer tutoriel pour une bibliothèque
  // put an event handler on the div box
* Améliorer tutoriels existants
  var my_para_button = document.getElementById("box");
* Proposer nouvelles bibliothèques
  my_para_button = addEventListener("click", modifyText);
        }


function modifyText() {
===Autres possibilités===
  // get the box
  var my_content = document.getElementById("content");
  my_content.innerHTML = "That was so good";
}
      </script>
  </head>


  <body>
* Poursuivre page créée en P1
      <div id="box">
* Pages plus théoriques sur animations
        <p style="background-color:yellow" id="content">CLICK ME !</p>
* Pages plus théoriques sur la programmation (e.g. programmation dans les écoles, etc.)
      </div>
  </body>
</html>
</source>
Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.html


== Liens ==
== Liens ==
Ligne 120 : Ligne 192 :


; JavaScript
; JavaScript
* [[Introduction à la programmation]]
* [[JavaScript]]
* [[Tutoriel JavaScript de base]]
* [[Tutoriel JavaScript de base]]
* Il existe des dizaines de tutos sur le web et des livres
* Il existe des dizaines de tutos sur le web et des livres
===Pour aller plus loin===
; Canvas HTML5
* [[Canvas (HTML5)]]


; GSAP
; GSAP
* [[Tutoriel GreenSock GSAP]]
* [[Tutoriel GreenSock GSAP]]
* [http://www.grafikart.fr/tutoriels/javascript/greensock-animation-platform-415 Tutoriel vidéo Javascript : Créer des animations complexes avec GSAP.js] Bien fait, mais nécessite un peu de JQUERY, voir les articles [[JQuery]] et éventuellement [[JQuery UI]]
* [http://www.grafikart.fr/tutoriels/javascript/greensock-animation-platform-415 Tutoriel vidéo Javascript : Créer des animations complexes avec GSAP.js] Bien fait, mais nécessite un peu de JQUERY, voir les articles [[JQuery]] et éventuellement [[JQuery UI]]
Voir éventuellement d'autres [[Bibliothèques JavaScript]]


; Autre
; Autre
Ligne 134 : Ligne 215 :
* [[Les différences entre l'image statique et l'animation quant à l'apprentissage]]
* [[Les différences entre l'image statique et l'animation quant à l'apprentissage]]
* [[Animation et image statique]]
* [[Animation et image statique]]
=== Bibliographie ===
Livre recommandé pour débutants:
* [http://shop.oreilly.com/product/9781593274085.do JavaScript for Kids] (Pas forcément pour enfants, pas super drôle, mais bien écrit). La version e-ebook ne coûte pas très cher et elle est partageable.

Dernière version du 26 septembre 2016 à 14:03

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

STIC

Enoncé de l'exercice 3

Cet exercice vous permet:

  • d'apprendre quelques notions de JavaScript et de la programmation en général
  • comprendre la logique de la programmation DOM et des gestionnaires d'événements
  • d'apprendre quelques concepts d'animation CSS3 ou alors de continuer avec SVG

Tâche

Imaginez un design pédagogique qui nécessite des interactions suivies d'une animation ...

  • Créez une page HTML5 qui contient au moins deux éléments interactifs (l'utilisateur peut cliquer dessus, bouger la souris dessus, etc., à votre choix)
  • Ajoutez au moins un élément de changement de contenu suite à une interaction.
  • Ajoutez au moins un élément d'animation suite à une interaction
  • Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)

Il faut également contribuer au wiki (comme pour tous les exercices)

Outil

  • Editeur de programmation

Contraintes

  • Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
  • La page doit soit contenir au moins 2 éléments interactifs (par exemple des boutons), une zone de texte modifiable, une animation.
  • La page doit être bien formée et valide.
  • Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML et dans le rapport.

Le rapport:

  • Titre, auteur et date
  • Liens vers le résultat (fichier HTML) et indiquez avec quelle configuration on peut voir votre contenu.
  • Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos propres objectifs d'apprentissage....)
  • Discussion du design
  • La production: bref résumé de la démarche
  • Difficultés, auto-évaluation, remarques
  • Ressources utilisées, bibliographie.

A rendre

Emplacement du rapport avec les liens vers le dispositif html/svg: 

/etu-maltt/volt/<login>/stic-1/ex3/

Délai

  • lundi 24h une semaine avant le début de la période 3

Autre exercice de la même période

Activité en salle de classe

Programme

  • 09:00 - 09:30 : présentation de JavaScript dans le contexte du développement web
  • 09:30 - 10:30 : introduction à la syntaxe de JavaScript
  • -- pause --
  • 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
  • 11:45 - 12:30 : transfert de connaissances, JavaScript avec CSS3 et SVG

Présentation de JavaScript

Brève mise en contexte de JavaScript dans le développement web :

  • Développement frontend et backend
  • Importance de l'environnement
  • JavaScript côté client

Slides présentation (format PDF)

Introduction à la syntaxe de JavaScript

Survol des éléments fondamentaux du langage :

  • Syntaxe
  • Éléments principaux (variables, opérateurs, types de données, structure de contrôle, boucles, ...)

Références :

JavaScript et le DOM

Interaction de JavaScript avec le navigateur web :

  • L'objet global window
  • Inclure JavaScript dans une page HTML
  • Manipulation du DOM
  • Gestionnaire d'événements

Workshop Codepen.io :

  • Présentation Codepen.io
  • Fork et travail sur les exemples

Références :

Transfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

Squelette HTML5

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>
<body>



</body>
</html>

Contributions Wiki

C'est la première année qu'on aborde "sérieusement" JavaScript en STIC I, par conséquence les ressources wiki disponibles à présent sont limitées et créées en peu de temps, il manque par conséquent une structure des pages. Voici quelques conseils pour les contributions :

Contributions de "base"/minimalistes

Pas mal de fautes de français (désolé!) et concepts peu/pas clairs!

Introduction à la programmation
  • Modifications/corrections (surtout orthographe! ;))
JavaScript
  • Tutoriel JavaScript de base se limiter à modifications/corrections car la page est déjà très lourde, si jamais créer une nouvelle page qui explique mieux une certaine partie du Tutoriel de base
  • JavaScript modifications/corrections mais la page devrait rester plutôt conceptuelle, pas trop de code
  • Liens JavaScript contrôler liens (actualité, qualité) : ajouter, effacer, réorganiser...

Contributions "intermédiaire"

HTML5
  • Ajouter une partie sur les nouveaux inputs pour les formulaires (range, date, etc.)
  • Expliquer intérêts des API
CSS3
  • Créer une page CSS3 avec animations sans et avec JavaScript
Tutoriel SVG dynamique avec DOM
  • Mettre à jour (refaire?) la page avec notions de manipulation du DOM avec JavaScript
Codepen.io
  • Créer page/tutoriel sur Codepen.io

Contributions avancées

Bibliothèques JavaScript
  • Créer tutoriel pour une bibliothèque
  • Améliorer tutoriels existants
  • Proposer nouvelles bibliothèques

Autres possibilités

  • Poursuivre page créée en P1
  • Pages plus théoriques sur animations
  • Pages plus théoriques sur la programmation (e.g. programmation dans les écoles, etc.)

Liens

Technique

JavaScript

Pour aller plus loin

Canvas HTML5
GSAP

Voir éventuellement d'autres Bibliothèques JavaScript

Autre

Théorie

Bibliographie

Livre recommandé pour débutants:

  • JavaScript for Kids (Pas forcément pour enfants, pas super drôle, mais bien écrit). La version e-ebook ne coûte pas très cher et elle est partageable.
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_3_(Volt)&oldid=62528 »