Module M1 WSIA

Transcription

Module M1 WSIA

Module M1 WSIA
TD/TP 2
16 février 2007
Objectifs :
-
Utiliser un langage et une DTD
Validation de DTD et de schéma
Concevoir un schéma
Rendu n°2 : Vous devez soumettre pour le 11/3 à minuit sur
www-limbio.smbh.univ-paris13.fr/WSIA une url contenant les exercices de 1 à 4.
Vous pouvez vérifier que votre code XHTML, SVG sont corrects sur l’url :
http://validator.w3.org
Vous pouvez vérifier que vos schémas :
http://www.xmlme.com/Validator.aspx?mid=83
et http://www.w3.org/2001/03/webdata/xsv
Pour pouvoir voir le résultat de vos fichiers SVG vous devez soit avoir Firefox 1.5
(implémentation partielle) soit avoir le plug-ins adobe.
¾
¾
¾
plug-in :
o SVG viewer (Adobe) : http://www.adobe.com/svg/
Des éditeurs XML/SVG :
o XMLwriter : http://www.xmlwriter.com
o Inkscape http://www.inkscape.org/
Ressource :
o Spécifications : http://www.w3.org/TR/SVG/
o Tutoriaux :
http://www.mozilla.org/projects/svg/
http://www.xml.com/pub/a/2001/03/21/svg.html
http://www.euroclid.fr/Cours_SVG/plan.htm (français)
o SVG reference with examples :
http://www.zvon.org/xxl/svgReference/Output/index.html
Entête d’un fichier SVG :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
Espace de nommage de la première balise <svg> :
<svg xmlns="http://www.w3.org/2000/svg">
Exercice 1 : Tester les fichiers suivant et corriger leur erreurs.
<svg width="400" height="250" xmln="http://www.w3.org/2000/svg">
<text x="80" y="90"
style="stroke:#000099;fill:#000099;fontsize:30;">
Hello world !
</text>
</svg>
Module M1 WSIA
2006-2007
Jérôme Nobécourt ([email protected])
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<rect x=20 y=20 width=250 height=250
style="fill:blue;stroke:pink;stroke-width:15;
fill-opacity:0.8;stroke-opacity:0.5"/>
</svg>
<ellipse cx="300" cy="150"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2">
</svg>
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1">
</svg>
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g id="Grands rectangles rouges">
<rect x="100" y="100" width="200" height="200" />
</g>
<g id="Petits rectangles bleus">
</g>
</svg>
Module M1 WSIA
2006-2007
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:black; stroke-width:2; textrendering:optimizeLegibility; shape-rendering:default" >
<rect x="10" y="100" width="400" height="100" style="fill:yellow" />
<rect x="10" y="225" width="400" height="100" style="fill:green" />
<g style="stroke:blue;fill:cyan">
<rect x="25" y="50" width="50" height="320" style="strokeopacity:0.2;fill-opacity:0.2" />
<rect x="325" y="50" width="50" height="320"
/>
</g>
<text y="385">0.2</text>
<text y="385">0.4</text>
<text y="385">0.6</text>
<text y="385">0.8</text>
<text y="385">1.0</text>
</g>
</svg>
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%"
y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stopopacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stopopacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
Module M1 WSIA
2006-2007
Exercice 2 : Expliquer le fonctionnement des fichiers.
<?xml version="1.0"?>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
polygon:hover {stroke:red; stroke-width:10; fill-opacity:0.4;}
</style>
<polygon fill="red" stroke-width="10" fill-opacity="0.4"
points="350, 75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161"
transform="translate(-350,-200) scale(2) rotate(15)" />
<polygon fill="lime" stroke-width="10"
points="850,75 958,137.5 958,262.5
850,325 742,262.6 742,137.5"
transform="translate(-500,0)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="800">
<g transform="translate(20,20)">
<text x="235" y="25" font-size="18">elliptical arcs (absolute
coords)</text>
<g transform="scale(0.6)" >
<path d="M1,1 1198,1 1198,398 1,398z"
fill="none" stroke="blue" stroke-width="1"/>
<path d="M300,200 H150 A150,150 0 1,0 300,50 z"
fill="red" stroke="blue" stroke-width="5"/>
<path d="M275,175 V25 A150,150 0 0,0 125,175 z"
fill="yellow" stroke="blue" stroke-width="5"/>
<path d="M600,350 L 650,325
A25,25 -30 0,1 700,300 L 750,275
A25,50 -30 0,1 800,250 L 850,225
A25,75 -30 0,1 900,200 L 950,175
A25,100 -30 0,1 1000,150 L 1050,125"
fill="none" stroke="red" stroke-width="5"/>
</g>
</g>
<g transform="translate(20,280)">
<text x="235" y="25" font-size="18">elliptical arcs (relative
coords)</text>
<g transform="scale(0.6)" >
<path d="M1,1 1198,1 1198,398 1,398z"
fill="none" stroke="blue" stroke-width="1"/>
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5"/>
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5"/>
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5"/>
Module M1 WSIA
2006-2007
</g>
</g></svg>
<?xml version="1.0"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
circle:hover {fill-opacity:0.9;}
</style>
<g style="fill-opacity:0.7;">
<circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black;
stroke-width:0.1cm" transform="translate(0,50)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black;
stroke-width:0.1cm" transform="translate(70,150)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black;
stroke-width:0.1cm" transform="translate(-70,150)"/>
</g>
</svg>
Exercice 3 : Aller plus loin avec une DTD : le cas des scripts, des générateurs et
des fichiers mixtes de SVG
Expliquer le fonctionnement des fichiers svg disponibles sur le portail WSIA.
Exercice 4 : regarder le tutoriel XML-Schema disponible à l’URL et réaliser un
fichier XSD permettant de répondre aux contraintes suivantes :
Le but de l’exercice est de manipuler les schémas XML pour valider des documents
numériques.
Vous
devez
vous
reporter
au
tutoriel
XML
schema
(http://www.zvon.org/xxl/XMLSchemaTutorial/Output/series.html) afin de réaliser une
grammaire permettant de valider une bibliothèque virtuelle de documents numériques.
La bibliothèque se compose d’ouvrages qui ont tous une localisation dans la bibliothèque sous
la forme etage-numSalle-numRangArmoire-numColonneArmoire.
Les étages sont numérotés RC-2, RC-1, Accueil, niv1, niv2, niv3, niv4, niv5, réserve. Les
numéros des salles sont compris entre 1 et 10, sauf pour le niv5 entre a et z, et la réserve r0 à
r9. le numéro de rang et de colonne d’armoire est un nombre entre 00 et 99.
Un ouvrage peut être un livre, une revue ou un article. Un chapitre est une division dans un
livre, généralement numérotée. Une section est une division récursive (une section peut avoir
des sections). Une section est identifiée par une numérotation hiérarchique (ex : "4e partie, du
chapitre III du livre B" = "section 2.3.4"). Un article est une unité documentaire complète,
généralement de taille inférieure à un livre (certains livres se composent d'articles, ce sont des
revues).
Attention, il vous est interdit de reprendre les spécifications de la structure documentaire
pour le patrimoine ni celles du Dublin Core. Il faut réaliser la version la plus simple
conforme aux phrases ci-dessus.
Module M1 WSIA
2006-2007

Module M1 WSIA

Transcription

Documents pareils

Mon CV - In-sight

Wechsel von Adobe SVG Viewer zu Ssrc SVG Plugin v1 - Solar-Log

Yosemite National Park Hiking Map

Cordon SVGA eco- 15M

Cordon SVGA eco - 5M

Programmation SIG et Internet Cartographique Séance 4 : Applet

Bernard Bensaïd

SVG - Massif Central Ferroviaire

HTML5 et CSS3 : techniques d`animation