8 manuali per lavorare con Xml e le trasformazioni Xsl

I libri recensiti da FucinaWeb.com:

Xslt Programmer’s Reference 2nd edition – Wrox

Anche se si tratta di una guida di riferimento alla funzioni e agli elementi di Xslt, è un testo comunque ricco di esempi e di suggerimenti. Mentre è data per scontata la conoscenza di Xml, è introdotto il ruolo di Xsl, le differenze tra Xsl Fo (Formatting Objects) e Xslt e gli ambiti applicativi. Di ciascun elemento è presentato l’uso, uno o più esempi ed eventuali differenze con altri elementi dal comportamento simile.

Concludono il manuale alcune applicazioni complete:

  • La formattazione delle specifiche Xml
  • Un albero genealogico
  • La rappresentazione delle mosse del cavallo su una scacchiera

Molto interessanti e importanti le appendici. Si parla di:

  • Parser MsXml3 di Microsoft (sono presentati degli esempi di trasformazione lato client e lato server con ASP)
  • Oracle Xml Development Kit
  • Parser Saxon (scritto dall’autore del testo)
  • Xalan

L’unica nota negativa, comune a tutti i manuali della serie Reference di Wrox, è data dala scelta tipografica che non facilita una chiara distinzione tra i titoli, cosa importante in un manuale di riferimento.

Lingua inglese

Xslt Programmer’s Reference – Second Edition ¤ di Michael Kay ¤ pagine 930 ¤ prezzo 34.99 dollari ¤ edito da Wrox ¤ pubblicato ad Aprile 2001

Sito di Xslt Programmer’s Reference [nuova finestra] (scheda, codice, errata)

Xslt Mastering Xml Transformations – O’Reilly

Il manuale è sia una guida all’uso delle trasformazioni Xsl, sia un manuale di riferimento: è infatti suddiviso in due parti. È introdotto un semplice esempio di trasformazione e via via la complessità aumenta con l’introduzione di nuovi elementi e di nuove funzioni. In Xslt non esiste un solo modo per trasformare un documento Xml ed è bravo l’autore a scriverlo chiaramente:

  • Si può realizzare un solo template che si occupa di tutta la trasformazione
  • Si può scomporre il problema in “sottoproblemi”; risolvendo questi sottoproblemi si giunge alla soluzione dell’intero template

Interessante anche la spiegazione delle tecniche di “recursion“, necessarie al fine di garantire che ogni tag aperto venga chiuso, e venga chiuso al posto giusto. Qualche esempio ancora più complesso avrebbe comunque fatto piacere.

Lingua inglese

Xslt – Mastering Xml Transformations ¤ di Doug Tidwell ¤ 460 pagine ¤ prezzo 39.95 dollari ¤ edito da O’Reilly ¤ pubblicato ad Agosto 2001

Sito di Xslt Mastering Xml Transformations [nuova finestra] (scheda, codice, errata)

Xslt Working with Xml and Html – Addison Wesley

Il manuale è diviso in due parti: una guida d’uso e una parte di riferimento con l’elenco alfabetico degli elemento Xslt.

Si comincia con un esempio sufficientemente completo, così il lettore si trova sorprendentemente ad aver acquisito una buona conoscenza delle tecniche di trasformazione già dopo pochi capitoli.

La difficoltà principale nel capire la trasformazione di documenti Xml è data dal fatto che mentalmente si deve costruire l’albero che verrà “navigato” dagli elementi Xslt. Per facilitare questo compito l’autore introduce un elevato e ottimo numero di diagrammi ad albero che tracciano il percorso di navigazione all’interno del documento. Il nostro consiglio è replicare lo stesso metodo nel caso di trasformazioni complesse.

Anche gli esempi sono spesse volte molto efficaci. Il codice della parte di riferimento è invece un po’ troppo semplice.

Lingua inglese

Xslt – Working with Xml and Html ¤ di Khun Yee Fung ¤ 440 pagine ¤ prezzo 39.95 dollari ¤ edito da Addison Wesley ¤ pubblicato a Dicembre 2000

