DSpace at VNU: OUTILS ET METHODES POUR LA VALIDATION DE DOCUMENTS MULTIMEDIA SVG phan tran hieu

DSpace at VNU: OUTILS ET METHODES POUR LA VALIDATION DE DOCUMENTS MULTIMEDIA SVG phan tran hieu tài liệu, giáo án, bài g...

OUTILS ET METHODES POUR LA VALIDATION DE DOCUMENTS MULTIMEDIA SVG Réalisé par : PHAN Tran Hieu Sous la direction de : Jean-Claude Moissinac Hanoi 2009 Contenus Remerciements Résumé Abstract Liste des figures Chapitre : Introduction Problématique Motivation Objectifs et contribution Environnement de travail Composition de mémoire Chapitre : Etat de l’art Introduction de SVG 1.1 Images sur le web 1.2 Image vectorielle 10 1.3 SVG (Scalable Vector Graphics) - graphique vectoriel adaptable 11 Langages de schéma utilisés par SVG 17 2.1 Définition de Type de Document 18 2.2 Schéma RELAX NG 19 Les travaux antérieurs sur la validation de langage de balisage 20 3.1 Service de validation de W3C 20 3.2 Validateur de HTML de WDG 21 3.3 Page Valet 21 3.4 Validateur de schéma de XML 21 3.5 Relaxed 21 Chapitre : Implémentation 22 Front-end, diagramme du programme 22 Validation d’un document par rapport une DTD 22 2.1 Diagramme 23 2.2 Lecture d’un document SVG 23 2.3 Lecture de DTD 24 2.4 Détection des erreurs d’un document SVG par rapport une DTD 26 2.5 Détection des warning 29 2.6 Détection ID dupliqué et ID non utilisé 30 Validation d’un document par rapport un schéma RNG 32 3.1 Diagramme de validation 32 3.2 Améliorations 32 Suggestions 35 Chapitre : Résultats 38 Interface de console 38 Interface Web 39 Sortie de programme 40 Chapitre : Conclusion 41 Références 42 Remerciements Je tiens tout d’abord remercier mes professeurs l’Institut de la Francophonie pour l’Informatique (IFI) qui nous ont donné des cours intéressants durant les années de Master Je souhaite également remercier M Stéphane Bonenfant, Chargé de l’accueil des élèves étrangers, qui m’a accueilli l’Ecole Nationale Supérieure des Télécommunications Paris et Mme Laurence Zelmar, secrétariat du département Traitement du Signal et des Images (TSI), qui m’a accueilli TSI pour que je puisse effectuer ce stage D’ailleurs, je voudrais remercier TRAN The Hung et Tieu Kim Cuong, qui m’ont donné des repas vietnamiens très délicieux rendant ainsi le temps passé en France très cool En fin, je tiens tout particulièrement remercier M Jean-Claude Moissinac, responsable du stage, qui m’a permis de faire ce stage et m’a guidé et donné beaucoup de conseils pendant tout le temps du stage Résumé Ce stage se concentre sur la validation d’un document SVG Dans ce cas, c’est la détection des erreurs d’un document SVG En effet, pour chaque spécification de SVG, il y a toujours une DTD ou un schéma qui défini la structure des documents Ici, pour SVG full 1.0, SVG full 1.1, SVG tiny 1.1, SVG basic 1.1, chacun a une propre DTD et pour SVG tiny 1.2, il a un schéma Relax NG Alors, la validation d’un document consiste en la détection des erreurs d’un document par rapport une DTD ou un Schéma Relax NG Le programme construit doit pouvoir donner une liste des suggestions pour aider les utilisateurs des documents corriger les erreurs Les solutions proposées pour valider par rapport une DTD et un schéma sont différentes Pour la DTD, j’ai construit les arbres partir des documents et fait référence ces arbres pour faire la comparaison nœud par nœud Pour le schéma RNG j’ai utilisé Jing qui est une outil logiciel pouvant détecter les erreurs des documents XML par rapport un schéma La création de la liste des suggestions est faite l’aide de l’algorithme Levenshtein qui peut mesurer la similarité entre deux chaines de caractères Le résultat réussit assez bien, le programme construit peut bien détecter les erreurs des documents SVG La liste des suggestions proposées est bonne pour les utilisateurs pouvant corriger les erreurs L’interface Web, installée sur Tomcat, du programme donne une faỗon trốs facile dutiliser les outils mis en oeuvre Abstract This internship focuses on the validation of an SVG document In this case, it is the error detection of an SVG document Indeed, each specification of SVG has always a DTD or schema that defines the structure of documents Here, for SVG Full 1.0, SVG Full 1.1, SVG Tiny 1.1, SVG Basic 1.1, everyone has its own DTD and for SVG Tiny 1.2, it has a Relax NG schema So, the validation of a document SVG here is the detection of the errors in that document against a DTD or Relax NG Schema The program in the internship must capable to give a list of suggestions to help users of the documents to correct the errors Proposed solutions to validate against a DTD and a schema are different For the DTD, I constructed the trees from documents and based on these trees to make the comparison node by node For the scheme Relax NG, I used Jing which is a tool that can detect errors in XML documents against a schema The creation of the list of suggestions is done with the help of Levenshtein algorithm that can measure the similarity between two strings The internship has some great results The program builds can detect many errors of the SVG documents The list of suggestions is good for users to correct the mistakes The web interface used on Tomcat provides an easy way to use the program created Liste des figures Figure 1:Un exemple montre la différence entre image vectorielle et matricielle 11 Figure 2:Exemple d’une image SVG 12 Figure 3:Profils du langage SVG 14 Figure 4:Exemple des formes basiques 16 Figure 5:Exemple des animations 17 Figure 6:Diagramme du contexte de programme 22 Figure 7: Diagramme de validation contre une DTD 23 Figure 8: Exemple de la lecture d'un document SVG 24 Figure 9:Extrait des classes de Matra 25 Figure 10: Diagramme de validation contre un schéma RNG 32 Figure 11: Etat de début de démonstration de l'algorithme Levenshtein 37 Figure 12:Etat terminé de la démonstration de l'algorithme Levenshtein 37 Figure 13: Un snapshot de l'interface de console du programme 38 Figure 14: L'interface de Web pour l’entrée 39 Figure 15: L'interface de Web pour le sortie 40 Chapitre : Introduction Problématique Aujourd’hui, le développement de l’Internet a atteint un haut niveau Avec les techniques sur les matériels et la diversité des données, il est nécessaire d’améliorer la vitesse d’accès aux données, la qualité des données et aussi la possibilité de diminuer la taille des données stockées sur les serveurs Dans ce but, une sorte de donnée a été créée, les images vectorielles SVG Ce sont des documents en XML qui représentent les images en utilisant les éléments définis pour créer une image L’assurance de la qualité de ces documents en examinant leurs exactitudes est un problème important Ce stage se concentre le problème de détecter les erreurs des documents SVG par l’examen des structures de ces documents Motivation Il y a actuellement beaucoup d’erreurs dans les documents SVG trouvés sur le Web car les visualiseurs de SVG ignorent beaucoup de ces erreurs Les mainteneurs de ces documents normalement ne peuvent pas savoir quand ils font des mauvaises choses Le résultat est que, trop souvent, le SVG sur le Web ne fonctionne pas dans Mozilla, Batik ou une autre implémentation de SVG Il est important que ces problèmes soient détectés le plus tôt possible avant de les propager dans les outils et les documents SVG l’avenir Objectifs et contribution Le but de stage est de mettre en œuvre un outil qui peut détecter les erreurs des documents SVG de toutes les versions Avec la détection des erreurs, il fait des warnings pour les points faibles trouvés dans ces documents Pour chaque erreur, l’outil propose une liste des suggestions contenant les meilleurs candidats pour corriger l’erreur L’outil est maintenant une source ouverte sur le site web sorceforge Vous pouvez accéder la page http://svghelper.sourceforge.net pour télécharger le code et aussi le ficher exécutable Le fichier exécutable peut aider les auteurs et les utilisateurs des documents SVG détecter les erreurs Pour le code, les développeurs peuvent l’utiliser pour faire des modifications, ajouter les parties nécessaires pour leurs but Environnement de travail Ce stage est fait au sein de l’équipe MM (MultiMédia) du département « Traitement du signal et des images » TELECOM-ParisTech (ex ENST Paris) Paris en France Les travaux ont été encadrés par Jean-Claude Moissinac Il a donné la direction pour la détection des erreurs, les conseils pour le programme, les propositions pour résoudre les difficultés Il a aussi supervisé l’avancement du stage Composition de mémoire La deuxième partie sera la présentation sur les problèmes de théorie concernant le stage Dans la troisième partie, j’aborderai la solution pour réaliser le programme La quatrième présentera quelque résultat du stage Et enfin, c’est la conclusion Chapitre : Etat de l’art Cette partie fait la présentation sur la base de théorie dans le stage Il commence par le petit parcours de l’histoire de l’image La comparaison entre l’image matricielle et l’image vectorielle La présentation porte ensuite sur le langage SVG pour représenter les images Ensuite, j’aborderai sur la DTD, le schéma et quelques travaux existants sur le problème de valider un document de balisage Introduction de SVG Ici, c’est l’introduction des images sur le Web La présentation de l’image vectorielle et les détails sur SVG 1.1 Images sur le web Les premiers navigateurs pour le Web étaient principalement destinés la recherche d'informations textuelles Le navigateur original de Tim Berners-Lee pour les ordinateurs NeXT a permis les images être consultées mais elles se présentaient dans une fenêtre séparée (popup) et ne faisaient pas partie de la page web En Février 1993, Mark Andreessen proposé l’élément img qui permet d’ajouter les images dans les pages Web En 1994, Dave Ragget a développé un X-navigateur qui a permis de présenter les textes autour des images et tableaux Le premier format supporté par tous les navigateurs est GIF, il est été développé par CompuServe Le format original de GIF supportait seulement 256 couleurs En 1995, avec le format JPEG, les images pouvaient avoir la moitié ou le tiers de la taille des images stockées au format GIF JPEG est un format de 24-bit il permet également la possibilité de 16 millions de couleur En 1994, cause de frais d’utilisation de format GIF, le format PNG (Portable Network Graphics) a été développé pour résoudre le problème de GIF Il fournit un format efficace pour les images au niveau de gris, couleurs et palette Les dernières versions des principaux navigateurs fournissent un appui raisonnable pour les GIF, PNG et JPEG JPEG 2000 est un format avec des améliorations dans la technique de compression et les derniers téléphones mobiles sont fournit avec les matériels/logiciels pour supporter ce format L’utilisation des formats d’images sur le web donne beaucoup davantages comme la richesse de contenu, la bonne faỗon de représentation des contenus, etc Par ailleurs, ces formats présentent les inconvénients qui constituent des obstacles sérieux dans le développement et l’adoption des nouvelles techniques sur le Web Quelques problèmes affichés comme ci-dessous • La bande passante : les images sont normalement de grande taille L’augmentation de bande passante et les nouvelles techniques de compression peuvent aider améliorer le problème Même ainsi, les images sont un goulot d'étranglement majeur pour accéder des sites Web • • • Flexibilité : les images ont une résolution fixée Par conséquent, une application destinée pour un ensemble de PCs, PDAs et téléphones mobiles ne peut pas s’adapter facilement et efficacement aux contraintes des autres machines La couleur, la résolution, le rapport d’aspect et la bande passante sont différents entre les machines Hyperlinking : Hyperlinking est une exigence principale sur le Web Mais, faire la liaison entre différentes parties de l’image et des liens n’est pas simple Animation et Interaction : Beaucoup d’applications profitent de l’utilisation d’animation et d’interaction Mais les formats d’image fournissent une animation limitée C’est seulement une séquence d’images combinées dans un fichier L’interaction est aussi limitée dans l’utilisation des formats d’image 1.2 Image vectorielle Pour améliorer les limitations des formats d’image, on a créé un nouveau type d’image Ce sont les images vectorielles Une image vectorielle est une image numérique composée d'objets géométriques individuels comme les points, les droites, les courbes, les polygones, les cercles, etc Chacune des primitives géométriques possède un certain nombre d’attributs (position, couleur, remplissage) On peut lister quelques avantages des images vectorielles • On peut faire les zooms (zoom avant et zoom arrière) des images vectorielles sans perte de qualité des images Dans l’exemple ci-dessous, dans la première ligne, l’image droite est une image vectorielle et gauche est une image matricielle Ils sont de même qualité La deuxième ligne et la troisième ligne, on fait un zoom avant sur les deux images avec les ratios différents Alors que la qualité de l’image vectorielle reste stable, la qualité de l’image matricielle diminue en fonction de la valeur de ratio de zoom avant L’image ci-dessous est un exemple qui montre la différence entre image vectorielle et image matricielle en faisant le zoom avant Pour l’image vectorielle, la qualité de l’image reste stable tandis que celle de l’image matricielle diminue 10 } } Si(aucun d’élément de DTD_childlist égal l’élément représenté par nœud_child) C’est une erreur que l’élément est mauvais ; } } Il y a deux listes Une liste stocke les éléments enfant de l’élément qui est représenté par le nœud courant défini par la DTD et l’autre liste stocke les nœuds enfant du nœud courant L’algorithme fait un parcours sur la deuxième liste Pour chaque nœud considéré, si c’est un nœud représentant les données de texte, alors, le nombre des éléments dans la première liste doit être égal un et la valeur de cet élément doit être égal « #PCDATA » Sinon, une erreur est détectée car les textes sont présentés dans un mauvais contexte Pour les cas où les nœuds sont des éléments, pour chaque nœud, s’il n’y a pas d’élément de deuxième liste égal l’élément de ce nœud, une autre erreur est détectée L’erreur peut être cause d’un élément incorrect ou parce que l’élément est hors de contexte ; par exemple c’est un élément enfant d’un autre élément que nœud courant 2.5 Détection des warning Comme j’ai dit dans la partie de motivation, il y a actuellement pas mal d’erreurs dans les documents SVG sur Internet mais les SVG Viewers ignorent beaucoup de ces erreurs Alors les mainteneurs de ces documents ne peuvent pas habituellement reconntre quand ils font les erreurs Pour diminuer cela, on a proposé quelques suggestions respecter Les suggestions sont présentées après Et pour mon travail, je retire des suggestions de ce papier et fais les warning si le document validé ne respecte pas ces suggestions Le premier point que j’ai retiré est de ne pas inclure une déclaration de DOCTYPE Normalement, les documents SVG de full 1.0 et full 1.1 contiennent les déclarations de DOCTYPE Par exemple : Malheureusement, la DTD de SVG est sources de beaucoup d’accès des utilisateurs Pour cela, le SVG WG a décidé de ne pas écrire cette déclaration pour la version prochaine SVG full 1.2 Pour les versions full 1.0 et full 1.1, il propose d’éviter d’utiliser les déclarations de DOCTYPE Au lieu d’utiliser les déclarations, il nous demande d’inclure toujours les attributs « version » et « baseProfile » dans l’élément racine svg Par exemple : Pour ce cas, il y a trois warnings possibles 29 • • • Le document inclut la déclaration de DOCTYPE Pour la détecter, je fais une recherche ligne par ligne partir de la première ligne jusqu’à la ligne de l’élément S’il y a les chaines de caractère contenant « DOCTYPE svg PUBLIC » trouvées, je produis un le warning L’absence d’attribut « version » Ce warning peut être trouvé facilement en examinant les attributs de l’élément L’absence dattribut ô baseProfile ằ La faỗon de le trouver est identique avec la faỗon de trouver labsence dattribut ô version » La deuxième suggestion est qu’il faut indiquer les espaces de nom obligatoires Il est judicieux de lier les espaces de noms de SVG et de XLink au minimum Il est possible de lier l’espace de nom de XML Events Pour les espaces de Xlink et Events, peut-être on n’utilise pas encore ces espaces mais en les ajoutant on peut éviter les erreurs si on décide de les utiliser et oublier de lier ces espaces Pour lier ces espaces, il faut simplement ajouter les trois attributs suivants dans l’élément Dans ce cas je fais les warning si je détecte les absences de ces attributs La troisième suggestion est qu’il faut éviter d’utiliser l’attribut « style », si possible On a l’habitude d’utiliser l’attribut « style » pour spécifier les caractéristiques visuelles des éléments SVG Par exemple : Au lieu de faire comme cela, il sera meilleur de séparer en plusieurs attributs Par exemple : Et pour ce cas, je fais les warnings pour chaque fois où je détecte une présence de l’attribut « style » pendant le parcours du document 2.6 Détection ID dupliqué et ID non utilisé ID dupliqué est un test particulier Il n’est pas décrit dans une DTD Mais il suit les règles de XML, la valeur d’un attribut ID doit être unique dans le document La détection de cette erreur peut être écrit comme ci-dessous IDduplicateDetect() { Initialiser une liste des paires (ID, liste des éléments de cet ID); Pour chaque ID dans le document { Si(ID existe dans une paire) Ajouter son élément dans la liste des éléments de cette paire ; Sinon 30 { Créer une nouvelle paire avec cet ID et une liste contenant son élément ; Ajouter cette paire dans la liste des paires ; } } //parcourir la liste des paires Pour chaque paire dans la liste des paires { Si(le nombre d’élément dans la liste de cette paire est supérieur un) C’est une erreur de ID dupliqué ; } } D’abord, on initialise une liste des paires Une paire contient une valeur d’ID et une liste de tous les éléments dans le document qui ont cette valeur d’ID Le parcours sur le document traverse tous les attributs ID des éléments Si la valeur d’attribut ID est présente dans une paire Il ajoute l’élément qui a cet ID dans la liste des éléments de cette paire Sinon, il crée une nouvelle paire avec cet ID et une nouvelle liste contenant l’élément qui a cet ID Après avoir fini ces étapes, nous avons une liste qui contient toutes les valeurs d’ID et les listes des éléments qui a l’attribut ID ayant cette valeur Maintenant, nous testons les paires de cette liste Si une paire possède une liste d’éléments de taille supérieure un, alors, une erreur d’ID dupliqué est détectée Le parcours de cette liste va nous donner toutes les erreurs d’ID dupliqué Avec la détection des ID dupliqués, celle des ID non utilisés est aussi un test particulier concernant les IDs Un ID utilisé est un ID qui doit être référencé par au moins un élément ou être utilisé comme le paramètre de la fonction « getElementById » dans l’élément script Les IDs restants sont les IDs non utilisés Je fais un warning pour chaque ID non utilisé détecté L’algorithme en pseudo-code de détection est comme ci-dessous ; detectIDnotused() { Idlist = liste tous les IDs dans le document ; Initialiser une liste des IDs utilisés ; Pour chaque élément script dans le document ; { Pour chaque fonction getElementById dans la donnée de cet élément Ajouter le paramètre dans la liste des IDs utilisés ; } Pour chaque attribut href dans le document 31 Ajouter la valeur de cet attribut dans la liste des IDs utilisés après avoir enlevé le caractère #; Enlever tous les IDs de IDlist qui ont la valeur existant dans la liste des IDs utilisés ; Pour chaque ID restant dans IDlist C’est un warning de ID non utilisé ; } L’algorithme commence par la recherche des IDs utilisés D’abord a lieu la recherche des IDs utilisés dans les éléments script La recherche se fait en cherchant les chaines de caractères getElementById dans les données de ces éléments Les caractères entre la paire « (“ » et « “) » ou « (‘ » et « ‘) » après la chaine trouvée sont une valeur d’un ID utilisé Elle est ajoutée dans la liste des IDs utilisés Les autres IDs utilisés peuvent être trouvés en lisant les attributs href La valeur de cet attribut est une ID utilisé et elle va être ajoutée dans la liste des IDs utilisés L’étape suivante est pour enlever les IDs dans la liste des IDs dans le document qui ont la valeur égale une valeur dans la liste des IDs utilisés Le reste de la liste des IDs est la liste des IDs non utilisés Un warning va être créé pour chaque ID non utilisé dans la liste Validation d’un document par rapport un schéma RNG La structure de tiny 1.2 est définie par un schéma Relax NG Alors, la validation d’un document par rapport un schéma est nécessaire 3.1 Diagramme de validation La validation par rapport au schéma RNG est différente de celle par rapport la DTD Pour valider un document par rapport un schéma RNG, on se base sur la source ouverte Jing qui est un logiciel de détection des erreurs d’un document XML par rapport un schéma SVG document Schéma RNG Validateur en basant sur Jing Résultat en textes Résultat en XML Figure 10: Diagramme de validation contre un schéma RNG L’entrée de l’outil est un document SVG avec un schéma Relax RG Le validateur traite l’entrée et sort la liste des erreurs et warnings en forme de texte ou de XML Le validateur est développé en se basant sur Jing et en faisant des améliorations 3.2 Améliorations Jing [19] utilise l’algorithme de « derivative » pour trouver les erreurs d’un document XML par rapport un schéma RNG Le résultat est assez bien mais il existe aussi des inconvénients Ce sont : 32 • • • • • • En cas d’absence d’un élément qui est défini comme obligatoire par le schéma Pour ce cas, on ne peut pas savoir quel est l’élément absent En cas d’absence d’un attribut qui est défini comme obligatoire par le schéma On ne peut pas savoir quel est l’attribut absent Dans le cas d’une valeur erronée d’un attribut, on ne sait pas quel sont les valeurs correctes Il existe des messages dont le sens n’est pas très clair La modification du contenu de ces messages nous aide bien les comprendre La sortie de Jing a des messages textuels Pour mon outil, nous pouvons choisir de sortir en XML ou en texte L’absence de la liste des suggestions Les améliorations servent résoudre ces problèmes En effet, dans l’algorithme de derivative, la classe pattern représentant un pattern de schéma, peut être : • • • • • Un pattern d’élément (ElementPattern) : en lisant ce pattern on peut retirer l’information de l’élément Un pattern d’attribut (AttributePattern) : en lisant ce pattern on peut retirer l’information de l’attribut Un pattern de valeur (ValuePattern) : en lisant ce pattern on peut retirer l’information de la valeur Un pattern de groupe (GroupPattern) : il contient deux sous-patterns p1 et p2 p1 est toujours un pattern d’élément ou d’attribut ou de valeur On peut le lire pour avoir l’information de l’élément, l’attribut ou la valeur p2 est un pattern parmi de six types de pattern Un pattern de zéro ou plus (ZeroOrMorePattern) : il contient un sous-pattern On continue de lire ce pattern pour avoir les informations (d’élément, d’attribut et de la valeur) Un pattern de choix (ChoicePattern) : comme le pattern de groupe, il contient deux sous-patterns Le parcours des sous-patterns nous donne les informations d’élément, d’attribut ou de la valeur Le parcours des patterns nous donne les informations nécessaires comme les éléments absents, les attributs absents, les valeurs correctes d’un attribut Il peut nous aider trouver la liste des candidats qui sont utilisé pour construire la liste des suggestions Pseudo-code pour trouver les éléments absents, les attributs absents, les valeurs correctes d’un attribut visitPattern(pattern p) { Si(p est un élément) Lire p ; Si(p est un attribut) Lire p ; Si(p est une valeur) Lire p ; Si(p est un groupe) { 33 p1 = premier pattern du groupe ; p2 = deuxième pattern du group ; visitPattern(p1) ; si (p2 est un élément ou un attribut ou une valeur) visitPattern(p2) ; } Si(p est un zeroOrMorePattern) visitPattern(sous-pattern de p) ; Si(p est un choix) { p1 = premier pattern du groupe ; p2 = deuxième pattern du group ; visitPattern(p1) ; si (p2 est un élément ou un attribut ou une valeur) visitPattern(p2) ; } } Pour la recherche les candidats pour construire la liste des suggestions, le pseudo-code est un peu différent findCandidates(pattern p) { Si(p est un élément) Lire p ; Si(p est un attribut) Lire p ; Si(p est une valeur) Lire p ; Si(p est un groupe) { p1 = premier pattern du groupe ; p2 = deuxième pattern du group ; findCandidates(p1) ; findCandidates(p2) ; } Si(p est un zeroOrMorePattern) findCandidates(sous-pattern de p) ; Si(p est un choix) { p1 = premier pattern du groupe ; 34 p2 = deuxième pattern du group ; findCandidates(p1) ; findCandidates(p2) ; } } Suggestions Pour aider corriger les erreurs, l’outil crée une liste de suggestions pour chaque erreur La liste de suggestions d’une erreur est une liste contenant les valeurs possibles qui peuvent remplacer l’erreur pour que le document soit correct Le nombre de membre dans une liste est défini par un seuil Les candidats qui vont être ajoutés dans les listes des suggestions sont choisis en fonction du type d’erreur : • • • Si l’erreur porte sur un élément erroné, les candidats seront tous les éléments enfant de l’élément parent de cet élément selon la DTD ou le schéma RNG Si l’erreur porte sur un attribut erroné d’un élément, les candidats seront tous les attributs de cet élément selon la DTD ou le schéma RNG en enlevant tous les attributs de cet élément existant dans le document Si l’erreur porte sur une valeur erronée d’un attribut, les candidats seront toutes les valeurs correctes selon la DTD ou le schéma RNG Pour choisir les meilleures propositions ajouter dans la liste des suggestions, j’ai utilisé un algorithme pour spécifier la similarité entre un candidat et l’erreur C’est l’algorithme Levenshtein La suite est la présentation de cet algorithme L’algorithme Levenshtein sert calculer la distance de Levenshtein pour mesurer la similarité entre deux chnes de caractères La définition de la distance de Levenshtein entre deux mots M et P est un coût minimal pour transformer M en P en effectuant les opérations suivantes : • • • substitution d'un caractère de M en un caractère de P ajout dans M d'un caractère de P suppression d'un caractère de M Chaque opération a un coût Le coût de substitution égal si les caractères sont différents, pour les autres cas Les coûts d’ajout et de suppression sont égaux Par exemple: quand je tape le mot wrong comme wromg (taper le caractère m au lieu du caractère n), c’est une erreur de substitution ; quand je tape wronmg (taper m et n), c’est une erreur de suppression ; quand je tape wrog (absence de n), c’est une erreur d’ajout L’algorithme en pseudo-code pour calculer la distance de Levenshtein entre deux chaines de caractère chaine1 et chaine2 est décrit ci-dessous entier DistanceDeLevenshtein(chaine1[1 longueurChaine1], chaine2[1 longueurChaine2]) 35 { // d est un tableau de longueurChaine1+1 rangées et longueurChaine2+1 colonnes declarer entier d[0 longueurChaine1, longueurChaine2] // i et j itèrent sur chaine1 et chaine2 declarer entier i, j, coût pour i de longueurChaine1 d[i, 0] = i pour j de longueurChaine2 d[0, j] = j pour i de longueurChaine1 pour j de longueurChaine2 si chaine1[i] == chaine2[j] alors coût:= sinon coût = d[i, j] = minimum( d[i-1, j ] + 1, // effacement d[i, j-1] + 1, // insertion d[i-1, j-1] + coût // substitution ) retourner d[longueurChaine1, longueurChaine2] } La meilleure faỗon pour comprendre lalgorithme est de faire un tableau oự les lignes correspondent aux caractères de la source et les colonnes correspondent aux caractères de la destination La cellule (i, j) représente la plus petite distance entre les i premières caractères de la source et les j premières caractères de la destination L’algorithme commence par le remplissage la première ligne par 0,1, ,j,…longueur de destination et la premier colonne par 0,1,…,i,… longueur de source car au départ, la destination et la source correspondent aux mots vides Un exemple démontre le calcul de distance entre deux mots : puzzle et pzzel La première étape est montrée dans l’image ci-après 36 Figure 11: Etat de début de démonstration de l'algorithme Levenshtein [22] Le calcul de chaque cellule restant du tableau est basé sur ses voisinages : la cellule gauche, la cellule en haut, et la cellule en diagonale Cellule calculer Cellule en haut Cellule gauche Min (Cellule calculer + coût de substitution, Cellule gauche + coût d’ajout, Cellule en haut + coût de suppression Cellule calculer En appliquant cette règle, le résultat du remplissage de ce tableau est dans cette image Figure 12:Etat terminé de la démonstration de l'algorithme Levenshtein [22] 37 Alors la distance de Levenshtein entre puzzle et pzzel est la valeur de la cellule [5,6] = Chapitre : Résultats Pendant mon stage, j’ai réussi mettre en œuvre l’outil de validation des documents SVG Je l’ai aussi mis en interface Web avec le serveur Tomcat Alors cette partie fait une présentation sur l’outil et la sortie de l’outil Interface de console C’est l’interface en ligne de commande pour lancer l’outil La syntaxe est: java –jar SvgValidator.jar [options] Les options ici sont que : -f filename : indique le document svg valider -pxml : indique si on veut afficher la sortie en forme xml -s filename: si on veut stocker le résultat en forme textes sur un fichier Filename est le nom de ficher contenant les résultats de textes -sxml filename : si on veut stocker le résultat sous forme XML sur un ficher filename est le nom de fichier contenant les données de sortie On peut indiquer la DTD ou le schéma utiliser avec les options suivantes : -rng schemafile : schemafile est le chemin du fichier de schéma utilisé pour la validation (rng file) -dtd dtdfile : dtdfile est le chemin du fichier de schéma utilisé pour la validation (dtd file) Dans le cas où on veut valider un document par rapport plusieurs versions de SVG, l’option ci-dessous permet d’indiquer le chemin du répertoire où on stocke toutes les DTDs et le schéma de SVG -schema schemaFolder : schemaFolder est le répertoire où les DTDs et les schéma sont stockés Voici un snapshot d’écran de la validation Figure 13: Un snapshot de l'interface de console du programme 38 Interface Web L’interface web est déployée sur Tomcat avec des pages Jsp Voici quelques snapshot d’écran de l’interface de Web Figure 14: L'interface de Web pour l’entrée Pour cette page, vous entrez l’Url du document svg, choisissez les versions valider, déterminez si vous voulez stocker les résultats dans un fichier texte ou XML et faites la validation On peut aussi valider les documents locaux en utilisant la page de upload où on peut spécifier les fichiers locaux et les mettre sur le serveur Le résultat de la validation est ensuite affiché dans une page 39 Figure 15: L'interface de Web pour le sortie Dans cette page, on peut voir les informations des erreurs On peut aussi télécharger les fichiers qui stockent le résultat sous forme de texte et sous forme de XML Sortie de programme Pour la sortie de texte, c’est comme dans l’image dessus Une erreur est affichée avec trois lignes La première ligne est le message d’erreur, et la valeur erronée d’erreur La deuxième ligne détermine la position de l’erreur et la troisième ligne affiche la liste des suggestions pour corriger la valeur erronée Pour la sortie XML, l’exemple suivant explique la structure de sortie en XML 40 attribute not allowed at this point:transfolm 8 49 transform style class fill stroke ]]> L’élément racine de résultat est diagnostic Il contient les résultats de la validation de document par rapport toutes les versions de SVG choisies valider Chaque version déterminée par l’élément specification qui a l’attribut name pour déterminer le nom de la version validée L’élément errors représente une liste des erreurs Chaque erreur est représentée par l’élément error qui contient les sous-éléments : description pour le message d’erreur ; element qui a peut-être les sous-éléments pour déterminer la valeur d’erreur, il appartient quel attribut, quel élément ; line détermine la ligne ó appart l’erreur ; column détermine la colonne de l’erreur ; suggestions contient les sous-élément suggestion pour lister les suggestions pour corriger l’erreur ; extract pour afficher la ligne du document SVG contenant l’erreur Chapitre : Conclusion Le stage a permis la création d’un validateur de SVG qui peut détecter les erreurs des documents SVG Ce validateur peut faire des warnings pour les points faibles existants dans le document validé Il peut aussi être capable de faire la liste des suggestions qui aide les auteurs des documents pour corriger les erreurs Pour compléter le programme, j’ai récupéré des travaux existants en faisant des améliorations Les deux travaux que j’ai utilisés sont Matra qui m’a aidé analyser une DTD et Jing qui m’a aidé dans la 41 détection des erreurs d’un document par rapport un schéma Relax NG L’algorithme Levenshtein qui peut mesurer la similarité entre deux chaines de caractère m’a aidé construire la liste des suggestions Le travail du stage s’arrête la détection des erreurs Une suite de ce stage pourrait être la correction des documents erronés en se basant sur le résultat de la détection des erreurs Normalement, pour corriger une erreur on peut choisir une valeur dans la liste des suggestions et remplacer la valeur erronée par celle-ci Au niveau de la syntaxe, avec les remplacements, on peut avoir un bon document C’est-à-dire, on a un document avec aucune erreur de syntaxe Mais est-ce que ce document est bon au niveau visuel C’est-à-dire, est-ce que le document représente l’image souhaitée par l’auteur C’est une question difficile répondre Références [01] SVG Tutorial ; David Duce , Ivan Herman , Bob Hopgood; Oxford Brookes University, World Wide Web Consortium [02] http://www.w3.org/Graphics/SVG/: Scalable Vector Graphics (SVG); World Wide Web Consortium, 2008 [03] http://www.w3.org/TR/SVG11/: Scalable Vector Graphics (SVG) 1.1 Specification; W3C Recommendation 14 January 2003, edited in place 30 April 2009 [04] http://www.w3.org/TR/SVGTiny12/: Scalable Vector Graphics (SVG) Tiny 1.2 Specification; W3C Recommendation 22 December 2008 [05] http://en.wikipedia.org/wiki/Scalable_Vector_Graphics: Scalable Vector Graphics [06] http://en.wikipedia.org/wiki/RELAX_NG: RELAX NG [07] http://relaxng.org/tutorial-20011203.html: RELAX NG Tutorial; Committee Specification December 2001 [08] http://www.w3schools.com/DTD/default.asp: DTD Tutorial, W3Schools [09] http://en.wikipedia.org/wiki/Document_Type_Definition: Document Type Definition [10] http://www.xmlfiles.com/dtd/: XML DTD - An Introduction to XML Document Type Definitions [11] http://xerces.apache.org/xerces-j/: Xerces Java Parser 1.4.4 Release [12] http://www.saxproject.org/: About SAX [13] The W3C Markup Validation Service v0.7.4.W3C.http://validator.w3.org/ (referenced: 2007-01-24) [14] WDG HTML Validator Liam Quinn http://www.htmlhelp.com/tools/validator/ (referenced: 200701-25) 42 [15] Page Valet.WebThing Ltd http://valet.webthing.com/page/ (referenced: 2007-04-02) [16] XML Schema Validator Christoph Schneegans.http://schneegans.de/sv/ (referenced: 2007-03-04) [17] Relaxed: on the way towards true validation of compound documents Jirka Kosek and Petr Nálevka In WWW ’06: Proceedings of the 15th international conference on World Wide Web, pages 427– 436 ACM Press, 2006 ISBN: 1-59593-323-9 http://doi.acm.org/10.1145/1135777.1135841 [18] Matra - An XML DTD Parser Utility: http://matra.sourceforge.net/ [19] Jing, A RELAX NG validator in Java http://www.thaiopensource.com/relaxng/jing.html [20] An algorithm for RELAX NG validation; http://www.thaiopensource.com/relaxng/derivative.html James Clark (jjc@thaiopensource.com); [21] DTDParser, A Java DTD Parser http://www.wutka.com/dtdparser.html [22] Introducing the Java platform's Jazzy new spell checker API [23] Distance de Levenshtein http://fr.wikipedia.org/wiki/Distance_de_Levenshtein [24] Image vectorielle http://fr.wikipedia.org/wiki/Image_vectorielle [25] SVG Tiny (SVGT) et XHTML basic : langages pour des composants JSF mobiles Tayeb Lemlouma,Novembre 2004, Projet WAM, INRIA Rhône Alpes 43 ... spécifications: SVG full 1.0 ; SVG full 1.1, pour SVG Basic c’est SVG basic 1.1 et pour SVG tiny ce sont SVG Tiny 1.1 et SVG Tiny 1.2 1.3.4 Structure de SVG Un petit parcours sur la structure de SVG. .. sur la validation de langage de balisage SVG est un langage de balisage Alors un parcours sur les travaux concernant la validation de langage de balisage est nécessaire 3.1 Service de validation. .. Malheureusement, la DTD de SVG est sources de beaucoup d’accès des utilisateurs Pour cela, le SVG WG a décidé de ne pas écrire cette déclaration pour la version prochaine SVG full 1.2 Pour les versions