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 30 mars 2025 23h59 sur l'ENT (dans la partie réservée aux TP de Technologies du Web — Client)

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)

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 utilisant la technique du Reset ou du Normalize.
2. La mise en forme produite devra contenir à minima tous les éléments suivants :
   • au moins une flexbox (voir aide en bas de la page où vous trouverez aussi une liste des différentes propriétés CSS3).
   • Vous utiliserez des "pseudo-formats" 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é.). 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).


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 (5 points)

Travail demandé

De nos jours rares sont les sites qui ne permettent pas à leurs utilisateurs de s'enregistrer pour une raison ou une autre. Il sera demandé dans cette étape de créer dans le menu un lien vers une page contenant un formulaire permettant l'enregistrement de l'utilisateur. Cette page devra avoir un design uniforme avec les autres pages créées.
Rares sont aussi les sites n'interagissant pas avec les données que peuvent saisir l'utilisateur. Il sera donc demandé de réaliser une vérification des éléments à mesure qu'ils sont saisis (En javascript - sans utiliser jquery). Un code couleur ainsi qu'un message permettront à l'utilisateur d'apprécier visuellement la validité des informations qu'il saisit et la validation du formulaire ne devra être activée que lorsque toutes les informations saisies seront correctes. Les informations à demander sont les suivantes :

• Ses noms et prénoms (ne peuvent pas être vide).
• Une date de naissance (Au format jj/mm/aaaa. Peux être vide mais doit contenir une date valide si elle est renseignée. Attention, vous devrez utiliser ici un input de type text et vous devrez trouver une façon de controller la validité de cette date en utilisant l'objet Date du javascript).
• Un nom d'utilisateur (ne peut pas être vide et doit contenir au moins six caractères).
• Un mot de passe (ne peut pas être vide et doit contenir au moins 12 caractères dont une majuscule, une minuscule, un chiffre et l'un des caractères spéciaux suivants (_-;:!?./*&$). Vous ne devez utiliser ici qu'une seule expression régulière pour controller l'intégralité du mot de passe).
• Une adresse email (ne peut pas être vide et doit être une adresse email valide).

Vous devrez empêcher la soumission du formulaire tant que les champs ne seront pas saisis correctement.

Le formulaire devra être soumis à une page dynamique (fournie, il s'agît du script register.py dans le répertoire www/htbin. Ce script écrira les données reçues dans le fichiers data/user.dat). Dans le formulaire, les données devront être identifiées de la façon suivante:

Enfin, vous veillerez à prevenir l'utilisateur de l'utilisation de JavaScript sur votre site lorsque celui-ci est désactivé en utilisant la balise appropriée.

ATTENTION:

• Pour avoir plus d'informations sur les expressions régulières et les fonctions anonymes en javascript, pensez à regarder le chapitre Aide en fin de page.
• Votre code Javascript devra se trouver dans son propre fichier et non au milieu du html. Par conséquent, vous éviterez également d'utiliser les attributs "onblur", "onfocus", etc... mais privilégierez plutôt les méthodes getElementById, QuerySelector et addEventListener.
• L'utilisation du type "email" pour les balises input ainsi que l'utilisation de l'attribut html "pattern" sont interdites.
• Il est également interdit d'utiliser le jQuery pour cette question.

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

Quatrième étape (3 points)

Travail demandé

VOUS DEVEZ AVOIR FAIT LE PREREQUIS AVANT DE COMMENCER CETTE PARTIE.

Une fois l'utilisateur enregistré, il faut lui permettre de s'identifier sur le site afin d'accéder à un contenu personnalisé ou privé. Dans cette cinquième étape nous allons donc créer un petit formulaire d'identification sur la page principale du site. Ce formulaire sera envoyé au script login.py qui se trouve dans le répertoire www/htbin.

Ici il est question d'ajouter du dynamisme au site à l'aide de technologie de type AJAX (Vous devrez utiliser un objet XMLHttpRequest). Le contenu renvoyé par le script de login devra donc être affiché de manière dynamique grâce à Javascript. Il s'agît simplement d'un petit fichier texte contenant une unique ligne correspondant soit à un message d'erreur (nom d'utilisateur ou mot de pass invalide) soit à un message de salutations (cas où le nom d'utilisateur et le mot de passe sont valides).

Votre formulaire devra aussi pouvoir être soumis en appuyant sur la touche "Entrée" (return) du clavier.

ATTENTION: Vous ne devrez pas utiliser des "alert()" pour afficher les messages d'erreur ou de bienvenue, il faudra les inserrer dynamiquement dans votre page à l'aide du javascript. Il est interdit d'utiliser le jQuery pour cette question.
2 pts seront enlevés si le code JavaScript n'est pas (ou mal) indenté.

Cinquième étape (4 points)

Travail demandé

VOUS DEVEZ AVOIR FAIT LE PREREQUIS AVANT DE COMMENCER CETTE PARTIE.

Dans cette étape nous allons créer une petite "chatbox" dynamique sur une page qui sera accessible via un lien depuis une des pages de votre site. Cette chatbox sera basée sur l'utilisation d' AJAX (vous avez le choix entre utiliser le Javascript standard ou le framework jQuery), mais les deux scripts impliqués coté serveur retourneront du JSON.

Les deux scripts à appeller sont chatsend.py pour l'envoi d'un message et chatget.py pour récupérer l'ensemble des messages déjà envoyés.

• chatsend.py prend en paramètre un champ nommé msg qui doit contenir le message à envoyer et retourne dans le JSON un objet contenant deux champs. Le premier champs s'appelle num et contient 1 si le champ msg n'est pas fourni, -1 si il y a eu une erreur de lecture du nom d'utilsateur (le nom d'utilisateur est normalement récupéré automatiquement dans le fichier user.dat), ou 0 si tout c'est bien passé. Le deuxième champ renvoyé s'appelle msg et contient le message à afficher. Ce dernier doit être affiché dans une zone dédiées'il s'agît d'une erreur, ou dans la zone de discussion de la chatbox si le message a bien été envoyé.
• chatget.py ne prend aucun paramètre et renvoie dans le JSON simplement une liste des messages qui est un tableau d'objets contenant les champs suivant : date (le jour d'envoi du message), time (l'heure d'envoi), user (le nom d'utilisateur) et msg (le contenu du message).

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