© Nova / Grassioulet 6-7 mai 2002 TECFA staf2x Scalable Vector Graphics S V G introduction théorique.

Présentation au sujet: "© Nova / Grassioulet 6-7 mai 2002 TECFA staf2x Scalable Vector Graphics S V G introduction théorique."— Transcription de la présentation:

1 © Nova / Grassioulet 6-7 mai 2002 TECFA staf2x Scalable Vector Graphics S V G introduction théorique

2 6 - 7 mai(c) 2002 Nova / Grassioulet 2/41 Historique de la technologie « Scalable Vector Graphics » (SVG) –Portable Network Graphics (PNG) –Le graphisme vectoriel appliqué au Web –Scalable Vector Graphics (SVG) : une alternative à PNG 2.Présentation de SVG –Courte introduction –Avantages et problèmes liés à la technologie SVG –Comment expliquer lacceptation lente de SVG –Evolution du travail des infographistes et des développeurs 3.Applications & Future trends –Visualisation de contenu –Interfaces Utilisateurs (GUI) pour les applications Internet –Graphisme statique, animé et interactif introduction théorique > table des matières

3 6 - 7 mai(c) 2002 Nova / Grassioulet 3/41 Portable Network Graphics (PNG) –Format standard développé par le W3C –Technologie adoptée par lensemble des dernières générations de Browsers –Objectifs des PNG Remplacer le format GIF Respect des couleurs originelles de limage (true color) Amélioration de la qualité graphique des images Standardisation ISO historique de SVG > PNG

4 6 - 7 mai(c) 2002 Nova / Grassioulet 4/41 Le graphisme vectoriel appliqué au Web –Limites du format « bit-mapped » –Lapproche vectorielle : une alternative –Il existe 2 marchés identifiés pour les images vectorielles : La documentation technique pour les industries « Web CGM Profile » Linfographie du Web –Avantages : Excellentes capacités dadaptation au niveau du rendu correct des images Possibilités dappliquer des feuilles de style Possibilités dindexer le texte inclut dans les images Taille réduite de limage après décompression et qualité graphique Facilités dédition historique de SVG > graphisme vectoriel

5 6 - 7 mai(c) 2002 Nova / Grassioulet 5/41 Scalable Vector Graphics (SVG) : une alternative à PNG –Langage XML et standard W3C –Un format parfaitement adapté aux exigences du Web –Une technologie portable « Small mobile devices » (agendas électroniques, ordinateurs portables, téléphones portables…) « Office/personal computer monitors » « High resolution printers » –Avantages principaux : Insertion dans le monde XML/XHTML Possibilité de partager le code et de travailler directement sur le format Modèle de couleurs sophistiqué et utilisation de filtres comme dans Photoshop Spécification claire, en cours de standardisation Meilleures capacités graphiques que Flash historique de SVG > SVG : une alternative

6 6 - 7 mai(c) 2002 Nova / Grassioulet 6/41 –Role du W3C Un groupe de travail a été formé en août 1998, composé de développeurs venant dentreprises (Sun, HP, Adobe) ayant un intérêt particulier dans le graphisme Le premier brouillon de la spécification SVG 1.0 a été publié en février 1999 SVG a été candidat à la recommandation W3C en août 2000 et a été admis en septembre 2001 –Situation actuelle Un nouveau groupe de travail a été formé en juin 2001 afin de faire évoluer SVG vers des « devices » portables Le langage SVG 1.0 permet actuellement la création de 6 types dobjets graphiques : –Formes vectorielles (lignes et courbes) ; –Images ; –Application de gradients ; –Filtres ; –Composants réutilisables (symboles, texte…) Les objets graphiques peuvent être groupés, retouchés, transformés et mis en forme Les objets peuvent aussi être dynamiques et interactifs, grâce à DOM (« Document Object Model » – permettant une animation vectorielle via scripting) et à SMIL (syntaxe déclarative danimation qui peut être utilisée par les différents XML « Namespace ») Le langage SVG 1.1 qui est encore en cours de développement se divise en 2 profils : –« SVG Tiny » pour les petits « devices » comme les téléphones portables classiques ; –« SVG Basic » pour les agendas électroniques et les téléphones portables nouvelle génération. présentation de SVG > introduction

