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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
mAucun résumé des modifications
 
(16 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 et de la programmation en générale
* d'apprendre quelques notions de JavaScript et de la programmation en général
* comprendre la logique de la programmation DOM et des gestionnaire d'événements
* 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
* d'apprendre quelques concepts d'animation CSS3 ou alors de continuer avec SVG


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


Imaginez un design pédagogique qui nécessite des interactions suivies d'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 deux éléments interactifs (l'utilisateur peut cliquer dessus, bouger la souris dessus, etc., à votre choix)
* 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 de changement de contenu suite à une interaction.
* Ajoutez au moins éléments d'animation 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 34 : 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 ==


Tâche:
===Programme===
* Faire fonctionner le code ci-dessous
 
* Y apporter des modifications
* 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
 
[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====


Ce type d'exemple est expliqué  [Tutoriel JavaScript de base[]]
Survol des éléments fondamentaux du langage :


'''Chablon de base manipuler un élément HTML'''
* Syntaxe
<source lang="JavaScript">
* Éléments principaux (variables, opérateurs, types de données, structure de contrôle, boucles, ...)
<!DOCTYPE html>


</source>
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====
 
Utiliser JavaScript avec :
 
* 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]
 
===Squelette HTML5===


'''Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript'''
<source lang="HTML5">
<source lang="JavaScript">
<!doctype html>
<!DOCTYPE html>
<html>
<html>
  <head>
<head>
      <title>Event handling</title>
    <meta charset="UTF-8">
      <script type = "text/javascript">
    <title>Untitled Document</title>
        window.onload = start;
</head>
        // var my_para_button  ="";
<body>


function start()  {
  // put an event handler on the div box
  var my_para_button = document.getElementById("box");
  my_para_button = addEventListener("click", modifyText);
        }


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


  <body>
</body>
      <div id="box">
        <p style="background-color:yellow" id="content">CLICK ME !</p>
      </div>
  </body>
</html>
</html>
</source>
</source>
Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.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
** 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]]
 
* 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 ==
== Liens ==
Ligne 95 : 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 109 : 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 à 13: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 »