Examen
2011-2012
Sujet
Vous devez réaliser la page web donnée en exemple. L'arborescence de répertoires et le classement des fichiers sont à réaliser.
Important
Vous devez voir l'enseignant avant de quitter la salle de TP afin de vérifier que vous avez bien déposé une archive sur l'appli devoirs.
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. Vous pourrez ensuite affiner la présentation en fonction du temps dont vous disposez.
Modèle
La page d'accueil du site Food Sense sert de modèle en version simplifiée. La page réelle complète sera visible après l'examen.
Arborescence
Le répertoire de travail /users/NUMETU/www-dev/examenA3/
a été créé dans votre compte web, et contient l'arborescence suivante :
--examenA3 |--fichiers | |-- ... | `-- ... `--rendu |--foodsense.html |--foodsense.css |--imagesCss | |-- ... | `-- ... `--imagesInfo |-- ... `-- ...
Les données nécessaires sont contenues dans le répertoire examenA3/fichiers/
avec toutes les images et un fichier avec les textes.
Production attendue
Vous devez rendre à l'issue de l'examen :
- une réalisation dans le répertoire
examenA3/rendu/
de votre compte. Ce répertoire sera rendu inaccessible en écriture jusqu'à correction de l'examen. Les images utilisées devront être placées dans le répertoire adéquat (imagesCss
ouimagesInfo
). - une archive tgz contenant votre arborescence sur le serveur devoirs.info.unicaen.fr
Informations complémentaires
Les attributs href des liens contiendront juste # pour simplifier le codage.
La mise en page est prévue pour une largeur de 1080px. Le texte par défaut (élément body) est en Georgia, couleur #333333.
La couleur des liens est #34AC98 (bleu clair), et de couleur #EC6635 au survol de la souris (pas de souligné).
Les bordures sont en couleur #E5E5E5.
Les zones en dessous de l'image centrale sont de couleur #EFF8F7 (bleu clair) et texte #60BEAE. La zone plus foncée est de couleur #D9EFEC (bleu plus foncé) et le texte en couleur #34AC98. La couleurs de ces liens au survol de la souris est #EC6635.
Le survol d'un item du menu gauche décale l'icône associé :
Les 4 images de recette ont un effet d'opacité au survol de la souris :
Les boutons Twitter et Facebook à gauche ont une couleur de fond #EFF8F7 au survol de la souris :
Les icônes Twitter, Facebook et Rss en bas à droite ont l'effet suivant au survol de la souris :
Evaluation
Les points suivants seront particulièrement importants pour l'évaluation de la réalisation :
- partie visible :
- page répondant au cahier des charges
- aptitude à obtebnir un résultat fonctionnel même si non complet
- partie technique :
- pages générées validées en XHTML strict
- structuration et qualité du code XHTML et CSS