« STIC:STIC I - exercice 3 (Volt) » : différence entre les versions
Aller à la navigation
Aller à la recherche
mAucun résumé des modifications |
mAucun résumé des modifications |
||
| (3 versions intermédiaires par 3 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{ | {{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é de l'exercice 3 == | ||
Cet exercice vous permet: | |||
* 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 | ||
| Ligne 48 : | Ligne 48 : | ||
* lundi 24h une semaine avant le début de la période 3 | * 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 99 : | 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/ | ** [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] | ||
| Ligne 195 : | Ligne 198 : | ||
===Pour aller plus loin=== | ===Pour aller plus loin=== | ||
; Canvas HTML5 | |||
* [[Canvas (HTML5)]] | |||
; GSAP | ; GSAP | ||
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)
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 :
- Tutoriel JavaScript de base
- Exemples Codepen.io :
Transfert de connaissances : JavaScript avec CSS3 et SVG
Utiliser JavaScript avec :
- SVG :
- CSS
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!
- 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"
- 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
- 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
- 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
- Introduction à la programmation
- JavaScript
- Tutoriel JavaScript de base
- Il existe des dizaines de tutos sur le web et des livres
Pour aller plus loin
- Canvas HTML5
- GSAP
- Tutoriel GreenSock GSAP
- 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
- Flash CS4 - Principes de l'animation (décrit brièvement quelques types d'animation en Flash, aussi valable pour d'autres formats)
Théorie
- Les différences entre l'image statique et l'animation quant à l'apprentissage
- Animation et image statique
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.