Chap III - XML Pr

1
Chap III - XML Présentation ("Basic")
Chap VIII - XML Processeurs "Advanced"
http//www.polytech.unice.fr/pfz/LANGDOC/COURS 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
www.polytech.unice.fr/pfz
pfz_at_polytech.unice.fr
2
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

24/05/2015
Transparent 2
3
Some References

• Web
• EPU courses (in French)
• Création Manipulltion de Document
  http//www.polytech.unice.fr/pfz/cmd.html
• Introduction to Internet http//rainbow.i3s.unice
  .fr/iai/
• Langages Documents httpwww.polytech.unicefr/p
  fz/document.html
• W3C tutorial http//www.w3schools.com/
  
• Mozilla Development Center http//developer.mozil
  la.org/en/docs/Main_Page
• W3C, http//www.w3.org/
• Web Developer's Bookmarks http//antriksh.com/reso
  urces/
• XML Wiki Book http//en.wikibooks.org/wiki/XML_-_M
  anaging_Data_Exchange
• Biblio
• many issues at EPU's lib

24/05/2015
Transparent 3
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

24/05/2015
Transparent 4
5
Web Reference Browser
metadata .xml
de XML vers HTML5CSS3
24/05/2015
Transparent 5
6
Doc Example Browser
metadata .xml
de XML vers HTML5CSS3JS
24/05/2015
Transparent 6
7
Lexique

• 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

24/05/2015
Transparent 7
8
Chap III - XML Présentation ("Basic")

• Génèse de XML
• MetaLangageNorme LexicaleNorme
  SyntaxiqueEspaces de noms - NamespacesDialectes
  XHTML, MathML, SVG, etc
• Techniques XML

9
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

HTML Information presentation Fixed set of
tags Data presentation language Limited hypertext
linking
24/05/2015
Transparent 9
10
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 manlt-gtmachine
  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.

http//www.emimusic.de 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.)
24/05/2015
Transparent 10
11
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.

24/05/2015
Transparent 11
12
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

24/05/2015
Transparent 12
13
Les exemples du W3C
lt?xml version"1.0" encoding"ISO-8859-1" ?gt
lt! ou "UTF-8" --gt ltnote date'09/2011'
auteur'PFZ'gtlttogtSI4lt/togtltfromgtLe
Proflt/fromgtltsujet cours'LANGDOC'
gtReminderlt/sujetgtltmessagegtDon't forget your
TP!lt/messagegtlt/notegt
Une note (message)
24/05/2015
Transparent 13
14
Les exemples du W3C
lt?xml version"1.0" encoding"ISO-8859-1" ?gt
ltbreakfast_menugt ltfoodgt ltpricegt5.95lt/pricegt
ltnamegtBelgian Waffleslt/namegt ltdescriptiongttwo of
our famous Belgian Waffles with plenty of real
maple syruplt/descriptiongt ltcaloriesgt650lt/calories
gt lt/foodgtltfoodgtltpricegt7.95lt/pricegt ltnamegtStrawbe
rry Belgian Waffleslt/namegt ltdescriptiongtlight
Belgian waffles covered with strawberries and
whipped creamlt/descriptiongt ltcaloriesgt900lt/calori
esgt lt/foodgtltfoodgtltpricegt8.95lt/pricegt ltnamegtBerry
-Berry Belgian Waffleslt/namegt ltdescriptiongtlight
Belgian waffles covered with an assortment of
and whipped creamlt/descriptiongt ltcaloriesgt900lt/ca
loriesgt lt/foodgtltfoodgtltpricegt4.50lt/pricegt ltnamegtF
rench Toastlt/namegt ltdescriptiongtthick slices made
from our homemade sourdough breadlt/descriptiongt lt
caloriesgt600lt/caloriesgt lt/foodgt lt/breakfast_menugt
Une carte de Menu
24/05/2015
Transparent 14
15
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

24/05/2015
Transparent 15
16
l'Univers XML
lt?xml ?gt
DOM
un metamodèle "pivot" universel
des processeurs compatibles
en pleine expansion
24/05/2015
Transparent 16
17
l'Univers XML
DOM
lt?xml ?gt
un metamodèle "pivot" universel
des processeurs compatibles
XUL
en pleine expansion
24/05/2015
Transparent 17
18
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

ltsujetgt Rappel lt/sujetgt
ltnotegt ltfrom gt lt/fromgt lttogt
lt/togt lt/notegt
ltversion auteur'PFZ' date' 2011' /gt
24/05/2015
Transparent 18
19
Les exemples du W3C
Un catalogue de CD

• xml

