Blog: quali tecnologie per il futuro?

Transcript

1 Indice 1. Il ruolo di XML oggi 2. Il ruolo potenziale di XML 3. Presentare XML 4. Trasformare XML 5. Trasformare e presentare XML 6. Un blog in XML 7. Scegliere la marcatura 8. Il layout del nostro blog 9. Ulteriori sviluppi 10. Riferimenti Mostra tutte le slide Blog: quali tecnologie per il futuro? Sponsor Autore: Gabriele Romanato gabriele.romanato@gmail.com Web: Cos'è IWA/HWG 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 associati. La sua missione: Fornire programmi formativi di qualità; Fornire agli associati supporto e collaborazione a livello regionale, nazionale e internazionale, nonché un marchio di affiliazione riconosciuto a livello mondiale; Promuovere i principi universali di etica e di pratica professionale per tutti i professionisti della Rete Internet; Fornire supporto per la definizione e lo studio di normative nei Paesi in cui è presente Partecipazioni e attività

2 Network: Piccola presentazione personale Gabriele Romanato Attività svolta 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. Eventuali loghi di progetti Open Source: Nessun logo presente. Network: Il ruolo di XML oggi 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: 1. <item> 2. <title>articolo</title> 3. <link> 4. <description>descrizione dell'articolo</description> 5. <pubdate>wed, 21 October :30: </pubDate> 6. <category>articoli</category> 7. </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. Il ruolo potenziale di XML

3 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: 1. fornire un formato universale per lo scambio e la memorizzazione di dati sotto forma di documenti strutturati 2. usare l'estensibilità del linguaggio allo scopo di generare nuovi linguaggi. 1. Un formato universale per lo scambio di dati 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: 1. <?xml version="1.0" encoding="utf-8"?> 2. <books> 3. <book> 4. <title>ajax. The definitive guide</title> 5. <author>anthony T. Holdener III</author> 6. <isbn> </isbn> 7. <url> 8. </book> 9. <!--omissis--> 10. <books> possiamo importarlo direttamente in Microsoft Access, come mostrato di seguito: e visualizzarne correttamente la struttura sotto forma di una normale tabella di database:

4 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. 2. Generare nuovi linguaggi XML può essere esteso: ciò significa che tramite questo linguaggio è possibile generare nuovi linguaggi. Alcuni esempi di linguaggi sono: 1. XHTML 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. 2. HTML 5 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. 3. RDF 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: 1. <?xml version="1.0" encoding="utf-8"?> 2. <!DOCTYPE SiteMap PUBLIC "-//Google//DTD SiteMap XML V1.0//EN" " 3. <site> 4. <title>mio sito</title> 5. <url> 6. <webmaster>gabriele Romanato</webmaster> 7. <owner>gabriele Romanato</owner>

5 8. <directory> 9. <title>articoli</title> 10. <url> 11. <created>wed, October :30: </created> 12. <modified>wed, October :30: </modified> 13. <documents> 14. <doc>...</doc> 15. <doc>...</doc> 16. </documents> 17. </directory> 18. <--omissis--> 19. </site> Queste sono solo alcune delle potenzialità di XML. Il futuro ci dirà verso quali nuovi traguardi ci potrà condurre questo linguaggio. Presentare XML 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): 1. XML non possiede una DTD predefinita, quindi i programmi utente che visualizzeranno il documento non potranno utilizzare il loro foglio di stile predefinito per assegnare dei ruoli di visualizzazione agli elementi. Gli autori dovranno specificare nel foglio di stile se un elemento è da visualizzarsi come blocco, inline, voce di lista o altro tramite la proprietà display 2. in XML, l'elemento radice non ha alcun ruolo di visualizzazione "speciale" che gli consenta di espandere un colore di sfondo così come avviene in XML 3. dato che l'xml non possiede alcuna DTD predefinita, i selettori di classe e di ID non funzioneranno nel modo sperato, cosicchè invece di scrivere #box gli autori dovranno usare i selettori di attributo 4. i programmi utente esistenti non utilizzano un parser validante, quindi specificare una propria DTD per il documento non risolve il problema visto al punto 3. È 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: 1. <?xml version="1.0" encoding="utf-8"?> 2. <?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: 1. books { 2. display: table; 3. width: 100%; 4. margin: 1em 0; 5. border: 1px solid #666; 6. border-collapse: collapse; 7. } 8. book { 9. display: table-row; 10. } 11. title, isbn, url, author { 12. display: table-cell; 13. width: 25%; 14. border: 1px solid #444; 15. } 16. books > book:first-child title:before { 17. content: "Title"; 18. display: block; 19. font-weight: bold; 20. border-bottom: 1px solid #444; 21. width: 100%; 22. } 23. books > book:first-child isbn:before { 24. content: "ISBN"; 25. display: block; 26. font-weight: bold; 27. border-bottom: 1px solid #444; 28. width: 100%;

