Développement d'interfaces 3 - Interactions
Descriptif
Dans ce troisième cours Développement d’interfaces, on aborde les bases du langage JavaScript, pour être en mesure d’apporter des éléments d’interactivité.
Place du JavaScript dans la formation
Le profil d’une Interactive Media Designer est celui d’une créatrice visuelle, pas d’une développeuse. La compétence JavaScript va donc se focaliser sur son rôle dans la conception d’interfaces visuelles:
- Intégration de médias: 3D (three.js), Lottie (animations SVG depuis After Effects)
- Intégration de scripts tiers (Galeries d’images, Masonry, GSAP…).
- Animation au scroll, déclencher une animation (paralaxe, Reveal Effects).
- Manipulation d’éléments de la page.
- Utilisation du Canvas, avec three.js, p5.js…
Un programme possible
Concepts potentiellement déjà vus avec Processing dans le cours Projet interface, en fonction du parcours de la classe:
- Les variables
- Les fonctions
- Les opérateurs (comparaison)
- Les conditions (if / else)
- Les boucles
Concepts nouveaux:
- La syntaxe Javascript
- Les types de données, les tableaux (Array)
- La gestion des événements
- La manipulation du DOM
- Intégrer des scripts tiers
- Bibliothèques de visualisation (P5, etc)
Evaluation finale
Projets possibles:
- Implémentation d’un menu mobile avec overlay fullscreen animé.
- Fenêtres modales.
- Formulaires avec validation.
📚 Ressources
- Cours-Web.ch
- Olivier Hondermarck, Tout JavaScript, Dunod. En bibliothèque Eracom-EPSIC.
- Mat Marquis (2017), Javascript pour les web designers, Eyrolles. En bibliothèque Eracom-EPSIC (004.03.03 MAR).
- Generative Design. Princeton Architectural Press. En bibliothèque Eracom-EPSIC (004.03.03 BOH)
Structure globale des cours
Pour situer ce cours dans le contexte de la formation: