ACCARY-BARBIER / CNAM - Cycle C - 2005-2006 1 1ère partie : Technologies XML  CHAPITRE 1 : XML et DTD  CHAPITRE 2 : Schémas XML  CHAPITRE 3 : XPath.

Présentation au sujet: "ACCARY-BARBIER / CNAM - Cycle C - 2005-2006 1 1ère partie : Technologies XML  CHAPITRE 1 : XML et DTD  CHAPITRE 2 : Schémas XML  CHAPITRE 3 : XPath."— Transcription de la présentation:

1 ACCARY-BARBIER / CNAM - Cycle C - 2005-2006 1 1ère partie : Technologies XML  CHAPITRE 1 : XML et DTD  CHAPITRE 2 : Schémas XML  CHAPITRE 3 : XPath et XSLT  CHAPITRE 4 : Applications XML

2 ACCARY-BARBIER / CNAM - Cycle C - 2005-20062 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

3 ACCARY-BARBIER / CNAM - Cycle C - 2005-20063 Échange de Données Informatisées (EDI)  Définition de formats de documents standard  Échange de tous types d'informations au sein de l’entreprise  Intégration de ces données dans leurs propres systèmes d'information (EDI et E-commerce).  XML permet  Échange avec un nombre important de partenaires  Coût de l’échange plus faible  Développements d’applications avec des outils modernes (Java, ActiveX).

4 ACCARY-BARBIER / CNAM - Cycle C - 2005-20064 Gestion Électronique de Documents (GED)  Mise en place des documentations sur les sites intranet très vite limitée.  Utiliser et retrouver les informations pertinentes  besoin d'outils nouveaux pour  Indexer  Organiser  Structurer le contenu des documents accessibles  XML apporte des solutions grâce aux structures de documents et aux nombreux langages de description de contenu qui lui sont associés.

5 ACCARY-BARBIER / CNAM - Cycle C - 2005-20065 Interopérabilité de SI hétérogènes  Problématique actuelle importante : le développement d'applications dans des architectures hétérogènes.  Nombreuses solutions existent  Applications Client/Serveur  Applications intranet  Outils Corba (EJB - Enterprise Java Beans)  DCOM (ActiveX) ...  XML permet, via différents standards (DOM, WIDL,...), d'étendre les possibilités des applications Internet actuelles.

6 ACCARY-BARBIER / CNAM - Cycle C - 2005-20066 Personnalisation de la relation client (CRM)  CRM (Customer Relationship Management) ou GRC (Gestion de la Relation Client)  Proposition de solutions technologiques pour renforcer la communication entre entreprise et clients  Amélioration de la relation avec la clientèle  automatisation des différentes composantes de la relation client  XML offre des solutions efficaces dans le développement d’application de CRM  Développement d'applications WEB dynamiques  Accessibles aussi bien en Internet qu'en intranet

7 ACCARY-BARBIER / CNAM - Cycle C - 2005-20067 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

8 ACCARY-BARBIER / CNAM - Cycle C - 2005-20068 Introduction  XML : méta-langage de description, permettant de créer des langages plus spécialisés pour divers domaines :  Mathématiques,  Chimie,  Graphiques 2D,  Multimédia,  Développement web ...  Ensemble cohérent de langages faits pour être utilisés ensemble  Comme les standards connexes (XPath, XSL, XLink, …), ces applications dérivées peuvent devenir des recommandations du W3C.

9 ACCARY-BARBIER / CNAM - Cycle C - 2005-20069 Applications recommandées du W3C  Applications développées par le W3C pour représenter différents aspects des documents sur le Web  XHTML  MathML (Mathematical Markup Language) pour la description et communication d'informations mathématiques et scientifiques sur le Web,  SMIL (Synchronized Multimedia Integration Langage) pour la gestion fine des ressources multimédia sur le Web,  SVG (Scalable Verctor Graphics) pour la description en XML des graphiques 2D,  RDF (Resource Description Framework) pour associer des descripteurs à toutes ressources XML afin d’en faciliter la recherche…  XForms, XLink, XPointer, XMPP…

10 ACCARY-BARBIER / CNAM - Cycle C - 2005-200610 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

11 ACCARY-BARBIER / CNAM - Cycle C - 2005-200611 Histoire  XHTML a été validé par le w3C depuis janvier 2000 et est une application XML dédiée à la publication sur le web.  Née du constat HTML  Langage de mise en forme limité  Pages de plus en plus complexes.  Perversion de la norme originelle : pages de codes  Lourdes,  Incohérentes,  Dépendantes des navigateurs,  …

