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

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C É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).

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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,  …

ACCARY-BARBIER / CNAM - Cycle C 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 

ACCARY-BARBIER / CNAM - Cycle C 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..)

ACCARY-BARBIER / CNAM - Cycle C 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="

ACCARY-BARBIER / CNAM - Cycle C 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 ! ");]]>

ACCARY-BARBIER / CNAM - Cycle C 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) : 

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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 à :  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

ACCARY-BARBIER / CNAM - Cycle C Exemple (a+b) 2  Cours sur MathML et Exemples : PrésentationContenu a + b 2 a b 2

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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).

ACCARY-BARBIER / CNAM - Cycle C 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...

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C Outils  Nombreuses implémentations :  Editeurs, browsers, afficheurs, convertisseurs, widgets  Voir page MathML Software :  Nombreux sites :   …

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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 (  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.

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C Exemple de code

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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;

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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).

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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( Z)"  Référence à un événement asynchrone : begin="button.click"

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C Pour aller plus loin  Nombreux didacticiels sur Internet fournis en exemples.  Le site du W3CW3C  Présentation générale sur Real Networks : mfiles/smil.htm. mfiles/smil.htm  Tutoriel de L'Université de Boston :  Didacticiels en SMIL avec l'applet SOJA :  Didacticiel réalisé par la société HELIO :  Just Smil :  Real and SMIL : smil.com/tutorialsmil.phphttp://real-and- smil.com/tutorialsmil.php

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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, …)

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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)

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

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

ACCARY-BARBIER / CNAM - Cycle C 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 

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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"

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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...

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C É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.

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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.

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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

ACCARY-BARBIER / CNAM - Cycle C 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 :

ACCARY-BARBIER / CNAM - Cycle C 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]

ACCARY-BARBIER / CNAM - Cycle C É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)

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C 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".

ACCARY-BARBIER / CNAM - Cycle C 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é.

ACCARY-BARBIER / CNAM - Cycle C Syntaxe  RDF permet de décrire, des phrases du type " est créé par l ' "association EDIFRANCE"  " 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 : syntax-ns# EDIFRANCE

ACCARY-BARBIER / CNAM - Cycle C 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…

ACCARY-BARBIER / CNAM - Cycle C En savoir plus…  Références :  XHTML :  MathML :  SMIL :  SVG :  RDF :  Beaucoup d'autres…  Tutoriels, démos en ligne  SMIL :  MathML :  …