Il Pesa-Nervi.

La nuova filosofia di progettazione web

Devono essere attivi i cookie e javascript.

Argomento: informatica

Nozioni di base su struttura e presentazione dei documenti per il web, come introduzione ad una progettazione rispettosa degli standard promossi dal World Wide Web Consortium (W3C).

Sommario

• Prefazione
• Introduzione
• Separazione tra informazioni e loro rappresentazione
• Confronto tra vecchia e nuova progettazione
• Processo di sviluppo
  • Fase 1: Strutturazione e organizzazione delle informazioni
  • Fase 2: Impaginazione della struttura
• Potenzialità
  • Accessibilità dei contenuti
  • Leggerezza e flessibilità
  • Una struttura, infinite presentazioni
  • Motori di ricerca
• Conclusioni

Prefazione

Con questo articolo voglio rivolgermi a tutti coloro che hanno sentito parlare almeno qualche volta di standard web, accessibilità, (X)HTML, CSS, separazione tra struttura e presentazione o, in breve, di nuova filosofia di progettazione web, ma non sono ancora riusciti ad intrecciare i vari concetti e a farsi così un'idea chiara in proposito.

La mia intenzione è quindi fornire una panoramica generale su questi argomenti e cercare di avvicinare ad essi i progettisti che ancora nutrono scetticismo o paura nei loro confronti oppure semplicemente li ignorano. Spero inoltre che questo articolo possa rivelarsi utile per coloro che sono appena approdati all'apprendimento dei linguaggi standard per il Web.

I temi sono trattati in maniera generica (non è un testo di approfondimento) e lo stile di esposizione cerca di bilanciare i tecnicismi con similitudini, metafore e illustrazioni, al fine di rendere comprensibile il contenuto anche a persone con un livello minimo di conoscenza della materia.

Introduzione

Un documento web progettato in maniera intelligente richiede di essere suddiviso in più sotto-parti. Ciò significa che, invece di essere un unico monolito, prende vita dalla riunione di diversi organismi. Questi organismi sono principalmente due: struttura e presentazione.

Separazione tra informazioni e loro rappresentazione

La nuova filosofia di progettazione si basa per gran parte sul principio di separare la struttura dalla presentazione. Essa permette di concentrarsi distintamente - durante il processo di sviluppo - sui due elementi principali che compongono una pagina web:

1. le informazioni e
2. la rappresentazione visuale delle stesse.

Per ognuno dei due elementi esiste un linguaggio appropriato che permette di gestirli; rispettivamente:

1. linguaggio (estensibile) di marcatura per ipertesti, ovvero (X)HTML;
2. fogli di stile a cascata, ovvero CSS.

Confronto tra vecchia e nuova progettazione

C'era una volta una marea di pagine realizzate senza cognizione di causa, adoperando le tecnologie in maniera non appropriata. Potremmo definirle monolitiche. Perché monolitiche? Perché queste pagine si portavano in spalla tutto il carico possibile e immaginabile: informazioni inutili, dati ripetuti, organizzazione strutturale priva di senso e via dicendo.

Quando penso ad esse mi pare di vedere una persona sovrappeso, vestita in maniera non adatta in relazione al percorso che deve compiere e con un enorme zaino stracarico sulle spalle.

Prima di riuscire ad arrivare alla visualizzazione grafica finale sul browser dell'utente, immaginatevi la fatica!

Noi però sappiamo, come ho anticipato prima, che un documento web è formato da due elementi principali: struttura e presentazione. Perché, dunque, non provare a considerare una pagina come la riunione di essi e non come un miscuglio inscindibile? Vi presento, rispettivamente:

1. il dotto occhialuto, a rappresentare la funzione descrittiva di XHTML;
   

   

2. lo stilista fricchettone, a rappresentare la funzione presentazionale dei CSS.
   

   

Questi due personaggi si spartiranno il carico e i compiti durante l'arrampicata, permettendo maggiore precisione e flessibilità (nonché l'utilizzo di ulteriori potenzialità, che andremo ad analizzare in seguito).

Processo di sviluppo

Guardiamo dunque da vicino il processo di sviluppo, basato su questo approccio in due tempi, di un documento web. È importante ricordare che le due fasi devono avvenire nell'ordine specificato.

