Travail pratique #3¶

Travail pratique à remettre

Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.

Pondération :

Travail pratique : 5% session
Questionnaire de la semaine 9 : 2% session

Détails :
- Ce travail peut être fait en équipe de 2
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La date limite de remise est disponible sur LÉA - Deux périodes de laboratoire sont allouées pour ce travail

Objectif¶

L'objectif de ce TP est :

Travailler avec des classes de styles
Apprendre à créer des pages réactives avec requêtes média
Apprendre à utiliser la base des flexbox en CSS
Apprendre à utiliser la base des grid en CSS
Créer un bouton de retour vers le haut qui apparaît au défilement de la page (Javascript)

Projet¶

Télécharger le projet
Compléter le projet selon les indications fournies

NE PAS MODIFIER LA STRUCTURE DU PROJET :

Les feuilles de styles doivent rester dans le dossier css
Le script doit rester dans le dossier script
Les pages HTML doivent rester au premier niveau du dossier parent

Mobile-first

Important : le CSS doit être écrit en mobile first.

Cela veut dire : par défaut, le CSS est prévu pour petits écrans, puis on ajoute des requêtes média pour traiter les plus grands écrans.

HEAD¶

Compléter le <head> dans le HTML

Nom(s) d'auteur(s)
Ajouter la détection du viewport pour assurer la réactivité

Assurez-vous que les modifications sont appliquées aux deux pages

BASE.CSS pour header et footer¶

Les styles suivants vont dans le fichier base.css.

Dans le haut du fichier CSS, compléter le sélecteur universel "*"

S'assurer que les tailles des éléments soient en "border-box" (qui inclu le padding et la bordure)

Revoir notes de cours au besoin
Écrire le CSS du <header>

Trouver le commentaire en-tête header pour y mettre le code pour petits appareils
1. Sur le sélecteur <header>
  - retirer toutes les marges (marges à 0)
  - appliquer l'image de fond nommée header.jpg (juste l'image, pas d'attachment ou de taille)
  - position de l'image de fond centrée (background-position)
  - centrer le texte
  - taille de police 1rem
2. Sur le sélecteur <h1>
  - couleur de fond semi-transparente (rgba) noire à 50% de transparence
  - espacement intérieur (padding) à 2rem
  - retirer toutes les marges
Résultat sur petit écran :
Compléter le CSS du <footer>

Trouver le commentaire pied de page footer et sur le sélecteur <footer> ajouter les styles suivants :

Note: espacement = padding de 2rem sur le footer
Assurez-vous que le header et le footer soient les mêmes sur les deux pages! Remplacer les éléments de la deuxième page au besoin.

Page ACCUEIL et ACCUEIL.CSS¶

Les styles suivants vont dans le fichier accueil.css.

Ajouter les éléments suivants :

Dans la section ayant le titre Artistes en résidence :

Dans le HTML :
- Trouver la div avec l'ID "grille_images"
- Créer 3 divisions (div) qui contiennent : une image, un titre 3, un paragraphe
- Donner une classe identique à ces 3 divisions
- Aux 3 images d'artiste, donner une classe identique
Dans Accueil.css :
1. Sur les sélecteur d'id #grille_images :
  - Affichage en flex
  - Direction du flex en colonne
  - Espace (gap) de 1rem
2. Sur la classe des 3 divisions
  - Taille de base (flex-basis) à 30%
  - alignement du texte centré
  - bordure blanche mince
  - espacement intérieur de 1rem
3. Sur la classe des 3 images
  - largeur de 35%
  - ombrage en décalage de 0.2rem (box-shadow : notes de cours semaine 4)

PAGE RÉACTIVE : requêtes média pour Base.css¶

Maintenant que la base est faite pour appareils mobiles, il faut créer les styles pour les écrans plus grands.

À la fin du fichier base.css.

Détecter quand la page est affichée sur un écran avec une largeur d'au moins 900px

@media screen and... à compléter
Ajouter les styles suivants lorsque l'écran a au moins 900px :
1. Sur le header
  - Espace intérieur (padding) haut et bas à 5rem
  - Taille depolice à 1.5rem
2. Sur la classe div_section
  - largeur de 60%
  - bloc centré (pas le texte, mais le bloc! Revoir notes de cours semaine 4)
3. Sur le footer
  - Direction du flex en ligne (row)
  - justifier le contenu centré

Le standard d'aujourd'hui est d'afficher un menu sous un icône qu'on appelle un "hamburger" lorsqu'on se trouve sur petits écrans :

TP3

Puisque le menu est le même sur toutes les pages, nous allons modifier le fichier base.css.

Les styles de base s'y trouvent déjà, on va ajouter ce qui manque pour le rendre réactif.

Mobile-first (styles par défaut)

Ajouter les styles suivants au même endroit où il y a déjà des styles de base pour le nav sur petits écrans.

Trouver l'ID au block div qui contient les liens du menu
Cacher le block (display)

Sur petits écrans uniquement

Avant la requête pour les grands écrans, ajouter une requête média pour les écrans de maximum 899 pixels (max-width).

Si on ne met pas ces styles dans une requête média, alors ils s'appliquent en tout temps!

