Le cahier de charges et le scénarimage (storyboard)¶

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

Consignes complètes du récit défilant

Comment s'y prendre¶

Vous avez deux semaines, incluant un cours : le mer. 21 oct., arrivez avec votre concept et vos chapitres (étapes 1 et 2); on avance ensemble le storyboard et la matrice. Voici un ordre qui fonctionne :

1. Le thème et le concept (section 1). Partez de votre brainstorm (FigJam ou papier), et discutez-en à deux jusqu'à pouvoir le résumer en une phrase.
2. Le découpage en chapitres (section 3) : ce que chaque chapitre raconte, avant de penser aux animations.
3. Le storyboard dans Figma (section 2) : à quoi ressemble chaque chapitre, et ce qui bouge quand on défile.
4. Les animations de chaque chapitre, en respectant les garde-fous (section 3).
5. La matrice de responsabilités (section 4) : qui possède quoi. À faire ensemble, et à prendre au sérieux : c'est la base de votre note individuelle.
6. Le reste : données, dataviz, médias, technologies, prochaines étapes, risques.

Le storyboard dans Figma¶

Un storyboard de défilement n'est pas une maquette de chaque pixel. C'est la suite des moments que vit le visiteur.

Partez du gabarit : il contient deux pages, une pour le storyboard desktop (cadres en format paysage) et une pour le storyboard mobile (cadres en format portrait). Dupliquez les cadres autant de fois que nécessaire.

Télécharger le gabarit de storyboard (Figma)

Pour l'ouvrir : dans l'accueil de Figma, cliquez sur Importer (ou glissez le fichier .fig dans la fenêtre), puis partagez le fichier avec votre coéquipier ou coéquipière.

Ce que votre storyboard doit contenir¶

• Une rangée par moment, comme dans le modèle : le cadre desktop, le cadre mobile à côté, puis la fiche d'annotation. Tout est visible d'un coup d'œil.
• Au moins une rangée par chapitre. Un chapitre où plusieurs animations se produisent, en même temps ou l'une après l'autre, peut avoir plusieurs rangées : une par moment important.
• Le cadre mobile montre ce qui change sur un petit écran : la place du texte, une animation simplifiée ou retirée.
• Le texte du chapitre placé dans chaque cadre : un titre et un petit paragraphe de lorem ipsum, à la taille et à l'endroit où il apparaîtra à l'écran. C'est là que le visiteur lit votre récit : le texte doit avoir sa place dans la composition, pas être ajouté à la fin.
• La fiche d'annotation complète, à droite des deux cadres (voir ci-dessous).
• Des images qui montrent ce qu'on doit voir, pas des boîtes grises : un croquis, ou une image trouvée ou générée, collée dans le cadre pour représenter chaque élément (le décor, le personnage, l'objet). Ce n'est pas l'image finale, c'est une référence. Avec des boîtes grises, personne ne sait ce qui est quoi dans le cadre.
• Si un élément n'est pas évident, nommez-le avec une petite étiquette (« loup », « calque avant »).
• Repérez votre moment dataviz et votre composant Vue (navigateur de chapitres ou barre de progression).
• Poussez votre concept : la v2 est le moment d'aller plus loin que le minimum. Votre angle, votre identité visuelle et votre moment surprenant doivent se voir dans les cadres (voir La créativité compte).

La fiche d'annotation¶

Dans chaque rangée, copiez ces amorces dans une zone de texte, à droite des cadres, et complétez-les :

Ch. # · Moment # :
Ce qui bouge ou ce qui est animé, et comment? :
Déclencheur :
Technique :
Mobile :

• Ce qui bouge : l'élément, le type d'animation (tableau ci-dessous), et son départ → son arrivée.
• Déclencheur : l'entrée dans l'écran, la progression du défilement, une section épinglée, un clic.
• Technique : CSS au défilement, GSAP + ScrollTrigger ou IntersectionObserver.
• Mobile : ce qui est différent sur mobile (la place du texte, une animation simplifiée ou retirée). Si rien ne change, écrivez « Comme desktop ».

Nommer le « comment »¶

Décrire l'animation, pas l'histoire¶

L'histoire, elle est déjà dans votre tableau des chapitres. La fiche décrit ce que le visiteur voit bouger, assez précisément pour que quelqu'un d'autre puisse le coder.

Le modèle : deux rangées¶

Monter votre v2, étape par étape¶

Vous ne repartez pas de zéro : vous réutilisez les cadres de votre v1.

