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 :
00_CONTEXTE_ET_PROMPT_A_DEPOSER_DANS_COPILOT.md : c’est un fichier texte à déposer tel quel dans Copilot, sans l’ouvrir ni le modifier ;.docx final à partir du même contenu que le site.Le fichier personnalisé pour Copilot est votre point de départ pour le site Netlify et pour le document Word final. 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 deux fichiers téléchargeables, soit index.html et un document Word .docx. Vous ne partez donc pas d'une page blanche et vous n'avez pas à copier-coller du contenu dans un autre fichier.
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, document Word final).
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). Enregistrez cette vidéo à la fin, quand votre scène STYLY, votre site Netlify et vos conversations IA de travail sont terminés.
Pour éviter de devoir refaire une vidéo ou un site à la dernière minute, suivez cet ordre :
.docx et le fichier index.html. Le synopsis doit partir de vos propres éléments : votre intention, ce qu’on voit dans la scène, le lien avec la recherche et un choix de design important.index.html généré par Copilot et toutes les captures d'écran utilisées par le site dans votre dossier OneDrive docs_projet_final/dossier_site_web_a_deposer_dans_Netlify_lorsque_complet. Publiez ensuite ce dossier complet sur Netlify et ouvrez l'URL finale pour vérifier que le texte et les images apparaissent..docx généré par Copilot et vérifiez qu'il contient le même titre, le même synopsis et l'image recommandée que le site.Vous n'avez pas à enregistrer l'écran pendant que vous travaillez avec Copilot ou avec un autre outil d'IA. Ce qu'on évalue, c'est votre scène finalisée, votre documentation publiée et votre capacité à expliquer vos choix.
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. Faites cet enregistrement après avoir terminé votre scène, vos conversations IA de travail, votre site Netlify publié et votre document Word final. Vous n'avez pas à enregistrer vos conversations avec l'IA. Une fois la vidéo enregistrée, regardez-la au complet avant de déposer le lien : vous devez vérifier que vous avez réellement couvert les éléments ci-dessous.
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. Dans la vidéo, vous pouvez mentionner brièvement que vous avez utilisé l'IA et que les détails sont documentés sur votre site Netlify, mais ne filmez pas la session Copilot elle-même.
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.
Vérifiez le point de départ comme une porte d'entrée. Ouvrez votre lien STYLY comme une personne qui visite l'exposition pour la première fois : la première vue doit être lisible, orientée vers un élément significatif et assez claire pour comprendre le début du parcours. Si la personne arrive derrière un mur, trop loin de la scène, au milieu d'un décor vide, ou dans une perspective confuse, déplacez le point de départ ou ajoutez un élément d'accueil visible depuis cette position.
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). Netlify Drop est une page où l'on dépose un dossier pour le mettre en ligne. Cette page devient 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. Ce fichier est la page web de votre site. Quand Copilot vous demande des images, joignez-les dans la conversation : il utilisera leurs noms exacts pour préparer le site.
Pour que les images apparaissent sur Netlify, le fichier index.html et toutes les images utilisées par le site doivent être placés ensemble dans le même dossier OneDrive : docs_projet_final/dossier_site_web_a_deposer_dans_Netlify_lorsque_complet. C'est ce dossier complet, et non le fichier index.html seul, qui doit être déposé sur Netlify Drop.
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. Copilot doit générer ce fichier pour vous à partir des mêmes éléments que votre site Netlify.
Pour éviter de refaire le même travail deux fois, utilisez les mêmes éléments que pour votre site Netlify :
Copilot doit vous produire un fichier Word .docx téléchargeable avec le titre, votre nom, le synopsis et l'image recommandée. Si l'interface Copilot utilisée ne permet pas de générer un fichier .docx, Copilot doit vous le dire clairement et s'arrêter : dans ce cas, écrivez-moi au lieu de refaire la mise en page à la main.
Déposez dans le formulaire le document Word généré par Copilot. Le fichier doit rester cohérent avec le site Netlify : même titre, même synopsis, même image principale.
Netlify Drop permet de publier un site simple en glissant un dossier sur une page web. C’est gratuit et il n’est pas nécessaire de connaître le code.
index.html. Elles doivent être dans le même dossier que lui. Si vous déposez seulement index.html sur Netlify, le site peut s'ouvrir, mais les images ne s'afficheront pas.
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, avant la génération finale, demandez à Copilot d’activer Pensée approfondie. Téléchargez ensuite les deux fichiers produits : le document Word .docx et index.html. Ne modifiez pas le HTML à la main et ne remplissez pas de document Word séparé.
Dans votre dossier OneDrive du cours, ouvrez le dossier docs_projet_final, puis le sous-dossier dossier_site_web_a_deposer_dans_Netlify_lorsque_complet. Si vous ne le voyez pas encore, attendez qu'il soit créé dans votre dossier OneDrive avant de publier le site.
Placez dans docs_projet_final/dossier_site_web_a_deposer_dans_Netlify_lorsque_complet le fichier index.html téléchargé depuis Copilot. Placez aussi dans ce même dossier toutes les captures d'écran et images que Copilot a utilisées dans le site, avec exactement les noms indiqués par Copilot. Ne changez pas leur nom après la production du fichier.
Ouvrez index.html depuis le dossier dossier_site_web_a_deposer_dans_Netlify_lorsque_complet. Vérifiez que le titre, le texte et les images apparaissent. Si une image manque, vérifiez d'abord que le fichier image est bien dans le même dossier que index.html, avec le même nom que celui utilisé par Copilot.
Allez à app.netlify.com/drop. Glissez-déposez le dossier dossier_site_web_a_deposer_dans_Netlify_lorsque_complet au complet dans la zone indiquée. Ne déposez pas seulement index.html : les images doivent partir avec le dossier. 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 document Word final. 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, première perspective bien pensée, point de départ lisible, au moins 2 panneaux d'interprétation (POI) avec image et texte substantiel, élément d'accueil clair, accessible, performante. | Scène fonctionnelle, la plupart des exigences respectées, titre et description présents mais sommaires ou génériques, première perspective compréhensible mais peu travaillée, 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, point de départ confus ou mal orienté, panneaux d'interprétation absents ou réduits à un titre décoratif, pas d'élément d'accueil identifiable. | Scène non fonctionnelle, lien brisé, exigences minimales non respectées, aucun titre ni description renseignés, point d'arrivée inutilisable ou désorientant, 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, recherche minimale documentée si le sujet final a changé, 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, recherche minimale 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, recherche du nouveau sujet non documentée, ou documentation IA absente ; note d'archivage absente. | Page non publiée, lien brisé, contenu absent, aucune trace du dossier de recherche initial ou de la recherche minimale liée au sujet final, aucune documentation des images IA utilisées. |
| Document Word du projet individuel (4 %) | Document complet, synopsis dans la fourchette 120-160 mots, image 16:9 de qualité, mise en forme claire et cohérente avec le site. | Document remis avec un ou deux éléments faibles (synopsis hors fourchette, image basse résolution). | Document incomplet ou ne respectant pas le format demandé. | Document absent ou inutilisable. |
| Réflexion globale et cohérence (3 %) | Le triptyque scène / site / document Word raconte une même histoire ancrée dans la recherche initiale ou dans une nouvelle recherche minimale clairement documentée. | 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é.