Cours 9.1¶

Annonces¶

---

Aujourd'hui¶

• Remplir le formulaire Classroom 50 (votre identifiant GitHub), puis accepter l'invitation reçue par courriel
• Rencontre éclair avec moi : votre storyboard et votre cahier de charges
• Le storyboard v2 : les exigences précisées, à remettre ven. 30 oct.
• Git en équipe : branches, pull requests, conflits, convention de commits
• Exercice en duo : provoquer et régler un conflit
• Dans votre projet : la structure commune sur main, puis une branche chacun
• Animations CSS : la spritesheet et la parallaxe
• Noter dans votre journal les commentaires reçus à la rencontre

1. Rencontre éclair : storyboard et cahier de charges¶

Pendant les périodes de travail d'aujourd'hui (l'exercice, puis le travail dans votre projet), je passe voir chaque équipe, environ 5 minutes. Je survole votre storyboard et votre cahier, et je vous dis à première vue ce qui est incomplet ou à clarifier. Je vous dirai aussi si votre concept doit être poussé davantage : la créativité compte.

Quand j'arrive à votre poste, ayez déjà ouverts :

• votre storyboard dans Figma;
• votre cahier de charges sur github.com (documentation/CAHIER-DE-CHARGES.md).

En attendant votre tour, relisez la section 9 de votre cahier : vos prochaines étapes. Ce que vous aviez prévu pour aujourd'hui, est-ce fait?

Après la rencontre, chacun note dans son journal de bord les commentaires reçus et ce que l'équipe va corriger.

Le storyboard v2 : pour le ven. 30 oct., 23 h 59¶

Les exigences du storyboard sont maintenant précisées. Vous montez une v2 sur le modèle du Chaperon : une rangée par moment, avec le cadre desktop, le cadre mobile et la fiche d'annotation, qui décrit l'animation, pas l'histoire. Vous réutilisez vos cadres de la v1 par copier-coller.

Pour le même jour, complétez aussi la section 1 de votre cahier : votre angle, votre identité visuelle et votre moment surprenant. Le gabarit a trois nouvelles lignes pour ça.

Le storyboard : exigences et cadres modèles

2. Git en équipe¶

À deux dans le même dépôt, on ne travaille plus comme au portfolio. Aujourd'hui : une branche par personne, la fusion par pull request, les conflits, et une façon commune de nommer vos commits.

D'abord, un rappel : c'est quoi une branche, la branche active, créer, changer et publier une branche. Vous l'avez vu au portfolio.

Les branches Git, en 10 minutes

Puis, le travail à deux : la pull request, la mise à jour de sa branche, les conflits et la convention de commits.

Git en équipe Présentation (PowerPoint)

3. Exercice : provoquer et régler un conflit¶

En duo, 25 minutes. Dans un petit dépôt d'exercice créé par Classroom 50, vous allez provoquer un conflit exprès, et le régler. Chacun en règle un.

L'exercice, étape par étape

4. Dans votre projet¶

En équipe, 20 minutes. Maintenant, pour vrai :

1. Ensemble, sur un seul poste, sur main : la structure commune (index.html, css/style.css, js/main.js, data/data.json, assets/images/), avec le squelette de tous vos chapitres dans data.json. Commit (Commun : ajoute la structure de départ), puis push.
2. L'autre personne fait un pull.
3. Chacun crée sa branche, à son prénom, et la publie.
4. Vérifiez sur github.com : le menu des branches affiche main et vos deux branches.

À partir de maintenant : plus personne ne code sur main.

5. Animations CSS : parallaxe et spritesheet¶

Deux des trois formats de média animable se jouent en CSS.

La spritesheet : toutes les images d'une animation côte à côte dans un seul fichier, montrées une à la fois avec steps(). Pour votre projet, la version responsive, avec transform.

Animation par spritesheet Exercice : le monstre responsive

La parallaxe en calques : des plans qui défilent à des vitesses différentes, pour donner de la profondeur.

La parallaxe : définition et exemples Exercice : la parallaxe en calques

À faire : chacun commence la préparation de son média animable (calques, spritesheet ou SVG), sur sa branche.

Devoirs¶

D'ici le ven. 30 oct., 23 h 59 (cours 9.2)¶

• Storyboard v2, en équipe : sur une nouvelle page Figma, exporté dans documentation/storyboard-v2.pdf.
• La section 1 du cahier de charges, en équipe : votre angle, votre identité visuelle et votre moment surprenant.
• Sur votre branche : commencez la préparation de votre média animable, et faites votre premier commit selon la convention de l'équipe (Zone : ce qui a changé).

D'ici le mer. 4 nov. (cours 10.1)¶

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

• Exercice : un conflit (en duo);
• Exercice : le monstre responsive;
• Exercice : la parallaxe en calques.