TP noté n°1 (rattrapage)

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

Préambule

Le sujet comporte plusieurs questions indépendantes, auquel on peut répondre dans un ordre quelconque, hormis la question 1.2 qui dépend de la 1.1.
Il est volontairement long; ne vous privez pas de choisir les questions auxquelles vous répondrez prioritairement.
Commencer par créer un dossier TPsolo1votreLogin 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.1.xml, Question2.1.dtd...
À 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 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

Feuille XSLT "vide"

Une feuille de style XSLT "vide" (de XML vers HTML) est disponible.

Énoncé

La collection d'art
On souhaite représenter une collection d’œuvres d'art sous la forme d'un document XML respectant la DTD fournie.
1. On commence par créer un arbre XML pour représenter le tableau donné par l'abre ci-dessous:
  - Notez que le contenu textuel des balises est indiqué en italique dans l'arbre.
  - Remarquez également que vous pouvez déjà valider ce petit arbre vis-à-vis de la DTD.
2. On veut maintenant construire l'arbre XML valide vis-à-vis de la DTD pour représenter la collection composée du tableau Guernica de Picasso mentionné au dessus, mais également des Demoiselles d'Avignon (1906, huile sur toile, 243,9×233,71cm (H×L)) du même auteur, et La Pietà de Michel-Ange, une sculpture en marbre de 1498. (On a bien sûr le droit de s'aider du résultat de la question précédente!)
Un répertoire
On dispose d'un fichier Repertoire.xml qui est un annuaire en XML que l'on souhaite mettre en forme.
1. Construire la DTD pour ce fichier.
2. On tente tout d'abord d'afficher le contenu du ficher à l'aide d'une CSS directement sur le XML. Constuire cette CSS afin que le navigateur affiche le XML comme dans le résultat fourni. Quelques remarques:
  - Il faut décommenter dans le XML la ligne qui pointe vers le CSS afin que le navigateur lise la CSS.
  - La page est formatée sur 1200 pixels; on n'hésitera pas à mettre 10 pixels de padding au moins pour que les cadres ne collent pas trop au texte. De même, mettre 10 pixels de marge verticale entre les blocs afin qu'ils ne se touchent pas.
  - La couleur du fond est #C7DAC2; celle du fond des entreprises est #C7FFC2 et celle du fond des particuliers est #C7DAE2.
  - La taille de police par défaut est de 14pt, mais le titre de la page est en 30pt, le nom des entreprises en 18pt (et gras) et le nom et prénom des particuliers est en 17pt.
  - Pour avoir la première ligne en retrait, on spécifie que tout le groupe à un grande padding à gauche (50px) et l'élément que l'on veut voir en retrait a une marge négative (-40px).
  - Les numéros de téléphone (comme la page web) sont à afficher comme des éléments d'une liste.
  - L'image du téléphone qui sert de puce se trouve à l'url phone.png; il faut bien sûr la télécharger dans le même dossier que Repertoire.xml pour que cela fonctionne. Pour les téléphones de type "mobile", il faut que l'image soit mobile.png.
  - Les références vers d'autres particuliers doivent être en italique.
  - Ne pas oublier tous les signes de ponctuation qui ont été ajoutés autour du texte contenu dans le XML (parenthèses, virgules, points).
3. Le résultat avec une CSS n'est pas complètement satisfaisant pour notre goût, on va donc utiliser une transformation XSLT pour produire une page HTML, comme dans l'exemple fourni (regarder la source!).
  - On se base sur le fichier TransformationVide.xsl, fourni. Attention, il y a des points d'interrogation dans la seule template présente dans ce fichier, il faut modifier cela (et aussi le corps de la template!).
  - On va séparer les entreprises des particuliers.
  - On placera le répertoire entier dans un div, et au sein de celui-ci, les entreprises seront dans un div et les particuliers dans un autre. On pourra donner des id à ces div.
  - On mettra des titres de niveau 1 pour le titre global et de niveau 2 pour les deux parties (entreprises/personnes).
  - Chaque entreprise a son div dont l'id est siret_00000000 où les 0 sont évidemment remplacés par la valeur du SIRET; son nom est affiché dans un titre de niveau 3.
  - Sous le nom de l'entreprise vient un paragraphe avec son type, puis une liste de description (dl) avec ses coordonées. On remarque qu'il n'y a pas d'entête si les informations ne sont pas présentes.
  - On remarque également que pour les téléphones, si le type de téléphone est indiqué on le mentionne entre parenthèses.
  - Enfin, la page web est transformée en lien hypertexte.
  - Chaque personne est également dans un div, dont l'id est repris de l'attribut num; son nom (dans l'ordre prénom puis nom) est dans un titre de niveau 3. On placera également une ancre avec la même valeur de manière à pouvoir faire des liens internes à la page.
  - Sous le nom de la personne vient s'il est présent la description de ses liens. Toutes les références seront transformées en liens internes à la page (grâce aux ancres créées au dessus).
  - Les coordonnées d'un particulier sont affichées de la même manières que pour une entreprise.
  - On ne s'attardera pas sur les problèmes d'espaces (manquant ou en trop) entre les mots.