7 6 - 7 mai(c) 2002 Nova / Grassioulet 7/41 –Situation actuelle (suite) Plusieurs groupes de travail du W3C travaillent aussi conjointement sur une validation de documents utilisant un mélange de plusieurs « Namespace » comme XHTML, MathML et SVG. Le premier brouillon a été publié le 30 avril 2002. Mozilla 0.9+ et Amaya 5.3+ sont déjà capables dinterpréter ce type de documents. Lintérêt de la communauté pour SVG commence à être considérable : –Bcp dentreprises ont déjà adopté la technologie dans leur système, ainsi que certains « viewers » intégrés à différentes plateformes ; –Des éditeurs WYSIWYG sont aussi disponibles, ainsi que des outils dauthoring ; –Des implémentations pour les « devices » portables sont en augmentation. présentation de SVG > introduction

8 6 - 7 mai(c) 2002 Nova / Grassioulet 8/41 –Edition facilitée Contrairement au format.swf (Flash), celui de SVG permet un accès au code source du document, permettant un meilleur contrôle sur la présentation SVG est compatible avec dautres technologies –Comme avec « Synchronized Multimedia Integration Language » (SMIL), CSS ou JavaScript ; –Les effets indirects se situent au niveau dune baisse énorme de la courbe dapprentissage pour les développeurs. Avoir accès au code réduit les limitations dues aux éditeurs WYSIWYG –Contenu accessible aux moteurs de recherche Le contenu (texte) de SVG est inclut dans le code source de la page Web, ce qui permet une meilleure recherche dinformations –Localisation Limage et le contenu (texte) peuvent être converti facilement dans plusieurs langues Par exemple, un seul fichier dimage peut servir de template visuel pour les versions française, anglaise et allemande dun même graphique –Retouche du design Les styles graphique dune image ou dun site Web peuvent être modifié totalement en ne changeant quun seul fichier présentation de SVG > Avantages liés à la technologie SVG

9 6 - 7 mai(c) 2002 Nova / Grassioulet 9/41 –Open standard Certaines fonctionnalités supplémentaires (design et audio) peuvent être ajoutées comme dans certains SVG viewers –Effet bitmap sur le vectoriel Possibilités dappliquer des rendus Photoshop en temps réel sur des objets graphiques SVG, surtout au niveau des filtres spéciaux Ces effets peuvent être appliqués à un contenu dynamique, sans devoir le convertir en image bit-mapped (GIF) –Maîtrise des données Du fait du lien entre SVG et XML Accès libre au code Peu coûteux –Contrôle typographique SVG permet dutiliser des « fonts » spéciaux, sans lutilisation de plug-ins et indépendamment des caractéristiques du viewer Avantage énorme sur le plan esthétique des productions des designers, puisquune plus grande liberté de création leur est possible présentation de SVG > Avantages liés à la technologie SVG

10 6 - 7 mai(c) 2002 Nova / Grassioulet 10/41 –WYSIWYG Le rendu de limage à lécran est réellement celui que verra lutilisateur final Les designers peuvent faire varier la présentation du contenu, pour une optimisation maximale du temps de téléchargement, selon les caractéristiques du système de lutilisateur final présentation de SVG > Avantages liés à la technologie SVG