Ajouter :

Lorsque la souris passe au-dessus du nav (:hover), le bloc de menu (id) doit avoir les styles :
devient un flexbox
direction en colonne

Tester votre menu sur petit écran : menu hamburger qui s'ouvre en colonne quand la souris passe au-dessus.

Grands écrans (sur 900px et plus)

Dans la requête média existante pour grands écrans :

Sur le nav, ajouter le nécessaire pour qu'il colle au haut de l'écran quand on défile vers le bas
Sur les liens du nav, modifier le padding à 1rem
Cacher l'icône ayant l'id "burger" avec display
Sur l'id de la div contenant les liens de menu :
- afficher en flexbox
- direction sur une ligne
- justifier le contenu du flex à centré (attention: ce n'est pas text-align!)
Tester que tout le menu fonctionne sur les deux pages du site!

Requêtes média pour Accueil.css¶

Tous les styles suivants vont dans le fichier accueil.css.

Détecter quand la page est affichée sur un écran avec une largeur d'au moins 601px

Sur l'id "grille_images" :
- changer la direction du flex pour une ligne
Détecter quand la page est affichée sur un écran avec une largeur d'au moins 900px :
- Image de la carte (id carte):
  - largeur de 50%
  - marge droite de 2rem
- division d'adresse :
  - affichage à côté de l'image à 40% de largeur
  - alignement vertical top
- paragraphes dans l'adresse : retirer les marges

Étapes pour la flèche de retour vers le haut¶

La flèche de retour est déjà sur la page, mais pas au bon endroit et on veut qu'elle apparaisse uniquement lorsque la page défile.

Dans base.css, le sélecteur d'id to_top_arrow est déjà là. Dans ce sélecteur, on fait déjà :

position fixe
le bas (bottom) de l'icône doit être à 10% du bas de la fenêtre du navigateur
le côté droit (right) à 5% du bord du navigateur
cacher la flèche par défaut (display)

TP3

Maintenant, on va utiliser du JavaScript pour afficher la flèche uniquement quand la page a défilé.

Sur les deux pages HTML, créer le lien vers le script fonctionScroll.js (se trouve dans le dossier script).
Sur la balise body des deux pages HTML, ajouter l'événement onscroll pour appeler la fonction du script lorsque la page défile
Dans le script, compléter la fonction :
NOTES
- document.documentElement.scrollTop : retourne le défilement du haut du document en pixels
- document.getElementById("").style : accède aux attributs CSS d'un élément spécifique, exemple :
  
  document.getElementById("titreSpecial").style.color = "red";
L'algorithme est le suivant :

si défilement du document > 350

Afficher la flèche en block (display:block)

sinon

Cacher la flèche (display: none)

Étapes pour la page Artiste¶

Ce qui suit se fait dans ARTISTE.CSS

La page artiste utilise une grille CSS (grid) pour la gallerie d'images (la div contenant les 10 images).

Par défaut (écrans mobiles)

La grille n'affiche que les images 1,4,6 et 8 une au-dessous de l'autre
- Dans le sélecteur #section-grid ajouter le modèle de grille pour ces 4 images
- Sur chaque image, donner la bonne zone de grille
- Cacher les images qui ne sont pas affichées sur écrans mobiles (display)
Le paragraphe sous la grille est visible

Sur grands écrans (900px et plus)

Sur écrans d'au moins 900px, le paragraphe sous le grille est caché
Lorsque la souris passe au-dessus d'un image, appliquer une transition de 0.5s pour changer son échelle à 1.5
la grille affiche les oeuvres de la façon suivante :
- donner le nouveau modèle
- afficher les images

Pour la grille, vous aurez besoin de :

utiliser les id déjà donnés à chaque image
cacher/afficher les images selon la taille d'écran
créer une grille pour la div qui contient les images
changer le modèle (template) de la grille selon la taille d'écran

Exemple :

#item1 { grid-area: header; }
#item2 { grid-area: menu; }
#item3 { grid-area: main; }
#item4 { grid-area: right; }
#item5 { grid-area: footer; }

#grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Validation du code¶

Assurez-vous que :

le header est pareil et réactif sur les deux pages
le nav est pareil et fonctionne (les liens aussi) sur les deux pages
le footer est pareil et réactif sur les deux pages
les sections gallerie et contact sur index sont réactives
la grille sur artiste est réactive
le bouton de retour vers le haut est pareil et fonctionnel sur les deux pages

Assurez-vous qu'il n'y a plus d'erreur dans le code.

Validateur

Correction¶

Élément	Points
Header + Footer	3pts
Nav	4pts
CSS sections index	4pts
CSS artiste (grid)	4pts
Flèche + Javascript	2pts
Structure du projet	1pt
Règles de programmation	1pt
Aucune erreur dans le code	1pt
TOTAL	20pts

Compte pour 5% de la session.

Le questionnaire sera déposé dans la semaine 9 et compte pour 2% de la session.

Remise¶

Ne pas oublier d'indiquer les noms des coéquipiers dans l'en-tête du HTML
Faire un dossier compressé de tout le projet
Remettre sur LÉA