Le récit défilant : consignes complètes¶

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

Le cahier de charges : gabarit et consignes Exemples et inspirations

Présentation de lancement (PowerPoint)

Mise en situation¶

Une organisation (un musée, un organisme, un média, une marque) vous confie un mandat : raconter une histoire sur le web de façon immersive. Pas un article qu'on lit, ni une vidéo qu'on regarde : une expérience que le visiteur fait avancer lui-même en défilant, où le texte, les images, les animations et les données apparaissent au bon moment.

C'est le format des grands récits interactifs des médias en ligne. Exemples à explorer :

• The Pudding : des essais visuels construits sur des données;
• Snow Fall (The New York Times, 2012) : un des premiers récits défilants célèbres.

Ce projet réunit tout ce que vous avez appris : la conception, l'animation, les données, le contrôle de la qualité et le travail d'équipe. C'est aussi une pièce de choix pour votre portfolio.

Le produit¶

Votre récit¶

Un récit sur un thème de votre choix, par exemple :

• une cause (environnement, santé, société);
• un mini-documentaire (un lieu, un événement, une personne);
• une vitrine (un produit, une œuvre, un artiste);
• un explicatif (comment fonctionne quelque chose);
• une fiction (un conte, une légende, une histoire inventée).

Ce qui est obligatoire¶

Les garde-fous¶

Ils existent pour que le projet reste faisable en 8 semaines, à deux.

• Au plus 1 animation « signature » par chapitre, et au plus 2 sections épinglées (pin) dans tout le récit.
• Médias légers : images en WebP, vidéos de 30 secondes au plus (ou hébergées sur YouTube ou Vimeo), 10 Mo au plus pour tout le récit.
• Animer seulement transform et opacity : ce sont les propriétés que le navigateur anime sans ralentir la page.

Mieux vaut 6 chapitres soignés que 8 chapitres bâclés.

Un média animable par personne¶

Chaque personne produit un média préparé pour l'animation, intégré dans un de ses chapitres. Au choix :

On verra en classe comment préparer chacun de ces formats. D'ici là, choisissez le vôtre et inscrivez-le dans le cahier de charges.

Les médias et les crédits¶

• Banques d'images libres permises (ex. Unsplash , Pexels ), selon leur licence.
• Images générées par IA permises, si elles sont citées dans votre journal.
• 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 de la personne | Licence Unsplash | Découpé en 3 calques |
| `renard.svg` | 3 | Firefly | Généré par IA | : | Vectorisé, groupes nommés |

Travailler en équipe, être évalué individuellement¶

Inscrire votre équipe¶

Inscrivez les deux noms de votre équipe et votre thème dans le fichier equipes-recit-defilant.xlsx . Ajoutez le thème dès que je l'ai validé.

Vos zones de responsabilité¶

Dès le cahier de charges, une matrice de responsabilités dit qui possède quoi : chapitres, média animable, composant Vue, fetch externe. C'est elle qui permet de vous évaluer individuellement. Chaque personne doit pouvoir expliquer et modifier tout le code de ses zones.

Git¶

• Un seul dépôt par équipe, privé au départ. Invitez votre coéquipier ou coéquipière et marie-michelle-ouellet comme collaborateurs.
• Des commits réguliers et bien nommés, faits par la personne qui a écrit le code : c'est la trace de votre travail.
• On verra en classe le travail avec des branches par personne.

Journal de bord individuel¶

Chaque personne tient son propre journal : documentation/JOURNAL-prenom.md. Comme au portfolio, à chaque bloc, vous répondez aux 5 questions. Si vous avez utilisé l'IA pour un média, inscrivez-le (date, prompt, outil, résultat).

Votre première entrée contient aussi votre processus créatif :

• 2 ou 3 animations qui vous inspirent, notées seul : le lien, ce qui bouge, ce que vous aimeriez emprunter;
• le lien du brainstorm FigJam de votre équipe. Chacun l'ajoute dans son propre journal, même si c'est le même tableau.

1. Qu'est-ce que j'ai accompli depuis le dernier bloc? (Vous pouvez faire référence à vos commits.)
2. Quelle a été ma principale difficulté et comment je l'ai surmontée?
3. Qu'est-ce que j'ai appris que je ne savais pas avant?
4. Quelle est ma prochaine étape concrète?
5. Est-ce que j'ai utilisé l'IA pour un média? Si oui, lequel, avec quel outil, et qu'est-ce que j'ai préparé moi-même?

L'IA dans ce projet : pour vos médias seulement¶

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

Cette fois, on code sans IA. Au portfolio, l'IA était permise, documentée et comprise. Pour le récit défilant, on fait un essai différent : je veux que vous puissiez coder par vous-mêmes, et que demander à l'IA ne soit pas un réflexe. Chercher, essayer, se tromper, déboguer : c'est comme ça qu'on devient autonome.

Cette règle s'applique jusqu'à nouvel ordre. Si elle change en cours de projet, je l'annoncerai en classe et sur cette page.

{
  "github.copilot.enable": { "*": false }
}

Ce qui est évalué, c'est votre processus. Un projet produit d'un coup ne montre rien de ce que vous savez faire.

• Vous suivez le groupe : chaque étape vue en classe se fait dans votre projet, au même rythme.
• Vous me présentez votre projet à chaque étape : cahier de charges, storyboard, animations, composant Vue, prototype, bêta.
• Une étape sautée est à recommencer. Si je sens qu'une partie a été générée sans passer par les étapes (planifier, coder par incréments, comprendre), je vous demanderai de la refaire. Pas de passe-droit.

Évaluation : 60 % de la note finale¶

La grille critériée détaillée sera publiée avant la remise du cahier de charges.

Calendrier¶

Remise 1 : le cahier de charges (ven. 23 oct., 23 h 59)¶

• Le dépôt GitHub de l'équipe existe, avec votre coéquipier ou coéquipière et marie-michelle-ouellet comme collaborateurs.
• README.md : les noms de l'équipe, le titre et le thème du récit, le lien vers le Figma.
• documentation/CAHIER-DE-CHARGES.md est complet, à partir du gabarit.
• Le storyboard du défilement est dans Figma, et le lien fonctionne (accès donné à marie-michelle.ouellet@cmontmorency.qc.ca).
• Chaque personne a son documentation/JOURNAL-prenom.md, avec les 5 questions de ce premier bloc, ses 2 ou 3 inspirations et le lien du brainstorm FigJam.

Le cahier de charges : gabarit et consignes