11 6 - 7 mai(c) 2002 Nova / Grassioulet 11/41 –SVG est une technologie récente Le W3C vient à peine de valider SVG comme une recommandation internationale (sept 2001) La légitimité du langage par la communauté prent souvent du temps, ce qui nest pas toujours un avantage pour la reconnaissance et lacceptation de SVG comme un langage standard de représentations graphiques –Nécessité dun plug-in pour la visualisation de SVG Dans lidéal, SVG devrait pouvoir être supporté par lensemble des browsers Certaines entreprises comme Adobe ou Real Network (Real Player) militent déjà en faveur dune adoption massive du standard SVG présentation de SVG > Problèmes liés à la technologie SVG Adobe, Apple, AutoDesk, Bit-Flash, Corel, HP, IBM, ILOG, Inso, Kodak, Macromedia, Microsoft, Netscape, Oasis, Open Text, Oxford University, Quark, RAL, Sun, W3C and Xerox…

12 6 - 7 mai(c) 2002 Nova / Grassioulet 12/41 –Faire barrage à la logique de marché Au départ, plusieurs entreprises de software voulaient entrer en compétition, au niveau du développement dun standard pour les images vectorielles Cest pour cette raison que le W3C a préféré rassembler les développeurs, plutôt que de miser sur une logique de marché –Travail énorme de la communauté Pour permettre à un langage dêtre à la fois stable et reconnu par la communauté, il faut un travail collectif important, aussi bien au niveau des entreprises que du groupe dindépendants du W3C Nécessité dun échange constant dinformations et de feedbacks entre spécialistes, à travers emails et forums –Batterie de tests Comme pour dautres technologies (HTML, XML, PNG), le W3C fait passer une série de tests qui prennent souvent beaucoup de temps La prise en compte des remarques dutilisateurs-testeurs ralentit aussi lacceptation finale des recommandations du W3C présentation de SVG > comment expliquer lacceptation lente de SVG

13 6 - 7 mai(c) 2002 Nova / Grassioulet 13/41 –Avantages pour les infographistes Meilleur contrôle de lapparence visuelle du contenu, à la fois à lécran et sur le Web. Ils peuvent ainsi être sûr du rendu final et de la qualité de leurs productions Plus grande possibilité de créativité Soutien inconditionnel dAdobe, dont la plupart des produits (Photoshop, Illustrator, GoLive) sont utilisés par les infographistes –Avantages pour les développeurs Structure et syntaxe familières, du fait quSVG soit une application XML, avec de grandes ressemblances avec HTML Nombre important doptions dédition et dauthoring –Éditeurs de Txt (Notepad, SimpleText..) ; –Éditeurs de code (Xemacs, HomeSite…) ; –Éditeurs XML (XML Spy…) ; –Éditeurs WYSIWYG (Dreanweaver, GoLive…). Indépendance par rapport à la plateforme, ce qui signifie quon peut créer des fichiers SVG aussi bien sur un PC 286, sur un Mac, voire même sur un Palm présentation de SVG > Evolution du travail des graphistes et des développeurs

14 6 - 7 mai(c) 2002 Nova / Grassioulet 14/41 Introduction –4 piliers : sélection, organisation, quantité et présentation de linformation scientifique dans des domaines comme léducation, la psychologie, la médecine, les sciences appliquées, les sciences informatiques, léconomie, lingénierie industrielle, la cartographie… –Le graphisme dinformation, cest communiquer des informations objectives avec efficacité et exactitude. Lesthétique, la présentation ne doivent pas la déformer. A linverse du graphisme publicitaire/marketing ; –3 catégories dans le graphisme dinformation agencement organisé (informer le voyageur : signalétique, carte routière, indicateur horaire…) ; explication du fonctionnement (guides dinstallation/fabrication, diagrammes, modes demploi, photomontages…) ; contrôle des données enregistrées (design de cockpit, tableaux de commandes…). SVG Applications & future trends > visualisation de contenu > intro

15 6 - 7 mai(c) 2002 Nova / Grassioulet 15/41 Introduction –2 modes complémentaires de présentation sont utilisés grâce à lévolution des technologies : le numérique (représentation précise et chiffrée) et lanalogique (représentations isotype, diagrammes à barres/circulaires, visualisation de processus, cartes cognitives…) ; –Le graphisme dinformation va jouer un rôle majeur dans les prochaines décennies : Meilleure structuration de linformation ; Réponse à un besoin croissant de sélection et de tri de la part du public ; Dautres formes de modèles visuels vont être développé, en fonction des besoins des médias interactifs. –Selon O. Neurath, le graphiste est lintermédiaire entre le chercheur (historien, économiste, sociologue, scientifique…) et son public ; SVG Applications & future trends > visualisation de contenu > intro

