# Infonum XML – Exercices
Répondez à chaque exercice dans un fichier XML distinct. Placez les 5 fichiers numérotés de 1 à 5 dans un dossier à votre nom. Compressez le dossier et envoyez l'archive ainsi produite à `arthur.perret@u-bordeaux-montaigne.fr` avant le 21/11 12:30.
## Exercice 1
Créez un document XML de type "carte de visite" avec un personnage fictif de votre choix en suivant ce modèle :
```
Prénom Nom
n° et nom de rue
code postal, ville, état, pays…
téléphone
email
```
Pour rappel : un document XML bien formé est un document qui suit la syntaxe générale du XML (toutes les balises ouvrantes sont fermées, les éléments sont correctement imbriqués, etc.).
## Corrigé 1
```xml
<?xml version="1.0" encoding="UTF-8"?>
<contact>
<prénom></prénom> <nom></nom>
<adresse>
<numéro_rue></numéro_rue> <nom_rue></nom_rue>
<code_postal></code_postal>, <ville></ville>
</adresse>
<téléphone></téléphone>
<email></email>
</contact>
```
## Exercice 2
Structurez ce message en XML, chaque ligne doit être contenue dans son propre élément. Vous pouvez utiliser des éléments pertinents issus d'un vocabulaire que vous connaissez déjà (ex : HTML).
```
Salut Arthur,
Cette année les Infonum sont plutôt de bonne volonté mais ils ont tendance à se déconcentrer. Il faut pas hésiter à mettre des interros surprises avant les pauses.
Concernant les TD, j’ai les fichiers des années précédentes si tu veux piocher dedans :
- super-héros
- Game of Thrones
- Star Wars
Bon courage
Olivier Le Deuff
oledeuff@gmail.com
```
## Corrigé 2
```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
<p>Salut Arthur,</p>
<p>Cette année les Infonum sont plutôt de bonne volonté mais ils ont tendance à se déconcentrer. Il faut pas hésiter à mettre des interros surprises avant les pauses.</p>
<p>Concernant les TD, j’ai les fichiers des années précédentes si tu veux piocher dedans :</p>
<ul>
<li>super-héros</li>
<li>Game of Thrones</li>
<li>Star Wars</li>
</ul>
<p>Bon courage</p>
<signature>
<expediteur_nom>Olivier Le Deuff</expediteur_nom>
<expediteur_email>oledeuff@gmail.com</expediteur_email>
</signature>
</message>
```
## Exercice 3
Organisez cette liste de mutants avec un élément racine `mutants` contenant des éléments `mutant`. En plus de contenir les éléments `nom`, `age` et `pouvoir`, chaque élément `mutant` doit avoir un identifiant unique (de votre choix) indiqué par un attribut `id`.
nom | age | pouvoir
:-------- | :-: | :-----------
Pr Xavier | 63 | télépathie
Tornade | 39 | tempête
Wolverine | 90 | régénération
Magneto | 60 | magnétisme
Jean Grey | 32 | télépathie
Mystique | 27 | caméléon
## Corrigé 3
```xml
<?xml version="1.0" encoding="UTF-8"?>
<mutants>
<mutant id="x1">
<nom>Pr Xavier</nom>
<age>63</age>
<pouvoir>télépathie</pouvoir>
</mutant>
<mutant id="x2">
<nom>Tornade</nom>
<age>39</age>
<pouvoir>tempête</pouvoir>
</mutant>
<mutant id="x3">
<nom>Wolverine</nom>
<age>90</age>
<pouvoir>régénération</pouvoir>
</mutant>
<mutant id="x4">
<nom>Magneto</nom>
<age>60</age>
<pouvoir>magnétisme</pouvoir>
</mutant>
<mutant id="x5">
<nom>Jean Grey</nom>
<age>32</age>
<pouvoir>télépathie</pouvoir>
</mutant>
<mutant id="x6">
<nom>Mystique</nom>
<age>27</age>
<pouvoir>caméléon</pouvoir>
</mutant>
</mutants>
```
## Exercice 4
Corrigez ce qui suit pour en faire un document XML bien formé.
Vous pouvez vous aider des fonctionnalités de votre éditeur de code : la coloration syntaxique permet de repérer les erreurs. Vous pouvez également utiliser un outil de validation en ligne comme [XML Validation](https://www.xmlvalidation.com/), qui indique la nature précise des erreurs.
```xml
<?xml version="1.0" encoding="utf-8"?>
<systeme_solaire>
<etoile>
<nom>Soleil</nom>
<type_spectral>G2</type_spectrale>
<age unit="milliard d'années">5</âge>
</etoile>
<planete type="tellurique">
<nom>Mercure<nom/>
<distance unit="UA">0.4</distance>
<masse unit="masse terrestre">0.06</masse>
<diametre unit="masse terrestre">0.9</diametre>
</planete>
<planete type="tellurique">
<nom>Vénus</nom>
<distance unit ="UA">0.7</distance
<masse unit="masse terrestre">0.8</massse>
<diametre unit="masse terrestre">0.9</diametre>
</planete>
<planete type="tellurique">
<nom>Terre</nom>
<distance unit="km">149600000<distance/>
<Masse unit="kg">5.98e24</masse>
<diametr "km">12756</diametre>
<satelite nombre="1">
</planete>
<planete anneau="oui" type="gazeuse">
<nom>Jupiter<nom>
<distance unit="UA">5.2</distance>
<masse unit="masse terrestre">
<diametre unit="masse terrestre">11</Diametre>
</satellite nombre>
<planete anneau="oui" "gazeuse">
<nom>Uranus</nom>
<distance unite="UA">19.2</distance>
<masse unit="masse terrestre">14.4
<diametre unit="masse terrestre">4</diametre>
<satellite nombre ="15">
</planete>
<planete anneau="oui" type="gazeuse">
<nom>Neptune</nom>
<distance unit="UA">30.1</distanse>
<masse>17.2<masse unit="masse terrestre">
<diametre unit="masse terrestre">3.8</diametre>
</satellite nombre="8"><satellite>
</planete>
<planete anneau="" type="Kuiper" >
<nom>Pluton</nom>
<distance unit="UA">39.4</distance>
<masse unit="masse terrestre">0.002</masse>
<diametre unit="masse terrestre">0.2<diametre>
<satellite nombre="1"><satellite/>
</planete>
</systeme_solaire>
```
## Corrigé 4
```xml
<?xml version="1.0" encoding="utf-8"?>
<!--Version 1.1-->
<systeme_solaire>
<etoile>
<nom>Soleil</nom>
<type_spectral>G2</type_spectral>
<age unit="milliard d'années">5</age>
</etoile>
<planete type="tellurique">
<nom>Mercure</nom>
<distance unit="UA">0.4</distance>
<masse unit="masse terrestre">0.06</masse>
<diametre unit="masse terrestre">0.9</diametre>
</planete>
<planete type="tellurique">
<nom>Vénus</nom>
<distance unit ="UA">0.7</distance>
<masse unit="masse terrestre">0.8</masse>
<diametre unit="masse terrestre">0.9</diametre>
</planete>
<planete type="tellurique">
<nom>Terre</nom>
<distance unit="km">149600000</distance>
<masse unit="kg">5.98e24</masse>
<diametre unit="km">12756</diametre>
<satellite nombre="1">Lune</satellite>
</planete>
<planete anneau="oui" type="gazeuse">
<nom>Jupiter</nom>
<distance unit="UA">5.2</distance>
<masse unit="masse terrestre"/>
<diametre unit="masse terrestre">11</diametre>
<satellite nombre="?"/>
</planete>
<planete anneau="oui" type="gazeuse">
<nom>Uranus</nom>
<distance unite="UA">19.2</distance>
<masse unit="masse terrestre">14.4</masse>
<diametre unit="masse terrestre">4</diametre>
<satellite nombre ="15"/>
</planete>
<planete anneau="oui" type="gazeuse">
<nom>Neptune</nom>
<distance unit="UA">30.1</distance>
<masse unit="masse terrestre">17.2</masse>
<diametre unit="masse terrestre">3.8</diametre>
<satellite nombre="8"></satellite>
</planete>
<planete type="Kuiper">
<nom>Pluton</nom>
<distance unit="UA">39.4</distance>
<masse unit="masse terrestre">0.002</masse>
<diametre unit="masse terrestre">0.2</diametre>
<satellite nombre="1"></satellite>
</planete>
</systeme_solaire>
```
## Exercice 5
Le texte suivant contient de l'information "en vrac". Réorganisez-la de manière à mettre en évidence sa structure logique, en XML.
> Il existe diverses variétés de nuages. La plupart de ceux dont nous allons parler ne produit aucun "hydrométéore", sauf le cumulonimbus, qui est accompagné d'averses (parfois sous la forme de neige, de grésil ou de grêle).
> L'altocumulus et le cirrocumulus partagent les mêmes "espèces" : lenticularis, stratiformis, castellanus et flocus. On retrouve ces deux espèces également chez le cirrus, ainsi que les espèces spissatus, uncinus et fibratus. Les espèces stratiformis, lenticularis et castellanus sont quant à elles partagées également avec les strato-cumulus.
> Ces derniers peuvent se traîner au ras du sol et monter à 2000m, mais certains nuages ont une altitude minimale à peine plus élevée, puisqu'elle n'est que de 200m pour les cumulus, et de 300m pour les cumulonimbus. Il est vrai que ces derniers compensent en montant jusqu'à une altitude maximale de 18000m, soit plus haut encore que les cirrus, qui plafonnent à 12000m. L'altitude minimale de ces derniers coïncide avec la fin de la présence possible des altocumulus, à 6000m. Et c'est autour de cette zone, entre 5000 et 7000m, que se trouvent les cirrocumulus. L'altitude minimale des altocumulus est de 2000m, soit quatre fois moins que l'altitude maximale des cumulus.
> Ces pauvres cumulus ne sont pas favorisés en nom d'espèces, puisqu'ils se trouvent affligés de noms tels que fractus, mediocris, humilis et congestus... alors que les cumulonimbus ont des espèces aux noms plus... capillaires tels que calvus, capillatus. Les très gros cumulonimbus sont appelés mammatus.
## Corrigé 5
```xml
<?xml version="1.0" encoding="utf-8"?>
<nuages>
<nuage>
<nom>altocumulus</nom>
<especes>
<espece>lenticularis</espece>
<espece>stratiformis</espece>
<espece>castellanus</espece>
<espece>flocus</espece>
</especes>
<altitude>
<max>6000</max>
<min>2000</min>
</altitude>
<hydrometeores>Aucun.</hydrometeores>
</nuage>
<nuage>
<nom>cirrus</nom>
<especes>
<espece>flocus</espece>
<espece>castellanus</espece>
<espece>spissatus</espece>
<espece>uncinus</espece>
<espece>fibratus</espece>
</especes>
<altitude>
<max>12000</max>
<min>6000</min>
</altitude>
<hydrometeores>Aucun.</hydrometeores>
</nuage>
<nuage>
<nom>cirrocumulus</nom>
<especes>
<espece>lenticularis</espece>
<espece>stratiformis</espece>
<espece>flocus</espece>
<espece>castellanus</espece>
</especes>
<altitude>
<max>7000</max>
<min>5000</min>
</altitude>
<hydrometeores>Aucun.</hydrometeores>
</nuage>
<nuage>
<nom>cumulus</nom>
<especes>
<espece>fractus</espece>
<espece>humilis</espece>
<espece>mediocris</espece>
<espece>congestus</espece>
</especes>
<altitude>
<max>8000</max>
<min>200</min>
</altitude>
<hydrometeores>Aucun en général.</hydrometeores>
</nuage>
<nuage>
<nom>strato-cumulus</nom>
<especes>
<espece>stratiformis</espece>
<espece>lenticularis</espece>
<espece>castellanus</espece>
</especes>
<altitude>
<max>2000</max>
<min>0</min>
</altitude>
<hydrometeores>Aucun.</hydrometeores>
</nuage>
<nuage>
<nom>cumulonimbus</nom>
<especes>
<espece>calvus</espece>
<espece>capillatus</espece>
<espece>mammatus</espece>
</especes>
<altitude>
<max>18000</max>
<min>300</min>
</altitude>
<hydrometeores>Averses (parfois de neige, de grésil ou de grêle).</hydrometeores>
</nuage>
</nuages>
```
## Exercice 6
À partir du [Catalogue des jeux de données](https://opendata.bordeaux-metropole.fr/explore/dataset/domaindatasets/) sur l'Atelier OpenData Bordeaux Métropole, créez un mini-catalogue des jeux de données publiées par la Ville de Talence sous la forme d'un fichier XML. Mettez seulement le titre, la description et le lien de chaque jeu de données.
## Corrigé 6
```xml
<?xml version="1.0" encoding="utf-8"?>
<catalogue>
<jeu id="1">
<titre>Agenda culturel 2019-2020</titre>
<description>Retrouvez l'integralite de l'agenda culturel pour les années 2019-2020</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_agenda_culture_2019</lien>
</jeu>
<jeu id="2">
<titre>Carte des assistantes maternelles en 2019 de Talence</titre>
<description>La ville de Talence vous propose un outil de géolocalisation des assistantes maternelles. Seules les données personnelles des assistantes maternelles ayant donné préalablement leur accord apparaissent dans ce jeu de données.</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_assmat_2019</lien>
</jeu>
<jeu id="3">
<titre>Points d'eau en libre accès</titre>
<description>Points d'eau en libre accès sur la commune de Talence</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_pointseaulibreacces</lien>
</jeu>
<jeu id="4">
<titre>Carte des sanichiens de Talence</titre>
<description>La carte des emplacements talençais de sanichiens et de canisacs.</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_sanichiens</lien>
</jeu>
<jeu id="5">
<titre>Jardins partagés talençais</titre>
<description>Le jardin communautaire, partagé, associatif ou encore collectif, est un jardin rural ou urbain géré en commun par un groupe d’habitants.</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_jardinspartages</lien>
</jeu>
<jeu id="6">
<titre>Agenda Ville de Talence</titre>
<description>Liste des événements publics de Talence publiés dans les agendas OpenAgenda.</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_agenda</lien>
</jeu>
<jeu id="7">
<titre>Classement Top 100 des prénoms talençais</titre>
<description>Retrouvez le classement des prénoms sur la commune de Talence depuis 2005</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_top100prenoms</lien>
</jeu>
<jeu id="8">
<titre>Aires de jeux talençaises</titre>
<description>En 2018, la mairie a décidé un plan général de renouvellement de ses aires de jeux. Au programme : extension, remplacement et valorisation avec des matériaux choisis pour leur faible impact sur l’environnement et les personnes.</description>
<lien>https://scnbdx.opendatasoft.com/explore/dataset/tal_airesjeux</lien>
</jeu>
</catalogue>
```
## Exercice 7
À partir du Programe Pédagogique National (PPN) du DUT Information-Communication, créez une arborescence simple qui décrit le contenu de l'option Information numérique dans les organisations. Quelques consignes :
- Structure : `infonum` › `semestre` › `ue` › `module`.
- Mettez les n° de semestre et le code référence des UE et modules sous forme d'attributs.
- Mettez l'intitulé des UE et modules dans le contenu des éléments `ue` et `module`. Ne mettez pas les autres informations (coef. CM TD TP total etc.), simplement la référence et l'intitulé.
## Exercice 8
Via une faille spatio-temporelle de type "prétexte facile pour un exercice", votre personnage de fiction préféré ouvre un blog et écrit ses 3 premiers billets. Créez-lui un flux Atom avec les informations suivantes :
- pour le blog : titre, URL et auteur
- pour chaque entrée : titre, URL, et résumé
En pratique, il s'agit de créer un fichier XML de la forme suivante (en remplaçant les 2 commentaires par le contenu correspondant) :
```xml
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<!-- Ici les informations sur le blog -->
<!-- Ici les différentes entrées (billets) -->
</feed>
```
Vous pouvez vous aider d'exemples. En voici un : [flux Atom du site d'Antoine Fauchié](https://www.quaternum.net/atom.xml) (veille sur les thématiques du Web).
## Corrigé 8
```xml
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Un blog fantastique</title>
<link href="https://www.unblogfantastique.com/"/>
<author>
<name>Algernon Norman O'Nyme</name>
</author>
<entry>
<title>Fermeture du blog</title>
<link href="https://www.unblogfantastique.com/003" />
<summary>Annonce de la fermeture de mon blog.</summary>
</entry>
<entry>
<title>Écrire, c'est pas évident</title>
<link href="https://www.unblogfantastique.com/002" />
<summary>Dans ce billet, je parle du syndrome de la page blanche.</summary>
</entry>
<entry>
<title>Ouverture du blog</title>
<link href="https://www.unblogfantastique.com/001" />
<summary>Annonce de l'ouverture de mon nouveau blog.</summary>
</entry>
</feed>
```
## Exercice 9
Créez une feuille de style pour le corrigé de l'exercice 2. Le résultat doit avoir l'apparence d'un courrier traditionnel.
Privilégiez les services d'hébergement en ligne si vous souhaitez inclure des images ou des polices (ex : [Google Fonts](https://fonts.google.com/)).
## Corrigé 9
```css
@charset: "utf-8";
message {
color: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
width: 728px;
max-width: 99%;
box-sizing: border-box;
margin: 3em auto 3em auto;
padding: 0.5em 1em 0.5em 1em;
border: 1px solid #333;
}
message * {
display: block;
}
p:first-of-type {
padding-bottom: 1em;
}
p:last-of-type {
padding-top: 1em;
}
li {
display: list-item;
margin-left: 2em;
}
signature {
text-align: right;
}
```
## Exercice 10
Créez une feuille de style pour le corrigé de l'exercice 4. Le résultat doit donner envie d'aller dans l'espace !
Privilégiez les services d'hébergement en ligne si vous souhaitez inclure des images ou des polices (ex : [Google Fonts](https://fonts.google.com/)).
## Exercice 11
Créez une feuille de style pour le corrigé de l'exercice 5.
Privilégiez les services d'hébergement en ligne si vous souhaitez inclure des images ou des polices (ex : [Google Fonts](https://fonts.google.com/)).
## Corrigé 11
Ce corrigé est un exemple.
- Les éléments importants sont : l'usage des sélecteurs (`*`, pseudo-éléments, pseudo-classes), le type d'affichage (`display`), les unités proportionnelles.
- Si on veut respecter la contrainte de ne pas modifier le XML en y ajoutant des attributs `id` ou de classes `class`, on peut combiner les nombreux outils CSS pour créer des sélecteurs très précis.
- Pour aller plus loin dans la mise en page des éléments, je vous recommande de vous intéresser à [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
```css
@charset "utf-8";
nuages {
color: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
width: 728px;
max-width: 99%;
box-sizing: border-box;
padding: 2em 2em 8rem 2em;
margin-left: auto;
margin-right: auto;
background-image: url('nuages.jpg');
}
nuage, nom, especes, altitude, max, min, hydrometeores {
display: block;
}
nuage {
background-color: rgba(255,255,255,0.7);
padding: 0.5em 1em 0.5em 1em;
}
especes, altitude, hydrometeores {
padding-left: 1em;
}
nom {
text-transform: capitalize;
font-variant: small-caps;
font-size: 1.2em;
}
espece {
font-style: italic;
}
espece:nth-child(even) {
color: deepskyblue;
}
especes::before {
content: "Espèces : "
}
max::before {
content: "Altitude max. (m) : "
}
min::before {
content: "Altitude min. (m) : "
}
hydrometeores::before {
content: "⛈ Hydrométéores : "
}
nuage *::before {
color: #888;
font-variant: small-caps;
}
```
## Exercice 12
Prenez le message (corrigé 2) et modifiez-le pour en faire un document XHTML valide (balises HTML uniquement, structure conforme et espace de nom XHTML déclaré). Faites également une copie de la feuille de style (corrigé 9) et modifiez-la pour qu'elle s'applique à votre nouveau fichier.
Indice : https://www.w3schools.com/html/html_xhtml.asp
## Corrigé 12
À tester avec [le validateur XHTML du W3C](https://validator.w3.org/#validate_by_input).
```xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exercice 12</title>
</head>
<body>
<p>Salut Arthur,</p>
<p>Cette année les Infonum sont plutôt de bonne volonté mais ils ont tendance à se déconcentrer. Il faut pas hésiter à mettre des interros surprises avant les pauses.</p>
<p>Concernant les TD, j’ai les fichiers des années précédentes si tu veux piocher dedans :</p>
<ul>
<li>super-héros</li>
<li>Game of Thrones</li>
<li>Star Wars</li>
</ul>
<p>Bon courage</p>
<p>Olivier Le Deuff</p>
<p>oledeuff@gmail.com</p>
</body>
</html>
```
## Exercice 13
Créez une DTD externe qui valide le corrigé de l'exercice 2. N'oubliez pas de relier la DTD au fichier XML en la déclarant dans le prologue de ce dernier.
## Corrigé 13
```dtd
<!ELEMENT message (p | ul | signature)+>
<!ELEMENT p (#PCDATA)>
<!ELEMENT ul (li+)>
<!ELEMENT li (#PCDATA)>
<!ELEMENT signature (expediteur_nom, expediteur_email)>
<!ELEMENT expediteur_nom (#PCDATA)>
<!ELEMENT expediteur_email (#PCDATA)>
```
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE message SYSTEM "message.dtd">
<message>
<p>Salut Arthur,</p>
<p>Cette année les Infonum sont plutôt de bonne volonté mais ils ont tendance à se déconcentrer. Il faut pas hésiter à mettre des interros surprises avant les pauses.</p>
<p>Concernant les TD, j’ai les fichiers des années précédentes si tu veux piocher dedans :</p>
<ul>
<li>super-héros</li>
<li>Game of Thrones</li>
<li>Star Wars</li>
</ul>
<p>Bon courage</p>
<signature>
<expediteur_nom>Olivier Le Deuff</expediteur_nom>
<expediteur_email>oledeuff@gmail.com</expediteur_email>
</signature>
</message>
```
Sign in with Wallet
Connect another wallet