Examen sur machine — Session 1.2

2018-2019

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Examen sur machine — Session 1.2

2018-2019

Durée : 2h

Les exercices sont longs : on ne s'attend pas forcément à ce que tout soit fait. Répartissez votre temps à hauteur des points que vous pouvez gagner !

Mise en place de l'examen

Téléchargez l'archive du sujet, et décompressez-la. Elle contient un répertoire exam1-2-inf6c-2019 dans lequel vous effectuerez votre travail. Vous pouvez placer ce répertoire où vous voulez ; en particulier, vous pouvez travailler en local — il ne vous sera pas demandé de déposer votre travail sur votre serveur.

Important

Vous devez rendre à l'issue de l'examen une archive zip contenant votre répertoire exam1-2-inf6c-2019, déposée sur Ecampus dans la zone prévue à cet effet

Attention, votre nom ne doit pas apparaître (ni dans les noms de fichier, ni dans le code), pour permettre une correction anonymisée.

Remarque : le barème n'est qu'indicatif.

Exercice 1 : HTML/CSS

Exercice noté sur 10

Sujet

Vous devez réaliser la page web donnée en modèle, en séparant adéquatement le fond et la forme (les images doivent notamment être classées) et en écrivant du code valide HTML5.

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. Ne perdez pas de temps sur des détails. Obtenir un résultat visuellement identique au modèle n'est ni nécessaire ni suffisant : l'adéquation des balises utilisées en regard de la page à présenter sera aussi un critère de notation.

Arborescence

Le répertoire de travail exam1-2-inf6c-2019 mentionné plus haut contient l'arborescence suivante :

--exam1-2-inf6c-2019/exo1/
|-- fichiers/
|   |-- textes.txt
|   |-- logo_PNRHL.png
|   `-- etc.
`-- rendu/
    |-- images/
    |-- index.html
    `-- skin/
        |-- images/
        `-- screen.css

Les images nécessaires et les textes (fichier textes.txt) sont contenus dans le répertoire fichiers. Vous réaliserez le travail dans le répertoire rendu, en séparant bien les images de contenu (répertoire rendu/images) des images de style (répertoire rendu/skin/images).

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

Modèle

Une version très simplifiée d'un ancien design du site du Parc naturel régional du Haut-Languedoc sert de modèle. Il s'agit d'une version sur un écran d'environ 1600px : votre reproduction doit ressembler au modèle lorsque la fenêtre fait cette taille, mais c'est vous qui décidez ce qui se passe pour les autres tailles. (On ne s'attend pas à ce que vous fassiez un site responsive, mais on ne veut pas non plus que votre page ne fonctionne que pour des fenêtre de 1600px ! Choisissez les compromis simples et efficaces.)

capture d'écran de la page
Capture d'écran de la page
(Cliquer pour ouvrir l'image ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

La plupart des effets sont obtenus par le biais d'images avec des parties transparentes : regardez bien ce que vous avez à disposition, et n'hésitez pas à utiliser des marges/paddings pour « occuper l'espace » vide de contenu.

Pour information, la colonne principale fait 1000 pixels de largeur. Quatre couleurs sont utilisées : blanc #FFF (texte), vert #9AC300 (titres), marron foncé #4C3A36 (fond du contenu principal, texte onglets) et marron clair #71554A (couleur de fond de la page, après l'image). Vous pouvez laisser la police par défaut. Pour le reste, on ne regardera pas avec précision les différentes tailles (largeurs, polices, marges, paddings…). Faites au mieux, c'est l'effet global qui compte, pas le nombre de pixels.

Pour simplifier le codage, vous pouvez faire comme si la page ne contenait aucun lien (vous pouvez aussi ne mettre de liens que là où ça vous arrange).

Encore une fois, gardez en tête que le plus important est d'avoir un résultat fonctionnel minimal.

Exercice 2 : JavaScript

Exercice noté sur 10

Une page HTML contient la liste des 10 sports les plus pratiqués en France en 2016 (en nombre de licenciés, source Les Héros du Sport). Pour chaque sport, on souhaite afficher des information sur celui-ci dans la colonne de droite de la page.

Lorsque l'utilisateur clique sur un sport, les informations sont affichée dans l'élément aside d'identifiant info. La liste des sports et leurs données sont stockées dans un objet Javascript sportsData inclus dans le fichier sportsData.js. Le répertoire exo2 de l'archive inclut les fichiers HTML, JS et images pour démarrer.

Partie 1 : version de base

La première version se contente d'afficher le nombre de licenciés, en utilisant l'objet sportsData. Pour obtenir la clé de l'objet sportsData à utiliser (qui est le nom du sport tout en minuscules et sans accents), on pourra prendre le texte du li cliqué, le transformer en minuscules avec la méthode toLowerCase() puis remplacer les caractères é par le caractère e (c'est le seul caractère accentué qui figure ici) avec la méthode replace.

Version de base
Version de base : affichage du nombre de licenciés

Mise en forme : vous pouvez tout à fait ajouter dans le fichier CSS les sélecteurs (classes, etc) nécessaires à la mise en forme des différents éléments créés par Javascript (et assigner des classes à ces éléments avec Javscript), plutôt que de recourir à la propriété style des objets Element.

Partie 2 : améliorations

Pour l'instant il est possible d'afficher N fois la même information mais il n'est pas possible de remettre à zéro la zone de droite. Deux améliorations sont donc à apporter :

  1. Faire en sorte qu'une information ne puisse être affichée qu'une et une seule fois
  2. Ajouter un bouton pour vider la zone des informations. Attention ce bouton ne doit exister qu'après la première info affichée.
Version améliorée
Version améliorée : pas d'affichage multiple et bouton reset

Partie 3 : affichage plus riche

On utilise à présent les autres propriétés données pour certains sports dans sportsData. Compléter vos programmes pour que l'affichage soit similaire à celui ci-dessous. Attention tous les sports ne contiennent pas les 2 informations site web et logo (le nombre de licenciés est lui toujours présent). Pour savoir si un objet contient une propriété donnée, on pourra utiliser la méthode hasOwnProperty().

Version avec plus d'informations
Version finale : nombre de licenciés, site web et logo