Cours 11.1¶
Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails
Exercice : Collection de films
Les 4 notions de votre composant : données, clic, classe dynamique et v-for.
Vos chapitres
Le plus gros du cours : animer vos chapitres pour le prototype.
Le prototype, vendredi
Une démo de 60 secondes de votre récit, sur votre poste. Rien à déposer.
Aujourd'hui¶
- Vos exercices GSAP : auto-validés et poussés sur
main - Vue.js : pourquoi, et les 4 notions de votre composant (20 min)
- Exercice : Collection de films (45 min)
- Dans votre projet : vos chapitres, pour le prototype de vendredi (le reste du cours)
1. Vue.js : pourquoi un cadriciel?¶
Un navigateur de chapitres se fait aussi en JavaScript seul. Vue est là pour deux raisons :
- c'est comme ça que le web se construit : la plupart des interfaces professionnelles utilisent un cadriciel (React, Vue, Svelte), et Vue est la porte d'entrée la plus douce;
- ça change votre façon de coder : au lieu de dire comment changer la page, étape par étape, vous décrivez à quoi elle doit ressembler selon vos données. Vue s'occupe du reste.
2. Les 4 notions de votre composant¶
Pour votre navigateur de chapitres, vous avez besoin de 4 notions, pas plus. Chacune a sa page-sujet, avec des exemples à modifier : relisez-les après le cours, à votre rythme.
1. Les données et l'interpolation : createApp() crée l'app sur une zone du HTML, data() contient ce qui peut changer, et {{ }} l'affiche. Quand la donnée change, le texte change : c'est la réactivité.
2. Les méthodes et le clic : @click appelle une méthode, une action du composant.
3. La classe dynamique : :class ajoute une classe si une condition est vraie. C'est le chapitre actif.
4. La boucle : v-for répète un élément pour chaque élément d'un tableau. C'est la liste des chapitres.
Dans la documentation de Vue , choisissez Options dans le sélecteur Préférence d'API, en haut à gauche : c'est la façon d'écrire Vue de ce cours.
3. Pratiquer : un exercice¶
Seul, dans Classroom 50 : le lien d'acceptation est au début de l'exercice. Gardez les pages-sujets de la section 2 ouvertes à côté.
Auto-validez chaque exercice avant de le remettre
Chaque exercice se termine par une liste Vérifiez votre travail. Avant votre dernier push, testez votre page avec cette liste : chaque énoncé doit être vrai.
Corrigez vos exercices passés
Avec la grille Vérifiez votre travail de chaque énoncé, puis push, chacun dans son dépôt Classroom 50 :
Collection de films (environ 45 min) : les 4 notions, dans l'ordre. Les données et le clic (partie A), la classe dynamique (partie B), puis v-for (partie C). C'est le cœur de votre navigateur de chapitres : un élément actif dans une liste.
Exercice : Collection de films
Ensuite, vos chapitres : c'est le plus important aujourd'hui. Pour pratiquer Vue plus tard, si vous voulez : Tableau NBA et Cheese Kanye says, un premier fetch() vers une API (Application Programming Interface) externe.
4. Dans votre projet¶
D'abord vos chapitres : le prototype de vendredi porte sur les animations de vos chapitres, pas sur Vue.
Phase 1 : vos chapitres en HTML
Le composant Vue, on le construit ensemble vendredi, en direct : la personne responsable l'intégrera ensuite, d'ici la bêta.
Devoirs¶
Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails
D'ici le ven. 13 nov. : le prototype (formatif), en phase 1¶
Rien à déposer : une démo de 60 secondes de votre récit qui défile, sur votre poste, pendant le cours.
- Le récit défile du premier au dernier chapitre, sans erreur dans la console.
- Chaque chapitre a son texte et au moins un média, même provisoires.
- Chaque personne : au moins une animation au défilement, et son travail fusionné dans
main. - Chaque personne : son journal, les 5 questions pour ce bloc 3, sous un titre
## Questions bloc 3(ou###, selon votre structure) qui les sépare des blocs précédents.
Le prototype : ce que je dois voir
Pour vendredi : préparer le choix de votre API¶
La personne responsable de la dataviz relit l'idée de la section 6 du cahier de charges, et arrive vendredi avec deux API candidates, trouvées dans les pistes de la page dataviz.