12 ACCARY-BARBIER / CNAM - Cycle C - 2005-200612 Objectifs  Après HTML 4.01 (1997) : Nouvelle génération de HTML en utilisant les technologies XML  Plusieurs objectifs :  Favoriser le développement de pages correctes  Intégrer HTML avec les autres applications XML  Permettre une modularité pour s'adapter à la variété croissante des navigateurs  Réduire les coûts de production des sites Web  http://www.w3.org/MarkUp/xhtml-roadmap/ http://www.w3.org/MarkUp/xhtml-roadmap/

13 ACCARY-BARBIER / CNAM - Cycle C - 2005-200613 Avantages Avantages  XHTML  Syntaxe très proche du HTML  Écriture plus propre et plus stricte des balises (code bien formé et valide!)  2 principaux avantages :  Extensibilité : code rigoureux donc  Évolutif  « Validable » par des DTD  Portabilité : code léger et propre  Pas besoin de tolérance de la part des navigateurs (pseudo tolérance actuelle aux pages HTML malformées et bancales)  Indépendance vis-à-vis des plateformes de lecture (PDA, portables..)

14 ACCARY-BARBIER / CNAM - Cycle C - 2005-200614 Balises et attributs Conventions de nommage XHTML :  Minuscules : Balises et attributs en bas de casse.  Guillemets : Attributs entre guillemets.  Minimisation : Notations en raccourci des attributs booléens ne sont plus autorisées.  Ainsi  Devient.  Nouvel attribut pour les ancres :  L'attribut "name=" de la balise A servant à indiquer la position d'une ancre en HTML, est remplacé par l'attribut "id="

15 ACCARY-BARBIER / CNAM - Cycle C - 2005-200615 Syntaxe plus stricte  Fermeture :  Plus de tolérance d'oubli de balises de fermeture  Les balises vides doivent être closes.  devient  Imbrication :  Imbrication stricte des balise  1 2  Respect de la structure logique d'imbrication,  Obligation :  Attributs omissibles désormais obligatoires. (ex : alt )  Confusion :  Encadrement des scripts ou des styles par un CDATA : Bonjour le monde ! ");]]>

16 ACCARY-BARBIER / CNAM - Cycle C - 2005-200616 DTD XHTML  Documents XHTML validable par DTD :  Possibilité de lier la page XHTML à une DTD externe  Utilisation de DTD génériques accessibles sur le serveur du W3C  (Pour ne pas retomber dans une anarchie de présentation)  3 exemples de déclaration XHTML (normées par le W3C) : 

17 ACCARY-BARBIER / CNAM - Cycle C - 2005-200617 Utilisation des styles CSS  Depuis la norme HTML 4.01  Choix du W3C : privilégier les feuilles de styles pour la mise en forme de documents.  Cette tendance accentuée avec la norme XHTML (transition vers le XML qui utilise son propre langage de style, le XSL)  Dissociation contenu/forme est seule garante d'un corpus léger et évolutif  Le contenu du document est décrit par le balisage XHTML  La mise en forme se fait par des styles CSS, si possible externalisés dans une feuille de style

18 ACCARY-BARBIER / CNAM - Cycle C - 2005-200618 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

19 ACCARY-BARBIER / CNAM - Cycle C - 2005-200619 Origines  Problème : mise à disposition sur le web de documentation scientifique et technique contenant des formules et des équations mathématiques  HTML non compétant : pas de format adapté à la présentation des expressions mathématiques  Utilisation d'images masque le problème  MathML conçu par le groupe W3C pour pouvoir inclure des données mathématiques de manière simple.  MathML version 2.0 a un statut de recommandation du 21 Février 2001, dont les spécifications sont disponibles à : http://www.w3.org/TR/2001/REC-MathML2-20010221 http://www.w3.org/TR/2001/REC-MathML2-20010221  Aujourd'hui ni Internet Explorer ni Navigator ne supportent MathML. Le navigateur Amaya, du W3C, le supporte. Les versions récentes de Firefox permette l’affichage de pages contenant du code MathMl

20 ACCARY-BARBIER / CNAM - Cycle C - 2005-200620 Exemple (a+b) 2  Cours sur MathML et Exemples : http://www.yoyodesign.org/doc/w3c/mathml2/chapter2.html PrésentationContenu a + b 2 a b 2

