Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 9 di 9
  • livello principiante
Indice lezioni

Un sito con XML/XSLT

Realizzare un sito intero usando le tecniche apprese
Realizzare un sito intero usando le tecniche apprese
Link copiato negli appunti

Nelle lezioni precedenti abbiamo esaminato le possibili strategie per incorporare le trasformazioni di stile nella propria piattaforma, alleggerendo di conseguenza il lavoro di formattazione da eseguire con il linguaggio di scripting principale (ASP, PHP, JSP, …), che dovrebbe concentarsi sull’interazione con il backend dell’applicazione.

Talvolta capita invece di non disporre lato-server di una piattaforma di scripting (nel caso ad esempio il sito da realizzare non possieda pagine dinamiche) e di voler ugualmente utilizzare XSLT per governare da un unico punto, il foglio di stile, l’aspetto di tutte le pagine del sito.

In questa lezione introduciamo uno schema generale per realizzare tutto ciò con l’estensione di XT che consente di produrre in output un numero arbitrario di documenti. Quasi tutti i parser XSLT dispongono di tale funzionalità, sebbene espressa in sintassi proprietarie.

Esecuzione batch di XSLT

In questa modalità di utilizzo, le pagine HTML vengono prodotte in locale (sulla macchina dello sviluppatore oppure su di un server di produzione) e solo successivamente sono caricate sul server di pubblicazione.

Per fare ciò è essenziale poter produrre da un singolo foglio di stile una moltitudine di documenti; possibilità che esula dalle specifiche 1.0 del linguaggio di trasformazione ma che, fortunatamente, gli sviluppatori dei vari parser non hanno mancato di realizzare in varie forme grossomodo equivalenti.

Prima di occuparci di queste estensioni, dobbiamo però osservare più da vicino la natura dei dati da trasformare: nei primi due esempi d’applicazione, il sorgente XML era infatti costituito dai contenuti corrispondenti alla pagina richiesta insieme a dati eventualmente estratti da un database.

In quest’ultimo caso si richiede invece che il sorgente contenga le informazioni riguardanti la totalità delle pagine che compongono il sito. La struttura più esterna del sorgente conterrà di conseguenza la descrizione di come le pagine siano organizzate tra loro in sezioni e queste ultime a loro volta compongano il sito.

Esistono molti possibili DTD che realizzano questo. Uno molto semplice è il seguente:

<?xml version="1.0" encoding="UTF-8"?>
<!-- elementi per definire il sito -->
<!ELEMENT sito (sezione*)>
<!ELEMENT sezione (pagina*)>
<!ATTLIST sezione
titolo CDATA #REQUIRED
cartella CDATA #REQUIRED
>
<!ELEMENT pagina (ANY)>
<!ATTLIST pagina
titolo CDATA #REQUIRED
file CDATA #REQUIRED
>
<!-- elementi ed entita' di HTML -->
<!ENTITY % HTML_tags SYSTEM
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
%HTML_tags;

L’attributo cartella dell’elemento sezione consente di suddividere i file prodotti in directory differenti, mentre l’attributo file dell’elemento pagina è essenziale se si desidera produrre un documento HTML differente per ogni pagina. Il sorgente XML diviene quindi lo “scheletro“ dell’intero sito , pronto per essere riempito dei contenuti:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sito SYSTEM "sito.dtd">
<sito>
<sezione cartella="prodotti">
<pagina titolo="Totolo della pagina" file="prod01.html">
...
</pagina>
...
</sezione>
...
</sito>

Man mano che i contenuti finali vengono tradotti in HTML (tipicamente da un word processor), questi devono essere ricondotti al formato XHTML per poter essere inseriti in sito.xml mantenendolo un documento valido: a questo proposito nel DTD abbiamo incluso la versione transitional di XHTML, più “permissiva" rispetto all’organizzazione dei contenuti.

Sebbene questa operazione possa essere condotta a mano da un producer, essa costituisce la parte più noiosa del lavoro e personalmente preferisco sostituirla con l’utilizzo del programma gratuito Tidy, opportunamente configurato per restituire codice XHTML. A questo punto è possibile inserire i contenuti nel sorgente XML.

Può darsi che, nell’elaborare i contenuti, siate tentati di trasformare parte della formattazione in logica dei dati. Una serie di tabelle contenenti le informazioni di prodotti potrebbero ad esempio diventare frammenti XML come il seguente:

<scheda>
<prodotto>...</prodotto>
<descrizione>...</descrizione>
<prezzo>...</prezzo>
...
</scheda>

All’interno del foglio di stile, ci si occuperà in seguito di tradurre il formato proprietario nelle tabelle HTML corrispondenti. L’aggiornamento delle schede prodotto risulterà in questo modo semplificato e anche predisposto ad accogliere contenuti dinamici prelevati da un database.

Le dimensioni del file sito.xml sono destinate ovviamente ad essere notevoli e gestirlo in modo unitario potrebbe risultare sconveniente. Il meccanismo delle entità, esteso enormemente rispetto a quanto consenta HTML, permette di suddividere il sorgente a livello della singola sezione o della singola pagina:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sito SYSTEM "sito.dtd">
<sito>
<sezione cartella="prodotti">
<pagina file="prod01.html">
&pagina1;
</pagina>
</sezione>
<sezione cartella="servizi">
&sezione2;
</sezione>
...
</sito>

