Chap III - XML Présentation ("Basic")

Présentation au sujet: "Chap III - XML Présentation ("Basic")"— Transcription de la présentation:

1 Chap III - XML Présentation ("Basic")
Chap VIII - XML Processeurs "Advanced" 10 chapitres en 2 versions .ppt et .pdf accès distant mais sans les exemples ou après téléchargement du répertoire COURS accès local avec les exemples

2 17/04/2017 Sommaire du Cours Chap I - Documents: Historique, Modèles, Standards et Références Chap II - HTML: voir le cours CIP1-CMD & HTML5 Chap III - XML: "eXtensible Markup Language", les Bases Chap IV - DTD: "Document Type Definition" Chap V - CSS: Feuilles de Styles en Cascades& CSS3 Chap VI - DOM, DHTML: "Domain Object Model "& Programmation Dynamique en HTML & SPRY & JQuery Chap VII - XSD: Schémas XML Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink Chap IX - XSLT: Transformations XML Chap X - RDF: "Resource Description Framework" Chap IX - AJAX: "Asynchronous JavaScript And XML" Savoir-Faire: Basic Advanced State of the Art Etat de l'Art: HTML5 CSS3 SPRY JQuery SVG MathML RDF AJAX 17/04/2017 Transparent 2 Langages & Documents ESSI - 2 – Paul Franchi 2

3 Some References Web EPU courses (in French)
17/04/2017 Some References Web EPU courses (in French) Création & Manipulltion de Document Introduction to Internet Langages & Documents W3C tutorial : Mozilla Development Center W3C, Web Developer's Bookmarks XML Wiki Book Biblio: many issues at EPU's lib 17/04/2017 Transparent 3 Langages & Documents ESSI - 2 – Paul Franchi

4 Documentation et Manuels
Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) Expressions Rationnelles Manuels. Expressions régulières sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix 17/04/2017 Transparent 4 ESSI - 2 – Paul Franchi

5 Web Reference Browser de XML vers HTML5+CSS3
metadata .xml de XML vers HTML5+CSS3 17/04/2017 Transparent 5 ESSI - 2 – Paul Franchi 5

6 de XML vers HTML5+CSS3+JS
Doc Example Browser metadata .xml de XML vers HTML5+CSS3+JS 17/04/2017 Transparent 6 ESSI - 2 – Paul Franchi 6

7 Lexique API – Application Programming Interface
17/04/2017 API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DHTML – Dynamic HTML DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol ISO - International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) MVC - Model View Controler RDF - Resource Description Framework REST - Representational State Transfer RIA - Rich Internet Application RSS - Really Simple Syndication SGML - Standard Generalized Markup Language SOAP - Simple Access Object Protocol SPRY - Extensions JS pour HTML - Adobe Lab. SVG - Scalable Vector Graphics UNICODE – World wide Code (16 bits) UTF-8 – Unicode version 8 bits URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language Lexique 17/04/2017 Transparent 7 Langages & Documents ESSI - 2 – Paul Franchi

8 Chap III - XML Présentation ("Basic")
Génèse de XML MetaLangage Norme Lexicale Norme Syntaxique Espaces de noms - Namespaces Dialectes : XHTML, MathML, SVG, etc Techniques XML

9 XML - La Génèse et les Recommandations (W3C)
17/04/2017 XML - La Génèse et les Recommandations (W3C) In 1996 a team under the guidance of Jos Bosak attending the W3C-consortium was established to make SGML web-suitable. The result was a 30-page specification, which received in February 1998 the status of a "W3C-recommendation" and was named "Extensible Markup Language (XML)". XML Information content Extensible set of tags Data exchange language Greater hypertext linking XML should be compatible with SGML XML should be easy to use in the Internet The number of optional characteristics should be minimized XML-documents should be easy to generate and human-readable XML should be supported by a variety of application It should be easy to write programs for XML XML should be put into practice on time XML Document Layout and Syntax An XML document contains a hierarchy of data values wrapped inside XML elements and includes various other entries to assist in processing this information. The data structure and processing entries must conform to exacting rules. Standards and specifications for designing XML documents are maintained by the World Wide Web Consortium (W3C) and can be found at These recommendations give the structural and syntactical rules for creating XML documents and standards for testing their validity. An XML document contains two major sections -- the prolog and data structure sections. The prolog identifies the document as an XML document and includes other optional entries for specialized processing. The data structure section includes the hierarchy of data elements representing the document's information content. The Prolog The prolog section of an XML document contains three optional elements: XML declaration Processing instruction Document type definition HTML Information presentation Fixed set of tags Data presentation language Limited hypertext linking 17/04/2017 Transparent 9 Langages & Documents ESSI - 2 – Paul Franchi

10 XML Document Layout and Syntax
17/04/2017 XML - Applications Publication: Database content can be converted into XML and afterwards into HTML by using an XSLT stylesheet. Making use of this technique, complex websites as well as print media like PDF files can be generated. Information no longer has to be stored in different formats (i.e. RTF, DOC, PDF, HTML). Content can be stored in the neutral XML format and then, using appropriate layout style sheets and transformations, brochures, websites, or datalists can be generated (see more in Chapter 17.) Interaction: XML can be used for accessing and changing data interactively. This man<->machine communication usually happens via a web browser (see Chapter 12) . Integration: Using XML, homogenous and heterogenous applications can be integrated. In this case, XML is used to describe data, interfaces, and protocols. This machine-machine communication helps integrate relational databases (i.e. by importing and exporting different formats). Transaction: XML helps to process transactions in applications like online marketplaces, supply chain management, and e-procurement systems. This website contains approximately 20,000 pages with profiles of the artists, their products and the titles of the songs. These pages are generated using a XSLT script. ( catalog in PDF format.) XML Document Layout and Syntax An XML document contains a hierarchy of data values wrapped inside XML elements and includes various other entries to assist in processing this information. The data structure and processing entries must conform to exacting rules. Standards and specifications for designing XML documents are maintained by the World Wide Web Consortium (W3C) and can be found at These recommendations give the structural and syntactical rules for creating XML documents and standards for testing their validity. An XML document contains two major sections -- the prolog and data structure sections. The prolog identifies the document as an XML document and includes other optional entries for specialized processing. The data structure section includes the hierarchy of data elements representing the document's information content. The Prolog The prolog section of an XML document contains three optional elements: XML declaration Processing instruction Document type definition 17/04/2017 Transparent 10 Langages & Documents ESSI - 2 – Paul Franchi 10

11 XML Document Layout and Syntax
17/04/2017 10 reasons to use XML XML is a widely accepted open standard. XML allows to clearly separate content from form (appearance). XML is text-oriented. XML is extensible. XML is self-describing. XML is universal; meaning internationalization is no problem. XML is independent from platforms and programming languages. XML provides a robust and durable format for information storage. XML is easily transformable. XML is a future-oriented technology. XML Document Layout and Syntax An XML document contains a hierarchy of data values wrapped inside XML elements and includes various other entries to assist in processing this information. The data structure and processing entries must conform to exacting rules. Standards and specifications for designing XML documents are maintained by the World Wide Web Consortium (W3C) and can be found at These recommendations give the structural and syntactical rules for creating XML documents and standards for testing their validity. An XML document contains two major sections -- the prolog and data structure sections. The prolog identifies the document as an XML document and includes other optional entries for specialized processing. The data structure section includes the hierarchy of data elements representing the document's information content. The Prolog The prolog section of an XML document contains three optional elements: XML declaration Processing instruction Document type definition 17/04/2017 Transparent 11 Langages & Documents ESSI - 2 – Paul Franchi 11