21 ACCARY-BARBIER / CNAM - Cycle C - 2005-200621 MathML:Presentation  Description de la présentation des expressions mathématiques  Environ 30 éléments et 50 attributs  Construction par boîtes imbriquées  Présentation selon le contexte visuel  Exemple :  MathML présentation et MathML contenu peuvent être combinés

22 ACCARY-BARBIER / CNAM - Cycle C - 2005-200622 Eléments de l'exemple présentation  Eléments de MathML présentation :  : rangée d'un matériel aligné horizontalement.  Les sous-expressions peuvent à leur tour être contenues dans un élément.  : symboles fictifs de séparation  accolades, crochets et parenthèses  Par défaut, ce sont des parenthèses  pour l'affichage des variables a et b,  pour signaler l'opérateur +.  : écriture en lettres supérieures  Admet deux arguments dans cet ordre : expression de base (a+b) et expression en exposant (2).

23 ACCARY-BARBIER / CNAM - Cycle C - 2005-200623 MathML:Contenu  Description de la structure mathématique :  Environ 120 éléments et 12 attributs  Application de fonctions :  function arg1... argn  Une centaine d'opérateurs et de fonctions : ,,  Éléments de bases :  identificateurs et nombres  Extensibilité : ...  Constructeurs :  elt1... eltn  pt1 pt2 et attribut closure  elt1... eltn  elt11... elt1n...

24 ACCARY-BARBIER / CNAM - Cycle C - 2005-200624 Eléments de l'exemple contenu  Eléments de MathML contenu :  : appliquer une opération à une expression.  : élévation à une puissance  : operateur addition  et sont tous les deux appliqués.  L'ordre des enfants est crucial pour l'utilisation de l'élément :  Le premier enfant (opérateur) prend comme liste d'arguments les enfants restants  pour baliser les variables a et b,  pour baliser le nombre 2.

25 ACCARY-BARBIER / CNAM - Cycle C - 2005-200625 Outils  Nombreuses implémentations :  Editeurs, browsers, afficheurs, convertisseurs, widgets  Voir page MathML Software : http://www.w3.org/Math/implementations.html http://www.w3.org/Math/implementations.html  Nombreux sites :  http://scenari-platform.org/trac/opale/wiki/MathMl http://scenari-platform.org/trac/opale/wiki/MathMl  …

26 ACCARY-BARBIER / CNAM - Cycle C - 2005-200626 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

27 ACCARY-BARBIER / CNAM - Cycle C - 2005-200627 Motivations  Évolutions du multimédia sur le Web  Essor des médias dynamiques : vidéo, musique, animations (flash,…)  Indépendance d'utilisation entre les médias  Multiplicité des formats des médias  Variété croissante des plates-formes d'accès  Besoin d'un langage Web commun

28 ACCARY-BARBIER / CNAM - Cycle C - 2005-200628 Buts de SMIL  SMIL : format textuel simple qui permet :  Intégrer les autres technologies Web : XML, CSS, DOM, XLink, XHTML, etc.  Intégrer des médias de différents formats  Utiliser des mécanismes puissants pour la gestion du temps, de la synchronisation et de l'animation de clips multimédia dans le Web  Présentations multimédia interactives très complexes  Format :  Indépendant des protocoles d'accès : HTTP, RTP, RTSP  Facilement adaptable aux systèmes et aux utilisateurs

29 ACCARY-BARBIER / CNAM - Cycle C - 2005-200629 Moyens logiciels  Format commence à se répandre.  Soja Player de HELIO et HPAS (Hypermedia Presentation and Authoring System) chez Digital : applets Java permettant de visualiser une présentation dans un navigateur.  Standards accessible à l'aide du Windows Media Player (version 7.0 et +), Apple Quick Time (version 5.0 et +) ou encore Real Player (http://fr.real.com/player/).http://fr.real.com/player/  Nombreux editeurs SMIL  GriNS Authoring Software (Oratrix) : création de présentations multimédia en flux tendu.  Création facile de présentations en format SMIL "pur" contenant du HTML interactif et des animations très complexes.

30 ACCARY-BARBIER / CNAM - Cycle C - 2005-200630 Fonctionnalités  SMIL assure 4 grandes fonctions :  Gestion des médias : les contenus  Gestion de l'espace d'affichage : layout  Gestion du temps : synchronisation  Gestion de l'interaction utilisateur  Exemple de présentation SMIL : cours de Vincent Quint sur les "autres Technologies XML" (13mn)  Version en copie locale Version en copie locale