16 6 - 7 mai(c) 2002 Nova / Grassioulet 16/41 Atlas of Cyberspace (Dodge & Kitchin, 2001) –Issues to consider when viewing images : Why was the map or spatialization created ? Does the map or spatialization change the way we think about, and interact with cyberspace ? To what extend does the map or spatialization accurently reflect the data ? Is the map or spatialization interpretable ? How valid and reliable are the data used to construct the map or spatialization ? Is the map or spatialization ethical ? –The power of mapping : spatial mode of communication which defines how we interact with data significant educational value, eventhough maps as authored collections of information can convey lies and ideological blindness. It is then relevant to know the purpose of spatialization – Who it was made for ? By whom ? Why it was produced ? What are the implications of its message and use ? SVG Applications & future trends > visualisation de contenu > atlas cyberspace

17 6 - 7 mai(c) 2002 Nova / Grassioulet 17/41 –The power of mapping (suite) Understanding communicative properties of a map depends on the level of user knowledge Designing a map means considering issues such as (all these aspects have significant affect on how data is portrayed and interpreted) : –Projection –Scale –Classification –Graphic styles of symbols –Colors –Labelling –Fonts –usability Understanding communicative properties of a map depends on the level of user knowledge Given the fast-growing and dynamic nature of both infrastructure and cyberspace, the issue of data quality and availability is of critical importance SVG Applications & future trends > visualisation de contenu > atlas cyberspace

18 6 - 7 mai(c) 2002 Nova / Grassioulet 18/41 –The power of mapping (suite) Ethics and responsibility of researchers producing maps too, because the act of mapping itself may constitute an invasion of privacy. Here some questions to ask about the data quality and availability : –What is the age of the dataset ? –Where did the data come from ? –How accurate are positional and attribute features ? –Do the data seem logical and consistent ? –In what format are the data kept ? –Hoe were the data checked ? –Why where the data compiled ? –What is the reliability of the data provider ? For example, cartography provides a means by which to classify, represent and communicate information, providing understanding and aiding navigation SVG Applications & future trends > visualisation contenu > atlas of cyberspace

19 6 - 7 mai(c) 2002 Nova / Grassioulet 19/41 –Mapping applications Mapping infrastructure and traffic –Fiber-optic cables and satellites mapssatellites maps –Domain name maps –Marketing maps of Internet service providers –Interactive mapping of networksInteractive mapping of networks –Interactive network mapping tool (Plankton, Lumeta, Walrus)PlanktonLumetaWalrus –Geography of data flows –Geography of Internet usersGeography of Internet users Mapping the Web –Mapping individual Websites (Dynamic Diagrams, MyBody, Inxight)Dynamic DiagramsMyBodyInxight –Mapping tools to manage Websites (Dynamic Diagram)Dynamic Diagram –Mapping Website evolution –Mapping paths and traffic trough a Website (VISVIP, Valence, Anemone)VISVIPValenceAnemone –2D visualization and navigation of the Web : A view from above (Self-Organizing Map)Self-Organizing Map –3D visualization and navigation of the Web : A view from within (Lufthansa Systems Network, Visual Thesaurus, Domain Visualization)Lufthansa Systems NetworkVisual ThesaurusDomain Visualization SVG Applications & future trends > visualisation contenu > atlas of cyberspace

