Aller au contenu principal

Projet Web 1

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.

Mise en place​

  • Créer un nouveau dossier projet-web dans votre dossier informatique sur OneDrive. 
    OneDrive/
    └── 2m/
        └── informatique/
            ├── css
            ├── html
            └── projet-web
  • Ouvrir le dossier projet-web dans Visual Studio Code (dans la barre de menu : Fichier > Ouvrir dossier).
  • Créer un nouveau fichier index.html dans le dossier projet-web et ajouter le code suivant :
    index.html
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Projet Web</title>
      </head>
      <body>
        <h1>Projet Web</h1>
      </body>
    </html>
  • Visualiser la page web avec Live Server.
    • En cliquant sur Go Live dans la barre d'état (en bas à droite)
    • Ou en faisant un clic droit dans le fichier index.html et en choisissant Open with Live Server.
  • Dans le dossier informatique, créer un fichier Word projet-web-journal-prenom-nom.docx pour le journal de bord (avec son prénom et nom).

Aventure d'exemple​

On va créer un jeu similaire à celui de l'année dernière, mais sur une page web avec des liens pour naviguer entre les différentes étapes. Prenons comme exemple, le même scénario que l'année dernière :

Liens​

  • Modifier le fichier index.html :
    index.html
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <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><a href="cave.html">Cave</a></li>
          <li><a href="grenier.html">Grenier</a></li>
        </ul>
      </body>
    </html>
  • Sauvegarder et observer les changements dans le navigateur (Ctrl + s pour sauvegarder).
  • Créer un fichier cave.html à côté de index.html avec le contenu suivant :
    cave.html
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Aventure</title>
      </head>
      <body>
        <h1>Cave</h1>
        <p>Vous êtes à la cave. Que voulez-vous faire ?</p>
        <ul>
          <li><a href="passage.html">Dépoussiérer</a></li>
          <li><a href="tresor.html">Trier les affaires</a></li>
        </ul>
      </body>
    </html>
  • Ouvrir index.html dans le navigateur et cliquer sur le lien Cave pour vérifier qu'on arrive bien sur la page cave.html.
  • Créer la page passage.html afin qu'il affiche 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...
Solution
passage.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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 : 
    projet-web/
    ├── cave.html
    ├── grenier.html
    ├── index.html
    ├── lecture.html
    ├── passage.html
    ├── souvenirs.html
    └── tresor.html

Style​

Pour changer l'apparence de notre site, on va utiliser le CSS (Cascading Style Sheets).

  • Créer un fichier main.css dans le dossier projet-web avec le contenu suivant :
    main.css
    body {
      background-color: #fdf6e3;
      color: #657b83;
    }
    p {
      font-size: 20px;
    }
  • Reformater le code avec Shift + Alt + F.
  • 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>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Aventure</title>
        <link rel="stylesheet" href="main.css" />
      </head>
      <body>
        ...
      </body>
    </html>
  • Observer le changement de style sur toutes les pages.

Sélecteurs de type​

Un fichier CSS est composé de sélecteurs et de déclarations : les sélecteurs indiquent à quels éléments HTML s'applique la déclaration :

  • Les sélecteurs indiquent où appliquer le style.
  • Les déclarations indiquent quel style appliquer.

Dans notre exemple, le sélecteur body signifie que le style s'applique à toutes les balises <body> :

  • Couleur de fond : #fdf6e3 (jaune pâle)
  • Couleur du texte : #657b83 (gris)

De même que toutes les balises <p> auront une taille de police de 20 pixels.

Appliquer les changements suivants dans le style (rechercher avec un moteur de recherche comment faire) :

  • Couleur de fond : #eee8d5 (beige)
  • Couleur des titres : #268bd2 (bleu)
  • Couleur des liens : #dc322f (rouge)
  • Couleur des liens au survol : #6c71c4 (violet)
  • Enlever le soulignement des liens
  • Changer le symbole de la liste à puce en carré
  • Changer la police de caractères de toute la page (indice)
Astuce

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

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)
    • Visez 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.
  • Modifier les fichiers HTML et CSS pour créer son propre jeu.
    • Renommer les fichiers HTML avec des noms significatifs.
    • Choisir un titre pour votre histoire, l'indiquez dans le <title> et dans le journal de bord.

Références​

Illustrations​

Dernière mise à jour le