Plan de cours

Vue d'ensemble du cours Intégration II

Thématique

Le cours Intégration II est le second et dernier cours de cette série. Il vise à approfondir la connaissance et la compréhension des normes, des meilleures pratiques et des méthodes de travail permettant l'intégration de projets Web. Au fil du cours, un Guide de développement Web sera élaboré et mis à jour pour définir un ensemble de bonnes pratiques et méthodes de travail en respect du style de codage du programme ainsi qu'une liste de ressources et un carnet de notes personnelles au format MarkDown.

Bloc 1

Le bloc 1 traite :

  • des normes reliées à la description et la mise en forme des contenus : MarkDown, HTML, CSS et WCAG ;
  • des outils et extensions pour améliorer l'efficacité et contrôler la qualité du travail ;
  • des concepts, notions et méthodes de travail avec les CSS incluant l'approche Mobile First, le découpage modulaire des fichiers et l'utilisation de variables CSS ;
  • d'interactivité avec JavaScript;
  • des techniques pour implémenter des grilles et des conceptions fluides et réactives : les flexbox, puis, les CSS Grids et enfin en combinant les différentes stratégies disponibles ainsi que les possibilités graphiques des CSS selon l'approche du Design Web intrinsèque.

Bloc 2

Le bloc 2 s'articule autour de la réalisation complète de projets Web incluant une mise en ligne sous https. Un de ces projets est un travail d'équipe qui est réalisé successivement ou parallèlement dans tous les cours de la formation spécifique.

Attitudes socioprofessionnelles (soft skills)

Les attitudes socioprofessionnelles sont des savoir être, des savoir-faire relationnels, collaboratifs et organisationnels qui complètent le profil professionnel du domaine d'emploi. Voici un exemple tiré d'une offre d'emploi en décembre 2021 :

  • Débrouillard et autonome;
  • Efficace et rigoureux;
  • Équipier de pointe, aimant partager et apprendre en équipe;
  • Ouvert et en mode recherche de solutions;
  • Polyvalent, navigue aisément à travers différents types de mandats
  • Bonne écoute et esprit d'analyse.

Dans le cours d'Intégration II et plus généralement, dans le programme TIM, une participation constructive à la communauté (la classe, la cohorte, …) est la voie privilégiée pour le développement des attitudes socioprofessionnelles.

Stratégies d'enseignement

