Il Pesa-Nervi

«Lei parla a vanvera, giovanotto!
No, penso a dei critici con la barba».

La nuova filosofia di progettazione web

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

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.

Rappresentazione caricaturale di un documento web mal progettato

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

La visualizzazione grafica finale è rappresentata come la vetta di una montagna

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;

    Il dotto occhialuto, ovvero XHTML

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

    Lo stilista fricchettone, ovvero 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).

Un'arrampicata molto più agevole, se si suddividono i compiti

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:

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

Il poster rappresenta il contenuto, i post-it i marcatori che lo descrivono

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:

Attribuiamo marcatura al testo con un pennarello

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.

I quattro passaggi logici, rappresentati tramite caricature

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:

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).

I selettori CSS servono a puntare al corrispondente elemento nella struttura applicata tramite il linguaggio di marcatura (XHTML)

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.

Un desktop browser aperto su un documento web

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.

Il meccanismo: lo screen reader legge e riferisce vocalmente all'utente

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

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.

Il foglio di stile, seduto in cima alla montagna, osserva sorridente la scalata della struttura

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.

Ad una singola struttura è possibile assegnare infiniti fogli di stile

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

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

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

Motori di ricerca

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

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

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.

Commenti dei lettori

  1. Commento di Gabriele Romanato - 14/5/2006 ore 16,37

    Gli elogi già li conosci. un unico demerito: quando ti farai un sito?
  2. Commento di Piero Fissore - 18/5/2006 ore 11,33

    Caro Gabriele, ci sto lavorando proprio in questi giorni. :)
  3. Commento di La pulce d'Acqua - 19/5/2006 ore 15,41

    Dai muoviti che oggi è già il 19 maggio.
    Che poi esce anche il mio blogghinoinoino.

    Invece complimenti per l'esposizione.

    M.
  4. Commento di Piero Fissore - 20/5/2006 ore 9,0

    Oh, intanto mi hanno attivato il dominio:

    - http://www.pierofix.it

    Sto completando il template strutturale, mentre per la grafica non ho ancora trovato una soluzione. Intanto grazie per visita e per il commento. :)
  5. Commento di Ivan - 5/7/2006 ore 18,3

    Ciao pierofix.. trovo molto interessante quanto scritto da te... e la penso allo stesso modo tuo.. tanto è vero che leggendo ho imparato tante cose..

    Ciao
  6. Commento di Piero Fissore - 6/7/2006 ore 14,32

    Ivan, mi fa molto piacere che tu abbia trovato interessante l'articolo. :)
  7. Commento di Filannino Michele - 8/9/2006 ore 13,14

    Complimenti Piero, sei veramente in gamba !
    Sai scrivere molto bene e riesci ad essere sempre molto chiaro.

    Ciao.
  8. Commento di Piero Fissore - 11/9/2006 ore 10,37

    Michele F., grazie a te per il commento. :) Mi fa piacere che il testo sia risultato chiaro.
  9. Commento di Paolo - 5/12/2006 ore 12,55

    Signor Fissore i miei complimenti per la sua capacità di rendere questi argomenti alla portata anche dei "non addetti ai lavori". Non tutti sono in grado di farlo. Meglio, sono disposti a farlo.

    A risentirci, Paolo
  10. Commento di Piero Fissore - 5/12/2006 ore 15,52

    Caro Paolo, grazie mille. Tuttavia, se l''81' presente nel suo indirizzo e-mail equivale alla sua data di nascita, allora la prego di non darmi del lei, visto che sarei di tre anni più giovane. :D

    Saluti,
    Piero.

Articolo di Piero Fissore pubblicato il  14/5/2006 alle ore 16,23.

Indice del Pesa-Nervi | Diodati.org

Inizio pagina.