View
104
Download
0
Category
Preview:
Citation preview
Bienvenue!Bienvenue!
www.ixiasoft.comwww.ixiasoft.com
Qui suis-je?Qui suis-je?
Webmestre depuis 1994 Café Internet en 1996 Commerce électronique Gestion de contenu web Marketing interactif Burn out! Pause IXIASOFT
« XML : Étude pratique »« XML : Étude pratique »
www.ixiasoft.comwww.ixiasoft.com
« Mise à niveau : le web en 2003 »« Mise à niveau : le web en 2003 »
www.ixiasoft.comwww.ixiasoft.com
Mise à niveau techniqueMise à niveau technique
HTML, XHTML et XML Feuilles de style CSS XML et XSLT
HTML et XMLHTML et XML
Le HTML gère le contenu et la présentation
Le HTML doit être affiché dans un fureteur
Un document HTML est un document final et a une structure fixe
Le XML utilise des balises purement sémantiques
Le XML est une façon universelle d’échanger de l’information
Un document XML peut être combiné à d’autres documents
HTMLHTML
Format de distribution pour le web
Document HTMLDocument HTML
<html>
<head>
<title>Titre de mon document HTML</title>
</head>
<body>
<p>Paragraphe de texte</p>
</body>
</html>
Document HTML mis en formeDocument HTML mis en forme
<html> <head> <title>Titre de mon document</title> </head> <body bgcolor="#FFFFFF" text="#333333"> <p> <b> <i>Ceci est un paragraphe de texte en italique gras gris.</i> </b> </p> <p> <font color="#CC0000">Ceci est un paragraphe de texte rouge.</font> </p> </body></html>
CSSCSS
Cascading Style Sheet...
Feuilles de style CSSFeuilles de style CSS
CSS gère la présentation Permet de séparer le contenu et la
présentation Concept : Classes et sélecteurs Cascading Style Sheet : hiérarchiser le look
Exemple de CSSExemple de CSS
body
{
background-color: #ffffff;
}
Exemple de CSSExemple de CSS
.classe
{
color: #ff0000;
font-family: Arial, Verdana;
}
Exemple de CSSExemple de CSS
#selecteur
{
color: #ff0000;
font-family: Arial, Verdana;
}
Mise en page avec HTMLMise en page avec HTML
<html> <head> <title>Titre de mon document</title> </head> <body bgcolor="#FFFFFF" text="#333333"> <p> <b> <i>Ceci est un paragraphe de texte en italique gras gris.</i> </b> </p> <p> <font color="#CC0000">Ceci est un paragraphe de texte rouge.</font> </p> </body></html>
Mise en page avec HTML et CSSMise en page avec HTML et CSS
<html> <head> <title>Titre de mon document</title> <link rel="stylesheet" href="feuilledestyle.css"> </head> <body> <p class="grosgras">Ceci est un paragraphe de texte en italique gras gris.</p> <p class="attention">Ceci est un paragraphe de texte rouge. </p> </body></html>
XMLXML
La donnée pure,
sans maquillage
Document XMLDocument XML
<?xml version="1.0" encoding="UTF-8"?>
<document>
<elements>
<element>voici un élément</element>
<element>encore un autre élément</element>
<element type="special">ah! un attribut!</element>
</elements>
</document>
Document XMLDocument XML
<?xml version="1.0" encoding="UTF-8"?>
<iug>
<glilvb>
<element>voici un élément</element>
<asdf>encore un autre élément</asdf>
<qwer type="special">avec un attribut</qwer>
</glilvb >
</iug>
Document XMLDocument XML
<?xml version="1.0" encoding="UTF-8"?>
<iug>
<glilvb>
<element num="1">voici un élément</element>
<element num="2">encore un autre...</element>
<element num="3">Party d'éléments!</element>
</glilvb >
</iug>
Outils XMLOutils XML
Produire et gérer du contenu XML
XHTMLXHTML
L'évolution du HTML vers le XML
Document XHTMLDocument XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre du document XHTML</title>
</head>
<body>
<p>Paragraphe<br/>de texte</p>
</body>
</html>
De HTML vers XHTMLDe HTML vers XHTML
Les balises doivent être fermées <br> devient <br /> <hr> devient <hr /> <img> devient <img />
De HTML vers XHTMLDe HTML vers XHTML
Trouvez l’erreur : <b><i>texte</b></i> <font size=2>texte</font> <item cat>1548231-684321</item cat>
XPathXPath
L'expression de la structure
XPathXPath
Similaire aux adresses Internet Représentation de la structure XML Permet de naviguer dans l’arborescence
XSLXSL
eXtensible Style Sheet Language
Feuilles de style XSLFeuilles de style XSL
Permettent de séparer le contenu du contenant Permettent de manipuler la structure d’un
document Permettent de personnaliser la présentation du
contenu
XSLTXSLT
eXtensible Style Sheet Language Transformation
Transformation XSLTTransformation XSLT
Mise en forme d'un document XML Stencil pour l'affichage Côté client ou côté serveur
« Bon appétit ! »« Bon appétit ! »
www.ixiasoft.comwww.ixiasoft.com
Deuxième partie : Deuxième partie : Site dynamique avec XMLSite dynamique avec XML
www.ixiasoft.comwww.ixiasoft.com
Recommended