TP noté n°2

XML — Licence Pro BDISE — 20 janvier 2017 — Durée: 2h

Préambule

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 \!indent=yes -o <fichierProduit>.xml <requeteXQuery>.xq

Énoncé

Le but de ce TP est de mettre en forme des informations sur des bus circulant dans le département de la Gironde (33) à partir du document XML BusGironde.xml.
Cette mise en forme s'effectue en deux étapes: une extraction des données dans un XML au format adapté puis sa transformation en une page HTML contenant du SVG.

Partie 1 – Extraction des données avec XQuery

Bien qu'asssez gros (environs 6400 lignes), on peut ouvrir BusGironde.xml dans un éditeur de texte et observer sa structure. On peut aussi s'aider de sa DTD qui est fournie.
Le but de cette partie est d'obtenir un document XML respectant cette nouvelle DTD, comme le résultat attendu (donné comme exemple et pour vous permettre de passer à la partie suivante indépendamment).
On remarque que les données en sortie sont dans trois parties différentes; on va donc avoir dans un seul fichier .xq plusieurs requêtes (peut être constituées de sous-requêtes) qui vont chacune s'occuper d'une partie. Ainsi, hormis la première, les questions suivantes sont indépendantes et peuvent être traitées dans un ordre quelconque.

  1. Construire la structure générale du fichier Partie1.xq.
  2. On veut pour la première partie récupérer les informations sur le trajet (JourneyPattern) suivi par le bus. On remarque que la liste des arrêts, qui dans le XML original n'est donnée que par les identifiants de ces arrêts, apparaît ici deux fois: une première fois en tant que noms, une seconde fois en tant que coordonnées GPS. Notez également que l'on "jette" quelques informations mais que l'on garde l'identifiant du trajet comme un attribut (alors qu'il était une donnée d'un élément dans le XML original).
  3. Pour la deuxième partie, on souhaite savoir pour chaque arrêt (StopPoint) quelques informations d'identité et les horaires (de départ) des bus y circulant. Ces informations ne se trouvent pour l'instant dans divers VehicleJourney, chacun donnant les horaires d'un service précis.
    Il faut ici bien prendre garde à ne pas afficher les horaires de passage de bus ne s'arrêtant pas à l'arrêt, ou encore de prendre les horaires d'un autre arrêt. Notez que certains arrêts portent le même nom, mais cela ne doit pas nous importuner puisqu'on utilise l'objectId.
    On remarque enfin que les arrêts sont classés du nord au sud, et de l'ouest à l'est en cas d'égalité.
    Bonus: Classer pour chaque arrêt les horaires par ordre d'arrivée des bus dans la journée; notez que le format de ces horaires permet de les traiter comme du texte pour retrouver l'ordre "réel".
  4. Enfin, on veut récupérer les métadonnées que sont les longitudes et latitudes extrémales (afin d'avoir la zone à laquelle se rapporte ces informations), ainsi que leur différence (pour estimer la taille de cette zone).

Partie 2 – Transformation en HTML avec du SVG dedans

En partant cette fois du fichier théoriquement obtenue à la fin de la première partie, on veut construire une page HTML contenant un plan schématique des lignes de bus dessiné en SVG. On pourra regarder la source de cette page pour bien voir la structure attendue.
Encore une fois, les différentes parties des informations (sur les lignes et sur les arrêts, et, au sein des lignes, le SVG) sont indépendantes et peuvent donc être traitées indépendamment. Il faut cependant gérer la racine auparavant.

  1. Récupérer la transformation vide fournie pour ce TP; c'est de celle-ci qu'il faut partir pour cette partie.
  2. Modifier adéquatement la première template (qui d'ailleurs pour l'instant vous fait des erreurs...) pour
    • que l'erreur actuelle disparaisse;
    • que votre nom apparaisse dans la balise meta de clef auteur;
    • que la page comporte un titre et soit englobée dans un div;
    • permettre la division en plusieurs parties;
  3. Pour les lignes de bus, mettre un titre à cette partie, qui sera elle même dans un div dédié. Ensuite, chaque ligne, dans son div disposera de son titre (le nom de la ligne) puis la liste des arrêts desservis.
    Bonus: Les lignes de bus sont rangées par ordre septentrional (du sud au nord) de leur deuxième arrêt.
  4. Après la liste des arrêts vient le plan en SVG.
    • Attention: cette question peut prendre du temps, cela peut être une bonne idée d'y revenir plus tard.
    • N'oubliez pas le xmlns="http://www.w3.org/2000/svg".
    • Commencez par donner la dimension du canevas; pour cela on prendra la zone considérée (gardée dans la partie meta de notre XML). Pour que cela reste visible, on choisit de multiplier cette différence d'angle (latitude et longitude) par un facteur 10000. Ensuite toutes nos coordonnées seront calculées dans cette zone, à l'aide de la template fournie coord2canvas (qui applique déjà ce facteur 10000).
    • Faire un cadre simple autour de la zone pour que le canevas soit plus visible.
    • Construire et tracer le chemin correspondant au trajet du bus.
  5. Ensuite vient la liste des arrêts, par ordre alphabétique, encore une fois chacun dans leur div et avec pour titre leur nom.
    Dans ce titre il y a également un lien vers une carte OpenStreetMap. L'image osm.jpeg est fournie et les liens OpenStreetMap sont très simples: http://www.openstreetmap.org/#map=<zoom>/<latitude>/<longitude> et 18 est une bonne valeur pour le <zoom>.
    Les horaires sont dans une table dont la première colonne est l'horaire et la seconde le trajet concerné. Problème, on veut leur nom, on n'a directement que leur identifiant, il va falloir faire un peu de XPath pour retrouver le nom du trajet.
  6. Bonus: Donner des class et des id aux différents éléments de votre page.

Corrigé

  1. Partie1.xq
  2. Partie2.xsl