Internationalisation d'un site web

Publié le 30 Juillet 2007

1. Introduction

Nous allons voir dans cet article comment bien concevoir un site web multilangue. De la simple question : comment on fait ? jusqu'au problème du référencement, tout sera traité.

Pour lire cet article agréablement, il est vivement conseillé de connaître au minimum le HTML. La connaissance (même fort simple) d'un langage de programmation (C, PHP ou autre du genre) vous permettra également de comprendre plus facilement certaines notions...

Des connaissances en PHP (ou ASP/ASP.NET) et CSS sont également souhaitables (mais pas obligatoires).

Quant à ceux d'entre vous qui connaissez déjà XML, XSL, XHTML, CSS, PHP (ou ASP.NET) et règles htaccess, cet article ne devrait être qu'une simple formalité.

2. XML : eXtensible Markup Language

Le XML, abbre de eXtensible Markup Language (langage de balisage extensible), est un langage de balisage générique. Sa structure est celle d'un schéma.

Un document XML est principalement composé :

d'une déclaration XML
d'éléments, identifiables par des chevrons (< >)
de commentaires, délimités par

Exemple :


<!-- La déclaration XML -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Le contenu de notre fichier XML -->
<document>
  <!-- Oh ! Un commentaire -->
  <élément1>valeur de l'élément 1</élément>
  <élément1>Répétition de l'élément 1</élément>
  <élément2 xmlns="http://www.example.com">
    <élément21>Hierarchie récursive</élément21>
  </élément2>
</document>

De cet exemple, nous signalerons notamment que :

