Projet Web

Le but de ce projet est de créer un jeu d'aventure textuel en HTML, CSS et JavaScript. Le jeu doit être composé de plusieurs pages HTML qui permettent de naviguer dans l'histoire. Chaque page doit contenir un paragraphe de texte et des liens vers d'autres pages. Le texte doit être dynamique et dépendre des choix de l'utilisateur.

Objectifs

• Créer un site web avec plusieurs pages HTML
• Utiliser des liens pour naviguer entre les pages
• Utiliser du JavaScript pour modifier le contenu des pages
• Utiliser des paramètres dans l'url pour personnaliser le contenu des pages

Rendu

Les éléments suivants sont à rendre sur Teams dans le devoir “Projet Web" au plus tard le dimanche 26 mai 2024 à 23h59 :

• Un fichier zip contenant le code source du jeu (dossier projet-web)
  • Clic droit sur le dossier projet-web > Compresser "projet-web"
  • Renommez le fichier projet-web.zip créé avec votre prénom, nom et le nom de votre jeu en minuscule sans accent (ex. prenom-nom-nomdujeu.zip)
  • Vous pouvez vérifier le fichier zip en le mettant sur https://app.netlify.com/drop
• L'organigramme de votre jeu (fichier prenom-nom-organigramme.png)

Evaluation

	Critères de base (-0.5 par critère manquant)	Critères complémentaire (+0.5 par 5 critères validés)
Délai	Le rendu est dans les temps
Rendu	Le rendu est complet	Les noms des fichiers sont corrects
Jouabilité	Le jeu est fonctionnel	Le jeu est agréable à jouer
Étapes	Le jeu contient au moins 6 étapes	Le jeu contient plus d'étapes qui font sens (1 validation/3 étapes)
Style	Style CSS appliqué sur une étape Style CSS donné en exemple	Style CSS appliqués partout Changement des valeurs CSS de l'exemple Propriétés CSS pas en exemple Utilisation des classes Utilisation des classes autre que l'exemple
Paramètre	1 information est récupérée grâce à un formulaire et correctement affichée sur l'étape suivante	2 informations Sur 2 étapes différentes
Image	Le jeu contient une image	Le jeu contient plusieurs images Définition de la taille des images La taille des images s'adapte à la taille de l'écran
Erreur		Peu d'erreur dans les fichiers Aucun fichier ne contient d'erreur
Format		Les fichiers sont globalement formatés Tous les fichiers sont formatés
Onglet		Titre dans l'onglet du navigateur sur toutes les pages Favicon dans l'onglet du navigateur sur toutes les pages
Organisation		Les fichiers sont nommés de manière cohérente Les noms des fichiers n'ont pas d'accents Les fichiers sont organisés en dossiers
Langue		Pas d'erreur de langue
Bonus contenant		Autre utilisation de HTML, CSS et/ou JavaScript
Bonus contenu		L'histoire est particulièrement originale et cohérente

Tous les critères de base doivent être respectés pour avoir la note de 4.

Les critères complémentaires permettent d'augmenter la note jusqu'à 6.

Tutoriel

Image

Pour ajouter une image à votre jeu, vous pouvez utiliser la balise <img>.

<img src="image.jpg" />

Vous pouvez utiliser les propriétés width et/ou height pour définir la taille de l'image.

<img src="image.jpg" width="100px" height="100px" />

Vous pouvez utiliser des pourcentages pour définir la taille de l'image qui s'adaptera à la taille de l'écran.

<img src="image.jpg" width="100%" />

Il est aussi possible d'ajouter une image de fond à une page en utilisant le CSS : https://www.w3schools.com/cssref/pr_background-image.php

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

Pour qu'il s'adapte à la taille de l'écran, vous pouvez utiliser cover :

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

Formatage

Pour formater le contenu d'un document sur Visual Studio Code, il faut faire ⇧ + ⌥ + F

Erreur

Pour vérifier qu'un fichier HTML est correct, vous pouvez utiliser https://www.freeformatter.com/html-validator.html

Dossier

Pour plus facilement vous retrouver dans votre projet, vous pouvez créer des dossiers pour ranger vos fichiers.

projet-web/
├── images/
│   └── image.jpg
├── index.html
├── style.css
└── vaisseau/
    └── cabine.html

Il faudra adapter les chemins des fichiers dans votre code car les chemins sont relatifs au fichier actuel. Par exemple, dans index.html, pour afficher l'image image.jpg qui se trouve dans le dossier images, il faudra écrire :

<img src="images/image.jpg" />

Pour remonter dans le dossier parent, vous pouvez utiliser ... Par exemple, pour afficher l'image image.jpg depuis le fichier vaisseau/cabine.html, il faudra écrire :

<img src="../images/image.jpg" />

Références

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf