Cours 8.1¶

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

Aujourd'hui¶

• Avant tout : dépôt GitHub privé, et marie-michelle-ouellet invitée comme collaboratrice
• Faire approuver votre thème avec moi, en équipe
• Le storyboard du défilement : plusieurs cadres par chapitre au besoin
• Le modèle de données JSON : votre objet « chapitre »
• La matrice de responsabilités : qui possède quoi
• Le moment dataviz : exemples et démo
• Rencontre d'équipe avec moi : votre avancement
• Temps de travail sur le cahier de charges
• Entrée au journal de bord

Déroulement¶

Aujourd'hui, c'est surtout votre temps de travail. Quatre courtes notions, chacune suivie d'un moment pour l'appliquer à votre cahier de charges. Pendant ce temps, je rencontre chaque équipe.

1. Le storyboard du défilement¶

Un storyboard de défilement montre la suite des moments que vit le visiteur, pas chaque pixel.

• Au moins un cadre par chapitre, et plusieurs si un chapitre contient plusieurs animations.
• Dans la description de chaque cadre : le numéro du chapitre, ce qui bouge, ce qui le déclenche, la technique.
• Les médias peuvent être des boîtes grises ou des croquis.

Consignes du storyboard

À faire (25 min) : avancez vos cadres dans Figma, à partir du gabarit.

2. Le modèle de données JSON¶

Vos chapitres seront chargés avec fetch() depuis un fichier JSON, comme les projets de votre portfolio. Avant de coder, on décide la forme d'un chapitre : quelles propriétés, et pour quoi faire.

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

{
  "id": "la-foret",
  "numero": 3,
  "titre": "Dans la forêt",
  "texte": ["Premier paragraphe...", "Deuxième paragraphe..."],
  "medias": [
    { "type": "calque", "src": "assets/images/foret-avant.webp", "alt": "" }
  ],
  "responsable": "Prénom"
}

Exemple 2 : un chapitre en plusieurs plans. Quand un chapitre est une séquence de moments animés, chacun avec son média et son animation, on ajoute un tableau plans. Le JavaScript boucle sur les plans d'un chapitre, exactement comme il boucle sur les chapitres.

{
  "id": "la-tempete",
  "numero": 4,
  "titre": "La tempête",
  "type": "sequence",
  "plans": [
    {
      "id": "ciel-calme",
      "texte": "La mer est calme. Trop calme.",
      "media": {
        "type": "calques",
        "calques": [
          { "src": "assets/images/ciel-fond.webp", "vitesse": "lente" },
          { "src": "assets/images/vagues.webp", "vitesse": "rapide" }
        ],
        "alt": ""
      },
      "animation": { "technique": "css", "declencheur": "defilement" }
    },
    {
      "id": "eclair",
      "texte": "Un éclair déchire le ciel.",
      "media": {
        "type": "svg",
        "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": {
        "type": "spritesheet",
        "src": "assets/images/bateau.webp",
        "images": 12,
        "alt": "Un bateau secoué par les vagues"
      },
      "animation": { "technique": "observer", "declencheur": "entree" }
    }
  ],
  "responsable": "Prénom"
}

Ce qui change par rapport à l'exemple 1 :

• "type": "sequence" indique au JavaScript de construire plusieurs plans plutôt qu'un seul bloc.
• Chaque plan a son propre id, texte, media et animation : c'est le même découpage que vos cadres de storyboard.
• Les propriétés du média dépendent de son type : une liste de calques avec leur vitesse, un nombre d'images pour une spritesheet, un simple src pour un SVG.
• L'objet animation documente vos choix (technique, déclencheur). Le JavaScript peut s'en servir, ou ce peut être un simple aide-mémoire pour l'équipe.

Questions à vous poser :

• Le texte : une seule chaîne, ou un tableau de paragraphes?
• Les médias : de quels types (image, calque, spritesheet, SVG, vidéo)? Chacun a-t-il un alt?
• Vos chapitres affichent-ils des médias différents? Si oui, ajoutez une propriété type (ex. "parallaxe", "dataviz") : le JavaScript la lira pour savoir quel HTML construire (voir le cahier de charges).
• Un de vos chapitres contient-il plusieurs moments animés? Si oui, est-ce un chapitre en plans?

À faire (20 min) : section 5 du cahier, avec l'objet d'un de vos vrais chapitres.

3. La matrice de responsabilités¶

C'est la pièce maîtresse de votre note individuelle. Elle dit qui possède quoi, et c'est sur ces zones que porteront vos commits, votre contrôle de la qualité et votre défense du 9 décembre.

• Chaque personne : au moins 3 chapitres et un média animable.
• Le composant Vue, le fetch externe et le chargement du JSON ont chacun un responsable.
• Faites-la ensemble, et prenez-la au sérieux : impossible de défendre le code d'une zone qui n'est pas la vôtre.

À faire (15 min) : section 4 du cahier.

4. Le moment dataviz¶

Une question, une donnée réelle, une forme simple, une révélation au défilement, une chute. On regarde des exemples, puis une démo avec des données réelles.

Le moment dataviz : exemples et démo

À faire (15 min) : section 6 du cahier. Décrivez l'idée, pas encore l'API.

Rencontres d'équipe¶

L'approbation du thème (2 min) se fait dès que possible pendant l'atelier storyboard. La rencontre d'avancement (5 min) a lieu plus tard, pendant les temps de travail.

Pendant les temps de travail, je rencontre chaque équipe, 5 minutes. Ayez à l'écran :

• la trace de votre brainstorm (FigJam ou photos) et le thème choisi;
• vos chapitres : ce que chacun raconte;
• votre storyboard, même commencé.

Devoirs¶

• Entrée au journal de bord :
  • les 5 questions et vos réponses
  • 2 ou 3 animations qui vous inspirent, notées personnellement au cours 7.2 : pour chacune, le lien de l'exemple, ce qui bouge, ce qui le déclenche, et ce que vous aimeriez emprunter pour votre récit.
  • Un lien vers le brainstorm de votre équipe, fait au cours 7.2 : le lien FigJam, ou un lien vers les photos dans documentation/brainstorm/.
• Terminez
  • le cahier de charge (excepté section 8),
  • le storyboard
  • et votre journal personnel,
• puis poussez le tout sur GitHub avant vendredi 23 octobre, 23 h 59. Liste de vérification de la remise 1