lt?xml version"1.0" encoding"ISO-8859-1" ?gt
lt! pour les accents --gt ltCATALOGgt ltCDgt ltTITLEgtE
mpire Burlesquelt/TITLEgt ltARTISTgtBob
Dylanlt/ARTISTgt ltCOUNTRYgtUSAlt/COUNTRYgt
ltCOMPANYgtColumbialt/COMPANYgt
ltPRICEgt10.90lt/PRICEgt ltYEARgt1985lt/YEARgt lt/CDgt lt
CDgt ltTITLEgtHide your heartlt/TITLEgt
ltARTISTgtBonnie Tylerlt/ARTISTgt ltCOUNTRYgtUKlt/COUNT
RYgt ltCOMPANYgtCBS Recordslt/COMPANYgt ltPRICEgt9.9
0lt/PRICEgt ltYEARgt1988lt/YEARgt lt/CDgt lt/CATALOGgt
gt CSS
20
XML - Norme Lexicale

• les commentaires sont de la forme lt!- -
  tout_sauf - - - - gt
• les balises "xml" (Prologue) sont de la forme
  lt?xml tout_sauf lt gt ?gt
• les DTD internes sont de la forme lt?DOCTYPE
  tout_sauf gt gt
• les autres balises (Eléments) sont de 3 formes
• ltNOM attribs gt ltNOM attribs /gt lt/NOM gt
• les CHAINES sont de la forme " tout_sauf " lt gt
  " ou ' tout_sauf ' lt gt '
• 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 lt!CDATA ... gt pour du texte
  non analysé (sauf )

24/05/2015
Transparent 20
21
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
  ( lt!CDATA ... gt )
• le Prologue se compose
• d'une balise de déclaration lt? xml ?gt
• puis en option
• d'Instructions de Traitement (stylesheet, par ex)
• d'une déclaration de Type de Document (DTD)
• de commentaires lt!-- --gt
• 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
24/05/2015
Transparent 21
22
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 gt Bien Formé
24/05/2015
Transparent 22
23
Navigateurs ("Web Browsers")

• Historiques
• Mosaîc, I.E. Netscape
• liste de navigateurs sur Wikipédia
• Internet Explorer 6 gt 9 ss Win, Linux
• HTML 4.01, XHTML 1.0, XML, CSS2, DOM
• Safari 3 gt 5 ss Mac OS, Win
• HTML 4.01, XHTML 1.0, XML, CSS2, DOM
• Mozilla ss Win, Mac OS, Linux
• Firefox gt 3.6.22 gt 4.0 gt ?.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 ftpd'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

24/05/2015
Transparent 23
24
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

lt?xml version"1.0" ?gt lt!-- Doc 2
--gt lttablegt lt/tablegt
lt?xml version"1.0" ?gt lt!-- Doc 1
--gt lttablegt lt/tablegt
gtpréfixes
lt?xml version"1.0" ?gt lt!-- fusion de Doc 1 2
--gt lttablegt lt!-- ?? --gt lt/tablegt
lttablegt lt/tablegt
lttablegt lt/tablegt
gtU.R.I.
24/05/2015
Transparent 24
25
Conflits de Noms

• Par Importations Multiples

lt?xml version"1.0" ?gt lt!-- style HTML
--gt lttablegt lttrgt lttdgt ROUGE lt/tdgt lttdgt VERT
lt/tdgt lttdgt BLEUlt/tdgt lt/trgt lt/tablegt
lt?xml version"1.0" ?gt lt!-- pour un EDT
--gt lttablegt ltcoursgt ltjourgt Lundi lt/jourgt ltcrengt
8h30-9h30lt/crengt lt/coursgt lt/tablegt
lt?xml version"1.0" ?gt lt!-- fusion de documents
--gt lttablegt lt!-- ?? --gt lt/tablegt
gtpréfixes
24/05/2015
Transparent 25
26
Nom Préfixé ou Qualifié ("QName")

• Résolution des Conflits par des Préfixes

lt?xml version"1.0" ?gt lt!-- style HTML préfixe
h --gt lthtablegt lthtrgt lthtdgt ROUGE
lt/htdgt lthtdgt VERT lt/htdgt lthtdgt
BLEUlt/htdgt lt/htrgt lt/htablegt
lt?xml version"1.0" ?gt lt!-- pour EDT préfixe e
--gt ltetablegt ltecoursgt ltejourgt Lundi
lt/ejourgt ltecrengt 8h30-9h30lt/ecrengt lt/ecoursgt lt
/etablegt
lt?xml version"1.0" ?gt lt!-- fusion de documents
--gt lthtablegt lt/htable ltetablegt
lt/etablegt
gtnamespaces
24/05/2015
Transparent 26
27
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
• lt!-- pour XHTML MathML
• http//www.w3.org/1999/xhtml
• http//www.w3.org/1998/Math/MathML --gt
• xs lt!-- préfixe des schémas XSD
  http//www.w3.org/2001/XMLSchema --gt
• xsl lt!-- préfixe des transformations XSL
  http//www.w3.org/1999/XSL/Transform/ --gt
