Cours 1.2¶

Aujourd'hui¶

• Annonces
  • Activer notification dans Teams
  • Les cellullaires en classe: présentation et discussion
• Le travail assisté par IA
• Intégrité intellectuelle et usage encadré de l'IA
• Réflexion sur son identité professionnelle (persona)
• Lancement du projet portfolio
• Gestion de version (Git) et conventions de nommage
• Journal de bord (JOURNAL.md) et grille critériée

Les cellullaires en classe: discussion et règles¶

Étude et projet pilote¶

Présentation de la perception des étudiants des effets de la mesure de mise à distance du téléphone sur leur réussite scolaire.

Le travail assisté par IA 🤖¶

L'IA (Copilot, Figma) est disponible tout au long de la session. Elle change votre vitesse de travail, pas votre responsabilité : vous devez être capable d'expliquer et de défendre tout ce que vous livrez.

Diapositives : Le travail assisté par IA

La compétence clé se déplace : la question n'est plus « comment mémoriser la syntaxe », c'est « comment décrire clairement ce que je veux, puis reconnaître si la réponse est bonne ».

Quatre moments où vous pouvez utiliser l'IA pour vous accompgner¶

• Planifier : décrire une fonctionnalité et faire générer une structure de projet ou un plan de réalisation étape par étape, avant d'écrire une ligne.
• Générer : compléter du code à partir d'une intention claire (un nom de fonction, un commentaire décrivant l'effet voulu).
• Déboguer : coller un message d'erreur et le faire expliquer dans son contexte. C'est souvent l'usage le plus rentable au quotidien.
• Réviser : demander comment simplifier ou améliorer un bout de code qui fonctionne déjà. L'IA agit alors comme un pair programmeur.

La boucle de travail (en petit itérations)¶

1. Intention et critères : avant de demander quoi que ce soit, savoir ce qu'on veut obtenir et à quoi ressemble un bon résultat.
2. Générer par incréments : une petite portion à la fois, jamais une fonctionnalité complète d'un coup.
3. Lire et comprendre avant d'accepter : si vous ne pouvez pas expliquer une ligne, vous ne l'acceptez pas.
4. Tester : chaque incrément généré est vérifié avant de passer au suivant, lien direct avec le contrôle de la qualité (015Q).
5. Commit : des commits petits et fréquents, pas un seul gros commit en fin de journée.
6. Documenter dans JOURNAL.md : ce qui a été généré par IA, pourquoi, et ce qui a été modifié.

Frontière d'usage¶

Le code final livré est toujours écrit et compris par vous, Copilot est un soutien, pas un remplacement.

Intégrité intellectuelle et usage encadré de l'IA ⚖️¶

L'IA est permise dans ce cours, à une condition non négociable : la transparence.

Le cadre officiel du Collège¶

Le Collège Montmorency encadre l'utilisation de l'IA générative selon une échelle à trois niveaux :

Ce cours se situe au niveau 2. L'IA est permise sans restriction, à une seule condition : citer selon les normes le contenu qui en provient.

Comment citer?¶

Pour ce cours, cette citation se fait directement dans votre JOURNAL.md.

Vous ne devez pas inclure les autocompé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.).

Exemple de citation dans JOURNAL.md :¶

- **Date :** 2026-09-01
- **Prompt :** "Crée une liste de cartes de projets en HTML et CSS, avec la technique CSS Grid, qui s'adapte à la largeur de l'écran. Chaque carte doit contenir une image, un titre et une description."
- **Outil :** Co-Pilot (VS Code)
- **Résultat :** Le code généré par l'IA a été intégré dans le fichier `index.html` et `style.css`. J'ai ensuite moi même modifié la couleur de fond des cartes et ajusté la taille de la police pour améliorer la lisibilité.

Ce que ça implique concrètement¶

• Vous devez pouvoir expliquer et modifier en direct tout code généré par IA, même des semaines plus tard.
• Lors des présentations, l'enseignante peut vous demander de le démontrer devant la classe.

Sanctions¶

Rappel de la Politique institutionnelle d'évaluation des apprentissages (article 6.1.2) : un manquement à l'intégrité intellectuelle entraîne un zéro pour l'évaluation concernée et un rapport d'événement dès la première infraction. En cas de récidive dans le même cours, l'échec du cours.

