« 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
 
(12 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 ==
Ligne 51 : Ligne 60 :
* -- pause --
* -- pause --
* 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
* 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
* 11:45 - 12:30 : trasnfert de connaissances, JavaScript avec CSS3 et SVG
* 11:45 - 12:30 : transfert de connaissances, JavaScript avec CSS3 et SVG


====Présentation de JavaScript====
====Présentation de JavaScript====
Ligne 60 : Ligne 69 :
* Importance de l'environnement
* Importance de l'environnement
* JavaScript côté client
* 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====
====Introduction à la syntaxe de JavaScript====
Ligne 91 : Ligne 102 :
* Exemples Codepen.io :
* Exemples Codepen.io :
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript]
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript]
** [http://codepen.io/mafritz/pen/VvxwMa Événements liés à la souris]
** [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/OyZJvx L'éléments this dans le DOM]
** [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML]
** [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML]


====Trasfert de connaissances : JavaScript avec CSS3 et SVG====
====Transfert de connaissances : JavaScript avec CSS3 et SVG====


Utiliser JavaScript avec :
Utiliser JavaScript avec :
Ligne 106 : Ligne 117 :
** [http://codepen.io/mafritz/pen/OyZzpw Utiliser dynamiquement les classes CSS avec JavaScript]
** [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]
** [http://codepen.io/mafritz/pen/meLqYw Animation CSS3 avec classes et @keyframes]
===Squelette HTML5===
<source lang="HTML5">
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>
<body>
</body>
</html>
</source>


==Contributions Wiki==
==Contributions Wiki==
Ligne 117 : Ligne 145 :
; [[Introduction à la programmation]]
; [[Introduction à la programmation]]


* Modifications/corrections (surtout ortographe! ;))
* Modifications/corrections (surtout orthographe! ;))


; JavasScript
; 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
* [[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
* [[JavaScript]] modifications/corrections mais la page devrait rester plutôt conceptuelle, pas trop de code
* [[Liens JavaScript]] contrôler liens (actualité, qualité) : ajouter, effacer, reorganiser...
* [[Liens JavaScript]] contrôler liens (actualité, qualité) : ajouter, effacer, réorganiser...


===Contributions "intermédiaire"===
===Contributions "intermédiaire"===
Ligne 139 : Ligne 167 :
; [[Tutoriel SVG dynamique avec DOM]]
; [[Tutoriel SVG dynamique avec DOM]]


* Mettre à jour (refaire?) la page avec notions de manipulation du DOM avec JavaScript  
* Mettre à jour (refaire?) la page avec notions de manipulation du DOM avec JavaScript
 
; Codepen.io
 
* Créer page/tutoriel sur Codepen.io


===Contributions avancés===
===Contributions avancées===


; [[Bibliothèques JavaScript]]
; [[Bibliothèques JavaScript]]
Ligne 151 : Ligne 183 :
===Autres possibilités===
===Autres possibilités===


* Poursuivre pages créé en P1
* Poursuivre page créée en P1
* Pages plus théoriques sur animations
* Pages plus théoriques sur animations
* Pages plus théoriques sur la programmation (e.g. programmation dans les écoles, etc.)
* Pages plus théoriques sur la programmation (e.g. programmation dans les écoles, etc.)
Ligne 166 : Ligne 198 :


===Pour aller plus loin===
===Pour aller plus loin===
; Canvas HTML5
* [[Canvas (HTML5)]]


; GSAP
; GSAP
Ligne 171 : Ligne 206 :
* [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 événtuellement d'autres [[Bibliothèques JavaScript]]
Voir éventuellement d'autres [[Bibliothèques JavaScript]]


; Autre
; Autre
Ligne 180 : 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 »