la déclaration XML n'est obligatoire qu'à partir de la version 1.1
le contenu du document est traité par défaut en UTF-8 ou UTF-16 mais il n'est pas inutile de préciser l'encodage utilisé dans la déclaration XML, ne serait ce que pour le programmeur qui en est en charge
vous pouvez utilisez d'autres encodages, comme l'ISO-8859-1 (principal encodage utilisé en Europe de l'Ouest qui traite notamment les caractères accentués)
un noeud n'est pas forcément unique

Le XML est parent d'un vaste ensemble de sous langages, citons notamment :

HTML (HyperText Markup Language)
XHTML (eXtensible HyperText Markup Language)
XSLT (eXtensible Stylesheet Language Transformations)
RSS (Rich Site Summary)
XUL (XML-based User interface Language)
XAML
MXML

Précisons qu'il est également possible de spécifier un format d'affiche des données XML d'un fichier. Il suffit d'ajouter la ligne suivante juste après la déclaration XML.


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

Cette option ne fonctionne cependant que si le logiciel traitant le fichier XML est équipé d'un processeur XSL. Des navigateurs tels que Internet Explorer, Firefox, Opera, ... sont dotés dès leur installation d'un tel processeur.

3. XSLT : eXtensible Stylesheet Language Transformations

3.1 Brefs rappels sur XHTML

XHTML est une évolution du HTML. Voici les principales différences entre les deux langages :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Exemple HTML 4</title>
<ul>
<li>Des éléments comme HTML, HEAD et BODY sont implicites, leurs balises ouvrantes et fermantes sont optionnelles.</li>
<li>De nombreuses balises fermantes sont optionnelles, notamment pour P (paragraphe) et LI (entrée de liste).
<li>Les noms d'éléments et d'attributs peuvent <EM Class="important">librement</Em> mélanger majuscules et minuscules.</li>
<li>Certains attributs ont une valeur par défaut <input type="checkbox" checked value="...">.</li>
<li>Les guillemets ne sont pas <em class=important>toujours</em> obligatoires autour des valeurs d'attribut.</li>
<li>Les éléments vides n'ont pas de syntaxe fermante <img src="i.png" alt="i">.</li>
</ul>


<!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>Exemple XHTML 1.0</title>
</head>
<body>
<ul>
<li>Tous les éléments doivent être explicitement balisés.</li>
<li>Les balises fermantes ne sont pas optionnelles.</li>
<li>Les noms d'éléments et d'attributs <em class="important">doivent</em> être en minuscules.</li>
<li>Tous les attributs doivent avoir une valeur explicite <input type="checkbox" checked="checked" value="..." />.</li>
<li>Les guillemets sont <em class="important">toujours</em> obligatoires autour des valeurs d'attribut.</li>
<li>Les éléments vides doivent être fermés <img src="i.png" alt="i"/>.</li>
</ul>
</body>
</html>

Code tiré de Wikipedia.

Un document valide XHTML exige notamment :

une DTD : Doc Type Declaration (déclaration du type de document)
une déclaration XMLNS
la présence des balises html, head, title et body dans la page
un encastrement logique des balises (on écrira <b><i>texte</i></b> en XHTML au lieu de <b><i>texte</b></i> qui était autorisé en HTML)

3.2 XSL

Définition Wikipedia :

Une feuille de style XSL est un fichier qui décrit comment doivent être présentés les documents XML basés sur une même DTD ou un même schéma.

Les balises xsl commençent toujours par xsl:. Donnons tout de suite un exemple.

Fichier XML : data.xml


<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="transform.xsl" type="text/xsl"?>
<document>
  <film>
    <titre>Transformers</titre>
    <realisateur>Michael Bay</realisateur>
    <genre>Science fiction</genre>
    <genre>Action</genre>
    <sortie>25/07/2007</sortie>
    <acteur>Shia LaBeouf</acteur>
    <acteur>Megan Fox</acteur>
    <acteur>Josh Duhamel</acteur>
  </film>
  <film>
    <titre>Les Simpson - le film</titre>
    <realisateur>David Silverman</realisateur>
    <genre>Animation</genre>
    <genre>Dessin animé</genre>
    <genre>Famille</genre>
    <genre>Comédie</genre>
    <sortie>25/07/2007</sortie>
    <acteur>Dan Castellaneta</acteur>
    <acteur>Julie Kavner</acteur>
    <acteur>Nancy Cartwright</acteur>
  </film>
  <film>
    <titre>Die Hard 4 - retour en enfer</titre>
    <realisateur>Len Wiseman</realisateur>
    <genre>Action</genre>
    <genre>Policier</genre>
    <sortie>04/07/2007</sortie>
    <acteur>Bruce Willis</acteur>
    <acteur>Justin Long</acteur>
    <acteur>Timothy Olyphant</acteur>
  <acteur>Julie Kavner</acteur>
  </film>
</document>

Ficher XSL : transform.xsl


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>
    <xsl:template match="document">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title>Fiches Films</title>
                <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
            </head>
            <body>
              <xsl:for-each select="film">
                    <div class="film">
                        <div class="titre"><xsl:value-of select="titre" /></div>
                        <div class="sortie"><xsl:value-of select="sortie" /></div>
                        <div class="realisateur"><xsl:value-of select="realisateur" /></div>
                        <div class="acteurs">
                            <xsl:for-each select="acteur">
                              <xsl:value-of select="." />
                            </xsl:for-each>
                        </div>
                        <div class="genre">
                            <xsl:for-each select="genre">
                              <xsl:value-of select="." />
                            </xsl:for-each>
                        </div>
                    </div>
                </xsl:for-each>
            </body>
        </html>    
    </xsl:template>
</xsl:stylesheet>

Fichier CSS : style.css


.film { float:left; clear:left; margin-top:10px; width:500px; background-color:#E4BC70; color:red; padding:10px 5px; }
.titre { float:left; width:340px; padding-left:10px; }
.sortie { float:left; width:150px; text-align:right; }
.realisateur { float:left; width:470px; padding-left:30px; color:#E44E27; }
.acteurs { float:left; width:400px; background-color:#FFFFFF; color:#000000; margin-left:50px; margin-right:50px; }
.genre { float:left; width:400px; background-color:#CCCCCC; color:#333333; margin-left:50px; margin-right:50px; }

Créez ces trois fichiers et ouvrez le fichier data.xml... Surprise ! Les données contenues dans le fichier XML sont organisées et affichées comme une page HTML normale... Voyons voir ce que nous venons de faire...

Tout d'abord, le fichier XML. Celui s'organise selon un schéma simple :

Il est notamment important de remarquer que :

il y a plusieurs balises film
dans un élément film, il y a plusieurs balises genre et acteur
le texte est directement placé entre les balises genre et acteur (il n'y a pas une nouvelle balise de nom texte à l'intérieur)

Pour ainsi dire, on ne connait pas le nombre d'éléments films, d'éléments acteur, ni d'éléments genre. Il va donc falloir, si on veut tout afficher avec notre feuille de style XSL, que l'on utilise un processus itératif : for-each est prévu à cet usage.

Penchons nous à présent sur le fichier XSL.

Ce fichier commence par la déclaration XML standard. Un fichier XSL est donc bien un fichier XML particulier.

Cette déclaration est immédiatement suivie par une balise indiquant que le fichier en cours est une feuille de style XSL et que le processeur XSLT va donc surement avoir du pain sur la planche.

La ligne suivante indique que nous voulons que le document soit généré selon les règles d'un document XML et que son jeu de caractères est l'UTF-8.

Commence ensuite le template dont la référence a été placée sur le premier noeud (document) du fichier XML afin de simplifier les appels suivants.

Le reste du code est assez simple à comprendre. Le processeur XSLT va parcourir chaque noeud film et pour chacun d'entre eux créer un ensemble <div class="film"> ... </div> qui affichera les données du film selon la présentation souhaitée.

Remarquez la balise xsl:value-of qui permet d'afficher la valeur d'une balise (balise titre, balise réalisateur...) grâce à son attribut select. Remarquez également la valeur que doit prendre son attribut select pour afficher un acteur...

3.3 Quelques balises et fonctions XSL

XSL propose de nombreuses balises et fonctions vous permettant de récupérer des données ou des informations de votre fichier XML.

Quelques balises :

xsl:attribute
xsl:choose
xsl:element
xsl:for-each
xsl:if
xsl:otherwise
xsl:param
xsl:value-of
xsl:variable
xsl:when

Quelques fonctions :

count()
current()
document()
lang()
position()

Pour obtenir plus d'informations sur ces balises et fonctions, rendez-vous sur le site du W3C.

4. Créer un site web internationnal

Nous allons créer ici un petit site en deux langues (anglais/français) et allons voir comment procéder pour le rendre facilement modifiable et perfectible (ajout d'une langue, refonte du design...). Inutile de vous dire que nous allons utiliser bien entendu le couplage XML/XSL pour parvenir à un tel résultat. Un petit peu de PHP et de CSS sera également nécessaire...

4.1 La gestion des langues

Nous allons gérer les langues via des fichiers XML.

Le site web sera composé de deux pages présentant chacune un menu vertical indiquant la page sélectionnée.

Ci-dessous, les fichiers XML pour chacune des pages :

Fichier page1.xml

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

<page1>
  
  <!-- Français -->
  <titrepage xml:lang="fr">Bienvenue</titrepage>
  <para xml:lang="fr">
    <titre>Pubs Google</titre>
    <texte>Google AdWords permet d'atteindre les internautes au moment oÃ¹ ils effectuent une recherche sur vos produits et services. Votre site Web enregistre donc des visites de clients potentiels ciblés. La tarification au coût par clic (CPC) signifie que vous payez uniquement lorsque les utilisateurs cliquent sur votre annonce. Elle permet également de contrÃ´ler les coûts plus facilement.</texte>
    <texte>Générez davantage de revenus à partir de votre site Web, tout en fournissant des services et des informations en ligne plus utiles à vos visiteurs. Google AdSenseâ„¢ diffuse automatiquement des annonces textuelles et illustrées, ciblées précisément sur votre site et le contenu de celui-ci. Ces annonces sont si pertinentes qu'elles offrent des informations supplémentaires utiles à vos visiteurs. Et si vous ajoutez la fonctionnalité Google Recherche sur le Web, Google AdSense diffuse également des annonces ciblées sur vos pages de résultats. Google AdSense permet d'augmenter vos revenus avec un minimum d'efforts, et sans coût supplémentaire.</texte>
  </para>
  <para xml:lang="fr">
    <titre>PROJET</titre>
    <texte>Lors de notre premier rendez-vous, nous faisons le point sur le projet que vous désirez nous confier et ses principales caractéristiques.</texte>
  </para>
  
  
  <!-- English -->
  <titrepage xml:lang="en">Welcome</titrepage>
  <para xml:lang="en">
    <titre>Google Ads</titre>
    <texte>Reach people when they are actively looking for information about your products and services online, and send targeted visitors directly to what you are offering. With AdWords cost-per-click pricing, it's easy to control costsâ€”and you only pay when people click on your ad.</texte>
    <texte>Earn more revenue from your website, while providing visitors with a more rewarding online experience. Google AdSenseâ„¢ automatically delivers text and image ads that are precisely targeted to your site and your site contentâ€”ads so well-matched, in fact, that your readers will actually find them useful. And when you add Google WebSearch to your site, AdSense delivers targeted ads to your search results pages too. With AdSense you earn more ad revenue with minimal effortâ€”and no additional cost.</texte>
  </para>
  <para xml:lang="en">
    <titre>PROJECT</titre>
    <texte>When we first meet, we take stock of the project you wish to entrust to us and its main characteristics.</texte>  
  </para>

</page1>

Fichier page2.xml


<?xml version="1.0" encoding="utf-8"?>
<page2>
  <image>http://a69.g.akamai.net/n/69/10688/v1/img5.allocine.fr/acmedia/medias/nmedia/18/62/81/09/18784916.jpg</image>
  <image>http://a69.g.akamai.net/n/69/10688/v1/img5.allocine.fr/acmedia/medias/nmedia/18/62/92/90/18780032.jpg</image>
  <image>http://a69.g.akamai.net/n/69/10688/v1/img5.allocine.fr/acmedia/medias/nmedia/18/63/18/51/18765027.jpg</image>
  
  <titrepage>Page 2</titrepage>
  
  <!-- Français -->
  <texte xml:lang="fr">Quelques films...</texte>
  <lien xml:lang="fr">
    <url>http://www.allocine.fr/film/fichefilm_gen_cfilm=50575.html</url>
    <titre>Die Hard 4 - retour en enfer</titre>
    <texte>Die Hard 4 - retour en enfer</texte>
  </lien>
  <lien xml:lang="fr">
    <url>http://www.allocine.fr/film/fichefilm_gen_cfilm=111112.html</url>
    <titre>Les Simpson - le film</titre>
    <texte>Les Simpson - le film</texte>
  </lien>
  
  <!-- English -->
  <texte xml:lang="en">Some films...</texte>
  <lien xml:lang="en">
    <url>http://www.allocine.co.uk/film/fichefilm_gen_cfilm=50575.html</url>
    <titre>Die Hard 4.0</titre>
    <texte>Die Hard 4.0</texte>
  </lien>
  <lien xml:lang="en">
    <url>http://www.allocine.co.uk/film/fichefilm_gen_cfilm=111112.html</url>
    <titre>The Simpsons Movie</titre>
    <texte>The Simpsons Movie</texte>
  </lien>
  
</page2>

Fichier menu.xml


<?xml version="1.0" encoding="utf-8"?>
<menu>
  <!-- Français -->
  <lien xml:lang="fr">
    <nom>page1</nom>
    <url>?page=page1&amp;lang=fr</url>
    <text>Aller à la page 1</text>
  </lien>
  <lien xml:lang="fr">
    <nom>page2</nom>
    <url>?page=page2&amp;lang=fr</url>
    <text>Aller à la page 2</text>
  </lien>
  
  <!-- English -->
  <lien xml:lang="en">
    <nom>page1</nom>
    <url>?page=page1&amp;lang=en</url>
    <text>Go to page 1</text>
  </lien>
  <lien xml:lang="en">
    <nom>page2</nom>
    <url>?page=page2&amp;lang=en</url>
    <text>Go to page 2</text>
  </lien>
</menu>

Voyons quelles données nous stockons là.

Dans le fichier page1.xml, nous stockons le titre de la page + un certain nombre de paragraphes qui se présentent sous la forme d'un bloc contenant un titre et suivi par différents groupes de textes. Toutes ces données dépendant de la langue, il est important de la préciser. On emploie à cette fin l'attribut xml:lang qui est facilement exploitable ensuite en XSL.

Pour le fichier page2.xml, même principe, sauf que le données indépendantes de la langues (parce qu'on a voulu qu'elles le soient) ont été regroupées.

Dans le fichier menu.xml, nous stockons (dans chacune des langues) :

le texte à afficher pour le bouton du menu
l'url qui lui est attribuée
un indicateur précisant le nom de la page (que nous utiliserons pour savoir si la page affichée correspond au bouton de menu que l'on est train de dessiner)

Conseil : Pensez à bien mettre des commentaires dans vos fichiers XML précisant la langue que vous allez traiter... Cela permet une lecture plus aisée du fichier et permet à des non-codeurs de comprendre sa structure plus facilement.

4.2 Créer les feuilles de styles

Occupons nous à présent des feuilles de styles. D'abord, celles en XSL.

Première chose à remarquer, nous n'avons que deux pages (page1.xml et page2.xml). Le troisième fichier xml sert en effet à créer un menu commun à chacune de ces pages.

Commencez donc par écrire le squelette XSL pour chacune de ces pages (pas pour le menu donc) :

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title></title>
            </head>
            <body>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Complétez les ensuite de manière à afficher les données se trouvant dans les fichiers xml.

Commencez par redéfinir la valeur de l'attribut match (mettez page1 pour le fichier que vous appellerez page1.xsl et page2 pour l'autre)

Occupez vous ensuite du titre de la page (avec l'élément xsl:value-of)

Vous pouvez tout de suite prévoir de rajouter une feuille de style CSS. Ajoutez donc cette ligne : <link href="style.css" type="text/css" rel="stylesheet" media="screen" /> juste après la balise title.

Pour la suite, il va falloir commencer à se soucier des langues (déjà pour le titre de la page, le problème a dû vous effleurer).

Nous allons pour cela ajouter un paramètre dans notre fichier xsl. Pourquoi un paramètre (xsl:param) et pas une variable (xsl:variable) ? Eh bien tout simplement parce qu'une variable en XSL n'est pas modifiable depuis l'extérieur (PHP, ASP.NET) alors qu'un paramètre si ; et c'est ce dont nous avons besoin.

Ajoutez donc un paramètre nommé lang juste après l'élément xsl:output et réglez sa valeur (attribut select) sur ''.

Vous possédez à présent le moyen de connaître, dans vos pages xsl, la langue qui doit être affichée.

Toute variable (un paramètre est une variable particulière) peut être utilisée dans du code XSL (pas HTML). Il suffit pour cela de faire précéder son nom par un dollar $.

Exemple : <xsl:value-of select="$lang" /> affiche la valeur contenue dans la variable (ou paramètre) nommé lang. Par contre, un code du genre <div>$lang</div> affichera simplement $lang.

Accédons à présent à nos données xml en fonction d'une langue bien définie. Si vous regardez bien les fichiers xml, en tête de chaque noeud se trouvant directement dans une zone de langue se trouve un attribut : xml:lang affecté d'une valeur indiquant la langue employée.

C'est cet attribut qui va nous permettre de récupérer facilement la bonne donnée dans nos fichiers XSL. Il suffit d'utiliser pour cela la fonction lang() comme suit :


<xsl:value-of select="titrepage[lang($lang)]" />

Ci-dessous, les trois fichiers xsl complets :

Fichier page1.xsl


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <!-- Pour ajouter le menu (plus tard) -->
    <xsl:include href="menu.xsl" />
    <xsl:output method="xml" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>
    <xsl:param name="lang" select="''" />
    <!-- Nom de la page (doit correspondre à l'un des noms mis dans le fichier menu.xml) : sera utile lors de l'appel du template du menu -->
    <xsl:variable name="page">page1</xsl:variable>
    <xsl:template match="page1">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title><xsl:value-of select="titrepage[lang($lang)]" /></title>
                <link href="style.css" type="text/css" rel="stylesheet" media="screen" />
            </head>
            <body>              
                <!-- On ajoute notre template menu -->
              <xsl:call-template name="menu" />
              <xsl:for-each select="para[lang($lang)]">
                  <h1><xsl:value-of select="titre" /></h1>
                    <xsl:for-each select="texte">
                      <p><xsl:value-of select="." /></p>
                    </xsl:for-each>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Fichier page2.xsl


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:include href="menu.xsl" />
    <xsl:output method="xml" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>
    <xsl:param name="lang" select="''" />
    <xsl:variable name="page">page2</xsl:variable>
    <xsl:template match="page2">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title><xsl:value-of select="titrepage[lang($lang)]" /></title>
                <link href="style.css" type="text/css" rel="stylesheet" media="screen" />
            </head>
            <body>
              <xsl:call-template name="menu" />
              <h1><xsl:value-of select="texte[lang($lang)]" /></h1>
              <div class="images">
                    <xsl:for-each select="image">
                        <!-- Comme on ne peut insérer de code xsl entre guillemets, on est obligé de créer entièrement l'élément img par code xsl. C'est plus long que du code HTML mais la structure est très simple à comprendre -->
                        <xsl:element name="img">
                            <xsl:attribute name="alt"></xsl:attribute>
                            <xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute>
                        </xsl:element>
                    </xsl:for-each>
                    <xsl:for-each select="lien[lang($lang)]">
                      <!-- De même pour les liens... -->
                      <xsl:element name="a">
                            <xsl:attribute name="href"><xsl:value-of select="url" /></xsl:attribute>
                            <xsl:attribute name="title"><xsl:value-of select="titre" /></xsl:attribute>
                            <xsl:value-of select="texte" />
                        </xsl:element>
                    </xsl:for-each>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Fichier menu.xsl


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" encoding="utf-8"/>
    <xsl:template name="menu">
        <div class="menu">
            <xsl:for-each select="document('menu.xml')/menu/lien[lang($lang)]">
              <xsl:element name="a">
                    <!-- On ajoute une variable qui nous donne le nom de la page dont on va ajouter le lien -->
                    <xsl:variable name="cpage"><xsl:value-of select="nom" /></xsl:variable>
                    <!-- Si ce nom correspond à la page que l'on est en train d'afficher, on ajoute un style à notre lien -->
                    <xsl:attribute name="class">
                      lienmenu
                        <xsl:if test="$cpage = $page">
                         selected
                        </xsl:if>
                    </xsl:attribute>
                    <xsl:attribute name="href"><xsl:value-of select="url" /></xsl:attribute>
                    <xsl:value-of select="text" />
                </xsl:element>
            </xsl:for-each>
        </div>
    </xsl:template>
</xsl:stylesheet>

Voilà... Pas si difficile que çà en fin de compte...

4.3 CSS et PHP

Reste encore la CSS (peu développée car là n'est pas l'interêt) :


@charset "utf-8";
/* CSS Document */

body { background-color:#29B9E2; color:#1301F1; }

h1 { width:500px; margin:auto; margin-top:20px; color:#FFCC00; }
p { width:500px; margin:auto; text-align:justify; margin-top:10px; text-indent:15px; }
img { margin-left:10px; }
.images { width:500px; margin:auto; }
a { display:block; }

.menu { position:absolute; width:200px; left:10px; top:10px; background-color:#FFFFFF; text-align:center; padding-top:20px; padding-bottom:20px; }
.lienmenu { color:#66CCFF; text-decoration:none; }
.lienmenu:hover { color:#6666FF; text-decoration:underline overline; }
.lienmenu.selected { color:#CC9900; cursor:default; }
.lienmenu.selected:hover { text-decoration:none; }

A présent, pour coordonner le tout, nous avons besoin d'une page qui se chargera d'attribuer à chaque fichier xml le bon fichier xsl, qui affectera comme il convient le paramètre lang de nos fichiers xsl et bien sûr qui nous permettra de voir le résutlat facilement.

Nous allons faire tout cela via un fichier PHP, un fichier index...

Fichier index.php


<?php

// Récupération des paramètres page et lang
$p = isset($_GET['page']) ? $_GET['page'] : ''; // Rien par défaut
$lang = isset($_GET['lang']) ? $_GET['lang'] : 'en'; // Anglais par défaut

// Tableau de sécurité (pour éviter de charger des pages externes par exemple)
$pages = array(
  '' => 'page1.',
  'page1' => 'page1.',
  'page2' => 'page2.'
);

/********************************************************************/
/* A partir d'ici deux méthodes :                   */
/*  - la pratique valable surtout à partir de PHP 5               */
/*  - la moins pratique valable pour les versions précédentes            */
/* Vous devez en choisir une seule bien sûr.                  */
/********************************************************************/

# ---------------------------------------------------------------------------------------- #

/********************************************************************/
/*                                  */
/*            VERSION POUR PHP 5+               */
/*                                  */
/********************************************************************/

// Chargement du source XML
$xml = new DOMDocument('1.0','utf-8'); // Les paramètres sont facultatifs
$xml->load($pages[$p].'xml');

// Chargement de la feuille de style XSL
$xsl = new DOMDocument('1.0','utf-8');
$xsl->load($pages[$p].'xsl');

// Configuration du transformateur
$proc = new XSLTProcessor();
$proc->importStyleSheet($xsl); // Attachement des règles XSL

$proc->setParameter('', 'lang', $lang); // On passe les paramètres

// On affiche le résultat
echo $proc->transformToXML($xml); 

/********************************************************************/
/*                                                                                                                    */
/*            VERSION POUR PHP 5-                                     */
/*                                                                                                                    */
/********************************************************************/
/*
$xh = xslt_create();

// On charge tous les fichier xml qu'on stocke dans une variable $xml
$file = fopen($pages[$p].'xml','r');
$xml = fread($file, filesize($pages[$p].'xml'));
fclose($file);

// Même chose avec le fichier xsl
$file = fopen($pages[$p].'xsl','r');
$xsl = fread($file, filesize($pages[$p].'xsl'));
fclose($file);

// Pour le paramètre cette fois, il faut faire directement un gros str_replace
$xsl = str_replace('<xsl:param name="lang" select="\'\'" />', '<xsl:param name="lang" select="\''.$lang.'\'" />', $xsl);

$arguments = array(
  '/_xml' => $xml,
  '/_xsl' => $xsl
);

// On demande au processeur xslt de nous calculer le résutlat
$result = xslt_process($xh, 'arg:/_xml','arg:/_xsl', NULL, $arguments);

// Qu'on affiche ensuite
print $result;
*/

# ---------------------------------------------------------------------------------------- #
#   POUR PLUS D'INFOS SUR CES CODES, VEUILLEZ CONSULTER L'AIDE PHP   #
# ---------------------------------------------------------------------------------------- #

?>

Vous avez à présent tous les fichiers nécessaires pour faire fonctionner le site. Testez et approuvez ;).

Cette triple formule : xml/xsl/css vous permet de séparer très facilement le fond de la forme de votre site et dispatcher éventuellement chacune de ces tâches à différentes développeurs (ou non développeurs s'il s'agit simplement de toucher aux fichiers xml). Le CSS ajoute en plus une couche de flexibilité...