Examen

2011-2012

Licence professionnelle ATC Webmestre

Jean-Marc LecarpentierFabrice Maurel

Enseignement des technologies du Web

 

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.

Capture d'écran de la page

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
            |-- ...
            `-- ...	  

Archive pour refaire l'examen

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 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.

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é :
menu survol

Les 4 images de recette ont un effet d'opacité au survol de la souris :
image survol

Les boutons Twitter et Facebook à gauche ont une couleur de fond #EFF8F7 au survol de la souris :
survol

Les icônes Twitter, Facebook et Rss en bas à droite ont l'effet suivant au survol de la souris :
survol

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