• xlink lt!-- préfixe de XLink
• http//www.w3.org/1999/xlink/ --gt
• Portée

Pas vraiment un espace
URL optionelles préfixes lexicaux
lt?xml version"1.0" ?gt lthtable xmlnsh
"http//www.w3.org/TR/html4/" gt lt/htablegt
"table" compris
24/05/2015
Transparent 27
28
Espaces de Noms "Namespace"

• Attribut xmlns avec prefix
• xmlnsnamespace-prefix"namespaceURI"

• url (url optionelles)
• préfixes lexicaux

lt?xml version"1.0" ?gt lt!-- en XHTML préfixe
xh --gt ltxhtable xmlnsxh "http//www.w3.org/199
9/xhtml"gt ltxhtrgt ltxhtdgt ROUGE lt/xhtdgt ltxhtdgt
VERT lt/xhtdgt ltxhtdgt BLEUlt/xhtdgt lt/xhtrgt lt/xht
ablegt
lt?xml version"1.0" ?gt lt!-- pour EDT préfixe e
--gt ltetable xmlnse "http//www.essi.fr/edt"
gt ltecoursgt ltejourgt Lundi lt/ejourgt ltecrengt
8h30-9h30lt/ecrengt lt/ecoursgt lt/etablegt
la "vraie" balise lttablegt de (X)HTML
24/05/2015
Transparent 28
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

lt?xml version"1.0" ?gt lt!-- en XHTML --gt lttable
xmlns "http//www.w3.org/1999/xhtml"gt
lttrgt lttdgt ROUGE lt/tdgt lttdgt VERT lt/tdgt lttdgt
BLEUlt/tdgt lt/trgt lt/tablegt
lt?xml version"1.0" ?gt lt!-- pour EDT
--gt lttable xmlns "http//www.essi.fr/edt"gt ltcours
gt ltjourgt Lundi lt/jourgt ltcrengt 8h30-9h30lt/crengt lt/c
oursgt lt/tablegt
24/05/2015
Transparent 29
30
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 ltxsschema xmlnsxs"http//www.w3.org/2001/
  XMLSchema"gt
• XSLT ltxslstylesheet xmlnsxsl"http//www.w3.or
  g/1999/XSL/Transform"gt
• XHTML lthtml xmlns"http//www.w3.org/1999/xhtml"
  gt
• SVG ltsvg xmlns"http//www.w3.org/2000/svg"gt
• XLINK ltliens xmlnsxlink"http//www.w3.org/1999
  /xlink"gt

24/05/2015
Transparent 30
31
Espaces de Noms par Défaut

• Scalable Vector Graphics

lt?xml version"1.0" ?gt lt!-- Scalable Vector
Graphics --gt ltsvg xmlns "http//www.w3.org/2000/s
vg/" width"10cm" height"8cm" gt ltrect x"100"
y"100" width"50" height"70" /gt ltellipse
rx"100" ry"200" /gt lt/svggt
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
24/05/2015
Transparent 31
32
Portée des Espaces de Noms Multiples
lt?xml version"1.0" ?gt lt!-- SVG XHTML
XLink --gt lthtml xmlns "http//www.w3.org/1999/xht
ml" xmlnsxlink "http//www.w3.org/1999/xlink"
gt ltbodygt lth1gt Rectangle et Ellipse lt/h1gt ltsvg
xmlns "http//www.w3.org/2000/svg"
width"21cm" height"29cm"gt ltrect x"10"
y"10" width"50" height"70" /gt ltellipse
rx"100" ry"200" /gt lt/svggt ltp xlinktype"simple
" xlinkhref"svgDoc.html" gt Pour en savoir
plus sur SVG lt/pgt lt/bodygt lt/htmlgt
URI "SVG"
URI "XHTML"
URI "XLink"
ici les attributs préfixés sont dans l'espace
Xlink
24/05/2015
Transparent 32
33
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

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)
24/05/2015
Transparent 33
34
SVG - Scalable Vector Graphics
lt?xml version"1.0" ?gt lt!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1//EN" "http//www.w3.org/Gra
phics/SVG/1.1/DTD/svg11.dtd"gt ltsvg width"100"
height"100" version"1.1" xmlns"http//www.w3.o
rg/2000/svg"gt ltellipse cx"240" cy"100"
rx"220" ry"30" style"fillpurple"/gt ltellipse
cx"220" cy"70" rx"190" ry"20" style"filllime
"/gt ltellipse cx"210" cy"45" rx"170"
ry"15" style"fillyellow"/gt lt/svggt
URI "SVG"
ici sans prefix
24/05/2015
Transparent 34
35
MathML insertion dans XML
lt?xml version"1.0" encoding"iso-8859-1"?gt lt?xm
l-stylesheet type"text/css" href"monMathML.css"
?gt ltRacinegt ltTitregt Formule sous MathML
lt/Titregt ltMath xmlns " http//www.w3.org/1998/M
ath/MathML "gt ltmrootgt ltmsupgt ltmfracgt
ltmigtABlt/migt ltmigtblt/migtlt/mfracgt ltmngt
10 lt/mngt lt/msupgt ltmigtxlt/migt lt/mrootgt lt/Mat
hgt lt/Racinegt
Espace de noms "Namespace"
ici sans prefix
avec XSL
24/05/2015
Transparent 35
36
XHTML - Introduction

