INF356 -- TP 3

TP 3, 07/10/2009

Par Benoît Valiron <benoit.valiron [at] monoidal.net> et Jean Baptiste FADDOUL <jean-baptiste.faddoul [at] xrce.xerox.com>

Pour ce TP, il faut que votre navigateur supporte le MathML et le SVG.

• Ici : "$\frac{\sqrt{x}}{2^3}$" vous êtes sensés voir "racine carré de x sur 2 puissance 3".
• Ici: " " vous êtes sensé voir un rond rouge avec un bord bleu contenant un carré jaune à bord vert.

Place au TP.

1. Reprendre la question 1 du TD : écrivez les fichiers XML et DTD et validez avec le validateur.

2. Voila un dessin :

   

   Reproduisez ce dessin en SVG. Les noms de couleur à utiliser sont sandybrown, brown, khaki, blue et deepskyblue. On s'attend à ce que l'antenne soit représentée par un polyline.

   Donnez à l'élément svg un argument viewBox : pouvez-vous ne montrer que l'antenne de la maison ? que la fenêtre ovale ? On rappelle que l'argument viewBox prends comme valeur "x y width height"

   Montrez juste l'antenne. Ajoutez un argument width de 1cm et un argument height de 12cm. Que se passe-t-il ?

   Le problème est que width et height ne sont pas en rapport avec le ratio de la fenêtre de vision viewBox. Pour que cela marche, il faut que le rectangle défini par width et height soit en rapport avec celui donné par viewBox.

3. Reproduisez la formule de l'exercice 3 du TD 3 :

   

   On rappelle que les éléments d'une formule MathML sont les suivants : mi pour introduire une variable, mo pour un opérateur, mn pour un nombre. La concaténation de formules se fait à l'aide de l'élément mrow. Les formules complexes sont msqrt pour la racine carré, mroot pour la racine générale, mfenced pour les parenthèses, mfrac pour les fractions, msup pour les exposants. Deux opérateurs utiles mais non-accessibles sur le clavier sont les suivants. "·" s'obtient avec &#183; et "±" avec &#177;.

4. Reproduisez le texte suivant en XHTML, en utilisant la syntaxe simplifiée donnée dans le TD 3 :

   <!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 -->
   ...
   

   

   Le delta grec Δ s'obtient avec l'entité &#916;. Attention aux espaces de noms !

5. Dans le fichier XHTML juste créé, placer le dessin SVG en place de la variable "x". Jouez avec les valeurs de width et height pour que la maison rentre.

6. La maison n'est pas une variable très claire. Faites en SVG un symbôle "x" bleue (une croix). Remplacer dans le fichier XHTML la variable maison par votre croix.

   On peut sur le même principe dessiner un "a", un "b", un "c" et un "d" : faites en SVG ces lettres aussi jolies que possible et placez-les en place des occurences des variables correspondantes (vous pouvez les faire avec des polylines, ça marche bien).

   

7. Note : Si vous êtes vraiment motivé et que vous voulez dessiner un arc de cercle, vous pouvez "tricher" en dessinant un cercle puis en plaçant à un endroit judicieux une figure (cercle, rectangle,...) de bord et de fond blanc. Il y a des fonctions plus évoluées en SVG pour faire cela, par exemple l'élément path que nous n'avons pas vu. Il est alors possible de dessiner un "a" qui ressemble à ça :