12 XML - eXtensible Marked up Langage
17/04/2017 XML - eXtensible Marked up Langage XML est une recommandation W3C (1998) pour le transport et le stockage de données XML est un métalangage (ou méta-modèle)  les balises ne sont pas limitées (user-defined) le balisage est associé à une structure logique Arborescente (enracinée dessinée)  API DOM, SAX le principe de formatage est celui des boites rectangulaires bien emboîtées (parenthèsées)  XML bien formé une DTD ou un Schéma XSD (non obligatoire) définit une structure logique générique (modèle SGML)  XML valide le Style est toujours séparé  CSS, XSL, XSL-FO XML supporte: des processeurs dédiés:  XPath, XLink, XQuery, XForms la définition de dialectes:  SVG, MathML, RDF, SMIL, RSS… des transformations & échanges  XSLT XML Document Layout and Syntax An XML document contains a hierarchy of data values wrapped inside XML elements and includes various other entries to assist in processing this information. The data structure and processing entries must conform to exacting rules. Standards and specifications for designing XML documents are maintained by the World Wide Web Consortium (W3C) and can be found at These recommendations give the structural and syntactical rules for creating XML documents and standards for testing their validity. An XML document contains two major sections -- the prolog and data structure sections. The prolog identifies the document as an XML document and includes other optional entries for specialized processing. The data structure section includes the hierarchy of data elements representing the document's information content. The Prolog The prolog section of an XML document contains three optional elements: XML declaration Processing instruction Document type definition 17/04/2017 Transparent 12 Langages & Documents ESSI - 2 – Paul Franchi 12

13 Une note (message) Les exemples du W3C
17/04/2017 Les exemples du W3C <?xml version="1.0" encoding="ISO " ?> <!– ou "UTF-8" --> <note date='09/2011' auteur='PFZ'> <to>SI4</to> <from>Le Prof</from> <sujet cours='LANGDOC' >Reminder</sujet> <message>Don't forget your TP!</message> </note> The XML Declaration The XML declaration, if included, must appear as the first line of the document. The declaration consists of a mandatory version number, an optional encoding declaration specifying the character set used, and an optional indication of the stand-alone nature of the document. <?xml version="1.0" [encoding="UTF-8"] [standalone="yes"] ?> The current version is 1.0 and must be included. An encoding declaration is needed only when using a non-Latin (non-English) character set. The default character set is UTF-8 and does not need to be coded. The standalone="no" attribute is required when reference is made to an external file containing additional declarations for the current document (see "Document Type Definition" below). The default value is standalone="yes" (this is a stand-alone document) and the attribute can be omitted. An XML declaration is optional, but it is always a good idea to include it since W3C recommendations state that a "well-formed" document begins with an XML declaration. Une note (message) 17/04/2017 Transparent 13 Langages & Documents ESSI - 2 – Paul Franchi

14 Une carte de Menu Les exemples du W3C
17/04/2017 Les exemples du W3C <?xml version="1.0" encoding="ISO " ?> <breakfast_menu> <food> <price>$5.95</price> <name>Belgian Waffles</name> <description>two of our famous Belgian Waffles with plenty of real maple syrup</description> <calories>650</calories> </food><food><price>$7.95</price> <name>Strawberry Belgian Waffles</name> <description>light Belgian waffles covered with strawberries and whipped cream</description> <calories>900</calories> </food><food><price>$8.95</price> <name>Berry-Berry Belgian Waffles</name> <description>light Belgian waffles covered with an assortment of … and whipped cream</description> </food><food><price>$4.50</price> <name>French Toast</name> <description>thick slices made from our homemade sourdough bread</description> <calories>600</calories> </food> </breakfast_menu> Processing Instructions A processing instruction is a reference to a supporting document containing processing instructions relevent to the XML document. Most likely, this processing instruction refers to an external style sheet used to transform the document in some fashion, normally to format the XML data content for Web page display. A processing instruction that links to an external style sheet appears as shown below. <?xml-stylesheet type="text.xsl" href="url" ?> Working with XML style sheets to perform transformations of XML documents into Web pages and into other XML documents is consider later in these tutorials. Document Type Declaration A document type (DOCTYPE) declaration is required if the XML document is to be validated against a Document Type Definition (DTD). A DTD is a set of rules for interpreting the data elements and their relationships. For example, DTD entries can indicate proper names and valid data types for data elements in the document. The general formats for DOCTYPE declarations are shown below. <!DOCTYPE root node [ <!ELEMENT declaration> ... ]> <!DOCTYPE root node SYSTEM "url"> An internal DTD can be coded as part of the XML document, or an external DTD can be coded in a separate document. If DTD specifications are in an external document linked by the url, then the attribute standalone="no" must be coded in the XML declaration. An XML document that satisfies DTD specifications is said to be "valid" in addition to being well-formed. DTD validation is considered later in these tutorials. Une carte de Menu 17/04/2017 Transparent 14 Langages & Documents ESSI - 2 – Paul Franchi

15 17/04/2017 XML - Objectifs XML propose un "modèle syntaxique" (de type Entité-Relation) pour le transport et l'échange des Données Data Storage Data Sharing Data Exchange Platform Change XML permet la création de nouveaux Langages pour le Web XHTML  WSDL for available web services WAP and WML for handheld devices RSS for news feeds RDF and OWL for resources and ontology SMIL for multimedia for the web  XML (contrairement à HTML) ne fait rien par lui-même XML ne traite pas le "layout" (style) du format des données The Data Section Following the prolog is the XML data structure for the information content of the document. Appearing here are the XML tags signifying the data nodes and data elements that compose the hierarchy of information. Although there is great flexibility in naming and organization XML tags, there are fixed rules for doing so. Opening/Closing Tags One of these syntactical rules is that all XML elements must have opening and closing tags. This rule can be followed in two ways. For XML elements that enclose data or enclose child elements there must be an opening tag along with a paired closing tag. These tags are in the following format, <tagname>   ... </tagname> where the closing tag includes the forward slash character (/) preceding the tag name. You are probably familiar with this syntax from XHTML where, for example, a paragraph is enclosed inside <p>...</p> tags. For XML elements that do not enclose data or child elements a single start/end tag can be used. These empty tags are in the format, <tagname/> where the single tag includes a forward slash following the tag name. Again, you are familiar with this format in XHTML through the <br/> tag and other similar non-paired tags. Empty tags are often used as "markers" to indicate a point in the data structure where special processing is to take place. It is unlikely, though, that you will use empty tags in the normal course of XML data structuring, where elements nearly always enclose other elements. 17/04/2017 Transparent 15 Langages & Documents ESSI - 2 – Paul Franchi

