Examen
2012-2013
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 magazine LIFE sert de modèle. La page réelle complète sera visible après l'examen.
Arborescence
Télécharger l'archive pour refaire le TP
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
|--life.html
|--life.css
|--font.css
|--imagesCss
| |-- ...
| `-- ...
`--imagesInfo
|-- ...
`-- ...
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 (imagesCssouimagesInfo). - 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.
Police importée
Une police web font est utilisée pour certains éléments. Cette police est définie dans le fichier font.css fourni et que vous n'avez pas à modifier. Il suffit d'appeler cette CSS dans votre page pour pouvoir utiliser la police importée. Le nom défini pour cette police est "police-examen". C'est une police sans-serif. Attention cette police est soumise à droits d'auteurs donc ne peut pas être réutilisée en dehors de cet examen.
Propriétés générales
La mise en page est prévue pour une largeur de 1026px. La colonne de gauche a une largeur de 200px et celle de droite 735px.
Les marges gauche et droite sont en fond noir, la zone centrale est en fond #1A1A1A, le menu en haut est en fond #111111.
Toutes les bordures sont en #464646, SAUF :
les bordures entre items du menu gauche sont en pointillés (dotted) en en couleur #535353; et la bordure en bas du pied de page est en #4D4D4D.
Les textes sont en blanc sauf spécifications données ci-dessous.
Menu de haut de page
Les liens du menu sont en couleur #D1D1D1.
L'item actif est en rouge #F20202, et au survol de la souris les autres items ont cette même couleur.
La police utilisée est "police-examen" en taille 36px.
Menu gauche
Le titre Most Popular est en police "police-examen" en taille 18px.
Le texte du lien de chaque item est en Arial gras en 12px, couleur #D3D3D3 et #636262 au survol de la souris.
Partie centrale : article principal
Titre
Le titre est en "police-examen" en taille 35px.
Image
Les crédits photo sont en Arial 10px couleur #606060.
La légende est en "Times New Roman" 13px couleur #D3D3D3
L'image "Fullscreen" (à faire à la fin!) est un sprite pour le survol de la souris (l'image devient rouge).
Carré Culture '50s
Les carrés indiquant les décennies est en fond couleur #606060, largeur visible 80px.
Culture est en Arial gras 9px
La décennie ('50s) est en "police-examen" en taille 36px.
Corps de l'article
Le texte est en "Times New Roman" 15px avec un interlignage de 1.33.
Le lien "MORE" est en gras couleur #9D9D9D et #636262 au survol de la souris.
Le bloc de citation et la signature sont en couleur #808080.
Partie centrale : related Galleries
Le titre related Galleries est "police-examen" en taille 27px.
Les carrés indiquant les décennies est en fond couleur #606060, largeur visible 43px.
La décennie est en "police-examen" en taille 27px.
Les liens-titres de chaque item sont "police-examen" en taille 16px, en blanc et en #636262 au survol de la souris.
Partie centrale : colonnes We recommend et From around the web
Le titre est "police-examen", couleur #B2B2B2 et en taille 22px.
Les liens des items sont en police Georgia, taille 16px et couleur #D3D3D3.
Optionnel : les puces sont en couleur #777777.
Pied de page
Les liens sont en Arial 12px blanc.
Le texte Our partners est en 14px.
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 HTML5
- structuration et qualité du code HTML et CSS