Les notions et techniques sont présentés à l'aide d'exposés ponctués de démonstrations et de petits exercices pour alterner les modes passif-actif autant que possible. Les périodes de laboratoire sont utilisés pour avancer en présence les travaux pratiques afin de permettre à l'étudiant(e) de s'approprier la matière au fur et à la mesure. Le travail est souvent exécuté en binôme avec des retours en plénière. La présence en classe est obligatoire (voir l'article 7 du règlement numéro 6 sur la présence aux cours).

Le cours d'Intégration II est porteur d'un projet pédagogique de « communauté d'apprentissage ». Ce projet s'appuie sur la théorie socioconstructiviste qui avance que la cognition, les apprentissages se réalisent le mieux lors d'interactions sociales positives et structurantes.

Dans cet esprit, la déclaration d'inclusivité, est l'assise de la communauté d'apprentissage aussi chaque personne étudiante est appelée à signer cette déclaration pour s'engager à la respecter.

La communauté d'apprentissage se forme et s'élève en s'ouvrant sur les communautés de pratique tels que FrontEndMentors et GitHub. Concrètement, l'ouverture vers les milieux professionnels se fait par :

Stratégies d'évaluation

Évaluation formative

Toutes les remises sont formatives et visent l'acquisition progressive des compétences.

Évaluation sommative par entrevue à la fin de la session

Tous les livrables, examen, exercices et travaux constituent le portfolio de la personne étudiante. L'entrevue consiste à identifier le niveau d'atteinte de chacun des objectifs d'apprentissage ciblés pour ce cours (voir la liste des objectifs ci-dessous).

Notation

En accord avec les principes de la dénotation, la note finale sera obtenue non pas par addition des points (puisque les livrables ne sont pas notés) mais en composant la note finale d'après l'évaluation faite en entrevue du niveau atteint pour chacun des 9 objectifs d'apprentissage listés ci-bas.

Quatre notes sont possibles : 50%, 60%, 85%, 100%.

Objectifs d'apprentissage

1. Maîtriser le balisage HTML sémantique, valide et accessible

  • Utiliser les éléments HTML de manière appropriée pour structurer le contenu de manière claire et significative (titres, paragraphes, listes, sections, formulaires, etc.).
  • Valider le code HTML à l'aide d'outils comme l'inspecteur de DOM, les validateurs en ligne et en collectant les feedbacks des pairs.
  • Implémenter des attributs ARIA (Accessible Rich Internet Applications) pour enrichir l'accessibilité des interfaces dynamiques.
  • Ajouter des alternatives textuelles pertinentes aux images, vidéos et éléments multimédias.
  • Corriger les erreurs de balisage identifiées lors des validations.

2. Organiser et structurer les styles CSS de manière modulaire

  • Structurer le CSS en utilisant une approche modulaire.
  • Compiler des fichiers SCSS en CSS grâce à un préprocesseur comme SASS pour centraliser et optimiser les styles.
  • Utiliser des variables, mixins et fonctions SCSS pour assurer la réutilisabilité et la maintenabilité du code.
  • Implémenter des conventions de nommage cohérentes (BEM) et documenter le code.
  • Intégrer des outils d'analyse (comme StyleLint) pour vérifier et corriger la cohérence du code CSS.

3. Comprendre et appliquer les concepts fondamentaux des CSS

  • Expliquer et appliquer les principes de la cascade CSS (priorité des règles de style).
  • Utiliser des sélecteurs efficaces en maîtrisant la spécificité, en appliquant la méthodologie BEM (Block, Element, Modifier) et en exploitant l'imbrication de manière réfléchie et intentionnelle.
  • Gérer l'héritage et réinitialiser les styles de manière appropriée pour éviter des conflits.
  • Exploiter les pseudo-éléments et pseudo-classes (::before, ::after, :hover, :nth-child(), etc.) pour enrichir les styles.
  • Résoudre des conflits CSS réels en expliquant les causes et les solutions.

4. Maîtriser les stratégies de mise en page en CSS

  • Utiliser les boîtes flexibles (flexbox) pour créer des dispositions dynamiques et adaptatives.
  • Créer des mises en page complexes en utilisant les grilles CSS (grid layout).
  • Implémenter des positionnements relatifs et absolus pour des placements précis d'éléments.
  • Personnaliser les dispositions en fonction des préférences des utilisateurs grâce aux container queries et prefers-color-scheme.
  • Créer des micro-layouts réutilisables pour des sections répétées comme des cartes de contenu ou des composants hero.

5. Intégrer des transitions et des animations pour améliorer l'expérience utilisateur

  • Créer des transitions fluides pour les interactions utilisateur (hover, focus, clic).
  • Développer des animations CSS simples à l'aide de keyframes.
  • Utiliser des propriétés optimisées pour la performance (transform, opacity).
  • Intégrer des animations conditionnelles en fonction des interactions des utilisateurs sur différents supports (touch, souris, clavier).
  • Implémenter des animations adaptées aux utilisateurs sensibles en respectant les règles prefers-reduced-motion.

6. Intégrer des pratiques favorisant l'accessibilité web

  • Ajouter des alternatives textuelles pertinentes pour les images, vidéos et contenus multimédias.
  • Créer des formulaires accessibles avec des labels associés, des champs obligatoires bien indiqués et des messages d'erreur clairs.
  • Utiliser des contrastes adéquats pour les textes et les éléments interactifs selon les critères WCAG.
  • Tester l'accessibilité à l'aide d'outils automatisés et de vérifications manuelles avec des lecteurs d'écran comme NVDA ou VoiceOver.
  • Intégrer des attributs ARIA dynamiques (aria-live, role, etc.) pour améliorer l'accessibilité des interfaces interactives.

7. Utiliser un système de versionnage avec Git et GitHub

  • Créer et gérer des dépôts locaux et distants via Git et GitHub.
  • Utiliser les commandes de base (init, clone, add, commit, push, pull) et des commandes avancées (merge, rebase) pour résoudre des conflits.
  • Créer et gérer des branches pour isoler les modifications du code.
  • Documenter l'historique des modifications avec des messages de commit explicites et descriptifs.
  • Utiliser les pull requests pour demander des révisions de code et intégrer les suggestions.

8. Optimiser les médias pour le Web et comprendre les images réactives

  • Choisir des formats de fichiers adaptés (JPEG, PNG, WebP, SVG, AVIF) selon leurs cas d'utilisation.
  • Utiliser des outils de compression pour réduire le poids des images sans perte de qualité notable.
  • Implémenter des images réactives (srcset, picture) pour adapter les visuels aux différentes tailles d'écran.
  • Gérer le chargement différé des images (lazy loading) pour optimiser les temps de chargement.
  • Documenter les choix de formats et les optimisations appliquées.

9. Utiliser des outils d'intelligence artificielle pour l'apprentissage et la productivité

  • Interroger des modèles d'intelligence artificielle pour obtenir des explications sur le code et des suggestions de refactorisation.
  • Vérifier les suggestions de l'IA en fonction des standards de développement web et corriger si nécessaire.
  • Utiliser l'IA pour générer du code récurrent, automatiser la documentation et accélérer les tâches répétitives.
  • Créer des prompts efficaces et spécifiques pour obtenir des résultats précis.
  • Documenter les prompts, les adaptations et modifications faites aux réponses de l'IA.

Règles départementales

Ce plan de cours est complété par le document rassemblant les règles départementales. Ce document est disponible dans la section Documents distribués du cours sur Léa.