Projet Web 2

Rendu

Le rendu final du projet noté comprendra :

Site web avec votre jeu.
Journal de bord indiquant les étapes réalisées et les difficultés rencontrées pour chaque semaine.

Pré-requis

Avoir fini d'adapter l'exemple avec votre propre scénario.

Créer un organigramme pour votre histoire.
Renommer les fichiers HTML avec des noms significatifs et modifier les textes.
Choisir un titre pour votre histoire, l'indiquez dans le <title> et dans le journal de bord.

Images

Utiliser le tag <img> pour ajouter des images.

Télécharger une image depuis Internet (clic droit > Enregistrer l'image sous…) et la placer dans un dossier images à côté de index.html :

projet-web/
├── images/
│   └── image.jpg
├── cave.html
├── grenier.html
├── index.html
├── lecture.html
├── main.css
├── souvenirs.html
└── tresor.html

Dans le body d'un fichier HTML, ajouter l'image avec <img src="images/image.jpg" /> (remplacer image.jpg par le nom de l'image téléchargée).
Utiliser les propriétés width et/ou height pour définir la taille de l'image : <img src="images/image.jpg" height="200px" />
Utiliser des pourcentages pour définir la taille de l'image qui s'adaptera à la taille de l'écran : <img src="images/image.jpg" width="50%" />

Images de fond

Utiliser la propriété CSS background-image pour ajouter une image de fond à une page :

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

Pour qu'il s'adapte à la taille de l'écran, ajouter background-size: cover :

body {
  background-image: url("image.jpg");
  background-size: cover;
}

Sélecteurs de classe

Pour ajouter du style à des éléments spécifiques (pas toutes les balises), on peut utiliser des classes. Par exemple, on souhaite ajouter un lien pour recommencer le jeu à la fin de chaque page et on veut que ce lien soit en vert.

Ajouter la règle CSS suivante dans le fichier main.css.
- Tous les éléments qui ont la classe recommencer auront la couleur #859900 (vert).
```
.recommencer {
  color: #859900;
}
```
Ajouter un lien pour recommencer le jeu dans les pages de fin (par exemple dans tresor.html).
- Ne pas oublier d'ajouter la classe recommencer à la balise <a>.
```
<a class="recommencer" href="index.html">Recommencer le jeu</a>
```

Favicon

Créer une icône pour le site web (favicon) sur https://www.favicon.cc/
Télécharger l'icône nommée favicon.ico et la placer dans le dossier projet-web à côté de index.html.

Ajouter la ligne suivante dans le head de chaque fichier HTML pour indiquer l'icône du site web :

<!doctype html>
<html>
  <head>
    ...
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    ...
  </body>
</html>

Vérifier que l'icône s'affiche dans l'onglet du navigateur pour toutes les pages.

Les formulaires

Renommez le fichier index.html en introduction.html et créez un nouveau fichier index.html avec le contenu suivant :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projet Web</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <form action="introduction.html" method="GET">
      <label for="nom">Votre nom :</label>
      <input name="nom" id="nom" required />
      <button>Commencer</button>
    </form>
  </body>
</html>

Observez le résultat : nous y avons ajouté un formulaire avec un champ de saisie pour le nom de l'utilisateur et un bouton pour valider le formulaire :

La balise <form> englobe le formulaire et définit l'action à effectuer lors de la validation (ici, ouvrir la page introduction.html avec la méthode GET).
La balise <label> permet de décrire le champ de saisie associé. L'attribut for doit correspondre à l'attribut id du champ de saisie associé.
La balise <input> est un champ de saisie pour le nom de l'utilisateur. L'attribut required indique que le champ est obligatoire et l'attribut name est le nom du paramètre qui sera envoyé lors de la validation du formulaire.
La balise <button> est un bouton pour valider le formulaire.

Entrez un nom dans le champ de saisie et validez le formulaire (cliquez sur le bouton ou appuyez sur la touche Entrée). Observer bien l'url de la page introduction.html : il contient le nom que vous avez saisi sous la forme ?nom=....

Les paramètres

On va maintenant récupérer le paramètre nom dans la page introduction.html. Modifiez le contenu de introduction.html comme suit :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projet Web</title>
    <link rel="stylesheet" href="styles.css" />
    <script>
      const urlParams = new URLSearchParams(window.location.search);
      const nom = urlParams.get("nom");
    </script>
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <p>
      Bonjour
      <script>
        document.write(nom);
      </script>
      ! En rangeant votre grenier, vous tombez sur une vieille carte des
      environs.
    </p>
    <ul>
      <li>
        <a href="observer.html">Observer la carte</a>
      </li>
      <li>
        <a href="occupations.html">Ranger la carte</a>
      </li>
    </ul>
  </body>
</html>

Le nom précédemment saisi dans le formulaire est maintenant affiché dans la page introduction.html. Pour cela, on utilise un script JavaScript qui récupère le paramètre nom dans l'url de la page et l'affiche dans le paragraphe :

ligne 8-11 : on déclare un bloc JavaScript avec la balise <script>.
- ligne 9 : permet de récupérer les paramètres de l'url de la page courante.
- ligne 10 : permet de récupérer la valeur du paramètre nom dans l'url de la page courante et de la stocker dans la variable nom.
ligne 17-20 : on ajoute du code JavaScript pour afficher le nom dans le paragraphe.
- ligne 19 : permet d'écrire le contenu de la variable nom dans le paragraphe.

::: warning Exercice

Demandez à l'utilisateur de saisir un lieu dans le formulaire de la page index.html et affichez-le dans la page introduction.html ("Bonjour, [nom] ! En rangeant votre grenier, vous tombez sur une vieille carte de [lieu].") :

Ajoutez un champ de saisie pour le lieu dans le formulaire de la page index.html.
Vérifiez que le paramètre lieu est bien envoyé dans l'url de la page introduction.html.
Récupérez le paramètre lieu dans la page introduction.html et affichez-le dans le paragraphe.

:::

Votre jeu

Suivez les étapes suivantes pour créer votre jeu d'aventure :

Commencez par dessiner l'organigramme pour avoir une idée claire des différentes étapes et des liens entre elles.
- Une petite histoire dans un premier temps (environ 7 étapes).
- Chaque étape a plusieurs choix possibles et des conséquences différentes.
- Les conséquences peuvent être réutilisées pour plusieurs choix.
- Passer des informations d'une étape à l'autre (ex. le nom du joueur).
Créez une page HTML pour chaque étape de l'organigramme.
- Chaque page doit contenir un paragraphe de texte et des liens vers d'autres pages.
- Le texte doit dépendre des choix de l'utilisateur.
Utilisez des paramètres dans l'url pour personnaliser le contenu des pages.
- Utilisez un formulaire pour demander des informations (nom, âge, nombre préféré, couleur, ...).
- Affichez les informations dans le texte des pages.
Finalisez le jeu
- Ajouter/dessiner des images
- Choisir un titre (nom pour le jeu)
- Dessiner une icône pour le jeu (favicon)
- Formatter le code HTML avec Cmd + Shift + F (VSCode)
- Vérifier les fichiers HTML avec https://www.freeformatter.com/html-validator.html

::: tip Inspiration Pour retrouver vos jeux de l'année dernière : https://blueur.github.io/gymnase-tp/1m/tp-42.html :::

Les images vectorielles

Vous pouvez dessiner vos propres images vectorielles sur les pages HTML avec la balise <svg> : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

Images​

Images de fond​

Sélecteurs de classe​

Favicon​

Les formulaires​

Les paramètres​

Votre jeu​

Les images vectorielles​

Références​