Sito di Xslt Working with Xml and Html [nuova finestra] (scheda, indice)

Xml Guida tascabile – Mondadori Informatica

Un piccolo manuale nel quale troverete condensato tutto quello che c’è da sapere su Xml e Xsl per diventare subito produttivi. L’autore parte dal giusto presupposto: dare un’infarinatura di Xml (che, diciamolo, è poi quello che vi serve), per poi dedicarsi agli schema Xml e alle trasformazioni Xsl.

Brevi ma efficaci esempi vi accompagnano nel corso della trattazione, così che il manuale possa essere usato non solo come manuale di riferimento, ma anche come testo di studio. Una piccola guida davvero completa.

Tra gli argomenti presentati:

  • Nozioni di base su Xml
  • Dtd e spazi dei nomi
  • Schemi Xml
  • Xslt e XPath

Lingua italiana

Xml Guida tascabile (titolo originale Xml Pocket Consultant) ¤ di William R. Stanek ¤ 390 pagine ¤ prezzo 30.00 euro ¤ edito da Mondadori Informatica (editore originale Microsoft Press) ¤ pubblicato ad Aprile 2002

Sito di Xml Guida tascabile [nuova finestra] (scheda)

Xml Passo per passo Seconda Edizione – Mondadori Informatica

È un manuale base per capire ed imparare cosa è possibile fare con Xml. Nessuna conoscenza di programmazione è richiesta per lo studio, anche se per gli ultimi capitoli un po’ di pratica con i linguaggi di script può aiutare. Il testo si rivolge quindi a programmatori di pagine Html che si trovano a volere o dover imparare Xml.

Anche se il testo è una traduzione di un volume Microsoft, quasi tutto il contenuto è applicabile anche ad altre realtà (cosa non sempre ovvia anche se si parla di uno standard).

Tra gli argomenti presenti:

  • Perché usare Xml e ruolo di Xml
  • Costruire documenti Xml well-formed e valid
  • Le parti di un documento Xml (nodi, attributi, valori, c-data, lo spazio dei nomi)
  • I Dtd e gli Xml Schema
  • Visualizzare documenti Xml con Css, binding dei dati e Dom
  • Trasformazioni con Xslt (solo un capitolo)

Lingua italiana

Xml Passo per Passo Seconda Edizione (titolo originale Microsoft Xml Step by Step Second Edition) ¤ di Michael J. Young ¤ pagine 490 ¤ prezzo 37.50 euro ¤ edito da Mondadori Informatica (editore originale Microsoft Press) ¤ pubblicato a Febbraio 2002

Sito di Xml Passo per passo Seconda Edizione [nuova finestra] (scheda)

Programmare Xml – Mondadori Informatica

Questo testo è rivolto ai programmatori che vogliano integrare soluzioni Xml all’interno dei propri applicativi. Lo standard Xml viene “liquidato” nelle prime 100 pagine. Si passa poi a parlare di integrazione tra Xml e database, soprattutto Sql Server 2000 e Oracle 9. Vengono esposte alcune tecniche e considerazioni su come esportare ed importare dati in un database e su come definire delle politiche di “mapping” tra dati Xml e tabelle.

Si passano poi in rassegna le tecniche di visualizzazione e trasformazioni di un documento Xml, ovvero Css e Xslt.

Xslt sarà al centro del capitolo successivo, che illustra come creare l’interfaccia utente di un programma. Si tratta di costruire un’applicazioni Asp e Xml che separa lo strato di presentazione da quello del contenuto. Il tutto si ottiene con una pagina chiamata controller che riceve parametri ed esegue le trasformazioni necessarie. Un ottimo esempio per capire le potenzialità di Xml e Xsl.

Si parla poi di messaggistica Xml e del ruolo di Soap e BizTalk Framework e Server.

Tra i molti altri argomenti presentati sono introdotti il ruolo di Xml nella piattaforma .NET e le tecniche di accesso ai dati con ADO.NET.

