Bienvenue

1
Bienvenue!
www.ixiasoft.com
2
Qui suis-je?

• Webmestre depuis 1994
• Café Internet en 1996
• Commerce électronique
• Gestion de contenu web
• Marketing interactif
• Burn out!
• Pause
• IXIASOFT

3
XML Étude pratique 
www.ixiasoft.com
4
Mise à niveau le web en 2003 
www.ixiasoft.com
5
Mise à niveau technique

• HTML, XHTML et XML
• Feuilles de style CSS
• XML et XSLT

6
HTML 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
  linformation
• Un document XML peut être combiné à dautres
  documents

7
HTML

• Format de distribution pour le web

8
Document HTML
lthtmlgt ltheadgt lttitlegtTitre de mon
document HTMLlt/titlegt lt/headgt ltbodygt
ltpgtParagraphe de textelt/pgt lt/bodygt lt/htmlgt
9
Document HTML mis en forme
lthtmlgt ltheadgt lttitlegtTitre de mon
documentlt/titlegt lt/headgt ltbody
bgcolor"FFFFFF" text"333333"gt ltpgt ltbgt
ltigtCeci est un paragraphe de texte en italique
gras gris.lt/igt lt/bgt lt/pgt ltpgt ltfont
color"CC0000"gtCeci est un paragraphe de texte
rouge.lt/fontgt lt/pgt lt/bodygt lt/htmlgt
10
CSS

• Cascading Style Sheet...

11
Feuilles 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

12
Exemple de CSS
body background-color ffffff
13
Exemple de CSS
.classe color ff0000 font-family Arial,
Verdana
14
Exemple de CSS
selecteur color ff0000 font-family
Arial, Verdana
15
Mise en page avec HTML
lthtmlgt ltheadgt lttitlegtTitre de mon
documentlt/titlegt lt/headgt ltbody
bgcolor"FFFFFF" text"333333"gt ltpgt ltbgt
ltigtCeci est un paragraphe de texte en italique
gras gris.lt/igt lt/bgt lt/pgt ltpgt ltfont
color"CC0000"gtCeci est un paragraphe de texte
rouge.lt/fontgt lt/pgt lt/bodygt lt/htmlgt
16
Mise en page avec HTML et CSS
lthtmlgt ltheadgt lttitlegtTitre de mon
documentlt/titlegt ltlink rel"stylesheet"
href"feuilledestyle.css"gt lt/headgt ltbodygt ltp
class"grosgras"gtCeci est un paragraphe de texte
en italique gras gris.lt/pgt ltp
class"attention"gtCeci est un paragraphe de texte
rouge. lt/pgt lt/bodygt lt/htmlgt
17
XML

• La donnée pure,
• sans maquillage

18
Document XML
lt?xml version"1.0" encoding"UTF-8"?gt ltdocumentgt
ltelementsgt ltelementgtvoici un
élémentlt/elementgt ltelementgtencore un autre
élémentlt/elementgt ltelement type"special"gtah!
un attribut!lt/elementgt lt/elementsgt lt/documentgt
19
Document XML
lt?xml version"1.0" encoding"UTF-8"?gt ltiuggt
ltglilvbgt ltelementgtvoici un élémentlt/elementgt
ltasdfgtencore un autre élémentlt/asdfgt ltqwer
type"special"gtavec un attributlt/qwergt lt/glilvb
gt lt/iuggt
20
Document XML
lt?xml version"1.0" encoding"UTF-8"?gt ltiuggt
ltglilvbgt ltelement num"1"gtvoici un
élémentlt/elementgt ltelement num"2"gtencore un
autre...lt/elementgt ltelement num"3"gtParty
d'éléments!lt/elementgt lt/glilvb gt lt/iuggt
21
Outils XML

• Produire et gérer du contenu XML

22
XHTML

• L'évolution du HTML vers le XML

23
Document XHTML
lt?xml version"1.0" encoding"UTF-8"?gt lt!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt lthtml xmlns"http//www.w3.org/1999/xhtml"gt
ltheadgt lttitlegtTitre du document XHTMLlt/titlegt
lt/headgt ltbodygt ltpgtParagrapheltbr/gtde textelt/pgt
lt/bodygt lt/htmlgt
24
De HTML vers XHTML

• Les balises doivent être fermées
• ltbrgt devient ltbr /gt
• lthrgt devient lthr /gt
• ltimggt devient ltimg /gt

25
De HTML vers XHTML

• Trouvez lerreur
• ltbgtltigttextelt/bgtlt/igt
• ltfont size2gttextelt/fontgt
• ltitem catgt1548231-684321lt/item catgt

26
XPath

• L'expression de la structure

27
XPath

• Similaire aux adresses Internet
• Représentation de la structure XML
• Permet de naviguer dans larborescence

28
XSL

• eXtensible Style Sheet Language

29
Feuilles de style XSL

• Permettent de séparer le contenu du contenant
• Permettent de manipuler la structure dun
  document
• Permettent de personnaliser la présentation du
  contenu

30
XSLT

• eXtensible Style Sheet Language Transformation

31
Transformation XSLT

• Mise en forme d'un document XML
• Stencil pour l'affichage
• Côté client ou côté serveur

32
Bon appétit ! 
www.ixiasoft.com
33
Deuxième partie Site dynamique avec XML
www.ixiasoft.com