D veloppement Web - XML, DOM, XHTML › ~richer › ens › l3info › dw_crs5.pdf · Developpement...

Developpement Web - XML, DOM, XHTML


Jean-Michel [email protected]

http://www.info.univ-angers.fr/pub/richer

2009

1 / 87


Plan

Plan

1 Rappels SGML, XML, XSL

2 Grammaire et DTD

3 Manipuler des documents XML

4 XHTML

5 DOM et Javascript

2 / 87


Rappels SGML, XML, XSL

Qu’est ce que SGML ?

Definition (SGML - Standard Generalized Markup Language)

• langage de description de langages a balises

• norme ISO 8879 :1986

• utilise par les professionels de l’industrie de ladocumentation et de l’edition

• assez complexe

• separation fond / forme

3 / 87






• norme ISO 8879 :1986


• assez complexe


4 / 87






• norme ISO 8879 :1986


• assez complexe


5 / 87






• norme ISO 8879 :1986


• assez complexe


6 / 87






• norme ISO 8879 :1986


• assez complexe


7 / 87



Qu’est ce que XML ?

Definition (XML - eXtensible Markup Language )

• issu de SGML

• standard qui permet de representer l’information demaniere structuree de facon a introduire une certainesemantique.

• repose sur un langage de balises non predefinies

• facilite l’echange d’information entre systemesheterogenes

8 / 87





• issu de SGML




9 / 87





• issu de SGML




10 / 87





• issu de SGML




11 / 87



Avantages de XML

Avantages de XML

• separation du contenu et de la forme

• extensible

• donnees et meta-donnees

• supporte par les applications Web

• fonctions de recherche et transformation

• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants

12 / 87



Avantages de XML

Avantages de XML


• extensible





13 / 87



Avantages de XML

Avantages de XML


• extensible





14 / 87



Avantages de XML

Avantages de XML


• extensible





15 / 87



Avantages de XML

Avantages de XML


• extensible





16 / 87



Avantages de XML

Avantages de XML


• extensible





17 / 87



Inconvenients de XML

Inconvenients de XML• verbeux (augmentation de la taille des fichiers)

• consommateur de ressources (representation en memoire,processeur)

18 / 87



Inconvenients de XML

Inconvenients de XML• verbeux (augmentation de la taille des fichiers)

• consommateur de ressources (representation en memoire,processeur)

19 / 87



Qu’est ce que XSL ?

Definition (XSL - eXtensible Stylesheet Language)

• langage de feuilles de styles

• descendant de DSSL langage de mise en forme de SGML

• concu pour definir la mise en forme des documents XML• XSL est divise en :

• XSLT un langage de transformation de structure dedocument

• XSL-FO pour la mise en forme (Formatting Objects)

20 / 87



Exemple de fichier XML

bibliotheque.xml

1 < ?xml version="1.0" encoding="utf-8" ?>

2 < !DOCTYPE bibliotheque SYSTEM "bibliotheque.dtd" >

3 < ?xml-stylesheet type="text/xsl" href="bibliotheque.xsl" ?>

4 <bibliotheque>

5 <livre>

6 <titre>Apprendre XML en 10 mois </titre>

7 <liste auteurs>

8 <auteur nom="Escargot" prenom="Jean" />9 <auteur nom="Snail" prenom="Brad" />

10 </liste auteurs>

11 <prix>20</prix>

12 </livre>

1314 <livre>

15 <titre>Learn Java in 10 seconds </titre>

16 <liste auteurs>

17 <auteur nom="Fast" prenom="John" />18 </liste auteurs>

19 <prix monnaie="dollars" >25</prix>

20 </livre>

2122 </bibliotheque>

21 / 87



Description du fichier XML

Explication

Sur l’exemple precedent on decrit des livre qui composentune bibliotheque . Chaque livre se compose :

• d’un titre

• d’une liste d’auteur

• d’un prix pour lequel on peut specifier l’attribut monnaie

