Aller au contenu

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

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 de pratiquer les composants principaux de Bootstrap, notamment les éléments suivants :

  • les barres de navigation
  • les carrousels
  • les cartes et les superpositions
  • les grilles
  • l'affichage en flex

Projet

⚠️ Aucun projet n'est fourni ici, car la majorité des éléments seront pris dans la documentation de Bootstrap ou dans les notes de cours.

Il faut donc utiliser la documentation de Bootstrap ou les notes de cours pour :

  • aller chercher la base des éléments demandés
  • modifier et adapter pour obtenir l'affichage désiré

Important

  • Les classes Bootstrap permettent de tout faire ce qui est demandé, sauf quelques exceptions
  • Le seul CSS atorisé sera mentionné dans l'énoncé pour ces quelques exceptions
  • Respecter la même structure de projet utilisée depuis le début de la session
  • Les images sont la propriété de EBox et il est important de le mentionner dans le pied de page tel qu'indiqué dans les instructions

Nous allons nous inspirer et reproduire des parties d'un site existant à l'aide de Bootstrap.

  • Site de référence : https://www.ebox.ca/quebec/affaires/
  • 📢 Utiliser ce site pour copier les contenus textes et vous donner une idée du résultat attendu
  • ➡️ Le résultat final attendu est représenté au bas de l'énoncé dans la section "Page Finale"

Résultat attendu :

On désire une reproduction la plus rapprochée possible du site de référence en utilisant Bootstrap.

Ce ne sera pas 100% identique

L'idée du TP est d'utiliser Bootstrap pour obtenir un résultat le plus similaire possible au site de référence.

Vous ne pourrez pas atteindre un site identique avec ce qui est demandé, mais vous vous en approcherez à 90%.

Attention

Je ne donne pas tous les détails des classes nécessaires pour arriver au résultat final...

Il faudra donc utiliser les classes de texte, de couleurs, de marges, de padding, pour obtenir le résultat demandé au-delà des grandes lignes fournies.

Quelques classes utiles :

  • fs : les classes de font-size
  • fw : les classes de font-weight
  • text-uppercase : affichage en majuscules
  • p : les classes de padding
  • m : les classes de margin
  • border : les classes de bordures

Inclure Bootstrap

Dans votre squelette HTML, ajouter les appels à Bootstrap suivants aux bons endroits tel que vu à la semaine 8 :

  • Bootstrap CSS

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

  • Bootstrap script

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"   integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Images

Pour vous aider, j'ai téléchargé et modifié au besoin les images nécessaires au projet afin de vous faciliter la vie.

➡️ Télécharger les images

Le nav contient 2 barres de navigation.

On débute donc le HTML du nav comme suit :

<nav>
    <!--Première barre-->
    <div class="navbar ...">
        ...
    </div>

    <!--Deuxième barre-->
    <div class="navbar ...">
        ...
    </div>
</nav>

NOTE : Les liens peuvent mener nulle part dans votre page avec href="#".

Première barre de navigation :

  • Toujours étendue sur une ligne peu importe la taille d'écran
  • Éléments toujours à droite de la barre
  • Fond foncé noir, texte blanc
  • Padding sur les liens cliquables
  • Bordure droite sur les deux liens du centre

Deuxième barre de navigation :

  • La barre est en burger sur petits écrans, puis s'étend sur une ligne à partir d'écrans larges
  • Au lieu d'un container fluid, c'est un container à partir d'écrans larges
  • Le logo (ebox-logo.png) et le numéro de téléphone sont placés dans le bloc de marque de commerce
  • Tous les autres éléments sont des items de navigation, incluant l'icône de connexion
  • L'icône de connexion (circle-user-regular-full.svg) se place à droite de la barre sur écrans larges et plus (marge automatique)

Résultat :

TP3

TP3

CSS LOCAL AUTORISÉ POUR LE NAV

Voici le seul CSS local que vous avez besoin pour les barres de navigation :

  1. Créer une classe et lorsque la souris passe au-dessus de cette classe : appliquer un souligné

    Appliquer cette classe sur les liens cliquables des deux barres (elle sera aussi utilisée dans le footer)

  2. Ajuster la taille du logo de connexion

Tous les autres styles sont produits par Bootstrap

Le header est le bloc le plus complexe du TP ! 💪