31 ACCARY-BARBIER / CNAM - Cycle C - 2005-200631 Structure du document  Le langage SMIL basé sur XML utilise un langage de balises. Il comporte une entête et un corps de texte. ........  L'entête contient essentiellement des éléments relatifs à la mise en forme (layout) tandis que le corps du texte décrit la synchronisation des flux multimédia.

32 ACCARY-BARBIER / CNAM - Cycle C - 2005-200632 Exemple de code

33 ACCARY-BARBIER / CNAM - Cycle C - 2005-200633 Exemple de code (suite)  Dans l'exemple, 4 flux sont synchronisés en parallèle:  Flux 1 : flux video "dess.rm" en précisant le temps de début de la vidéo et le temps de fin.  Flux 2 : flux images "ringot.rp" qui correspond à une séquence de diapositives. Le séquencement est décrit dans le fichier précisé.  Flux 3 : flux images "logo-ups.rp.  Flux 4 : C'est un flux texte "ringo.rt". Par exemple un sous-titrage.

34 ACCARY-BARBIER / CNAM - Cycle C - 2005-200634 Composition du document Une présentation SMIL se compose de différents fichiers:  Le fichier de présentation SMIL qui décrit :  La disposition des éléments multimédia;  Disposition des différentes régions (taille, position),  Disposition des contenus  La synchronisation des éléments multimédia;  Définition de l'échelle du temps - "timeline"-  Définition des coordonnées des éléments dans le temps (mouvement, transition, …)  les fichiers flux multimédias;

35 ACCARY-BARBIER / CNAM - Cycle C - 2005-200635 Gestion spatiale  Structure hiérarchique de régions et sous-régions pour le placement spatial des médias  Chaque région a un identificateur auquel se réfèrent les médias  Superposition contrôlée par z-index

36 ACCARY-BARBIER / CNAM - Cycle C - 2005-200636 Gestion temporelle  Le corps du document contient la structure temporelle et les médias  Définition par une structure hiérarchique d'opérateurs  Parallèle : les éléments contenus sont joués en même temps  Séquence : les éléments contenus sont joués l'un après l'autre, dans l'ordre  Les objets média constituent les feuilles de la structure

37 ACCARY-BARBIER / CNAM - Cycle C - 2005-200637 Gestion hyper texte  Des zones sensibles actionnent des liens hypertextes :  Ce sont des fenêtres, ou bien des zones définies à l’intérieur d’une image.  Elles provoquent l’arrêt du déroulement du document SMIL en cours puis le traitement d’un autre document (cible du lien).

38 ACCARY-BARBIER / CNAM - Cycle C - 2005-200638 Type des contenus  Les contenus sont  Externes au document SMIL  Référencés par URI  Typés : type MIME  Associés à une région  Types de contenus :  HTML, RealText  JPEG, PNG, GIF, RealPix  MPEG, RealVideo  WAV, RealAudio  SVG, GIF

39 ACCARY-BARBIER / CNAM - Cycle C - 2005-200639 Attributs de synchronisation  Des attributs complètent la structure des opérateurs temporels  Durée de l'objet, intrinsèque ou explicite  Répétition : nombre de répétitions ou durée totale  Début et fin :  Valeur par rapport à l'élément père : begin="12s"  Référence à un autre élément : begin="e2.end + 5s"  Temps absolu : begin="wallclock(2003-03-24Z)"  Référence à un événement asynchrone : begin="button.click"

40 ACCARY-BARBIER / CNAM - Cycle C - 2005-200640 Conclusion  Format complet pour présentations multimédia interactives  Affichage de liens http,  Interactivité via des réactions à la souris,  Diversité des médias  fichier source au format ASCII.  Autres effets possibles  Nouvelles fonctionnalités dans la spécification 2.0 du W3C : Effets de transition  Existence de nombreux environnements intégrés de développement  pas besoin d’être expert du bloc-notes

