Aller au contenu

Travail pratique #4

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 11 : 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 de se familiariser avec Bootstrap, notamment les éléments suivants :

  • Les carrousels
  • les cartes et le 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.

Il faut donc utiliser la documentation de Bootstrap pour :

  • aller chercher la base des éléments demandés
  • ajouter les classes nécessaires 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 Microsoft et vous devez utiliser les liens en ligne pour la source d'image
    ⚠️ NE PAS TÉLÉCHARGER LES IMAGES

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

Site de référence : https://www.xbox.com/fr-CA

Résultat attendu (exemple):

TP4

À faire

Si vous désirez y aller en ordre de complexité, voici les blocs de la page en ordre de difficulté :

🔽 Facile

  • Footer
  • Main : bloc de 3 jeux
  • Main : bloc Diablo IV
  • Nav
  • Main : grille
  • Header

🔼 Moyennement difficile

Ce ne sera pas 100% identique

L'idée du TP est d'utiliser Bootstrap pour obtenir un résultat similaire au site de Xbox.

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

Squelette HTML

Dans votre squelette HTML, ajouter les appels à Bootstrap suivants aux bons endroits selon le type de balise :

  • Bootstrap CSS

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

  • Bootstrap icônes

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

  • Bootstrap javascript

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Section header

Ce qui est utilisé

  • Carrousel
  • Diapositive (carousel item) en carte
  • Superposition de texte sur l'image de la carte
  • Flex pour le positionnement du texte superposé
  • Mise en forme de texte

TP4

La section header contient un carrousel de 2 diapositives.