16 l'Univers XML … … en pleine expansion <?xml ?> CSS DOM
17/04/2017 l'Univers XML … XML based Languages XHTML SVG MATHML SMIL WSDL SOAP RSS RDF <?xml ?> CSS DOM … un metamodèle "pivot" universel  XSD XPath XLink XSL Processors XML XSL-FO XQuery XForms … des processeurs compatibles The Data Section Following the prolog is the XML data structure for the information content of the document. Appearing here are the XML tags signifying the data nodes and data elements that compose the hierarchy of information. Although there is great flexibility in naming and organization XML tags, there are fixed rules for doing so. Opening/Closing Tags One of these syntactical rules is that all XML elements must have opening and closing tags. This rule can be followed in two ways. For XML elements that enclose data or enclose child elements there must be an opening tag along with a paired closing tag. These tags are in the following format, <tagname>   ... </tagname> where the closing tag includes the forward slash character (/) preceding the tag name. You are probably familiar with this syntax from XHTML where, for example, a paragraph is enclosed inside <p>...</p> tags. For XML elements that do not enclose data or child elements a single start/end tag can be used. These empty tags are in the format, <tagname/> where the single tag includes a forward slash following the tag name. Again, you are familiar with this format in XHTML through the <br/> tag and other similar non-paired tags. Empty tags are often used as "markers" to indicate a point in the data structure where special processing is to take place. It is unlikely, though, that you will use empty tags in the normal course of XML data structuring, where elements nearly always enclose other elements. … en pleine expansion 17/04/2017 Transparent 16 Langages & Documents ESSI - 2 – Paul Franchi 16

17 l'Univers XML … … en pleine expansion CSS DOM <?xml ?>
17/04/2017 l'Univers XML … DOM CSS XML based Languages XHTML SVG MATHML SMIL WSDL SOAP RSS RDF <?xml ?> … un metamodèle "pivot" universel  … des processeurs compatibles XSD XPath XLink XSL Processors XML XSL-FO XQuery XForms The Data Section Following the prolog is the XML data structure for the information content of the document. Appearing here are the XML tags signifying the data nodes and data elements that compose the hierarchy of information. Although there is great flexibility in naming and organization XML tags, there are fixed rules for doing so. Opening/Closing Tags One of these syntactical rules is that all XML elements must have opening and closing tags. This rule can be followed in two ways. For XML elements that enclose data or enclose child elements there must be an opening tag along with a paired closing tag. These tags are in the following format, <tagname>   ... </tagname> where the closing tag includes the forward slash character (/) preceding the tag name. You are probably familiar with this syntax from XHTML where, for example, a paragraph is enclosed inside <p>...</p> tags. For XML elements that do not enclose data or child elements a single start/end tag can be used. These empty tags are in the format, <tagname/> where the single tag includes a forward slash following the tag name. Again, you are familiar with this format in XHTML through the <br/> tag and other similar non-paired tags. Empty tags are often used as "markers" to indicate a point in the data structure where special processing is to take place. It is unlikely, though, that you will use empty tags in the normal course of XML data structuring, where elements nearly always enclose other elements. XUL … en pleine expansion 17/04/2017 Transparent 17 Langages & Documents ESSI - 2 – Paul Franchi 17

18 XML - Le rôle des balises
17/04/2017 XML - Le rôle des balises Délimiter le texte (ou éléments) Ordonner les éléments entre eux Hiérarchiser par imbrication Créer des liens et autre relations entre données Associer une fonction logique <sujet> Rappel </sujet> <note> <from > </from> <to> </to> </note> <version auteur='PFZ' date=' 2011' /> 17/04/2017 Transparent 18 Langages & Documents ESSI - 2 – Paul Franchi

19 Un catalogue de CD xml Les exemples du W3C => CSS
<?xml version="1.0" encoding="ISO " ?> <!– pour les accents --> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CATALOG> => CSS

20 XML - Norme Lexicale 17/04/2017 les commentaires sont de la forme <!- - tout_sauf > les balises "xml" (Prologue) sont de la forme <?xml tout_sauf < > & ?> les DTD internes sont de la forme <?DOCTYPE tout_sauf > > les autres balises (Eléments) sont de 3 formes: <NOM attribs > <NOM attribs /> </NOM > les CHAINES sont de la forme " tout_sauf " < > & " ou ' tout_sauf ' < > & ' les NOMs sont de la forme [a-zA-Z_-][a-zA-Z0-9_-]* éventuellement précédé d'un préfixe (qualification de "Namespace") de la même forme séparé par : les NOMs sont sensibles à la casse les Attributs sont de la forme NOM = chaines les sections <![CDATA[ ]]> pour du texte non analysé (sauf ]] ) le format est "libre" : les " " \t \r \n sont permis partout sauf dans les balises entre < ou </ et NOM le reste (le texte pur) ne comprend pas < > & codés par < > & 17/04/2017 Transparent 20 Langages & Documents ESSI - 2 – Paul Franchi

21 17/04/2017 XML - Norme Syntaxique Un source XML est dit "Bien Formé" (syntaxe) ssi il est structuré suivant le schéma: un Prologue une Arborescence d'Eléments des Commentaires et Instructions de Traitement (facultatifs) dans le prologue ou l'Arborescence ( <!|CDATA[ ]]> ) le Prologue se compose: d'une balise de déclaration <? xml ?> puis en option : d'Instructions de Traitement (stylesheet, par ex) d'une déclaration de Type de Document (DTD) de commentaires <! > le source forme un système de textes, de balises, de commentaires et d'instructions de traitement bien parenthèsé et enraciné Bien Formé # Valide 17/04/2017 Transparent 21 Langages & Documents ESSI - 2 – Paul Franchi

22 Valide => Bien Formé
17/04/2017 XML - Validation Un source XML est dit "Valide" ssi il est "Bien Formé" il est conforme aux règles définies par: une DTD ou un schéma XSD ou grammaires NG Relax Des erreurs dans la syntaxe XML stoppent le processus d'exécution de l'application associée au source XML (affichage, transformations, etc.) (contrairement à HTML) Outils de validation: IE, FF, DW, Editix Via loadXML()(script) et le DOM xmllint/libxml Valide => Bien Formé 17/04/2017 Transparent 22 Langages & Documents ESSI - 2 – Paul Franchi

23 Navigateurs ("Web Browsers")
Historiques: Mosaîc, I.E. Netscape liste de navigateurs sur Wikipédia Internet Explorer 6 => 9 ss Win, Linux HTML 4.01, XHTML 1.0, XML, CSS2, DOM Safari 3 => 5 ss Mac OS, Win Mozilla ss Win, Mac OS, Linux Firefox => => 4.0 => ?.0 HTML 4.01, XHTML 1.0, XML, CSS2+, DOM Opera 11 ss Win, Mac OS, Linux Konqueror ss KDE Google Chrome 13 Un navigateur supporte la consultation du Web (affichage des ressources). Il comporte: une couche réseau avec des protocoles: http: https: ftp:d'accès à des adresses URL. un moteur de rendu: interpréteur html, css, xml, xsl, script, java, etc. une interface utilisateur: menus, "widgets", historique, signets un gestionnaire de "plugins" pour divers formats 17/04/2017 Transparent 23 ESSI - 2 – Paul Franchi

24 Espaces de Noms "Namespaces"
17/04/2017 Espaces de Noms "Namespaces" Un mécanisme qui répond à 2 objectifs résoudre les conflits potentiels issus de sources multiples (documents XML et HTML): Noms surchargés (cf Compilation: Visibilité & Portée) regrouper (logiquement) des définitions à réutiliser Modules ou Classes Importation: Masquage & Héritage <?xml version="1.0" ?> <!-- Doc 2 --> <table> </table> <?xml version="1.0" ?> <!-- Doc 1 --> <table> </table> =>préfixes <?xml version="1.0" ?> <!-- fusion de Doc 1 & 2 --> <table> <!-- ?? --> </table> <table> </table> <table> </table> =>U.R.I. 17/04/2017 Transparent 24 Langages & Documents ESSI - 2 – Paul Franchi

