
IWA/HWG è un'Associazione professionale no profit riconosciuta leader mondiale nella fornitura dei principi e delle certificazioni di formazione per i professionisti della Rete Internet; è presente in 100 paesi, con 130 sedi ufficiali in rappresentanza di più di 165.000 associati.




Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Gabriele Romanato inizia la sua carriera sul Web nel 2007 con la pubblicazione del sito CSS Zibaldone. Da sempre interessato in standard del Web (Ajax, CSS, DOM, ECMAScript, SVG, XHTML, XML, XSLT tra gli altri) e linguaggi di programmazione (JavaScript, PHP, Python, Java, C++), attualmente collabora con Html.it con articoli e post sugli standard del Web. Collabora inoltre alla CSS Test suite del W3C.
Nessun logo presente.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Il ruolo di XML nel panorama dei blog odierni appare limitato al solo utilizzo dei formati RSS e Atom.
Nella loro forma più semplice, questi formati forniscono informazioni sulla risorsa a cui fanno riferimento. Il seguente estratto mostra un frammento RSS:
<item><title>Articolo</title><link>http://esempio.com/articoli/articolo</link><description>Descrizione dell'articolo</description><pubDate>Wed, 21 October 2009 13:30:00 +0200</pubDate><category>Articoli</category></item>Questo frammento fornisce informazioni su un articolo di un ipotetico blog, quali il titolo, l'URL, una descrizione testuale, la data di pubblicazione e la categoria di appartenenza.
Possiamo dire che l'uso di XML nei blog di oggi si esaurisce in questo utilizzo.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
L'uso dei formati RSS e Atom costituisce già un ottimo punto di partenza, ma il ruolo potenziale di XML non si esaurisce qui. XML è stato concepito per due scopi:
XML è un formato indipendente dalla piattaforma e dal software che lo utilizza. Qualsiasi applicazione o piattaforma che lo riconosca è in grado di utilizzarlo. Per esempio, immaginando di avere un elenco di libri sotto forma di un documento XML con la seguente struttura:
<?xml version="1.0" encoding="utf-8"?><books><book><title>Ajax. The definitive guide</title><author>Anthony T. Holdener III</author><isbn>0-596-52838-8</isbn><url>http://www.oreilly.com/catalog/9780596528386</url></book><!--omissis--><books>possiamo importarlo direttamente in Microsoft Access, come mostrato di seguito:

e visualizzarne correttamente la struttura sotto forma di una normale tabella di database:

Non importa se ci troviamo su un computer fisso, un laptop, un palmare o un cellulare: il risultato sarà il medesimo, e su qualsiasi applicazione che offra una qualsivoglia modalità di integrazione XML.
C'è di più: usando XML sarebbe possibile esportare i nostri contenuti da un sito all'altro e da un database all'altro , per esempio salvando i dati del nostro sito locale e poi integrandoli con la versione online dello stesso. Un CMS che supporti questa caratteristica potrebbe integrare la voce Importa XML (o Esporta) tra le sue funzioni. Al momento i moderni CMS permettono di integrare i contenuti presenti su altri blog, ma lo sviluppatore non ha il controllo totale sulla procedura. Tramite XML, si potrebbe editare il template per l'esportazione o l'importazione, evitando così di dover passare per la verifica della corretta importazione (o esportazione) dei contenuti.
XML può essere esteso: ciò significa che tramite questo linguaggio è possibile generare nuovi linguaggi. Alcuni esempi di linguaggi sono:
XHTML è la naturale evoluzione dell'HTML ed è basato sulla grammatica strict di XML. Servito come
application/xhtml+xml, gode di tutti i benefici del formato XML.
HTML 5 prende in prestito lo spirito di XML, in particolare nella definizione dei nomi degli elementi, che risentono in alcuni
casi dell'influenza della DTD di DocBook (come l'elemento section, ad esempio) e di XHTML 2. Servito con un Content-Type
di tipo XML, gode come XHTML di tutti i benefici derivanti da XML.
RDF è un linguaggio utilizzato per la descrizione di risorse ed è l'espressione più alta del web semantico. È forse uno dei migliori esempi di utilizzo di XML in senso semantico.
È lecito supporre che nuovi linguaggi nasceranno lungo il solco di XML. Per esempio, dato che Google utilizza molto le site maps per l'indicizzazione dei nuovi siti web, non è azzardato ipotizzare la creazione di un linguaggio che definisca la struttura di una site map. Un tale linguaggio potrebbe ipoteticamente presentarsi come segue:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE SiteMap PUBLIC "-//Google//DTD SiteMap XML V1.0//EN" "http://www.google.com/sitemap/dtd/1.0/sitemap.dtd"><site><title>Mio sito</title><url>http://www.miosito.com</url> <webmaster>Gabriele Romanato</webmaster><owner>Gabriele Romanato</owner><directory><title>articoli</title><url>http://www.miosito.com/articoli</url><created>Wed, October 21 2009 13:30:00 +0200</created><modified>Wed, October 21 2009 13:30:00 +0200</modified><documents><doc>...</doc><doc>...</doc></documents></directory><--omissis--></site>Queste sono solo alcune delle potenzialità di XML. Il futuro ci dirà verso quali nuovi traguardi ci potrà condurre questo linguaggio.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Nel 1999 il W3C si pose il problema di come presentare i documenti XML. Avere semplicemente una struttura flessibile e potente non era ovviamente abbastanza: occorreva presentarne i contenuti agli utenti.
Come prima soluzione si decise di sfruttare uno standard esistente (i CSS) a cui delegare la presentazione dei documenti XML. I CSS applicati ad XML tengono conto di alcune differenze esistenti tra questo linguaggio di marcatura ed altri linguaggi (come HTML):
display#box gli autori dovranno usare i selettori di attributoÈ possibile specificare un foglio di stile per un documento XML tramite la seguente istruzione di elaborazione (PI, Processing Instruction) da inserire immediatamente dopo il prologo XML:
<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet href="style.css" type="text/css"?>Usando come esempio il codice XML visto in precedenza per il nostro catalogo di libri, possiamo specificare i seguenti stili per tale documento:
books {display: table;width: 100%;margin: 1em 0;border: 1px solid #666;border-collapse: collapse;}book {display: table-row;}title, isbn, url, author {display: table-cell;width: 25%;border: 1px solid #444;}books > book:first-child title:before {content: "Title";display: block;font-weight: bold;border-bottom: 1px solid #444;width: 100%;}books > book:first-child isbn:before {content: "ISBN";display: block;font-weight: bold;border-bottom: 1px solid #444;width: 100%;}books > book:first-child url:before {content: "URL";display: block;font-weight: bold;border-bottom: 1px solid #444;width: 100%;}books > book:first-child author:before {content: "Author(s)";display: block;font-weight: bold;border-bottom: 1px solid #444;width: 100%;}e otteniamo la seguente presentazione:

Tuttavia, i CSS presentano il grosso limite di funzionare al meglio solo con documenti semplici. Laddove si raggiunge un seppur minimo grado di complessità, i CSS mostrano tutti i loro limiti. Nell'esempio precedente, abbiamo emulato le intestazioni di tabella usando il contenuto generato. Va detto che questa soluzione opera solo sulla presentazione del documento, e non altera la struttura del documento originale. In questo caso, tuttavia, sarebbe stato opportuno ottenere delle vere intestazioni di tabella, operando cioè sulla struttura del documento stesso.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
I limiti dei CSS resero chiaro il bisogno di operare anche sulla struttura di un documento XML, e fu così che nel 1999 nacque la prima versione di XSLT, l'eXtensible Stylesheet Language for Transformations. Il nome non deve trarre in inganno: questo linguaggio non opera sulla presentazione di un documento XML, ma sulla sua struttura, trasformando il documento d'origine in una nuova struttura (HTML, XML o di testo). Ci occuperemo qui della trasformazione di una struttura XML in una HTML.
Si tenga presente che una volta trasformato un documento XML in un documento HTML, tutte le differenze nel rendering e negli stili CSS vengono a cadere. Un programma utente è quindi in grado di:
Un foglio di stile XSLT viene collegato al documento XML da trasformare con la medesima istruzione di elaborazione usata per un foglio di stile CSS. Esempio:
<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet href="style.xsl" type="text/xsl"?>Usando come esempio il nostro catalogo di libri, possiamo trasformare il documento XML d'origine in un documento HTML in cui gli elementi vengano a formare una normale tabella. Ecco come:
<?xml version="1.0" encoding="utf-8" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html"/><xsl:template match="/"><html><head><title>Books</title></head><body><xsl:apply-templates /></body></html></xsl:template><xsl:template match="books"><table border="1" cellpadding="2" width="100%"><tr><th scope="col">Title</th><th scope="col">Author(s)</th><th scope="col">ISBN</th><th scope="col">URL</th></tr><xsl:apply-templates/></table></xsl:template><xsl:template match="book"> <tr><xsl:apply-templates/></tr></xsl:template><xsl:template match="title"><td><xsl:value-of select="." /></td></xsl:template><xsl:template match="author"><td><xsl:value-of select="."/></td></xsl:template><xsl:template match="isbn"><td><xsl:value-of select="."/></td></xsl:template><xsl:template match="url"><td><a><xsl:attribute name="href"><xsl:value-of select="."/></xsl:attribute><xsl:value-of select="."/></a></td></xsl:template></xsl:stylesheet>Il risultato è il seguente:

Come si può notare, questa tabella presenta anche dei link alle pagine di riferimento dei libri. Nella versione CSS, non era stato possibile creare dei link e gli URL erano rimasti allo stato testuale. Grazie a XSLT, è possibile compiere questa e molte altre operazioni che si rivelano essere di estrema utilità nell'àmbito dello sviluppo Web.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Dato che i CSS e XSLT operano su due livelli diversi, è possibile usarli contemporaneamente per definire la struttura e la presentazione di un documento XML. Tornando all'esempio precedente, possiamo usare il seguente foglio di stile:
table {width: 100%;border: 3px double #777;border-collapse: collapse;font: 76% Arial, sans-serif;}th, td {width: 25%;border: 1px solid #777;padding: 0.3em;}th {background: #777;color: #fff;text-align: left;}collegandolo al documento XML attraverso il nostro foglio di stile XSLT, in questo modo:
<xsl:template match="/"><html><head><title>Books</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /></head><body><xsl:apply-templates /></body></html></xsl:template>Il risultato è il seguente:

Come si può notare, la tabella viene presentata secondo gli stili specificati nel foglio di stile CSS, mentre la sua struttura viene definita nel foglio di stile XSLT.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Una volta stabilito come i CSS e XSLT interagiscono insieme per determinare la presentazione e la struttura di un documento XML, possiamo iniziare a creare il nostro blog in XML.
La maggior parte dei blog odierni usa un CMS per definire la sua struttura e presentazione. Questa scelta appare la più indicata per quei siti in cui i contenuti vengono aggiornati spesso. A questo punto possiamo scegliere di realizzare un nostro CMS oppure di appoggiarci ad uno esistente. Per le esigenze di questo seminario, abbiamo deciso di usare come CMS di base Wordpress, che presenta delle caratteristiche affatto peculiari.
Wordpress infatti offre la possibilità di modificare il nostro template senza usare tag proprietari (come in Textpattern). Questa caratteristica ci permette di modificare direttamente la marcatura e di verificarne i risultati in modo progressivo. Ovviamente per una modifica così radicale dovremmo di fatto apportare dei cambiamenti all'intero CMS, cosa che va oltre l'àmbito del nostro seminario. Ci limiteremo a trasformare la marcatura e a specificare degli stili per essa.
Anche se Wordpress permette di scaricare ed installare nuovi temi, noi ci concentreremo sul tema di base di questo CMS, ossia sul classico template a due colonne. Va ricordato che la metodologia che adotteremo è applicabile a qualsiasi tipo di template creato per questo CMS.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Seguendo la struttura del template di base di Wordpress, convertiamo la marcatura XHTML in XML creando nuovi elementi che rispecchino la semantica del template originale. Gli elementi più rilevanti sono riportati nella seguente tabella:
| XHTML | XML |
|---|---|
<div id="page">...</div> |
<page>...</page> |
<div id="headerimg">...</div> |
<headerimg>...</headerimg> |
<div class="description">...</div> |
<description>...</description> |
<div id="content">...</div> |
<content>...</content> |
<div class="post">...</div> |
<post>...</post> |
<div class="entry">...</div> |
<entry>...</entry> |
<div id="sidebar">...</div> |
<sidebar>...</sidebar> |
<div id="footer">...</div> |
<footer>...</footer> |
Come si può notare, abbiamo preservato la semantica originale del template XHTML attraverso una scelta coerente dei nomi degli elementi. Questa scelta si rivelerà decisiva all'atto della trasformazione da XML a HTML.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Una volta scelta la marcatura per il nostro documento XML di base, possiamo usare XSLT per trasformare la struttura XML originaria in una nuova struttura HTML e i CSS per definire la presentazione della nostra trasformazione.
Data la lunghezza del codice, ci limiteremo in questa sede a fornire solo un estratto dal codice di esempio utilizzato. Per esempio, la struttura XML del nostro header è la seguente:
<headerimg><h1>XML blog</h1><description>a Wordpress blog</description></headerimg>Trasformiamo tale struttura in HTML con il seguente codice XSLT:
<xsl:template match="headerimg"><div id="headerimg"><xsl:apply-templates/></div></xsl:template><xsl:template match="h1"><h1><xsl:value-of select="."/></h1></xsl:template><xsl:template match="description"><div class="description"><xsl:value-of select="."/></div></xsl:template>Assegniamo infine degli stili CSS:
#headerimg {width: 100%;height: 8.3em;min-height: 100px;background: transparent url("../img/header.png") repeat-x 0 0;}#headerimg h1 {margin: 0;padding: 8px 5px 5px 0;text-align: center;font-size: 3.5em;}#headerimg .description {padding: 0 5px 5px 0;text-align: center;font-style: italic;color: #393;}Osserviamo quindi il layout finale in un browser:

Come si può notare, grazie a XSLT siamo riusciti ad inserire un motore di ricerca perfettamente funzionante nella colonna di sinistra. Questa operazione sarebbe stata impossibile se ci fossimo affidati unicamente ai CSS. Possiamo concludere affermando che l'uso congiunto dei CSS e di XSLT permette di ottenere dei risultati dal sicuro impatto visuale e dalla struttura solida.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Possiamo perfezionare il nostro blog in diversi modi. Eccone alcuni:
Possiamo specificare una DTD o uno schema XML al fine di rendere valido il nostro documento XML. Questa possibilità
aggiunge un ulteriore livello di completezza al nostro lavoro, in quanto il rispetto di una grammatica formale riduce il rischio
di incompatibilità e di incoerenze nella fase di sviluppo. Per esempio, il seguente esempio fa uso di una DTD per specificare
quali elementi possono comparire in un elemento headerimg:
<!ELEMENT headerimg (h1, description)><!ELEMENT h1 (#PCDATA)><!ELEMENT description (#PCDATA)>Il frammento di DTD mostrato di sopra specifica che un elemento headerimg può contenere solo gli elementi
h1 e description, i quali a loro volta possono contenere solo testo.
Gli URL di dati (RFC 2397) definiscono un modo per includere dati arbitrari all'interno di normali URL. Possiamo usare
gli URL di dati per definire una parte della grafica del nostro blog, come ad esempio piccole immagini ed elementi decorativi.
L'uso di URL di dati, infatti, è indicato soprattutto per inserire piccole porzioni di dati. Il seguente esempio mostra
un elemento emoticon che contiene un URL di dati all'interno del suo attributo url:
<emoticon type="smile" url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAAEWrJxDAAAABGdBTUEAAK/INwWK6QAAABl0
RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADGUExURfv257mHCebCS/bffv/r
f///3P//2Pnusv/pff/6ye/Ye/jz59W7b8WeQO6/C//pZeOzDf/1oP/8xNOmFvv25vHp1NCp
Qc2rS9aoFPDPOfjw1MOcPP/XFeK9RvPCBNSiBebGUP/WBefDS+jVjcebG8ydFtipE+vPY/bY
WNnDjv/jRNCiGtu2Rv/cLOXLceO5Kf/6usONAP/nY+vUj//rgd/IjvjUO8agPd+2Kf//4fvd
XP/iYNKfAvfy5v/6q/DZjv3me////7PW4zEAAABCdFJOU///////////////////////////
////////////////////////////////////////////////////////////AEQWEAAAAADo
SURBVHjaYnC0BwggBlMJgABiUAIIIAZDgABi0NETBwggBhF9R4AAYrATZAYIIAZdYTWAAGJg
4GLjZJUFCCAGVQ1+aysjgABicOSVU7QRBQggBkd7fSURR4AAYpBl5WTjYgAIIAZmcUE9Ox2A
AGIwsrLm11AFCCAGNQlhQ11TgABiELVRlON1BAggBkcpJnV2S0t2dSYpR4AAYjBWEOJRNjBQ
5hFSMAYIIAZtExYHBw4OBwcWE22AAGIQM7NQkdTSklSxMBMDCCAGbnMBGT55eT4ZAXNugABi
cHS01ZRmZJTWtHV0BAgwAB8SE83M3eUvAAAAAElFTkSuQmCC"/>In questo esempio, l'URL di dati contiene una piccola emoticon codificata in Base64 (un'immagine PNG). È possibile
trasformare successivamente l'elemento emoticon in un elemento img usando il valore dell'attributo
url come valore del risultante attributo src.
L'uso di URL di dati ci solleva dal compito di dover specificare necessariamente un percorso per le immagini da visualizzare. L'unico limite è che il suo uso specifico appare limitato a piccole o medie immagini, poichè un uso eccessivo comporterebbe un rallentamento nel rendering da parte dei programmi utente.
Per inserire link direttamente in un documento XML, possiamo utilizzare XLink, che è uno strumento per il linking avanzato messo a disposizione dal W3C:
<link xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple" xlink:href="#">Link</link>XLink permette anche di definire delle relazioni semantiche tra i link, stabilendo che tipo di rapporto intercorre tra essi e contribuendo così alla loro tracciabilità.
Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Riportiamo di seguito alcuni riferimenti per un ulteriore approfondimento delle tematiche esposte.
mXSLTProcessor).Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it
Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale-Non opere derivate 3.0 Unported. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc-nd/3.0/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. Diritti, marchi registrati e siti web riportati in immagini e url sono riservati e proprietà dei diretti interessati e relative aziende. IWA/HWG e l'associazione IWA Italy non sono direttamente o indirettamente responsabili dei contenuti riportati nel presente documento che sono ad esclusiva cura e responsabilità del relatore.

Blog: quali tecnologie per il futuro? - Gabriele Romanato @ Smau 2009-10-21
International Webmasters Association Italian Chapter - www.iwa.it