20 6 - 7 mai(c) 2002 Nova / Grassioulet 20/41 –Mapping applications Mapping conversation and community –Email –Mailing lists (VisualWho) and bulletin boardsVisualWho –Usenet (Conversation Map)Conversation Map –Chat (Chat Circles)Chat Circles –MUDs –Virtual Worlds (Active Worlds)Active Worlds –Game space (EverQuest, UltimaOnline)EverQuestUltimaOnline Imagining cyberspace –Science fiction visions of cyberspace –Cinematic visions of cyberspace (Warriors of the Net)Warriors of the Net –Artistic imaginings : subversive surfing and warping the Web (Tendril)Tendril –Imagining the architecture of cyberspace (Novak, Matsumoto)NovakMatsumoto SVG Applications & future trends > visualisation contenu > atlas of cyberspace

21 6 - 7 mai(c) 2002 Nova / Grassioulet 21/41 –Final Thoughts for futher developments To explore real-time mapping, using dynamically generated data To develop spatially-referenced and temporal data sources To ensure data are standardized To produce informative meta-data about data To establish how easy a map can be interpreted To test the usability of spatialization To study the effects of spatialization on the media mapped To establish collaborative links between disparate research labs working on related themes To appreciate and account for ethical and privacy implications of mapping cyberspace To examine the effects of the social context within which mapping takes place To extand the coverage of maps and information spatialization SVG Applications & future trends > visualisation contenu > atlas of cyberspace

22 6 - 7 mai(c) 2002 Nova / Grassioulet 22/41 Exemple dapplication : la cartographie (1/17) –Les approches existantes en matière de format vectoriel pour le Web Simple Vector Format (SVF) –permet la diffusion de dessins CAD sur le Web depuis 1996, date de sortie du plug-in ; –Linteractivité est limitée. Drawing Web Format (DWF) –Visualisation avec le plug-in WHIP4 dAutoDesk, un des rares plug-in qui réponde à JavaScript ; –Possibilité dinsertion dimages et de texte ; –Aucune fonction danimation disponible. Flash (SWF) –Format vectoriel permettant linteractivité la plus largement diffusée ; –Supporté par les browsers grâce à un plug-in Macromedia ; –Format propriétaire binaire, qui soppose à lopen source (SVG) ; –Élaboré pour les besoins des publicitaires et de lindustrie du multimédia. Début 2000, environ 70% des navigateurs supportent Flash ; –Insertion dimages, de texte, de vidéos, de sons et danimations ; –Problèmes pour les cartographes : intégrer des données externes, rééditer ou créer les fonctions dont ils ont besoin. Des interfaces ont été développées mails elles ne sont pas standardisées. SVG Applications & future trends > visualisation de contenu

23 6 - 7 mai(c) 2002 Nova / Grassioulet 23/41 Exemple dapplication : la cartographie (2/17) –Les approches existantes en matière de format vectoriel pour le Web (suite) Precision Graphic Markup Language (PGML) –Ensemble de spécifications pour un format texte vectoriel 2D, proposé par Adobe –Généré en convertissant PDF –Haut niveau dinteractivité, mais pas encore dapplications Web Computer Graphic Metafile (WebCGM) –Recommandation du W3C, norme mature –Syntaxe riche consacrée aux hyperliens –Visualisation limitée aux dessins techniques et scientifiques Vector Markup Language (VML) –Format texte vecoriel 2D développé par Microsoft –Conçu pour Internet Explorer –Pas de nouveaux développement depuis 1998 –Syntaxe intéressante, mais pas dapplications SVG Applications & future trends > visualisation de contenu

24 6 - 7 mai(c) 2002 Nova / Grassioulet 24/41 Exemple dapplication : la cartographie (3/17) –Les approches existantes en matière de format vectoriel pour le Web (suite) Portable Document Format (PDF) –Format natif dAdobe Illustrator –À lorigine pas été conçu pour le Web –Format binaire qui ne permet pas un traitement efficace par les moteurs de recherche Scalable Vector Graphics (SVG) –Nouveau standard ouvert, recommandé par le W3C –Offre tous les avantages de Flash, dXML, des CSS, des fontes incorporés –Interactivité et animation –Compatible avec HTML grâce à DOM Virtal Reality Modeling Language (VRML) –Destiné à la représentation 3D, mais aussi utilisable pour la 2D –Grande complexité pour les représenations simples –Plug-in nécessaire –En phase de restructuration SVG Applications & future trends > visualisation de contenu

