Riprogettare gentoo.org, Parte 4: la rinascita di un sito web

1.  Il tocco finale

Un nuovo look, ma...

Alla fine dell'articolo precedente, il sito Web di Gentoo Linux aveva un aspetto completamente nuovo, ma c'era ancora qualche cosa incompleta. In questo articolo, l'ultima puntata della serie, faccio gli ultimi ritocchi, ottenendo un sito pienamente funzionale che guarda al futuro, rifinito e modulare grazie all'XML su cui si basa. Ecco cosa mancava al sito nel precedente articolo:

Faccende in sospeso

Per cominciare, sebbene tutto il sito abbia guadagnato un nuovo look, solo la parte relativa alla documentazione é attualmente basata su XML. Le pagine "indicizzate" più importanti, sono ancora in HTML grezzo e necessitano di essere trasformate in una soluzione XML/XSLT per rendere il tutto più manutenibile ed espandibile.

Inoltre, i miei sviluppatori hanno trovato diversi problemi nello stesso HTML grezzo. Il sito risulta particolarmente brutto, se visualizzato con Netscape 4.77 -- che è ovviamente un problema. Inoltre ci sono altri piccoli problemi di visualizzazione che compaiono in diversi browser moderni, il più fastidioso dei quali consiste in una sottile linea nera verticale che non si estende completamente per tutta la lunghezza della pagina, rovinando l'illusione che l'area principale per i contenuti venga "raccontata" dal nostro "omino-antenna volante". In più, le pagine di documentazione non si adattano perfettamente all'aspetto ridefinito delle nuove pagine principali indicizzate -- diverse cose necessitano chiaramente di un aggiornamento.

L'obiettivo

Ecco il piano per il completo rifacimento del sito di Gentoo Linux. Come prima cosa, rielaboreremo totalmente la pagina HTML principale, mantenendo inalterato l'aspetto originale, rendendo però la pagina più browser-compatibile. Contemporaneamente aggiungeremo qualche rifinitura legata alla presentazione suggeritaci dai visitatori e rimedieremo a problemi di compatibilità tra browser ed il nostro sistema di documentazione.

In seguito, convertiremo completamente il sito in XML ed XSLT. Alla fine di questo articolo, ogni modifica fatta al sito avverrà modificando l'XML o l'XSLT piuttosto che modificando direttamente l'HTML, che ora verrà generato automaticamente con l'aiuto di xsltproc. Ciò renderà l'intero sito più facile da manutenere. Poiché Gentoo Linux è un progetto sviluppato da una comunità, ciò permetterà a sua volta agli sviluppatori (e a me) di manutenere e migliorare il sito quando fosse necessario. Sono molto soddisfatto da questo approccio, poiché ci farà risparmiare un sacco di tempo ed assicurerà che i visitatori vengano accolti con contenuti sempre aggiornati.

Problemi di compatibilità

Nonostante Netscape 4.x sia tuttora un browser largamente usato, mi risulta difficile decidere esattamente quanto lavoro extra debba fare per rendere migliore l'aspetto del sito se visitato con esso. Dovrei solamente assicurare che il sito sia leggibile (senza altri inconvenienti maggiori) o dovrei fare tutto quello che posso per essere sicuro che l'aspetto del sito sia assolutamente perfetto sotto Netscape 4.x, anche se ciò comportasse una riduzione o l'eliminazione dell'uso dei CSS, aggiungendo strani hack di compatibilità all'HTML esistente?

Alla fine, ho deciso di fare diversi importanti cambiamenti all'HTML in modo che il sito continuasse ad avere un buon aspetto anche sotto Netscape 4.x, senza concentrarmi troppo su problemi minori come la spazialità delle tabelle o la resa dei caratteri. Ecco alcuni dei cambiamenti fatti all'HTML del sito per avere tutto 4.x compatibile. (La squadra di sviluppo di Gentoo Linux ha fornito svariate correzioni).

Come prima cosa, Netscape 4.x ha un bug per cui i colori di sfondo impostati nei CSS per gli elementi blocco, non vengono visualizzati correttamente. Ad esempio, ecco come dovrebbe essere visualizzata una porzione di una guida:

Figura 1.1: Un esempio di guida in IE5

Ed ecco come Netscape 4.x rappresenta la stessa porzione quando i colori di sfondo vengono specificati tramite i CSS:

Figura 1.2: Un esempio di guida in Netscape 4.7; c'è bisogno di qualche aggiustamento

E' veramente brutto. Per sistemarlo, gli elementi blocco come questo...

<p class="note">Questo paragrafo non è visualizzato correttamente in Netscape 4.x</p>