il est possible de decrire plusieurs livres en les placant entre lesbalises <livre> et </livre>

22 / 87



Exemple de fichier XSL - Liste

bibliotheque.xsl


2 <xsl :stylesheet xmlns :xsl="http ://www.w3.org/1999/XSL/Transform" version="1.0" >

3 <xsl :output method="html" />4 <xsl :template match="/" >

5 <html>6 <body bgcolor="#FFFFFF" >

7 <ul type="square" >

8 <xsl :for-each select="bibliotheque/livre" >

9 <li>10 <xsl :value-of select="titre" />, <br />11 <xsl :for-each select="liste auteurs/auteur" >

12 <i>13 <xsl :value-of select="./@prenom" /><xsl :text></xsl :text>14 <xsl :value-of select="./@nom" />15 </i>,16 </xsl :for-each><br />17 <xsl :text>prix </xsl :text><xsl :value-of select="prix" />18 <xsl :text></xsl :text>19 <xsl :value-of select="prix/@monnaie" />20 </li>21 </xsl :for-each>

22 </ul>23 </body>

24 </html>25 </xsl :template>

26 </xsl :stylesheet>

23 / 87



Rendu sous forme de liste

24 / 87



Exemple de fichier XSL - Table

bibliotheque table.xsl


2 <xsl :stylesheet xmlns :xsl="http ://www.w3.org/1999/XSL/Transform" version="1.0" >

3 <xsl :output method="html" />4 <xsl :template match="/" >

5 <html>6 <body>

7 <table border="1" cellpadding="4" >

8 <xsl :for-each select="bibliotheque/livre" >

9 <tr valign="top" >

10 <td><xsl :value-of select="titre" /></td>

11 <td>

12 <xsl :for-each select="liste auteurs/auteur" >

13 <i>14 <xsl :value-of select="./@prenom" /><xsl :text></xsl :text>15 <xsl :value-of select="./@nom" />16 </i><br />17 </xsl :for-each>

18 </td>

19 <td><xsl :text>prix </xsl :text><xsl :value-of select="prix" />20 <xsl :text></xsl :text><xsl :value-of select="prix/@monnaie" />21 </td>

22 </tr>23 </xsl :for-each>

24 </table>

25 </body>

26 </html>27 </xsl :template>

28 </xsl :stylesheet> 25 / 87



Rendu sous forme de table

26 / 87


Grammaire et DTD

Grammaire DTD

Grammaire DTD

27 / 87


Grammaire et DTD

Prologue du document

bibliotheque.xml

<?xml version="1.0" encoding="utf-8" ?>

Apercu

La premiere ligne indique :

• la version du langage utilise

• l’encodage des caractere (utf-8 ou ISO-8859-1 )

28 / 87


Grammaire et DTD

Declaration du type de document

bibliotheque.xml

<!DOCTYPE bibliotheque SYSTEM "bibliotheque.dtd">

La declaration du type de document (Document TypeDeclaration) indique :

• la grammaire (DTD) a laquelle doit se conformer ledocument

• le nom de la premiere balise : bibliotheque

29 / 87


Grammaire et DTD

DTD

Un fichier XML doit se conformer a une grammaire :

Definition (Document Type Definition)

Une DTD (Document Type Definition) est une grammaire codeeau format XML qui permet de decrire la structure generale alaquelle doit se conformer un document XML.

Attention !

Ne pas confondre Document Type Definition (DTD) de laDocument Type Declaration (DOCTYPE)

30 / 87


Grammaire et DTD

DTD

Un fichier XML doit se conformer a une grammaire :

Definition (Document Type Definition)

Une DTD (Document Type Definition) est une grammaire codeeau format XML qui permet de decrire la structure generale alaquelle doit se conformer un document XML.

Attention !

Ne pas confondre Document Type Definition (DTD) de laDocument Type Declaration (DOCTYPE)

31 / 87