25 6 - 7 mai(c) 2002 Nova / Grassioulet 25/41 Exemple dapplication : la cartographie (4/17) –Les approches existantes en matière de format vectoriel pour le Web (suite) Hyper Graphic Markup Language (HGML) –Format compact adapté aux faibles bandes passantes –Depuis juin 1998 –Aucune réalisation DrawML –Format qui facilite la représentation et la mise-à-jour de dessins techniques –Depuis décembre 1998 –Les API 2D associées à des applets ou des objets ActiveX ActiveX –Permet dutiliser des objets écrits en Visual Basic (Micrpsoft) –Besoin de kits de développement –Interactivité possible SVG Applications & future trends > visualisation de contenu

26 6 - 7 mai(c) 2002 Nova / Grassioulet 26/41 Exemple dapplication : la cartographie (5/17) –Les API 2D associées à des applets ou des objets ActiveX (suite) Java2D –Programme binaire permettant dafficher un graphique en 2D (Sun et Adobe) –Inséré dans les pages Web –Flexible et modifiable –Indépendant dune plateforme unique –Même possibilités graphiques que SVG (la plupart des SVG viewers et des plug-in sont écrits en Java) –Interactivité programmable avec des outils type bibliothèque de ressources (bases de données, interface utilisateurs, graphisme 2D et 3D, multimédia, réseaux, télécommunications) –Applets peuvent gérer les plug-in SVG –Le Document Object Model (DOM) La plupart des formats vectoriels mentionnés nécessitent des plug-in, ce qui ne correspond pas au principe de source ouverte de lInternet SVG Applications & future trends > visualisation de contenu

27 6 - 7 mai(c) 2002 Nova / Grassioulet 27/41 Exemple dapplication : la cartographie (6/17) –Le Document Object Model (suite) Les formats binaires ne peuvent être édités et corrigés sans le programme dorigine Niporte quel projet de carte Web requiert cette capacité, afin de pouvoir intégrer de nouveaux éléments (données, analyses, sélections, symboles) Linteractivité exige que les éléments individuels dune page Web soient manipulables, y compris les objets vectoriels Besoin dune hiérarchie dobjets, dont la racine est la page Web Besoin dune norme vectorielle qui fonctionne avec le DOM, si possible sans plug-in SVG Applications & future trends > visualisation de contenu

28 6 - 7 mai(c) 2002 Nova / Grassioulet 28/41 Exemple dapplication : la cartographie (7/17) –Extensible Markup Language (XML) : la base fondamentale de tous les futurs dialectes du WWW Réponse aux lacunes de HTML – distinction entre contenu, structure et présentation, méta- informations Interface et syntaxe standardisée permettant laccessibilité aux objets via le DOM Indépendance maximale par rapport aux réseaux et aux plate-formes Base de tous les nouveaux dialectes spécialisés –SMIL (Multimédia) –SVG (graphisme vectoriel) –MathML (mathématique) –X3D (graphisme 3D) –XHTML (successeur de HTML ) –XForm (formulaires) –Geography Markup Language (DTD et données XML) –Chemie Markup Language (DTD et données XML) SVG Applications & future trends > visualisation de contenu

29 6 - 7 mai(c) 2002 Nova / Grassioulet 29/41 Exemple dapplication : la cartographie (8/17) –Principes dinterprétation du SVG pour laffichage Les viewers SVG utilisent des calques Lordre daffichage correspond à lordre des objets dans le fichier, groupement possible Prise en compte de la localisation et de lopacité des objets Fonctions intégrées du zoom et du panoramique SVG Applications & future trends > visualisation de contenu