Allez-y graduellement, une diapositive à la fois.

  • La première et la dernière diapositive se ressemblent beaucoup.
  • La deuxième et la troisième diapositive se ressemblent beaucoup.

  1. Créer une classe dans votre CSS qui définit une hauteur (height) de 20rem.

  2. Ajouter une requête média pour écrans de minimum 992px et dans la classe créée définir une hauteur de 30rem.

    Cette classe sera utilisée pour s'assurer que chaque diapositive du carrousel aient la même hauteur.

  1. Dans le header, on insère un carrousel de 4 diapositives.

  2. Le carrousel possède quatre indicateurs au bas

  3. Le carrousel n'a pas de bouton précédent ou suivant

  1. La première diapositive

    • contient une carte avec superposition de texte sur image
    • l'image de fond est group.png
    • le contenu superposé comporte un titre, un paragraphe et un bouton
    • Appliquer la classe de hauteur créée dans votre CSS à la carte

    CSS local autorisé pour la première diapo
    Tous les autres styles sont produits par Bootstrap

    • largeur du contenu superposé sur différentes tailles d'écran
    • ajustement des tailles de polices sur petits écrans / grands écrans
    • ajustement de la hauteur de l'image de fond (avec height à 100%)

    tp3

  1. La deuxième diapositive contient une grille

    • La rangée centre les colonnes en largeur et en hauteur
    • La première colonne utilise 5 fragments sur écrans médium et plus et contient : un titre et deux paragraphes
    • La deuxième colonne utilise 4 fragments sur toutes tailles d'écrans et contient l'image trophee.png
    • l'image est fluide
    • Appliquer la classe de hauteur créée dans votre CSS à la rangée de la grille

    AUCUN CSS LOCAL SUPPLÉMENTAIRE, tous les styles sont produits pas Bootstrap

    tp3

  1. La troisième diapositive contient une grille

    • La rangée centre les colonnes en largeur et en hauteur
    • Appliquer la classe de hauteur créée dans votre CSS à la rangée de la grille
    • La première colonne utilise 3 fragments sur écrans médium et plus et contient : un titre et un bouton
    • La deuxième colonne utilise 4 fragments sur toutes tailles d'écrans et contient l'image television.png
    • l'image est fluide

    AUCUN CSS LOCAL SUPPLÉMENTAIRE, tous les styles sont produits pas Bootstrap

    tp3

  1. La quatrième diapositive

    • contient une carte avec superposition de texte sur image
    • Appliquer la classe de hauteur créée dans votre CSS à la carte
    • l'image de fond est bg-reseau-prive.jpg
    • le contenu superposé comporte un titre, un paragraphe et un bouton et est centré en hauteur et en largeur

    CSS local autorisé pour la dernière diapo
    Tous les autres styles sont produits par Bootstrap

    • ajustement des tailles de polices sur petits écrans / grands écrans
    • ajustement de la hauteur de l'image de fond (avec height à 100%)

    tp3

MAIN

Le main contient 2 blocs :

  • une grille de 3 cartes
  • une carte avec superposition

Tp3

Grille de cartes

  • la grille applique des "gutters" (gouttières = espace) de niveau 2
  • chaque colonne prend 4 fragment à partir d'écran médium
  • chaque colonne contient une carte
  • chaque carte contient une image dont la taille est ajustée à 25%, centrée
  • Les images sont cachées sur petit écran, puis affichées sur écrans moyens et plus
  • chaque carte contient un corps (card-body)
  • dans le corps des cartes, il y a un titre et un bouton
  • un ombrage est appliqué sur chaque carte

✳ Section Page Finale plus bas montre le résultat final.

Carte large avec superposition

  • L'image de fond de la carte est triangle_rouge.png
  • le bloc superposé sur l'image contient une grille

  • la première colonne a 3 fragments sur écrans médium et plus

    • la colonne contient l'image devices.png
    • l'image est fluide
    • l'image est cachée sur mobile et apparaît sur écrans médium et plus

  • la deuxième colonne a 5 fragments sur écrans médium et plus

    • la colonne affiche le texte centré par défaut, puis affiche le texte à gauche sur écrans médium et plus
    • la colonne contient un titre, un paragraphe et un bouton

  • la rangée de la grille positionne les 2 colonnes centrées dans la rangée (pour information, la classe row est automatiquement flex...)

CSS LOCAL AUTORISÉ POUR LE MAIN

Le CSS local nécessaire est le suivant :

  • Sur les cartes de la grille, lorsque la souris passe au-dessus d'une carte, modifier les couleurs

    TP3

  • Sur l'image de fond de la carte large avec superposition, appliquer une hauteur minimale de 25rem

    Sur mobile, elle a donc l'apparence suivante :

    TP3

Le footer est un container fluid.

Dans le footer, il y a un container pour limiter la largeur du contenu.

Dans le container, on retrouve 3 blocs :

  • 1 paragraphe avec bordure bas, padding en Y, sans marges

  • 1 div en flex avec bordure bas et padding en Y

    • contient 5 liens cliquables
    • appliquer la classe créée dans le header pour afficher un souligné sur les liens cliquables lors du survol
    • un div positionnée à droite contient les 3 images
    • le flex affiche en colonne par défaut, puis sur une ligne sur écrans médium et plus

  • une div en flex avec padding du haut

    • contient 2 paragraphes de droits d'auteur ⚠️ très important !
    • le flex affiche en colonne par défaut puis sur une ligne sur écrans médium et plus

AUCUN NOUVEAU CSS LOCAL POUR LE FOOTER

TP3

TP3

Page Finale

Sur petits écrans :

tp3

Sur grands écrans :

tp3

Validation

Ne pas oublier de valider le code HTML et CSS à l'aide du validateur :

https://validator.w3.org/#validate_by_input

Barème de correction

⚠️ Bootstrap 5.3.8 exigé !

Faites attention aux ressources en ligne qui utilisent souvent des vieilles versions de Bootstrap!

Élément Points
Nav 3pts
Carrousel 5pts
Grille de cartes 3pts
Carte avec overlay 2pts
Footer 2pts
Aucun CSS personnalisé autre que celui autorisé 1pt
Apparence le plus similaire possible à l'exemple donné 1pt
Règles de programmation (présentation du code, commentaires, versions) 2pts
Aucune erreur dans le code 1pt
TOTAL 20pts

Compte pour 5% de la session.

Remise

  • Ne pas oublier d'indiquer les deux noms des coéquipiers dans la balise d'auteur dans le <head>
  • Faire un dossier compressé de tout le projet
  • Remettre sur LÉA