Riprogettare gentoo.org, Parte 3: la rinascita di un sito webFino a qui, www.gentoo.org ha mostrato un notevole miglioramento. Nell'ultimo articolo, ho progettato un nuovo sistema per la documentazione che utilizza XML e XSLT, in modo che tutta la documentazione del nostro sito sia bella esteticamente e funzionale per le esigenze dei visitatori. Comunque, l'aspetto del sito nel suo complesso non è cambiato; questo poiché in realtà non ho ancora modificato l'HTML che gli utenti hanno visto la prima volta che sono approdati sul sito. La nostra pagina principale è ancora come appariva prima. Bene, è ora di cambiare. Come accennato nel primo articolo, la nostra pagina principale sta diventando troppo congestionata e non abbiamo più spazio per espanderla. Come potete vedere, ho già compresso all'interno della pagina abbastanza contenuti. Non posso continuare ad ammucchiare link e paragrafi importanti nella pagina principale -- non c'è più spazio! Fortunatamente per noi, lo spazio sul Web è assolutamente gratuito. Allora, per risolvere questo problema dividerò la pagina principale (index.html) in diverse pagine, indicizzate per argomento specifico (index-about.html, index-download.html, ecc.) e creerò un sistema di menu che permetterà all'utente di muoversi facilmente da una pagina indicizzata ad un'altra. La pagina di default che verrà caricata quando un utente visiterà http://www.gentoo.org, sarà la pagina indicizzata come "About Gentoo Linux". Si tratta di un'ottima scelta poiché questa pagina fornisce delle informazioni generiche sul progetto che, utili ai visitatori che navigano il sito per la prima volta. Ora, descriverò gli obiettivi di questo nuovo sistema a "pagine indicizzate", oltre a qualche altro metodo di progettazione che potreste utilizzare nei vostri progetti. In seguito, vedremo come la struttura a pagine indicizzate raggiunge questi obiettivi. Il nuovo sistema a pagine indicizzate deve essere modulare. Cosa significa, esattamente? Dunque, per ora ho pensato alle categorie "About Gentoo Linux" e "Download/Install", ma magari in futuro avrò bisogno di aggiungere anche le categorie "About the Team" o "Support". Avere la possibilità di aggiungere facilmente in futuro nuove categorie, richiede una predisposizione studiata in fase di progettazione. Per aggiungere link alle categorie del menu di navigazione, devo essere sicuro che ci sarà spazio e che l'impaginazione sia abbastanza generica da permettere la presentazione di diversi tipi di informazione. Così facendo, aggiungere nuove categorie risulterà relativamente semplice e se dopo qualche mese mi renderò conto di nuovo che c'è qualcosa che non va, non dovrò riprogettare completamente il sito. In questa progettazione modulare, c'è un altro aspetto molto importante -- l'utilizzo di XML ed XSLT per separare la presentazione dai contenuti. Se avete letto il secondo articolo di questa serie avrete familiarità con questo tipo di approccio. Dopo aver creato un modello XSL adatto, è possibile generare tutte le pagine indicizzate che si vogliono, semplicemente utilizzando un XML adatto. Ed al contrario dell'HTML, l'XML non conterrà informazioni sull'aspetto; è puro contenuto. Vedremo l'implementazione XML/XSLT delle pagine indicizzate nella quarta ed ultima puntata di questa serie. Indicazioni generiche di stile Un'altra cosa molto importante è che la nuova struttura indicizzata sia esteticamente accattivante. Ricordatevi che quando un utente approda su http://www.gentoo.org, la prima pagina indicizzata che visualizzerà sarà "About Gentoo Linux", perciò voglio che sia una pagina attraente. Ora, a seconda delle persone, la parola "attraente" può significare cose diverse, ma questo articolo presenta alcune indicazioni generiche utilizzate durante la creazione delle nuove pagine indicizzate, applicabili a quasi ogni sito Web. Per ottenere un'impaginazione generica, la scelta migliore è la semplicità. Se dovete organizzare un insieme di informazioni articolate, perché non utilizzare una tabella principale per suddividere la pagina in diverse aree? Ciò assicurerà anche che le varie parti della pagina siano allineate, in modo da avere un aspetto semplice ed attraente. Il seguente tipo di impaginazione, ad esempio, in genere non è molto efficace:
Però, se le stesse informazioni vengono presentate utilizzando una semplice griglia, il sito comincia ad essere molto più chiaro:
Ricordate che più è semplice la vostra impaginazione e più informazioni riuscirete ad inserire senza infastidire i visitatori. Colore del testo e dello sfondo Eccoci alla scelta dei colori. Devo ammettere di trovare molto accattivante il testo verde brillante su sfondo blu scuro. Ma in realtà non importa quanto sfizioso o esotico possa sembrare: per le aree con testo di un sito Web gli sfondi scuri non sono una scelta adatta. Gli utenti si aspettano di vedere del testo scuro su uno sfondo chiaro ed io per primo penso che dovremmo dargli quello che si aspettano. Ok, fatemi spiegare meglio la mia opinione. Utilizzare del testo chiaro su sfondo scuro è una pessima scelta per rappresentare paragrafi consistenti, ma può essere abbastanza adatto e funzionale per la barra dei menu, o per una piccola lista di link. In altre parole: il testo invertito può essere molto incisivo, ma vi consiglio di utilizzare uno schema di colori tradizionale per le aree di testo più importanti; dopo mi ringrazierete. Questo servirà anche per assicurare una buona resa del sito se stampato su carta. A parte il problema dello sfondo scuro per il testo, non ci sono altre rigide regole per costruire un sito Web. Ad esempio, se vi piacciono i colori scuri, va benissimo fare blu scuro la parte superiore della pagina. Però ascoltatemi bene: se rendete l'intera pagina blu scuro, fate male. Se vi limitate a rendere blu scuro una porzione della pagina (preferibilmente senza troppo testo al suo interno), potrebbe essere un'ottima scelta, poiché quel blu scuro farà un bel contrasto con l'area bianca per il testo ed aggiungerà un po' di "sentimento" al vostro nuovo sito. In effetti, una gran parte della pagina può contenere colori saturi o scuri; ma ripeto, assicuratevi che il vostro principale contenuto testuale venga presentato con uno stile tradizionale. Inoltre voglio essere sicuro che la pagina Web non sia né troppo fitta di contenuti, né troppo vuota. Penso che ognuno di noi abbia affrontato questa sfida; alcuni hanno la tendenza a comprimere nella pagina così tante informazioni da renderla totalmente incomprensibile, mentre altri aggiungono in abbondanza margini ampi e spazi vuoti inutili così che gli utenti siano costretti a scorrere diverse schermate per trovare le informazioni che cercano. Per le nuove pagine indicizzate, voglio usare margini minimali -- il minimo per mantenere tutto leggibile credo vada bene. Utilizzerò spazi vuoti solo se gli elementi risulteranno davvero troppo stipati. Dopo tutto, l'intenzione dietro alle pagine indicizzate è quella di risolvere un problema di spazio, e sarebbe bene concentrare molte informazioni nel più piccolo spazio possibile, fintanto che la leggibilità non venga compromessa. Un'alta densità di informazioni ha un ulteriore vantaggio: gli utenti hanno meno bisogno di scorrere la pagina per trovare le informazioni che cercano. Questo rende la pagina molto più piacevole da leggere. (Se non mi credete, realizzate un paio di pagine d'esempio e constatate voi stessi). I contenuti sono più importanti dell'arte Lavorando sull'impaginazione del sito, ho imparato in fretta come la riprogettazione di una pagina Web dovrebbe essere innanzi tutto come un'opportunità per presentare i contenuti (cioè le informazioni che sono utili ai visitatori) in maniera leggibile ed efficace, piuttosto che un'occasione per realizzare un'opera d'arte o per trasudare un gran -- hem -- senso di appartenenza. Non che queste pulsioni artistiche siano necessariamente proibite, ma se perseguendo questo obiettivo rovinassi la presentazione dei contenuti, allora non farei un favore ai miei visitatori. Una volta ogni tanto è buona norma fare un passo indietro e riconoscere che chi visita il nostro sito sta cercando innanzi tutto delle informazioni e non nuovi approcci demenziali alla progettazione Web. Se questo è qualcosa con cui avete avuto a che fare consolatevi: anche io sono tentato a concentrarmi su cose "artistiche" e lasciare da parte vere le priorità. Ora che abbiamo visto alcuni dei miei obiettivi di riprogettazione, diamo un'occhiata alle nuove pagine indicizzate di gentoo.org. Ecco la nuova pagina con la quale verrete accolti quando visitate http://www.gentoo.org:
Devo ammettere di essere molto soddisfatto della riprogettazione, ed anche l'estetica del nuovo sito mi piace molto. Notate come vengono usate le tabelle per dividere la pagina in 4 parti: l'area in alto a sinistra per il logo, l'area nera per il menu, l'area grigia per le informazioni e l'area bianca principale per i contenuti. Notate anche come il preciso allineamento di queste quattro regioni renda il progetto semplice ma accattivante. Diamo ora un'occhiata ai colori. Come ho detto poco fa, sono un grande fan dei siti Web estremamente scuri. Però, poiché un sito troppo scuro non è una buona cosa, ho raggiunto un compromesso: le parti scure sono limitate alle aree in alto ed il testo invertito viene usato solo nell'area del menu, del logo e del titolo per l'oggetto flottante "Gentoo Linux Features". Siccome queste aree della pagina non vengono utilizzate per presentare grandi quantità di testo, non ho intenzione di tediare i miei visitatori. Al contrario, queste sono una graziosa decorazione all'area (bianca) principale per i contenuti testuali. Ecco un'immagine della pagina indicizzata "Download/Install":
Un'altra cosa di cui vale la pena parlare: probabilmente avrete notato che l'"omino-antenna volante" ed il logo rosso di "gentoo" provengono dal sito originale. Ho deciso di integrare queste grafiche nel nuovo progetto in modo che il nuovo index.html principale continui ad apparire familiare agli utenti di vecchia data. Comunque, ho eliminato l'"omino-antenna volante" da tutte le altre pagine in modo che in una schermata possano stare più informazioni. Il logo rosso di "gentoo" è stato mantenuto su ogni pagina poiché aiuta a rendere l'area bianca per i contenuti visivamente più allettante ed attira l'attenzione sul titolo della categoria. Il menu di navigazione ed il titolo Come potete vedere, il nome della pagina corrente nel menu di navigazione è evidenziato con un verde brillante, grazie ai fogli di stile a cascata (CSS, Cascading Style Sheets), ed il nome della pagina corrente viene ripetuto subito sotto il logo rosso di "gentoo", nell'area principale dei contenuti. Sebbene inizialmente pensassi che questo titolo non sarebbe stato necessario, ho visto che limitare l'evidenziazione in verde della pagina corrente nel menu di navigazione, non era abbastanza per fornire agli utenti un'indicazione sulla pagina che stavano visitando. Nonostante l'aspetto semplice del nuovo sito, ho inserito un bel po' di informazioni all'interno della pagina. Un conseguente vantaggio è che, per la maggior parte delle risoluzioni, un visitatore avrà solo bisogno di scorrere in giù per leggere tutto il testo principale. Comunque, tutti i link dovrebbero essere visibili ed accessibili immediatamente, senza richiedere all'utente scorrimenti verticali. Questo rende l'intero sito più facile da navigare -- una grande vittoria per l'usabilità. Limitandosi all'osservazione del sito, non non ci si fa un'idea chiara di cosa abbia comportato il processo di riprogettazione. In realtà, da quando ho cominciato la riprogettazione, ho commesso molti errori importanti per la logistica del sito. L'errore più grande è stato quello di buttarmi subito su Xara nel tentativo di creare il nuovo aspetto per le pagine indicizzate. Utilizzando Xara, ho sprecato un sacco di tempo concentrandomi quasi esclusivamente su grafiche accattivanti piuttosto che sull'impaginazione. In questo modo, ho messo il carro davanti ai buoi ed ho finito col creare circa 20 progetti prototipi che alla fine avrei dovuto buttare via. Infatti questi prototipi sono risultati inutili poiché non avevano niente a che fare col modo di presentare i contenuti. Una volta recuperate le mie facoltà, sono uscito da Xara, ho avviato un editor di testo ed ho scritto il testo grezzo che sarebbe apparso nella pagina. Dopo aver scritto il contenuto, ho creato un'impaginazione generica per presentare questo testo all'utente -- ancora senza schemi di colori o abbellimenti grafici. Dopo, e solo dopo, ho riaperto Xara ed ho messo a punto il nuovo aspetto del sito, sviluppando uno schema di colori e migliorando il logo. Questa volta, il processo di progettazione grafica è stato indolore e relativamente veloce poiché avevo già una struttura esistente (il testo e l'impaginazione) che dirigeva i miei passi. Senza questa struttura, avrei potuto spendere il resto della mia vita giocando con Xara, sviluppando migliaia di ipotetiche soluzioni progettuali per il nuovo sito. Quando riprogettate il vostro sito, ricordate che la cosa più importante sono i contenuti, dopo viene l'impaginazione ed infine, molto lontano da questi due, gli abbellimenti grafici. Se utilizzerete questo approccio, risparmierete un sacco di tempo. Ricapitolando, durante il processo di progettazione ho fatto qualche errore, ma ho anche fatto un paio di cose giuste ed una di queste è stata quella di permettere agli sviluppatori Gentoo Linux di revisionare e commentare il mio lavoro durante lo sviluppo. Come ricorderete dal mio primo articolo, il piano d'azione identificava gli sviluppatori come il pubblico a maggiore priorità, perciò coinvolgerli nel progetto è stata chiaramente una scelta saggia. Realizzare ciò è stato facile. Mi sono limitato ad avviare un client IRC, l'ho connesso al nostro canale come faccio di solito e poi, quando facevo un progresso significativo, generavo un'istantanea .png del sito corrente e la postavo sul nostro server Web. Così, chiunque sul canale poteva dare un'occhiata e commentare istantaneamente il mio lavoro. Questi sviluppatori sono stati i miei punti di riferimento, facendomi sapere quali fossero gli approcci ed i colori più popolari, e che tipo di impaginazioni fossero le migliori. Se l'aspetto del sito diventava troppo stipato o complicato, qualcuno me lo faceva notare ed io modificavo l'HTML di conseguenza. Quando il progetto delle pagine indicizzate si stava avviando alla conclusione, ho cominciato a creare dei tarball dell'HTML e delle immagini del sito in modo che gli sviluppatori potessero giocare con il codice e fare le correzioni necessarie. In questo modo, il canale IRC ha permesso di sviluppare l'HTML in un modo veramente user-centrico. Come ultima cosa, ma non per questo meno importante, gli sviluppatori Gentoo Linux mi hanno davvero aiutato a correggere il codice HTML in modo che venisse visualizzato correttamente da un gran numero di moderni browser. Bene, per ora è tutto. Seguitemi nel prossimo articolo dove alla fine convertirò l'intero sito in un sistema completamente modulare basato su XML/XSLT. Questo, oltre ad essere entusiasmante, può anche essere un'opportunità per scoprire un sacco di dettagli gustosi dal "dietro le quinte" dello sviluppo XML!
|
|
