Préparation

Avant de programmer quoi que ce soit, il faut d'abord imaginer ses énigmes.

Vous devrez créer 5 énigmes. En tout, il devra y avoir au moins 3 différents types d'énigme.

Document de conception

• Créer un fichier Word nommé : conception.docx

Nom du projet

• Choisir un nom de projet et l'inscrire dans le document de conception

Exemples :

• La maison hantée
• Vaisseau spatial 6-7
• Folie incandescente

Concevoir une énigme

• Dans le document de conception, pour chacune des 5 énigmes, remplir les informations suivantes :

  • Numéro d'énigme (#1, #2, #3 ...)
  • Type d'énigme
  • Nom de fichier HTML (ex: momo.html)
  • Titre de l'énigme (Sera affiché dans la balise <h1>)
  • Titre de page (Sera affiché dans la balise <title>)
  • Image
  • Énigme textuelle (si applicable)
  • Indice caché (dans une balise <details> ou carrément dans une autre page HTML)
  • Réponse de l'énigme sous forme d'URL

Réponses

Dans le fichier conception.docx, assurez-vous d'indiquer clairement la réponse (nom du fichier HTML suivant) pour chaque énigme. Ce sera essentiel pour la correction.

Image

Les images peuvent être :

• Une photo prise avec votre téléphone
• Un montage Photoshop
• Une image ou illustration libre de droit (Pexel, Pixabay)
• Une image générée par IA

Définir le style

• Trouver une ou plusieurs polices de caractères sur Google Fonts
• Définir une palette de couleurs (Coolors)

• Inscrire les choix dans le document de conception

Wireframe

La phase de Wireframe sert à mettre en place les éléments dans une page afin de faciliter la programmation en évitant le plus possible l'improvisation quant au positionnement des éléments.

Avec draw.io, effectuer un wireframe des pages suivantes :

• Page d'accueil
• Énigme
• Page de victoire

• Insérer les wireframes dans le document de conception.