Un manuale davvero completo per lo sviluppatore Microsoft che desidera capire qual è l’effettivo vantaggio di Xml nello sviluppo di applicazioni complesse.

Lingua italiana

Programmare Xml (titolo originale Xml Programming) ¤ di Wyke, Rehman, Leupen ¤ 700 pagine ¤ 60.00 euro ¤ edito da Mondadori Informatica (editore originale Microsoft Press) ¤ pubblicato a Marzo 2002

Sito di Programmare Xml [nuova finestra] (scheda)

Java and Xslt – O’Reilly

È rivolto soprattutto alla realizzazione di progetti in ambiente Java. Dopo i doverosi capitoli di introduzione alla tecnologia Xslt sono inclusi i diversi approcci per la realizzazione di applicazioni web.

La soluzione preferita, e quella con la quale sono costruite il maggior numero di esempi, è data dal pattern Mvc , una metodologia che consente la completa separazione tra logica applicativa e di interfaccia. Lo scopo è raggiunto pienamente. Per illustrare i vantaggi di Mvc è presentato un sistema di gestione forum, con possibilità di inserimenti e risposte ai messaggi.

L’unica nota negativa (di cui l’autore non è colpevole) è l’adozione, per l’esempio, dell’Api Jdom che è in versione beta e sta subendo diversi cambiamenti, anche radicali. L’esempio funziona correttamente solo con la beta 7 di Jdom.

Tra gli argomenti presentati dal testo:

  • Le trasformazioni Xsl (XPath, cicli, parametri, ecc.)
  • Gli approcci Java per la costruzione di soluzioni web
  • Usare Xslt con Java
  • Tecniche avanzate (Servlet Filters, Stylesheet Caching, ecc.)

Lingua inglese

Java and Xslt – Embedding Xml Processing into Java Applications ¤ di Eric M. Burke ¤ pagine 500 ¤ prezzo 39.95 dollari ¤ edito da O’Reilly ¤ pubblicato a Settembre 2001

Sito di Java and Xslt [nuova finestra] (scheda, codice, errata)

XPath and XPointer – O’Reilly

Una guida a Xpath, il linguaggio di interrogazione dei documenti su cui si basa Xslt. Un testo snello ed interessante, al quale abbiamo dedicato una recensione completa.

Lingua inglese

XPath and XPointer – Locating Content in Xml Documents ¤ di John E. Simpson ¤ pagine 190 ¤ prezzo 24.95 dollari ¤ edito da O’Reilly

Sito di XPath and XPointer [nuova finestra] (scheda, codice, errata)

Da Photoshop ad Html – Le opzioni dello Slice Tool e il salvataggio

Slice Tool: le opzioni

Dopo avere delimitato le zone di interesse, torniamo al nostro layout grafico e individuiamo le aree destinate ad essere salvate come “testo” (No Image) e come “immagini” (Image).
La differenza è molto semplice.

Le prime sono aree di codice Html all’interno della tabella generata dallo Slice Tool, mentre le seconde aree sono “immagini” perché la cella contiene l’immagine precedentemente tagliata.

Seguendo il nostro esempio inizieremo, partendo dall’alto, a delimitare l’immagine che compone il top della pagina.

Dalla toolbar di Photoshop selezioniamo lo “Slice Select Tool“. È uno strumento che, a differenza dello Slice Tool esaminato nella precedente lezione, non permette di tagliare ma soltanto di selezionare e ridimensionare un “taglio” attivo.

Slice Select Tool
Lo Slice Select Tool

Con lo strumento di selezione rendiamo attivo il primo “taglio”, contrassegnato dal numero 1.
Selezioniamo dal menu a comparsa (tasto destro del mouse sull’area selezionata) la voce “Edit Slice Options“.

Edit Slice Options
Edit Slice Options

La finestra Slice Options

La funzione principale di questa finestra è quella di poter determinare le opzioni dei tag “Html” di una selezione.

Slice Options: tipo Image
Immagine 1:Slice Options: tipo Image (ingrandisci immagine 1 in una nuova finestra)