25 =>préfixes Conflits de Noms Par Importations Multiples
17/04/2017 Conflits de Noms Par Importations Multiples <?xml version="1.0" ?> <!-- style HTML --> <table> <tr> <td> ROUGE </td> <td> VERT </td> <td> BLEU</td> </tr> </table> <?xml version="1.0" ?> <!-- pour un EDT --> <table> <cours> <jour> Lundi </jour> <cren> 8h30-9h30</cren> </cours> </table> <?xml version="1.0" ?> <!-- fusion de documents --> <table> <!-- ?? --> </table> =>préfixes 17/04/2017 Transparent 25 Langages & Documents ESSI - 2 – Paul Franchi

26 Nom Préfixé ou Qualifié ("QName")
17/04/2017 Nom Préfixé ou Qualifié ("QName") Résolution des Conflits par des Préfixes <?xml version="1.0" ?> <!-- style HTML: préfixe h --> <h:table> <h:tr> <h:td> ROUGE </h:td> <h:td> VERT </h:td> <h:td> BLEU</h:td> </h:tr> </h:table> <?xml version="1.0" ?> <!-- pour EDT: préfixe e --> <e:table> <e:cours> <e:jour> Lundi </e:jour> <e:cren> 8h30-9h30</e:cren> </e:cours> </e:table> <?xml version="1.0" ?> <!-- fusion de documents --> <h:table> … </h:table <e:table> … </e:table> =>namespaces 17/04/2017 Transparent 26 Langages & Documents ESSI - 2 – Paul Franchi

27 Pas vraiment un espace Espaces de Noms & URI URL optionelles #
17/04/2017 Espaces de Noms & URI "Uniform Resource Identifier" (Clé universelle) "lexical" de type URL pour nommer un Espace de Noms chaque préfixe de nom qualifié est associé à un URI unique Espaces de Noms des dialectes XML <!-- pour XHTML & MathML --> xs: <!-- préfixe des schémas XSD > xsl: <!-- préfixe des transformations XSL --> xlink: <!-- préfixe de XLink --> Portée Pas vraiment un espace URL optionelles # préfixes lexicaux <?xml version="1.0" ?> <h:table xmlns:h= " > </h:table> "table" compris 17/04/2017 Transparent 27 Langages & Documents ESSI - 2 – Paul Franchi

28 Espaces de Noms "Namespace"
17/04/2017 Espaces de Noms "Namespace" Attribut xmlns avec prefix xmlns:namespace-prefix="namespaceURI" url (url optionelles) préfixes lexicaux <?xml version="1.0" ?> <!-- en XHTML: préfixe xh --> <xh:table xmlns:xh= " <xh:tr> <xh:td> ROUGE </xh:td> <xh:td> VERT </xh:td> <xh:td> BLEU</xh:td> </xh:tr> </xh:table> <?xml version="1.0" ?> <!-- pour EDT: préfixe e --> <e:table xmlns:e= " > <e:cours> <e:jour> Lundi </e:jour> <e:cren> 8h30-9h30</e:cren> </e:cours> </e:table> la "vraie" balise <table> de (X)HTML 17/04/2017 Transparent 28 Langages & Documents ESSI - 2 – Paul Franchi

29 Espaces de Noms "Namespace"
préfixes lexicaux ajoutés implicitement par le parseur XML Attribut xmlns par défaut xmlns = "namespaceURI" Utilisations: XHTML, XLINK, XSD, XSL et dialectes Attribut xmlns par défaut xmlns = "namespaceURI" Utilisations: XHTML, XLINK, XSD, XSL et dialectes <?xml version="1.0" ?> <!-- en XHTML --> <table xmlns= " <tr> <td> ROUGE </td> <td> VERT </td> <td> BLEU</td> </tr> </table> <?xml version="1.0" ?> <!-- pour EDT --> <table xmlns= " <cours> <jour> Lundi </jour> <cren> 8h30-9h30</cren> </cours> </table> 17/04/2017 Transparent 29