1. Dans Figma, créez une nouvelle page : Storyboard V2.
2. Pour chaque moment, créez un grand cadre qui servira de rangée, nommé comme le moment (ex. Ch. 4 · Moment 2).
3. Copiez-collez dans la rangée votre cadre desktop de la v1, et son cadre mobile à côté. S'il n'existe pas encore, créez le cadre mobile.
4. Complétez les deux cadres : le texte en lorem ipsum, des images de référence, des étiquettes au besoin.
5. Ajoutez la fiche d'annotation à droite, jusqu'à la ligne « Mobile ».
6. Placez les rangées dans l'ordre du récit, l'une sous l'autre.

Remettre le storyboard : le lien et le PDF¶

Vous remettez votre storyboard de deux façons :

• Le lien Figma, dans le README.md et dans le cahier (section 2), avec accès donné à marie-michelle.ouellet@cmontmorency.qc.ca. C'est la version vivante : je pourrai y laisser des commentaires.
• Un export PDF, déposé dans le dépôt : documentation/storyboard.pdf pour la v1, documentation/storyboard-v2.pdf pour la v2. C'est la version figée au moment de la remise : elle montre ce qui était fait à l'échéance.

Pour exporter la v2 : ouvrez la page Storyboard V2, puis menu principal → File → Export frames to PDF. Chaque rangée devient une page du PDF. Vérifiez qu'elles y sont toutes, dans l'ordre du récit.

Pas d'outils IA de Figma pour composer le storyboard ni pour rédiger les annotations. Vous pouvez par contre générer une image de référence pour illustrer un cadre : dans ce projet, l'IA sert seulement à créer des images, jusqu'à nouvel ordre.

Le modèle de données JSON¶

Vos chapitres seront chargés avec fetch() depuis un fichier JSON, comme les projets de votre portfolio. Chaque chapitre est un objet en deux parties :

• les clés communes, les mêmes pour toutes les équipes : id, numero, titre, responsable, texte. Elles sont fixes.
• contenu : tout ce qui est propre au chapitre. C'est vous qui inventez ses clés, et elles peuvent changer en cours de projet.

Vous ne pouvez pas tout prévoir maintenant : vous découvrirez GSAP et vos besoins en avançant. C'est normal, et c'est pour ça que contenu est libre. Décrivez ce que vous savez aujourd'hui.

Exemple 1 : un chapitre simple, avec un texte et un média.

{
  "id": "la-foret",
  "numero": 3,
  "titre": "Dans la forêt",
  "responsable": "Prénom",
  "texte": ["Premier paragraphe...", "Deuxième paragraphe..."],
  "contenu": {
    "calques": [
      { "src": "assets/images/foret-fond.webp", "vitesse": "lente" },
      { "src": "assets/images/foret-avant.webp", "vitesse": "rapide" }
    ]
  }
}

Exemple 2 : un chapitre en plusieurs plans. Quand un chapitre est une séquence de moments animés, chacun avec son média, son contenu peut contenir un tableau plans. Le module du chapitre boucle sur les plans, exactement comme main.js boucle sur les chapitres.

{
  "id": "la-tempete",
  "numero": 4,
  "titre": "La tempête",
  "responsable": "Prénom",
  "texte": ["La mer est calme. Trop calme."],
  "contenu": {
    "plans": [
      {
        "id": "eclair",
        "texte": "Un éclair déchire le ciel.",
        "media": {
          "src": "assets/images/eclair.svg",
          "alt": "Un éclair zèbre le ciel"
        },
        "animation": { "technique": "gsap", "declencheur": "epingle" }
      },
      {
        "id": "bateau",
        "texte": "Le bateau tangue, puis disparaît.",
        "media": {
          "src": "assets/images/bateau.webp",
          "images": 12,
          "alt": "Un bateau secoué par les vagues"
        },
        "animation": { "technique": "observer", "declencheur": "entree" }
      }
    ]
  }
}

Ce qu'on remarque :

• Les clés communes sont identiques dans les deux exemples. Seul le contenu change.
• Chaque plan a son propre id, texte, media et animation : c'est le même découpage que vos rangées de storyboard.
• L'objet animation documente vos choix (technique, déclencheur). Le JavaScript peut s'en servir, ou ce peut être un simple aide-mémoire.

Questions à vous poser, pour chaque chapitre :

