Bienvenue!

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 »


« Mise à niveau : le web en 2003 »« Mise à niveau : le web en 2003 »


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>

Paragraphe de texte

</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"> Ceci est un paragraphe de texte en italique gras gris. Ceci est un paragraphe de texte rouge. </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;

}


.classe

{

color: #ff0000;

font-family: Arial, Verdana;

}


#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"> Ceci est un paragraphe de texte en italique gras gris. Ceci est un paragraphe de texte rouge. </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> Ceci est un paragraphe de texte en italique gras gris. Ceci est un paragraphe de texte rouge. </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>



<iug>

<glilvb>

<element>voici un élément</element>

<asdf>encore un autre élément</asdf>

<qwer type="special">avec un attribut</qwer>

</glilvb >

</iug>



<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


<!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>

Paragraphe de texte

</body>

</html>

De HTML vers XHTMLDe HTML vers XHTML

Les balises doivent être fermées devient <hr> devient <hr /> <img> devient <img />

De HTML vers XHTMLDe HTML vers XHTML

Trouvez l’erreur : texte texte <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 ! »


Deuxième partie : Deuxième partie : Site dynamique avec XMLSite dynamique avec XML

Documents

Bienvenue!