...verranno rimpiazzati con delle tabelle:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
          <td bgcolor="#ddffff"><p class="note">
          Questo ha un aspetto decisamente migliore in Netscape 4.x</p></td>
    </tr>
</table>

Questo trucco risolve il problema della visualizzazione degli sfondi. Ma questo "aggiustamento" necessita anche che l'informazione sul colore venga inclusa nell'HTML, cosa che annulla i vantaggi di usare i CSS. La situazione è poco felice, specialmente per i fan dei CSS come me, ma è necessaria per la compatibilità con Netscape 4.x.

Ricostruire l'HTML

Ora dobbiamo occuparci della linea verticale nera che non si estende per tutta la lunghezza della pagina. Non sono riuscito a trovare una soluzione del problema che funzionasse sia nel browser 4.x che nel 5.x; ogni versione per la 5.x provoca problemi in Netscape 4.x ed ogni versione 4.x compatibile appare orribile in un browser 5.x. Perciò ho semplicemente deciso di rimuovere in toto la linea nera: alla fine il sito funziona in tutti i browser più popolari. Nel seguito creerò una sintassi-guida per produrre le pagine principali.

Affrontare l'XML

Invece di implementare un insieme di tag completamente nuovo per la pagina principale, penso che sarebbe una buona idea cercare di utilizzare il più possibile i tag delle pagine XML "guida" (leggete la Parte 2 di questa serie per saperne di più sul formato XML delle guide). Perciò, ho creato qualche nuovo XSL, utilizzando la mia guida XSL come modello. Dopo un'ora o due, ho ottenuto un insieme completamente funzionale di trasformazioni XSL per trasformare una sintassi adatta ad una guida, in una pagina HTML principale. La seconda revisione della nuova pagina principale appare così:

Figura 1.3: La revisione della nuova pagina principale

Ora che la pagina principale utilizza un nuovo backend XML/XSLT, ho rivolto l'attenzione al sistema di output HTML delle "guide". Non solo devo risolvere un problema di compatibilità di Netscape 4.7, ma devo anche aggiornare l'HTML e la grafica generati in modo che stiano bene assieme a quelli che ho modificato nella pagina principale. Poi mi è venuta un'idea: perché non fare solo delle leggere modifiche all'XML/XSLT della nuova pagina principale, in modo da poter generare anche l'HTML per la documentazione? Dopo tutto, ho aggiunto solamente il supporto per quasi ogni tag XML delle "guide", quindi questi possono essere usati anche per il contenuto della pagina principale.

Questa soluzione si è rivelata molto facile da implementare. Mi sono limitato a modificare il nuovo file XSLT così che rimuovesse la "barra dei link" a sinistra e producesse altri cambiamenti minori all'HTML in output durante il processamento delle pagine di documentazione. Poiché la maggior parte dell'XSLT è lo stesso, posso utilizzare un solo insieme di modelli XSLT sia per le guide che per le pagine indicizzate:

Figura 1.4: Come funziona il nuovo XSL

Ora, non solo ho un unico insieme di modelli XSLT da manutenere, ma poiché entrambe le visualizzazioni dell'HTML sono basate sullo stesso documento cardine, esse condividono anche lo stesso CSS. Ciò significa che non c'è più la necessità di "sincronizzare l'aspetto" tra due diversi insiemi di fogli di stile ed output HTML. Come potete vedere, il nuovo HTML per la documentazione si intona perfettamente alla nuova pagina principale:

Figura 1.5: Le nuove pagine per la documentazione sono in perfetta sintonia con la pagina principale

L'implementazione dell'XML

L'attuale implementazione è abbastanza semplice, la sintassi XML esistente per le guide richiede che ogni documento sia una parte di un unico elemento principale <guide>. Per aggiungere il supporto alle pagine indicizzate, ho creato un nuovo elemento principale: <mainpage>. Per creare una pagina principale indicizzata, ho posizionato tutto dentro ad un elemento <mainpage> invece che ad un elemento <guide> ed è stato l'XSLT a preoccuparsi delle differenze appropriate per l'output. Oltre a questo, la maggior modifica richiesta è stata l'aggiunta di un elemento opzionale <sidebar> che viene utilizzato per specificare i contenuti della tabella flottante in una pagina indicizzata principale. Il modello XSLT <guide> esistente è qualcosa di simile a questo:

<xsl:template match="/guide">
    <html>
        <head>
            l'intestazione della guida va qui
        </head>
        <body>
            la parte superiore del body HTML della guida va qui
<!--nel seguito, inseriamo i nostri contenuti-->
        <xsl:apply-templates select="chapter" />
        la parte inferiore del body HTML della guida va qui
        </body>
    </html>
</xsl:template>