41 ACCARY-BARBIER / CNAM - Cycle C - 2005-200641 Pour aller plus loin  Nombreux didacticiels sur Internet fournis en exemples.  Le site du W3CW3C  Présentation générale sur Real Networks : http://service.real.com/help/library/guides/production/ht mfiles/smil.htm. http://service.real.com/help/library/guides/production/ht mfiles/smil.htm  Tutoriel de L'Université de Boston : http://www.bu.edu/webcentral/learning/smil1/. http://www.bu.edu/webcentral/learning/smil1/  Didacticiels en SMIL avec l'applet SOJA : http://www.multimedia4everyone.com/ http://www.multimedia4everyone.com/  Didacticiel réalisé par la société HELIO : http://www.helio.org/products/smil/tutorial/ http://www.helio.org/products/smil/tutorial/  Just Smil : http://smw.internet.com/smil/smilhome.htmlhttp://smw.internet.com/smil/smilhome.html  Real and SMIL : http://real-and- smil.com/tutorialsmil.phphttp://real-and- smil.com/tutorialsmil.php

42 ACCARY-BARBIER / CNAM - Cycle C - 2005-200642 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

43 ACCARY-BARBIER / CNAM - Cycle C - 2005-200643 Les graphiques sur le Web  Des images pixel (gif, png, jpeg,...)  Résolution fixe  Gros fichiers  Recherche difficile : pas de méta-données  Pas d'interaction : les image-maps de HTML sont complexes  Autres solutions  Formats peu adaptés au Web  Outils propriétaires (flash, …)

44 ACCARY-BARBIER / CNAM - Cycle C - 2005-200644 Besoins graphiques  Graphique vectoriel  Indépendant de la résolution  Préserve l'information d'origine  Dans la suite des travaux précédents (GKS, PHIGS, PostScript,...)  Syntaxe textuelle  Facile à éditer, ajout de liens  Permet la recherche d'information  Fondé sur XML  Une syntaxe bien connue, avec des outils existants  Intégration avec les autres technologies Web

45 ACCARY-BARBIER / CNAM - Cycle C - 2005-200645 SVG : Scalable Vector Graphics  Un langage XML pour décrire des graphiques 2D contenant :  Des formes vectorielles  Des images  Du texte  Structuration : hiérarchie d'objets, références, style (CSS), transformations géométriques.  Effets : clipping, transparence, filtres  Dynamique : interaction (événements, scripts, DOM), animation (SMIL)

