Aller au contenu principal

Séminaire

Objectifs​

  • Connaître la syntaxe du langage CSS.
  • Ajouter du style CSS à une page HTML.
  • Utiliser les outils de développement pour inspecter et modifier le style d'une page web.

Rendu​

Mise en place​

  • Cloner le dépôt GitHub Classroom de cette semaine à côté de celui des semaines précédentes.
    • git clone {url_du_depot} depuis le répertoire du cours.
    • inf5/
      ├── sem01-environment-{pseudo}/
      ├── sem02-html-{pseudo}/
      └── sem03-css-{pseudo}/
  • Ouvrir le dossier du dépôt dans Visual Studio Code.
    • Avec le terminal : code {dossier_du_depot}
    • Avec Visual Studio Code : Fichier > Ouvrir dossier > sélectionner le dossier du dépôt
  • Créer un fichier .gitignore à la racine du dépôt avec le contenu suivant :
./.gitignore
# macOS
.DS_Store

# Node.js
node_modules/

Estimation​

  • Créer un ficher report.md dans le dossier du dépôt.
  • Estimer le temps nécessaire pour réaliser ce travail dans le rapport.
    • Découper le travail en tâches pour faciliter l'estimation.
  • Une fois terminé, comparer le temps estimé avec le temps réellement passé.
  • Le but n'est pas d'estimer correctement, mais de comprendre comment améliorer ses estimations.
TâcheTemps estiméTemps passéCommentaire
Estimation10m15m...
............
Total2h1h30...

Tutoriel​

Suivre les tutoriels suivants pour se familiariser avec CSS (utiliser CodePen ou Visual Studio Code) :

Aventure stylisée​

