TP noté n°2

XML — Licence Pro BDISE — 12 février 2016 — Durée: 2h

Préambule

Il est volontairement long; ne vous privez pas de choisir les questions auxquelles vous répondrez prioritairement.
Commencer par créer un dossier TPsolo2votreLogin dans lequel vous effectuerez tout le TP.
Pour chaque question, nommer le fichier concerné avec le nom de la question et l'extension adaptée: Question1.xq et Question2.xsl.
À l'issue du TP, supprimer les fichiers générés (par exemple la sortie HTML de l'application d'une feuille XSLT sur un document XML) ainsi que les fichiers fournis dans l'énoncé.
Surtout faites bien attention de ne pas supprimer un fichier que vous avez écrit! (Bien les nommer permet d'éviter cela facilement...)
Faire une archive (.tar.gz) à votre nom à partir du dossier contenant vos réponses et la soumettre via Eprel. En cas d'oubli de votre identifiant EPREL, voici la liste (mot de passe par défaut: date de naissance jjmmaaa).
Les seuls documents autorisés sont les notes de cours et vos productions de TD/TP. Il est également autorisé d'utiliser le site W3Schools ou la norme SVG comme aide mémoire.
Le non respect de ces consignes pourra entraîner le retrait de points.
Il ne faut pas copier-coller le XML affiché par le navigateur mais toujours l'enregistrer. Utiliser wget est aussi possible.

Rappels des commandes de compilation

Validité vis-à-vis d'une DTD

xmllint --dtdvalid <doctype>.dtd <arbre>.xml

XSLT

xsltproc -o <page>.html <transformation>.xsl <arbre>.xml

XQuery

saxon-xquery -o <fichierProduit>.xml >requeteXQuery>.xq

Création d'une archive `.tar.gz`

tar -cvzf <archive>.tar.gz <dossier>/

Énoncé

Le but de ce TP est de mettre en forme des données de prix des carburants à partir de XML fournis par l'administration. À cause de leur taille, nous ne travaillerons pas directement sur les fichiers fournis mais sur un extrait concernant le début du mois de janvier 2016 pour le département du Nord (59).

En ouvrant le document, on se rend compte tout d'abord que l'ordre des éléments de chaque station (ici nommé pdv pour point de vente) est très libéral; on peut s'en rendre compte en regardant la DTD fournie. De plus, on souhaiterait avoir des informations sur le prix moyen de chaque carburant dans chaque station.
Écrire la requête XQuery qui transforme le document PrixCarburantsDep.xml en un document comme celui-ci (voir la DTD fournie).
- On notera que l'on a maintenant les informations d'ouverture et fermeture, puis les services, puis la liste des carburants disponibles avec leur prix moyen, puis les prix constatés et les ruptures constatées.
- On remarque également que l'on a repris certains éléments avec tous leurs attributs. Pour rappel, l'ordre des attributs n'a pas d'importance en XML, il est donc possible que celui-ci diffère entre le XML produit par votre requête XQuery et celui donné en exemple.
- Dans la suite, on travaillera sur l'exemple fourni, et non sur le XML produit par votre requête. Cela permet de sauter cette question et d'empêcher d'éventuelles erreurs de se propager à la question suivante.
On va maintenant mettre sous la forme d'une page HTML le document qui devrait être produit à la question précédente. On va également utiliser SVG pour créer un graphe de l'évolution des prix des carburants. On se base sur le fichier Question2.xsl fourni, car il contient quelques templates utiles. On peut se baser sur le HTML obtenu et observer son code source, mais on peut également s'aider des indications suivantes:
- Pour faire propre on mettra tout le contenu de la page dans un div> d'identifiant main. On met un titre de niveau 1 pour notre page.
- De même, chaque station est dans un div. Il n'a pas d'identifiant mais est de la classe station. De plus, s'il s'agit d'une station autoroutière (ce que l'on peut savoir en observant que l'attribut pop a pour valeur A), il sera également de classe autoroute.
- La liste des stations est affichée du nord au sud (rappel: plus on est au nord, plus la latitude est grande). On ne portera pas grande attention au bas du classement pour lesquelles les données sont erronées ou manquantes (ce n'est pas de notre faute!).
- Chaque station a pour titre son adresse complète (adresse + code postal (voir attribut cp) + ville).
- Si les informations de latitude et longitude sont présentes (en particulier pas la valeur '') on affiche un lien vers le point sur OpenStreetMap (OSM). Attention, il faut diviser la valeur fournie par 100000 pour obtenir la vraie latitude ou longitude.
  Une adresse OSM se code ainsi: http://www.openstreetmap.org/#map=<zoom>/<latitude>/<longitude>
  Un zoom de 17 semble adapté.
  L'image pour le lien se code de la manière suivante (il faut avoir téléchargé l'image osm.jpeg pour que cela s'affiche effectivement):
- Dans le cas des stations autoroutières, on le précisera par un titre de niveau 3.
- Dans un titre de niveau 3, on donne les horaires d'ouverture. Si l'heure d'ouverture et de fermeture coincident, c'est que la station est ouverte 24h/24 (ce qu'on précise). De même, si aucun jour de fermeture n'est précisé, c'est que la station est ouverte tous les jours (ce que l'on précise). Sinon, on donne le liste des jours de fermeture.
- On précise dans un paragraphe les fermetures exceptionnelles. Pour celles-ci on ne prend que la date et non l'heure en observant qu'une date avec heure est au format AAAA-MM-JJThh:mm:ss (où T est vraiment le caractère 'T', comme dans 2016-01-29T00:01:44).
- La liste des services proposés est ensuite donnée comme une liste à puces.
- La liste des carburants est donnée comme une liste de description dont le titre est le nom du carburant. Viennent ensuite sous forme de liste à puce le prix moyen et le graphe des fluctuations.
- Pour le graphe des fluctuations, on va s'aider des axes qui sont déjà définis en SVG (voir la première template dans Question2.xsl) ainsi que la dernière template fournie, date2abscisse qui transforme une date avec heure (donc au format AAAA-MM-JJThh:mm:ss) en l'abscisse correspondant dans notre graphe.
  On doit tout d'abord créer un canevas aux bonnes dimensions, en l'occurrence 810 par 210.
  On veut tracer en rouge la ligne qui rejoint les points fournis par les différents prix donnés. L'ordonnée sur le graphe est donnée par la formule suivante: 105-1.25*(valeur - prixmoy) où prixmoy est le prix moyen du carburant pour lequel on est en train de tracer le graphe; il faut donc réussir à aller récupérer cette valeur...
  Dans le cas où un seul prix est fourni, on veut tracer une petite croix pour marquer le point de l'unique mesure du prix.
  Enfin, on indique les ruptures de stock par un rectangle gris (CCCCCC, opaque à 33%); on considère pour cela que le bas du graphe est à 205px et le haut du graphe à 15px. On pourra en réalité mettre ce rectangle avant les courbes afin qu'il ne les masque pas.
  Vous pouvez regarder le source de l'HTML obtenu pour avoir une idée de la tête du SVG voulu.