Fase 1: Strutturazione e organizzazione delle informazioni

In questa fase, il nostro accompagnatore sarà il dotto occhialuto.

La prima cosa da fare è indubbiamente concentrarsi sulle informazioni che andranno ad essere inserite nella pagina. 'Concentrarsi' significa analizzare la natura di queste informazioni e tradurla in XHTML.

Ricordiamo un attimo cosa rappresentano le ultime due lettere dell'acronimo: M sta per Mark-up, L per Language, ovvero linguaggio di marcatura. Questo è lo strumento che noi progettisti abbiamo a disposizione per evidenziare la struttura di un documento. Il principio di funzionamento è piuttosto semplice:

• si utilizzano i marcatori (i cosiddetti tag)...
• per descrivere...
• le varie parti che compongono il contenuto.

Un po' come avere un poster e appiccicarvi sopra dei post-it per individuare gli elementi che compongono l'inquadratura:

In un ipertesto, di solito, si hanno titoli, paragrafi, immagini, liste e altri strumenti simili. Immaginiamo che un documento simile a questo sia stampato su un foglio di carta invece che visualizzato sul vostro browser: con un pennarello immaginario tracceremo dei segni per individuare le varie parti logiche. In sostanza, lo marcheremo:

Sempre facendo finta di essere partiti dal foglio di carta, realizziamo la struttura di markup corrispondente ai segni tracciati con il pennarello:

<h1>La nuova filosofia di progettazione web</h1>
<p id="note">Di Piero Fissore | Udine (Italy), 2006-04-17</p>
<h2>Introduzione</h2>
<p>Testo del paragrafo.</p>
<h2>Separazione tra informazioni e loro presentazione</h2>
<p>Testo del paragrafo.</p>
<ul>
   <li>le informazioni e</li>
   <li>la rappresentazione visuale delle stesse.</li>
</ul>

Usare un linguaggio di marcatura significa semplicemente appiccicare post-it o sottolineare con un pennarello: il fine ultimo è attribuire significato. Il set di tag che avremo a disposizione dipenderà dal linguaggio di marcatura che stiamo utilizzando. Per esempio, date un'occhiata ai marcatori che ci mette a disposizione XHTML 1.1.

Fase 2: Impaginazione della struttura

Avete notato che fin qui non abbiamo ancora preso in considerazione l'aspetto visuale che assumerà la nostra pagina? Ci siamo concentrati solamente sulle informazioni che la compongono, analizzando e curando nel dettaglio un'adeguata struttura per organizzarle. Bene, ora - grazie allo stilista fricchettone - andremo a 'vestire' la nostra struttura.

Tutto quel che riguarda la visualizzazione grafica di una pagina web viene gestito, come detto, tramite un linguaggio chiamato fogli di stile a cascata, ovvero CSS. Un foglio di stile non è altro che un file, solitamente esterno al documento, che raccoglie in sè tutte le istruzioni stilistiche.

La sua sintassi è differente da quella di XHTML (non si tratta più di marcatura), ma l'estrema semplicità che la contraddistingue fa di CSS un linguaggio altrettanto facile, sia da imparare sia da usare.

Proviamo ad immaginare uno scenario teatrale: siamo dietro le quinte, a pochi attimi dall'inizio dello spettacolo. Abbiamo gli attori (i tag) che si avviano verso il palco (il browser); prima dell'ingresso vediamo lo stilista fricchettone (il foglio di stile) assegnare i costumi appropriati agli artisti in base al ruolo, prima che questi entrino in scena.

Pertanto:

1. l'attore arriva svestito;
2. lo stilista si avvicina e legge il suo ruolo;
3. lo stilista si avvia in guardaroba e prende il costume corrispondente;
4. l'attore lo indossa ed entra in scena.

Vi sembra troppo banale? Eppure funziona così: niente di più, niente di meno.

Facciamo un esempio concreto, prendendo il titolo principale del documento:

<h1>La nuova filosofia di progettazione web</h1>