Se non hai familiarità con l'XSLT, questo modello dice ad un processore XSLT di sostituire i tag <guide> </guide> con la struttura di un documento HTML e di applicare ricorsivamente i modelli ad ogni elemento <chapter> (aprendo/chiudendo le coppie di tag) all'interno dell'elemento <guide>, inserendo infine l'output risultante al centro della struttura HTML.

Quindi, per aggiungere supporto alle pagine principali indicizzate, devo specificare che dovrebbe essere usata una struttura HTML diversa se viene incluso tutto in un singolo elemento <mainpage>. Per fare ciò, aggiungo un nuovo modello, come segue:

<xsl:template match="/mainpage">
    <html>
        <head>
            l'intestazione della pagina principale va qui
        </head>
        <body>
            la parte superiore del body HTML della pagina principale va qui
<!--next, we insert our content-->
            <xsl:apply-templates select="chapter" />
            la parte inferiore del body HTML della pagina principale va qui
        </body>
    </html>
</xsl:template>

Poiché quasi ogni altro elemento XML (da <chapter> in giù) produce un output HTML identico sia per le pagine guida che per quelle indicizzate, quasi ogni altro modello XSLT può essere condiviso da entrambi i tipi di pagina. Perciò possiamo farcela con un unico file XSLT che specifica due "strutture HTML" ed un insieme comune di modelli XSLT che convertono l'XML in HTML. Come sempre, il riutilizzo del codice è senz'altro una buona cosa.

La pagina di Changelog

Vi ricorderete che nella Parte 2 di questa serie avevo detto che lo script di generazione del Changelog CVS, cvs2cl.pl, avrebbe prodotto output XML e che avrei eventualmente usato questa caratteristica come base per una pagina quotidiana di Changelog CVS, che sarebbe apparsa sul nuovo sito Web. Ora, avendo pronta la nuova struttura XML, aggiungere la nuova pagina di Changelog è un gioco da ragazzi. Ecco una versione migliorata dello script cvslog.sh che si preoccupa anche di gestire la conversione da XML ad HTML:

#!/bin/bash
#percorsi vari
HOMEDIR=/home/drobbins
CVSDIR=${HOMEDIR}/gentoo/gentoo-x86
OUTLOG=${HOMEDIR}/gentoo/xmlcvslog.txt
OUTMAIL=${HOMEDIR}/gentoo/cvslog.txt
WEBDIR=/usr/local/httpd/htdocs
XSLTP=/opt/gnome/bin/xsltproc
TMPFILE=${HOMEDIR}/gentoo/xmlcvslog.tmp
USER=drobbins
#se $CVSMAIL non è definito, impostalo a "yes"
if [ -z "$CVSMAIL" ]
then
    export CVSMAIL="yes"
fi
#lo script principale
cd $CVSDIR
cvs -q update -dP
yesterday=`date -d "1 day ago 00:00" -R`
today=`date -d "00:00" -R`
cvsdate=-d\'${yesterday}\<${today}\'
nicedate=`date -d yesterday +"%d %b %Y %Z (%z)"`
#genera l'output XML tramite cvs2cl.pl
/usr/bin/cvs2cl.pl --xml -f $OUTLOG -l "${cvsdate}"
#utilizza sed per rimuovere "xmlns=" dall'output di cvs2cl.pl
/usr/bin/sed -e 's/xmlns=".*"//' $OUTLOG > ${OUTLOG}.2
#converte l'output XML di cvs2cl.pl al formato della guida usando $XLSTP
$XSLTP ${WEBDIR}/xsl/cvs.xsl ${OUTLOG}.2 > $TMPFILE
#converte in HTML l'output XML della guida usando $XLSTP
$XSLTP ${WEBDIR}/xsl/guide-main.xsl
$TMPFILE > ${WEBDIR}/index-changelog.html
#sistema i permessi
chmod 0644 ${WEBDIR}/index-changelog.html
#spedisce automaticamente una cvs mail se $CVSMAIL è settato a "yes"
if [ "$CVSMAIL" = "yes" ]
then
    /usr/bin/cvs2cl.pl -f ${OUTMAIL} -l "${cvsdate}"
    mutt -x gentoo-cvs -s "cvs log for $nicedate" > ${OUTMAIL}
fi

Sebbene questo script possa sembrare più complicato della versione precedente, esso contiene solamente quattro o cinque linee chiave in più; le altre aggiunte sono o commenti o definizioni di variabili.

