Cours 6.1¶

Liste de vérification de la remise bêta

Aujourd'hui¶

• Où en êtes-vous?
• Du JSON à la carte, retour sur l'exercice partie 2
• Atelier supervisé : cartes générées + détail d'un projet (avec Alexis, tuteur)
• Animations pilotées par le défilement, en CSS
• Les branches Git, en 10 minutes
• Déployer sur GitHub Pages
• Remise bêta : la liste de vérification
• Devoir: Journal de bord, bloc 2 et remise version bêta

Rappel et mise à jour¶

Projet portfolio¶

Où en êtes-vous?¶

Levez la main pour chaque étape atteinte :

1. Ma source de données est prête (JSON, Airtable ou autre) pour au moins un projet.
2. loadProjects() fonctionne : console.log(projects[0].title) affiche un titre.
3. Mes cartes de projets sont générées en JavaScript.
4. Le détail d'un projet fonctionne (modale ou project.html).

Si vous êtes bloqué à l'étape 1 ou 2, c'est la priorité d'aujourd'hui, avant tout le reste.

Du JSON à la carte: retour sur la partie 2 de l'exercice¶

On révise ensemble la partie 2 de l'exercice, au projecteur : c'est exactement le mécanisme de votre portfolio, en miniature. Suivez ma démo et les explications en détail. Si vous avez déjà terminé l'exercice, passez directement à votre portfolio.

Exercice « Du JSON à la carte », partie 2

1. fetch() + await : les projets apparaissent dans la console.
2. forEach : le titre de chaque projet.
3. Un gabarit littéral : la carte du premier projet dans la page.
4. Toutes les cartes. Puis on ajoute un projet au JSON : une carte de plus, sans toucher au HTML.

Et dans votre portfolio?¶

Le même code, réparti dans 3 fichiers :

Dans l'exercice	Dans votre portfolio	Son travail	Revoir
loadProjects()	js/data.js	Aller chercher les données et les retourner.	fetch et async, erreurs
createProjectCard(project)	js/components/project-card.js	Un projet → le HTML de sa carte.	gabarits littéraux
init()	js/main.js	Attendre loadProjects(), puis insérer les cartes dans la page. Sans oublier d'appeler init();.	init(), forEach, map et join

Seules deux choses changent par rapport à l'exercice : l'adresse du fetch() (votre source) et la structure de la carte (votre design).

Charger les données du portfolio Afficher les projets

Atelier supervisé¶

Structure d'un cycle Pomodoro :

• un objectif précis noté dans JOURNAL.md au début de chaque sprint,
• sprints de 25 minutes super focus sur l'objectif,
• 2 minutes de bilan puis,
• mini pause 5 min (ne quittez pas le secteur, resstez pas loin de la classe).

Et on recommence le cycle...

Objectif de l'atelier, dans cet ordre :

1. Les cartes de projets sont générées à partir de vos données.
2. Le détail d'un projet fonctionne.
3. Le reste de l'intégration HTML/CSS et la version mobile.

Je circule aussi. Un commit par étape terminée.

Animer au défilement, en CSS¶

Le CSS moderne peut faire avancer une animation avec le défilement plutôt qu'avec le temps, sans une ligne de JavaScript. Parfait pour faire apparaître vos cartes de projets.

Animations pilotées par le défilement Voir la démo

Déployer sur GitHub Pages¶

La bêta se remet avec une branche beta, mise en ligne sur GitHub Pages. On fait les étapes ensemble, maintenant, pour régler les problèmes pendant que je suis là. Créez la branche beta seulement quand votre bêta est terminée, au plus tard vendredi avant le début du cours : elle doit contenir votre version finale.

Les branches Git, en 10 minutes Déployer son portfolio sur GitHub Pages

Avant de partir : l'adresse de votre site fonctionne, et elle est inscrite dans votre README.md.

Remise bêta : la liste de vérification¶

Liste de vérification de la remise bêta

Journal de bord, bloc 2¶

C'est la fin du bloc 2 : dans documentation/JOURNAL.md, répondez aux 5 questions (elles sont dans la liste de vérification). Inscrivez aussi chaque prompt IA délibéré depuis la remise 1.

Commit final avant de partir.

Devoirs¶

Portfolio: remise bêta (vend. 2 octobre)¶

Compléter tous les éléments de la liste de vérification de la remise bêta, en particulier :

• les cartes de projets générées à partir de vos données, et le détail d'un projet;
• la remise : push sur main, branche beta, dépôt public et GitHub Pages publié à partir de beta, avant le début du cours vendredi (procédure);
• les 5 questions du bloc 2 dans JOURNAL.md.

Liste de vérification de la remise bêta