Aller au contenu

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

Le cahier de charges

Le gabarit et les consignes, section par section.

Gabarit et consignes

Le moment dataviz

Les ingrédients, des exemples à décortiquer et une démo avec des données réelles.

Le moment dataviz

Les consignes du récit défilant

Le projet au complet : produit, garde-fous, évaluation, calendrier.

Consignes complètes

Avant tout : votre dépôt GitHub

Faites-le en arrivant, un membre de l'équipe suffit :

  1. Rendez le dépôt privé : Settings → General → tout en bas, Danger Zone → Change repository visibility → Make private.
  2. Invitez votre coéquipier ou coéquipière et moi comme collaborateurs : Settings → Collaborators → Add people. Mon nom d'utilisateur : marie-michelle-ouellet.

Sans cette invitation, je ne peux ni voir ni évaluer votre remise du ven. 23 oct.

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

Remise 1 : ven. 23 oct., 23 h 59 (pas de cours ce jour-là)

Cahier de charges complet dans le dépôt, storyboard (lien Figma et documentation/storyboard.pdf), un journal par personne. Liste de vérification de la remise 1

Remises formatives : l'échéance compte

Même si une remise est dite « formative », son échéance compte. Le respect des échéances de toutes les remises du projet (cahier de charges, point de contrôle, prototype, bêta) aura un impact sur votre note finale.

Comme dans le monde professionnel : quand une étape est en retard, c'est toute l'équipe, et tout le projet, qui en souffre.

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

Faites approuver votre thème

Dès que possible pendant l'atelier, venez me voir en équipe (2 minutes) pour faire approuver votre thème, verbalement.

Apportez votre idée résumée en une phrase, et votre brainstorm (FigJam ou photos). Une fois le thème approuvé, inscrivez-le dans le fichier des équipes .

À 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.

{
  "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"
}

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?
  • Un chapitre a-t-il besoin d'un type, pour que le JavaScript sache quoi afficher?

À 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.
  • D'ici vendredi 23 h 59 : terminez le cahier, le storyboard et le journal, puis poussez le tout sur GitHub.