Cours 3.2¶

Projet portfolio¶

Projet Portfolio : consignes sommaires

Projet Portfolio : consignes complètes (en détail)

Instructions de la Remise 1 : Planification et design (gr. Enric 14 sept. | gr. Lora 17 sept.)

Aujourd'hui¶

• Retour sur Figma (FR, Make > Design, partager le lien avec l'enseignante)
• Tour d'horizon : les 4 choix technologiques à justifier dans PLANIFICATION.md
• Finaliser vos maquettes Figma (mobile + desktop)
• Finaliser PLANIFICATION.md
• Journal de bord

Workflow design assisté par IA : diverger, copier, raffiner

Retour sur Figma¶

Changer la langue de Figma en français¶

Sur le site web¶

1. Aller sur le site Figma (pas l'app) et défiler jusqu'au pied de page et vous verrez la liste déroulnante pour changer la langue.
2. Sélectionner Français.

Dans l'application Figma¶

Figma Make vers Figma Design¶

Partager le lien de votre design Figma avec votre enseignante¶

1. Inviter votre enseignante à votre projet Figma (marie-michelle.ouellet@cmontmorency.qc.ca) avec le rôle Can edit (peut éditer).
2. Copier le lien de partage de votre design Figma et l'ajouter dans le fichier README.md de votre dépôt GitHub.

Les 4 choix technologiques de votre portfolio 🎯¶

Pour chacun des 4 éléments suivants, vous devez choisir une approche et l'expliquer dans PLANIFICATION.md. Il n'y a pas de mauvais choix, seulement des choix pas justifiés. L'objectif aujourd'hui : que vous ayez une idée claire de comment chaque option fonctionne concrètement, avant de trancher.

1. Gestion des données 🗂️¶

Vos projets (titre, description, image, catégorie, lien) doivent être séparés du reste du HTML et chargés de façon asynchrone en JavaScript.

Trois familles d'options :

2. Animations 🎬¶

Peu importe l'outil, précisez dans PLANIFICATION.md : quoi vous voulez animer, comment, et sur quel événement (scroll, survol, clic).

Documentez votre idée dans PLANIFICATION.md avec ce format:

- **Élément à animer :** [ex. les cartes de projets]
- **Type d'animation :** [ex. fondu et léger déplacement vers le haut]
- **Déclencheur :** [ex. apparition au défilement, survol, clic]

Des exemples pour s'inspirer d'animations web¶

• Best Parallax Websites , collection vivante de sites primés, plusieurs variantes de l'effet
• Best Scroll Websites , sites où le défilement est au cœur de l'expérience
• Collection Parallax : variantes , scroll horizontal, navigation canvas, typographie à glisser
• 20 GSAP ScrollTrigger Examples , aperçus en direct avec courte explication de chaque effet
• Documentation officielle ScrollTrigger , référence technique pour plus tard dans la session

3. Structure de navigation 🧭¶

Deux grandes familles, selon votre concept :

One-pager avec pop-up

Toutes les données sont chargées une seule fois au chargement de la page. Un clic sur un projet ouvre une fenêtre modale (ex. l'élément natif <dialog>) qui affiche le détail en plus gros plan, sans changer de page.

One-pager avec carousel

Toutes les données sont chargées une seule fois, les projets défilent dans un carrousel (un projet visible à la fois, flèches ou points de navigation). Pas de fenêtre modale, le détail du projet est directement dans la carte qui défile.

Multipages avec paramètre d'URL

La page d'accueil liste les projets (cartes), chacune pointant vers une page comme projet.html?id=cafe-du-coin. La page projet lit ce paramètre dans l'URL et va chercher, dans le même JSON (ou la même source), les données du projet correspondant pour les afficher.

// Dans projet.html
const params = new URLSearchParams(window.location.search);
const idProjet = params.get('id'); // "cafe-du-coin"

4. Hébergement 🌐¶

Nom de domaine personnalisé (optionnel) : au lieu du sous-domaine gratuit, vous pouvez acheter un vrai domaine (quelques dollars par année, chez un registraire comme Namecheap ou OVH) et le pointer vers l'hébergeur choisi. Pas exigé pour ce projet, mais bon à savoir pour votre futur portfolio professionnel.

Peu importe vos choix, le principe reste le même 🔁¶

Que vos données viennent d'un fichier JSON ou d'une base de données en ligne, le patron de code est identique. Deux syntaxes possibles, selon celle que vous avez déjà vue, choisissez celle avec laquelle vous êtes le plus à l'aise :

Avec async/await

async function chargerProjets() {
  const reponse = await fetch('projets.json'); // ou une URL d'API
  const projets = await reponse.json();
  return projets;
}

Avec .then()

function chargerProjets() {
  return fetch('projets.json') // ou une URL d'API
    .then(reponse => reponse.json())
    .then(projets => projets);
}

Les deux font exactement la même chose : fetch() retourne une promesse, async/await l'écrit de façon plus linéaire, .then() l'enchaîne étape par étape. Aucune n'est « meilleure », c'est une question de préférence et de ce que vous avez déjà pratiqué.

Seule l'adresse dans fetch() change. On reverra ce mécanisme en détail au bloc 5.1, c'est votre aide-mémoire JS qui couvre déjà fetch/async :

• Aide-mémoire JavaScript de JF Cartier
• Promesse JavaScript
• Fetch API
• Structure du JSON et accès aux propriétés

Maintenant, à vous 📝¶

Avec ces 4 choix plus clairs, terminez vos maquettes Figma et complétez PLANIFICATION.md. Je circule pour répondre aux questions.

Devoirs 📓¶

Portfolio : remise 1¶

• Consignes complètes (en détail)
• Consignes sommaires visuelle

À remettre pour la semaine prochaine (gr. Enric 14 sept. | gr. Lora 17 sept.) :

• Github initialisé, privé, avec invitation de l'enseignante comme collaboratrice.
  • Structure de dossiers cohérente et convention de nommage uniforme.
  • Fichiers README.md, PLANIFICATION.md et JOURNAL.md créés.
  • Commits réguliers, fréquents et bien nommés.
• Fichier PLANIFICATION.md complété, incluant la justification des choix technologiques, de design et d'animations prévues.
• Design mobile et desktop (Figma Design), adapté à votre style et à votre persona. Vous devrez l'exporter en PDF et le déposer dans le dépôt GitHub.
• JOURNAL.md:
  • Journal de bord documentant toutes les étapes du processus, incluant les versions initiales générées par Figma Make ou Stitch, et les modifications apportées.
  • Répondre aux 5 questions du premier bloc du projet.
  • Inscrire toute question posée à l'IA, avec date, prompt, outil utilisé et résultat obtenu.

Important: Tout pousser sur votre dépôt GitHub avant la date limite et remettre le lien (URL) du dépôt dans le devoir sur TEAMS.