30 6 - 7 mai(c) 2002 Nova / Grassioulet 30/41 Exemple dapplication : la cartographie (9/17) –Systèmes de coordonnées et transformations SVG utilise un système cartésien, dont lorigine est le coin supérieur gauche de lobjet Pour représenter une carte, laxe des ordonnées doit être inversé Utilisation dune opération matricielle 3x3 Transformations géométriques (translation, changement déchelle, rotation, section) –Feuilles de styles (CSS) Permettent aux cartographes dadministrer et de modifier des projets importants en modifiant les caractéristiques des objets : –Couleurs –Motifs de remplissage –Contours –Propriétés de textes –Position des objets SVG Applications & future trends > visualisation de contenu

31 6 - 7 mai(c) 2002 Nova / Grassioulet 31/41 Exemple dapplication : la cartographie (10/17) –Feuilles de styles (suite) Compatible avec SVG et HTML/XHTML Hiérarchie des éléments impose un système dhéritage qui peut sappliquer aux groupes, et aux sous-groupes –Éléments géométriques de base Rectangle, cercle, ellipse, ligne, polyligne, polygone Notion de chemin (path) Paramètres supplémentaires, comme larrondi des coins SVG Applications & future trends > visualisation de contenu

32 6 - 7 mai(c) 2002 Nova / Grassioulet 32/41 Exemple dapplication : la cartographie (11/17) –Éléments géométriques de base Rectangle, cercle, ellipse, ligne, polyligne, polygone Notion de chemin (path) Paramètres supplémentaires, comme larrondi des coins Applications de kevlindev.com : –2D Math objects– set of math-oriented JavaScript objects used to edit SVG elements in 2D2D Math objects –Shape Editors– set of JavaScript objects used to edit SVG geometric shape elements in 2DShape Editors –Utilities– set of JavaScript utility objectsUtilities –Widgets– set of experimental SVG GUI widgetsWidgets –Découpe (clip) et masque SVG Applications & future trends > visualisation de contenu

33 6 - 7 mai(c) 2002 Nova / Grassioulet 33/41 Exemple dapplication : la cartographie (12/17) –Contenu (texte) Famille de fonte, type de fonte, taille, position, largeur, direction, inclinaison… Alignement du texte sur le « path » Indexé par les moteurs de recherche Problèmes liés au « viewport » –Couleurs, remplissage, dégradé, transparence, types de ligne SVG Applications & future trends > visualisation de contenu

34 6 - 7 mai(c) 2002 Nova / Grassioulet 34/41 Exemple dapplication : la cartographie (13/17) –Interactivité, script Les fonctions interactives dun viewer SVG : –Zoom –Panoramique –Retour à la vue initiale –Lissage (anti-aliasing) Le plug-in dAdobe projette de pouvoir sélectionner un pointeur parmi un ensemble prédéfini, comme du texte ou des images Possibilités daffecter des fonctions à des touches, comme la mesure de distance et de surface Hyperliens de type HTML, pouvant aussi pointer vers des vues pré-définies ou des animations SVG reconnaît 3 catégories dévénements (qui peuvent être combinés) : –Souris –Clavier –Changements détat (état du chargement et de laffichage du fichier SVG) SVG Applications & future trends > visualisation de contenu

35 6 - 7 mai(c) 2002 Nova / Grassioulet 35/41 Exemple dapplication : la cartographie (14/17) –Interactivité, script (suite) Des événements complexes peuvent être élaborés en combinant des scripts et des applets/servlets Java JavaScript permet davoir accès à tous les éléments du DOM, mis à part quelques domaines qui ne sont pas implémentés dans le plug-in Les applications cartographiques : –Affichage/masquage dobjets –Modification des attributs graphiques –Réaction aux événements de souris (mouseOver) –Liaison de fenêtres (combinaison de vues) –Déplacement interactif –Modification de léchelle –Rotation déléments –Création de petits programmes (sauvegarde des données sur le serveur) –Liaison avec des bases de données grâce aux scripts CGI et aux applets Java (traitement des données) SVG Applications & future trends > visualisation de contenu

