TP noté

Exercice 1 : HTML/CSS

Exercice noté sur 8

Sujet

Vous devez réaliser la page web donnée en exemple, en séparant adéquatement le fond et la forme (les images doivent notamment être classées) et en écrivant du code valide HTML5 et CSS.

Obtenir un résultat fonctionnel minimal est la priorité, afin d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place. Pensez à gérer votre temps, vous pourrez affiner la présentation en fonction du temps dont vous disposez. Ne perdez pas de temps sur des détails. Obtenir un résultat visuellement identique au modèle n'est ni nécessaire ni suffisant : l'adéquation des balises utilisées en regard de la page à présenter sera aussi un critère de notation.

Arborescence

Vous réaliserez le travail dans le répertoire /users/NUMETU/www-dev/TpNoteECI622015exo1/ sur le serveur web dans lequel vous utiliserez l'arborescence suivante (déjà créée) :

--TpNoteECI622015/
  |--fichiers/
  |  |-- textes.txt
  |  `-- …
  `--rendu/
     |--index.html
     |--images/
     |  |-- …
     |  `-- …
     `--skin/
        |--screen.css
        `--images/
           |-- …
           `-- …

Les images nécessaires et les textes (fichier textes.txt) sont contenus dans le répertoire fichiers. Vous réaliserez le travail dans le répertoire rendu, en séparant bien les images de contenu (répertoire rendu/images) des images de style (répertoire rendu/skin/images).

Évaluation

Les points suivants seront particulièrement importants pour l'évaluation de la réalisation :

• partie visible :
  • page répondant au cahier des charges
  • aptitude à obtenir un résultat fonctionnel même si non complet
• partie technique :
  • pages générées validées en HTML5 et CSS avec les validateurs locaux (liens dans la liste des sites accessibles à l'ouverture d'un nouvel onglet)
  • structuration et qualité du code HTML et CSS

Modèle

Une page simplifiée d'un site de vente de céramiques (non accessible pendant le TP) sert de modèle.

Le site est fait pour être complètement responsive, mais on se contentera d'une version avec un body de largeur fixée à 1000 pixels. Ce qui est en-dehors du body n'importe pas (le modèle donné ne montre que le body).

Avec cette géométrie, les lignes font respectivement 80, 340, 125, 340, 340, 340, 375 et 80 pixels de hauteur.

Les textes sont en sans-serif 14 pixels, 25 pixels ou 36 pixels. Pour le reste des tailles (marges, paddings, etc.) faites au mieux, on regardera l'effet global, pas le nombre de pixels.

Les textes sont en blanc #FFF ou gris foncé #858585. Les trois fonds gris en haut à droite sont #F9F9F9, #F4F4F4, et #EDEDED. Le fond gris du pied de page est #F9F9F9. Les couleurs de fond des blocs sont #DBEAD8 (vert), #C2D4D8 (bleu), et #B0ABC3 (violet).

Pour simplifier le codage, vous pouvez faire comme si la page ne contenait aucun lien (vous pouvez aussi ne mettre de liens que là où ça vous arrange).

Exercice 2 : JavaScript

Exercice noté sur 4

On met à votre disposition un service JSON. À chaque appel, il renvoie un tableau contenant des objets représentant des couleurs. Chaque couleur a un nom (attribut name) et un code hexadécimal (attribut hex). (Les noms et les codes hexa sont tirés aléatoirement à chaque appel.)

Le répertoire exo2 contient un fichier couleurs.html et un fichier couleurs.js vide. On ne modifiera que le fichier JS.

1. Faire en sorte que chaque clic sur le bouton fasse appel au service et ajoute des couleurs dans la liste. Chaque item ajouté doit contenir le nom de la couleur et avoir pour couleur de fond la couleur elle-même (exemple de rendu).
2. Certaines couleurs sont trop sombres pour que le nom soit lisible. Faire en sorte qu'un clic sur une couleur affiche son nom en blanc, en utilisant la classe CSS prévue à cet effet.

Exercice 3 : PHP

Exercice noté sur 8

Le répertoire exo3 contient l'architecture d'un site très simple : il s'agit d'un pseudo-forum. On peut le voir en action ici. Il suit les principes présentés en cours, sauf que la « base de données » est un simple tableau stocké en session (c'est-à-dire que chaque internaute ne voit que ses propres commentaires !). Au démarrage, le tableau contient deux commentaires (toujours les mêmes).

Une partie du code a été enlevée. Il manque la méthode de la vue permettant d'afficher le fil des commentaires, et toutes les parties du contrôleur qui concernent l'ajout d'un nouveau commentaire.

1. Modifier la méthode makeListPage de la vue pour qu'elle affiche la liste des commentaires (Optionnel : on la fera s'afficher de bas en haut), ainsi qu'un lien vers la page d'ajout de commentaire.
2. Faire en sorte que le contrôleur appelle la méthode makeNewCommPage de la vue lorsque l'utilisateur veut ajouter un nouveau commentaire.
3. Implémenter l'enregistrement d'un nouveau commentaire dans la base, en vérifiant que les champs sont non vides. Les méthodes de la classe CommForms pourront être utiles. Modifier le code de la question précédente pour gérer les données invalides.
4. Implémenter le POST-redirect-GET et le feedback, comme vus en cours.