46 ACCARY-BARBIER / CNAM - Cycle C - 2005-200646 Histoire  SVG est le « HTML du graphique »  Début des travaux au W3C en 1998 (réponse à un besoin de graphiques légers, dynamiques et interactifs)  Spécification stable en 2000 : premières implémentations et sortie du Viewer Adobe (plugin permettant de visualiser le SVG  Recommandation W3C en septembre 2001 : SVG 1.0, Profils mobiles en janvier 2003 : SVG 1.1, …  Langage concurrent de Flash mais plus adapté pour :  Visualisation de contenus (économiques, processus, cartes, etc.) au format XML  associée à JavaScript+DOM ou XSLT...  interface utilisateur pour applications Internet  Dessins statiques, animés ou même interactifs dans le monde de l'éducation.

47 ACCARY-BARBIER / CNAM - Cycle C - 2005-200647 Pourquoi utiliser SVG? (1/2)  Avantages du graphisme vectoriel :  Adaptation de l'affichage à des media variés et à des tailles différentes  Possibilité d'appliquer des styles  Possibilité d'indexer le texte qui fait partie du graphisme  Taille de l'image après compression  Facilités d'édition : les éléments sont des objets, des hiérarchies, etc.

48 ACCARY-BARBIER / CNAM - Cycle C - 2005-200648 Pourquoi utiliser SVG? (2/2)  Avantages particuliers du format SVG :  Insertion dans le monde XML/XHTML :  Génération de SVG avec XSLT à partir de données XML  Future intégration totale dans XHTML, viewers SMIL, etc.  Utilisation de CSS  Scriptable avec JavaScript via DOM.  Possibilité de mélanger des grammaires XML entre elles : un document HTML peut contenir des gaphiques SVG, des expressions mathématiques en MathML, des présentations en SMIL...  Modèle de couleurs sophistiqué, filtres graphiques (comme dans PhotoShop)  Indexation par les moteurs de recherche (fichier texte !)  Code partageable (format texte non propriétaire)  Meilleures capacités graphiques dans l'ensemble

49 ACCARY-BARBIER / CNAM - Cycle C - 2005-200649 Support de SVG  Actuellement pas supporté en natif par tous les navigateurs.  Internet Explorer ne le supporte pas en natif. Il est donc nécessaire d'installer soi-même un plugin (SVG Viewer) gratuit sur le site d'Adobe  Support partiel par FireFox (version 1.5 et +)  Prise ne charge partielle avec Opera version 8.0  Le support SVG d'Opera 8.5 inclut les animations.  Gestion en natif avec Amaya

50 ACCARY-BARBIER / CNAM - Cycle C - 2005-200650 Exemple Contour of a duck This is the contour (using b-spline curves) of a simple ugly duckling. Source : I. Hermann

51 ACCARY-BARBIER / CNAM - Cycle C - 2005-200651 Structure d’une page SVG  Prologue  Déclaration de version XML standard :   Déclaration de la DTD de la version SVG utilisée   Élément racine  élément avec deux "espaces de noms", un par défaut et un second permettant d'avoir accès à d'autres fonctionnalités  (...)  La taille de la fenêtre SVG est définie par les attributs width et height de l'élément 

52 ACCARY-BARBIER / CNAM - Cycle C - 2005-200652 Introduction  Nombreux éléments graphiques de base :  Texte avec  Rectangles  Le cercle et l'ellipse  Lignes et poli-lignes  Polygones  Formes arbitraires avec  …  Chaque élément graphique  Représenté par un élément XML  Paramétrable avec des attributs XML  Hérite d'attributs de ses parents  Méthode permettant de produire des formes complexes.

53 ACCARY-BARBIER / CNAM - Cycle C - 2005-200653 Mécanismes principaux  Attributs  Nombreuses options  consulter la spécification  Attributs communs partagés par la plupart des éléments  Ex : l'attribut id (identificateur) ou encore style  Valeurs d'attributs généralement intuitives  Positionnement et unités  Les objets SVG se positionnent dans un système de coordonnées qui commence en haut et à gauche.  Possible de travailler avec des coordonnées locales.  Mêmes unités qu'en CSS2.  Transformations  Objet peut être translaté, orienté et changé de taille.  Il hérite des transformations de l'objet parent.

54 ACCARY-BARBIER / CNAM - Cycle C - 2005-200654 Le rendu  Attributs principaux pour les éléments graphiques :  stroke : définit la forme du bord d'un objet ;  fill : définit comment le contenu d'un objet est rempli.  2 syntaxes différentes de mise en forme d'un élément :  Attribut style identique à CSS2  Attribut de présentation SVG Pour chaque style.  Propriétés de fill  Couleur (comme en CSS) : fill="red"  URI couleur, gradient de couleur ou motif de remplissage  Valeur d'opacité (entre 0 et 1) : fill-opacity="0.2"

55 ACCARY-BARBIER / CNAM - Cycle C - 2005-200655 Propriété pour stroke  Propriétés de stroke  Couleur ou URI  Valeur d'opacité (entre 0 et 1) : stroke-opacity ="0.5"  Épaisseur du trait : stroke-width  Jonction de ligne : stroke-linejoin  Valeurs miter, round ou bevel  Forme des angles : stroke-linecap  Valeurs butt ( les lignes s'arrêtent brutalement à leur fin), round ou square (des carrés sont tracés en bout de chaque ligne).  Pointillés éventuels : stroke-dasharray,  Valeur : chaîne de valeurs numériques séparées par des espaces  dashoffset : précise l’offset de démarrage des pointillés

56 ACCARY-BARBIER / CNAM - Cycle C - 2005-200656 Figures géométriques  Rectangles  x et y : position du coin supérieur gauche  width et height : largeur et hauteur du rectangle  rx et ry, qui sont les axes x et y de l'ellipse utilisée pour arrondir les angles  Valeurs entre 0 et moitié de la largeur (longueur) du rectangle.  Cercles et ellipses  cx et cy : coordonnées du centre  r : rayon du cercle  rx et ry : demi-axes x et y de l'ellipse  Lignes  x1 et y1 : coordonnées du point de départ  x2 et y2 : coordonnées du point d'arrivée  Polylignes et polygones  Points : prend comme valeur une suite de coordonnées

57 ACCARY-BARBIER / CNAM - Cycle C - 2005-200657 Formes arbitraires : path  Peuvent servir de support pour d'autres éléments  Attributs de base  d : définition des path data (liste de commande permettant de tracer le chemin)  nominalLength : (facultatif) longueur totale du chemin  Commandes Path data  M ou m : (moveto) : x,y démarre un nouveau sous-chemin  Z ou z : (closepath) ferme un sous-chemin en traçant une ligne droite entre le point courant et le dernier moveto  lineto  L ou l : (lineto) : x, y trace une ligne droite entre le point courant et le point ( x,y ).  H ou h : (horizontal lineto) : x trace une ligne horizontale entre le point courant et le point ( x,y0 ).  V ou v : (vertical lineto) : y trace une ligne verticale entre le point courant et le point ( x0,y ).  Commandes permettant de tracer des courbes de Bézier, arcs...

