Cours 10.2¶

Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails

Nouveau : votre récit se construit en deux phases.¶

Phase 1: intégration statique¶

Phase 1, intégration statique : vos chapitres écrits directement en HTML et en CSS, puis animés. Accepté jusqu'au prototype (ven. 13 nov.).

Phase 2: intégration dynamique¶

Phase 2, intégration dynamique : le texte et les médias déplacés dans data.json. Exigé à la bêta (ven. 20 nov.).

Écrivez votre HTML comme le JavaScript le construira : vos animations ne changeront pas à la phase 2.

Comment faire :

• Phase 1 : aujourd'hui, écrire vos chapitres en HTML (phase 1), et où mettre vos animations en JavaScript;
• Phase 2 : plus tard, passer à la phase 2, puis les étapes du chargement JSON.

Rappel pour les images non créées pas vous même¶

• Banques d'images libres permises (ex. Unsplash , Pexels ), selon leur licence.
• Images générées par IA permises, si elles sont créditées dans le README.md, avec l'outil comme source.
• Autre images qui ne sont pas de vous

Tous les médias sont crédités dans le README.md, dans un tableau : média, chapitre, source, auteur, licence, modifié ou non.

## Crédits des médias

| Média | Chapitre | Source | Auteur | Licence | Modifié? |
|---|---|---|---|---|---|
| `foret-fond.webp` | 1 | [Unsplash](lien) | Nom auteur | Licence Unsplash | Découpé 3 calques |
| `renard.svg` | 3 | Firefly | Généré par IA | : | Vectorisé, groupes nommés |

Aujourd'hui¶

• Point de contrôle : 5 minutes pour compléter votre remise
• Rencontres d'équipe : on valide votre point de contrôle ensemble
• IntersectionObserver : déclencher une fois
• Mini-atelier en équipe (obligatoire) : choisir votre extension GSAP
• Dans votre projet : construire vos chapitres

1. Le point de contrôle¶

Ensuite, je passe d'équipe en équipe pour faire le point de contrôle avec vous. Préparez-vous à me montrer, sur votre poste :

• votre dépôt sur GitHub : l'arborescence, et la pull request fusionnée de chacun;
• votre page avec Live Server : une <section> avec son id par chapitre, et l'animation test de chacun;
• vos médias, dans assets/images/ch-XX/, et leurs crédits dans le README.md;
• le journal du bloc 2 de chacun.

En attendant votre tour : le mini-atelier des extensions (section 3), obligatoire, puis vos chapitres (section 4).

Le point de contrôle : la liste complète

2. IntersectionObserver¶

Pas pour animer : pour déclencher une action, une seule fois. C'est la bonne façon de lancer le fetch de votre dataviz quand le visiteur arrive au chapitre.

IntersectionObserver : déclencher une fois

3. Mini-atelier en équipe : choisir votre extension GSAP¶

GSAP a des extensions pour des effets qu'on ne fait pas avec un simple tween : faire apparaître un titre lettre par lettre, faire suivre un chemin à un personnage, dessiner un trait, transformer une forme en une autre. Depuis GSAP 3.13, elles sont toutes gratuites, sur le même CDN que GSAP.

Chacune a sa page-sujet, avec une démo, l'installation et un exemple pour un chapitre de votre récit. L'une d'elles pourrait devenir le moment fort d'un de vos chapitres.

1. Explorez (chacun de son côté)

Partagez-vous la liste plus bas : une personne prend les 4 premières extensions, l'autre les 4 dernières. Pour chacune, regardez la démo et la section « Dans votre récit ». Notez celles qui pourraient servir votre histoire.

2. Décidez (ensemble)

Présentez-vous vos trouvailles, puis répondez ensemble à trois questions :

• Quelle extension? Celle qui sert le mieux votre histoire, pas la plus spectaculaire.
• À quel moment de l'histoire? Le chapitre, et le moment précis dans votre storyboard.
• Qui l'intègre? Une personne responsable, idéalement dans un de ses chapitres.

3. Documentez (ensemble, sur main)

Dans la section 4 de votre CAHIER-DE-CHARGES.md (la matrice de responsabilités), ajoutez la ligne :

| Extension GSAP : [nom de l'extension], chapitre [numéro] | [Prénom] | L'effet et son intégration |

Puis commit (Cahier : ajoute l'extension GSAP) et push.

Les extensions à explorer :

• TextPlugin : la machine à écrire
• SplitText : des lettres, des mots, des lignes
• ScrambleText : l'effet décodage
• MotionPath : suivre un tracé
• DrawSVG : dessiner un trait
• MorphSVG : changer de forme
• Flip : changer de mise en page
• ScrollTo : défiler jusqu'à un chapitre

4. Dans votre projet : construire vos chapitres¶

Chacun dans ses chapitres, sur sa branche. C'est la phase 1, l'intégration statique :

1. Le HTML de vos sections, directement dans index.html : le texte, puis vos médias.
2. Le CSS de vos chapitres, dans css/chapitres/.
3. Vos animations JavaScript dans la fonction animate() du fichier de votre chapitre (js/chapitres/ch-03.js) : GSAP, ScrollTrigger. Les animations CSS au défilement, elles, vont dans css/chapitres/.
4. Pull request quand une étape fonctionne : on fusionne souvent, par petits morceaux.

Phase 1 : vos chapitres en HTML Phase 1 : vos animations en JavaScript

Exemple : un chapitre, plusieurs médias en timeline

Devoirs¶

Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails

D'ici le mer. 11 nov. (cours 11.1)¶

Terminez les exercices, chacun dans son dépôt Classroom 50¶

• Exercice : Zombi;
• Exercice : Magie;
• Exercice : la magie au défilement.

Corrigez la spritesheet et la parallaxe¶

Avec la grille Vérifiez votre travail de chaque énoncé, puis push :

• Exercice : le monstre responsive;
• Exercice : la parallaxe en calques.

D'ici le ven. 13 nov. : le prototype (formatif), en phase 1¶

Votre récit est navigable et animé. Phase 1 : intégration statique acceptée : vos chapitres peuvent encore être en HTML statique. La phase 2 : intégration dynamique sera exigée à la bêta (ven. 20 nov.). Voir le calendrier.