Séminaire

Objectifs

Estimer son temps de travail.
Créer un site en HTML.

Rendu

GitHub Classroom : https://classroom.github.com/a/Fqy_JiLa
Délai : 1 semaine

Mise en place

Cloner le nouveau dépôt GitHub Classroom de cette semaine à côté de celui de la semaine précédente.
- git clone {url_du_depot} depuis le répertoire du cours.
- ```
inf5/
├── sem01-environment-{pseudo}/
└── sem02-html-{pseudo}/
```
Ouvrir le dossier du dépôt dans Visual Studio Code.
- Avec le terminal : code sem02-html-{pseudo}
- 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 :
```
# macOS
.DS_Store
```

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âche	Temps estimé	Temps passé	Commentaire
Estimation	10m	15m	...
...	...	...	...
Total	2h	1h30	...

Aventure d'exemple

On va créer un jeu interactif semblable au livre dont vous êtes le héros sur une page Web avec des liens pour naviguer entre les différentes étapes.

Voici un scénario d'exemple à réaliser dans un premier temps :

Installer l'extension Live Server sur Visual Studio Code.

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

index.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Web</title>
  </head>
  <body>
    <h1>Titre de la page</h1>
    <p>Contenu de la page</p>
  </body>
</html>

Ouvrir le fichier index.html avec Live Server.
- Clic droit sur le fichier index.html > Ouvrir avec Live Server.
- Ou cliquer sur Go Live en bas à droite dans Visual Studio Code qui va ouvrir le fichier courant.
Modifier la page Web et observer les changements.
- Modifier le titre de l'onglet (title).
- Modifier le titre de la page (h1).
- Modifier le contenu de la page (p).

Modifier le contenu du fichier index.html avec le contenu suivant :

index.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure</title>
  </head>
  <body>
    <h1>Rangement</h1>
    <p>
      Vous décidez de faire du rangement dans votre maison. Par où commencer ?
    </p>
    <ul>
      <li>Descendre à la cave.</li>
      <li>Monter au grenier.</li>
    </ul>
  </body>
</html>

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

cave.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure</title>
  </head>
  <body>
    <h1>Cave</h1>
    <p>Vous êtes à la cave. Que voulez-vous faire ?</p>
    <ul>
      <li>Dépoussiérer.</li>
      <li>Trier les affaires.</li>
    </ul>
  </body>
</html>

Un clic sur Descendre à la cave. dans index.html devrait rediriger vers cave.html. Modifier le fichier index.html pour ajouter un lien vers cave.html :
index.html
```
<li><a href="cave.html">Descendre à la cave.</a></li>
```

De manière similaire, lorsqu'on choisit de dépoussiérer la cave, on aimerait être redirigé vers passage.html dont le contenu est :

passage.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure</title>
  </head>
  <body>
    <h1>Passage</h1>
    <p>
      En dépoussiérant, vous découvrez une petite trappe. En l'ouvrant, vous
      trouvez un passage secret qui vous mènera vers d'autres aventures...
    </p>
  </body>
</html>

Créer les pages tresor.html, grenier.html, souvenirs.html et lecture.html en suivant le même principe.
- tresor.html : En triant les affaires, vous trouvez un vieux coffre rempli de pièces d'or !
- grenier.html : Vous êtes dans le grenier. Que voulez-vous faire ? avec les liens :
  - Trier les affaires. vers tresor.html
  - Regarder les cartons. vers souvenirs.html
  - Lire les livres. vers lecture.html.
- souvenirs.html : En regardant les cartons, vous tombez sur de vieux souvenirs d'enfance qui vous rendent nostalgique.
- lecture.html : En lisant un des livres, vous découvrez une carte au trésor !

Le jeu doit être jouable et l'arborescence du projet doit ressembler à ceci :

./
├── cave.html
├── grenier.html
├── index.html
├── lecture.html
├── passage.html
├── souvenirs.html
└── tresor.html

Créer un commit nommé Ajouter l'aventure d'exemple avec les changements.

Aventure personnalisée

Reprendre l'aventure d'exemple pour créer sa propre aventure personnalisée.

Prendre le temps pour réfléchir à un scénario pour son jeu :
- Une histoire simple, courte et cohérente.
- Des choix intéressants à faire.
- Des conséquences différentes (et réutilisables).
- Viser une petite histoire dans un premier temps (environ 7 étapes).
Commencer par dessiner l'organigramme pour avoir une idée claire des différentes étapes et des liens entre elles.
- Outils possibles : draw.io, Mermaid Live Editor, Word, …
- Ajouter l'organigramme dans le rapport sous forme d'image.
Modifier les fichiers HTML pour créer son propre jeu.
- Renommer les fichiers HTML avec des mots-clefs (pas d'accents ni d'espaces).
  - Garder le fichier index.html comme page d'accueil.
- Choisir un titre pour son histoire, l'indiquer dans le <title> et dans le rapport.
Créer un commit nommé Ajouter l'aventure personnalisée avec les changements.

Aventure améliorée

Une fois l'aventure personnalisée terminée, l'améliorer avec les éléments suivants :

