pluriTAL – BLOG Master pluriTAL [ParisX, ParisIII, INALCO]

Comment créez votre site de document structuré

Posted in pluriTAL by pluritaluser on 23 mai 2009

Bonjour Françoise et tous mes camarades,

Suite à votre demande j’ai rédigé ce petit tutorial et espérant qu’il vous aide à faire votre site des documents structurés.

En effet, le site web qu’on doit faire nécessite nos connaissances en html/css et les connaissances qu’on doit l’acquérir à travers surtout les exercices de TP XSLT.

Dans la suite, nous allons voir un petit exemple dont nous allons créer une pages web en utilisant un fichier XML, un fichier XSLT et un fichier CSS.

Tout d’abord, on crée un fichier xml bien structuré qui contient toutes les informations et les liens qu’on veut les mettre. Vous savez le choix des balises dans le xml est arbitraire donc vous créez votre page « index.xml » comme vous voulez à condition qu’il soit bien formé.

Dans notre exemple, le document suivant que je l’ai appelé index.xml présente l’enonce et la solution d’exercice1 de TP XPATH.

Voici notre exemple index.xml :

<?xml version="1.0" encoding="UTF-8"?>
<rapport>
    <page titre="Accueil" status="nav" link="ACCUEIL.xml"/>
    <page titre="XML" status="nav" link="XML.xml"/>
    <page titre="XPATH" status="cour" link="XPATH.xml">
	        <section titre="result_bio-v3.xml">
            <exercice>
                <enonce>Rechercher tous les SN</enonce>
                <solution><code><![CDATA[//SN]]></code></solution>
            </exercice>
            <exercice>
                <enonce>Rechercher tous les SV</enonce>
                <solution><code><![CDATA[//SV]]></code></solution>
            </exercice>
            <exercice>
                <enonce>Rechercher tout élément ORGANIZATION</enonce>
                <solution><code><![CDATA[//ORGANIZATION]]></code></solution>
            </exercice>
            <exercice>
                <enonce>Rechercher tout élément LOCATION</enonce>
                <solution><code><![CDATA[//LOCATION]]></code></solution>
            </exercice>

        </section>
</page>
<page titre="XSLT" status="nav" link="XSLT.xml"/>
</rapport>

Aprés comme nous avons fait dans le TP XSLT, nous créons tous d'abord la feuille de style xslt pour cette
 page.
Pour notre exemple la feuille de style XSL est la suivante:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
<xsl:output method="html"/>

<!-- ******************* impression de la structure HTML *********************** -->

<xsl:template match="rapport">

    <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

        <head>
            <title><xsl:value-of select="info/titre"/></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
           <!-- L'appel au feuille de style CSS -->
           <link rel="stylesheet" href="rapport_fichiers/style.css"/>
        </head>

        <body>
            <div id="entete">
           <h2 style="color:#000000;"> Site Documents Structurés</h2>
            </div>

            <div id="navigation">
                <xsl:call-template name="navigation"/>
            </div>

            <div id="espace_de_travail">
                <xsl:apply-templates select="page"/>
            </div>

            <div id="footer">
                Présentation faite par <b><xsl:value-of select="info/nom"/></b>,
                <xsl:value-of select="info/e-mail"/>, <xsl:value-of select="info/date"/>
            </div>
        </body>

    </html>
</xsl:template>

<!-- ******************* impression des onglets *********************** -->

<xsl:template name="navigation">
    <xsl:for-each select="page">
        <a>
            <xsl:attribute name="class">
                <xsl:value-of select="@status"/>
            </xsl:attribute>

            <xsl:attribute name="href">
                <xsl:value-of select="@link"/>
            </xsl:attribute>

            <xsl:value-of select="@titre"/>
        </a>
        <xsl:text> </xsl:text>
    </xsl:for-each>
</xsl:template>

<!-- ******************* impression page *********************** -->

<xsl:template match="page">
    <xsl:if test="@status='cour'">
        <h2><xsl:value-of select="./@titre"/></h2>
        <xsl:for-each select="section">
            <h3><xsl:value-of select="./@titre"/></h3>
            <xsl:apply-templates/>
            <h4 align="right"><a href="#entete">remonter</a></h4>
        </xsl:for-each>
    </xsl:if>
</xsl:template>

<!-- ******************* impression section *********************** -->

<xsl:template match="commentaire">

    <p><xsl:apply-templates/></p>

</xsl:template>

<xsl:template match="exercice">

    <p><b><xsl:number format="1"/>.</b><xsl:apply-templates/></p>

</xsl:template>

<!-- ******************* impression exercice *********************** -->

<xsl:template match="enonce">

    <b><xsl:value-of select="."/></b><br/>

</xsl:template>

<xsl:template match="solution">

    <p><xsl:apply-templates/></p>

</xsl:template>

<xsl:template match="prog">
    <blockquote>
        <pre>
            <xsl:apply-templates/>
        </pre>
    </blockquote>
</xsl:template>

<!-- ******************* mise en page bold/italic/code *********************** -->

Après n'oubliez pas d'ajouter l'appel au feuille de style dans le fichier index.xml comme nous voyons
dans notre exemple:
<?xml-stylesheet type="text/xsl" href="stylesheet.xsl"?>
Maintenant vous pouvez tester et voir que votre fichier index.xml est bien transformé.
La résultat n'est pas très agréable. C'est pour cela nous allons faire appel au css pour que notre
fichier soit beaucoup mieux.
Puisque les transformation se fait en utilisant une feuille XSLT. Donc au niveau de feuille de style XSLT
aussi qu'il faut appliquer le CSS.
Il existe 3 méthodes pour appliquer les classes CSS, la meilleur méthode consiste à créer un fichier
style.css qui contient tous les classes CSS que vous voulez l'appliquer sur stylesheet.xsl.
Afin de faire un appel à style.css dans stylesheet.xsl.
L'appel se fait en ajoutant la ligne suivante dans votre fichier stylesheet.xsl
<link rel="stylesheet" href="rapport_fichiers/style.css"/>

Voici un exemple de fichier style.css:
body
{
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
padding:15px;

}

#entete
{
width:700px;
height: 100px;
margin:auto;
border-color:#5d6c79;
border-style:solid;
border-width:1px;
border-bottom-style:solid;

padding-left:15px;
padding-right:15px;
background-repeat:repeat-x;
background-position:top;
background-color:#ffffff;
}
a.nav
{
padding-left:25px;
padding-right:25px;
border-color:#5d6c79;
border-style:solid;
border-width:1px;
text-align:center;
background-color:#fdb57a;
}

a.nav:hover
{
padding-left:25px;
padding-right:25px;
border-color:#5d6c79;
border-style:solid;
border-width:1px;
text-align:center;
background-color:#ffffff;
}
Maintenant, vous avez une page web très agréable :).
Enfin si vous avez bien compris vous pouvez utilisez ce exemple pour faire vos sites.
Et comme a dit M. Fleury « n'hésitez pas à voir les travaux des années derniére »
pour inspiré et prendre des bonnes idées.
Remarque importante: Ce exemple est extrait de site de Ivan Smilauer (2006-2007)

                                     Bon courage
                                     Mourad Aouini
Publicités

Une Réponse

Subscribe to comments with RSS.


Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :