Laboratoire semaine 5¶
Consignes
Ce laboratoire vous permet de vous familiariser avec:
- Le flexbox
- Les requêtes média et les pages réactives
Vous pouvez faire ce travail en équipe de 2 si vous le souhaitez. Inscrivez le nom des deux coéquipiers dans la balise d'auteur dans ce cas.
Important:
Les exercices sont à compléter en laboratoire;
La page web est à compléter et remettre d'ici à la date limite indiquée sur LÉA, dès le retour de la semaine de lecture.
Les exercices de laboratoire - 3%¶
Les exercices sont à compléter durant la période de laboratoire.
⚠️ Faire corriger avant de quitter.
-
Télécharger le projet associé à ton groupe :
-
Compléter et faire valider les exercices en laboratoire
-
Exercice de flexbox
- Exercice de requêtes média
Barème
| Élément | Résultat attendu | pts |
|---|---|---|
| Flexbox | Présentation finale | 1pt |
| Requêtes media | Fonctionnement complet | 1pt |
| Validation du code | Aucune erreur | 1pt |
La page web - 4%¶
Ce travail est à compléter et remettre avant le prochain laboratoire (au retour de la semaine de lecture).
Vous devez concevoir une page Web réactive (responsive) qui s'adapte automatiquement à la taille de l'écran.
Votre page devra être conçue selon une approche mobile-first et utiliser :
- HTML5 sémantique;
- CSS;
- Flexbox;
- requêtes média (@media);
- unités CSS fluides;
- une mise en page qui se transforme réellement selon la taille de l'écran.
Sujets¶
Vous êtes libres de choisir le thème de votre site.
Quelques idées :
- 🎮 boutique de jeux vidéo
- 🍕 restaurant
- 🎵 festival de musique
- 🎬 cinéma
- ✈️ agence de voyages
- 🎨 galerie d'art
NOTE: Vous pouvez décider de travailler à partir du laboratoire 4 si vous le souhaitez et l'adapter aux exigences de cet énoncé.
📱💻🖥️ Les trois tailles d'écran¶
📱1. MOBILE
Pour les petits écrans, on retrouve trois blocs principaux sur la page : la navigation, le main et le footer.
NAVIGATION
Votre navigation doit utiliser une disposition en colonne.
Par exemple :
LOGO
ACCUEIL
SERVICES
CONTACT
MAIN
Une seule section du <main> doit être visible.
On obtiendra une page simple sur mobile :
┌─────────────────────┐
│ NAV │
├─────────────────────┤
│ │
│ SECTION 1 │
│ │
├─────────────────────┤
│ FOOTER │
└─────────────────────┘
Les sections 2 et 3 doivent être cachées sur mobile.
📱➡️💻 2. TABLETTE
À partir de 600px, votre page doit changer de disposition.
EN-TÊTE
L'en-tête apparaît avec uniquement un titre.
NAVIGATION
La navigation doit adopter une deuxième disposition différente.
Par exemple :
LOGO ACCUEIL SERVICES CONTACT
MAIN
Deux sections doivent être visibles.
┌──────────────────────--────────┐
│ HEADER │
├────────────────────────--──────┤
│ LOGO | ACCUEIL | SERVICES... │
├─────────────────────────--─────┤
│ │
│ SECTION 1 │
│ │
├──────────────────────────--────┤
│ │
│ SECTION 2 │
│ │
├──────────────────────────--────┤
│ FOOTER │
└──────────────────────────────┘
La troisième section doit être cachée.
🖥️ 3. PC / GRAND ÉCRAN
À partir de 1200px et plus :
EN-TÊTE
L'en-tête affiche une image à côté du titre.
NAVIGATION
La navigation doit adopter une troisième disposition différente.
Elle peut par exemple devenir :
LOGO ACCUEIL SERVICES PRODUITS CONTACT
Elle doit être différente des deux dispositions précédentes.
MAIN
Les trois sections doivent être visibles.
┌─────────────────────────────────────────┐
│ HEADER │
├─────────────────────────────────────────┤
│ LOGO ACCUEIL SERVICES...│
├─────────────────────────────────────────┤
│ │
│ SECTION 1 │
│ │
├──────────────────────────-----------────┤
│ │
│ SECTION 2 │
│ │
├──────────────────────────-----------────┤
│ │
│ SECTION 3 │
│ │
├─────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────┘
Une section avec 2 cartes¶
Au moins une des trois sections du <main> doit contenir au moins deux blocs.
Par exemple :
┌──────────────────┐ ┌──────────────────┐
│ │ │ │
│ Titre de film │ │ Titre du film │
│ │ │ │
│ Synopsis │ │ Synopsis │
│ │ │ │
│ image │ │ image │
└──────────────────┘ └──────────────────┘
Ces blocs doivent aussi être réactifs.
Vous devez réfléchir à leur disposition sur les différents écrans.
Par exemple :
📱 Tablette
┌────────────--───┐
│ CARTE 1 │
└────────────--───┘
┌──────────────--─┐
│ CARTE 2 │
└────────────--───┘
💻 PC
┌────────────--───┐ ┌─────────--──────┐
│ CARTE 1 │ │ CARTE 2 │
└────────────--───┘ └──────────--─────┘
Pied de page¶
Votre footer doit être présent dans les trois formats.
Il doit contenir 2 blocs d'information sur PC.
Exemple :
CONTACT SUIVEZ-NOUS
418-555-5555 Instagram
<info@site.ca> Facebook
Québec YouTube
Le footer doit lui aussi s'adapter aux tailles d'écran et afficher les blocs un au-dessus de l'autre sur petit écran.
Checklist avant de remettre¶
- Header invisible sur écran mobile, présent avec contenu différent selon la taille d'écran
- Nav présent en 3 dispositions différentes selon la taille d'écran
- Main présent avec 3 sections dont le nombre visible change sur chaque taille d'écran
- Au moins une section qui contient au moins 2 blocs qui changent de disposition sur 2 tailles d'écran différentes
-
Footer présent avec 2 blocs d'information
-
Mobile-first respecté
- 3 tailles d'écran respectées
-
Le contenu change de disposition selon la taille d'écran
-
Plus d'erreur dans le validateur
- Présentation du code (mise en forme du code)
Remise sur LÉA¶
La remise se fait sur LÉA à l'aide d'un fichier ZIP.
Voici comment faire une remise :
-
Compresser votre dossier principal de projet avec tout son contenu :
Validez que votre fichier ZIP contient tout le contenu de votre dossier avec :- Pages HTML
- dossier d'images
- dossier de styles
-
Faire la remise sur LÉA :
- Se connecter sur Omnivox
-
Aller dans LÉA
-
Trouver le cours d'Interfaces Web
-
Cliquer sur Travaux et remises
-
Cliquer sur le travail à remettre - Laboratoire 4
- Effectuer la remise du travail
Lorsque la page est rafraîchie, un crochet vert apparaîtra à côté du travail pour indiquer que la remise a bien fonctionnée.
ATTENTION
Toujours garder une copie de votre travail au cas où la remise n'aurait pas bien fonctionné!