58 ACCARY-BARBIER / CNAM - Cycle C - 2005-200658 Texte  Balise gérée comme un objet graphique  2 attributs x et y : coordonnées du point de départ du texte  Mise en forme réalisée par des propriétés de style CSS  Ajustement de la position du texte, de sa valeur ou de la police grâce à l'élément  Attributs x et y  Attributs dx et dy : décalages à apporter dans l'écriture du texte par rapport à la position par défaut.  Lien avec les chemins  Possibilité d'écrire un texte le long d'un chemin défini par un élément en appelant un élément

59 ACCARY-BARBIER / CNAM - Cycle C - 2005-200659 Structuration: éléments de groupage et références  SVG permet de regrouper des objets dans des blocs, de les nommer et les réutiliser  Éléments principaux :  Fragment d'un document SVG :  Groupage d'éléments avec  Objets abstraits (chablons)  Section de définition  Utilisation d'éléments  Titre et description  Fragment d'un document SVG :  Racine d'un graphisme SVG.  Imbrication et positionnement d’éléments svg  Chaque crée un nouveau système de coordonnées  Réutilisation des fragments sans modifier des coordonnées

60 ACCARY-BARBIER / CNAM - Cycle C - 2005-200660 Éléments de groupage  Groupage d'éléments :  Regroupement d’éléments avec redéfinition locale possible  Objets abstraits : et  Objets graphiques réutilisables en plusieurs endroits, avec  Utilisation d'objets :  Objets,,, éléments graphiques et  Objets réutilisés ont un identificateur XML   Attributs  x, y, width et height : taille et position de l'élément appelé.  xlink:href : renvoi à l'élément défini.

61 ACCARY-BARBIER / CNAM - Cycle C - 2005-200661 Titre et Insertion d'images  Titre et descriptions  Documentation du code utile pour 2 raisons :  mieux comprendre le code  Meilleur référencement du SVG par un moteur de recherche  Élément  Formats supportés : jpeg, png et insertion autre fichier SVG  Attributs :  x et y :la position de l'image  width et height : la taille de l'image  xlink:href : URI de l'image  attribut supplémentaire : preserveAspectRatio

62 ACCARY-BARBIER / CNAM - Cycle C - 2005-200662 Insertion d'images: la balise Insertion d'images: la balise  Attribut preserveAspectRatio  Manière dont l'affichage de l'image doit s'adapter à son cadre  Valeurs possible :  rien (valeur par défaut) : valeurs extrêmes en x et en y touchent les bords du rectangle de point de vue  xMinYmin : plus petite largeur de l'image ajustée à la plus petite largeur du cadre  xMidYMin : valeur moyenne des x de l'élément ajustée à la valeur moyenne des x du cadre  Il y a aussi toutes les autres variantes en Min, Max et Mid pour chacune des deux coordonnées  Valeur paramètre : meet ou slice  meet (valeur par défaut) : rapport d'aspect préservé, tous les éléments visibles et cadre le plus large possible  slice : rapport d'aspect préservé, tous l'espace du cadre occupé par la boîte et cadre le plus petit possible

63 ACCARY-BARBIER / CNAM - Cycle C - 2005-200663 Transformations avec l'attribut transform  Attribut disponible pour tous les éléments graphiques et groupes  Translations avec le paramètre translate  Ex : déplacement d’un groupe de 50 px à droite, et 40 px en bas   Ex : déplacement haut/droite d’un rectangle   Redimensionnement avec scaling  scale( [, ])  Ex : facteur *2 sur les 2 dimensions d’un rectangle   Rotation avec le paramètre rotate  rotate( [, ])  Angle de rotation en degrés. cx et cy : centre de rotation.

64 ACCARY-BARBIER / CNAM - Cycle C - 2005-200664 Autres fonctionnalités  Masquage, filtrage  Application de filtres numériques  Application un masque  Animations  Graphiques SVG peuvent être animés par les éléments d'animation SVG ou par l'interface du DOM  Définition de nouvelles polices  Interactivité  Insertion d’éléments interactifs par le biais de scripts ou par l'utilisation d'éléments spécifiques