Il mio desiderio, adesso, è fare in modo che esso venga visualizzato di color rosso e con un margine inferiore (che mi serve per separarlo dall'elemento successivo) di 10 px (pixel). Traducendo in CSS:

h1
{
   color: red;
   margin-bottom: 10px;
}

Analizziamo la sintassi:

• sulla prima riga abbiamo h1: esso viene chiamato selettore CSS e rappresenta un po' il cartello posto sul manichino in guardaroba; lo stilista si rifarà ad esso per trovare il vestito appropriato per il marcatore <h1>;
• dopo il selettore abbiamo tutte le istruzioni relative al costume: esse sono racchiuse all'interno di parentesi graffe, visibili sulle righe 2 (parentesi di apertura) e 5 (parentesi di chiusura) del listato;
• ogni singola istruzione relativa al costume viene chiamata proprietà CSS; ce ne sono per tutti i gusti: dal colore del testo alla sua dimensione, dalle proprietà per gli sfondi a quelle per i bordi, da quelle per i margini a quelle per le liste, e via dicendo; è importante notare come ogni proprietà sia formata da due parti:
  
  1. il nome (ad esempio, color) e
  2. il valore corrispondente (red);
  le due parti sono separate dai due punti; ogni proprietà termina, per separarla dalla successiva, con un punto e virgola.

Questa fase di impaginazione della struttura ci serve pertanto ad associare le informazioni di stile ai contenuti strutturati (organizzati) nella fase 1 (Strutturazione e organizzazione delle informazioni).

Potenzialità

Credo che l'ordine mentale, durante la pianificazione di un qualsiasi lavoro, sia essenziale per raggiungere i propri obiettivi in modo sicuro e ottimale. Poter avere una visione d'insieme e nello stesso tempo concentrarsi singolarmente sulle varie componenti del progetto significa essere in grado di suddividere compiti, tempistiche e sforzi in maniera ponderata.

È pertanto già nella salubrità del lavoro che la nuova filosofia di progettazione ci viene incontro: obbliga ad approfondire, ad interrogarci, a semplificare. In sostanza, ci aiuta a dare un giusto peso alle cose (o meglio, ai contenuti del documento).

Oltre a rendere migliore la vita dei progettisti web, la nuova filosofia regala all'utente una migliore esperienza di navigazione.

Accessibilità dei contenuti

Intrecciando struttura e presentazione otteniamo la classica combinazione, quella a cui tutti pensano quando immaginano il web: un browser aperto con una pagina caricata all'interno, che si rivela con i suoi colori, i suoi testi, le sue immagini e i suoi collegamenti ipertestuali.

Cosa succede, però, se a voler accedere alle informazioni presenti nel nostro documento sia ad esempio una persona non vedente?

Innanzitutto, come logico, la presentazione visuale della pagina svanisce dal ragionamento. Cosa rimane, dopo questa evaporazione? La struttura. Perfetto: cadiamo in piedi. Grazie alla cura e all'attenzione che abbiamo prestato nella Fase 1 (Strutturazione e organizzazione delle informazioni), il contenuto del documento porta con sè una gerarchia di significato, rappresentante, ancor prima della forma, la valenza di ogni sua singola parte.

I non vedenti hanno a disposizione vari strumenti per navigare in rete: uno di questi è il lettore di schermo (screen reader). Questo marchingegno fa essenzialmente da tramite:

1. legge la struttura della pagina e
2. ne riferisce vocalmente il contenuto all'utente.

Ecco che si palesa in tutto il suo splendore la differenza tra struttura e presentazione:

• una persona normodotata, trovando un testo posto in cima ad un foglio, scritto in grassetto e con un grande carattere, forse non avrà difficoltà ad associarlo al titolo del documento;
• chi però non è in grado di percepire le differenze grafiche tra le diverse parti di un documento necessita di un indizio riguardante il significato.

Il significato sta alla base di tutto: esso può essere maneggiato in svariati modi; un lettore di schermo, ad esempio, può assumere un tono vocale solonne e cadenzato, così da far comprendere alla persona non vedente di fronte a cosa essa si trovi.

Si intuisce quindi come i marcatori (i tag) abbiano la funzione di descrivere ciò che circondano.

La rappresentazione visuale sul monitor è solo uno dei modi di far arrivare al cervello di una persona le informazioni che si vogliono trasmettere. Comprendere ciò è il passo essenziale per capire a fondo (e per amare) la progettazione intelligente.

Significa inoltre acquisire la consapevolezza di quanto sia superficiale quel criterio di progettazione - tuttora adoperato da molti cosiddetti 'professionisti del web' - che si limita a dare solo una forma visuale ai contenuti, producendo i corrispettivi di quadri o diapositive. Il World Wide Web, invece, può offrirci molto di più, a patto di usare in modo corretto i linguaggi di marcatura e di stile esistenti.

Leggerezza e flessibilità

Un documento web intelligente è inoltre quasi sempre più leggero e più flessibile di un documento 'vecchia maniera'.

Basti pensare che il foglio di stile, una volta caricato dalla macchina dell'utente, non dovrà più essere richiesto. Lo stilista fricchettone, una volta arrivato in cima alla montagna (che rappresenta la visualizzazione sul browser), si siederà e guarderà semplicemente scorrere davanti a sè la struttura dei vari documenti; quest'ultima, nel corso della scalata, sarà molto più agile e rapida, in quanto non dovrà portarsi in spalla il pesante zaino contenente tutte le informazioni di stile, come avveniva in passato.

Tutto ciò porta principalmente due vantaggi:

1. i tempi di caricamento delle pagine si riducono notevolmente,
   
   • rendendo più scorrevole e meno frustrante la navigazione per l'utente;
   • producendo un risparmio economico per il gestore del sito, il quale avrà un minor consumo di banda da pagare al proprio fornitore di hosting;
2. l'intera grafica diventa centralizzata: vogliamo ad esempio cambiare il colore di sfondo a tutte le cento pagine del nostro sito? Basterà modificare un valore nel foglio di stile; non credo ci sia bisogno di spiegare cosa questo comporti, ad esempio, in termini di manutenzione o aggiornamento.

Una struttura, infinite presentazioni

Come la mettiamo, ad esempio, con i siti paralleli?

Vale ancora la pena di clonare un lavoro e andare poi a modificare poche informazioni di stile in ogni pagina del sito, allo scopo di renderlo navigabile anche con un telefonino? Il lavoro sarebbe duplice non solo in fase di progettazione ma anche di aggiornamento: ad ogni modifica, i siti a cui dover metter mano sarebbero due, non uno solo. E se volessimo fornire anche una versione stampabile? Triplicheremmo il lavoro. E' ovvio che si tratterebbe di un approccio molto poco intelligente.

La nuova filosofia di progettazione, invece, ci dà la possibilità di scrivere una volta e pubblicare ovunque. Dobbiamo ringraziare il fatto che stiamo tenendo separate le informazioni dalla loro rappresentazione: ciò significa che ad una singola struttura possiamo assegnare infiniti fogli di stile alternativi.

Vogliamo che i nostri documenti assumano una certa grafica quando visualizzati su un comune browser, un'altra se visualizzati su un telefonino o su un palmare, un'altra ancora se stampati, e via dicendo? I CSS ce lo permettono, addirittura con uno sforzo minimo.

Questa potenzialità può essere sfruttata in svariati modi, ad esempio:

• non volendo rinunciare al forte impatto grafico del nostro sito, la cui impaginazione magari non facilita molto la leggibilità del testo, è possibile fornire un foglio di stile alternativo - attivabile a scelta dall'utente - per offrire una grafica con colori più contrastati e dimensione maggiore dei caratteri, così da favorire utenti anziani o persone ipovedenti;
• offrire all'utente uno stile particolare in base all'ora del giorno o in base ad un particolare evento; a Natale, per esempio, il sito potrebbe assumere colori e sfondi a tema; tutto ciò avverrebbe senza mettere assolutamente mano alla struttura, semplicemente assegnando un diverso foglio di stile;
• sempre a livello di accessibilità, si potrebbe offrire all'utente la possibilità di personalizzare le impostazioni visive, magari per quanto riguarda la grandezza del testo, il contrasto con lo sfondo e via dicendo; una libertà che una persona con particolari disabilità potrebbe apprezzare di cuore.

La lista potrebbe andare avanti: l'unico limite è la fantasia.

Vorrei portare due esempi a supporto di quanto fin qui spiegato:

• CSS Zen Garden è forse la più famosa dimostrazione di come sia possibile attribuire infiniti stili ad un'unica struttura di marcatura; il progetto consiste infatti in un'unica pagina, visualizzabile in centinaia di modi differenti: basta scegliere lo stile dal menu; provate e stupitevi, ricordando che non sono effetti speciali: lo può fare chiunque, e con sforzi minimi;
• il sito personale di Douglas Bowman, Stopdesign, offre la possibilità, tramite un'apposita pagina, di scegliere uno stile in base alle proprie esigenze; anche qui lo sforzo di realizzazione è minimo, ma le potenzialità sono entusiasmanti.

Motori di ricerca

I motori di ricerca, volendo fare un paragone, sono un po' come dei lettori di schermo:

• non si curano della presentazione visuale di un documento, anzi,
• desiderano "comprendere" di cosa esso tratti, al fine di poterlo categorizzare nel migliore dei modi.

E su quali elementi si baseranno, per tentare di comprendere il contenuto del documento? Esatto, sulla struttura:

• saranno ad esempio in grado di comprendere quale sia il titolo andando a cercare il tag <h1>;
• sapranno che le parole contenute nei titoli e nei sotto-titoli, essendo essi riassuntivi, rappresenteranno delle parole chiave più importanti rispetto ad altre contenute in semplici paragrafi o elementi di lista;
• potranno pesare meglio il significato di un'immagine contenuta nel documento, basandosi sul contenuto alternativo e sul contesto che la circonda.

L'elenco potrebbe proseguire, ma il concetto cardine rimane sempre - e ancora una volta - lo stesso: grazie ad un uso appropriato dei marcatori, anche le macchine saranno in grado di comprendere le informazioni contenute nella pagina; comprendendole, sapranno dar loro il giusto peso al momento dell'indicizzazione.

Ecco perchè, ad esempio, le tabelle-layout (tabelle d'impaginazione, di formattazione) sono uno strumento stupido: ogni porzione di testo è, agli occhi della macchina, un 'dato contenuto in una cella', e non ci sarà modo per un motore di ricerca (o per qualsiasi altro dispositivo automatico) di discernere un titolo da una citazione, una lista da un paragrafo, e via dicendo. Le tabelle-layout trasformano le pagine in quadri immobili, privi di un significato che non sia quello veicolato dalla presentazione visuale.

Tuttavia, come abbiamo potuto notare, non solo le persone normodotate usufruiscono delle informazioni presenti in rete, e, in generale, non solo gli esseri umani; anche le macchine dovrebbero avere libero accesso ad esse, magari per comporle e formulare nuove informazioni, come ad esempio per rispondere in maniera appropriate alle domande degli utenti.

Tutto ciò è possibile solamente se le informazioni sono dotate di significato, non solo di una posizione, di un colore o di un determinato carattere tipografico.

Conclusioni

Il web sta andando avanti, sta crescendo, sta evolvendo.

I nuovi progetti e le nuove tecnologie legati ad esso si baseranno sempre di più su un approccio come quello visto in questo articolo. Basti pensare al Web Semantico o a XHTML 2.0, due dei grandi progetti in corso di realizzazione del World Wide Web Consortium (il Consorzio che si occupa dello sviluppo del WWW e delle sue tecnologie).

Oggi siamo in un periodo di transizione, di passaggio dal vecchio al nuovo modo di fare e pensare il web. Se fino a questo momento, in un modo o nell'altro, i progettisti 'old school' sono riusciti a tirare avanti facendo finta di nulla, a breve ciò non sarà più possibile.

Il mio non vuole essere assolutamente un monito catastrofistico, ma solo una considerazione nascente dalla conoscenza del web, degli strumenti di progettazione e delle trasformazioni in corso. Lo scenario mi pare sufficientemente chiaro, soprattutto in quest'ultimo periodo: per il futuro del web, sono alle viste una quantità di meravigliosi strumenti, ma la loro comprensione e il loro impiego sarà impossibile (o comunque difficoltoso da digerire) per coloro che rimarranno legati alla vecchia filosofia di progettazione.

Il mio, quindi, vuole essere un contributo in più - in mezzo a tanti altri di gente ben più esperta - per far emergere la cultura del web intelligente, affinchè nessuno rimanga indietro, con il rischio di perdersi i reali vantaggi legati all'uso di queste nuove tecnologie e con il rischio, anzi, di frenare il loro stesso sviluppo.