1
CSTJ
NUMÉRO DE PROGRAMME : 582
PLAN DE COURS
☒Saint-Jérôme
☐Mont-Laurier
☐Mont-Tremblant
582-2A4-JR
Web 2 : Réactif
Numéro du cours
Titre du cours
H26
1-3-2
Session
Pondération
Auteurs et utilisateurs de ce plan de cours :
Boudreau, Martin
mboudrea@cstj.qc.ca
D-123-F
Charles, Yannick
ycharles@cstj.qc.ca
D-123-F
Nom et prénom
Courriel
Bureau
Ce plan de cours contient les informations suivantes :
• Présentation du cours
• Description de la cible du cours
• Description de l’évaluation synthèse du cours incluant sa
pondération et ses critères
• Démarche d’enseignement et d’apprentissage
• Démarche d’évaluation
o Formative
o Sommative (type, pondération, moment)
• Calendrier du cours
• Activités obligatoires pour la personne étudiante (s’il y a lieu)
• Modalités de participation au cours
• Règles départementales d’évaluation des apprentissages (RDEA)
(s’il y a lieu)
• Référence à la PIEA :
o Modalités de reprise en cas d’absence à une
évaluation
o Pénalité pour les retards dans la remise des
travaux (s’il y a lieu)
o Modalités d’évaluation de la langue
• Médiagraphie
• Matériel requis et frais (s’il y a lieu)
• Modalités de diffusion des disponibilités de la personne
enseignante
• Référence à la Politique institutionnelle sur la fraude, le
plagiat et la tricherie par les étudiants
La coordination départementale recommande l'approbation de ce plan de cours au nom de l’assemblée départementale
Techniques d’intégration multimédia
Sylvain Paquin
27 janvier 2025
Nom du département
Coordination départementale (Nom)
Date
2
CSTJ
PRÉSENTATION DU COURS
Ce cours permet à l’étudiant de développer des sites web réactifs qui s’adaptent à différents écrans. L’étudiant est amené à
utiliser et à développer ses connaissances des langages HTML et CSS. Le thème central de ce cours est le contrôle de
l’apparence des pages web et le contrôle des médias qui la composent. L’apprentissage des bonnes pratiques et l’adoption
d’outils de production sont aussi au programme, afin de se rapprocher des standards de l’industrie et d’augmenter la vitesse
de développement dans la réalisation d’un site web. Certains médias doivent être créés par l’étudiant, alors que d’autres
doivent provenir de banques de médias, afin de permettre à l’étudiant d’exprimer une certaine créativité tout en limitant la
charge de travail.
DESCRIPTION DE LA CIBLE DU COURS
L'élève sera en mesure de développer des sites web réactifs avec différents types de médias.
DESCRIPTION DE L’ÉVALUATION SYNTHÈSE DU COURS
PONDÉRATION : 40%
OBJECTIF : Simulation d’un mandat de développement d’un site web
• Contexte de réalisation :
o Pondération : 40%
o Durée : 4 semaines
o Activité individuelle
o La première semaine est consacrée à une épreuve préparative (15%)
o Les semaines suivantes sont consacrées à la réalisation du projet (25%)
• Tâches exigées de l’élève :
o Préparation de maquettes pour approbation
o Production des pages web
o Mise en forme des pages pour différents contextes (web adaptatif)
o Optimisation du code et des médias
o Publication du site web
• Matériel permis lors de l’évaluation : Notes de cours, fichiers d’exemples, accès internet.
• Critères d’évaluation
o Cohérence visuelle
o Mise en forme adaptée à différents contextes d’affichage
o Optimisation des images
o Qualité de l’intégration du html et du css
o Classement et organisation des fichiers
o Adéquation de l’assemblage et de la maquette
DÉMARCHE D’ENSEIGNEMENT ET D’APPRENTISSAGE
Utilisation d’exposés magistraux appuyés de renforts visuels, de documents écrits et imprimés, du réseau internet et
d’exercice pratiques dirigés.
DÉMARCHE D’ÉVALUATION
FORMATIVE
• Exercices pratiques, analyses, mises en situation, quiz, etc.
• L’élève doit réaliser plusieurs travaux pratiques au cours de la session dans le cadre des laboratoires à chaque semaine.
Lors des laboratoires, il pourra recevoir des appréciations et des remarques sur son travail effectué.
• L’enseignant fera part de ses jugements personnels, de conseils et proposera des mesures à prendre pour aider l'élève à
améliorer ses techniques et apprentissages.
• L’élève pourra recevoir des appréciations, des remarques sur son travail effectué et un jugement de l'enseignant sur ses
progrès et ses apprentissages.
3
CSTJ
SOMMATIVE (TYPE, PONDÉRATION, MOMENT)
ACTIVITÉS
PRISE EN MAIN
DATE DE REMISE
PONDÉRATION
Quiz (2 meilleurs / 3)
C4 / C6 / C10
--
10%
Travail #1 : positionnement
Cours 04
Cours 06
15%
Examen pratique
--
Cours 07
15%
Travail #2 : web responsive
Cours 08
Cours 10
20%
Examen théorique synthèse
--
Cours 12
25%
Projet synthèse
Cours 12
Cours 16
15%
TOTAL
100%
CALENDRIER DU COURS
Cours 01 : introduction au cours
Sommaire du cours
o Présentation du cours
o Retour sur les notions de WEB 1 (HTML et CSS)
o Bonnes pratiques à mettre en place
o Compatibilité avec les différents navigateurs
o Découper une interface
À faire à l’extérieur du cours
Devoir #1 : découpage d’une interface
Cours 02 : fondement du CSS
Sommaire du cours
o Styles en cascade (inline, interne, externe)
o Sélecteurs
o Héritage et priorisation des styles
Remise
Devoir #1 : découpage d’une interface
À faire à l’extérieur du cours
Devoir #2 : Les sélecteurs CSS
Cours 03 : Structure de projet
Sommaire du cours
o Retour sur le box model
o Principe de composant
o Imbrication du code CSS dans les règles
o Organisation des fichiers
Remise
Devoir #2 : Les sélecteurs CSS
À faire à l’extérieur du cours
Devoir #3 : structure de projet
4
CSTJ
Cours 04 : Positionnement CSS #1
Sommaire du cours
o Quiz cours 1 à 3
o Grid
Remise
Devoir #3 : structure de projet
À faire à l’extérieur du cours
Travail #1 : positionnement
Cours 05 : Positionnement CSS #2
Sommaire du cours
o Suite Grid
o Flexbox
o Hybridation (grid-flex)
Remise
Partie #1 – travail #1 : positionnement
Cours 06 : Images et esthétique
Sommaire du cours
o Quiz #2 : cours 4 et 5
o Les images (formats, exportation, intégration)
o Propriétés esthétiques (background, border-radius, box-shadow, transition)
Remise
o Travail #1 : positionnement
Cours 07 : Examen pratique
Sommaire du cours
o Examen pratique de mi-session
Cours 08 : Web responsive #1
Sommaire du cours
o Le principe de grille fluide
o Le principe de mobile first
o Les media queries
À faire à l’extérieur du cours
o Travail #2 : web responsive
Cours 09 : Web responsive #2
Sommaire du cours
o Typographie responsive
o Transform (translate, scale, rotate, skew…)
Remise
Partie #1 – travail #2 : web responsive
Cours 10 : Positionnement CSS 3
Sommaire du cours
o Quiz #3 : cours 8 à 9
o Position (relative, absolute, fixed)
Remise
Travail #2 – web responsive
Cours 11 : Site multipages
Sommaire du cours
o Compatibilité CSS
o Transfert FTP
o Démo Javascript
o Révision pour l’examen synthèse
5
CSTJ
Cours 12 : Examen théorique synthèse
Sommaire du cours
o Examen
o Présentation synthèse
À faire à l’extérieur du cours
Travail synthèse
Cours 13 à 15 : évaluation pratique synthèse
Sommaire du cours
Travail sur le projet synthèse
ACTIVITÉS OBLIGATOIRES
Aucune (pas de conférence, visite d’entreprise, etc.) Cependant, il y aura des activités de récupérations au courant de la
session, pendant la période de libération. Il se peut que la personne enseignante cible certaines personnes étudiantes dans
le but d’assurer sa réussite.
MODALITÉS DE PARTICIPATION AU COURS ET RÉUSSITE
Présence au cours
La réussite de ce cours exige que l’élève, en plus d’une présence assidue et active au cours, réalise les différents
exercices et travaux présentés et qu’il fournisse 2 à 3 heures de travail personnel par semaine.
Les personnes enseignantes du département de multimédia jugent qu’un élève qui a de nombreuses absences et/ou
retards au cours et/ou qui ne réalise pas les travaux, exercices et laboratoires exigés en classe (formatifs et sommatifs)
n’est pas à même d’atteindre la compétence finale du cours.
Travaux d’équipe
Pour les travaux en équipe tous les membres doivent se sentir responsable du bon fonctionnement de l’équipe et
respecter le code de fonctionnement suivant :
- respect des échéances fixées par l’enseignant et les autres membres de l’équipe ;
- chacun accomplisse le travail demandé par l’équipe et ait une attitude responsable ;
- il est de la responsabilité de chaque membre de l’équipe de prévenir ses collègues en cas d’absence ;
- à la deuxième absence, en classe ou hors classe, le membre est exclu de l’équipe ;
- un contrat d’engagement ***
Copie de sauvegarde
L’élève a la responsabilité de conserver des copies de sauvegarde de tous ses travaux en cours de réalisation. Le
département ne pourra être tenu responsable en cas de perte des données sur les postes informatiques. En aucun
temps, la perte ou la corruption d’un fichier numérique ne sera une justification acceptable.
Assignation de poste (en laboratoire seulement)
L’enseignant peut déterminer l’assignation des postes informatiques aux élèves dans la classe et faire les modifications
désirées en cours de session.
En classe (en laboratoire seulement)
Toute personne qui pose des actes ou profère des paroles qui entravent ou perturbent le déroulement des activités du
cours ou qui adopte des comportements inappropriés qui nuisent à la bonne marche des activités du cours sera expulsée
de la classe et devra rencontrer un comité départemental pour réintégrer le cours.
Cellulaire et réseaux sociaux
L'utilisation d'un cellulaire ou des réseaux sociaux est formellement interdite pendant les cours. Tous les cellulaires
doivent être rangés, non visibles et inaudibles pendant un cours.
6
CSTJ
Ne soyez pas surpris si vous êtes contactés par un membre de l’équipe des Services aux étudiants ou votre aide
pédagogique individuelle du Cégep pour prendre de vos nouvelles, si vos absences nous préoccupent. Votre
réussite nous tient à cœur. Si vous avez besoin d’aide, nous vous invitons à contacter le Carrefour d’aide aux
étudiants en remplissant le formulaire disponible via le code QR suivant :
Au Cégep de Saint-Jérôme, la réussite de nos étudiantes et de nos étudiants nous tient à cœur.
C’est pourquoi on te propose différentes mesures d’aide adaptées à tes besoins, afin que tu atteignes les
objectifs que tu t’es fixés. Les mesures et les outils sont disponibles sur le portail Je gère ma réussite
accessible via le code QR suivant :
RÈGLES DÉPARTEMENTALES D’ÉVALUATION DES APPRENTISSAGES
Dans le cadre de l’évaluation synthèse de cours :
• L’élève est dans l’obligation d’être présent en classe ou en ligne lors de l’évaluation synthèse ou lors de toutes les
périodes prévues à la réalisation de l’évaluation synthèse. Toute absence non motivée ou jugée non raisonnable
entraînera un échec à l’évaluation synthèse;
• Toute absence pendant les périodes consacrées à l’évaluation synthèse peut être motivée pour des cas de force majeure
uniquement et signalée dans un délai de 24 heures.;
• Lors des périodes d’évaluation synthèse en classe, l’élève doit exclusivement travailler sur le projet synthèse du cours et
non sur d’autres projets ou travaux. L’enseignant pourra exclure de la classe un élève qui se prête à d’autres activités que
la réalisation de son évaluation synthèse de cours. Ce retrait entraîne une absence et par conséquent un échec au cours.
MODALITÉS DE REPRISE EN CAS D'ABSENCE À UNE ÉVALUATION — PIEA ARTICLE 5.7
L’étudiante ou l’étudiant qui s’absente à une évaluation peut obtenir une reprise selon des modalités équivalentes dans la
mesure où la raison de cette absence est justifiée et jugée valable par la personne enseignante. Cette dernière pourrait
d’ailleurs lui demander de fournir une pièce justificative avant d’autoriser la reprise.
En cas d’absence pour une raison imprévue, notamment : maladie, décès d’un proche, accident ou raisons familiales, la
personne étudiante doit aviser l’enseignante ou l’enseignant dans un délai de 24 heures. Sans raison valable, aucune reprise
ne sera permise et la note zéro sera attribuée pour l’évaluation.
Dans le cas d’une absence prévisible (comparution à la Cour, rendez-vous médical, Alliance Sport-Études et Cheminots), la
personne étudiante doit aviser son enseignante ou son enseignant au moins 5 jours ouvrables avant la tenue de l’évaluation
afin de planifier avec lui des modalités de reprise. Si lui ou elle n’informe pas son enseignante ou son enseignant avant la
tenue de l’évaluation, aucune reprise ne sera permise et la note zéro sera attribuée pour l’évaluation.
PÉNALITÉ POUR LES RETARDS DANS LA REMISE DES TRAVAUX — PIEA ARTICLE 5.6
Toute évaluation sommative remise en retard fera l’objet d’une pénalité de 10 % de la valeur de l’évaluation par bloc de 24
heures de retard, incluant les fins de semaine et la semaine de relâche, à moins qu’une entente ne soit conclue entre la
personne enseignante et la personne étudiante.
Les modalités de remise des travaux sont spécifiées dans le plan de cours ou dans les consignes remises par l’enseignante ou
de l’enseignant. On entend par modalités de remise : date de remise, moyen utilisé (papier ou électronique), format utilisé
(Word, PDF, etc.), lieu de dépôt (classe, casier, bureau, etc.). Un travail qui n’est pas remis selon les modalités exigées
pourra être refusé. Dans un tel cas, les pénalités pour les retards s’appliquent.
7
CSTJ
Un travail sera refusé s’il est remis alors que les autres personnes étudiantes du même cours ont reçu leur copie corrigée ou
le solutionnaire de l’évaluation. Dans un tel cas, la note zéro sera attribuée.
MODALITÉS D’ÉVALUATION DE LA LANGUE — PIEA ARTICLE 5.10
Un travail dont la langue écrite est jugée inacceptable peut être refusé. Dans un tel cas, les pénalités pour les retards dans la
remise des travaux s’appliquent.
Pour tous les cours, la maîtrise de la langue est évaluée. Une pénalité est imposée pour les fautes, jusqu’à concurrence de
10 % de l’évaluation écrite ou orale, et ce, dans la mesure où la personne étudiante a accès aux outils de révision
linguistique.
MÉDIAGRAPHIE
DOCUMENTATION OBLIGATOIRE
Site Web du cours : https://web2cstj.github.io
DOCUMENTATION COMPLÉMENTAIRE
• https://www.w3schools.com/css/default.asp
• https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks
• https://css-tricks.com/css-grid-layout-guide/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://css-tricks.com/almanac/properties/p/position/
MATÉRIEL REQUIS ET FRAIS (S’IL Y A LIEU)
• Une paire d’écouteurs de qualité
• Clé USB ou disque dur externe
Outils technologiques
• Utilisation de la nomenclature obligatoire pour toutes remises :
(3 premières lettres du nom de famille) + (Première lettre du prénom) + Matricule
Exemple : NOMP1234567
Plan de cours (incluant le calendrier du cours)
Teams et Site Web
Notes d’évaluation
LÉA
Communications individuelles
Teams
Communications de groupe
Teams
Exercices
Teams et Site Web
Notes de cours
Teams et Site Web
Capsules vidéo
Teams, Youtube
Remise des évaluations
Teams
8
CSTJ
DISPONIBILITÉS DE LA PERSONNE ENSEIGNANTE ET RESSOURCES DÉPARTEMENTALES
Les périodes de disponibilités de l'enseignant sont affichées à la porte de son bureau ou dans Teams / Fichiers / Supports de
cours.
Vous pouvez communiquer avec vos enseignants par MIO (https://cstj.omnivox.ca), mais il est préférable dans Teams
Ressources départementales
-Technicien en travaux pratiques et aide individuelle : Philippe Clermont, bureau D123-A – pclermont@cstj.qc.ca
-Laboratoire D130 disponible de 8 h à 18 h du lundi au vendredi pour le travail individuel
-Pour un accès aux laboratoires multimédia après 18 h ou le samedi, veuillez faire une demande écrite à Sylvain Paquin,
coordonnateur départemental.
POLITIQUE INSTITUTIONNELLE SUR LA FRAUDE, LE PLAGIAT ET LA TRICHERIE PAR LES
ÉTUDIANTS
Vous trouverez la politique institutionnelle du CSTJ sur la fraude et le plagiat en cliquant sur le lien suivant :
Politique institutionnelle sur la fraude, le plagiat et la tricherie par les étudiants