Présentation du portfolio devant le jury¶
L'essentiel en 3 points
- Environ 7 minutes pour présenter votre portfolio, puis les questions du jury. Votre site en ligne est votre support: pas besoin de diapos.
- Le jury évalue le contenu (vous, vos projets, votre processus créatif) et le contenant (le design, le code, la qualité du site). Votre page de projet qui montre le processus créatif est le cœur de la présentation.
- Après les commentaires, vous rejoignez Marie-Michelle en retrait, seul à seul, pour 3 minutes de questions sur votre code. Préparez-vous à le montrer, à l'expliquer et à le modifier en direct, Copilot fermé, à partir de demandes pigées au hasard.
Plan global de la journée de présentation¶
Pendant qu'un étudiant répond aux questions de code en retrait, avec Marie-Michelle, l'étudiant suivant se prépare en avant. Environ 11 min 30 par étudiant (pause de 10 minutes après le 9e étudiant).
| Étape | Où | Temps | Ce qui se passe |
|---|---|---|---|
| Mise en place | En avant, poste de l'enseignante | 3 min | Pendant les questions de code de l'étudiant précédent : ouvrir les onglets (site en ligne, page du projet vedette, fichier QA, Figma) |
| Présentation | En avant, devant la classe | 7 min | Les parties des consignes, avec le projet vedette et son processus créatif au centre |
| Commentaires du jury | En avant, devant la classe | 1 min 30 | Recevoir les commentaires et critiques constructives du jury (Lora, Enric, Marie-Michelle), les noter en vue d'améliorer et de peaufiner le projet |
| Questions de code | En retrait, avec Marie-Michelle | 3 min | Pige aléatoire : montrer et expliquer, puis modifier en direct (une modification CSS et une modification JS) |
| Total | 11 min 30 | La mise en place de l'étudiant suivant se fait pendant vos questions de code |
Commentaires du jury : sur place, puis par écrit
IMPORTANT: Après la présentation, le jury peut ajouter des questions et des commentaires par écrit dans les jours qui suivent sur un Devoir Teams associé dans l'équipe Web 5.
Vous devez les consulter, répondre aux questions s'il y a lieu, puis confirmer que vous en avez pris connaissance. Plus de détails suivront...
Dates¶
| Groupe | Présentation devant le jury |
|---|---|
| Gr. Lora | jeudi 8 octobre |
| Gr. Enric | jeudi 15 octobre |
La structure de votre propre présentation (7 min)¶
| Temps | Partie | Ce que le jury veut voir et entendre |
|---|---|---|
| 0:30 | 1. Qui et pour qui | - Qui vous êtes, ce que vous aimez faire, le stage que vous visez. - À qui s'adresse votre portfolio (votre persona, le type d'employeur visé). |
| 1:15 | 2. Le tour du site | Un parcours rapide sur l'adresse en ligne : - l'accueil, - la liste des projets, - la section Compétences, - la section À propos. - La section Contactez-moi - Si applicable, montrez où on on accède à votre CV et votre démo reel. |
| 0:45 | 3. Le tour du site version MOBILE | Un parcours rapide du site en version mobile : - l'accueil, - la liste des projets, - la section Compétences, - la section À propos, - La section Contactez-moi. |
| 2:00 | 4. Le détail de votre projet vedette et son processus créatif | Ouvrez la page de projet qui présente votre processus complet. Dans vos mot racontez-le (sans le lire intégralement): - le point de départ, - la recherche, - les essais, - les choix, - le résultat. C'est la partie la plus importante. |
| 1:00 | 5. La conception du portfolio | - L'identité visuelle (couleurs, typographie, ambiance) et pourquoi elle vous représente. - Ce qui a changé entre la maquette Figma et le site, et pourquoi. |
| 1:00 | 6. La réalisation et la qualité | - Un choix technique justifié (source de données, animations, structure de navigation ou hébergement). - Un défi rencontré et comment vous l'avez résolu. - Un écart trouvé par vos testeurs lors du QA, son correctif et sa validation. |
| 0:30 | 7. Comment vous démarquez-vous | Selon-vous, de quelle façon vous croyez vous démarquer avec ce portfolio, qu'est-ce qui captera l'oeil ou l'instinct de l'employeur potentiel? |
La page du processus créatif
C'est elle que le jury regarde le plus longtemps. Elle doit pouvoir se lire seule, comme si un employeur la découvrait sans vous : les étapes dans l'ordre, des images de travail (croquis, essais, versions), et quelques phrases qui expliquent vos décisions.
Pendant la présentation, faites-la défiler en racontant : ne lisez pas le texte affiché.
Les questions du jury¶
Après votre présentation, le jury peut vous demander des questions, ou demandes de précision, par exemple :
- Montrer dans le contenu: « Où se trouve votre objectif de carrière? Selon vous, est-il suffisemment mis en valeur? ».
- Justifier un choix : « Pourquoi cette palette de couleur? », « Pourquoi Airtable plutôt qu'un fichier JSON? ».
- Montrer dans le code : « Où sont chargés vos projets? », « Où est le style de vos cartes? ».
- Modifier en direct dans VS Code : « Changez la couleur d'accent », « Ajoutez l'année sur chaque carte de projet ».
- Expliquer votre démarche : « Comment avez-vous testé votre site? », « Qu'est-ce qu'un de vos testeurs a trouvé? ».
Les questions de code : en retrait, par pige
Les demandes montrer, expliquer et modifier en direct se font en retrait, seul avec Marie-Michelle, pendant 3 minutes. Elles sont pigées au hasard, devant vous, dans trois banques de difficulté équivalente :
- Montrer et expliquer une partie de votre code;
- Une modification CSS (ex. changer l'espacement entre les cartes);
- Une modification JS ou des données (ex. afficher une nouvelle propriété sur vos cartes).
Si une pige ne s'applique pas à votre portfolio, on repige. Vous pouvez consulter votre propre code, mais ni Copilot ni Internet. On évalue votre compréhension, pas votre vitesse : savoir où aller et quoi changer compte, même sans finir.
C'est l'indicateur « Justification orale devant le jury » de votre grille d'évaluation de Web 5 (critère 1). Au niveau Excellent, vous reliez vos choix aux besoins des personnes que vous visez, et vous expliquez aussi vos choix techniques non évidents.
Le code généré avec l'IA
Il est permis, mais vous devez pouvoir l'expliquer et le modifier comme le reste de votre code. Un code que vous ne comprenez pas se voit tout de suite devant un jury : c'est exactement ce que décrit le niveau Insuffisant de l'indicateur.
Avant de passer¶
- Votre site est publié sur la branche
main, et l'adresse en ligne fonctionne. - Vous vous êtes chronométré au moins une fois, à voix haute : environ 7 minutes, pas 12.
- Vous avez testé votre site sur un poste de la classe, pas seulement sur le vôtre.
- Ces onglets sont ouverts et prêts :
- le site en ligne, sur la page d'accueil;
- la page de votre projet vedette;
- VS Code, avec votre dépôt;
- votre fichier QA (
qa-prenom-nom.xlsx); - votre maquette Figma.
- Vous avez préparé une phrase de départ pour chaque partie. Le reste, dites-le avec vos mots, sans lire.
- Votre dernier commit est poussé avant l'heure de remise du devoir Teams : c'est cette version de votre code qui sera ouverte pour les questions.
- Airtable ou Google Sheets? Ayez votre téléphone, connecté à votre source de données : c'est là que vous la modifierez pendant les questions de code.
- Vous savez répondre en une phrase à : « Quel est le choix dont vous êtes le plus fier ou la plus fière? » et « Si vous aviez une semaine de plus, que changeriez-vous? »
Conseils¶
- Parlez à un employeur, pas à votre enseignante : c'est le rôle que joue le jury.
- Montrez, ne décrivez pas : « Regardez la carte quand je réduis la fenêtre » vaut mieux que « mon site est responsive ».
- Un écart trouvé en QA n'est pas un aveu d'échec : c'est la preuve que votre démarche fonctionne. Présentez-le avec son correctif.
- Si quelque chose brise pendant la démo, restez calme et expliquez ce qui devrait se passer. Savoir diagnostiquer, ça aussi, ça s'évalue.