« STIC:STIC I - exercice 3 (Volt) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Tâche) |
|||
| Ligne 15 : | Ligne 15 : | ||
* 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 | * 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 !!) | ||
Version du 30 octobre 2015 à 15:08
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 gestionnaire 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 objectifs d'apprentissage....)
- Discussion du design
- La production: bref résumé de la démarche
- Difficultés, auto-évaluation, remarques
- Ressources utilisées, bibliographie.
Emplacement du rapport avec les liens vers le dispositif html/svg:
/etu-maltt/utopia/<login>/stic-1/ex3/
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 : trasnfert 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 :
Trasfert 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 ortographe! ;))
- JavasScript
- 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, reorganiser...
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és
- Créer tutoriel pour une bibliothèque
- Améliorer tutoriels existants
- Proposer nouvelles bibliothèques
Autres possibilités
- Poursuivre pages créé 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
- 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 événtuellement 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 chère et elle est partagable.