➡️ Documentation Bootstrap sur les carrousels

  1. Créer un carrousel de 2 items

    Assurez-vous d'utiliser vos propres ID pour que ce soit représentatif dans votre code

  2. Le carrousel doit offrir les boutons suivant et précédent

  3. Le carrousel doit afficher les indicateurs de diapositive (indicators)

  4. Modifier les icônes suivant et précédent par des flèches dans un rond

    ➡️ Site d'icônes Bootstrap

  5. Chaque item de carrousel contient une carte

  6. Chaque carte possède une image et une superposition de texte

    • Image : utiliser le lien vers l'image en ligne de XBox.com

      Copier le lien de deux images du carrousel de XBox.com

      TP4

    • Transcrire les textes du site de Xbox.com

    • Appliquer les classes Bootstrap pour obtenir un affichage le plus près du site de Microsoft que vous en êtes capables

    ---> Exemple dans les notes de cours d'une carte avec superposition <---

    Aide sur le flex dans les notes de cours

    Aide Bootstrap sur le flex

    Aide Bootstrap sur les marges et le padding

    Aide Bootstrap sur les classes de texte

    Aide Bootstrap sur les couleurs de fond

    Aide Bootstrap sur les bordures

  7. Pour que le contenu soit réactif :

    • Assurez-vous que les classes du flex gèrent l'affichage du bloc de texte

      • Par défaut : contenu texte centré dans la carte
      • Sur écrans médium et plus : contenu postionné à droite et centré en hauteur

  8. Ajuster les tailles de texte, le gras, couleurs de fond, bordures, etc. (section Utilities de l'aide de Bootstrap)

CSS local autorisé pour le header

  • Appliquer des marges ou du padding autre que 0-25-50-75 ou 100 % (dans Bootstrap, les marges et le padding sont possibles avec des multiples de 25%)
  • Modifier la largeur de la zone de texte superposée sur écrans de 1000px ou plus

  • Donner une hauteur minimum à l'image de carrousel pour l'adaptation aux petits écrans

    Dans la reproduction du prof, on modifie la classe Bootstrap avec un min-height dans le CSS local : 

    .card-img{
    min-height: 20rem;
}

  • Appliquer l'effet suivant sur le lien cliquable

    Exemple :

    TP4

    Voici ce qui a été fait dans l'exemple.

    HTML 

    <a href=""class="... link-effect">
    Obtenez-le maintenant
    <span class="bi bi-chevron-right"></span>
</a>
    CSS 
    .link-effect span {
    transition: transform 0.5s;
}
.link-effect:hover {
    text-decoration: underline;
    color: #06fd06;
}
.link-effect:hover span {
    display: inline-block;
    transform: translate(75%);
}

Section nav

Ce qui est utilisé

  • container
  • grille et gestion du nombre de colonnes par taille d'écran
  • icônes Bootstrap
  • mise en forme de texte

TP4

  1. La balise nav est un container avec texte centré

  2. Dans le nav, on trouve une div pour créer une ligne de grille

    La ligne de grille gère le nombre de colonnes sur petits écrans et pour écran médium et plus

    Exemple :

    <!--Une colonne par défaut, 4 colonnes sur écrans médium et plus-->
    <div class="row row-cols-1 row-cols-md-4">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>

  3. Chaque item de menu est un lien cliquable (qui mène nulle part)

  4. Dans le lien cliquable, on trouve un icône Bootstrap et du texte (voir le site de XBox pour les éléments de menu)

    lien vers les icônes Bootstrap

  5. Ajuster la taille de texte, le gras, etc...

CSS local autorisé pour le nav

  • Couleur du texte (va aussi s'appliquer sur les icônes): #117d11;

  • Lorsque la souris passe au-dessus d'un lien cliquable du nav :

    • ajouter un souligné
    • modifier l'épaisseur du souligné (text-decoration-thickness)

Section main

La section main contient 3 blocs indépendants.

La balise <main> n'a aucune classe.

Nous utiliserons des divisions <div> pour créer les blocs dans le main.

Bloc Diablo IV

La première division est une carte avec du texte superposé.

---> Exemple dans les notes de cours d'une carte avec superposition <---

  1. L'image se trouve plus bas sur la page de XBox.com.

  2. Utilisez les fonctionnalités du flex pour positionner le texte superposé selon les tailles de fenêtre.

    TP4

  3. Ajuster la taille de texte, le gras, etc...

CSS local autorisé pour la carte

  • Modifier la largeur de la zone de texte sur écrans de 1000px ou plus
  • Appliquer la même animation que celle appliquée sur les liens du carrousel (utiliser la même classe)

Bloc de 3 cartes de jeux

TP4

  1. Créer un groupe de 3 cartes (card group).

    Aide Bootstrap sur les groupes de cartes

  2. Chaque carte possède une image et un titre uniquement.

    Lien vers la page de jeux où trouver de slines d'images de la bonne taille

  3. Les cartes n'ont pas de bordure par défaut (comme sur le site de référence).

    Lien vers l'aide Bootstrap sur les bordures

  4. Utilisez un contenant (container) comme parent du groupe de cartes pour positionner les cartes sur grand écran.

  5. Appliquer une marge en X sur écrans médium et plus sur la carte du centre uniquement

    Aide Bootstrap sur les marges

CSS local autorisé pour le groupe de cartes

  • Lorsque la souris passe au-dessus d'une carte du groupe :

    • appliquer une bordure noire autours de l'image
    • appliquer un souligné sous le titre

Bloc grille

Tp4

Voici la grille à créer sur grands écrans:

TP4

Sur petits écrans, les deux colonnes principales se positionnent une en-dessous de l'autre :

TP4

Donc la structure de base du HTML est la suivante :

TP4

Aide Bootstrap sur les grilles

  1. Reproduire le début de la grille sur la page XBox : https://www.xbox.com/en-CA/

  2. Utilier la superposition sur les cartes pour positionner le texte des deux cartes

    Exemple dans les notes de cours

  3. Utiliser les capacités du flex pour positionner le texte dans les sous-grilles

    Notes de cours sur les flex

    Aide Bootstrap sur les flex

  4. UTiliser les classes de texte pour l'apparence des textes

CSS autorisé pour la grille

  • Couleur de fond vert : background-color: #117d11;
  • Appliquer la même animation que celle appliquée sur les liens du carrousel (utiliser la même classe)

  • Sur écrans d'au moins 1000px, ajouter une animation d'agrandissement sur les images de la sous-grille

    Voici comment c'est fait dans l'exemple du prof :

    <div class="col img-transform">
    <img>
</div>

    .img-transform {
    overflow: hidden; /*cacher ce qui déborde du parent*/
}

.img-transform img {
    transition: transform 1s; 
    /*transition : on le fait en-dehors du hover pour que la transition s'applique en entrée et en sortie*/
}

.img-transform img:hover {
    transform: scale(1.08); /*transofrmation de l'image lorsque la souris passe au-dessus*/
}

La balise footer est un container-fluid avec texte centré.

On y retrouve :

Ajouter les classes Bootstrap nécessaires pour la couleur de fond, couleur de texte, taille de texte, etc.

Aucun CSS local autorisé pour le footer

Textes:

Droits d'auteur : tout le contenu visuel et les textes sont la propriété exclusive de Microsoft et Xbox.com

La reproduction de ce site est purement produite dans un objectif pédagogique pour le cours d'Interfaces Web

Toute utilisation du contenu en dehors du cadre du cours est illégal

TP4

Validation

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

https://validator.dinf.ca/#textarea

Barème de correction

⚠️ Bootstrap 5.3.3 exigé !

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

Élément Points
Carrousel 4pts
Nav 4pts
Carte avec overlay 2pts
Groupe de 3 cartes 2pts
Grid 8pts
Footer 1pt
Aucun CSS personnalisé autre que celui demandé 1pt
Respect des droits d'auteur : aucune image téléchargée 1pt
Règles de programmation 1pt
Aucune erreur dans le code 1pt
TOTAL 25pts

Compte pour 5% de la session.

Le questionnaire en lien avec ce TP sera déposé dans la semaine 11 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 , balise d'auteur
  • Faire un dossier compressé de tout le projet
  • Remettre sur LÉA