Grammaire et DTD

Exemple de DTD

bibliotheque.dtd


23 < !ELEMENT bibliotheque (livre+) >

4 < !ELEMENT livre (titre, liste auteurs, prix ?) >

5 < !ELEMENT titre (#PCDATA) >

6 < !ELEMENT liste auteurs (auteur+) >

7 < !ELEMENT auteur EMPTY>

8 < !ATTLIST auteur nom CDATA #REQUIRED >

9 < !ATTLIST auteur prenom CDATA #REQUIRED >

10 < !ELEMENT prix (#PCDATA) >

11 < !ATTLIST prix monnaie CDATA #IMPLIED>

1213

32 / 87


Grammaire et DTD

Structure de la DTD

bibliotheque.dtd

<!ELEMENT bibliotheque (livre+) >

La premiere ligne declare que la balise bibliothequecontiendra un ensemble de balises livre .On peut specifier :

• + : de 1 a plusieurs

• * : de 0 a plusieurs

• ? : de 0 a 1 (element optionnel)

• sans indication, il s’agit d’une seule occurrence

33 / 87


Grammaire et DTD

Structure de la DTD

bibliotheque.dtd

<!ELEMENT livre (titre, liste_auteurs, prix?) >

de la meme maniere, une balise livre contiendra :

• une balise titre

• suivie d’une balise liste auteurs

• suivie eventuellement d’une balise prix

Remarque : a | b signifie a ou (exclusif) b

34 / 87


Grammaire et DTD

Structure de la DTD

bibliotheque.dtd

<!ELEMENT titre (#PCDATA) >

un titre sera compose d’une chaıne de caracteres (ParsedCharacter DATA) sans symboles <,> . On peut egalementutiliser les symboles :

• CDATA: donnees brutes entre guillemets non anamysees

• MIXED : texte et elements < et >

• ANY: n’importe quoi

35 / 87


Grammaire et DTD

Structure de la DTD

bibliotheque.dtd<!ELEMENT auteur EMPTY><!ATTLIST auteur nom CDATA #REQUIRED ><!ATTLIST auteur prenom CDATA #REQUIRED >

un auteur ne contient pas d’information( EMPTY) mais utilisedeux attributs nomet prenom composes de caracteresalphanumeriques. On peut indiquer :

• #REQUIRED: que l’attribut doit etre defini explicitement

• #IMPLIED : optionnel

• #DEFAULT: possede une valeur par defaut definie par unevaleur entre guillemets

36 / 87


Grammaire et DTD

Entite simple

Definition (Entite)

nom de substitution pour un morceau texte (equivalent du#define en C)

utilisation d’une entite simple

<!ENTITY progc "programmation en langage C"><keyword> &proc </keyword>

37 / 87


Grammaire et DTD

Entite parametre

Definition (Entite parametre)

entite qui peut etre reutilisee dans la DTD

entite parametre

<!ENTITY % string "(#PCDATA)"><!ELEMENT titre %string; >

38 / 87


Manipuler des documents XML

Manipulation des documents XML

Manipuler lesDocuments XML

39 / 87



Manipuler XML : DOM et SAX

DOM et SAX

il existe 2 principales interfaces de manipulation pour la lecturedes documents XML :

• DOM (Document Object Model) basee sur unerepresentation hierarchique

• SAX (Simple API for XML) basee sur des declencheursd’action

40 / 87



Le DOM

Definition (Document Object Model)

Le DOM est l’interface de programmatiion (API) qui permet audeveloppeur web d’acceder et de manipuler le contenu d’undocument XML. Applique aux pages web, il permetnotamment :

• une representation structuree et orientee objet deselements et du contenu

• la modification des proprietes de ces objets parl’intermediaire de methodes

• l’ajout et la suppression d’objets

• la gestion des evenements du navigateur

41 / 87



Proprietes de l’API DOM

Caracteristiques de DOM

1 recommandation du W3C

2 specification generale qui donne lieu a de multiplesimplantations

3 pas vraiment oriente objet (ou mal concu)

4 construit une representation en memoire du documentsous forme d’arbre

5 adaptee aux petits fichiers et traitement du documententier

42 / 87



Les normes du DOM

Versions du DOM

Il existe plusieurs evolutions du DOM standardisees par leW3C :

1 DOM Level 1 (Core + HTML) depuis 1998

2 DOM Level 2 (Core + Event + Style + Views + Traversaleand range) depuis 2000

3 DOM Level 3 (En cours de finalisation)

43 / 87



L’arbre d’elements

Arbre des elements• de part sa structure, un document XML est represente

sous forme arborescente

• cette arborescence possede : une racine, des noeuds, desfeuilles

Note• visualiation structure du document sous Firefox (+DOM

Inspector)

• ou xmltreenav (+xmldiff)

44 / 87



L’arbre d’elements

Arbre des elements• de part sa structure, un document XML est represente

sous forme arborescente

• cette arborescence possede : une racine, des noeuds, desfeuilles

Note• visualiation structure du document sous Firefox (+DOM

Inspector)

• ou xmltreenav (+xmldiff)

45 / 87



Diagramme UML de l’API DOM

DOMEntity

DomCharacterData

DomComment

DOMDocument� encoding : string� xmlVersion : string+ createElement(name : string, value : string)+ createTextNode(content : string)+ getElementById(elementId : string)+ getElementsByTagName(name : string) : DOMNodeList

DOMElement

DOMText

DOMNamedNodeMap

+ getNamedItem(item : string) : DOMNode+ item(index : int) : DOMNode

DOMNodeList� length : int+ item(index : int) : DOMNode

DomNode+ nodeName : string+ NodeValue : string+ parentNode : DOMNode+ text_content : string+ childNodes : DOMNodeList+ appendChild(newnode : DOMNode) : DOMNode+ hasChildNodes() : bool+ hasAttributes() : bool

46 / 87



Noeud DOM

DOMNode

Les attributs sont :

• nodeName (string) nom du noeud

• nodeType (int) type du noeud

• nodeValue (string) valeur

• childNodes (DOMNodeList) liste des enfants

• parentNode (DOMNode) noeud parent

• firstChild, lastChild (DOMNode)

• previousSibling, nextSibling (DOMNode)

47 / 87



L’API SAX

Caracteristiques de SAX

1 basee sur des triggers qui se declenchent lors de la lecturede balises

2 adaptee au traitement local de gros fichiers

3 adaptee a des langages compiles comme C++, Java

48 / 87



Manipuler des docucments XML sous PHP

DOM sous PHP• a partir de PHP 5 on peut utiliser l’API DOM

• ou SimpleXML (tres simple)

• l’analyseur syntaxique XML (sorte de SAX)

• dans les versions anterieures (PHP 4) on utilisait DOMXML

49 / 87



Creer un document XML avec DOM sous PHP

On precise :

• la version

• l’encodage des caracteres

DOMDocument

1 $dom = new DOMDocument(’1.0’ , ’iso-8859-1’ ) ;2 echo $dom- >saveXML() ;

50 / 87



Charger un document XML/HTML

Chargement d’un document XML

• load(file) pour un fichier XML

• loadHTMLFile(file) pour un fichier HTML

• loadXML(string) a partir d’une chaıne

• loadHTML(string) a partir d’une chaıne

• ces fonctions retournent true en cas de succes et false encas d’erreur

51 / 87



Exemple de chargement

exemple de chargement

1 $dom=new DOMDocument() ;2 if ( $dom- >load( ’bibliotheque.xml’ )==false) {3 die( "error load" ) ;4 }5 if ( $dom- >loadXML( ’ <personnes ></personnes >’ )==false) {6 die( "error loadXML" ) ;7 }

52 / 87



Valider un document XML par rapport a une DTD

Utilisation de PHP 5 : les erreurs eventuelles seront affichees.La fonction validate retourne true en cas de succes.

xml validator.php

1 error reporting(E WARNING) ;2 $dom=new DomDocument() ;3 $dom- >load( "bibliotheque.xml" ) ;4 if ( $dom- >validate() == true) {5 echo "Document valide \n" ;6 }

53 / 87



Sauvegarder un document XML/HTML

Sauvegarde d’un document XML/HTML

• save(file) pour un fichier XML

• saveHTMLFile(file) pour un fichier HTML

• ces fonctions retournent le nombre d’octets ecrits en casde succes et false en cas d’erreur

• string saveXML(void)

• string saveHTML(void)

• ces fonctions retournent une chaıne XML/HTML en cas desucces et false en cas d’erreur

54 / 87



Exemple de sauvegarde

exemple de sauvegarde

1 $dom=new DOMDocument() ;2 $root =$dom- >createElement( ’bibliotheque’ , ’’ );3 $dom- >appendChild( $root ) ;4 if ( $dom- >save( ’dummy.xml’ )==false) {5 die( "error save" ) ;6 }7 echo $dom- >saveXML() ;

resultat

< ?xml version= "1.0" ?>

<bibliotheque ></bibliotheque >

55 / 87



Exemple de sauvegarde

exemple de sauvegarde

1 $dom=new DOMDocument() ;2 $root =$dom- >createElement( ’bibliotheque’ , ’’ );3 $dom- >appendChild( $root ) ;4 if ( $dom- >save( ’dummy.xml’ )==false) {5 die( "error save" ) ;6 }7 echo $dom- >saveXML() ;

resultat

< ?xml version= "1.0" ?>

<bibliotheque ></bibliotheque >

56 / 87



Creer d’un document XML/HTML

Creation d’un document XML/HTML

les fonctions principales sont :

• DOMElement createElement(string name,string value)

• DOMText createTextNode(string name)

• DOMAttr createAttribute(string name)

• appendChild(DOMNode node)

57 / 87



Exemple de creation

exemple de creation

1 $dom=new DOMDocument(’1.0’ , ’iso-8859-1’ ) ;2 $root element =$dom- >createElement( ’bibliotheque’ , ’’ );3 $dom- >appendChild( $root element ) ;4 $livre =$dom- >createElement( ’livre’ , ’’ );5 $root element - >appendChild( $livre ) ;6 $titre =$dom- >createElement( ’titre’ , ’Apprendre XML’ ) ;7 $livre - >appendChild( $titre ) ;8 $prix =$dom- >createElement( ’prix’ , ’20’ );9 $livre - >appendChild( $prix ) ;

10 $monnaie =$dom- >createAttribute( ’monnaie’ );11 $montant =$dom- >createTextNode( ’euro’ );12 $monnaie - >appendChild( $montant );13 $prix - >appendChild( $monnaie ) ;14 echo $dom- >saveXML() ;

58 / 87



Parcourir un document XML/HTML

Parcours d’un document XML/HTML

les fonctions principales sont :

• DOMElement getElementById(string elementId)

• DOMNodeList getElementsByTagName(stringname)

59 / 87



Exemple de parcours

exemple de parcours

1 function parcours attributes( $node ) {2 if ( ! $node - >hasAttributes()) return ;3 foreach( $node - >attributes as $key => $subnode ) {4 echo " $key=" . $subnode - >nodeValue ;5 }6 }7 function parcours( $node , $nbr ) {8 if ( $node - >hasChildNodes()) {9 foreach( range( 0, $node - >childNodes- >length- 1) as $index ) {

10 $subnode =$node - >childNodes- >item( $index );11 if ( $subnode - >nodeType== 1) {12 foreach( range( 0, 4* $nbr ) as $i ) echo " " ;13 echo "+" . $subnode - >nodeName. " = " . trim( $subnode - >nodeValue) ;14 parcours attributes( $subnode ) ; echo " \n" ;15 parcours( $subnode , $nbr +1);16 }17 }18 }19 }20 $dom=new DOMDocument() ;21 $dom- >load( ’bibliotheque.xml’ ) ;22 $liste =$dom- >getElementsByTagName( ’livre’ );23 foreach( range( 0, $liste - >length- 1) as $ndx livre ) {24 $livre =$liste - >item( $ndx livre ) ;25 echo "livre $ndx livre \n" ;26 parcours( $livre , 1) ;27 }

60 / 87



Exemple de parcours

resultat du parcours

livre 0+titre = Apprendre XML en 10 secondes+liste auteurs =

+auteur = nom=sanpeur prenom=jean+auteur = nom=pitre prenom=brad

+prix = 20 monnaie=eurolivre 1

+titre = Apprendre Java en 10 secondes+liste auteurs =

+auteur = nom=nofear prenom=john+prix = 25 monnaie=euro

61 / 87



Interrogation d’un document avec XPath

Definition (XPath)

il s’agit d’un langage d’interrogation de fichiers XML :/ racine//titre tous les noeuds titre//liste auteurs/auteur tous les noeuds auteur a

l’interieur de liste auteurs//prix[@monnaie] tous les noeuds prix qui

ont un attribut monnaie//prix[@monnaie=’dollars’] tous les noeuds prix qui

ont un attribut monnaieegal a dollars

62 / 87



Parcours avec XPath

exemple de parcours avec DOMXPath

1 $doc = new DOMDocument() ;2 $doc - >load( "bibliotheque.xml" ) ;3 $xpath = new DOMXpath($doc ) ;4 echo "traiter les titres \n" ;5 $elements =$xpath - >query( "//titre" );6 if ( ! is null( $elements )) {7 foreach ( $elements as $element ) {8 echo "= > " . $element - >nodeName. " : " ;9 $nodes = $element - >childNodes ;

10 foreach ( $nodes as $node ) echo $node - >nodeValue. " \n" ;11 }12 }13 echo " \ntraiter les noms des auteurs \n" ;14 $elements = $xpath - >query( "//auteur[@nom]" ) ;15 if ( ! is null( $elements )) {16 foreach ( $elements as $element ) {17 echo "= >" . $element - >nodeName. " " . $element - >getAttribute( "nom" ). " \n" ;18 }19 }20 echo " \ntraiter les noms et prenoms des auteurs \n" ;21 $elements = $xpath - >query( "//auteur" ) ;22 if ( ! is null( $elements )) {23 foreach ( $elements as $element ) {24 echo "= >" . $element - >nodeName. " " . $element - >getAttribute( "nom" ).25 " " . $element - >getAttribute( "prenom" ). " \n" ;26 }27 }

63 / 87



Resultat du parcours avec DOMXPath

Resultat parcours avec DOMXPath

traiter les titres=> titre : Apprendre XML en 10 mois=> titre : Learn Java in 10 secondstraiter les noms des auteurs=>auteur Escargot=>auteur Snail=>auteur Fasttraiter les noms et prenoms des auteurs=>auteur Escargot Jean=>auteur Snail Brad=>auteur Fast John

64 / 87



Utilitaire xpath

Definition (xpath -e query file)

xpath est un utilitaire PERL qui permet de selectionner lesbalises d’un fichier XML. Les options en ligne de commandesont :

• -e query requete a executer

• -q mode silencieux

• -s suffix placer le suffixe (par defaut retour chariot) a lafin de chaque ligne

• -p prefix placer le prefixe (par defaut rien) au debut dechaque ligne

xpath

Sous Ubuntu installer le package libxml-xpath-perl

65 / 87



Utilitaire xpath

Definition (xpath -e query file)

xpath est un utilitaire PERL qui permet de selectionner lesbalises d’un fichier XML. Les options en ligne de commandesont :

• -e query requete a executer

• -q mode silencieux

• -s suffix placer le suffixe (par defaut retour chariot) a lafin de chaque ligne

• -p prefix placer le prefixe (par defaut rien) au debut dechaque ligne

xpath

Sous Ubuntu installer le package libxml-xpath-perl

66 / 87



Exemple d’utilisation de xpath

Exercice

trouver le montant total de tous les livres de la bibliotheque :

• montant des livres en euros

• montant des livres en dollars

67 / 87



Exemple d’utilisation de xpath

Solution

1 # !/bin/sh23 cat bibliotheque.xml |grep -v "ˆ < ?" |grep -v "ˆ <\ ! " >bibliotheque2.xml45 total= ‘xpath -e "//prix" -q bibliotheque2.xml |cut -d’ >’ -f2 |\6 cut -d’ <’ -f1 |awk ’ { sum += $1 } ; END { print sum }’‘7 dollars= ‘xpath -e "//prix[@monnaie=’dollars’]" -q bibliotheque2 .xml |\8 cut -d’ >’ -f2 |cut -d’ <’ -f1 |awk ’ { sum += $1 } ; END { print sum }’‘9

10 echo "total = $total"11 echo "dollars = $dollars"1213 euros= ‘expr $total - $dollars‘1415 echo "euros = $euros"

68 / 87



Utilisation de SimpleXML

Definition (SimpleXML)

L’extension SimpleXML fournit des outils tres simples et facilesa utiliser pour convertir du XML en un objet qui peut etremanipule avec ses proprietes et les iterateurs de tableaux.

69 / 87



Exemple de parcours SimpleXML

exemple de parcours avec SimpleXML

1 $xml =simplexml load file( "bibliotheque.xml" ) ;2 print r( $xml ) ;3 foreach( $xml - >livre as $livre ) {4 echo "------------ \n" ;5 echo "titre : " . $livre - >titre. " \n" ;6 $liste auteurs =$livre - >liste auteurs- >auteur ;7 foreach( $liste auteurs as $auteur ) {8 echo "auteur : " . $auteur [ "prenom" ]. " " . $auteur [ "nom" ]. " \n" ;9 }

10 echo "prix : " . $livre - >prix. " " . $livre - >prix[ "monnaie" ]. " \n" ;11 }

70 / 87



Resultat du parcours avec SimpleXML

resultat (premiere partie)

SimpleXMLElement Object ([livre] = > Array (

[ 0] = > SimpleXMLElement Object ([titre] = > Apprendre XML en 10 mois[liste auteurs] = > SimpleXMLElement Object (

[auteur] = > Array ([ 0] = > SimpleXMLElement Object (

[@attributes] = > Array ([nom] = > Escargot[prenom] = > Jean

))[ 1] = > SimpleXMLElement Object (

[@attributes] = > Array ([nom] = > Snail[prenom] = > Brad

))

))[prix] = > 20

)...

))

71 / 87



Resultat du parcours avec SimpleXML

resultat (deuxieme partie)

------------titre : Apprendre XML en 10 moisauteur : Jean Escargotauteur : Brad Snailprix : 20------------titre : Learn Java in 10 secondsauteur : John Fastprix : 25 dollars

72 / 87


XHTML

XHTML

XHTML

73 / 87


XHTML

Interet de HTML

Definition (HTML - HyperText Markup Language)

1 application de SGML

2 cree par Tim Berners-Lee pour le World Wide Web

3 tres facile a apprendre

4 creation de pages HTML possible pour tout le monde

74 / 87


XHTML

XHTML

Definition (XHTML)

1 mise au format XML de HTML

2 bannir les balises de presentation (comme <b>, <i> ,<u>,<font> )

3 rendu (forme) grace au CSS

4 notion de validite d’un document (XHTML / CSS Validator)

5 controle par javascript (navigateur)

75 / 87


XHTML

Conventions XHTML

Conventions• les tags XHTML doivent etre ecrits en minuscule

• tous les tags doivent etre fermes <p> </p>

• pour les tags uniques, on utilise / : <br />

• tout document doit debuter par une DTDhttp ://w3schools.com/xhtml/xhtml dtd.asp

• les images doivent definir le tag alt

• tous les caracteres speciaux doivent etre encodes(http ://w3schools.com/tags/ref entities.asp )

• tous les attributs doivent etre entoures de double quotes

76 / 87


XHTML

Conventions XHTML

Conventions structure et elements de texte• utilisation des <div id=’...’>

• elements de structure du texte :• paragraphe : p• tableaux : table , tr , td• listes : ul , ol , li

• elements de texte : em, strong , blockquote , h1 a h5

77 / 87


XHTML

Prologue XHTML

Prologue

XHTML reposant sur XML, il est recommande d’utiliser endebut de document la balise :< ?xml version="1.0" encoding="ISO-8859-1"?> .

78 / 87


XHTML

DTD du Document XHTML

http://www.w3.org/TR/2002/REC-xhtml1-20020801/

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric t.dtd"

XHTML 1.0 Tansitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans itional.dtd"

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN "SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frame set.dtd"

79 / 87

http://www.w3.org/TR/2002/REC-xhtml1-20020801/


XHTML

Entete d’un Document XHTML

XHTML 1.0 Strict

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric t.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org /1999/xhtml"><head>

<meta http-equiv="Content-type" content="text/html; ch arset=UTF-8" />...

</head>

80 / 87


XHTML

Un mot dur l’habillage des tableaux

• balises elementaires :• <table> creation• <caption> legende• <tr> ligne• <th> cellule entete• <td> cellule

• balises complementaires :• <thead> groupe de cellules entete• <tbody> groupe de cellules de contenu• <tfoot> groupe de cellules bas de tableau

<thead> et <tfoot> doivent etre declares avant <tbody>

81 / 87


DOM et Javascript

DOM et Javascript

DOM et Javascript

82 / 87


DOM et Javascript

DOM et Javascript

DOM et Javascript

Dans le cadre de Javascript on utilise principalement lesfonctions suivantes pour acceder aux elements du document :

• getElementById(string) : retourne l’unique elementd’identifiant specifie

• getElementsByName(string) : retourne une collectiond’elements de nom specifie

• getElementsByTagName(string) : retourne unecollection d’elements pour la balise donnee

Note

cela suppose que les elements a manipuler sont dotes d’un id

83 / 87


DOM et Javascript

DOM et Javascript

DOM et Javascript

Dans le cadre de Javascript on utilise principalement lesfonctions suivantes pour acceder aux elements du document :

• getElementById(string) : retourne l’unique elementd’identifiant specifie

• getElementsByName(string) : retourne une collectiond’elements de nom specifie

• getElementsByTagName(string) : retourne unecollection d’elements pour la balise donnee

Note

cela suppose que les elements a manipuler sont dotes d’un id

84 / 87


DOM et Javascript

Javascript et les evenements du navigateur

evenements du navigateur

On peut associer une fonction javascript lors du declenchementde certains evenements :

• onload : chargement de la page

• onclick , ondblclick

• onfocus , onblur : gain ou perte de focus

• onchange

• onmouseover , onmouseout , onmousemove

• onmouseup , onmousedown

85 / 87


DOM et Javascript

DOM et Javascript

Exemples

voir les exemples sur le site web :http://www.info.univ-angers.fr/pub/richer

86 / 87

http://www.info.univ-angers.fr/pub/richer


DOM et Javascript

Fin

Fin

87 / 87

D veloppement Web - XML, DOM, XHTML › ~richer › ens › l3info › dw_crs5.pdf · Developpement...

Documents

Transcript of D veloppement Web - XML, DOM, XHTML › ~richer › ens › l3info › dw_crs5.pdf · Developpement...