--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+>
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Introduction, UTF-8 et XML</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+
+ </head>
+ <body>
+ <a href="" class="sws-previous"/>
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>XML et Programmation Internet</h1>
+ <h1>Cours 1</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a>
+ </div>
+
+ <div class="sws-slide" >
+ <h1>Contenu du cours</h1>
+ <ol >
+ <li >XML pour la représentation des données
+ <ul>
+ <li>Motivation, présentation d'XML sérialisé (cours 1) </li>
+ <li>Notions de schémas et de validation (cours 1) </li>
+ </ul>
+ </li>
+ <li class="sws-pause" style="padding:20pt 0;" > Interroger des
+ documents XML
+ <ul>
+ <li>XPath (cours 2-3)</li>
+ <li>XSLT (cours 3-4)</li>
+ </ul>
+ </li>
+ <li class="sws-pause" style="padding:20pt 0;" > Programmer
+ avec XML
+ <ul>
+ <li>Les modèles DOM et SAX (cours 5)</li>
+ <li>XML Avancé: encodage relationnel (cours 6)</li>
+ </ul>
+ </li>
+
+ </ol>
+
+ </div>
+ <div class="sws-slide" >
+ <h1>Modalités de Contrôle des Connaissances (MCC)</h1>
+ <p>2 sessions:</p>
+ <ul >
+ <li > 1<sup>ère</sup> session
+ <ul>
+ <li> Contrôle continu (33%): Projet (soutenances fin janvier)
+ </li>
+ <li> Examen écrit (67%) </li>
+ </ul>
+ </li>
+ <li class="sws-pause" >
+ 2<sup>ème</sup> session (examen 100%)</li>
+ </ul>
+ <p>Organisation:</p>
+ <ul>
+ <li> 8 séances de cours</li>
+ <li> 8 séances de TD (sur machine)</li>
+ </ul>
+ </div>
+ <h1>Introduction</h1>
+ <div class="sws-slide" >
+ <h1>Qu'est-ce qu'XML ?</h1>
+ <p>XML (eXtensible Markup Language) est un standard de
+ représentation de données</p>
+ <ul>
+ <li>Conçu pour être lisible par un humain, mais traîtable
+ simplement par les machines</li>
+ <li>Permet la représentation de données structurées</li>
+ <li>Est <em>normalisé</em> (par le W3C)</li>
+ <li>Typé (notion de schéma très fine)</li>
+ </ul>
+ </div>
+ <div class="sws-slide" >
+ <h1>En a-t-on besoin ?</h1>
+ <p>Quels sont les autres moyen de représenter les données ?</p>
+ <ul>
+ <li class="sws-pause">Table relationnelle</li>
+ <li class="sws-pause">Fichiers textes non structurés</li>
+ <li class="sws-pause">Format binaires <i>ad-hoc</i></li>
+ </ul>
+ <p class="sws-pause">Quels sont les désavantages des
+ représentations ci-dessus ?</p>
+ <ul>
+ <li class="sws-pause">Non échangeable (il faut faire
+ un <i>dump</i> de la base), contraintes simples</li>
+ <li class="sws-pause">Lisible, mais sans structure donc
+ difficilement utilisable par un programme, pas de schéma</li>
+ <li class="sws-pause">Lié à une utilisation particulière</li>
+ </ul>
+
+ </div>
+
+
+ <div class="sws-slide">
+ <h1>Historique</h1>
+ <ul>
+ <li>Fin des années 1980: SGML adopté pour la publication de
+ média</li>
+ <li>Milieu des années 1990: un groupe de travail commence à
+ étudier l'utilisation de SGML pour le Web (qui débutait)
+ </li>
+ <li>1998 : XML 1.0 devient une recommandation du W3C</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Exemples d'utilisation</h1>
+ <ul>
+ <li>Page Web (XHTML)</li>
+ <li>Flux RSS (atom)</li>
+ <li>Voix sur IP/Messagerie instantanée (SMIL/Jabber)</li>
+ <li>Images vectorielles (SVG)</li>
+ <li>Données biologiques (séquençages)</li>
+ <li>Données financières et bancaires (XBRL)</li>
+ <li>Document bureautiques (OpenDocument Format, Office
+ 2010)</li>
+ <li>Données linguistiques (TreeBank)</li>
+ </ul>
+
+ </div>
+ <h1>Le standard UTF-8</h1>
+ <div class="sws-slide">
+ <h1>Représentation des textes</h1>
+ <p>Avant de représenter des documents complexes, on s'intéresse
+ aux textes (sans structure particulière)</p>
+ <p class="sws-pause">Problématique: comment représenter du texte
+ réaliste ?</p>
+ <p>Exemple de texte réaliste:<br/>
+ <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
+ <tt>"</tt>
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Historiquement…</h1>
+ <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
+ <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
+ <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
+ symboles »</li>
+ <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
+ (lettres accentuées française, italienne, …)</li>
+ <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
+ (Serbe, Hongrois, Croate, Tchèque, …)</li>
+ <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
+ esperanto, </li>
+ <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
+ lituanien, …</li>
+ <li class="sws-pause"> … </li>
+ <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
+ remplacés (par exemple pour « € » à la place de « ¤ »)</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>… et pendant ce temps là, ailleur dans le monde </h1>
+ <p>Encodage multi-octets:</p>
+ <ul>
+ <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
+ <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
+ </ul>
+ <p>Impossibilité de mettre plusieurs « alphabets » dans un même
+ texte</p>
+ <p>Chaque logiciel « interprétait » les séquences d'octet de
+ manière prédéfinie</p>
+ </div>
+ <div class="sws-slide">
+ <h1>UTF-8</h1>
+ <p>Universal (Character Set) Transformation Format 8 bit</p>
+ <ul><li>Encodage à taille variable « universel » (contient tous
+ les alphabets connus)</li>
+ <li>Un organisme (ISO) donne un code à chaque symbole</li>
+ <li>Compatible avec ASCII 7 bits</li>
+ </ul>
+ <p>Encodage</p>
+ <table class="withborder" style="position:relative;left:8%;">
+ <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
+ 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
+ <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
+
+ <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
+ <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>
+ <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>
+
+ <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>
+ <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>
+
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Exemples</h1>
+ <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
+ ⟶ 0100 1010<sub>2</sub> (représenté sur un
+ seul octet)</p>
+
+ <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
+ ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
+ 3 octets) : <br/>
+ <s>1110</s><em>0001</em> <s>10</s><em>11 10
+ 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
+</p>
+ <p><tt style="font-size:200%">🐵</tt>
+ ⟶ 128053<sub>10</sub> ⟶ …
+ ≡ 240 237 220 181</p>
+ <p>Avantages</p>
+ <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
+ anglais sont toujours lisibles)</li>
+ <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
+ caractères font 32 bits)</li>
+ </ul>
+ <p>Inconvénients</p>
+ <ul>
+ <li>Caractères à taille variable: il faut parcourir le texte
+ pour trouver le n<sup>ème</sup> caractère</li>
+ <li>Les vieux logiciels doivent être adaptés</li>
+ </ul>
+ </div>
+ <h1>XML</h1>
+ <div class="sws-slide">
+ <h1>Qu'est-ce qu'un document XML ? (1)</h1>
+ <ul>
+ <li>C'est un fichier texte, encodé par défaut en UTF-8</li>
+ <li>Le texte peut être <em>structuré</em> au moyen
+ de <em>balises</em></li>
+ <li>Une balise est de la forme <tt><foo></tt> (ouvrante)
+ ou <tt></foo></tt> (fermante)</li>
+ <li>Les balises doivent être bien parenthésées</li>
+ <li>Il doit y avoir une racine « englobant » tout le contenu du
+ document (texte et autres balises). On appelle cette balise la
+ <em>racine</em></li>
+ <li>Les balises sont <em>sensibles à la casse</em></li>
+ <li><tt><foo/></tt> est un raccourcis pour <tt><foo></tt><tt></foo></tt></li>
+ </ul>
+ <p>Exemple</p>
+ <code style="position:relative;left:10%;color:black;"><![CDATA[<exemple>
+ ceci est la racine <balise>on peut</balise> y mettre des
+ balises <level><level>imbriquées</level> </level> comme
+ on veut si
+ elles sont <FOO>bien</FOO> parenthésées
+</exemple>]]>
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Qu'est-ce qu'un document XML ? (2)</h1>
+ <ul>
+ <li>On peut mettre des espaces et des commentaires en dehors de
+ la racine</li>
+ <li>Les commentaires sont délimités par <s><tt style=""><!--</tt></s> et <s><tt>--></tt></s></li>
+ <li>On peut annoter les balises ouvrantes avec
+ des <em>attributs</em> de la forme <tt>att</tt>=<tt>"v"</tt> (on
+ peut aussi utiliser « ' » pour délimiter les chaînes)</li>
+ <li>Au sein d'un même élément (ou balise) on ne peut pas avoir
+ deux fois un attribut <em>avec le même nom</em></li>
+ <li>On dispose de <em>séquences d'échappement</em>: &lt; pour <,
+ &gt; pour >, &apos; pour ', &quot; pour
+ ", &amp; pour & et &<tt>nnnn</tt>; pour un caractère
+ UTF-8 dont le code décimal est <tt>nnnn</tt>.</li>
+ </ul>
+ <p>Exemple</p>
+ <code style="position:relative;left:10%;color:black;"><<![CDATA[-- commentaire en début de fichier-->
+<exemple id="1">
+ Un autre <balise id="2" type="texte">exemple</balise>
+</exemple>]]>
+ </code>
+
+</div>
+ <div class="sws-slide">
+ <h1>Exemple complet (trouver toutes les erreurs)</h1>
+<code style="position:relative;left:10%;color:black;"><![CDATA[
+<exemple id="1">
+
+ On se donne cette fois un <FOO>exemple</Foo> complet, mais
+
+ <balise>incorrect. En effet, il y a
+
+ <note id="32" val='32'>plusieurs</note> erreurs dans
+
+ <note id="42" id="51">dans ce document</note>.
+
+ Il n'est pas simple de toutes les trouver
+
+</exemple>
+<exemple>En plus cet exemple est en deux parties</exemple>
+]]></code>
+ </div>
+ <div class="sws-slide">
+ <h1>Utilisations d'XML (1)</h1>
+ <ul>
+ <li>Les noms de balise sont <em>libres</em>. La personne qui
+ conçoit le document choisit les balises</li>
+ <li>Un document XML est une manière de représenter
+ un <em>arbre</em> (l'élement racine est la racine de
+ l'arbre)</li>
+ </ul>
+ <p>Un bon exemple est XHTML (XML pour les pages Web)</p>
+ <ul>
+ <li>La structure des documents (titres, sections, paragraphes,
+ tableaux) est donnée par les balises
+ </li>
+ <li>Le rendu graphique ne fait pas partie de la structure du
+ document et est donné par un moyen annexe (feuille de style
+ CSS par exemple)</li>
+ </ul>
+ <p>Autre exemple: les flux RSS de mises à jour d'un blog</p>
+ <ul>
+ <li><a href="https://blog.wikimedia.org/feed/">Lien vers le
+ blog wikimedia</a></li>
+ <li>XML est un exellent format <em> d'échange </em></li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Utilisation d'XML (2)</h1>
+ <ul>
+ <li>Le format texte est un mauvais format pour
+ l'interrogation</li>
+ <li>Il encode un arbre mais ne permet pas de le manipuler
+ directement</li>
+ </ul>
+ <p>En réalité, on ne manipule pratiquement jamais de XML tel que stocké
+ sur le disque </p>
+ <ul>
+ <li>On peut charger un document XML sous la forme d'un arbre
+ (Objet Java par exemple) dans lequel on peut naviguer</li>
+ <li>Certaines bases de données permettent de stocker des
+ fichiers XML dans des colones (comme un VARCHAR)</li>
+ </ul>
+ <p>Une application moderne mélange BD relationnelle et XML (et
+ aussi d'autres choses si besoin: JSON, YAML, …)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Étude de cas: journal en ligne</h1>
+ <p>On se pose dans le cas du site internet d'un journal en
+ ligne</p>
+ <ul>
+ <li>Le site a des utilisateurs enregistrés (ainsi qu'un accès
+ invité)</li>
+ <li>Le site propose des articles en lecture sur le site</li>
+ <li>Le site permet d'exporter des articles en PDF pour
+ impression</li>
+ <li>Le site permet la lecture sur smartphone/tablette</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Une solution possible</h1>
+ <ul><li>On stocke les articles comme des fichiers XML avec une
+ syntaxe particulière:
+<code style="font-size:80%;position:relative;left:10%;color:black;"><![CDATA[<article>
+ <category>Science</category>
+ <title>A new planet discovered</title>
+ <date>2014/09/09</date>
+ <authors>
+ <name><first>Jonh</first><last>Doe</last></name>
+ <name><first>Someone</first><last>Else</last></name>
+ </authors>
+ <content>
+ <bold>A new plange</bold> has been discovered …
+ </content>
+</article>]]>
+</code>
+ </li>
+<li>Une <em>BD relationelle</em> stocke les données dynamiques (utilisateurs, …)</li>
+<li>Un <em>programme</em> (Java ou PHP) applique une transformation (XSLT) pour
+ transformer les articles XML en pages XHTML</li>
+<li>Le programme utilise la BD pour personaliser l'affichage</li>
+<li style="background:white;">Le programme applique une autre transformation pour transformer
+ les articles en PDF plutot que XHTML</li>
+<li style="background:white;">Le programme transforme l'article en un
+ XML RSS pour affichage dans un lecteur de blog</li>
+</ul>
+ </div>
+ <h1>Validation de documents</h1>
+ <div class="sws-slide">
+ <h1>Schéma d'un document</h1>
+ <p>Comme tout le monde peut définir son propre format XML, on
+ veut pouvoir être sûr que des <em>données en entrées</em> d'un
+ programme ont un certain
+ format (par exemple, c'est du XHTML valide, sans balise inconnue
+ des navigateurs)
+ </p>
+ <p>Il existe plusieurs manières de contraindre les balises d'un
+ document XML. On s'intéresse dans le cours à la plus simple.
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>DTD</h1>
+ <p>Document Type Definitions. Permet de définir le contenu d'un
+ document par des expressions régulières</p>
+ <p>Syntaxe particulière qui n'est pas du XML</p>
+ <p>Permet de définir:</p>
+ <ul><li>les <em>balises autorisées dans un document</em></li>
+ <li>le contenu des balises au moyen d'expressions
+ régulières</li>
+ <li>les <em>attributs d'un élément</em></li>
+ <li>le type des <em>valeurs </em> que peut prendre un
+ attribut</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Syntaxe des DTD</h1>
+ <p>Un fichier contenant une suite de directives de la forme suivantes:</p>
+ <ul><li><tt><!ELEMENT <em>nom_elem</em> <em>regexp_elem</em>></tt>
+ dit qu'un élement de nom <tt><em>nom_elem</em></tt> contient
+ des éléments décrits par l'expression
+ régulière <tt><em>regexp_elem</em></tt></li>
+ <li><tt><!ATTLIST <em>nom_elem</em> <em>nom_att</em> <em>type_att</em> <em>val_att</em>></tt><br/>
+signifie que l'élément (balise) <tt><em>nom_elem</em></tt>
+ a un attribut <em>nom_att</em>, dont le type
+ est <tt><em>type_att</em></tt> et la valeur
+ est <tt><em>val_att</em></tt></li>
+ <li>Les <em>expressions régulières</em> sont formées
+ de <tt>*</tt>, <tt>+</tt>,<tt>?</tt>, mise en séquence
+ (<tt>,</tt>), <tt>EMPTY</tt> (contenu vide), <tt>ANY</tt>
+ (n'importe quel contenu), <tt>#PCDATA</tt> (du texte)</li>
+ <li>Les <em>types d'attributs</em> sont <tt>ID</tt> (attribut unique
+ dans tous le document ≡ clé primaire), <tt>IDREF</tt> (fait
+ référence à un ID unique ≡ clé étrangère), <tt>CDATA</tt>(du
+ texte simple), <tt>v1|v2|…|vn</tt> (une liste de valeurs fixées)
+ </li>
+ <li>Les <em>valeurs d'attributs</em> sont: <tt>v</tt> (une valeur par
+ défaut si l'attribut est absent), <tt>#REQUIRED</tt>
+ (l'attribut est obligatoire), <tt>#IMPLIED</tt> (l'attribut
+ est optionnel), <tt>#FIXED v</tt> (valeur constante v)</li>
+</ul>
+
+ </div>
+ <div class="sws-slide">
+ <h1>Exemple de DTD</h1>
+<code style="color:black;position:relative;left:10%;"><![CDATA[<!ELEMENT recette (title,ingredients,duree,etapes)>
+<!ATTLIST recette difficulte (facile|normal|difficile) #REQUIRED>
+<!ELEMENT title #PCDATA >
+<!ELEMENT ingredients (ingredient+) >
+<!ELEMENT duree #PCDATA >
+<!ELEMENT etapes (e*) >
+<!ELEMENT ingredient #PCDATA>
+<!ELEMENT e #PCDATA>
+<!ATTLIST e num CDATA>
+]]></code>
+<p>Question: quel est la taille minimale d'un document valide ?</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Utilisation d'une DTD (1)</h1>
+ <p>Il suffit de référencer la DTD dans un élément
+ spécial <br/><tt><!DOCTYPE racine SYSTEM "fichier.dtd" ></tt><br/> avant la racine du
+ document</p>
+<code style="color:black;position:relative;left:10%;"><![CDATA[
+<!DOCTYPE recette SYSTEM "recette.dtd">
+<recette difficulte="facile">
+<title>Tiramisú</title>
+<ingredients>
+ <ingredient>mascarpone</ingredient>
+ <ingredient>oeufs</ingredient>
+ …
+</ingredients>
+<duree>2h</duree>
+<etapes>
+ <e num="1">Séparer les blancs des jaunes</e>
+ <e num="2">…</e>
+ …
+</etapes>
+</recette>
+]]></code>
+ </div>
+ <div class="sws-slide">
+ <h1>Utilisation d'une DTD (2)</h1>
+ <ul>
+ <li>Les bibliothèques permettant de charger des fichiers XML
+ vérifient qu'il est bien formé (parenthésages, attributs, …)
+ </li>
+ <li>Elles peuvent aussi <em>valider</em> le document par
+ rapport à une DTD</li>
+ <li>Si le fichier est invalide, elles lèvent une erreur</li>
+ <li>C'est une forme de vérification de contraintes
+ d'intégrité</li>
+ </ul>
+ </div>
+ </body>
+</html>
projects / hacks / simpleWebSlides.git / commitdiff