Ajouter un lien pour recommencer le jeu à chacune des pages de fin.
- Ajouter un lien comme pour les autres pages, mais redirigeant vers index.html.
Modifier les liens pour recommencer le jeu pour qu'ils s'ouvrent dans un nouvel onglet.
- Ajouter l'attribut target="_blank" aux balises <a> pour recommencer.
Ajouter des images.
- Créer un dossier images dans le dossier à la racine du dépôt.
- Télécharger une image depuis Internet (clic droit > Enregistrer l'image sous…), la placer dans le dossier images et la renommer avec un mot-clef (p. ex. carte.png) :
```
./
├── images/
│   └── carte.png
├── ???.html
├── index.html
└── ???.html
```
- Ajouter la balise <img> dans un body.
  - Par exemple : <img src="images/carte.png" alt="Carte de l'île" />
  - L'attribut src indique le chemin vers l'image.
  - L'attribut alt indique un texte alternatif qui s'affiche si l'image ne peut pas être chargée.
- Forcer la taille de l'image avec les attributs height ou width.
  - Par exemple : <img src="images/carte.png" alt="Carte de l'île" width="256" />
Ajouter une icône à toutes les pages.
- Créer une icône pour le site web (favicon) sur favicon.cc.
- Télécharger l'icône nommée favicon.ico et la placer dans la racine du dépôt.
- Ajouter la ligne suivante dans le head de chaque fichier HTML pour indiquer l'icône du site web :
```
<!doctype html>
<html lang="fr">
  <head>
    ...
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    ...
  </body>
</html>
```
- Dans un navigateur privé, vérifier que l'icône s'affiche dans l'onglet du navigateur pour toutes les pages.
Mettre plusieurs paragraphes dans une même page.
- Ajouter plusieurs balises <p> dans un body.
Forcer un retour à la ligne dans le même paragraphe.
- Ajouter la balise <br /> à l'endroit où on veut forcer le retour à la ligne.
Ajouter des titres de différentes tailles.
- Utiliser les balises <h1>, <h2>, <h3>, … pour ajouter des titres de différentes tailles.
Commenter le code HTML.
- Ajouter quelques commentaires pour expliquer ce qui a été fait.
Formatter le fichier avec Visual Studio Code.
Vérifier que le code HTML est valide avec le validateur W3C
Créer un commit nommé Ajouter l'aventure améliorée avec les changements et pousser les commits sur GitHub.

Hébergement

Utiliser GitHub Pages pour héberger son site en ligne.

Ajouter un fichier vide .nojekyll à la racine du dépôt pour indiquer à GitHub Pages de ne pas utiliser Jekyll.
Configurer GitHub Pages.
- Aller sur le site du dépôt GitHub du projet.
- Cliquer sur Settings.
- Cliquer sur Pages dans la barre latérale gauche (dans la section Code and automation).
- Sous Branch, sélectionner main et / (root), puis cliquer sur Save.
- Rafraîchir la page et attendre quelques secondes pour que le site soit publié.
- Cliquer sur le lien qui s'affiche Your site is live at https://hepl-bs1inf5.github.io/sem02-html-{pseudo}/ pour accéder au site web.
- Ajouter le lien dans le rapport.
Ajouter le lien sur la page d'accueil du dépôt GitHub du projet.
- Revenir sur la page d'accueil du dépôt GitHub du projet.
- Cliquer sur à droite de About.
- Cocher Use your GitHub Pages website et cliquer sur Save changes.
- Observer que le lien s'affiche maintenant dans la section About du dépôt GitHub du projet.

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", () => {
  // Liste des fichiers ou dossiers attendus dans le projet.
  const expectedPaths = [
    ".git",
    ".gitignore",
    ".nojekyll",
    "index.html",
    "report.md",
    "test.js",
  ];
  // Vérifie que chaque fichier ou dossier 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);
  }
});

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

Exemple d'erreur de validation HTML :

C:\git\sem02-html-blueur\bleu.html
   8:6   error  Element <p> is implicitly closed by parent </body>  no-implicit-close
  10:21  error  Trailing whitespace                                 no-trailing-whitespace

Elle signifie que le fichier bleu.html contient deux erreurs :

Ligne 8, colonne 6 (6^ème caractère) : l'élément <p> n'est pas fermé.
Ligne 10, colonne 21 (21^ème caractère) : il y a des espaces à la fin de la ligne.

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

npx -y html-validate "-p=recommended,prettier" "**/*.html"

DOM

Choisir une page de son aventure et dessiner son DOM.
Comparer avec DOM|CSS Visualizer.

Outils de développement

Découvrir les outils de développement. Plusieurs façons d'y accéder depuis une page web :
- Clic-droit > Inspecter.
- ou appuyer sur la touche F12.
Utiliser les outils de développement pour :
- Observer les éléments de la page :
  - Survoler les éléments HTML dans le panneau Inspecteur/Éléments pour les mettre en surbrillance.
- Modifier le contenu d'un élément :
  - Supprimer un élément HTML de la page.
  - Rafraîchir la page (F5) pour réinitialiser le contenu.

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).

Séminaire

Objectifs

Rendu

Mise en place

Estimation

Aventure d'exemple

Aventure personnalisée

Aventure améliorée

Hébergement

Test

DOM

Outils de développement

Rapport

Exercices supplémentaires

Références

Objectifs​

Rendu​

Mise en place​

Estimation​

Aventure d'exemple​

Aventure personnalisée​

Aventure améliorée​

Hébergement​

Test​

DOM​

Outils de développement​

Rapport​

Exercices supplémentaires​

Références​

Objectifs

Rendu

Mise en place

Estimation

Aventure d'exemple

Aventure personnalisée

Aventure améliorée

Hébergement

Test

DOM

Outils de développement

Rapport

Exercices supplémentaires

Références