1 <?xml version="1.0" encoding="utf-8" ?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
5 <html xmlns="http://www.w3.org/1999/xhtml" >
7 <title>Introduction, UTF-8 et XML</title>
9 <meta http-equiv="Content-Type"
10 content="text/html; charset=utf-8" />
11 <meta name="copyright"
12 content="Copyright © 2013 Kim Nguyễn" />
15 <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
16 <!-- Load the library -->
17 <script src="../simpleWebSlides.js" type="text/javascript" ></script>
19 <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
20 <!-- Load a custom Theme, the class-element marks this style-sheet
21 a "theme" that can be swtiched dynamicaly -->
22 <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
24 <!-- Customize some templates and initialize -->
26 <script type="text/javascript">
27 SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
28 SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
29 SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
31 //Ensures that we load SWS at the very end, after MathJax has
34 $(window).load(SWS.Presentation.init);
39 <a href="" class="sws-previous"/>
40 <div class="sws-slide sws-cover sws-option-nofooter">
41 <h1>XML et Programmation Internet</h1>
43 <a href="mailto:kn@lri.fr">kn@lri.fr</a>
46 <div class="sws-slide" >
47 <h1>Contenu du cours</h1>
49 <li >XML pour la représentation des données
51 <li>Motivation, présentation d'XML sérialisé (cours 1) </li>
52 <li>Notions de schémas et de validation (cours 1) </li>
55 <li class="sws-pause" style="padding:20pt 0;" > Interroger des
58 <li>XPath (cours 2-3)</li>
59 <li>XSLT (cours 3-4)</li>
62 <li class="sws-pause" style="padding:20pt 0;" > Programmer
65 <li>Les modèles DOM et SAX (cours 5)</li>
66 <li>XML Avancé: encodage relationnel (cours 6)</li>
73 <div class="sws-slide" >
74 <h1>Modalités de Contrôle des Connaissances (MCC)</h1>
77 <li > 1<sup>ère</sup> session
79 <li> Contrôle continu (33%): Projet (soutenances fin janvier)
81 <li> Examen écrit (67%) </li>
84 <li class="sws-pause" >
85 2<sup>ème</sup> session (examen 100%)</li>
89 <li> 8 séances de cours</li>
90 <li> 8 séances de TD (sur machine)</li>
94 <div class="sws-slide" >
95 <h1>Qu'est-ce qu'XML ?</h1>
96 <p>XML (eXtensible Markup Language) est un standard de
97 représentation de données</p>
99 <li>Conçu pour être lisible par un humain, mais traîtable
100 simplement par les machines</li>
101 <li>Permet la représentation de données structurées</li>
102 <li>Est <em>normalisé</em> (par le W3C)</li>
103 <li>Typé (notion de schéma très fine)</li>
106 <div class="sws-slide" >
107 <h1>En a-t-on besoin ?</h1>
108 <p>Quels sont les autres moyen de représenter les données ?</p>
110 <li class="sws-pause">Table relationnelle</li>
111 <li class="sws-pause">Fichiers textes non structurés</li>
112 <li class="sws-pause">Format binaires <i>ad-hoc</i></li>
114 <p class="sws-pause">Quels sont les désavantages des
115 représentations ci-dessus ?</p>
117 <li class="sws-pause">Non échangeable (il faut faire
118 un <i>dump</i> de la base), contraintes simples</li>
119 <li class="sws-pause">Lisible, mais sans structure donc
120 difficilement utilisable par un programme, pas de schéma</li>
121 <li class="sws-pause">Lié à une utilisation particulière</li>
127 <div class="sws-slide">
130 <li>Fin des années 1980: SGML adopté pour la publication de
132 <li>Milieu des années 1990: un groupe de travail commence à
133 étudier l'utilisation de SGML pour le Web (qui débutait)
135 <li>1998 : XML 1.0 devient une recommandation du W3C</li>
138 <div class="sws-slide">
139 <h1>Exemples d'utilisation</h1>
141 <li>Page Web (XHTML)</li>
142 <li>Flux RSS (atom)</li>
143 <li>Voix sur IP/Messagerie instantanée (SMIL/Jabber)</li>
144 <li>Images vectorielles (SVG)</li>
145 <li>Données biologiques (séquençages)</li>
146 <li>Données financières et bancaires (XBRL)</li>
147 <li>Document bureautiques (OpenDocument Format, Office
149 <li>Données linguistiques (TreeBank)</li>
153 <h1>Le standard UTF-8</h1>
154 <div class="sws-slide">
155 <h1>Représentation des textes</h1>
156 <p>Avant de représenter des documents complexes, on s'intéresse
157 aux textes (sans structure particulière)</p>
158 <p class="sws-pause">Problématique: comment représenter du texte
160 <p>Exemple de texte réaliste:<br/>
161 <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
165 <div class="sws-slide">
166 <h1>Historiquement…</h1>
167 <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
168 <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
169 <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
171 <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
172 (lettres accentuées française, italienne, …)</li>
173 <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
174 (Serbe, Hongrois, Croate, Tchèque, …)</li>
175 <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
177 <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
179 <li class="sws-pause"> … </li>
180 <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
181 remplacés (par exemple pour « € » à la place de « ¤ »)</li>
184 <div class="sws-slide">
185 <h1>… et pendant ce temps là, ailleur dans le monde </h1>
186 <p>Encodage multi-octets:</p>
188 <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
189 <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
191 <p>Impossibilité de mettre plusieurs « alphabets » dans un même
193 <p>Chaque logiciel « interprétait » les séquences d'octet de
194 manière prédéfinie</p>
196 <div class="sws-slide">
198 <p>Universal (Character Set) Transformation Format 8 bit</p>
199 <ul><li>Encodage à taille variable « universel » (contient tous
200 les alphabets connus)</li>
201 <li>Un organisme (ISO) donne un code à chaque symbole</li>
202 <li>Compatible avec ASCII 7 bits</li>
205 <table class="withborder" style="position:relative;left:8%;">
206 <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
207 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
208 <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
210 <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
211 <tr ><td>3</td><td><tt>1110xxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td></tr>
212 <tr ><td>4</td><td><tt>11110xxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td></tr>
214 <tr ><td>5</td><td><tt>111110xxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td></tr>
215 <tr ><td>6</td><td><tt>1111110xx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td></tr>
219 <div class="sws-slide">
221 <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
222 ⟶ 0100 1010<sub>2</sub> (représenté sur un
225 <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
226 ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
228 <s>1110</s><em>0001</em> <s>10</s><em>11 10
229 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
231 <p><tt style="font-size:200%">🐵</tt>
232 ⟶ 128053<sub>10</sub> ⟶ …
233 ≡ 240 237 220 181</p>
235 <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
236 anglais sont toujours lisibles)</li>
237 <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
238 caractères font 32 bits)</li>
242 <li>Caractères à taille variable: il faut parcourir le texte
243 pour trouver le n<sup>ème</sup> caractère</li>
244 <li>Les vieux logiciels doivent être adaptés</li>
248 <div class="sws-slide">
249 <h1>Qu'est-ce qu'un document XML ? (1)</h1>
251 <li>C'est un fichier texte, encodé par défaut en UTF-8</li>
252 <li>Le texte peut être <em>structuré</em> au moyen
253 de <em>balises</em></li>
254 <li>Une balise est de la forme <tt><foo></tt> (ouvrante)
255 ou <tt></foo></tt> (fermante)</li>
256 <li>Les balises doivent être bien parenthésées</li>
257 <li>Il doit y avoir une racine « englobant » tout le contenu du
258 document (texte et autres balises). On appelle cette balise la
260 <li>Les balises sont <em>sensibles à la casse</em></li>
261 <li><tt><foo/></tt> est un raccourcis pour <tt><foo></tt><tt></foo></tt></li>
264 <code style="position:relative;left:10%;color:black;"><![CDATA[<exemple>
265 ceci est la racine <balise>on peut</balise> y mettre des
266 balises <level><level>imbriquées</level> </level> comme
268 elles sont <FOO>bien</FOO> parenthésées
272 <div class="sws-slide">
273 <h1>Qu'est-ce qu'un document XML ? (2)</h1>
275 <li>On peut mettre des espaces et des commentaires en dehors de
277 <li>Les commentaires sont délimités par <s><tt style=""><!--</tt></s> et <s><tt>--></tt></s></li>
278 <li>On peut annoter les balises ouvrantes avec
279 des <em>attributs</em> de la forme <tt>att</tt>=<tt>"v"</tt> (on
280 peut aussi utiliser « ' » pour délimiter les chaînes)</li>
281 <li>Au sein d'un même élément (ou balise) on ne peut pas avoir
282 deux fois un attribut <em>avec le même nom</em></li>
283 <li>On dispose de <em>séquences d'échappement</em>: &lt; pour <,
284 &gt; pour >, &apos; pour ', &quot; pour
285 ", &amp; pour & et &<tt>nnnn</tt>; pour un caractère
286 UTF-8 dont le code décimal est <tt>nnnn</tt>.</li>
289 <code style="position:relative;left:10%;color:black;"><<![CDATA[-- commentaire en début de fichier-->
291 Un autre <balise id="2" type="texte">exemple</balise>
296 <div class="sws-slide">
297 <h1>Exemple complet (trouver toutes les erreurs)</h1>
298 <code style="position:relative;left:10%;color:black;"><![CDATA[
301 On se donne cette fois un <FOO>exemple</Foo> complet, mais
303 <balise>incorrect. En effet, il y a
305 <note id="32" val='32'>plusieurs</note> erreurs dans
307 <note id="42" id="51">dans ce document</note>.
309 Il n'est pas simple de toutes les trouver
312 <exemple>En plus cet exemple est en deux parties</exemple>
315 <div class="sws-slide">
316 <h1>Utilisations d'XML (1)</h1>
318 <li>Les noms de balise sont <em>libres</em>. La personne qui
319 conçoit le document choisit les balises</li>
320 <li>Un document XML est une manière de représenter
321 un <em>arbre</em> (l'élement racine est la racine de
324 <p>Un bon exemple est XHTML (XML pour les pages Web)</p>
326 <li>La structure des documents (titres, sections, paragraphes,
327 tableaux) est donnée par les balises
329 <li>Le rendu graphique ne fait pas partie de la structure du
330 document et est donné par un moyen annexe (feuille de style
331 CSS par exemple)</li>
333 <p>Autre exemple: les flux RSS de mises à jour d'un blog</p>
335 <li><a href="https://blog.wikimedia.org/feed/">Lien vers le
336 blog wikimedia</a></li>
337 <li>XML est un exellent format <em> d'échange </em></li>
340 <div class="sws-slide">
341 <h1>Utilisation d'XML (2)</h1>
343 <li>Le format texte est un mauvais format pour
345 <li>Il encode un arbre mais ne permet pas de le manipuler
348 <p>En réalité, on ne manipule pratiquement jamais de XML tel que stocké
351 <li>On peut charger un document XML sous la forme d'un arbre
352 (Objet Java par exemple) dans lequel on peut naviguer</li>
353 <li>Certaines bases de données permettent de stocker des
354 fichiers XML dans des colones (comme un VARCHAR)</li>
356 <p>Une application moderne mélange BD relationnelle et XML (et
357 aussi d'autres choses si besoin: JSON, YAML, …)</p>
359 <div class="sws-slide">
360 <h1>Étude de cas: journal en ligne</h1>
361 <p>On se pose dans le cas du site internet d'un journal en
364 <li>Le site a des utilisateurs enregistrés (ainsi qu'un accès
366 <li>Le site propose des articles en lecture sur le site</li>
367 <li>Le site permet d'exporter des articles en PDF pour
369 <li>Le site permet la lecture sur smartphone/tablette</li>
372 <div class="sws-slide">
373 <h1>Une solution possible</h1>
374 <ul><li>On stocke les articles comme des fichiers XML avec une
375 syntaxe particulière:
376 <code style="font-size:80%;position:relative;left:10%;color:black;"><![CDATA[<article>
377 <category>Science</category>
378 <title>A new planet discovered</title>
379 <date>2014/09/09</date>
381 <name><first>Jonh</first><last>Doe</last></name>
382 <name><first>Someone</first><last>Else</last></name>
385 <bold>A new plange</bold> has been discovered …
390 <li>Une <em>BD relationelle</em> stocke les données dynamiques (utilisateurs, …)</li>
391 <li>Un <em>programme</em> (Java ou PHP) applique une transformation (XSLT) pour
392 transformer les articles XML en pages XHTML</li>
393 <li>Le programme utilise la BD pour personaliser l'affichage</li>
394 <li style="background:white;">Le programme applique une autre transformation pour transformer
395 les articles en PDF plutot que XHTML</li>
396 <li style="background:white;">Le programme transforme l'article en un
397 XML RSS pour affichage dans un lecteur de blog</li>
400 <h1>Validation de documents</h1>
401 <div class="sws-slide">
402 <h1>Schéma d'un document</h1>
403 <p>Comme tout le monde peut définir son propre format XML, on
404 veut pouvoir être sûr que des <em>données en entrées</em> d'un
405 programme ont un certain
406 format (par exemple, c'est du XHTML valide, sans balise inconnue
409 <p>Il existe plusieurs manières de contraindre les balises d'un
410 document XML. On s'intéresse dans le cours à la plus simple.
413 <div class="sws-slide">
415 <p>Document Type Definitions. Permet de définir le contenu d'un
416 document par des expressions régulières</p>
417 <p>Syntaxe particulière qui n'est pas du XML</p>
418 <p>Permet de définir:</p>
419 <ul><li>les <em>balises autorisées dans un document</em></li>
420 <li>le contenu des balises au moyen d'expressions
422 <li>les <em>attributs d'un élément</em></li>
423 <li>le type des <em>valeurs </em> que peut prendre un
427 <div class="sws-slide">
428 <h1>Syntaxe des DTD</h1>
429 <p>Un fichier contenant une suite de directives de la forme suivantes:</p>
430 <ul><li><tt><!ELEMENT <em>nom_elem</em> <em>regexp_elem</em>></tt>
431 dit qu'un élement de nom <tt><em>nom_elem</em></tt> contient
432 des éléments décrits par l'expression
433 régulière <tt><em>regexp_elem</em></tt></li>
434 <li><tt><!ATTLIST <em>nom_elem</em> <em>nom_att</em> <em>type_att</em> <em>val_att</em>></tt><br/>
435 signifie que l'élément (balise) <tt><em>nom_elem</em></tt>
436 a un attribut <em>nom_att</em>, dont le type
437 est <tt><em>type_att</em></tt> et la valeur
438 est <tt><em>val_att</em></tt></li>
439 <li>Les <em>expressions régulières</em> sont formées
440 de <tt>*</tt>, <tt>+</tt>,<tt>?</tt>, mise en séquence
441 (<tt>,</tt>), <tt>EMPTY</tt> (contenu vide), <tt>ANY</tt>
442 (n'importe quel contenu), <tt>#PCDATA</tt> (du texte)</li>
443 <li>Les <em>types d'attributs</em> sont <tt>ID</tt> (attribut unique
444 dans tous le document ≡ clé primaire), <tt>IDREF</tt> (fait
445 référence à un ID unique ≡ clé étrangère), <tt>CDATA</tt>(du
446 texte simple), <tt>v1|v2|…|vn</tt> (une liste de valeurs fixées)
448 <li>Les <em>valeurs d'attributs</em> sont: <tt>v</tt> (une valeur par
449 défaut si l'attribut est absent), <tt>#REQUIRED</tt>
450 (l'attribut est obligatoire), <tt>#IMPLIED</tt> (l'attribut
451 est optionnel), <tt>#FIXED v</tt> (valeur constante v)</li>
455 <div class="sws-slide">
456 <h1>Exemple de DTD</h1>
457 <code style="color:black;position:relative;left:10%;"><![CDATA[<!ELEMENT recette (title,ingredients,duree,etapes)>
458 <!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
459 <!ELEMENT title #PCDATA >
460 <!ELEMENT ingredients (ingredient+) >
461 <!ELEMENT duree #PCDATA >
462 <!ELEMENT etapes (e*) >
463 <!ELEMENT ingredient #PCDATA>
465 <!ATTLIST e num CDATA>
467 <p>Question: quel est la taille minimale d'un document valide ?</p>
469 <div class="sws-slide">
470 <h1>Utilisation d'une DTD (1)</h1>
471 <p>Il suffit de référencer la DTD dans un élément
472 spécial <br/><tt><!DOCTYPE racine SYSTEM "fichier.dtd" ></tt><br/> avant la racine du
474 <code style="color:black;position:relative;left:10%;"><![CDATA[
475 <!DOCTYPE recette SYSTEM "recette.dtd">
476 <recette difficulte="facile">
477 <title>Tiramisú</title>
479 <ingredient>mascarpone</ingredient>
480 <ingredient>oeufs</ingredient>
485 <e num="1">Séparer les blancs des jaunes</e>
492 <div class="sws-slide">
493 <h1>Utilisation d'une DTD (2)</h1>
495 <li>Les bibliothèques permettant de charger des fichiers XML
496 vérifient qu'il est bien formé (parenthésages, attributs, …)
498 <li>Elles peuvent aussi <em>valider</em> le document par
499 rapport à une DTD</li>
500 <li>Si le fichier est invalide, elles lèvent une erreur</li>
501 <li>C'est une forme de vérification de contraintes