30 Uniform Resource Identifier (URI)
17/04/2017 Uniform Resource Identifier (URI) a URI is a string of characters which identifies an Internet Resource. The most common URI is the Uniform Resource Locator (URL) which identifies an Internet domain address. les URI sont des clés "syntaxiques" (les URL permettent de définir une clé universelle). les URI peuvent avoir un sens pour une application (interprétation à l'exécution pour un Navigateur, par ex.) les préfixes sont purement "lexicaux" (libres et sans signification) XSD – <xs:schema xmlns:xs=" XSLT – <xsl:stylesheet xmlns:xsl=" XHTML – <html xmlns:" SVG – <svg xmlns:" XLINK – <liens xmlns:xlink=" SOAP – <soap xmlns:soap=" Dublin-Core – <dc:title xmlns:dc=" 17/04/2017 Transparent 30 Langages & Documents ESSI - 2 – Paul Franchi

31 Espaces de Noms par Défaut
17/04/2017 Espaces de Noms par Défaut Scalable Vector Graphics <?xml version="1.0" ?> <!-- Scalable Vector Graphics --> <svg xmlns= " width="10cm" height="8cm" > <rect x="100" y="100" width="50" height="70" /> <ellipse rx="100" ry="200" /> </svg> Par défaut (de préfixe) svg, rect, ellipse sont dans l'URI mais les attributs: x, y, width, height, rx, ry, restent dans l'espace local 17/04/2017 Transparent 31 Langages & Documents ESSI - 2 – Paul Franchi

32 Portée des Espaces de Noms Multiples
17/04/2017 Portée des Espaces de Noms Multiples <?xml version="1.0" ?> <!-- SVG + XHTML + XLink --> <html xmlns= " xmlns:xlink= " > <body> <h1> Rectangle et Ellipse </h1> <svg xmlns= " width="21cm" height="29cm"> <rect x="10" y="10" width="50" height="70" /> <ellipse rx="100" ry="200" /> </svg> <p xlink:type="simple" xlink:href="svgDoc.html" > Pour en savoir plus sur SVG </p> </body> </html> URI "SVG" URI "XHTML" URI "XLink" ici les attributs préfixés sont dans l'espace Xlink 17/04/2017 Transparent 32 Langages & Documents ESSI - 2 – Paul Franchi

33 Quelques Dialectes, parmi des centaines
17/04/2017 Quelques Dialectes, parmi des centaines SMIL – pour le Multimédia CML – pour les formules chimiques ATOM, RSS – pour les flux (syndication) RDF – pour les ressources WML – pour les mobiles (Wap) MusicML – pour la musique SVG – pour les graphiques vectoriels MathML – pour les formules mathématiques XUL – pour les Interfaces Mozilla WordML – pour Office KML – Google Earth & Maps Un dialecte XML définit un ensemble (Langage) de documents XML valides par rapport à une DTD ou un schéma XSD (les documents sont donc bien formés) 17/04/2017 Transparent 33 Langages & Documents ESSI - 2 – Paul Franchi

34 SVG - Scalable Vector Graphics
17/04/2017 SVG - Scalable Vector Graphics <?xml version="1.0" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="100%" height="100%" version="1.1" xmlns=" <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/> </svg> URI "SVG" ici sans prefix 17/04/2017 Transparent 34 Langages & Documents ESSI - 2 – Paul Franchi

35 MathML: insertion dans XML
17/04/2017 MathML: insertion dans XML <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="monMathML.css"?> <Racine> <Titre> Formule sous MathML </Titre> <Math xmlns = " "> <mroot> <msup> <mfrac> <mi>A*B</mi> <mi>b</mi></mfrac> <mn> 10 </mn> </msup> <mi>x</mi> </mroot> </Math> </Racine> Espace de noms "Namespace" ici sans prefix avec XSL 17/04/2017 Transparent 35 Langages & Documents ESSI - 2 – Paul Franchi

36 DOCTYPE obligatoire ss IE sinon Mode QUIRK !
17/04/2017 XHTML - Introduction Une version « Xmlisée » de HTML 4.0 Recommandation W3C (Janvier 2000) au remplacement de HTML <html xmlns=‘‘ XHTML 1.0: Compatibilité (presque) totale avec HTML 4.0 les documents doivent être « bien formés » au sens XML racine <html> </html> unique marqueurs de fermeture obligatoires: </p> </li> </td> ou <b /> et <img ….. />, avec un espace devant / balises bien emboîtées (parenthèsées) nom et attribut de balise en minuscule (sensibilité à la casse) valeurs d’attributs entre ‘‘ ’’ et valeurs explicites l’attribut id remplace name XHTML 1.0: Trois DTDs de validation strict transitional framseset DOCTYPE obligatoire ss IE sinon Mode QUIRK ! => DTD 17/04/2017 Transparent 36 Langages & Documents ESSI - 2 – Paul Franchi

37 DOCTYPE obligatoire ss IE sinon Mode QUIRK !
17/04/2017 XHTML- format Source requis en XHTML1.0 Conseils d’utilisation protéger tous les caractères spéciaux: &amp &lt &gt séparer les scripts et les styles <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title> le Titre du Document </title> <!-- les styles et les scripts (externalisés, c'est mieux) --> </head> <body> le Corps du Document </body> </html> DOCTYPE obligatoire ss IE sinon Mode QUIRK ! 17/04/2017 Transparent 37 Langages & Documents ESSI - 2 – Paul Franchi

38 XHML: insertion dans XML
17/04/2017 XHML: insertion dans XML <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="xhtml.css"?> <racine> <titre> XHTML et XML</titre> <html xmlns = " " > <body> <h1> Liens sous XHTML</h1> <p> <a href=" "> Visit W3C Tutorial </a> </p> <a href=" ">chez Moi </a> </body> </html> </racine> namespaces sous la balise, sans prefix .xhtml obligatoire pour I.E. 17/04/2017 Transparent 38 Langages & Documents ESSI - 2 – Paul Franchi

39 .xml .css .dtd .dtd .dtd .xsd XML "Basic Know Hows" XML Basics
17/04/2017 XML "Basic Know Hows" .xml XML Basics XML & Styling: CSS XML Dialects: MathML, SVG Document Definition: DTD, XSD .css .dtd .dtd .dtd .xsd 17/04/2017 Langages & Documents ESSI - 2 – Paul Franchi 39

40 Chap VIII - XML Processeurs "Advanced"
Tree structure of XML XPath XPointer XLink XInclude, XForms, XQuery Techniques XML XML & CSS multilpes XML & DTD CDATA DOM XML & AJAX MetaDatss

41 Tree Structure of an XML Document
17/04/2017 from XML in a nutshell 7 types of Nodes The root node Element nodes Text nodes Attribute nodes Comment nodes Processing instruction nodes Namespace nodes - CDATA, DOCTYPE, are NOT in the tree - attributes are NOT children - Namespaces are not selectable 17/04/2017 Transparent 41 Langages & Documents ESSI - 2 – Paul Franchi

42 XML & XPath– Modèle Arborescent de Document
17/04/2017 XML & XPath– Modèle Arborescent de Document Les documents XML sont traités comme des arborescences avec 7 types de nœuds: nœud Racine de l'arborescence du document # racine du XML a comme fille la racine du source XML nœud Elément délimité par les balises nœud Attribut attaché à un Nœud Elément, mais sans relation nœud Commentaire délimité par <!-- et --> nœud "xmlns" - déclaration d'Espace de Noms un pour chaque Espace de Nom actif (déclaré ou défaut) nœud "processing-instruction" délimité par <? et ?> nœud Texte de type #PCDATA XPath cours Carton 17/04/2017 Transparent 42 Langages & Documents ESSI - 2 – Paul Franchi

43 XPath - Exemple d'expressions
17/04/2017 XPath - Exemple d'expressions Node Set XPath 1.0 vs 2.0 Les expressions XPath permettent de sélectionner un noeud (ou un ensemble) dans un document Xml <?xml version="1.0" encoding="UTF-8"?> <bookstore> <book> <title lang="eng"> Harry Potter </title> <price>29.99</price> </book> Learning XML <price>39.95</price> </bookstore> Path Expression Sélection / la racine du document # bookstore bookstore All the child nodes of the "bookstore" element /bookstore The root element "bookstore" Note: If the path starts with a slash ( / ) it always represents an absolute path to an element! bookstore/book All "book" elements that are children of "bookstore" //book All "book" elements no matter where they are in the document bookstore//book All "book" elements that are descendant of the "bookstore" element, no matter where they are under the "bookstore" All attributes that are named "lang" 17/04/2017 Transparent 43 Langages & Documents ESSI - 2 – Paul Franchi

44 XPath – Indicateurs de Relation - "axis"
17/04/2017 XPath – Indicateurs de Relation - "axis" relativement au Nœud Courant  child:: les nœuds fils (axe par défaut) attribute:: les attributs parent:: le nœud parent descendant:: les descendants - ni attributs, ni NS ancestor:: les ascendants - ni attributs, ni NS self:: le nœud courant lui-même preceding-sibling:: les frères gauches following-sibling:: les frères droits preceding:: les précédants ds l'ordre - ni asc, ni attr following:: les suivants ds l'ordre - ni desc, ni attr descendant-or-self:: le nœud contexte et ses descendants ancestor-or-self:: le nœud contexte et ses ascendants namespace:: les espaces nominaux 17/04/2017 Transparent 44 Langages & Documents ESSI - 2 – Paul Franchi

45 XPath – Axes et Abréviations
17/04/2017 XPath – Axes et Abréviations . self::node() .. parent::node() Axe par défaut child:: /A /child::A A/* child::A/child::* @att attribute::att @* attribute::* child::A/attribute::* Etape par défaut descendant-or-self:: // /descendant-or-self::node()/ .// self::node()/descendant-or-self::node()/ A//B child::A/descendant-or-self::node()/child::B 17/04/2017 Transparent 45 Langages & Documents ESSI - 2 – Paul Franchi

46 XPath – Filtres (ou Déterminants)
17/04/2017 XPath – Filtres (ou Déterminants) text() les nœuds de type Texte comment() les nœuds de type Commentaire * les nœuds de type Element (sauf axe attribute & namespace) node() tous les types de nœuds processing-instruction() un nœud de type "instruction" exemples //comment() les commentaires du document /comment() les commentaires de la racine /A/descendant::text() les textes d'un descendant de /A /A//text() les textes sous /A/ 17/04/2017 Transparent 46 Langages & Documents ESSI - 2 – Paul Franchi

47 XPath – Prédicats /A/B/child::node()[position()=1]
17/04/2017 XPath – Prédicats /A/B/child::node()[position()=1] les premiers fils de /A/B /A/B/child::node()[1] idem /A/B ] les B avec un attribut att1 /A/B ] idem avec att1='a1' /A/B and position()=last() ] Idem avec B en dernière position Et d'autres fonctions XPath 1.0 & 2.0 … communes à XSLT, XQuery /A/B [ 'a1') ] att1 qui contient 'a1' /A/B [ 'a1') ] att1 qui commence par 'a1' 17/04/2017 Transparent 47 Langages & Documents ESSI - 2 – Paul Franchi

48 XPath – Interrogations sur une Base Documentaire
17/04/2017 XPath – Interrogations sur une Base Documentaire //TITRE tous les titres du document /FILMs/FILM [TITRE='Alien'] tous les FILM à titre"Alien" /bookstore/book[ price>35 ]/title tous les 'title' des 'book' de 'bookstore' avec un 'price' > 35 Et d'autres fonctions XPath 1.0 & 2.0 … communes à XSLT, XQuery 17/04/2017 Transparent 48 Langages & Documents ESSI - 2 – Paul Franchi

49 XPath + DOM avec JavaScript
17/04/2017 XPath + DOM avec JavaScript mozxpath .js <script type="text/javascript"> //xpath une expression de chemin XPATH // I.E var xmlDoc=new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load ("cdcatalog.xml") ; firstFit=xmlDoc.selectNodes(xpath)[0]; // Mozilla xmlDoc=document.implementation.createDocument("","",null); xmlDoc.load("cdcatalog.xml") firstFit= document.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null)[0]; attValue=firstFit.getAttribute('someAtt'); //exemple </script> I.E. only Code Partiel 17/04/2017 Transparent 49 Langages & Documents ESSI - 2 – Paul Franchi

50 XLink – Xml Linking Language
17/04/2017 XLink – Xml Linking Language Standard W3C d'expression de liens dans un document Xml avantages comparés aux liens Html tout élément d'un document XML peut se comporter comme un lien les liens Xlink utilisent XPointer et XPath pour référencer un emplacement spécifique (fragment) à l’intérieur d’un document peuvent importer du texte ou balisage XLink supporte des liens simples (type HTML) et des liens étendus (multiples) pour lier plusieurs ressources ensemble. 17/04/2017 Transparent 50 Langages & Documents ESSI - 2 – Paul Franchi

51 XLink – Exemples Lien sur le Web Lien local prefix optionnel
17/04/2017 XLink – Exemples Lien sur le Web <ref xmlns:xlink=‘‘ xlink: type=‘‘simple’’ xlink: href=‘‘ xlink: show=‘‘ new’’ xlink: actuate=‘‘onRequest ’’ /> W3C </ref> Lien local <schema xlink: href=‘‘Schemas/schema1.png’’ xlink: show=‘‘ embed’’ xlink: actuate=‘‘onLoad ’’ /> 3 mais pas 4 ? prefix optionnel Espace de noms "Namespace" 17/04/2017 Transparent 51 Langages & Documents ESSI - 2 – Paul Franchi

52 XLink: un exemple d'insertion dans XML
17/04/2017 XLink: un exemple d'insertion dans XML <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="xlink.css"?> <racine> <titre> Des Liens sous XML avec Xlink </titre> <homepages xmlns:xlink = " " > <homepage xlink:type="simple" xlink:href=" ">Visit W3Schools</homepage> xlink:href=" ">Visit Paul Franchi</homepage> </homepages> </racine> namespaces sous la balise, avec prefix 3 mais pas 4 ? 17/04/2017 Transparent 52 Langages & Documents ESSI - 2 – Paul Franchi

53 XPointer – Xml Pointer Language
17/04/2017 XPointer – Xml Pointer Language Une extension des URL pour préciser un élément dans un document Xml (parties spécifiques ou fragments) en utilisant des XPath expressions version Html ancre interne <a name= "XPointer" ..cette page..</a> <a id= "XPointer" ..cette page..</a> référence externe <a href=" version Xml localisation des éléments du document via XPath syntaxe d’un pseudo chemin avec /1/2 correspondant au chemin Xpath: /child::*[1]/ child::*[2] 17/04/2017 Transparent 53 Langages & Documents ESSI - 2 – Paul Franchi

54 XML – XQuery What is XQuery?
17/04/2017 XML – XQuery What is XQuery? XQuery is the language for querying XML data XQuery for XML is like SQL for databases XQuery is built on XPath expressions XQuery is supported by all major databases XQuery is a W3C Recommendation for $x in doc("books.xml")/bookstore/book where $x/price>30 order by $x/title return $x/title 17/04/2017 Transparent 54 Langages & Documents ESSI - 2 – Paul Franchi

55 17/04/2017 XML – XForms <xforms> <model> <instance> <person><fname/><lname/> </person> </instance> <submission id="form1" method="get" action="submit.asp"/> </model> <input ref="fname"> <label>First Name</label> </input> <input ref="lname"> <label>Last Name</label> </input> <submit submission="form1"> <label>Submit</label> </submit> </xforms> What Is XForms? XForms is the next generation of HTML forms XForms is richer and more flexible than HTML forms XForms will be the forms standard in XHTML 2.0 XForms is platform and device independent XForms separates data and logic from presentation XForms uses XML to define form data XForms stores and transports data in XML documents XForms contains features like calculations and validations of forms XForms reduces or eliminates the need for scripting XForms is a W3C Recommendation 17/04/2017 Transparent 55 Langages & Documents ESSI - 2 – Paul Franchi

56 XML – Autres Technologies (W3C et al.)
17/04/2017 XML – Autres Technologies (W3C et al.) XPointer Point, Intervalle: pour spécifier des fragments de document XML XInclude pour "assembler" des documents XML ATOM RSS WSDL etc. 17/04/2017 Transparent 56 Langages & Documents ESSI - 2 – Paul Franchi

57 Techniques XML Style SVG DTD XSLT AJAX XSD as MetaData
17/04/2017 Techniques XML Style CSS multiples DTD interne externe validation XSD DOM & JS & CDATA parsing & validation programmation DOM styleSheets[] XPath Fragments & XSLT SVG animation XSLT AJAX as MetaData RDF SPRY PHP XUL 17/04/2017 Transparent 57 Langages & Documents ESSI - 2 – Paul Franchi 57

58 XML & CSS multiples title Obligatoire
17/04/2017 XML & CSS multiples title Obligatoire <?xml version="1.0" encoding="ISO "?> <?xml-stylesheet title="Style de base" href="cd_catalog.css" type="text/css"?> <?xml-stylesheet title="Planche" rel="alternate" href="cd_catalog_2.css" type="text/css"?> <?xml-stylesheet title="Spirale" rel="alternate" href="cd_catalog_3.css" type="text/css"?> <CATALOG> ... / ... </CATALOG> 17/04/2017 Transparent 58 Langages & Documents ESSI - 2 – Paul Franchi 58

59 XML & DTD interne <?xml version="1.0" encoding="iso-8859-1"?>
17/04/2017 XML & DTD interne <?xml version="1.0" encoding="iso "?> <!DOCTYPE note[ <!ENTITY nbsp " " ><!ENTITY eacute "é" ><!ENTITY egrave "è" > <!ELEMENT note (to+, from, heading?, body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> <!- -<!ELEMENT note ANY> --> <note> <!-- <erreur> ERREUR de balise: BIEN FORMé, mais non VALIDE </erreur> <to>Vous</to><to>Lés       Autrès</to> <from>Moi</from> <heading>Rappel</heading> <body> N'oubliez pas de rendre vos TPs !</body> </note> 17/04/2017 Transparent 59 Langages & Documents ESSI - 2 – Paul Franchi 59

60 XML & DTD externe <!DOCTYPE note SYSTEM "note.dtd">
17/04/2017 XML & DTD externe <?xml version="1.0" encoding="iso "?> <!DOCTYPE note SYSTEM "note.dtd"> <note> <!-- <erreur> ERREUR de balise: BIEN FORMé, mais non VALIDE </erreur> --> <to>Vous</to><to>Lés       Autrès</to> <from>Moi</from> <heading>Rappel</heading> <body> N'oubliez pas de rendre vos TPs ! </body> </note> <!ELEMENT note (to+, from, heading?, body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> <!ENTITY nbsp " " > <!ENTITY eacute "é" > <!ENTITY egrave "è" > 17/04/2017 Transparent 60 Langages & Documents ESSI - 2 – Paul Franchi 60

61 DTD – Validation => DOM Avec le W3C Validator on-line
17/04/2017 DTD – Validation Avec le W3C Validator on-line Avec xmllint ss libxml Avec le parseur XML sous DOM load(), loadXML() pour fichiers, chaînes XML <!-- script sous IE 5.0 et + --> <script type="text/javascript"> var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.validateOnParse="true" xmlDoc.load("note_dtd_error.xml") document.write("<br>Error Code: ") document.write(xmlDoc.parseError.errorCode) document.write("<br>Error Reason: ") document.write(xmlDoc.parseError.reason) document.write("<br>Error Line: ") document.write(xmlDoc.parseError.line) </script> => DOM 17/04/2017 Transparent 61 Langages & Documents ESSI - 2 – Paul Franchi

62 XML & XSD <note xmlns="si4/langDoc"
17/04/2017 XML & XSD <?xml version="1.0" encoding="iso "?> <note xmlns="si4/langDoc" xmlns:xsi=" xsi:schemaLocation="si4/langDoc note.xsd"> <!-- <erreur> BIEN FORMé, mais non VALIDE </erreur> --> <to>Vous</to> <to>Les Autres</to> <from>Moi</from> <heading>Rappel</heading> <body> N'oubliez pas de rendre vos TPs ! </body> </note> <?xml version="1.0" encoding="iso "?> <xs:schema xmlns:xs=" targetNamespace= "si4/langDoc" xmlns="si4/langDoc" elementFormDefault="qualified" > <xs:element name="note"> <xs:complexType> <xs:sequence> <xs:element name="to" type="xs:string" maxOccurs="unbounded"/> <xs:element name="from" type="xs:string"/> <xs:element name="heading" type="xs:string" minOccurs="0"/> <xs:element name="body" type="xs:string"/> <xs:element name="erreur" type="xs:string"/> <!– <xs:element name="erreur" type="xs:string"/> --> </xs:sequence> </xs:complexType> </xs:element> </xs:schema> 17/04/2017 Transparent 62 Langages & Documents ESSI - 2 – Paul Franchi 62

63 DOM - Document Object Model
17/04/2017 DOM - Document Object Model "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." La spécification Dom définit une interface abstraite (type API Java) pour standardiser les fonctionnalités d’accès et de manipulation d’un document vu comme une arborescence («tree structure»). Création d’éléments Parcours et accès aux éléments Edition: déplacer, copier, supprimer, etc. Modification des attributs Dom (level 1/2/3): Core DOM , XML DOM, HTML DOM, Sax : une implémentation (light) évènementielle du Dom W3SChools XML DOM Doc Parseur XML Application Dom 17/04/2017 Transparent 63 Langages & Documents ESSI - 2 – Paul Franchi

64 DOM - "Parser" un document XML(1)
17/04/2017 DOM - "Parser" un document XML(1) Script en HTML sous I.E. : <html> <head> <script type="text/javascript"> var xmlDoc function loadXML() { //load a xml file // code for IE if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.validateOnParse = "false" // "true" pour valider avec une DTD xmlDoc.load("note.xml"); getmessage() } // continue sur le suivant 17/04/2017 Transparent 64 Langages & Documents ESSI - 2 – Paul Franchi

65 DOM - "Parser" un document XML(2)
17/04/2017 DOM - "Parser" un document XML(2) Script en HTML sous Mozilla : // suite du précédent // code for Mozilla, etc. else if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("","",null); xmlDoc.load("note.xml"); xmlDoc.onload =getmessage(); } else { alert('Your browser cannot handle this script'); } } // fin de loadXML() // continue sur le suivant 17/04/2017 Transparent 65 Langages & Documents ESSI - 2 – Paul Franchi

66 Exemple: viewNote.html
17/04/2017 DOM - Programmation Exemple: viewNote.html function getmessage() { document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].firstChild.nodeValue document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].firstChild.nodeValue document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue } // fin de getmessage() </script> </head> <body onload="loadXML()"> <div id="to" style="background-color:pink"> ……. </div> <div id="from" style="background-color:pink"> ……. </div> <div id="message" style="background-color:pink"> ……. </div> </body> </html> 17/04/2017 Transparent 66 Langages & Documents ESSI - 2 – Paul Franchi

67 XML & CDATA (script JS interne)
17/04/2017 XML & CDATA (script JS interne) <?xml version="1.0" standalone="no"?> <dateur> <titre> Date/Time: JS en XML</titre> <script xmlns= type="text/javascript" > <![CDATA[ function ANIM(){ .. ./ } function INIT() { .... / ....} ]]> </script> <body xmlns=" onload='INIT()'> <box id="date">jeudi 10 avril 2008</box> <box id="heures">9</box> <box id="minutes">43</box> <box id="secondes">17</box> </body> </dateur> protège le script utilise le DOM pour exécuter le script 17/04/2017 Transparent 67 Langages & Documents ESSI - 2 – Paul Franchi 67

68 DOM + styleSheets[ ] <script type="text/javascript">
17/04/2017 DOM + styleSheets[ ] <script type="text/javascript"> <![CDATA[ function style(n) { var out = "Stylesheet " + n + "<br />"; out += "title = '"+ document.styleSheets[n].title + "'<br />"; out += "href = '" + document.styleSheets[n].href + "'<br />"; out += "type = '" + document.styleSheets[n].type + "'<br />"; out += "disabled = '" + document.styleSheets[n].disabled + "'<br />"; document.getElementById('OUT').innerHTML+="<p>"+out+"</p>" ; } function dis() { document.styleSheets[0].disabled = !document.styleSheets[0].disabled; document.styleSheets[1].disabled = !document.styleSheets[1].disabled; ]]> </script> 17/04/2017 Transparent 68 Langages & Documents ESSI - 2 – Paul Franchi

69 SVG+ JS+DOM - Animation: "Clock"
17/04/2017 SVG+ JS+DOM - Animation: "Clock" <svg viewBox=" " xmlns=" version="1.1" xmlns:xlink=" > <script type="text/javascript"> <![CDATA[ function $(id) {return document.getElementById(id)}; var centre=$("small"); function ANIM() { // mise à l'heure a=new Date(); h=a.getHours()%12; m=a.getMinutes(); s=a.getSeconds(); m+=s/60; h+=m/60; // ring centre.setAttribute("fill", "grey"); if (s%5==0) {centre.setAttribute("fill", "green");} if (s%15==0) {centre.setAttribute("fill", "red");} // aiguilles $("heures").setAttribute("x2", Math.cos((h-3)/6*pi)*25+50); $("heures").setAttribute("y2", Math.sin((h-3)/6*pi)*25+50); $("minutes").setAttribute("x2", Math.cos((m-15)/30*pi)*35+50); $("minutes").setAttribute("y2", Math.sin((m-15)/30*pi)*35+50); $("secondes").setAttribute("x2", Math.cos((s-15)/30*pi)*45+50); $("secondes").setAttribute("y2", Math.sin((s-15)/30*pi)*45+50); setTimeout("ANIM()", 900); // <1000 = 1 sec } ANIM(); // appel de l\'animation ]]> </script> </svg> <!-- le décor de l'horloge --> . <g stroke="black"> <line x1="50" id="secondes" /> <line x1="50" id="minutes" /> <line x1="50" id="heures" /> </g> <g stroke="black" id="marques"> <circle cx="50" cy="50" r="9" id="small"/> </g> Code Partiel 17/04/2017 Transparent 69 Langages & Documents ESSI - 2 – Paul Franchi

70 Code Partiel XPath + DOM avec JS
17/04/2017 XPath + DOM avec JS <html> <body> <script type="text/javascript"> //xpath une expression de chemin XPATH // I.E var xmlDoc=new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load ("cdcatalog.xml") ; firstFit=xmlDoc.selectNodes(xpath)[0]; // Mozillla xmlDoc=document.implementation.createDocument("","",null); xmlDoc.load("cdcatalog.xml") firstFit=document.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null)[0]; attValue=firstFit.getAttribute('someAtt'); //exemple </script> </body> </html> Code Partiel 17/04/2017 Transparent 70 Langages & Documents ESSI - 2 – Paul Franchi

71 Code Partiel JS + DOM + XSLT <script type="text/javascript">
17/04/2017 JS + DOM + XSLT function transform (xml, xsl, id) { try { // navigateur basé sur Gecko if (window.XSLTProcessor) { var fragment; var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); fragment = xsltProcessor.transformToFragment(xml, document); var target = document.getElementById(id); target.innerHTML = fragment.firstChild.innerHTML ; // pfz //target.appendChild(fragment); //orig //document.replaceChild(target, fragment); //orig // ActiveX pour Internet Explorer } else if (window.ActiveXObject) { target.innerHTML = xml.transformNode(xsl); } } catch (e) {return e;} <script type="text/javascript"> var XML= loadXML(xmlURL); var XSL= loadXML(xslURL); function theJobTe() { transform (XML, XSL, 'ICI'); .... } </script> Code Partiel 17/04/2017 Transparent 71 Langages & Documents ESSI - 2 – Paul Franchi

72 XML + AJAX <script type="text/javascript"> <![CDATA[
17/04/2017 <script type="text/javascript"> <![CDATA[ var xmlhttp; function loadXMLDoc(path) { xmlhttp=null; if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc. netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5, IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { xmlhttp.onreadystatechange=onResponse; xmlhttp.open("GET", path, true); xmlhttp.send(null); } else { alert("Your browser does not support XMLHTTP."); } } // à suivre XML + AJAX 17/04/2017 Transparent 72 Langages & Documents ESSI - 2 – Paul Franchi

73 Code Partiel XML + AJAX // suite du précédent function onResponse(){
17/04/2017 XML + AJAX // suite du précédent function onResponse(){ if(xmlhttp.readyState!=4) return; if(xmlhttp.status!=0 && xmlhttp.status!=200) { alert("Problem retrieving XML data"); return; } } // traitement du texte source var SOURCE = xmlhttp.responseText ; … // traitement du xml var XML =xmlhttp.responseXML ; ]]> </script> Code Partiel 17/04/2017 Transparent 73 Langages & Documents ESSI - 2 – Paul Franchi

74 SMIL pour le Multimédia RDF XML et PHP/SQL XML/RDF et SPRY, XUL,
17/04/2017 XML as MetaData XMI pour UML WSDL pour SOAP/RSS SMIL pour le Multimédia RDF XML et PHP/SQL XML/RDF et SPRY, XUL, 17/04/2017 Transparent 74 Langages & Documents ESSI - 2 – Paul Franchi 74

75 XML metadata pour EXEMPLES/
17/04/2017 XML metadata pour EXEMPLES/ <?xml version='1.0' encoding='ISO '?> <?xml-stylesheet href="docExShow.xsl" type="text/xsl" ?> <Doc base ="../"> ****************** BIB *********** <Exemples dossier='BIB' base='BIB/' auteur='pfz' version='2009'> <Ex cle="BIB"> <Path>bib1.html</Path> <Title>bib1</Title > <Style></Style> </Ex> <Path>bib2.html</Path> <Title>bib2</Title> <Style></Style> <Ex cle="CSS BIB"><Path>bib.html</Path><Title>bib</Title> <Style> <Css><href>bib.css</href></Css> </Style> </Exemples> ****************** SPRY *********** <Exemples dossier='SPRY' base='SPRY/' auteur='pfz' version='2009'> <Ex cle="SPRY CSS"> <Path>spry.html</Path><Title>spry</Title> Code Partiel 17/04/2017 Transparent 75 Langages & Documents ESSI - 2 – Paul Franchi

76 XML as metadatas SPRY (Adobe Labs) from RDF, XML to PHP/SQL
17/04/2017 XML as metadatas SPRY (Adobe Labs) using XML to describe "contents" using JS & DOM to generate wIdgets & "contents" using AJAX to access/modify "contents" from RDF, XML to PHP/SQL using XML/RDF to describe "contents" using XSLT from XML to SQL exporting from SQL to XML XSLT using XSLT to generate wIdgets (DHTML, JS) using XSLT to generate/modify "contents" (HTML) using XSLT to generate/modify style (CSS) XUL (Mozilla Foundation) using RDFL to describe "contents" using XUL to generate WIdgets & "contents" using AJAX to access "contents" using JASON, XML-RPC, WSDL for "networking" and "web services" 17/04/2017 Langages & Documents ESSI - 2 – Paul Franchi 76

77 R.I.A. - XML as metadatas & SPRY
17/04/2017 R.I.A. - XML as metadatas & SPRY XML rdf Rich Client XML rdf HTML SPRY CSS, XSL JS DHTML AJAX DHTML 17/04/2017 Langages & Documents ESSI - 2 – Paul Franchi 77

78 XML as metadatas & PHP/SQL
17/04/2017 XML as metadatas & PHP/SQL 3-tier Client/Server Architecture uses a Wamp Server XML rdf Lex JS XSL CSS, XSL XSLT HTML SQL XML AJAX PHP XML contourner un bug Office 17/04/2017 Langages & Documents ESSI - 2 – Paul Franchi 78

79 XSL JS CSS XSLT HTML XML rdf XML
17/04/2017 XML as metadatas & XSLT XSL JS CSS XSLT HTML XML rdf XML 17/04/2017 Langages & Documents ESSI - 2 – Paul Franchi 79

80 xml dtd xsd html css css via xsl Web Reference Browser metadata .xml
de XML vers HTML5+CSS3 17/04/2017 Transparent 80 ESSI - 2 – Paul Franchi 80

81 dtd xsd html css css css js metadata xml via xsl Doc Example Browser
de XML vers HTML5+CSS3+JS 17/04/2017 Transparent 81 ESSI - 2 – Paul Franchi 81

82 XML (meta) modèle de données (ERD )
<Show version > uses: n,m used_by: n,m <Categorie type path > 1,* <Code titre keywords file version > <Description libellé* img? > 1,* 1,? n,m <Auteur> Type Keyword Keyword Path Keyword Keyword Aut Keyword 17/04/2017 Transparent 82 ESSI - 2 – Paul Franchi 82

83 XML Processing: XSLT, XPath, XLink
17/04/2017 XML: "State of the Art" XML Processing: XSLT, XPath, XLink Dynamic XML using XSL/JS XML as metadata: RDF, SPRY, XUL XML rdf .xsl XML rdf 17/04/2017 Langages & Documents ESSI - 2 – Paul Franchi 83