Ecco come funzionano le nuove parti legate all'XML dello script cvslog.sh. Come prima cosa, chiamiamo cvs2cl.pl e gli facciamo generare un Changelog basato su XML che contiene tutti i file modificati ieri. Poi, questo output XML viene analizzato tramite sed per rimuovere tutti gli attributi xmlns= dall'XML. In seguito trasferiamo questo XML lievemente modificato all'xsltproc e gli diciamo di applicare il processamento trovato in cvs.xsl; queste istruzioni trasformano l'output XML da quello di cvs2cl.pl in un corretto documento guida XML. Infine, useremo di nuovo xsltproc per convertire questa guida in un HTML pronto per il Web, il quale viene spedito alla directory htdocs del nostro Web server. La pagina HTML di Changelog generata è completa e questo è il risultato:

Figura 1.6: La pagina di Changelog generata automaticamente

Potreste rimanere sorpresi dalla semplicità dell'XSLT contenuto in cvs.xsl. Al suo interno, specifichiamo tre modelli per <changelog>, <entry>, e <file>. Creiamo anche dei riferimenti a qualche altro tag nel sorgente XML, come <date>, <author>, e <msg> (che cvs2cl.pl utilizza per specificare i commenti del committente CVS). cvs.xsl fa un bel po' di cose, considerando che è costituito solamente da circa 35 righe:

<?xml version='1.0' encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output encoding="iso-8859-1" method="xml" indent="yes"/>
<xsl:template match="/changelog">
    <mainpage id="changelog">
    <title>Changelog dello Sviluppo Gentoo Linux per <xsl:value-of select="entry/date"/></title>
    <author title="script">cvs-xml.xsl</author>
    <standout>
        <title>Riguardo il Changelog dello Sviluppo</title>
        <body>
            Questa pagina contiene un Changelog quotidiano che elenca tutte le modifiche
            apportate al nostro albero CVS del <xsl:value-of select="entry/date"/> (ieri).
        </body>
    </standout>
    <version>1.0.0</version>
    <date><xsl:value-of select="entry/date"/></date>
    <chapter>
        <xsl:apply-templates select="entry"/>
    </chapter>
    </mainpage>
</xsl:template>
<xsl:template match="entry">
    <section>
        <title>Files modified by <xsl:value-of select="author"/> at
                                       <xsl:value-of select="time"/>
        </title>
        <body>
            <note><xsl:value-of select="msg"/></note>
            <ul>
                <xsl:apply-templates select="file"/>
            </ul>
        </body>
    </section>
</xsl:template>
<xsl:template match="file">
    <li><path><xsl:value-of select="name"/></path>, <xsl:value-of select="revision"/></li>
</xsl:template>
</xsl:stylesheet>

Progetto completato!

Dall'inizio della riprogettazione del sito Web di Gentoo Linux, abbiamo creato un piano d'azione user-centrico, progettato un nuovo sistema di documentazione basato su XML, un nuovo logo, un nuovo aspetto per il sito, convertito tutte le parti rimanenti in XML ed aggiunta una nuova pagina di Changelog basata su XML. Uff! Spero vi siate divertiti seguendo il mio percorso e che abbiate trovato diverse idee ed ispirazioni durante la lettura. Ho ricevuto diverse richieste di ulteriori informazioni ed altro codice legati a questa riprogettazione, così ho creato una pagina dei Progetti XML Gentoo Linux che contiene gli XML, XSLT, script e la documentazione utilizzati per www.gentoo.org. Oltre a visitare la pagina dei Progetti, date un'occhiata alle preziose risorse elencate qua sotto.

2.  Risorse

• Date un'occhiata alla pagina dei Progetti XML Gentoo Linux se siete interessati ad utilizzare la guida Gentoo Linux ad un sistema XML come base per i vostri progetti. Qui si possono trovare tutte le ultime cose su XML/XSLT.
• Leggete gli altri articoli di questa serie devloperWorks sulla riprogettazione del sito Web www.gentoo.org grazie a tecnologie come XML, XSLT e Python:
  • Nella Parte 1, l'autore crea un piano d'azione user-centrico ed introduce pytext, un interprete Python embedded (Marzo 2001).
  • Nella Parte 2, Daniel sfoggia il nuovo sistema per la documentazione ed allestisce una mailing list quotidiana basata su log CVS (Maggio 2001).
  • Nella Parte 3, Daniel crea un nuovo look per il sito (Luglio 2001).
• Impara di più sui fogli di stile a cascata (CSS, Cascading Style Sheets) visitando la pagina sui CSS del World Wide Web Consortium (W3C). Qui puoi trovare anche altre informazioni su XML, XSLT e molte altre tecnologie.
• Dai un'occhiata a Xara.com, il sito di Xara X -- un ottimo programma di disegno vettoriale per Windows. Snello e di una velocità incredibile, ha la mia personale raccomandazione.
• Impara ancora più cose di XSLT su http://www.xslt.com
• Quando ti riprendi, dai un'occhiata a Sablotron, un buon processore XSLT, veloce e reperibile su Ginger Alliance