STIC:STIC I - exercice 3 (Volt)

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érale
• 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 éléments 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

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 :

• 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 :
  • Simple manipulation du DOM avec JavaScript
  • Événements liés à la souris
  • L'éléments this dans le DOM
  • JavaScript et formulaires HTML

Trasfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

• SVG :
  • Ajouter des éléments SVG
  • Rendre des éléments SVG interactifs
  • Simple animation
• CSS
  • Utiliser dynamiquement les classes CSS avec JavaScript
  • Animation CSS3 avec classes et @keyframes

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 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"

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

Contributions avancés

Bibliothèques JavaScript

• 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