6 29. } 30. books > book:first-child url:before { 31. content: "URL"; 32. display: block; 33. font-weight: bold; 34. border-bottom: 1px solid #444; 35. width: 100%; 36. } 37. books > book:first-child author:before { 38. content: "Author(s)"; 39. display: block; 40. font-weight: bold; 41. border-bottom: 1px solid #444; 42. width: 100%; 43. } 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. Trasformare XML 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: 1. applicare il suo foglio di stile predefinito al documento in mancanza di stili specificati dall'autore 2. applicare i selettori di classe e di ID nel modo consueto 3. ripristinare il ruolo dell'elemento radice nella definizione di un colore di sfondo. Un foglio di stile XSLT viene collegato al documento XML da trasformare con la medesima

7 istruzione di elaborazione usata per un foglio di stile CSS. Esempio: 1. <?xml version="1.0" encoding="utf-8"?> 2. <?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: 1. <?xml version="1.0" encoding="utf-8"?> 2. <xsl:stylesheet version="1.0" xmlns:xsl=" 3. <xsl:output method="html"/> 4. <xsl:template match="/"> 5. <html> 6. <head> 7. <title>books</title> 8. </head> 9. <body> 10. <xsl:apply-templates /> 11. </body> 12. </html> 13. </xsl:template> 14. <xsl:template match="books"> 15. <table border="1" cellpadding="2" width="100%"> 16. <tr> 17. <th scope="col">title</th> 18. <th scope="col">author(s)</th> 19. <th scope="col">isbn</th> 20. <th scope="col">url</th> 21. </tr> 22. <xsl:apply-templates/> 23. </table> 24. </xsl:template> 25. <xsl:template match="book"> 26. <tr> 27. <xsl:apply-templates/> 28. </tr> 29. </xsl:template> 30. <xsl:template match="title"> 31. <td> 32. <xsl:value-of select="." /> 33. </td> 34. </xsl:template> 35. <xsl:template match="author"> 36. <td> 37. <xsl:value-of select="."/> 38. </td> 39. </xsl:template> 40. <xsl:template match="isbn"> 41. <td> 42. <xsl:value-of select="."/> 43. </td> 44. </xsl:template> 45. <xsl:template match="url"> 46. <td><a> 47. <xsl:attribute name="href"> 48. <xsl:value-of select="."/> 49. </xsl:attribute> 50. <xsl:value-of select="."/> 51. </a></td> 52. </xsl:template> 53. </xsl:stylesheet> Il risultato è il seguente:

8 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. Trasformare e presentare XML 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: 1. table { 2. width: 100%; 3. border: 3px double #777; 4. border-collapse: collapse; 5. font: 76% Arial, sans-serif; 6. } 7. th, td { 8. width: 25%; 9. border: 1px solid #777; 10. padding: 0.3em; 11. } 12. th { 13. background: #777; 14. color: #fff; 15. text-align: left; 16. } collegandolo al documento XML attraverso il nostro foglio di stile XSLT, in questo modo: 1. <xsl:template match="/"> 2. <html> 3. <head> 4. <title>books</title> 5. <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 6. </head> 7. <body> 8. <xsl:apply-templates /> 9. </body> 10. </html> 11. </xsl:template> Il risultato è il seguente:

9 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. Un blog in XML 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. Scegliere la marcatura 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>

10 <div class="entry">...</div> <div id="sidebar">...</div> <div id="footer">...</div> <entry>...</entry> <sidebar>...</sidebar> <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. Il layout del nostro blog 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: 1. <headerimg> 2. <h1>xml blog</h1> 3. <description>a Wordpress blog</description> 4. </headerimg> Trasformiamo tale struttura in HTML con il seguente codice XSLT: 1. <xsl:template match="headerimg"> 2. <div id="headerimg"> 3. <xsl:apply-templates/> 4. </div> 5. </xsl:template> 6. <xsl:template match="h1"> 7. <h1> 8. <xsl:value-of select="."/> 9. </h1> 10. </xsl:template> 11. <xsl:template match="description"> 12. <div class="description"> 13. <xsl:value-of select="."/> 14. </div> 15. </xsl:template> Assegniamo infine degli stili CSS: 1. #headerimg { 2. width: 100%; 3. height: 8.3em; 4. min-height: 100px; 5. background: transparent url("../img/header.png") repeat-x 0 0; 6. } 7. #headerimg h1 { 8. margin: 0; 9. padding: 8px 5px 5px 0; 10. text-align: center; 11. font-size: 3.5em; 12. } 13. #headerimg.description { 14. padding: 0 5px 5px 0; 15. text-align: center; 16. font-style: italic; 17. color: #393; 18. } Osserviamo quindi il layout finale in un browser:

11 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. Ulteriori sviluppi Possiamo perfezionare il nostro blog in diversi modi. Eccone alcuni: Uso di una DTD o di uno schema XML per la validazione 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: 1. <!ELEMENT headerimg (h1, description)> 2. <!ELEMENT h1 (#PCDATA)> 3. <!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. Uso degli URL di dati per una parte della grafica 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: 1. <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"/>

12 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. Uso di XLink per il linking Per inserire link direttamente in un documento XML, possiamo utilizzare XLink, che è uno strumento per il linking avanzato messo a disposizione dal W3C: 1. <link xmlns: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à. Riferimenti Riportiamo di seguito alcuni riferimenti per un ulteriore approfondimento delle tematiche esposte. XML pocket reference di Simon St. Laurent, Michael Fitzgerald, ISBN XSLT di Doug Tidwell, ISBN Materiale di riferimento su XSLT in Firefox Ringrazio Boris Zbarsky (Mozilla Foundation) per la segnalazione. Per chi fosse interessato allo studio del codice sorgente di Firefox, la parte rilevante del supporto XSLT si trova in content/xslt/src/base. Gli hook si trovano nel file content/xml/document/src/nsxmlcontentsink.cpp (cercate mxsltprocessor). Materiale sulla libreria MSXML di Internet Explorer Ringrazio Alex Mogilevsky (Microsoft) per avermi segnalato i seguenti link: 1. MSXML Blog: Using the right version of MSXML in Internet Explorer 2. MSDN: What's New in MSXML 3. Knowledge Base (KB): List of Microsoft XML Parser (MSXML) versions Termini e licenza del documento 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 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.