36 6 - 7 mai(c) 2002 Nova / Grassioulet 36/41 Exemple dapplication : la cartographie (15/17) –Animation Des animations simples étaient possibles avec du HTML, complété par CSS et JavaScript. Si un objet doit être déplacé de A vers B, toutes les étapes intermédiaires doivent être pré- définies La syntaxe danimation de SVG est liée à celle de SMIL, qui peut déterminer les paramètres temporels dune animation : –Début, souvent dépendant dun événement –Durée –Fin –Nombre de répétition –Attributs intégrés (couleur, position, path, rotation, échelle…) –Ligne de temps métaphorique, permettant de définir lapparition dimages-clés à un temps t –Options dinterpolation entre 2 images-clés »Pas-à-pas »Interpolation linéaire (par défaut) »Interpolations mathématiques complexes SVG Applications & future trends > visualisation de contenu

37 6 - 7 mai(c) 2002 Nova / Grassioulet 37/41 Exemple dapplication : la cartographie (16/17) –Metadata et eXtensibilité Description des documents de façon structurée (SVG ou JavaScript) : –Auteur –Date de publication –Version –Titre –Description… SVG permet de réutiliser et transformer des éléments identifiés (ID) ou des groupe dobjets, comme dans VRML. En cartographie, cette fonctionnalité permet le placement de symboles ou de pictogrammes eXtensibilité des balises, comme avec toutes les spécifications compatibles DOM/XML SVG Applications & future trends > visualisation de contenu

38 6 - 7 mai(c) 2002 Nova / Grassioulet 38/41 Exemple dapplication : la cartographie (17/17) –Exportation vers SVG 3 possibilités pour générer du SVG (qui peuvent être combinées) : –Logiciel de dessin –Publication assistée par ordinateur (PAO) –SIG SVG permet de réutiliser et transformer des éléments identifiés (ID) ou des groupe dobjets, comme dans VRML. En cartographie, cette fonctionnalité permet le placement de symboles ou de pictogrammes eXtensibilité des balises, comme avec toutes les spécifications compatibles DOM/XML SVG Applications & future trends > visualisation de contenu

39 6 - 7 mai(c) 2002 Nova / Grassioulet 39/41 Graphisme statique, animé et interactif –Une comparaison entre Flash.swf (pas basé sur XML, format propriétaire, pas contextuel) et.svg (compact, scalable, contextuel, réductible) http://www.carto.net/papers/svg/comparaison_flash_svg.html –SVG mapping http://www.vbxml.com/xsl/articles/interfaces/ Future trends –SVG est impressionnant et encore nouveau-né (soutien actif du W3C et des entreprises) –Tous les browsers pourront supporté SVG sans plug-in (Netscape et Microsoft sinvestissent aussi dans lauthoring des spécifications) SVG Applications & future trends > graphisme

40 6 - 7 mai(c) 2002 Nova / Grassioulet 40/41 Future trends (suite) –Évolution des interfaces utilisateurs (GUI) dans le sens « document-centric » et « user-centric » Limitations dues à XHTML, en tant que fondation des GUIs Plus grande esthétique dans la navigation grâce au graphisme vectoriel Meilleure portabilité entre plateformes Économie en temps de chargement et en mémoire Visualisation des données en temps réel : –Systems control panel –Stock market analyser Environnements de jeux : –Mélange entre des interfaces utilisateurs 2D et des moteurs 3D –SVG pourrait être utilisé avec dautres technologies comme le 3DML SVG Applications & future trends > interfaces utilisateurs

41 6 - 7 mai(c) 2002 Nova / Grassioulet 41/41 Future trends (suite) Outils visuels, « drag and drop integrated development environments » (IDEs) Animation servant le graphisme dinformation –Développement dapplications Internet et Intranet Art Web design E-learning Portail dinformation E-commerce (B2B, B2C) SVG Applications & future trends > interfaces utilisateurs