TP noté

Exercice 1 : HTML/CSS

Exercice noté sur 8

Sujet

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

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

Le répertoire de travail examen-eci62-2016/exo1/ mentionné plus haut contient l'arborescence suivante :

--examen-eci62-2016/exo1/
|-- fichiers/
|   |-- textes.txt
|   |-- logo.png
|   `-- etc.
`-- rendu/
    |-- images/
    |-- index.html
    `-- skin/
        |-- images/
        `-- screen.css

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 avec le validateur local (accessible pendant le TP sur la page d'accueil du navigateur)
  • structuration et qualité du code HTML et CSS

Modèle

Une page simplifiée d'une page du site WikiHow (non accessible pendant le TP) sert de modèle.

(Cliquer pour voir en taille réelle ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

La font stack utilisée pour toute la page est "TeX Gyre Heros", Helvetica, Arial.

La largeur de la « colonne » centrale est 760px. Pour le reste des tailles (police, marges, paddings…) faites au mieux, on regardera l'effet global, pas le nombre de pixels. Néanmoins, pour vous éviter de trop tâtonner, les différentes tailles de police utilisées sont 10px, 12px, 13px, 16px, 18px, 20px, 35px.

Les couleurs de fond sont le blanc, le vert #93B874, le gris clair #F6F5F4, et le gris foncé #ECEBE8. Les bordures sont en gris #E5E5E5 ou en vert #89AC6C (menu).

La couleur de base du texte est #545454 (brun très sombre). Les autres couleurs de texte sont le blanc (pied de page), le gris #737373 (fil d'Ariane), le noir #242424 (titres), et le vert très sombre #336633 (liens).

Encore une fois, gardez en tête que le plus important est d'avoir un résultat fonctionnel minimal, et du HTML sémantique.

Exercice 2 : PHP

Exercice noté sur 6

Le répertoire exo2 contient un fichier formulaire.frg.html avec un formulaire HTML listant des produits qu'il est possible d'ajouter à son panier. Vous devez utiliser ce fichier, mais vous ne devez pas le modifier. Attention, comme son nom l'indique, cet exercice doit être fait sans JavaScript.

L'exercice consiste à créer la page qui utilise ce formulaire et à implémenter la gestion du panier. Un code propre et bien organisé sera évidemment préféré, mais la priorité est que ça fonctionne. NB : ce n'est pas un exercice d'application de l'architecture MVCR. Noter aussi que la validation des données est facultative (mais des efforts en ce sens seront appréciés).

1. Écrire un script index.php qui affiche le formulaire. Lorsque l'internaute clique sur le bouton d'ajout (pas avant), la page doit afficher un message du type « Dernier produit ajouté au panier : Brosse à dents ».
2. Modifier le script pour que la page affiche en permanence le panier de l'internaute, c'est-à-dire la liste de tous les produits ajoutés au panier lors de cette session de navigation (avec leurs quantités).
3. Implémenter le bouton « Vider le panier ». Attention, dans ce cas (comme lorsque l'internaute arrive sur la page avant toute action), la page doit simplement afficher le formulaire et un message comme « Votre panier est vide ».

Exercice 3 : JavaScript

Exercice noté sur 6

Le but de l'exercice est de compléter l'implémentation d'un jeu simple de Memory avec des couleurs.

Le répertoire exo3 contient un fichier memory.html, et un fichier memory.js. On ne modifiera que le fichier JS.

Le fichier HTML contient notamment le CSS pour afficher les cartes, qui seront des éléments li de classe carte dans la liste d'identifiant jeu. Une carte est « face visible » par défaut ; pour la mettre « face cachée », il faut lui donner la classe dos. La classe suppr permet de retirer une carte du jeu sans faire bouger les autres (en la rendant simplement invisible).

La fonction créant la liste des cartes est déjà écrite. Une carte est un objet avec un attribut couleur et un attribut li, initialement null, destiné à contenir l'élément HTML correspondant à la carte. La fonction ajoute également dynamiquement des classes CSS correspondant aux couleurs : un élément de classe purple aura ainsi un fond violet.

1. Avant de commencer, essayer d'ajouter à la liste d'identifiant jeu un item avec les classes carte et purple, et vérifier que le résultat est bien une carte violette. Supprimer ensuite ce code.
2. Créer les éléments HTML correspondant aux cartes, face visible tout d'abord (pour vérifier que tout marche bien), puis face cachée. Mettre à jour l'attribut li de chaque carte, et donner à chaque élément un identifiant carte_X, où X est l'indice de la carte dans la liste (par exemple, le premier item aura l'identifiant carte_0, le second l'identifiant carte_1, etc.).
3. Faire en sorte que chaque clic sur une carte appelle la fonction actionCarte. Normalement, si tout va bien, cliquer sur une carte devrait la retourner, cliquer sur une deuxième carte devrait la retourner également, et cliquer sur une troisième carte devrait remettre le jeu dans l'état initial. Vérifier que c'est le cas.
4. Modifier le else dans actionCarte pour tester si les deux cartes retournées ont la même couleur. Si oui, elles doivent être retirées du jeu ; si non, elles sont simplement cachées à nouveau.
5. Que se passe-t-il si on clique plusieurs fois sur la même carte ? Corriger ce bug.
6. Gérer le score : trouver une paire donne 2 points, retourner deux cartes différentes enlève 1 point. Remplir la fonction updateScore pour qu'elle actualise l'affichage du score.
7. Optionnel : faire en sorte que le meilleur score soit affiché et gardé en mémoire, même lorsque l'on quitte la page.