CMN2003 — Communication et ergonomie des technologies de pointe
Présentation finale 10 % · Prototype final + documentation 25 %Cette remise rassemble les deux dernières évaluations du cours : la présentation finale de votre projet (10 %) et le prototype STYLY final accompagné de sa documentation et d'un plan d'archivage (25 %). Vous avez déjà tout le matériel nécessaire : votre dossier de recherche (Éval 1) et votre plan d'exposition (Éval 2). Cette dernière étape consiste à finir, documenter et archiver.
Tout se dépose dans un formulaire Microsoft Forms unique (lien plus bas), avant le même délai. Nouveauté : votre documentation prendra la forme d'une petite page web publiée en ligne (gratuite, en glisser-déposer) qui survivra à STYLY si jamais la plateforme disparaît.
Les nouveaux fichiers de remise seront ajoutés à votre dossier OneDrive déjà partagé pour le cours, le même espace où se trouve déjà votre journal de bord. Vous n'avez donc pas à chercher un nouveau dossier ailleurs ni à me demander un nouveau partage.
Dans ce dossier, vous trouverez les nouveaux fichiers suivants :
.md), souvent nommé avec CONTEXTE_ET_PROMPT ;Gabarit_Projet_individuel_CMN2003_H26.docx.Le fichier personnalisé pour Copilot est votre point de départ pour le site Netlify. Déposez ce fichier dans Copilot : il contient votre contexte, les rappels de vos évaluations précédentes et les consignes qui permettront à Copilot de produire le fichier index.html et la petite fiche à copier dans le gabarit Word. Vous ne partez donc pas d'une page blanche.
La présentation finale a plusieurs formes acceptées. Lisez les trois scénarios ci-dessous et identifiez le vôtre.
Vous n'avez rien à refaire pour la présentation. Votre note de 10 % est déjà basée sur votre prestation en classe. Concentrez-vous uniquement sur les livrables 1 à 3 ci-dessous (prototype final, site de documentation, gabarit projet).
Note : il est entendu que les scènes présentées le 20 avril étaient encore en développement. La note de présentation tient compte de cette étape ; le prototype final (Livrable 1) sera évalué séparément.
Vous n'avez pas à réenregistrer. Votre vidéo déjà soumise sera utilisée pour la note de présentation finale. Vérifiez simplement que le lien fonctionne toujours et que vous m'avez bien donné l'accès.
Vous devez enregistrer une présentation et la soumettre avant le 29 avril 23 h 59. Suivez les consignes du livrable 0 ci-dessous (même format que l'enregistrement de l'Éval 2, mais cette fois sur la version finale de votre scène).
Tout se dépose dans un seul formulaire Microsoft Forms, avant le mercredi 29 avril 2026 à 23 h 59.
Lien du formulaire de remise : https://forms.office.com/r/sgRqELfGFL
Un enregistrement d'écran avec voix hors champ, sur la version finale de votre scène STYLY. Même format que l'Éval 2 : navigation commentée dans la scène. Cette fois, mettez l'accent sur :
Outils acceptés : Canva, Clipchamp, Loom, QuickTime, OBS, ou tout autre outil dont la sortie est partageable par lien public. Maximum 10 minutes. Pas de texte lu mot à mot.
Le lien vers votre scène STYLY finalisée, publiée et navigable. Par rapport à l'Éval 2, on attend cette fois :
gallery.styly.cc), inscrivez un titre clair et descriptif du projet (pas seulement votre nom ou un mot générique comme « Scène 1 ») et une description courte (2 à 4 phrases, environ 40–100 mots) qui annonce le sujet, le public visé et l'intention de l'exposition. C'est ce que la personne qui ouvre votre lien voit en premier : ces deux champs servent de seuil d'entrée dans votre projet.Qu'est-ce qu'un « panneau d'interprétation (POI) » ? Dans une exposition réelle, devant un point d'intérêt (un objet, une œuvre, une zone), on trouve un panneau qui combine un visuel (image, photographie, illustration, schéma) et un court texte (typiquement 80–180 mots) qui explique au public ce qu'il regarde, son contexte, son enjeu, ou ce qu'il faut en retenir. C'est exactement ce que je vous demande d'introduire dans votre scène : au moins 2 panneaux, placés à des endroits stratégiques de votre parcours (entrée, point culminant, zone thématique). Sans panneaux, votre scène reste un décor ; avec des panneaux, elle devient une exposition.
Comment fabriquer un panneau dans STYLY : ce sont des plans 2D (planes) sur lesquels vous appliquez une image. L'image peut être :
Le texte peut être intégré directement dans l'image ou placé sur un second plan adjacent. Veillez à ce que la taille du texte reste lisible une fois en scène (pas trop de mots, contraste fort, police sans empattement).
Documentation obligatoire des images générées par IA. Chaque image issue d'une IA générative doit être documentée sur votre site Netlify (Livrable 2), dans une section dédiée. Pour chaque image : le nom du fichier ou de la capture, l'outil utilisé (ChatGPT, Copilot, Gemini, Midjourney, Meshy, etc.) et sa version si vous la connaissez, le prompt exact que vous avez utilisé, et la date approximative de génération. Cette transparence n'est pas une formalité : elle fait partie de votre compétence professionnelle.
Qu'est-ce qui compte comme « animation » ? Toute transformation visible d'un objet de votre scène : rotation, orbite, fondu, déplacement, effet appliqué depuis le menu STYLY. Un actif 3D déjà animé importé depuis Sketchfab ou Mixamo (personnage qui marche, machine qui tourne) compte aussi. L'objectif est qu'il y ait du mouvement intentionnel dans la scène, pas une statue figée.
Où trouver vos actifs 3D et médias :
Conseils performance (pour respecter les ~30 secondes de chargement) :
Une petite page web que vous publiez gratuitement sur Netlify Drop (instructions plus bas). Cette page est votre plan d'archivage : si STYLY disparaît un jour, votre projet existe encore.
Vous n'avez pas à écrire ni à modifier du code HTML vous-même. Le fichier personnalisé reçu dans votre dossier OneDrive sert à vous faire poser les bonnes questions, à organiser vos captures d'écran, puis à produire un fichier téléchargeable nommé index.html. Quand Copilot vous demande des images, joignez-les dans la conversation : il utilisera leurs noms exacts pour préparer le site.
La page doit contenir :
Dans le formulaire de remise, collez le lien Netlify final (de la forme https://nom-projet-12345.netlify.app).
Un document Word d'une seule page qui décrit votre projet de manière standardisée. Les meilleurs projets seront sélectionnés pour figurer sur le site institutionnel du programme. Le gabarit est en partie prérempli (compétences visées, année, professeure superviseure, nom du cours).
Pour éviter de refaire le même travail deux fois, utilisez les mêmes éléments que pour votre site Netlify :
Copilot vous donnera une petite fiche à copier dans le gabarit : titre, nom, synopsis et image recommandée.
Utilisez le fichier Gabarit_Projet_individuel_CMN2003_H26.docx placé dans votre dossier OneDrive individuel, le même dossier où se trouve déjà votre journal de bord.
Netlify Drop permet de publier un site HTML simple en glissant un dossier sur une page web. Gratuit, sans connaissance technique particulière.
Ouvrez votre dossier individuel déjà partagé pour le cours, le même que celui de votre journal de bord. Prenez le fichier personnalisé pour Copilot (.md) et déposez-le dans Copilot avec votre compte UOF. Répondez aux questions, joignez vos captures quand Copilot les demande, puis téléchargez le fichier index.html produit à la fin. Ne modifiez pas ce fichier à la main.
Sur votre ordinateur, créez un dossier nommé par exemple site-cmn2003. Placez dans ce dossier le fichier index.html téléchargé depuis Copilot. Ce dossier de site peut rester sur votre ordinateur : il sert seulement à préparer le dépôt Netlify.
Copilot vous dira exactement quels fichiers image placer dans le dossier, avec leurs noms exacts. Placez ces images dans le même dossier que index.html. Ne changez pas leur nom après la production du fichier.
Allez à app.netlify.com/drop. Glissez-déposez votre dossier complet (pas le zip : le dossier décompressé) dans la zone indiquée. Créez un compte gratuit avec votre courriel UOF si demandé.
Après quelques secondes, Netlify vous donne une URL du type https://nom-aleatoire-12345.netlify.app. Ouvrez ce lien pour vérifier que le titre, le texte et les images apparaissent. Copiez ensuite ce lien et collez-le dans le formulaire de remise.
Vous aurez besoin de 3 à 5 bonnes captures d'écran de votre scène STYLY pour le site de documentation et le gabarit. Voici comment faire une capture partielle (juste la portion que vous voulez, sans les barres du navigateur).
Appuyez sur Cmd + Shift + 4. Le curseur devient un réticule. Cliquez et glissez pour sélectionner la zone à capturer. L'image est sauvegardée sur le bureau au format PNG.
Appuyez sur Cmd + Shift + 5 pour faire apparaître une barre d'outils en bas de l'écran. Choisissez l'option de capture rectangulaire, ajustez la zone, cliquez sur Capturer.
Appuyez sur Win + Maj + S. L'écran s'assombrit et le curseur devient un réticule. Cliquez et glissez pour sélectionner la zone. La capture est copiée dans le presse-papiers : collez-la dans Paint, l'application Photos, ou directement dans un mail pour l'enregistrer.
Ouvrez l'application Outil Capture, cliquez sur Nouveau, choisissez le mode Rectangle, sélectionnez votre zone, puis Fichier → Enregistrer sous.
Appuyez sur Maj + Ctrl + la touche « Afficher les fenêtres » (l'icône avec des rectangles, en haut du clavier). Une barre d'outils apparaît. Choisissez Capturer une zone partielle, glissez pour sélectionner, puis Capturer.
Contrairement à l'Éval 2, les liens inaccessibles seront traités comme des travaux non remis. Vérifiez vos liens avant de déposer.
Deux notes distinctes seront attribuées : une pour la présentation finale (10 %) et une pour le prototype final + documentation + archivage (25 %).
Faites défiler le tableau horizontalement sur petit écran →
| Critère | Excellent (A) | Satisfaisant (B) | En développement (C) | Insuffisant (D/F) |
|---|---|---|---|---|
| Clarté et appropriation (10 %) | Présentation fluide et structurée ; les choix sont expliqués avec les concepts du cours ; le lien recherche-design est clair. | Présentation compréhensible avec quelques flottements ; concepts mobilisés partiellement. | Décrit ce qu'on voit sans expliquer pourquoi ; concepts du cours peu présents. | Présentation incomplète, inaccessible, ou sans lien clair avec le projet. |
Faites défiler le tableau horizontalement sur petit écran →
| Critère | Excellent (A) | Satisfaisant (B) | En développement (C) | Insuffisant (D/F) |
|---|---|---|---|---|
| Scène STYLY finale (10 %) | Scène aboutie, parcours cohérent, exigences enrichies (actifs, médias, animations, éclairage), titre descriptif et description (2–4 phrases) renseignés dans les métadonnées STYLY, au moins 2 panneaux d'interprétation (POI) avec image et texte substantiel, élément d'accueil clair au point de départ, accessible, performante. | Scène fonctionnelle, la plupart des exigences respectées, titre et description présents mais sommaires ou génériques, 2 panneaux d'interprétation présents mais peut-être légers en contenu, accueil présent mais discret ; quelques zones inachevées. | Scène incomplète ou peu modifiée par rapport à l'Éval 2 ; titre par défaut (« Scène 1 », nom d'utilisateur) ou description vide, panneaux d'interprétation absents ou réduits à un titre décoratif, pas d'élément d'accueil identifiable au point de départ. | Scène non fonctionnelle, lien brisé, exigences minimales non respectées, aucun titre ni description renseignés, ou aucun panneau d'interprétation et aucun élément d'accueil. |
| Site de documentation Netlify (8 %) | Page publiée, lisible, contient tous les éléments demandés, capture(s) du dossier de recherche initial présente(s) avec récit clair de la trajectoire, tableau de documentation des images IA complet (outil, version, prompt, date), captures de qualité, note d'archivage réfléchie. | Page publiée avec la majorité des éléments ; récit de trajectoire ou documentation IA présents mais incomplets ; quelques captures faibles ou texte incomplet. | Page publiée mais minimaliste ; capture du dossier de recherche initial absente, ou documentation IA absente ; note d'archivage absente. | Page non publiée, lien brisé, contenu absent, aucune trace du dossier de recherche initial, aucune documentation des images IA utilisées. |
| Gabarit projet individuel (4 %) | Gabarit complet, synopsis dans la fourchette 120-160 mots, image 16:9 de qualité, mise en forme respectée. | Gabarit rempli avec un ou deux éléments faibles (synopsis hors fourchette, image basse résolution). | Gabarit incomplet ou ne respectant pas le format demandé. | Gabarit absent ou inutilisable. |
| Réflexion globale et cohérence (3 %) | Le triptyque scène / site / gabarit raconte une même histoire ancrée dans la recherche initiale. | Cohérence générale avec quelques écarts. | Lien ténu entre les livrables. | Livrables déconnectés les uns des autres. |
Cet énoncé a été préparé à partir de mes consignes, de mes dictées et de mes révisions, avec l'assistance ponctuelle d'outils d'IA générative, notamment Codex GPT-5.4 et Claude Code. Ces outils ont servi à transcrire, structurer, reformuler et mettre en page le document. Les exigences, les décisions pédagogiques et les critères d'évaluation demeurent les miens.
Dans le cadre de l'évaluation de votre travail, je peux aussi recourir de manière limitée à ces outils pour des tâches techniques ou administratives : extraction de texte, transcription de mes propos, repérage d'un critère du barème, organisation de notes de correction que j'ai moi-même formulées.
Ces outils ne servent jamais à vous attribuer une note ni à porter un jugement à ma place. Je les utilise dans des environnements contrôlés, par exemple des conteneurs de type sandbox Docker, lorsque c'est pertinent.
Si vous préférez que votre travail ne soit pas traité de cette manière, écrivez-moi avant la remise : je le corrigerai sans y recourir, sans pénalité.