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 et le scénarimage (storyboard) 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¶

La créativité compte¶

Le cours vise un produit Web créatif et original : c'est écrit dans ses objectifs. Un récit qui coche toutes les exigences, mais qui ressemble à une page Web ordinaire, ne suffit pas.

Ce que je regarde :

• Un angle : votre récit a un point de vue. « Les abeilles », c'est un sujet; « une journée dans la vie d'une abeille ouvrière, racontée par elle », c'est un angle.
• Une identité visuelle : une palette, une typographie et un style d'images choisis pour votre histoire, cohérents du début à la fin.
• Des animations qui racontent : chaque animation signature dit quelque chose de l'histoire. Elle n'est pas là pour décorer.
• Au moins un moment surprenant : un passage que le visiteur n'attend pas d'une page Web.
• Une dataviz qui fait partie du récit : pas un graphique de rapport, mais une donnée qui prend la forme de votre histoire (voir le moment dataviz).

Être créatif, ce n'est pas ajouter des animations : les garde-fous ci-dessous s'appliquent toujours. C'est faire des choix, et les assumer.

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 créditées dans le README.md, avec l'outil comme source.
• 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.
• Une branche par personne, fusionnée dans main par pull request (voir Git en équipe).
• Un fichier CSS et un fichier JS par chapitre, à la personne responsable (voir L'arborescence du dépôt).

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. Les crédits des médias, y compris ceux générés par IA, vont dans le README.md, pas dans le journal.

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. Si j'ai utilisé l'IA comme source pour un média : qu'est-ce que j'ai préparé moi-même, et qu'est-ce que ça m'a appris?

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;
• la trace du brainstorm de votre équipe (voir ci-dessous). Chacun l'ajoute dans son propre journal, même si c'est la même trace pour les deux.

Votre brainstorm : une trace claire, exigée¶

C'est votre processus qui est évalué, pas seulement l'idée finale. Je veux voir comment votre équipe est arrivée à son thème. Cette trace est obligatoire pour la remise 1.

Elle peut prendre deux formes :

• Numérique : un tableau FigJam, partagé avec marie-michelle.ouellet@cmontmorency.qc.ca. Mettez son lien dans votre journal.
• Papier : prenez des photos lisibles de vos feuilles, déposez-les dans le dépôt sous documentation/brainstorm/, et mettez un lien vers ces photos dans votre journal.

Une trace claire montre :

• les idées de départ : au moins 3 idées par personne;
• les idées écartées : ne nettoyez pas, elles font partie du processus;
• le choix final, identifié clairement (encerclé, surligné, déplacé à part).

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¶

Le cahier de charges et le storyboard sont notés dans leur version finale, à la fin du projet, comme au portfolio. D'ici là, ils évoluent avec mes rétroactions.

La créativité compte dans deux volets : la planification (votre concept, votre angle) et le produit final (sa réalisation).

Le respect des échéances¶

À chaque remise du projet (cahier de charges et storyboard, storyboard v2, point de contrôle, prototype, bêta), votre équipe obtient l'un de ces 4 niveaux :

Une remise bâclée vaut presque autant qu'une remise absente. Déposer « quelque chose » pour respecter l'heure ne suffit pas.

Une étape ratée se rattrape en partie : une v2 complète du storyboard (ven. 30 oct.) fait remonter le niveau de la remise du 23 oct. jusqu'à « De bonne foi », jamais jusqu'à « Complet ».

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 remis de deux façons :
  • le lien Figma, dans le README.md et le cahier, avec accès donné à marie-michelle.ouellet@cmontmorency.qc.ca;
  • un export PDF, déposé dans le dépôt : documentation/storyboard.pdf.
• Chaque personne a son documentation/JOURNAL-prenom.md, avec les 5 questions de ce premier bloc, ses 2 ou 3 inspirations et la trace du brainstorm (lien FigJam, ou lien vers les photos dans documentation/brainstorm/).

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

Storyboard v2 (ven. 30 oct., 23 h 59)¶

Après nos rencontres du mer. 28 oct., vous reprenez votre storyboard avec les exigences précisées : un cadre mobile pour chaque cadre desktop, le texte de chaque chapitre placé dans le cadre (en lorem ipsum), et la fiche d'annotation complète.

Le storyboard : exigences et cadres modèles