• Une version Xmlisée de HTML 4.0
• Recommandation W3C (Janvier 2000) au remplacement
  de HTML lthtml xmlnshttp//www.w3.org/1999/xhtml
  gt
• XHTML 1.0 Compatibilité (presque) totale avec
  HTML 4.0
• les documents doivent être bien formés au
  sens XML
• racine lthtmlgt lt/htmlgt unique
• marqueurs de fermeture obligatoires lt/pgt lt/ligt
  lt/tdgt
• ou ltb /gt et ltimg .. /gt, avec un espace devant /
• balises bien emboîtées (parenthèsées)
• nom et attribut de balise en minuscule
  (sensibilité à la casse)
• valeurs dattributs entre et valeurs
  explicites
• lattribut id remplace name
• XHTML 1.0 Trois DTDs de validation
• strict
• transitional
• framseset

DOCTYPE obligatoire ss IE sinon Mode QUIRK !
gt DTD
24/05/2015
Transparent 36
37
XHTML- format

• Source requis en XHTML1.0
• Conseils dutilisation
• protéger tous les caractères spéciaux amp lt
  gt
• séparer les scripts et les styles

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttitl
egt le Titre du Document lt/titlegt lt!-- les styles
et les scripts (externalisés, c'est mieux)
--gt lt/headgt ltbodygt le Corps du
Document lt/bodygt lt/htmlgt
DOCTYPE obligatoire ss IE sinon Mode QUIRK !
24/05/2015
Transparent 37
38
XHML insertion dans XML
lt?xml version"1.0" encoding"iso-8859-1"?gt lt?xm
l-stylesheet type"text/css" href"xhtml.css"?gt lt
racinegt lttitregt XHTML et XMLlt/titregt lthtml
xmlns " http//www.w3.org/1999/xhtml "
gt ltbodygt lth1gt Liens sous XHTMLlt/h1gt ltpgt lta
href" http//www.w3schools.comz "gt Visit W3C
Tutorial lt/agt lt/pgt ltpgt lta href"
http//www.essi.fr/pfz "gtchez Moi
lt/agt lt/pgt lt/bodygt lt/htmlgt lt/racinegt
namespaces
sous la balise, sans prefix
.xhtml obligatoire pour I.E.
24/05/2015
Transparent 38
39
XML "Basic Know Hows"
.xml

• XML Basics
• XML Styling CSS
• XML Dialects MathML, SVG
• Document Definition DTD, XSD

.css
.dtd
.xsd
.dtd
.dtd
24/05/2015
40
Chap VIII - XML Processeurs "Advanced"
Tree structure of XML XPathXPointerXLink
XInclude, XForms, XQuery Techniques XML
XML CSS multilpes XML DTD CDATADOMXML
AJAX MetaDatss
41
Tree Structure of an XML Document
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
24/05/2015
Transparent 41
42
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 lt!-- et --gt
• 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 lt? et ?gt

XPath cours Carton
24/05/2015
Transparent 42
43
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

lt?xml version"1.0" encoding"UTF-8"?gt ltbooksto
regt ltbookgt lttitle lang"eng"gt Harry Potter
lt/titlegt ltpricegt29.99lt/pricegt lt/bookgt ltbookgt
lttitle lang"eng"gt Learning XML lt/titlegt
ltpricegt39.95lt/pricegt lt/bookgt lt/bookstoregt
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//b
ook All "book" elements that are descendant
of the "bookstore" element, no matter where
they are under the "bookstore" //_at_lang All
attributes that are named "lang"
24/05/2015
Transparent 43
44
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
24/05/2015
Transparent 44
45
XPath Axes et Abréviations
. selfnode()
.. parentnode()
Axe par défaut child
/A /childA
A/ childA/child
_at_att attributeatt
_at_ attribute
A/_at_ childA/attribute
Etape par défaut descendant-or-self
// /descendant-or-selfnode()/
.// selfnode()/descendant-or-selfnode()/
A//B childA/descendant-or-selfnode()/childB
24/05/2015
Transparent 45
46
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/descendanttext() les textes d'un descendant de /A
/A//text() les textes sous /A/

24/05/2015
Transparent 46
47
XPath Prédicats
/A/B/childnode()position()1 les premiers fils de /A/B
/A/B/childnode()1 idem
/A/B _at_att1 les B avec un attribut att1
/A/B _at_att1'a1' idem avec att1'a1'
/A/B _at_att1'a1' and position()last() Idem avec B en dernière position

Et d'autres fonctions XPath 1.0 2.0 communes à XSLT, XQuery
/A/B contains(_at_att1, 'a1') att1 qui contient 'a1'
/A/B starts-with(_at_att1, 'a1') att1 qui commence par 'a1'

24/05/2015
Transparent 47
48
XPath Interrogations sur une Base Documentaire
//TITRE tous les titres du document
/FILMs/FILM TITRE'Alien' tous les FILM à titre"Alien"
/bookstore/book pricegt35 /title tous les 'title' des 'book' de 'bookstore' avec un 'price' gt 35

Et d'autres fonctions XPath 1.0 2.0 communes à XSLT, XQuery
24/05/2015
Transparent 48
49
XPath DOM avec JavaScript
mozxpath .js
ltscript type"text/javascript"gt //xpath une
expression de chemin XPATH // I.E var
xmlDocnew ActiveXObject ("Microsoft.XMLDOM")
xmlDoc.asyncfalse xmlDoc.load
("cdcatalog.xml") firstFitxmlDoc.selectNodes(xp
ath)0 // Mozilla xmlDocdocument.implementati
on.createDocument("","",null) xmlDoc.asyncfalse
xmlDoc.load("cdcatalog.xml") firstFit document
.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYP
E,null)0 attValuefirstFit.getAttribute('someA
tt') //exemple lt/scriptgt
I.E. only
Code Partiel
24/05/2015
Transparent 49
50
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) à
  lintérieur dun document