Nella prima parte della finestra “Slice Options” è possibile impostare il tipo di area voluta, che per default Photoshop assegna a “Image“. Nel nostro esempio, il primo taglio è l’immagine che contiene il logo di “Fucinaweb”, quindi lasceremo selezionata l’opzione di default e andremo a determinare soltanto:

  • Il nome dell’immagine (Name)
  • La stringa di testo alternativa per le immagini (Alt Text)

Di seguito procederemo determinando le opzioni della top bar della pagina web. Partendo dal primo bottone che compone la top bar (Home), oltre che il nome (Name) dell’immagine e la stringa di testo (Alt Text), determineremo anche le seguenti opzioni:

  • Il link del documento da richiamare (Url)
  • Il nome del frame in cui deve apparire il documento collegato (Target)

In questo modo procederemo per tutti i rimanenti bottoni della top bar: “Mappa del sito”, “Chi siamo”, “E-mail“.

Per concludere la struttura della pagina web, determineremo l’area di testo della pagina.

Slice Options: tipo No Image
Immagine 2:Slice Options: tipo No Image (ingrandisci immagine 2 in una nuova finestra)

Una volta evidenziata la “sezione” di nostro interesse, all’interno della finestra “Slice Options” selezioniamo dall’elenco a discesa “Slice Type” l’opzione “No Image“.

Come si puo notare, appare un’area di testo (Html), all’interno della quale è possibile inserire il testo che riempirà la “selezione”.

In quest’area è possibile inserire tag Html relativi alla formattazione del testo (<b>, <br>, <i>, ecc…), che saranno automaticamente inseriti all’interno del file Html generato durante il salvataggio del file.

Salvare il documento

Stabilite le opzioni di tutte le selezioni, passiamo a vedere come si salva il file.

Dal menu “File” selezioniamo “Save for Web“. A questo punto si apre una finestra di salvataggio, dove è possibile impostare il tipo di estensione (Gif o Jpg) da assegnare a ogni singola selezione.

Con lo strumento “Slice Select Tool” selezioneremo l’area di nostro interesse. Automaticamente sulla destra della finestra di salvataggio, sarà possibile determinare le opzioni relative all’immagine. Nel nostro esempio, le immagini verranno salvate con l’estensione Gif.

Selezione di Slice Select Tool

Selezione di Slice Select Tool

Selezione del tipo di immagine

Selezione del tipo di immagine

Sempre all’interno della finestra di salvataggio clicchiamo su “Output setting“: la finestra che si apre consente di personalizzare l’aspetto della pagina, definendo il tipo di codice Html creato, lo sfondo, la certella di destinazione e la nomenclatura delle aree.

Html – Il codice creato

  • La formattazione Html (Formatting)
  • Inserimento di commenti all’interno del codice Html per determinare l’inizio e la fine della tabella generata da Photoshop (Include comments)
  • Decidere come gestire le selezioni che compongono la struttura della pagina web creata con l’uso dei Css. In questo caso Photoshop genera un Css interno al documento Html e con l’utilizzo del tag <div> ne determinerà la posizione e le dimensioni (Generate Css). In alternativa è possibile decidere di salvare le selezioni all’interno di una tabella Html determinandone gli attributi (Generate Table). Nel nostro caso useremo la seconda opzione, generando così un file Html, con al suo interno una tabella.
Html Settings
Immagine 3:Html Settings (ingrandisci immagine 3 in una nuova finestra)

Background – Lo sfondo

E’ possibile determinare il colore di sfondo della pagina web generata da Photoshop, o in alternativa inserire un immagine di sfondo. Nel nostro esempio lasciamo entrambe le opzioni deselezionate.

Background Settings
Immagine 4:Background Settings (ingrandisci immagine 4 in una nuova finestra)

Saving Files – La cartella di destinazione

Questa parte permette di personalizzare e di agire sul nome da assegnare alla singola immagine, oltre che decidere in quale cartella salvare le immagini che compongono la pagina web.

Saving Files Options
Immagine 5:Saving Files Options (ingrandisci immagine 5 in una nuova finestra)

