Examen n°2

2013-2014

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. Pensez à gérer votre temps, vous pourrez affiner la présentation en fonction du temps dont vous disposez.

Modèle

Une page simplifiée du site du musée du Louvre sert de modèle : Capture d'écran de la page.

Arborescence

Le répertoire de travail /users/NUMETU/www-dev/examenUE1/ a été créé dans votre compte web, et contient l'arborescence suivante :

--examenUE1
      |--fichiers
      |  |-- ...
      |  `-- ...
      `--rendu
         |--louvre.html
         |--louvre.css
         |--imagesCss
         |  |-- ...
         |  `-- ...
         `--imagesInfo
            |-- ...
            `-- ...

En cas de problème, ou pour refaire le TP, vous pouvez télécharger une archive contenant cette arborescence.

Les données nécessaires sont contenues dans le répertoire examenUE1/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 examenUE1/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 ou imagesInfo).
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.

Propriétés générales

Tout le contenu de la page est situé dans une colonne de 940px de largeur. Le texte est en Arial (police sans-serif), exceptés le menu principal et le gros titre (« 27 thematic visitor trails to discover the Louvre's collection ») qui sont en Georgia (police serif). La taille de base du texte est 11px ; sauf mention contraire, ce sera la taille à utiliser partout.

Bandeau du haut

Le fond est gris foncé #222222. Le premier menu est en blanc (et gris #909090 pour le deuxième item), le fond bleu est #23C0D7 et le fond rouge est #C82D00. Pour le rendu avec les diagonales, le sprite sprites-tools.png est utilisé — ce n'est pas ce qui est à faire en priorité ! Quand ils sont survolés, les liens deviennent soulignés.

Le menu principal est en blanc, les petites bordures entre les items sont en #434343, le bouton « Support the Louvre » est en #222222 sur fond #E9E9E9 (#C7C7C7 au survol), taille 0.818em.

Titre principal

Le titre principal est en blanc, le sous-titre en gris #909090, la bordure au-dessus du sous-titre en gris #4D4D4D. Les différents éléments du titre sont de tailles 1.45em, 3.3em, 1.45em et 1.2em, respectivement. Le menu de droite est fixé (ne bouge pas au scroll), les images viennent du sprite shortcuts.png, et changent de couleur au survol.

Articles de news

Le fond est encore du gris #222222, les titres sont en blanc (1.36em) et les surtitres en gris #C6C6C6. Au survol de l'image, une légende apparaît, en blanc sur gris #222222.

Informations secondaires

Le fond est blanc, gris #E0E0E0 (« Donating online »), et gris #F2F2F2 (« My Louvre »). Le gris du texte est #909090. Au survol, les « latest news » changent de couleur de fond, ils deviennent #F2F2F2. Le bouton « Sign in » est en blanc sur gris #222222 (#4E4E4E au survol).

Les titres sont en taille 1.64em, le sous-titre « personal space » est en taille 13px.

Le menu horizontal est en blanc (gris #909090 au survol) sur gris #4E4E4E. Les petites bordures sont du gris #757575.

Colonnes de détails

La première colonne est en blanc sur rouge #C82D00, le bouton « Buy tickets » est en gris #222222 sur #F9F9F9 (#C7C7C7 au survol). Le titre est en taille 1.64em.

La deuxième colonne est en gris #909090 sur blanc. Les liens sont soulignés au survol. La bordure est en gris #D9D9D9.

Sitemap

Le texte est en #909090 (#CBCCCC au survol) sur fond gris #222222. Les lignes entre les colonnes sont faites avec l'image de fond « bg-site-map-home.png ».

Pied de page

Le texte est en #666666 (blanc au survol) sur fond gris #222222. Le bouton « Top of page » est en #909090 (blanc au survol) sur #222222 (#4A4A4A au survol), avec une bordure en gris #3D3D3D.

É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 à obtebnir un résultat fonctionnel même si non complet
partie technique :
- pages générées validées en HTML5 et CSS
- structuration et qualité du code HTML et CSS