Introduction

Les travaux pratiques de programmation web auront pour but la conception de l'interface utilisateur d'un micro site. Le respect des bonnes pratiques de programmation web est bien entendu de rigueur. Cela concerne en particulier la séparation du fond (HTML5) et de la forme (CSS3).

Il faudra veiller à ce que le code HTML5 produit soit syntaxiquement valide, ce qui peut être vérifié en utilisant le validateur en ligne du W3C, et au respect de la sémantique des balises.

Ce sujet sera complété chaque semaine afin de rajouter diverses "figures imposées" à votre projet web.

Ce travail sera à rendre avant le 29 mars 2026 23h59 sur l'ENT (dans la partie réservée aux TP de Technologies du Web — Client)

L'archive déposée doit être au format zip, rar, tar, 7z, gz, gzip ou tgz et doit contenir l'intégralité de votre site web (donc le répertoire "www")

Si vous travaillez en binômes, pensez à mettre vos deux noms et prénoms dans l'intitulé de l'archive.

Note pour les redoublants: il est interdit de rendre le même travail que l'an dernier.

Dans le cadre de ce projet, seuls les langages html 5, css 3 et javascript sont autorisés. L'utilisation de frameworks est interdite (pas de bootstrap...)

Première étape (5 points)

Travail demandé

