Projet 1 : Votre Portfolio en ligne
40% de la note finale
Évaluation individuelle
Remise finale semaine 7
Vous êtes un·e intégrateur·rice multimédia junior sur le point de postuler pour un premier stage dans une agence web ou une entreprise créative. Pour convaincre un employeur potentiel de vous accorder une entrevue, vous devez lui soumettre votre portfolio en ligne : votre carte de visite numérique.
Soumettre un portfolio, ce n'est pas seulement livrer un beau site. C'est démontrer que vous savez concevoir un produit web de qualité professionnelle, de la planification initiale jusqu'au contrôle de la qualité finale, en prenant des décisions techniques réfléchies et en étant capable de les justifier.
À la mi-session, vous présenterez votre portfolio devant un jury composé de votre enseignante et, si possible, d'un·e professionnel·le invité·e du milieu, qui incarnera le rôle de l'employeur potentiel.
Responsabilités
Étudiant·e
- Planifier et justifier ses choix technologiques
- Concevoir les maquettes
- Développer et commenter le code
- Tenir un journal de bord
- Utiliser Git
- Mener le contrôle de qualité
- Déployer
- Défendre devant le jury
Enseignante
- Fournir consignes, journal et grilles
- Offrir la rétroaction (collective puis individuelle)
- Coordonner l'invité·e
- Évaluer selon la grille critériée
Invité·e (le cas échéant)
- Jouer le rôle de l'employeur·e potentiel·le
- Poser des questions sur les choix de conception
- Offrir une rétroaction informelle du milieu
Consignes
Format du livrable : un site fait entièrement à la main, sans CMS ni thème préfabriqué. C'est ce qui démontre le mieux que vous savez concevoir et coder un site de zéro, une compétence directement valorisée par les employeurs du milieu.
Base obligatoire pour tous
- Dépôt GitHub, commits réguliers et bien nommés
- Site responsive (mobile et desktop), sans bogue majeur
- Code commenté dans vos propres mots
- Déploiement en ligne (GitHub Pages recommandé)
- Planification documentée (PLANIFICATION.md)
- Journal de bord complété (JOURNAL.md)
- Démarche de contrôle de qualité documentée
Vos choix technologiques : à justifier dans votre planification
Pour chacun des éléments suivants, choisissez l'approche qui convient le mieux à votre projet et expliquez la raison dans PLANIFICATION.md :
Données
BD ou fichier externe (JSON), affiché de façon asynchrone.
Animations
GSAP, une autre librairie, ou CSS pur. Précisez quoi animer, comment, sur quel événement.
Navigation
One-pager, multipages, ou autre.
Hébergement
GitHub Pages ou un autre service.
Journal de bord : 5 questions à chaque bloc de cours
- 1Qu'est-ce que j'ai accompli depuis le dernier bloc?
- 2Quelle a été ma principale difficulté et comment je l'ai surmontée?
- 3Qu'est-ce que j'ai appris que je ne savais pas avant?
- 4Quelle est ma prochaine étape concrète?
- 5Est-ce que j'ai utilisé l'IA? Si oui, pour quoi et qu'est-ce que ça m'a appris?
Auto-évaluation
À l'aide de la grille critériée fournie, vous évaluez vous-même votre portfolio avant la remise 3.
Tests par les pairs
Un·e collègue teste votre portfolio à partir d'une grille guidée; vous documentez les correctifs apportés.
Utilisation de l'IA
Utilisation de l'IA : permise pour vous aider à apprendre et à déboguer, mais pas pour remplacer votre compréhension. Tout usage doit être documenté dans le journal de bord. Vous devez en tout temps être en mesure d'expliquer et de modifier votre code en direct.
Comment citer?
Pour ce cours, cette citation se fait directement dans votre JOURNAL.md.
Vous ne devez pas inclure les autocomplétions de Copilot (VS Code) dans votre journal, mais vous devez inclure toute question posée à l'IA que ce soit avec Co-Pilot intégré VS Code ou autre outil IAG (Figma, ChatGPT, etc.).
Éléments à inclure
-Date : La date précise du prompt ou de la question posée à l'IA.-Prompt : Le texte exact utilisé en italique.
-Outil : Le nom du logiciel utilisé.
-Résultat : Une description de ce que l'IA a généré, et ce que vous avez fait avec ce résultat (accepté tel quel, modifié, rejeté, etc.).
Critères d'évaluation
40%
de la note finale du cours Web 5, évalué de façon individuelle (100% de la note est individuelle).
Votre portfolio est évalué selon la grille critériée suivante. La qualité de la langue est évaluée séparément. Total : /40.
1Conception structurée et complète du projet
| Indicateur | Insuffisant | Acceptable | Très bien | Excellent |
|---|---|---|---|---|
| Proposition d'une interface cohérente sur le plan visuel (palette de couleurs, typographie, hiérarchie visuelle) qui reflète l'identité du portfolio et facilite la lecture du contenu. | L'interface présente une cohérence visuelle insuffisante (palette de couleurs, typographie, hiérarchie visuelle) : les choix nuisent à la lecture du contenu ou ne reflètent pas l'identité du portfolio. | L'interface présente une cohérence visuelle partielle (palette de couleurs, typographie, hiérarchie visuelle) : certains éléments facilitent la lecture du contenu, mais l'ensemble manque d'harmonie. | L'interface présente une cohérence visuelle satisfaisante (palette de couleurs, typographie, hiérarchie visuelle) qui reflète l'identité du portfolio et facilite la lecture du contenu. | L'interface présente une cohérence visuelle remarquable (palette de couleurs, typographie, hiérarchie visuelle) qui reflète clairement l'identité du portfolio et optimise la lecture du contenu. |
| Planification de l'arborescence du site et structuration logique des pages/sections, démontrée par un document de planification. | La structuration des pages/sections est peu logique ou incomplète : le document de planification est absent ou très lacunaire. | La structuration des pages/sections est partiellement logique : le document de planification présente quelques lacunes qui nuisent à la compréhension de l'arborescence. | La structuration des pages/sections est logique et démontrée par un document de planification clair (plan du site, wireframe ou schéma). | La structuration des pages/sections est rigoureusement logique et démontrée par un document de planification complet et précis qui facilite une compréhension immédiate de l'arborescence. |
| Justification adéquate de chaque technologie choisie (langages, librairies, outils) en fonction des besoins spécifiques du projet. | La justification des technologies choisies est absente ou ne tient pas compte des besoins spécifiques du projet. | La justification des technologies choisies est sommaire : le lien avec les besoins spécifiques du projet est établi pour certaines technologies seulement. | La justification de chaque technologie choisie est adéquate et démontre un lien clair avec les besoins spécifiques du projet. | La justification de chaque technologie choisie est rigoureuse et approfondie, démontrant un lien précis et pertinent avec les besoins spécifiques du projet. |
| Organisation des fichiers selon une structure de dossiers cohérente et une convention de nommage uniforme facilitant le repérage des ressources. | La structure de dossiers présente des incohérences et la convention de nommage est peu uniforme, ce qui rend le repérage des ressources difficile. | La structure de dossiers est partiellement cohérente et la convention de nommage est partiellement uniforme, ce qui complique parfois le repérage des ressources. | La structure de dossiers est cohérente et la convention de nommage est uniforme, facilitant le repérage des ressources. | La structure de dossiers est rigoureusement cohérente et la convention de nommage parfaitement uniforme, ce qui rend le repérage des ressources immédiat et intuitif. |
| Traitement optimisé des médias pour le web : format adapté à l'usage, compression appropriée (poids réduit sans perte visuelle notable), dimensions adéquates. | Le traitement des médias n'est pas optimisé pour le web : formats inadaptés, compression absente ou excessive (perte de qualité visible) et/ou dimensions inadéquates. | Le traitement des médias est partiellement optimisé pour le web : certains formats, compressions ou dimensions sont à revoir. | Le traitement des médias est optimisé pour le web : formats adaptés à l'usage, compression appropriée (poids réduit sans perte visuelle notable) et dimensions adéquates. | Le traitement des médias est optimisé de façon exemplaire pour le web : formats parfaitement adaptés, compression maximisée sans aucune perte visuelle perceptible et dimensions précisément adéquates. |
| Justification orale, devant le jury, des choix de conception et de réalisation du portfolio (design, structure, choix techniques), en réponse aux questions posées. | Lors de la présentation devant le jury, la personne étudiante ne parvient pas à expliquer ses choix ou les justifie de façon erronée; elle ne répond pas aux questions ou démontre qu'elle ne maîtrise pas le contenu présenté (par exemple, du code qu'elle ne comprend pas). | Lors de la présentation devant le jury, la personne étudiante explique ses principaux choix et répond aux questions, mais ses justifications restent superficielles ou incomplètes; elle comprend l'essentiel de son travail, avec quelques hésitations. | Lors de la présentation devant le jury, la personne étudiante justifie clairement ses choix de conception et de réalisation et répond aux questions avec assurance; ses explications sont pertinentes et démontrent une bonne compréhension de son travail. | Lors de la présentation devant le jury, la personne étudiante justifie ses choix avec rigueur et nuance, en établissant des liens avec les besoins des personnes représentatives visées; elle répond aux questions avec aisance et démontre une maîtrise complète de son travail, y compris ses choix techniques non évidents. |
2Programmation fonctionnelle et optimale de l'interactivité de l'interface
| Indicateur | Insuffisant | Acceptable | Très bien | Excellent |
|---|---|---|---|---|
| Codification d'une mise en page flexible et adaptative (responsive) assurant un affichage cohérent sur mobile, tablette et ordinateur. | La mise en page est peu adaptative (responsive) et présente des problèmes d'affichage importants sur au moins un type d'appareil (mobile, tablette, ordinateur). | La mise en page est partiellement adaptative (responsive) : l'affichage est cohérent sur certains appareils seulement, avec quelques problèmes visibles. | La mise en page est flexible et adaptative (responsive), assurant un affichage cohérent sur mobile, tablette et ordinateur. | La mise en page est flexible et parfaitement adaptative (responsive), assurant un affichage cohérent et optimisé sur l'ensemble des formats d'écran testés. |
| Programmation d'une navigation fonctionnelle (menu, liens, ancres) et d'éléments interactifs qui répondent correctement aux actions de l'utilisateur, sans erreur bloquante. | La navigation et/ou les éléments interactifs présentent des erreurs bloquantes qui empêchent l'utilisation normale de l'interface. | La navigation et les éléments interactifs fonctionnent globalement, mais présentent quelques erreurs mineures non bloquantes. | La navigation (menu, liens, ancres) et les éléments interactifs sont fonctionnels et répondent correctement aux actions de l'utilisateur, sans erreur bloquante. | La navigation et les éléments interactifs sont entièrement fonctionnels et répondent avec précision et fluidité à toutes les actions de l'utilisateur, sans aucune erreur. |
| Application rigoureuse des normes d'accessibilité WCAG, niveau AA: balises sémantiques HTML5, attributs alt, contraste suffisant, navigation au clavier fonctionnelle. | Les normes d'accessibilité WCAG (niveau AA) sont peu appliquées : les balises sémantiques, les attributs alt, le contraste et la navigation au clavier présentent plusieurs lacunes importantes. | Les normes d'accessibilité WCAG (niveau AA) sont partiellement appliquées : certains éléments (balises sémantiques, attributs alt, contraste, navigation au clavier) sont manquants ou incomplets. | Les normes d'accessibilité WCAG (niveau AA) sont appliquées de façon rigoureuse : balises sémantiques HTML5, attributs alt, contraste suffisant et navigation au clavier fonctionnelle. | Les normes d'accessibilité WCAG (niveau AA) sont appliquées de façon rigoureuse et systématique sur l'ensemble du site, sans aucune exception. |
| Insertion de commentaires pertinents (HTML/CSS/JS) expliquant le rôle des sections principales, des fonctions complexes et des choix techniques non évidents. | Les commentaires dans le code sont rare ou peu pertinents : le rôle des sections principales, des fonctions complexes ou des choix techniques est peu expliqué. | Les commentaires dans le code sont présents mais inconstants : certaines sections principales, fonctions complexes ou choix techniques importants ne sont pas expliqués. | Les commentaires insérés dans le code sont pertinents et expliquent le rôle des sections principales, des fonctions complexes et des choix techniques non évidents. | Les commentaires insérés dans le code sont pertinents, précis et systématiques, expliquant clairement l'ensemble des sections principales, des fonctions complexes et des choix techniques non évidents. |
| Programmation d'un chargement efficace des données du portfolio limitant la duplication de code et le temps de chargement perçu. | Le chargement des données du portfolio est peu efficace : duplication importante de code et/ou temps de chargement perçu élevé. | Le chargement des données du portfolio est partiellement efficace : certaines duplications de code subsistent ou le temps de chargement perçu pourrait être amélioré. | Le chargement des données du portfolio est programmé de façon efficace, limitant la duplication de code et le temps de chargement perçu. | Le chargement des données du portfolio est programmé de façon particulièrement efficace, minimisant la duplication de code et réduisant au maximum le temps de chargement perçu. |
3Contrôle rigoureux de la qualité du portfolio
| Indicateur | Insuffisant | Acceptable | Très bien | Excellent |
|---|---|---|---|---|
| Vérification rigoureuse et exhaustive de l'expérience utilisateur (clarté de la navigation, lisibilité du contenu et attrait visuel) ainsi que du bon fonctionnement des fonctionnalités (liens, formulaires et scripts) auprès d'au moins trois personnes différentes et représentatives, chacune utilisant un navigateur ou un appareil différent. | La vérification de l'expérience utilisateur et du bon fonctionnement des fonctionnalités est sommaire : moins de trois personnes différentes ont participé aux tests et les fonctionnalités ont été testées sur un seul navigateur ou appareil. | La vérification de l'expérience utilisateur et du bon fonctionnement des fonctionnalités est réalisée auprès d'au moins trois personnes différentes, chacune utilisant un navigateur ou un appareil différent, mais la couverture des aspects est partielle. | La vérification de l'expérience utilisateur et du bon fonctionnement des fonctionnalités est rigoureuse et exhaustive, réalisée auprès d'au moins trois personnes différentes, chacune utilisant un navigateur ou un appareil différent. | La vérification de l'expérience utilisateur et du bon fonctionnement des fonctionnalités est rigoureuse, approfondie et systématique, réalisée auprès d'au moins trois personnes représentatives, chacune utilisant un navigateur ou un appareil différent, incluant des cas limites. |
| Rédaction précise et claire d'un rapport de tests indiquant, pour chaque test : le scénario testé, le résultat observé et l'écart par rapport au résultat attendu. | Le rapport de tests est peu précis et peu clair : les éléments essentiels (scénario testé, résultat observé, écart par rapport au résultat attendu) sont manquants pour certains tests. | Le rapport de tests est partiellement précis et clair : certains éléments (scénario testé, résultat observé, écart par rapport au résultat attendu) sont imprécis pour certains tests. | Le rapport de tests est rédigé de façon précise et claire, indiquant pour chaque test le scénario testé, le résultat observé et l'écart par rapport au résultat attendu. | Le rapport de tests est rédigé de façon particulièrement précise et claire, indiquant pour chaque test, avec rigueur, le scénario testé, le résultat observé et une analyse pertinente de l'écart par rapport au résultat attendu. |
| Application de corrections adéquates pour chaque problème identifié, avec description du correctif et validation que le problème est résolu. | Les corrections apportées sont peu adéquates et ciblent partiellement les problèmes identifiés : la description du correctif et la validation de la résolution est peu développées. | Les corrections apportées sont partiellement ciblées : la description du correctif ou la validation de la résolution est partiellement développée. | Les corrections apportées sont ciblées pour chaque problème identifié, avec description du correctif et validation que le problème est résolu. | Les corrections apportées sont ciblées et rigoureuses pour chaque problème identifié, avec une description précise du correctif et une validation systématique de sa résolution. |
Modalités d'évaluation et dates de remise
Remises formatives : ne comptent pas dans la note finale
Ces deux étapes vous permettent de recevoir des rétroactions concrètes et d'ajuster votre travail avant la remise finale, c'est là que se construit la qualité de votre portfolio.
1
Enric : 14 sept · Lora : 17 sept
Planification et design
2
Semaine 6 · 2 oct
Version Beta
- Dépôt GitHub initialisé
- Moodboard
- Maquettes visuelles mobile et desktop (Figma)
- Lien de la maquette Figma partagée avec la professeure via un lien dans le README.md
- Justification des choix technologiques (PLANIFICATION.md)
- Idées d'animation documentées (PLANIFICATION.md) : quoi animer, comment, sur quel événement
- Plan de contenu et architecture du site
- Journal de bord complété jusqu'à ce point (JOURNAL.md)
- Rétroaction formative individuelle : groupe d'Enric le 14 septembre, groupe de Lora le 17 septembre
- Version Beta déployée et fonctionnelle en ligne
- Grille de validation qualité amorcée
- Lancement des tests par les pairs cette semaine-là (résultats et correctifs à documenter pour la remise finale)
Remise finale : sommative, compte pour 40% de la note
3
Semaine 7 · mi-session
Lora : 8 oct
Enric : 15 oct
Enric : 15 oct
Portfolio complet et présentation devant le jury.
- Dépôt du site en ligne
- Journal de bord complété pour l'ensemble du projet
- Auto-évaluation à partir de la grille critériée, résultats des tests par les pairs documentés et correctifs apportés
- Présentation devant le jury : groupe de Lora le 8 octobre, groupe d'Enric le 15 octobre (~5 min par étudiant·e, suivies de questions)
- Évaluation du produit final, de la démarche de contrôle de qualité, du processus documenté (journal et commits Git) et de la capacité à justifier ses choix devant un employeur potentiel
Sites de référence d'inspiration
Inspirations graphiques / web design
Références intemporelles
Exemples de portfolios d'anciens étudiants
- 💼 Portfolio de Émeryk Bélisle
- 💼 Portfolio de Mikael Arseneau
- 💼 Portfolio de Matis Ghariani
- 💼 Portfolio de Anton Nikulin
- 💼 Portfolio de Thearylou Lach
- 💼 Portfolio de Audrey Dandurand
- 💼 Portfolio de Justine Rousseau
- 💼 Portfolio de Victor Gileau
- 💼 Portfolio de Joshua Gonzalez-Barrera
- 💼 Portfolio de Kenza El Harrif
- 💼 Portfolio de Delphine Grenier
- 💼 Portfolio de Ihab Mouhajer
- 💼 Portfolio de Daniel Sébastien Dezemma
- 💼 Portfolio de Sitmonternna Yi
- 💼 Portfolio de Benjamin Ferland