• peuvent importer du texte ou balisage
• XLink supporte des liens simples (type HTML) et
  des liens étendus (multiples) pour lier plusieurs
  ressources ensemble.

24/05/2015
Transparent 50
51
XLink Exemples

• Lien sur le Web
• ltref
• xmlnsxlinkhttp//www.w3.org/1999/xlink
• xlink typesimple
• xlink hrefhttp//www.essi.fr/pfz/LANGDOC/doc
  .xmlw3c
• xlink show new
• xlink actuateonRequest
• /gt W3C lt/refgt
• Lien local
• ltschema
• xmlnsxlinkhttp//www.w3.org/1999/xlink
• xlink typesimple
• xlink hrefSchemas/schema1.png
• xlink show embed
• xlink actuateonLoad
• /gt

3 mais pas 4 ?
prefix optionnel
Espace de noms "Namespace"
24/05/2015
Transparent 51
52
XLink un exemple d'insertion dans XML
lt?xml version"1.0" encoding"iso-8859-1"?gt lt?xm
l-stylesheet type"text/css" href"xlink.css"?gt lt
racinegt lttitregt Des Liens sous XML avec Xlink
lt/titregt lthomepages xmlnsxlink "
http//www.w3.org/1999/xlink " gt -----------------
---------- lthomepage xlinktype"simple"
xlinkhref" http//www.w3schools.com "gtVisit
W3Schoolslt/homepagegt ---------------------------
lthomepage xlinktype"simple" xlinkhref"
http//www.essi.fr/pfz "gtVisit Paul
Franchilt/homepagegt --------------------------- lt/h
omepagesgt lt/racinegt
namespaces
sous la balise, avec prefix
3 mais pas 4 ?
24/05/2015
Transparent 52
53
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
• lta name "XPointer" ..cette page..lt/agt
• lta id "XPointer" ..cette page..lt/agt
• référence externe
• lta href"http//www.essi.fr/pfz/LANGDOC/doc.html
  XPointer"gt
• version Xml
• localisation des éléments du document via XPath
• syntaxe dun pseudo chemin
• http//www.essi.fr/pfz/LANGDOC/doc.xmlxpointer/1
  /2
• http//www.essi.fr/pfz/LANGDOC/doc.xmlxpointer(i
  d('Balise')/
• avec /1/2 correspondant au chemin Xpath
  /child1/ child2

24/05/2015
Transparent 53
54
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/bookwhere
x/pricegt30order by x/titlereturn x/title
24/05/2015
Transparent 54
55
XML XForms
ltxformsgtltmodelgtltinstancegtltpersongtltfname/gtltln
ame/gt lt/persongtlt/instancegtltsubmission
id"form1" method"get" action"submit.asp"/gtlt/
modelgtltinput ref"fname"gtltlabelgtFirst
Namelt/labelgt lt/inputgtltinput ref"lname"gtltlabelgtL
ast Namelt/labelgt lt/inputgtltsubmit
submission"form1"gtltlabelgtSubmitlt/labelgt lt/submit
gtlt/xformsgt

• 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

24/05/2015
Transparent 55
56
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.

24/05/2015
Transparent 56
57
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

