+++ /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 / blobdiff