65 ACCARY-BARBIER / CNAM - Cycle C - 2005-200665 Animation  Animation SVG = modification dynamique des attributs d'un élément  Animation contrôlée par un ensemble d'éléments d'animation  Réutilisation de SMIL 2.0  Syntaxe déclarative, très compacte  Animation effectuée par le client

66 ACCARY-BARBIER / CNAM - Cycle C - 2005-200666 Que peut-on animer?  Pratiquement tous les éléments peuvent être animés  Pratiquement tous les attributs peuvent être animés  Éléments d'animation :  animate, animateMotion, animateTransform  animateColor  set (valeurs discrètes)  Exemple :

67 ACCARY-BARBIER / CNAM - Cycle C - 2005-200667 Comment se fait l'animation  Animation linéaire par défaut  L'intervalle [from,to] est interpolé linéairement sur la durée spécifiée  Autres possibilités  Sauts de valeurs discrètes (pas d'interpolation)  Valeurs intermédiaires (key) avec dates correspondantes  Interpolation linéaire remplacée par une spline dans [0,1]

68 ACCARY-BARBIER / CNAM - Cycle C - 2005-200668 Événements  Quand l'animation est-elle exécutée?  Animation fondée sur le temps  Attributs begin, dur, end  Valeurs = durée depuis le chargement de la page  Nombreuses unités de temps utilisables  Animation fondée sur les événements  L'attribut begin peut se référer à un événement :  De l'utilisateur : obj.click, obj.mouseover, obj.mouseout  D'animation : anim.end, anim.begin, anim.begin+4s (chaînage d'animations)

69 ACCARY-BARBIER / CNAM - Cycle C - 2005-200669 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

70 ACCARY-BARBIER / CNAM - Cycle C - 2005-200670 Objectifs  RDF (Resource Description Framework) définit un cadre formel de définition de métadonnées.  Objectifs :  Rendre plus pertinent le traitement automatisé des informations contenues sur le Web,  Rendre plus "intelligente" l'information nécessaire aux moteurs de recherche en fournissant une information plus sémantique que les seuls mots contenus dans un document.  Fédérer les vocabulaires et syntaxes de description de Métadonnées existantes dans un cadre commun  RDF permettra de répondre précisément à une requête de type :  "recherche de documents ayant Tim Berners-Lee comme auteur".

71 ACCARY-BARBIER / CNAM - Cycle C - 2005-200671 principes de base  RDF dissocie trois types d'objets :  Ressource (document ou extrait de document),  Propriétés,  Valeurs (chaîne descriptive ou document).  Ressource est définie par des propriétés.  Déclaration RDF : association d'une ressource à une propriété par une valeur de propriété.

72 ACCARY-BARBIER / CNAM - Cycle C - 2005-200672 Syntaxe  RDF permet de décrire, des phrases du type "http://www.edifrance.org" est créé par l ' "association EDIFRANCE"  "http://www.edifrance.org" est la ressource ;  "est créé" est une propriété dont la valeur est "association EDIFRANCE".  La syntaxe utilisée par RDF étant du XML, la déclaration précédente pourra s’écrire : http://www.w3.org/1999/02/22-rdf- syntax-ns# http://www.edifrance.or EDIFRANCE

73 ACCARY-BARBIER / CNAM - Cycle C - 2005-200673 Chapitre 4 : Applications XML  1. Champs d'applications de XML  2. Applications standards  2.1. Introduction  2.2. Hypertexte : XHTML  2.3. Mathématiques : MathML  2.4. Multimédia synchronisé : SMIL  2.5. Graphique vectoriel : SVG  2.6. Description de documents : RDF  En savoir plus…

74 ACCARY-BARBIER / CNAM - Cycle C - 2005-200674 En savoir plus…  Références :  XHTML : http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/  MathML : http://www.w3.org/TR/MathML2/http://www.w3.org/TR/MathML2/  SMIL : http://www.w3.org/TR/smil20/http://www.w3.org/TR/smil20/  SVG : http://www.w3.org/TR/SVG11/http://www.w3.org/TR/SVG11/  RDF : http://www.w3.org/TR/rdf-concepts/http://www.w3.org/TR/rdf-concepts/  Beaucoup d'autres…  Tutoriels, démos en ligne  SMIL : http://real-and-smil.com/tutorialsmil.php  MathML : http://www.mathml.net/MathML2Bitmap.html  …