Examen n°1

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 fabricant d'instruments de musique Fender 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
         |--stratocaster.html
         |--stratocaster.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, les polices (format WOFF) 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 corps du texte est en Open Sans Regular, les gros titres (en majuscules) sont en Open Sans Extrabold, les autres textes en gras sont en Open Sans Bold.

Les couleurs utilisées partout (sauf mention contraire) sont le rouge #C30202, le gris sombre #333333, le gris clair #999999, le blanc #F1F1F1 et le blanc #FFFFFF.

Quatre motifs de fond sont utilisés : un pour la page entière (GlobalBackgroundDark, qu'on ne voit que tout en bas), un pour la barre de navigation principale (GlobalHeaderBackground), un pour le contenu (GlobalBackground), et un pour le pied de page (GlobalFooterBackground).

Menu du haut

Le fond est blanc #F1F1F1. L'onglet actif Fender a une image de fond (brand-tab-bg). Les boutons de droite ont un dégradé de #FFFFFF à #F1F1F1. Survolés, ils deviennent #F1F1F1. Les polices sont de taille 11px (à gauche) et 10px (à droite).

Menu principal

Le logo n'est pas un lien. Les autres boutons passent en gris sombre sur blanc #F1F1F1 quand ils sont survolés. La police est en taille 14px.

Contenu principal

Le gros titre est en taille 48px, les sous-titres en 24px, le reste en 14px. Le fond est en blanc #FFFFFF. Les trois colonnes du haut font chacune 300px de large. Les quatre colonnes du bas font 180px de large, le fond est #F5F5F5 et la bordure #E3E3E3.

Partie boutique

Le titre est en taille 38.5px. La colonne de gauche fait 300px de large, celle de droite 620px. Tout ce qui est en rouge est un lien, qui devient souligné lorsque la souris passe dessus, et est en 12px. Le numéro de série est en 10px. Le logo Fender près de chaque guitare est un lien, qui devient rouge quand survolé (utilisation d'un sprite, FenderThumbLogo). Les noms des guitares (en 14px) sont aussi des liens qui passent en rouge quand survolés.

Pour la pub, le titre est en 24.5px, «Available Now» en 19px, et le texte en 12px.

Pied de page 1

Tout ce qui est en gris clair est un lien, qui passe en blanc #F1F1F1 souligné quand survolé, et fait 12px. Les titres de catégorie, en blanc souligné, font 14px.

Pied de page 2

À gauche, police de 14px, au milieu, 12px, et à droite, 10px.

É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