« 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
Ligne 6 : Ligne 6 :


* d'apprendre quelques notions de JavaScript et de la programmation en général
* 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)
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
Ligne 43 : Ligne 43 :


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'''
'''Délai'''
Ligne 57 : Ligne 57 :
* -- 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 142 : Ligne 142 :
; [[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 170 : Ligne 170 :
* Créer page/tutoriel sur Codepen.io
* Créer page/tutoriel sur Codepen.io


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


; [[Bibliothèques JavaScript]]
; [[Bibliothèques JavaScript]]
Ligne 180 : Ligne 180 :
===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 200 : Ligne 200 :
* [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 214 : Ligne 214 :
Livre recommandé pour débutants:
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 chère et elle est partagable.
* [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.

Version du 3 novembre 2015 à 09:00

Cette page fait partie des cours STIC I et STIC II

STIC

Enoncée du Projet 3

Ce projet 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

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

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=49780 »