Gabarit mis à jour le : 20 janvier 2021

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

Hiver 2024

1 – 3 – 2

PA : 582-1C3-JR (Web 1)

PR : 582-1H3-JR (Infographie)

Session

Pondération

Préalable(s)

Auteur(e)(s) ou professeur(e)(s) utilisant ce plan de cours :

Martin Boudreau

N/A

mboudreau@cstj.qc.ca

D-123-F

Nom et prénom

Poste

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 l’étudiant (s’il y a lieu)

• Modalités de participation au cours

• Règles départementales d’évaluation des apprentissages (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 l’enseignant

• 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

Cliquez ici pour entrer

une date.

Nom du département

Coordination départementale (Nom)

Date

Note aux étudiants : Nous vous suggérons de conserver ce plan de cours afin de vous éviter des frais si ultérieurement

vous aviez à demander au collège une impression ou un envoi électronique de ce plan de cours.

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.

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, l’apprentissage des bonnes pratiques et l’adoption d’outils de production sont aussi au programme. 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

OBJECTIF DE L’ÉVALUATION

• Simulation d’un mandat de développement d’un site web

CONTEXTE DE RÉALISATION

• Pondération : 40%

• Durée : 4 semaines

• Activité individuelle

• La première semaine est consacrée à une épreuve préparative (10%)

• Les semaines suivantes sont consacrées à la réalisation du projet (30%)

TÂCHES EXIGÉES

• Préparation de maquettes pour approbation

• Production des pages web

• Mise en forme des pages pour différents contextes (web adaptatif)

• Optimisation du code et des médias

• Publication du site web

MATÉRIEL PERMIS

• Notes de cours, fichiers d’exemples, accès internet.

CRITÈRES D’ÉVALUATION

• Cohérence visuelle

• Mise en forme adaptée à différents contextes d’affichage

• Optimisation des images

• Qualité de l’intégration du HTML et du CSS

• Classement et organisation des fichiers

• 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.

CSTJ

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.

SOMMATIVE (TYPE, PONDÉRATION, MOMENT)

ACTIVITÉS

PRISE EN MAIN

DATE DE REMISE

PONDÉRATION

Devoirs

Cours 5

Cours 8

Cours 6

Cours 9

Quiz

Cours 3, 5, 9 et 11

20%

Projet de mi-session

Cours 4

Cours 7

15%

Épreuve de mi-session

Cours 8

15%

Évaluation synthèse

Cours 12

Semaine 15

25%

Épreuve synthèse

Semaine d’évaluation

15%

TOTAL

100%

⁎Les dates d'échéance et de prise en main peuvent changer avec préavis.

CSTJ

CALENDRIER DU COURS

Cours

Contenus

Évaluations

formatives

Évaluations

sommatives

INTRODUCTION

• Présentation du cours

• Plan de cours

• Retour très rapide sur WEB 1 (HTML)

o Anatomie d’une balise HTML

o Balises de contenu vs balises de structure

o Images

o Liens

o Listes et tableaux

• « Épreuve » formative de révision

LES FONDEMENTS DU CSS

• L’utilisation d’un préprocesseur de CSS (SCSS)

• Retour très rapide sur le CSS

• Styles en cascade (inline, interne, externe)

o La propriété CSS

o Anatomie d’une règle CSS

• Sélecteurs avancés

• Arrière-plans

• « Épreuve » formative de révision

• Boilerplate CSS et reset sheet

• Les conteneurs et l’héritage

• Google fonts, Material Icons, Font Awesome

• Variables CSS

Présentation des

études de cas

LA BOÎTE HTML (box model)

• Anatomie de la boîte (marge, bordure, padding, contenu)

• Overflow

• Box-sizing

• Unités de mesure relatives

• Couleurs

• Flux de rendu par défaut du fureteur

• Display (none, inline, block, inline-block…)

Présentation des

études de cas

QUIZ 1 (5%)

CSTJ

POSITIONNEMENT (1/2)

• Grid (les bases)

o Définition d’une grille simple

o Gestion de l’espace restant

o Alignement du contenu

• Flexbox

o Disposition d’éléments à l’horizontal

o Axes principal et secondaire

o Alignement du contenu

POSITIONNEMENT (2/2)

• Grid (notions avancées)

o Fusion de cellules

o Positionnement spécifique d’un élément sur la grille

• Position

o Positionnement précis avec left, top…

o Détermination du point de référence

• Transform (translate, scale, rotate, skew…)

QUIZ 2 (5%)

DEVOIR 1 (5%)

PROPRIÉTÉS CSS - Esthétique

• Background

o Arrière-plans multiples

o Dégradés

• Border-radius

• Box-shadow, text-shadow

• Transitions

LES IMAGES

• Formats

• Exportation

• Intégration

FORMATIF :

ÉPREUVE DE

MI-SESSION

Remise DEVOIR 1

Prise en main :

PROJET DE MI-

SESSION (15%)

ÉPREUVE DE MI-SESSION

ÉPREUVE DE

MI-SESSION (15%)

SEMAINE DE RELÂCHE

DE RETOUR

• Retour sur le projet de mi-session

• Formulaires de base

Remise :

PROJET DE

MI-SESSION

CSTJ

• Sélecteurs CSS avancés (pseudo-classes, pseudo-éléments, etc.)

• Le design d’un site pour un téléphone

• Le design d’un site pour une tablette

• Adaptation du menu

RESPONSIVE 1

• Responsive Web design

• Mobile first

• Media queries (applications)

• Priorisation des styles

QUIZ 3 (5%)

DEVOIR 2 (5%)

RESPONSIVE 2

• Le principe des grilles fluides

• Images responsives

o Intégration dans une grille fluide

o Balise <picture>

o Attributs srcset et sizes

o Stratégies d’optimisation

Remise DEVOIR 2

SITE WEB EN LIGNE

• Compatibilité CSS (préfixes)

• Transfert FTP

• Démo SCSS

• Démo Javascript

QUIZ 4 (5%)

TRAVAIL SYNTHÈSE

ÉVALUATION

SYNTHÈSE

Épreuve pratique

(15%)

TRAVAIL SYNTHÈSE

REMISE :

ÉVALUATION

SYNTHÈSE

Projet (25%)

CSTJ

ACTIVITÉS OBLIGATOIRES POUR L’ÉTUDIANT

AUCUNE

MODALITÉS DE PARTICIPATION AU COURS

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 enseignants 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.

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.

CSTJ

MODALITÉS DE REPRISE EN CAS D'ABSENCE À UNE ÉVALUATION — PIEA ARTICLE 5.7

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 son enseignant. Son enseignant 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,

l’étudiant doit aviser 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 avec un spécialiste médical, Alliance Sport-Études

et Cheminots), l’étudiant doit aviser son enseignant au moins 5 jours ouvrables avant la tenue de l’évaluation afin de