• Quels médias? De quels types (image, calque, spritesheet, SVG, vidéo)? Chacun a-t-il un alt?
• Quelles informations votre animation aura-t-elle besoin de lire (une vitesse, un nombre d'images, une couleur)?
• Le chapitre contient-il plusieurs moments animés? Si oui, des plans?

Pourquoi un contenu libre?¶

Dans le code, chaque chapitre a son propre fichier JavaScript, qui crée son média et l'anime. Ce fichier est le seul à lire le contenu de son chapitre. Vous pouvez donc changer le contenu de vos chapitres sans rien briser chez votre coéquipier.

Les clés communes, elles, sont lues par main.js, un fichier commun : si vous voulez en changer une, on s'entend d'abord en équipe. Tous les détails sont dans L'arborescence du dépôt.

Le moment dataviz¶

Votre récit doit contenir au moins un moment où des données réelles apparaissent : un graphique, un chiffre qui bouge, un élément « vivant » (la météo du jour, l'heure du coucher du soleil, etc.). Ces données viendront d'une API, un service en ligne qui renvoie des données en JSON quand on lui envoie une requête avec fetch().

Au cahier de charges, pas besoin de trouver l'API. On apprend à interroger une API externe au cours du mer. 11 nov., et c'est là que vous la choisirez et la testerez. Pour l'instant, décrivez seulement :

• le moment : dans quel chapitre, et ce que les données apportent à votre histoire;
• le genre de données que vous aimeriez montrer (ex. « la température dans une ville », « le nombre de séismes cette semaine », « des œuvres d'un musée »).

Le moment dataviz : exemples et démo

Restez souple : si aucune API ne fournit exactement vos données, on ajustera l'idée ensemble.

Le gabarit¶

Copiez tout le bloc ci-dessous (bouton de copie en haut à droite) dans documentation/CAHIER-DE-CHARGES.md. Remplacez les indications entre crochets.

# Cahier de charges : [Titre du récit]

**Équipe** : [Prénom Nom], [Prénom Nom]
**Thème** : [une cause / un mini-documentaire / une vitrine / un explicatif / une fiction]
**Brainstorm** : [lien FigJam, ou lien vers les photos dans `documentation/brainstorm/`]
**Storyboard Figma** : [lien]
**Storyboard PDF** : [documentation/storyboard.pdf](storyboard.pdf)

## 1. Le concept

[En 3 à 5 phrases : de quoi parle votre récit, quelle émotion ou quelle idée le visiteur doit retenir, et à qui il s'adresse.]

**En une phrase** : [votre récit résumé en une seule phrase]

**Notre angle** : [le point de vue qui rend votre récit unique. Ex. pas « les abeilles », mais « une journée dans la vie d'une abeille ouvrière, racontée par elle ».]

**Notre identité visuelle** : [palette, typographie, style d'images, et pourquoi ils conviennent à votre histoire]

**Notre moment surprenant** : [le chapitre, et ce qui s'y passe que le visiteur n'attend pas]

## 2. Le storyboard

[Le lien Figma, et 2 ou 3 phrases sur le déroulement général : comment le récit commence, où est le point culminant, comment il se termine.]

## 3. Les chapitres

6 à 8 chapitres, environ 100 à 250 mots chacun. Au plus 1 animation signature par chapitre, et au plus 2 sections épinglées dans tout le récit.

| # | Titre | Ce que le chapitre raconte | Animation signature | Technique | Médias | Responsable |
|---|---|---|---|---|---|---|
| 1 | [Ex. La forêt s'éveille] | [Ex. On découvre le lieu, au lever du jour] | [Ex. Parallaxe des arbres au défilement] | [CSS au défilement] | [Ex. Image en calques, 3 plans] | [Prénom] |
| 2 | | | | | | |
| 3 | | | | | | |
| 4 | | | | | | |
| 5 | | | | | | |
| 6 | | | | | | |
| 7 | | | | | | |
| 8 | | | | | | |

Vérification : chaque technique (CSS au défilement, GSAP + ScrollTrigger, IntersectionObserver) apparaît au moins une fois.

## 4. La matrice de responsabilités

| Élément | Responsable | Ce que ça comprend |
|---|---|---|
| Chapitres [numéros] | [Prénom] | Contenu, intégration, animations |
| Chapitres [numéros] | [Prénom] | Contenu, intégration, animations |
| Média animable 1 : [format] | [Prénom] | Préparation et intégration |
| Média animable 2 : [format] | [Prénom] | Préparation et intégration |
| Composant Vue : [navigateur de chapitres ou barre de progression] | [Prénom] | |
| *Fetch* externe et dataviz | [Prénom] | |
| Chargement des chapitres (JSON) | [Prénom] | |
| Structure commune (HTML, CSS de base, mise en page) | [Ensemble ou Prénom] | |

## 5. Le modèle de données

Version de départ : elle va évoluer, et vous la mettrez à jour à la fin du projet. Un exemple d'objet chapitre, tel qu'il sera dans votre fichier JSON (inspirez-vous des [deux exemples plus haut](#le-modele-de-donnees-json)) :

```json
{
  "id": "la-foret-s-eveille",
  "numero": 1,
  "titre": "La forêt s'éveille",
  "responsable": "[Prénom]",
  "texte": ["...", "..."],
  "contenu": {
    "medias": [
      { "src": "assets/images/foret-fond.webp", "alt": "..." }
    ]
  }
}
```

[Gardez les clés communes telles quelles. Dans `contenu`, ajoutez ce dont vos chapitres auront besoin, et expliquez vos choix en 1 ou 2 phrases.]

## 6. La dataviz

L'API sera choisie au cours du mer. 11 nov. Pour l'instant, décrivez l'idée.

- **Chapitre** : [numéro]
- **La question** à laquelle le moment répond : [ex. combien de fois la Terre a-t-elle tremblé cette semaine?]
- **Genre de données souhaitées** : [ex. la température heure par heure dans une ville]
- **La forme imaginée** : [une donnée qui change le décor / des unités à l'image de votre sujet / une donnée qui pilote une animation / une échelle au défilement / autre. Un graphique à barres est le minimum : visez plus loin.]
- **Ce qu'elles racontent dans le récit** : [1 ou 2 phrases : la chute]
- **Pistes d'API, si vous en avez trouvé** : [facultatif]

## 7. L'inventaire des médias

| Média | Chapitre | Source (produit, banque, IA) | Format | Responsable |
|---|---|---|---|---|
| | | | | |

Médias animables choisis :

- [Prénom] : [image en calques / spritesheet / SVG préparé pour GSAP], pour le chapitre [numéro]
- [Prénom] : [image en calques / spritesheet / SVG préparé pour GSAP], pour le chapitre [numéro]

## 8. Les choix technologiques (NE PAS REMPLIR TOUT DE SUITE)

[Pour chaque outil, 1 ou 2 phrases : pourquoi lui, pour ce projet.]

- **GSAP + ScrollTrigger** : [...]
- **Vue.js (CDN)** : [...]
- **Hébergement** : [...]
- **Autres** (Anime.js, Chart.js, etc., s'il y a lieu) : [...]

## 9. Vos prochaines étapes (d'ici le mer. 28 oct.)

Ce que chacun aura fait d'ici le cours du mer. 28 oct. : 2 ou 3 lignes par personne, sans code. Ex. trouver ou produire les images sources de ses chapitres, commencer à préparer son média animable, écrire le texte d'un chapitre.

**[Prénom]**

- [...]
- [...]

**[Prénom]**

- [...]
- [...]

## 10. Les risques et le plan B

[2 ou 3 risques, et ce que vous couperez ou simplifierez si le temps manque. Ex. « Si la spritesheet prend trop de temps, on réduit à 8 images. »]

Avant de remettre¶

• La section 1 décrit votre angle, votre identité visuelle et votre moment surprenant.
• Toutes les sections sont remplies : aucun crochet ne reste.
• Chaque personne a au moins 3 chapitres et un média animable dans la matrice.
• Chaque technique d'animation apparaît au moins une fois dans le tableau des chapitres.
• Le moment dataviz est décrit : chapitre, genre de données, ce qu'elles racontent.
• La trace du brainstorm est accessible : lien FigJam partagé, ou photos lisibles dans documentation/brainstorm/.
• Le lien Figma du storyboard fonctionne, avec accès donné à marie-michelle.ouellet@cmontmorency.qc.ca.
• Le storyboard est exporté en PDF dans documentation/storyboard.pdf, avec tous les cadres.
• Storyboard v2 (ven. 30 oct.) : sur une nouvelle page Figma (la v1 intacte), une rangée par moment : cadre desktop, cadre mobile, fiche. Le texte en lorem ipsum, des images de référence (pas de boîtes grises), une fiche complète. Exporté dans documentation/storyboard-v2.pdf.
• Le tout est poussé sur GitHub au plus tard le ven. 23 oct., 23 h 59.