TP noté n°2
XML — Licence Pro BDISE — 20 janvier 2017 — Durée: 2h
Préambule
- Les deux parties sont indépendantes. L'ordre présenté est l'ordre logique des transformations mais il est tout a fait possible de commencer par la seconde partie.
- Les questions Bonus sont des questions rigolotes mais chronophages qui n'apportent pas forcément beaucoup de points; il est fortement conseillé de ne les traiter qu'après avoir fait le reste.
- 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:
Partie1.xq
etPartie2.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...) - À l'issue du TP, envoyer les fichiers de chaque question (et uniquement ceux-ci, c'est à dire pas de fichiers généré) à mathieuDOTsassolasATu-pecDOTfr
- 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 \!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.
- Construire la structure générale du fichier
Partie1.xq
. - 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).
- 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". - 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.
- Récupérer la transformation vide fournie pour ce TP; c'est de celle-ci qu'il faut partir pour cette partie.
- 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;
- Pour les lignes de bus, mettre un titre à cette partie, qui sera elle même dans un
div
dédié. Ensuite, chaque ligne, dans sondiv
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. - 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.
- 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'imageosm.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. - Bonus: Donner des
class
et desid
aux différents éléments de votre page.