Scelte rapide:

Il Pesa-Nervi.

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

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

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.

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

Stampa | Che ne pensi? | 10 commenti | Mese corrente | 25317 visite
Articolo precedente. Articolo successivo.

Inizio pagina.

Menu

apri Da leggere

apri Archivio mensile

apri Argomenti

apri Autori

I sondaggi del Pesa-Nervi

Sei a favore della teoria dell'evoluzione o a favore del creazionismo?

Ultimi 5 commentiapri

Commento di Mario all'articolo Giornalismo vero e presunto (14/5/2006 alle ore 16,23)
Ottimo!

Commento di Giustizia Contro Pelo all'articolo Maltrattamenti sugli animali compiuti in Italia: una galleria degli orrori (2/3/2011 ore 16,11)
Se Vi puo' interessare... E' nata una nuova associazione, senza nessuna bandiera politica e (...)

Commento di Maurizio Spagna all'articolo L'inferno delle galee (23/11/2010 ore 19,44)
SFOLATI NEL VENTO ...il vento non un passeggero, nero, un cacciatore di ore al panico... CON (...)

Commento di RUSSO Vincenzo all'articolo Ipotesi sulla manipolazione dello spazio-tempo (5/11/2010 ore 15,10)
In realt la teoria di Einstein ,consiste di una serie di dimostrazioni per assurdo , che dimo (...)

Commento di RUSSO Vincenzo all'articolo I creazionisti riscrivono la storia dei dinosauri (29/10/2010 ore 15,14)
SALUTI DA VINCENZO RUSSO Vi TRASMETTO UN'ALTRA MIA MAIL MOLTO DIFFUSA IN RETE. risposte a BIOLOG (...)

Diritti & Collab.apri

Nome del sito, progetto grafico, codice ASP, XHTML e CSS sono di Michele Diodati (partita IVA 10541750583). I contenuti degli articoli pubblicati appartengono ai rispettivi autori.
Logo della licenza Creative Commons
Tutti i contenuti del sito Il Pesa-Nervi sono pubblicati sotto una Licenza Creative Commons.

E' possibile inviare articoli all'indirizzo pesanervi@diodati.org, chiedendone la pubblicazione. Quest'ultima avviene ad insindicabile giudizio del responsabile del sito, dopo aver valutato la corrispondenza del testo inviato ai criteri editoriali di originalità dell'argomento, correttezza linguistica, chiarezza espositiva.

Gli articoli inviati in visione devono essere corredati di nome e cognome dell'autore e indirizzo e-mail valido.

Articolarioapri

L'Articolario è una raccolta aggiornata fino ad agosto 2006 di link (2022 in totale) ad articoli apparsi su quotidiani online, riviste, blog, siti d'informazione e di approfondimento.

Ecco gli ultimi tre articoli segnalati:


Categorie:

Sono gradite le segnalazioni di nuovi articoli, che vanno inviate all'indirizzo pesanervi@diodati.org.

Articoli:
Gli ultimi articoli de 'Il Pesa-Nervi' in formato RSS 2.0
Commenti:
Gli ultimi commenti dei lettori de 'Il Pesa-Nervi' in formato RSS 2.0

Statistiche

Quanto può dirsi, si può dir chiaro; e su ciò, di cui non si può parlare, si deve tacere.
Ludwig Wittgenstein, Tractatus
logico-philosophicus, prefazione