Le but est de reprendre le site HTML créé lors du séminaire précédent et de lui appliquer du CSS pour le styliser. Voici les étapes à suivre :

  • Copier les fichiers html du dossier sem02-html-{pseudo}/ dans le dossier sem03-css-{pseudo}/.
  • Créer un fichier main.css à la racine du dépôt avec le contenu suivant :
    ./main.css
    body {
      background-color: #fdf6e3;
      color: #657b83;
    }
    p {
      font-size: 20px;
    }
  • Reformater le code si nécessaire.
  • Appliquer le style à tous les fichiers HTML en ajoutant <link rel="stylesheet" href="main.css" /> dans le head de chaque fichier HTML : 
    <!doctype html>
    <html lang="fr">
      <head>
        ...
        <link rel="stylesheet" href="main.css" />
      </head>
      <body>
        ...
      </body>
    </html>
  • Observer le changement de style sur toutes les pages.
  • Changer le fichier main.css pour appliquer les modifications suivantes :
    • Couleur de fond : #eee8d5 (beige)
    • Couleur des titres : #268bd2 (bleu)
    • Couleur des liens : #dc322f (rouge)
    • Couleur des liens au survol (lorsqu'on passe la souris dessus) : #6c71c4 (violet)
    • Enlever le soulignement des liens.
    • Changer la police de caractères de toute la page en monospace.
  • Créer un commit nommé Ajouter le style de base avec les changements.
  • Modifier le fichier main.css pour personnaliser le style de son jeu.
  • Créer un commit nommé Ajouter un style personnalisé avec les changements.
Astuce

Visual Studio Code propose l'autocomplétion (Ctrl + Espace) des propriétés CSS. Commencer par taper le nom de la propriété et regarder les suggestions proposées.

Source : https://code.visualstudio.com/docs/languages/css

Voici d'autres améliorations possibles à apporter au style de son jeu :

Police d'écriture​

Utiliser une police d'écriture personnalisée externe.

  • Choisir une police sur Bunny Fonts.
  • Une fois la police choisie :
    • Cliquer sur la police choisie pour accéder à sa page.
    • Cliquer sur le bouton "Add variant" pour sélectionner la police.
    • Cliquer sur le bouton "Fonts +" en haut à droite.
  • Copier le code qui ressemble à @import url(https://fonts.bunny.net/css?family=inconsolata:500); au tout début du fichier main.css.
  • Copier l'attribut font-family depuis le site dans la règle body dans le fichier main.css. Par exemple, pour la police Inconsolata : 
    @import url(https://fonts.bunny.net/css?family=inconsolata:500);
    body {
      font-family: 'Inconsolata', monospace;
      ...
    }
  • Utiliser une police différente entre les titres et le reste du texte.

Images de fond​

Utiliser la propriété CSS background-image pour ajouter une image de fond à toutes les pages (pour une seule page, voir les sélecteurs de classe par la suite) :

body {
  background-image: url("images/fond.jpg");
}

Le code ci-dessus ajoute une image de fond à télécharger au préalable qui se trouve dans le dossier images.

Utiliser background-size et/ou background-repeat pour ajuster l'affichage de l'image de fond.

Sélecteurs de classe​

Pour ajouter un style à un élément spécifique (pas lié à une balise), on peut utiliser des classes. En voici deux exemples d'utilisation :

Liens particuliers​

Pour appliquer un style spécifique à un lien (par exemple, le lien pour recommencer le jeu) :

  • Choisir un nom de classe significatif (p. ex. recommencer pour un lien qui permet de recommencer le jeu).
  • Ajouter l'attribut class à la balise HTML correspondante. Par exemple, pour un lien <a> : 
    <a class="recommencer" href="index.html">Recommencer le jeu</a>
  • Dans le fichier main.css, ajouter une règle CSS pour la classe en utilisant le sélecteur . suivi du nom de la classe. Par exemple, pour la classe recommencer : 
    .recommencer {
      color: #859900;
    }

Image de fond spécifique​

Pour avoir une image de fond seulement pour une page spécifique :

  • Dans le fichier HTML, ajouter une classe au body (p. ex. carte) : 
    <body class="carte">
      ...
    </body>
  • Dans le fichier main.css, ajouter une règle CSS pour la classe carte : 
    .carte {
      background-image: url("images/carte-fond.jpg");
    }

Div​

Ajouter des balises <div> pour regrouper des éléments et leur appliquer un style spécifique. Par exemple, pour regrouper les titres et les paragraphes d'une page :

<div class="contenu">
  <h1>Titre de la page</h1>
  <p>Paragraphe de la page.</p>
</div>
./main.css
.contenu {
  background-color: red;
}

Voici un exemple de style pour une page du jeu : https://web.blueur.com/aventure-bootstrap/aventure.html

Autres propositions d'améliorations​

  • Utiliser la propriété CSS text-align pour aligner le texte à gauche, au centre ou à droite.
  • Utiliser la propriété CSS margin et padding pour ajuster les espaces autour des éléments.
  • Utiliser la propriété CSS border pour ajouter des bordures aux éléments.
  • Utiliser la propriété CSS box-shadow pour ajouter des ombres aux éléments.
  • Centrer des éléments en CSS.

Rapport​

  • Expliquer brièvement les principales difficultés rencontrées et comment les résoudre.
  • Compléter les estimations.
Git

Ne pas oublier de pousser tous les commits sur le dépôt Git distant (et de vérifier sur GitHub).

Hébergement​

  • Créer un fichier vide .nojekyll à la racine du dépôt.
  • Publier le site sur GitHub Pages.
  • Ajouter le lien du site dans le rapport.

Validation​

Vérifier la syntaxe des fichiers HTML et CSS avec les outils de validation en ligne :

Test​

Créer un fichier test.js à la racine du dépôt avec le contenu suivant :

test.js
import test from "node:test";
import assert from "node:assert/strict";
import fs from "node:fs";
import { execSync } from "child_process";

test("présence des fichiers et dossiers", () => {
  // Liste des chemins attendus dans le projet.
  const expectedPaths = [
    ".git",
    ".gitignore",
    ".nojekyll",
    "index.html",
    "main.css",
    "report.md",
    "test.js",
  ];
  // Vérifie que chaque chemin existe dans le projet.
  expectedPaths.forEach((path) => {
    assert.ok(
      fs.existsSync(path),
      `Le fichier ou dossier ${path} doit exister.`,
    );
  });
});

test("validation des fichiers html", () => {
  // Exécute la validation HTML en utilisant https://html-validate.org/
  try {
    const output = execSync(
      "npx -y html-validate -p=recommended,prettier **/*.html",
    ).toString();
    console.log(output);
  } catch (error) {
    assert.fail(error.output);
  }
});

test("validation des fichiers css", (t) => {
  // Exécute la validation CSS en utilisant https://github.com/CSSLint/csslint
  try {
    const output = execSync("npx -y csslint .").toString();
    console.log(output);
  } catch (error) {
    assert.fail(error.output);
  }
});

Vérifier que les tests passent avec la commande node --test et corriger le code si cela n'est pas le cas.

Pour exécuter la validation CSS manuellement en ligne de commande :

npx -y csslint .

Outils de développement​

  • Ouvrir les outils de développement.
  • Utiliser les outils de développement pour :
    • Observer les styles appliqués à un élément
      • Clic-droit sur un élément > Inspecter > Sous-onglet Styles
    • Modifier le style d'un élément :
      • Clic-droit sur un élément > Inspecter > Changer la couleur de fond en rouge par exemple.
      • Comment réagit la page ? Le changement est-il permanent ?

Bonus​

Exercices supplémentaires​

Références​

Dernière mise à jour le