<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook XML V4.4//EN"
  "/usr/share/xml/docbook/schema/dtd/4.4/docbookx.dtd" [
<!NOTATION jpeg SYSTEM "image/jpeg">
<!ENTITY image SYSTEM "TD-3-image-1.jpg" NDATA jpeg >
]>
<article>
  <articleinfo>
    <title>TD-3 : SVG et MathML</title>
    <author>
      <firstname>Benoît</firstname>
      <surname>Valiron</surname>
    </author>
  </articleinfo>

  <sect1>
    <title>Écriture d'une DTD</title>
    <subtitle>(reprise du TD-2)</subtitle>
    <para>
      On souhaite décrire le contenu d'une bibliothèque et des livres
      empruntés avec un document XML. La racine
      sera <code>bibliothèque</code>, et ses fils seront
      d'abord <code>livre</code> puis <code>utilisateur</code>.
      Chaque <code>livre</code> possèdera un attribut <code>id</code>,
      un attribut <code>lang</code>, un fils <code>titre</code>, un
      fils <code>éditeur</code> et un fils <code>emplacement</code>.
      L'attribut <code>id</code> sera de type <code>ID</code>
      (obligatoire). <code>lang</code> pourra
      être <code>fr</code>, <code>en</code> ou <code>de</code>. Par
      défaut, ce sera <code>fr</code>.
      L'élément <code>utilisateur</code> aura comme
      fils <code>nom</code> (obligatoire),
      <code>prénom</code> (optionel), <code>adresse</code> (optionel),
      et comme attribut <code>emprunts</code> (optionel, valeur par
      défaut <code>""</code>), de type IDREFS.
    </para>
    <para>
      Écrivez la DTD correspondante, puis produisez un fichier
      contenant 3 livres et deux utilisateurs Alice et Bob. Alice
      aura emprunté les deux premiers livres et Bob le dernier.
    </para>
    <note>
      <title>Note</title>
      <para>
        Cet exercice est l'archétype de ce que vous pourriez avoir à
        faire en examen.
      </para>
    </note>
  </sect1>
  
  
  <sect1>
    <title>Dessin en SVG</title>
    <para>
      On rappelle que la racine d'un document SVG
      est l'élément <code>svg</code> et que
      les sous éléments sont sous la formes:
      <programlisting><![CDATA[<circle cx="70" cy="100" r="50" />
<rect x="150" y="50" width="135" height="100" />
<line x1="325" y1="150" x2="375" y2="50" />
<polyline points="50,250 75,350 100,250 125 350" />
<polygon points=" 250,250 297,284 279,340" />
<ellipse cx="400" cy="300" rx="72" ry="50" />
<texte x="100" y="100">Hello</text>]]></programlisting>

      Par ailleurs, ils peuvent prendre les
      attributs <code>stroke</code> (couleur de
      trait), <code>stroke-width</code> (épaisseur de trait)
      et <code>fill</code> (couleur de l'intérieur de la forme).  Par
      défaut, l'intérieur d'une forme est blanche, de même que la
      couleur de son trait.
    </para>
    
    <para>
      Les lignes suivantes pourraient apparaitre dans une DTD pour
      SVG. Finissez-les.
      <programlisting><![CDATA[<!ELEMENT svg ...
<!ELEMENT rect ...
<!ATTLIST rect ...]]></programlisting>
      Attention au couleurs par défaut.
    </para>

    <para>
      Écrivez un fichier SVG qui contient:
      <itemizedlist>
        <listitem><para>
          Un rectangle de largeur 100, de hauteur 200, dont le coin
          supérieur gauche est placé aux coordonnées (50,10), est
          rempli de rouge et dont le contour orange est de largeur 10.
        </para></listitem>
        <listitem><para>
          Un cercle de rayon 50, dont le centre est au point de
          coordonnées (80, 120), de couleur bleu. Le contour est noir
          et de largeur 2 pixels.
        </para></listitem>
        <listitem><para>
          Une ellipse de rayon en x 20, de rayon en y 40, de centre
          (120, 120), de même remplissage et contour que le cercle
          précédant.
        </para></listitem>
        <listitem><para>
          Un polygone qui entoure le tout, de couleur intérieur jaune
          et de contour noir de largeur 1. (Attention, il est opaque).
        </para></listitem>
        <listitem><para>
          Du texte en noir sous le polygone.
        </para></listitem>
      </itemizedlist>
    </para>
  </sect1>


  <sect1>
    <title>Un peu de MathML</title>
    <para>
      On rappelle que les éléments d'une formule MathML sont les
      suivants : <code>mi</code> pour introduire une
      variable, <code>mo</code> pour un opérateur, <code>mn</code> pour
      un nombre. La concaténation de formules se fait à l'aide de
      l'élément <code>mrow</code>. Les formules complexes
      sont <code>msqrt</code> pour la racine carré, <code>mroot</code>
      pour la racine générale, <code>mfenced</code> pour les
      parenthèses, <code>mfrac</code> pour les
      fractions, <code>msup</code> pour les exposants. Deux opérateurs
      utiles mais non-accessibles sur le clavier sont les suivants.
      &quot;&#183;&quot; s'obtient avec <code>&amp;#183;</code> et
      &quot;&#177;&quot; avec <code>&amp;#177;</code>.
    </para>
    
    <para>
      Reproduisez la formule 1 en MathML.
      <figure>
        <title>Une formule...</title>
        <graphic align="center" format="JPG" entityref="image"/> <!-- ./TD-3-image-1.jpg"/>-->
      </figure>
    </para>
    
    <para>
      Une invocation de la DTD pour MathML est la suivante :
      <programlisting><![CDATA[<!DOCTYPE math 
    PUBLIC "-//W3C//DTD MathML 2.0//EN"
           "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">]]></programlisting>

      Définissez des ENTITY pour les deux symboles afin de leur donner
      un nom plus lisible. Comment les ajouteriez-vous à la déclaration ?
    </para>
  </sect1>


  <sect1>
    <title>Espaces de noms, XHTML, SVG et MathML</title>
    <para>
      Une DTD simplifiée pour XHTML qui incluerait du SVG et du MathML
      pourrait commencer comme suit :

      <programlisting><![CDATA[<!ELEMENT html (head,body)>
<!ELEMENT head title>
<!ELEMENT body (h1|h2|p)*>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT h2 (#PCDATA)>
<!ATTLIST h1 align (center | left | right)>
<!ATTLIST h2 align (center | left | right)>
<!ELEMENT p (#PCDATA | b | i | s:svg | m:math)*>
<!ELEMENT b (#PCDATA | i)*>
<!ELEMENT i (#PCDATA | b)*>
<!-- Après ça, la définition de s:svg et de m:math et de leurs 
     sous-éléments -->
...]]></programlisting>
      
      Créez un document XHTML avec un titre (de première classe), deux
      paragraphe avec leur propre titre (deuxième classe), dans le
      premier, un dessin SVG et dans le deuxième, une formule
      MathML. Attention aux espaces de noms.
    </para>
  </sect1>

  <sect1>
    <title>Encore des entités</title>
    <para>
      Considérez le fichier XML suivant.
      <programlisting><![CDATA[<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE ville SYSTEM "ville.dtd">
<ville xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
  <nom>&grenoble;</nom>
  <geo:lat>45.196349</geo:lat>
  <geo:long>5.73226</geo:long>
</ville>
]]></programlisting>
      Si le fichier valide, que contient la DTD ?
    </para>
    <para>
      Même question, avec une entité paramètre pour <code>geo</code>.
      Comment changeriez-vous l'appel à la DTD dans le fichier XML
      pour pouvoir changer de préfixe ?
    </para>
  </sect1>
</article>