Slices – La nomenclatura delle aree

In questa ultima scheda della finestra di salvataggio si imposta il nome che Photoshop deve assegnare ad ogni singolo slice creato durante la selezione.

Slices Options
Immagine 6:Slices Options (ingrandisci immagine 6 in una nuova finestra)

Personalizzate le opzioni di salvataggio clicciamo su “Ok” e automaticamente apparirà la classica finestra di salvataggio. Per default è attivata l’opzione “Html and images“, in questo modo è possibile salvare la pagina web completa, sia di immagini che di codice Html. In alternativa è possibile salvare solo il codice Html (nel nostro esempio solo la pagina con la relativa tabella), o solo le immagini che compongono la pagina web.

Pagine leggere senza spazi inutili – Ridurre il codice Html

Quello che ci apprestiamo a dire è ovvio. Prendete una pagina Html, togliete tutti gli spazi, i ritorni a capo e i commenti. Otterrete una pagina più leggera, e quindi più veloce da caricare.

Ma come fare a costruire una pagina che sia priva degli spazi inutili, ma leggibile mentre la stiamo scrivendo, nonché quando la stiamo modificando ?

Due versioni di pagina

L’idea è di avere due copie di tutte le pagine del sito:

  • Una copia offline, che contenga tutti gli spazi, le tabulazioni e i commenti perché il codice sia facilmente leggibile da chi si occupa di crearlo e modificarlo
  • Una versione “leggera”, priva degli aiuti per gli editori, derivata dalla versione offline e poi pubblica.

Molto spesso si riesce a guadagnare tra il 10 e il 20% dello spazio totale della pagina: un bel vantaggio se si moltiplica il risparmio per tutti gli utenti del sito. Per quanto poco,
la loro esperienza sul sito sarà comunque più veloce.

Togliere gli spazi superflui

Se l’operazione di pulitura fosse fatta a mano, il tempo impiegato la renderebbe improponibile. Esistono però diversi programmi che si occupano
di eliminare spazio inutile nei file Html.

Per le nostre prove abbiamo selezionato un semplice programma freeware: Absolute Html Compressor [nuova finestra], scritto da Michael Serpik.
Questo strumento, dall’interfaccia semplice ed essenziale, comprime i documenti localizzati in una cartella (opzionalmente anche nelle sottocartelle).

Absolute Html Compressor

Come si vede dall’immagine, su 31 file compressi, il guadagno è stato di quasi 30Kbyte.

Privacy del sorgente Html

Togliendo i commenti e la formattazione, il codice diventa anche più difficile da leggere per quanti vogliano copiare il design delle nostre pagine.
Non solo, ma possiamo inserire tutti i commenti che vogliamo nel codice originale (cioè quello che continueremo a modificare), perché tutti
i commenti saranno eliminati nella versione che pubblicheremo online. Senza paura di appesantire il codice o che qualcuno li possa
leggere esaminando il sorgente della pagina.

Attenzione al codice e agli stili

Nel ridurre il contenuto di spazi, bisogna prestare attenzione a non comprimere alcuni tipi di dato:

  • Il codice non Html della pagina (es. ASP, JSP e Javascript)
  • Il collegamento ai fogli di stile CSS (Cascading Style Sheet)

Se privati degli spazi, infatti, il codice e i fogli di stile potrebbero non essere eseguiti o caricati correttamente in tutti i browser.

La soluzione consiste nell’isolare il codice e i CSS in file separati dalla pagina e dotarli di un’estensione personale (es. .inc).
A questo punto i file possono essere importati nella pagina per mezzo di “include”.
Quando eseguiamo la compressione dei file nella cartella, sceglieremo i file di tipo .htm o .asp: in questo modo file con altre estensioni
non saranno interessati dal processo di compressione.

Conclusione

La compressione di file Html consente di guadagnare notevole spazio all’interno della pagina, diminuendo la
quantità di informazione spedita tra il server e il client. È anche un ottimo metodo per
rendere il codice meno leggibile da chi volesse riprodurlo.