Cours 6.1¶

Tutorat¶

NOM	PLAGE HORAIRE	LIEU	DATES
Alexis Guilbault	Trou horaire : mardi 12 h 30 à 14 h 10	En personne au Centre d'aide C-1602	8 sept. au 8 déc. inclus
Olivier Laliberté	Mercredi soir : 20 h à 21 h 15	En ligne sur Teams : canal Tutorat de l'équipe TIM-Programme TIM	9 sept. au 9 déc. inclus

Projet portfolio¶

Aujourd'hui¶

• Où en êtes-vous? Récap du chargement des données
• 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
• Journal de bord, bloc 2

Où en êtes-vous?¶

Levez la main pour chaque étape atteinte :

1. Ma source de données est prête (au moins un projet dupliqué).
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.

Récap : qui fait quoi¶

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

Charger les données du portfolio Afficher les projets

Besoin de revoir le mécanisme sur un exemple simple? L'exercice « Du JSON à la carte » reste disponible, avec ses solutions.

Atelier supervisé¶

Structure Pomodoro : sprints de 25 minutes, un objectif précis noté dans JOURNAL.md au début de chaque sprint, 2 minutes de bilan, vraie pause.

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.

Devoir¶

Portfolio, pour la remise bêta (vendredi 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.