TP noté

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 examen-inf6c-2018 mentionné plus haut contient l'arborescence suivante :

--examen-inf6c-2018/exo1/
|-- fichiers/
|   |-- textes.txt
|   |-- logo.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 (accessible pendant le TP sur la page d'accueil du navigateur)
  • structuration et qualité du code HTML et CSS

Modèle

Une page simplifiée du site leboncoin.fr (non accessible pendant le TP) sert de modèle. Il s'agit d'une version sur un écran d'environ 1200px : 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 1200px ! Choisissez les compromis simples et efficaces.)

(Cliquer pour voir en taille réelle ; attention, le fond noir qu'affiche Firefox ne fait pas partie de l'image !)

Pour toute la page, on utilisera la police OpenSans, dont un fichier WOFF est inclus dans l'archive.

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. Néanmoins, pour vous éviter de trop tâtonner, les différentes tailles de police utilisées sont 13px, 14px, 16px, 18px, 20px.

Les couleurs utilisées sont les suivantes (à part le noir et le blanc).

• Orange (fonds et polices) : #F56B2A
• Gris clair du fond : #FAFAFA
• Gris foncé du texte du haut : #989898
• Bleu (textes et bordures dans la page) : #4183d7
• Gris des bordures : #CCCCCC
• Gris foncé du fond du pied de page : #474747
• Bleu Facebook (pied) : #3B5998
• Bleu Twitter (pied) : #00B0ED

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

Le sujet ne comporte pas de difficulté particulière, mais il est long. 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 web catalogue.html est fournie pour cet exercice (dans examen-inf6c-2018/exo2/), avec un élément <nav id="catalogue"> et un élément <div id="details"> qui serviront pour les affichages. La page présente un catalogue d’artistes et d’albums.

La page HTML inclut un script data.js avec des données, ainsi qu'un autre script catalogue.js, qui lui est vide. C'est ce fichier catalogue.js que vous allez devoir modifier : vous ne devez modifier aucun autre fichier pour cet exercice.

L'objectif est de pouvoir parcourir (un peu) le catalogue de manière interactive. L'exercice n'est techniquement pas difficile : la clarté, la propreté, l'organisation du code seront d'autant plus pris en compte pour l'évaluation.

Partie 1

On va tout d'abord réaliser un script qui, au chargement de la page, parse les données JSON contenus dans la variable liste (dans le fichier data.js) et affiche ces données de façon interactive dans la balise <nav>.

1. La variable liste contient un tableau d’artistes ; pour chaque artiste, afficher son nom dans un élément h2 (à l'intérieur de l'élément d'identifiant catalogue).

2. Faire en sorte qu'un clic sur un nom d'artiste affiche juste en-dessous une liste de ses albums dans le catalogue.

   Si l'on déroule tous les artistes, on devrait obtenir quelque chose qui ressemble à la figure suivante.

   

3. Pour se simplifier la vie dans la partie 2, on va stocker l'identifiant de l'album dans l'élément HTML qui le « représente ». Les attributs data-* sont prévus pour ça.

   Ajouter à chaque li représentant un album un attribut data-album-id contenant l'identifiant de l'album.

Partie 2

Compléter votre programme pour que les éléments li des albums captent le clic. Au clic, on affichera dans l’élément d'identifiant details la liste des morceaux de l’album comme ci-dessous :

Pour cela, on met à votre disposition un service web JSON que vous devrez interroger.

Fonctionnement du service web à utiliser

L'URL du service est la suivante : https://ensweb.users.info.unicaen.fr/eval/L3/17-18/exam/serviceMusique/

La méthode HTTP utilisée est GET. Il faut obligatoirement donner un paramètre albumId qui contient un identifiant d'album.

Voilà un exemple de résultat pour l'album d'identifiant 5842c38b8b953340f118878b

Réponse du service web

La réponse est au format JSON. Elle contient 2 propriétés : statut et contenu