Skip to content

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

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

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

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

html
<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

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

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

css
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 :

html
<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 :

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

Références

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