24/05/2015
Transparent 57
58
XML CSS multiples
title Obligatoire
lt?xml version"1.0" encoding"ISO-8859-1"?gt lt?x
ml-stylesheet title"Style de base"
href"cd_catalog.css" type"text/css"?gt lt?xml-
stylesheet title"Planche" rel"alternate"
href"cd_catalog_2.css" type"text/css"?gt lt?xm
l-stylesheet title"Spirale"
rel"alternate" href"cd_catalog_3.css"
type"text/css"?gt ltCATALOGgt ... / ... lt/CATALOGgt
24/05/2015
Transparent 58
59
XML DTD interne
lt?xml version"1.0" encoding"iso-8859-1"?gt lt!DO
CTYPE note lt!ENTITY nbsp " " gtlt!ENTITY eacute
"é" gtlt!ENTITY egrave "è" gt lt!ELEMENT note (to,
from, heading?, body)gt lt!ELEMENT to
(PCDATA)gt lt!ELEMENT from (PCDATA)gt lt!ELEMENT
heading (PCDATA)gt lt!ELEMENT body (PCDATA)gt gt
lt!- -lt!ELEMENT note ANYgt --gt ltnotegt lt!-- lterreurgt
ERREUR de balise BIEN FORMé, mais non VALIDE
lt/erreurgt? lttogtVouslt/togtlttogtLeacutes nbsp
nbsp nbsp Autregraveslt/togt ltfromgtMoilt/fromgt
ltheadinggtRappellt/headinggt ltbodygt N'oubliez pas de
rendre vos TPs !lt/bodygt lt/notegt
24/05/2015
Transparent 59
60
XML DTD externe
lt?xml version"1.0" encoding"iso-8859-1"?gt lt!DOC
TYPE note SYSTEM "note.dtd"gt ltnotegt lt!-- lterreurgt
ERREUR de balise BIEN FORMé, mais non VALIDE
lt/erreurgt --gt lttogtVouslt/togtlttogtLeacutes nbsp
nbsp nbsp Autregraveslt/togt ltfromgtMoilt/fromgt
ltheadinggtRappellt/headinggt ltbodygt N'oubliez pas
de rendre vos TPs ! lt/bodygt lt/notegt
lt!ELEMENT note (to, from, heading?,
body)gt lt!ELEMENT to (PCDATA)gt lt!ELEMENT from
(PCDATA)gt lt!ELEMENT heading (PCDATA)gt lt!ELEMENT
body (PCDATA)gt lt!ENTITY nbsp " " gt lt!ENTITY
eacute "é" gt lt!ENTITY egrave "è" gt
24/05/2015
Transparent 60
61
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