planifier avec lui des modalités de reprise. Si l’étudiant n’informe pas 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

l’enseignant et l’étudiant.

Les modalités de remise des travaux sont spécifiées dans le plan de cours ou dans les consignes remises par 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é par

l’enseignant. Dans un tel cas, les pénalités pour les retards s’appliquent.

Un travail sera refusé s’il est remis par l’étudiant alors que les autres étudiants 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.

CSTJ

MODALITÉS D’ÉVALUATION DE LA LANGUE — PIEA ARTICLE 5.10

Un travail dont la langue écrite est jugée inacceptable peut être refusé par l’enseignant. 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ù l’étudiant a accès aux outils de révision linguistique.

MÉDIAGRAPHIE

DOCUMENTATION OBLIGATOIRE

https://web2cstj.github.io

DOCUMENTATION COMPLÉMENTAIRE

https://www.w3schools.com/css/default.asp

https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks

MATÉRIEL REQUIS ET OUTILS TECHNOLOGIQUES DÉPARTEMENTAUX

Matériel requis

• Cahier pour prise de notes

• Clé USB ou disque dur externe

Outils technologiques

Plan de cours (incluant le calendrier du cours)

LÉA

Notes d’évaluation

LÉA

Communications individuelles

Teams

Communications de groupe

MIO

Exercices

Teams, https://web2cstj.github.io

Notes de cours

Teams, https://web2cstj.github.io

Capsules vidéo

Teams, Youtube, Streams

Cours synchrones

Teams

Évaluations

Teams

Remise des évaluations*

Teams

* Utilisation de la nomenclature obligatoire pour toutes remises : [3 premières lettres du nom de famille] + [Première lettre du prénom] + Matricule

MODALITÉS DE DIFFUSION DES DISPONIBILITÉS DE L'ENSEIGNANT

Les périodes de disponibilités de l'enseignant sont affichées à la porte de son bureau, sur TEAMS et sur le site Web.

Vous pouvez communiquer avec vos enseignants par MIO (https://cstj.omnivox.ca) et par Teams.

POLITIQUE DE FRAUDE ET PLAGIAT

• 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

CSTJ

• L’enseignant indiquera aux étudiants, selon les travaux, examens ou productions, ses exigences précises quant à la

méthode à utiliser pour la déclaration des sources.

• L’enseignant indiquera, selon les travaux, examens ou productions, s’il autorise ou non l’utilisation de sources externes