Il codice di "sito.dtd" .

...
<!—contenuto pagina 1 -->
<!ENTITY pagina1 SYSTEM "pagina1.xml">
<!—contenuto sezione 2 -->
<!ENTITY sezione2 SYSTEM "sezione2.xml">

Passiamo finalmente a considerare il foglio di stile che verrà applicato ai 5contenuti per produrre l’insieme di pagine. Innanzitutto dobbiamo essere in grado di utilizzare l’estensione fornita da XT, dobbiamo cioè indicarle con un opportuno namespace (sito.xsl):

<?xml version="1.0"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns:xt="http://www.jclark.com/xt" extension-element-prefixes="xt">
...
</xsl:stylesheet>

A questo punto siamo in grado di indicare con il prefisso xt: le funzionalità non presenti nel linguaggio principale, identificato dal prefisso xsl:. Dal momento che intendiamo produrre un documento HTML per ognuno degli elementi pagina, la prima cosa da fare è iterare su di essi:

<xsl:template match="/">
<xsl:apply-templates select="//pagina" mode="crea" />
</xsl:template>

Il percorso XPath “//pagina“ seleziona i discendenti della radice, indicando la modalità “crea" inventata ad hoc. In un successivo template possiamo finalmente fare la conoscenza con l’elemento document dell’estensione considerata:

<xsl:template match="pagina" mode="crea">
<xt:document method="html" href="{parent::sezione/@cartella}/{@file}">
<html>
...
</html>
</xt:document>
</xsl:template>

L’attributo method può assumere i valori “xml", “html" e “text", con l’ovvio effetto di condizionare il formato di output. L’attributo href stabilisce invece il percorso del documento da creare, nel nostro caso il valore indicato dall’attributo file della pagina, preceduto dalla directory specificata nell’attributo cartella della sezione di appartenenza.

All’interno dell’elemento document possiamo ora costruire il contenuto della pagina. Quest’ultimo può avere menu statici, oppure sfruttare la struttura stessa del sorgente XML per realizzarli. Per realizzare una lista di link ai documenti della medesima sezione si può ad esempio utilizzare il codice seguente:

<!-- menu pagine precedenti -->
<xsl:for-each select="preceding-sibling::pagina">
<a href="{parent::sezione/@cartella}/{@file}">
<xsl:value-of select="@titolo" />
</a><br/>
</xsl:for-each>
<!-- menu disattivo della pagina attuale -->
<xsl:value-of select="@titolo" /><br/>
<!-- menu pagine seguenti -->
<xsl:for-each select="following-sibling::pagina">
<a href="{parent::sezione/@cartella}/{@file}">
<xsl:value-of select="@titolo" />
</a><br/>
</xsl:for-each>

Vengono realizzate due liste di collegamenti, corrispondenti alle pagine che precedono e seguono quella attuale, separate dal titolo di quest’ultima privo di un link associato. Per gestire dinamicamente un menu di sezione è sufficiente una piccola modifica al codice appena visto:

<xsl:for-each select="parent::sezione/preceding-sibling::sezione">
<a href="../{@cartella}/{pagina[1]/@file}">
<xsl:value-of select="@titolo" />
</a><br/>
</xsl:for-each>
<xsl:value-of select="parent::sezione/@titolo" /><br/>
<xsl:for-each select="parent::sezione/following-sibling::sezione">
<a href="../{@cartella}/{pagina[1]/@file}">
<xsl:value-of select="@titolo" />
</a><br/>
</xsl:for-each>

In questo caso, i link di ogni sezione condurranno alla prima pagina in esso contenuta, come deducibile dal percorso “../{@cartella}/{pagina[1]/@file}". Così facendo si ha inoltre la sicurezza matematica che i collegamenti tra le pagine del sito siano sempre corretti, dal momento che il percorso riportato nel link non potrà mai differire dal reale nome del file.

Il resto del foglio di stile si occuperà principalmente dell’inserimento dei contenuti all’interno del layout che andrà creandosi all’interno dell’elemento document, come mostrato nel precedente articolo.

Per eseguire con successola trasformazione è necessario che le cartelle indicate in sito.xml esistano realmente (XT crea solo file, non eventuali directory), dopodiché sarà sufficiente digitare dalla linea di comando:

C:...>xt sito.xml sito.xsl

In mancanza di errori nell’esecuzione, otterrete il messaggio:

C:...>xt sito.xml sito.xsl[enter]

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

Vedremo inoltre le directory riempirsi dei documenti corrispondenti alle pagine. Il sorgente XML può venire esteso con nuovi elementi che permettano, ad esempio, di generare in modo automatico i documenti HTML per le finestre in popup, che in genere richiedono noiosi copia-e-incolla.

Un esempio reale di utilizzo di queste tecniche è il sito della galleria d’arte GAS|artgallery, aggiornato dall'autore della guida. Pur essendo un prodotto totalmente statico, la mole d’ogni aggiornamento (fino a 200 documenti da produrre o modificare ogni volta) ha spinto l'autore a centralizzare il tutto in una coppia di file XML/XSLT.

Ti consigliamo anche