Réflexion sur son identité professionnelle 🪞¶

Avant de commencer les maquettes, prenez un moment pour définir pour qui vous construisez ce portfolio et quelle image professionnelle vous voulez projeter à travers le design. Ce n'est pas un exercice accessoire : vos réponses orientent directement vos choix visuels (couleurs, typographie, ambiance), et elles nourrissent le critère de conception de votre grille d'évaluation.

Quelques questions pour se lancer (à répondre individuellement, dans vos mots, pas de remise formelle) :

1. Quel type de poste ou de stage je vise en sortant du programme?
2. Qui va probablement regarder mon portfolio? (un·e recruteur·e d'agence, une petite entreprise, un·e client·e potentiel·le...)
3. Qu'est-ce que cette personne cherche à voir en premier?
4. Quel style visuel (couleurs, typographie, ambiance générale) représenterait le mieux l'identité professionnelle que je veux projeter?
5. Quelle impression je veux que cette personne retienne après avoir visité mon site?

Lancement du projet portfolio 🚀¶

À partir d'aujourd'hui, votre portfolio devient le fil conducteur des 7 prochaines semaines. Toutes les consignes, les dates de remise et les critères se trouvent sur la page du projet.

Projet 1 : Portfolio

En classe aujourd'hui¶

• Initialisation du dépôt GitHub
• Amorce de la planification (PLANIFICATION.md) et du moodboard

Gestion de version et conventions de nommage 🗂️¶

Vous avez déjà utilisé Git en Web 3, avec GitHub Desktop (initialisation, commit, push/pull, branches, fusion).

Cette session, on bascule vers le panneau Source Control intégré de VS Code : mêmes concepts, mais sans quitter votre éditeur pour committer.

Gestion de Git directement dans VS Code¶

• Source Control : icône dans la barre latérale gauche (ou Ctrl+Shift+G)
• Ajouter au commit : le + à côté d'un fichier modifié
• Commit : écrire le message dans la boîte de texte en haut, puis ✓ (ou Ctrl+Enter)
• Push/Pull : les flèches de synchronisation en bas du panneau (ou dans la barre d'état)

Nommer son dépôt¶

Convention : portfolio-prenom-nom, tout en minuscules, tirets, sans accents ni espaces.

Exemple : portfolio-zoe-tremblay

Votre répertoire doit être privé. Invitez moi comme collaborateur à votre répertoire. Mon compte est marie-michelle-ouellet.

Nommer ses commits¶

Un commit décrit ce qui a changé, à l'impératif, en français, de façon précise.

Fréquence¶

Même principe que la boucle de travail avec l'IA : des commits petits et fréquents, jamais un seul gros commit en fin de session. Votre historique de commits fait partie de ce qui est évalué, il documente votre démarche.

Journal de bord et grille critériée 📓¶

Journal de bord¶

Les 5 questions à répondre à chaque bloc de cours se trouvent sur la page du projet portfolio, dans JOURNAL.md. Elles couvrent votre avancement, vos difficultés, vos apprentissages, vos prochaines étapes, et votre usage de l'IA.

Grille critériée¶

Votre portfolio est évalué selon une grille à échelle descriptive, construite autour de trois critères alignés sur les compétences du cours :

La qualité de la langue s'ajoute séparément, comme pour toutes les évaluations du cours.

Devoir¶

Projet portfolio¶

• Débuter le moodboard (Figma ou autre logiciel dans lequel vous êtes à l'aise). Pas de gabarit imposé, mais il doit être professionnel selon ce que vous avez appris jusqu'à maintenant sur la présentation d'un moodboard.
• Initialisation du dépôt GitHub nommé selon la convention portfolio-prenom-nom.
• Amorce de PLANIFICATION.md et de JOURNAL.md. Pousser vos premiers commits sur GitHub.
• Tout est détaillé sur la page visuelle du projet portfolio ou la page textuelle du projet portfolio ou la page textuelle (index-textuel.md).

(Note: Pas de remise pour officielle mercredi mais vous devez avoir minimalement créé les fichiers .md, votre dépot github, avoir fait un commit et un push et avoir amorcé un moodboard).