Dans cette étape il vous est demandé de réaliser, sans faire de mise en forme (pour l'instant...), un site web sur un sujet de votre choix (entre 3 et 5 pages web, sans compter les pages qui seront demandées dans les parties ultérieures). Gardez bien en tête que c'est à vous d'adapter votre site au sujet et non l'inverse. Il faut donc se concentrer uniquement sur le contenu dans cette étape. Il est important de faire apparaître à travers une utilisation correcte des balises du langage HTML5 la structure de la page.

Avant de saisir la moindre ligne de code, vous devrez analyser et décider du contenu et de l'organisation de votre site (ainsi que de la structure de vos pages) sur une feuille de papier. On ne code pas sans avoir une idée précise de ce que l'on veut faire !

À travers le contenu propre au sujet traité dans cette page, vous devrez :

  1. Mettre en place le squelette de votre page en utilisant le "doctype" propre au HTML5. Votre page devra avoir un titre et devra être au format (charset) UTF-8. (Voir balises html, head, body...)
  2. Mettre en place une structure hiérarchique claire et cohérente : En-tête, menu, article, ...(Voir balises header, nav, main, article, aside, section, footer,... Vous trouverez quelques exemples de structures ici)
  3. Organiser le texte en paragraphe, hierarchiser les différents titres et mettre les passages ou les éléments clefs en évidence.(Voir balises p, strong, em, mark, h1, h2...). Ce qui signifie que votre site devra avoir un minimum de texte pour pouvoir le mettre en forme correctement.
  4. Mettre en place divers éléments :
    1. une liste (à puces ou ordonnée)
    2. au moins une image avec une légende (utilisez bien les balises appropriées).
    3. un tableau (utilisant thead, tbody, scope....).
    4. des balises Open Graph
  5. Mettre plusieurs types de lien hypertexte dans votre menu (un lien vers une seconde page de votre site, un lien vers une "ancre" et un lien vers un site extèrieur).

ATTENTION:
Vous pourrez tester vos balises Open Graph grâce à ce script que vous dézipperez et placerez à la racine du répertoire www.
Le code HTML devra être vérifié avec le validateur en ligne du W3C. Si le code contient des erreurs (les warnings sont acceptés), la note de cette partie sera divisée par 2.
Ensuite, 2 pts seront enlevés si le code HTML n'est pas (ou mal) indenté.

Deuxième étape (6 points)

La visualisation de la page obtenue à la fin de la première étape dans un navigateur utilisera la mise en forme par défaut du navigateur. Cette mise en forme est bien souvent très simple dans son design et ne conviendra pas à un site internet moderne. Dans cette deuxième étape il vous est demandé de réaliser la mise en forme de cette page (CSS3).

Cela sera obtenu par l'utilisation d'une (ou plusieurs) feuille de style externe liée à votre page. Le fichier CSS réalisé doit être conforme aux spécifications CSS et validé grâce au validateur en ligne du W3C. Dans le principe du respect de la séparation entre le fond et la forme, aucun code CSS ne doit figuré dans le fichier HTML.

Travail demandé

  1. Il est demandé que la mise en forme ainsi réalisée soit relativement uniforme à la visualisation sur différents navigateurs. Pour cela il faut écraser les styles de base des navigateurs en définissant un style pour tous les éléments utilisés. Cela peut être fait en écrivant un petit fichier css indépendant que vous appellerez "myreset.css". Ce fichier devra faire les choses suivantes :
    • Fixer le Box-sizing de l'ensemble des balises sur "border-box",
    • Supprimer toutes les marges (intérieures et extérieures) de la balise "body",
    • Mettre le "display" des images et des medias (balises "img", "picture", "video", "canvas", "svg") en "Block" et faire en sorte qu'elles ne dépassent jamais de leur conteneur.

  2. La mise en forme produite devra respecter à minima toutes les contraintes suivantes :
    • La partie principale du contenu devra être gérée en Grid.
    • Votre menu devra être géré en Flexbox.
    • Pour améliorer la maintenabilité de votre site, vous utiliserez systématiquement des variables CSS (avec la pseudo-classe ":root") pour déclarer des couleurs.
    • Vous utiliserez des "pseudo-classes" qui permettent de rendre l'apparence de votre page plus dynamique (au survol d'un élément, lors d'un clic ou lorqu'un lien a été consulté.).
    • La taille du texte devra être gérée avec les unités relatives "em" et/ou "rem"
    • Vous utilisez aussi la propriété css "transition".

  3. Votre site devra s'adapter automatiquement à différentes résolutions d'écran (moniteurs, mobiles...). Vous utiliserez pour cela les propriétés "Media Queries" du CSS3 (l'utilisation des frameworks comme bootstrap est interdite). Vous utiliserez au moins deux paliers (breakpoints).

  4. Votre site devra être parfaitement utilisable par les personnes souffrant de daltonisme (protanopie, deutéranopie, tritanopie ...). Pour simuler différents types de daltonisme afin de vérifier l'accessibilité de votre site, vous pouvez, selon votre navigateur utiliser l'une des solutions suivantes:
    • Sur Firefox : ouvrir les outils de développement (en appuyant sur f12), cliquer sur "Accessibilité", et enfin, cliquer sur "Simuler:" pour choisir un type de daltonisme.
    • Sur Chrome : Utiliser le plugin Daltonize.
    • Autres navigateurs : Vous utiliserez les bookmarklets suivants que vous ajouterez à vos favoris dans votre navigateur pour pouvoir les utiliser sur n'importe quel site web (Proptanopie, Deutéranopie, Tritanopie, Achromatomalie et Monochromie) pour tester les couleurs des votre site et vérifier que celui ci est toujours utilisable.

  5. L'aspect esthétique ET ergonomique de la page ainsi que la diversité des propriétés CSS utilisées seront évalués.

ATTENTION:
Le code CSS devra être vérifié avec le validateur en ligne du W3C. Si le code contient des erreurs (les warnings sont acceptés), la note de cette partie sera divisée par 2.
Ensuite, 2 pts seront enlevés si le code CSS n'est pas (ou mal) indenté.

Troisième étape (6 points)

1. Objectif

Créer une page d'inscription ("Sign up") intégrée à la navigation du site et respectant son design global. Cette page doit contenir un formulaire dont les données sont validées en temps réel par le client (navigateur).

Note : l'URL censée recevoir les données du formulaire (dans la balise form) vous sera fournie en partie 4, elle est inutile pour l'instant.

2. Contraintes Techniques

3. Spécifications du Formulaire

Comportement global :

Règles de validation par champ :

name Requis Règle de validation
Nom lastname OUI Ne doit pas être vide.
Prénom firstname OUI Ne doit pas être vide.
Email useremail OUI Format email valide.
Login username OUI Min. 6 caractères. Alphanumérique uniquement. Usage Regex obligatoire.
Mot de passe userpwd OUI Min. 12 caractères. Au moins : 1 Maj, 1 min, 1 chiffre, 1 spécial (_-;:!?./*&$). Usage d'une seule Regex unique pour tout tester.. Expliquer la Regex utilisée en commentaire dans le code.
Date naissance birthdate NON Si rempli : Vérifier via l'objet Date que l'utilisateur a au moins 18 ans.

ATTENTION:


2 pts seront enlevés si le code JavaScript n'est pas (ou mal) indenté.

Prérequis pour l'étape suivante

Avant de démarrer les prochaines parties du sujet, vous devrez télécharger l'archive suivante :

Pour Windows : dézippez l'archive, placez votre site web (votre projet) dans le répertoire web\www\, puis lancez le script start.bat. Vous devriez obtenir un numéro de port compris entre 8000 et 8999. Ouvrez votre navigateur et rendez-vous à l'adresse 127.0.0.1:numéro_de_port.

Pour Linux et macOS : dézippez l'archive, placez votre site web (votre projet) dans le répertoire web/www/, lancez le script setup.sh (bash setup.sh) puis, une fois l'installation terminée, lancez le script start.sh (bash start.sh). Vous devriez obtenir un numéro de port compris entre 8000 et 8999. Ouvrez votre navigateur et rendez-vous à l'adresse 127.0.0.1:numéro_de_port.

En cas de problème sur vos machines

Assurez-vous d'avoir installé Python (version 3.10 à 3.12, important), puis lancez directement le script web/httpd qui est un script Python.

Quatrième étape (5 points)

Objectif

Jusqu'à présent, votre formulaire était purement "visuel" et fonctionnait en vase clos. L'objectif est maintenant d'envoyer les données saisies par l'utilisateur vers un serveur, sans jamais recharger la page, afin d'offrir une expérience utilisateur fluide et moderne.

Pour cela, un script serveur écrit en Python (htbin/register.py dans www) vous est fourni. Il s'occupera d'enregistrer les utilisateurs dans un fichier de données (data/users.json).

1. Le fonctionnement du serveur fourni (register.py)

Avant de coder, vous devez comprendre comment réagit le serveur que vous allez interroger :

2. Spécifications du comportement attendu (Côté Client)

Vous devez écrire un script JavaScript (entièrement dans un fichier à part) qui respecte strictement le déroulé suivant lors du clic sur le bouton de soumission :

A. L'interception et l'ergonomie

  1. Vous devez empêcher le comportement par défaut du formulaire (le rechargement de la page, voir preventDefault.
  2. Dès la soumission, le bouton de validation doit être désactivé à nouveau (pour empêcher les doubles clics) et son texte doit changer en "Enregistrement en cours..." (ou tout texte/image similaire).

B. L'envoi des données (La requête)

  1. Vous devez récupérer l'ensemble des données saisies de manière optimisée en utilisant l'objet FormData.
  2. Vous utiliserez la fonction fetch() avec la syntaxe moderne async / await pour envoyer ces données à la cible htbin/register.py.

C. Le traitement de la réponse du serveur

Une fois la réponse du serveur reçue et lue (au format texte), vous devez adapter l'interface :

C. Le traitement de la réponse du serveur

Le web est instable. Si le serveur Python est éteint ou inaccessible (erreur réseau), votre code JavaScript plantera s'il n'est pas protégé. Vous devez englober votre requête fetch dans un bloc try...catch. En cas d'erreur critique attrapée par le catch, affichez un message rouge : "Erreur réseau : Impossible de joindre le serveur." et réactivez le bouton de validation.

3. Contraintes techniques