lt!-- script sous IE 5.0 et --gt ltscript
type"text/javascript"gt var xmlDoc new
ActiveXObject("Microsoft.XMLDOM") xmlDoc.async"fa
lse" xmlDoc.validateOnParse"true" xmlDoc.load("no
te_dtd_error.xml") document.write("ltbrgtError
Code ") document.write(xmlDoc.parseError.errorCod
e) document.write("ltbrgtError Reason
") document.write(xmlDoc.parseError.reason) docume
nt.write("ltbrgtError Line ") document.write(xmlDoc
.parseError.line) lt/scriptgt
gt DOM
24/05/2015
Transparent 61
62
XML XSD
lt?xml version"1.0" encoding"iso-8859-1"?gt ltnot
e xmlns"si4/langDoc" xmlnsxsi"http//www.w3.org
/2001/XMLSchema-instance" xsischemaLocation"si4/
langDoc note.xsd"gt lt!-- lterreurgt BIEN FORMé,
mais non VALIDE lt/erreurgt --gt lttogtVouslt/togt lttogt
Les Autreslt/togt ltfromgtMoilt/fromgt ltheadinggtRappellt/
headinggt ltbodygt N'oubliez pas de rendre vos TPs
! lt/bodygt lt/notegt
lt?xml version"1.0" encoding"iso-8859-1"?gt ltxs
schema xmlnsxs"http//www.w3.org/2001/XMLSchema"
targetNamespace "si4/langDoc" xmlns"si4/lang
Doc" elementFormDefault"qualified"
gt ltxselement name"note"gt ltxscomplexTypegt
ltxssequencegt ltxselement name"to"
type"xsstring" maxOccurs"unbounded"/gt
ltxselement name"from" type"xsstring"/gt
ltxselement name"heading" type"xsstring"
minOccurs"0"/gt ltxselement name"body"
type"xsstring"/gt ltxselement name"erreur"
type"xsstring"/gt lt! ltxselement
name"erreur" type"xsstring"/gt
--gt lt/xssequencegt lt/xscomplexTypegt
lt/xselementgt lt/xsschemagt
24/05/2015
Transparent 62
63
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 daccès et de manipulation dun
  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
24/05/2015
Transparent 63
64
DOM - "Parser" un document XML(1)

• Script en HTML sous I.E.

http//www.w3schools.com/dom
lthtmlgt ltheadgt ltscript type"text/javascript"gt
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
24/05/2015
Transparent 64
65
DOM - "Parser" un document XML(2)

• Script en HTML sous Mozilla

http//www.w3schools.com/dom
// suite du précédent // code for Mozilla,
etc. else if (document.implementation
document.implementation.createDocument) xmlDoc
document.implementation.createDocument("","",nul
l) xmlDoc.load("note.xml") xmlDoc.onload
getmessage() else alert('Your browser
cannot handle this script') // fin de
loadXML() // continue sur le suivant
24/05/2015
Transparent 65
66
DOM - Programmation
http//www.w3schools.com/dom

• Exemple viewNote.html

function getmessage() document.getElementById
("to").innerHTML xmlDoc.getElementsByTagName("
to")0.firstChild.nodeValue document.getElementB
yId("from").innerHTML xmlDoc.getElementsByTagN
ame("from")0.firstChild.nodeValue document.getE
lementById("message").innerHTML
xmlDoc.getElementsByTagName("body")0.firstCh
ild.nodeValue // fin de getmessage() lt/scriptgt
lt/headgt ltbody onload"loadXML()"gt ltdiv id"to"
style"background-colorpink"gt . lt/divgt ltdiv
id"from" style"background-colorpink"gt .
lt/divgt ltdiv id"message" style"background-colorp
ink"gt . lt/divgt lt/bodygt lt/htmlgt
24/05/2015
Transparent 66
67
XML CDATA (script JS interne)
lt?xml version"1.0" standalone"no"?gt ltdateurgt lt
titregt Date/Time JS en XMLlt/titregt ltscript
xmlnshttp//www.w3.org/1999/xhtml
type"text/javascript" gt lt!CDATA function
ANIM() .. ./ ..... function INIT() .... /
.... gt lt/scriptgt ltbody xmlns"http//www.w3.or
g/1999/xhtml" onload'INIT()'gt ltbox
id"date"gtjeudi 10 avril 2008lt/boxgt ltbox
id"heures"gt9lt/boxgt ltbox id"minutes"gt43lt/boxgt
ltbox id"secondes"gt17lt/boxgt lt/bodygt lt/dateurgt
protège le script
utilise le DOM
pour exécuter le script
24/05/2015
Transparent 67
68
DOM styleSheets
ltscript type"text/javascript"gt lt!CDATA
function style(n) var out "Stylesheet " n
"ltbr /gt" out "title '"
document.styleSheetsn.title "'ltbr /gt" out
"href '" document.styleSheetsn.href
"'ltbr /gt" out "type '"
document.styleSheetsn.type "'ltbr /gt" out
"disabled '" document.styleSheetsn.disabled
"'ltbr /gt" document.getElementById('OUT').i
nnerHTML"ltpgt"out"lt/pgt" function
dis() document.styleSheets0.disabled
!document.styleSheets0.disabled document.style
Sheets1.disabled !document.styleSheets1.disa
bled gt lt/scriptgt
24/05/2015
Transparent 68
69
SVG JSDOM - Animation "Clock"
ltsvg viewBox"0 0 100 100" xmlns"http//www.w3
.org/2000/svg" version"1.1"
xmlnsxlink"http//www.w3.org/1999/xlink" gt
ltscript type"text/javascript"gt
lt!CDATA function (id) return
document.getElementById(id) var
centre("small") function ANIM() // mise à
l'heure anew Date() ha.getHours()12
ma.getMinutes() sa.getSeconds() ms/60
hm/60 // ring centre.setAttribute("fill",
"grey") if (s50) centre.setAttribute("fill",
"green") if (s150) centre.setAttribute("fi
ll", "red") // aiguilles ("heures").setAttribu
te("x2", Math.cos((h-3)/6pi)2550)
("heures").setAttribute("y2",
Math.sin((h-3)/6pi)2550) ("minutes").setAttr
ibute("x2", Math.cos((m-15)/30pi)3550)
("minutes").setAttribute("y2",
Math.sin((m-15)/30pi)3550) ("secondes").setA
ttribute("x2", Math.cos((s-15)/30pi)4550)
("secondes").setAttribute("y2",
Math.sin((s-15)/30pi)4550) setTimeout("ANIM()
", 900) // lt1000 1 sec ANIM() // appel de
l\'animation gt lt/scriptgt lt/svggt
lt!-- le décor de l'horloge --gt . ltg
stroke"black"gt ltline x1"50" id"secondes"
/gt ltline x1"50" id"minutes" /gt ltline x1"50"
id"heures" /gt lt/ggt ltg stroke"black"
id"marques"gt ltcircle cx"50" cy"50" r"9"
id"small"/gt lt/ggt
Code Partiel
24/05/2015
Transparent 69
70
XPath DOM avec JS
lthtmlgt ltbodygt ltscript type"text/javascript"gt /
/xpath une expression de chemin XPATH // I.E
var xmlDocnew ActiveXObject ("Microsoft.XMLDOM")
xmlDoc.asyncfalse xmlDoc.load
("cdcatalog.xml") firstFitxmlDoc.selectNodes(xp
ath)0 // Mozillla xmlDocdocument.implementat
ion.createDocument("","",null)
xmlDoc.asyncfalse xmlDoc.load("cdcatalog.xml")
firstFitdocument.evaluate(xpath, xmlDoc, null,
XPathResult.ANY_TYPE,null)0 attValuefirstFit.
getAttribute('someAtt') //exemple lt/scriptgt lt/bod
ygt lt/htmlgt
Code Partiel
24/05/2015
Transparent 70
71
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(x
ml, document) var target document.getElement
ById(id) target.innerHTML
fragment.firstChild.innerHTML // pfz
//target.appendChild(fragment) //orig
//document.replaceChild(target, fragment)
//orig // ActiveX pour Internet Explorer
else if (window.ActiveXObject)
var target document.getElementById(id)
target.innerHTML xml.transformNode(x
sl) catch (e) return
e
ltscript type"text/javascript"gt var XML
loadXML(xmlURL) var XSL
loadXML(xslURL) function theJobTe()
transform (XML, XSL, 'ICI') .... lt/scriptgt
Code Partiel
24/05/2015
Transparent 71
72
XML AJAX
ltscript type"text/javascript"gt lt!CDATA
var xmlhttp function loadXMLDoc(path)
xmlhttpnull if (window.XMLHttpRequest) //
code for IE7, Firefox, Mozilla, etc.
netscape.security.PrivilegeManager.enablePrivilege
("UniversalBrowserRead") xmlhttpnew
XMLHttpRequest() else if (window.ActiveXObject)
// code for IE5, IE6 xmlhttpnew
ActiveXObject("Microsoft.XMLHTTP") if
(xmlhttp!null) xmlhttp.onreadystatechangeonR
esponse xmlhttp.open("GET", path, true)
xmlhttp.send(null) else alert("Your browser
does not support XMLHTTP.") // à suivre
24/05/2015
Transparent 72
73
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
gt lt/scriptgt
Code Partiel
24/05/2015
Transparent 73
74
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,

24/05/2015
Transparent 74
75
XML metadata pour EXEMPLES/
lt?xml version'1.0' encoding'ISO-8859-1'?gt lt?x
ml-stylesheet href"docExShow.xsl"
type"text/xsl" ?gt ltDoc base "../"gt
BIB ltExemples dossier'BIB'
base'BIB/' auteur'pfz' version'2009'gt ltEx
cle"BIB"gt ltPathgtbib1.htmllt/Pathgt
ltTitlegtbib1lt/Title gt ltStylegtlt/Stylegt lt/Exgt ltEx
cle"BIB"gt ltPathgtbib2.htmllt/Pathgt
ltTitlegtbib2lt/Titlegt ltStylegtlt/Stylegt lt/Exgt ltEx
cle"CSS BIB"gtltPathgtbib.htmllt/PathgtltTitlegtbiblt/Tit
legt ltStylegt ltCssgtlthrefgtbib.csslt/hrefgtlt/Cssgt lt/S
tylegt lt/Exgt lt/Exemplesgt SPRY
ltExemples dossier'SPRY'
base'SPRY/' auteur'pfz' version'2009'gt ltEx
cle"SPRY CSS"gt ltPathgtspry.htmllt/PathgtltTitlegtspry
lt/Titlegt
Code Partiel
24/05/2015
Transparent 75
76
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 XML/RDF to describe "contents"
• 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"

24/05/2015
77
R.I.A. - XML as metadatas SPRY
XML rdf
Rich Client
XML rdf
HTML
SPRY
CSS, XSL
JS
DHTML
AJAX
DHTML
24/05/2015
78
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
24/05/2015
79
XML as metadatas XSLT
XSL
JS
CSS
XSLT
HTML
XML rdf
XML
24/05/2015
80
Web Reference Browser
xml
dtd
xsd
html
css
css
metadata .xml
via xsl
de XML vers HTML5CSS3
24/05/2015
Transparent 80
81
Doc Example Browser
dtd
xsd
html
css
css
css
js
metadata xml
via xsl
de XML vers HTML5CSS3JS
24/05/2015
Transparent 81
82
XML (meta) modèle de données (ERD )

• ltShow
• version
• gt

uses n,m
used_by n,m

• ltCategorie
• type
• path
• gt

• ltCode
• titre
• keywords
• file
• version
• gt

• ltDescription
• libellé
• img?
• gt

ltAuteurgt
Type
Keyword
Keyword
Path
Keyword
Keyword
Aut
Keyword
24/05/2015
Transparent 82
83
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
24/05/2015