vai al contenuto della pagina
Se riesci a leggere questo messaggio il tuo browser potrebbe non essere in grado di leggere e intepretare correttamente i css. Alcuni browser che interpretano i css in modo corretto sono Opera, Safari e Firefox che sono disponibili su diverse piattaforme.

Costruire un sito con xml #2

Inserito da Marco, il 25 Mar, sotto Tutorial, XML,

Nel precedente articolo spiegavo come creare la pagina vera e propria, mentre ora spiegherò come inserire il file xsl che è responsabile della grafica e della “programmazione xml” se così vogliamo definirla. Per esempio, il foglio xsl si occuperà della generazione dei tag xhtml necessari ai vari tag semantici di xml.

Senza indugi quindi procediamo con lo sviluppo:

Innanzitutto bisogna includere il file xsl nel foglio xml, per cui, riapriamo il foglio creato nel precedente tutorial e sotto la prima riga andiamo a mettere:



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

Questo includerà il file xsl. Come potete vedere viene trattato come un foglio di presentazione.

Ora possiamo pure chiudere il file xml, ed aprire un nuovo file chiamato style.xsl, in cui inserire innanzitutto queste intestazioni:



<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="html" indent="yes"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN” />

Come si può notare è molto simile ad un doctype per l’html, ed infatti svolge la stessa identica funzione.

Proseguendo oltre:



<xsl:template match="/">

Questo è molto importante perchè racchiude tutto il template html, e infatti viene chiuso dopo </html>

Ora possiamo partire con l’htm vero e proprio. Ho usato per sveltezza e comodità un layout della serie Gala di html.it



<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><xsl:value-of select="page/header/title" /></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1” />
</head>
<body>
<div id="container">
<div id="header">
<h1><xsl:value-of select="page/header/title" /></h1>
</div>

Come si può notare in questa prima parte ci sono degli elementi che non sono propriamente html. Sono richiami xml, e come tali, cercano una stringa nel file xml e la inseriscono.
Nel caso di page/header/title cercherà la stringa di testo dentro <page>  <header>  <title> e la inserirà.



<div id="wrapper">
<div id="content">
<div id="news">
<xsl:for-each select="page/content/post">
<h2><xsl:value-of select="date" /></h2>
<p><xsl:apply-templates select="text"/></p>
</xsl:for-each>
 </div>
</div>
</div>

Questa è la funzione vera e propria. Infatti lui cercherà gli elementi dati dentro il file xml e li ripeterà fino a che non sono finiti. Per essere molto chiari, in un blog questa parte l’iterazione col database che estrapola i dati contenuti e li mostra rendendoli aggraziati con html.



<div id="footer">
<p>Copyright 2008.</p>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet> 

Quest’ultimo blocco chiude il tutto.

Per ora questo è tutto, nell’ultima parte di questa serie spiegherò come inserire il foglio di stile e alcune considerazioni tipo i motori di ricerca.