Examen

2010-2011

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

Obtenir un résultat fonctionnel minimal est la priorité, afin d'obtenir 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

Une page d'article (simplifiée) du site du Guardian (http://www.guardian.co.uk) sert de modèle. La page réelle complète sera visible après l'examen.

Capture d'écran de la page

Arborescence

Vous réaliserez le travail dans le répertoire /perso/login/www/examenA3/ sur le serveur perso.info.unicaen.fr dans lequel vous utiliserez l'arborescence suivante :

--examenA3
      |--guardian.html
      |--guardian.css
      |--imagesCss
      |  |-- ...
      |  `-- ...
      `--imagesInfo
         |-- ...
         `-- ...

Production attendue

Vous devez rendre à l'issue de l'examen :

une réalisation dans le répertoire /perso/login/www/examenA3/ de votre compte. Ce répertoire sera rendu inaccessible en écriture jusqu'à correction de l'examen.
une archive tgz contenant votre arborescence sur le serveur devoirs.info.unicaen.fr

Informations complémentaires

Les images nécessaires sont contenues dans cette archive zip qui crée un répertoire guardianFiles avec toutes les images et un fichier avec les textes.

Les attributs href des liens contiendront juste # pour simplifier

La couleur des liens est #005689 (bleu), et les liens sont soulignés au survol de la souris (pas de changement de couleur).

Le menu du haut (News, Sport etc) est constitué de 4 items de couleurs différentes avec inversion des couleurs au survol de la souris (surbrillance), séparées par un trait de couleur #BEBEBE :
- News : #D61D00
- Sport : #00800
- Vidéo et Jobs : #333333

Le rouge des bordures et du texte Last 24 hours est #D61D00

Les boites de la colonne de droite sont de couleur de fond #F3F3F3 et de bordure de couleur #D3D3D3.

Les bordures grises en pointillés sont en #999999

Les textes gris (sous-titre, légende de l'image) sont en couleur #666666

Les dates des commentaires sont en gris #999999

Les éléments fil d'ariane (News > Technology...) changent de fond au survol de la souris (cf. capture d'écran où la souris est sur le 3^e élément).

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