La separazione tra interfaccia e contenuto e’ oggi realizzabile attraverso varie tecniche. Ne analizziamo alcune.

Vorrei che internet sparisse. Non fraintendetemi: non sto augurando a noi tutti
un secondo (e magari definitivo) sboom di quella che un tempo era nota come
“New Economy”; mi piacerebbe solo che internet non fosse un fine,
come accade ora, ma un mezzo.

Credo che a nessuno interessi sapere di collegarsi ad un sito wap piuttosto
che ad un sito HTML o che altro ancora. Fruiamo di informazioni attraverso un
sito. Questa è la cosa che conta.

Analizziamo per un attimo la situazione attuale. In ordine decrescente di importanza
(o, se volete, di popolarit� di utilizzo) ecco i media di cui molti di
noi fanno quotidianamente uso, in maniera più o meno trasparente, per
connettersi ad un qualsiasi servizio online:

• Personal Computer
• Telefono cellulare
• PDA
• iTV
• Elettrodomestici
  intelligenti (Frigo, forno, etc.)
• …

Sebbene sia vero che la stragrande maggioranza del traffico passa attraverso
i primi due tipi di device dobbiamo essere consci che sempre più spesso
oggetti di uso comune hanno qualche tipo di funzionalit� “web”. La mia
lavatrice, ad esempio, utilizza la rete elettrica come LAN
per comunicare con gli altri elettrodomestici e segnalare eventuali guasti ad
un tecnico… ma di questo se ne è gi� scritto
in passato proprio su queste pagine.

Naturalmente ogni device richiede un’apposita impaginazione del contenuto…
non è possibile pensare di utilizzare una grafica creata per un monitor
a 800×600 sul display di un palmare a meno di non essere tanto sadici a costringere
i nostri utenti a scrollate di 600 pixel in orizzontale. Mi pare logico, non
trovate?

Negli ultimi anni ci siamo quindi prodigati a creare siti sviluppando una versione
per Explorer e una versione (identica nei contenuti ma diversa nel codice) per
Netscape … che spreco di tempo e denaro! Se fino ad oggi siamo stati schiavi
dei browser il domani che ci si prospetta è quello di essere costretti
a creare innumerevoli versioni del servizio (inteso come interfaccia + contenuto):
una per ogni tipo di device.

Provando tuttavia a risalire agli albori di HTML si può notare come,
secondo gli scopi originari dei suoi creatori, i marcatori dovessero essere
utilizzati per differenziare varie tipologie di contenuto (titoli, didascalie,
immagini, …) piuttosto che per creare un’interfaccia.

Questo purtroppo è raramente avvenuto: basti pensare che lo strumento
principe per l’impaginazione dei siti odierni () era stato originariamente
creato per presentare dati tabulari. Non vi viene da sorridere?

Alcuni di voi ricorderanno il claim più inflazionato della seconda met�
degli anni 90: “Content
is king“. Beh… oggi, con l’avvento dell’usabilit� , dell’interaction
design e di altre splendide discipline (date un occhio a tal proposito allo
speciale IA
di qualche tempo fa) possiamo affermare che “Content is NOT the only king”:
anche l’elasticit� e l’efficacia dell’interfaccia sono oggi protagoniste
principali per l’ottenimento del successo di un sito.

Se ci pensate bene questo è un momento chiave della storia della comunicazione:
pare infatti che vivremo sempre più in un mondo always on dove cioè
la connessione alla Rete (a questo punto chiamarla “solo” Internet mi sembra
riduttivo) sar� continuativa attraverso palmari, telefonini, elettrodomestici
intelligenti e, chiss� , wearable
computers.

Ecco quindi che risalta in tutta la sua importanza il problema della staticit�
dell’interfaccia: un’applicazione visibile in maniera ottimale su
uno solo dei device disponibili sar� totalmente inutile.

Ma
le torbide acque tecnologiche si stanno finalmente smuovendo e qualcosa sta
gi� cambiando. Con l’approvazione della nuova specifica di HTML
(che prende il nome di XHTML), con una diffusa sensibilizzazione al problema,
con Flash e XML, con CSS2
, siamo finalmente tornati alla reale ed efficace separazione tra interfaccia
e contenuto. In altre parole questo vuole dire che la sola costante rimane il
“succo” perché ogni device potr� liberamente rappresentare l’interfaccia
in base alle proprie peculiarit� .

Durante gli ultimi mesi del 2002 sono stato molto colpito da un paio di notizie
relative a due colossi del web : Wired
News e Lycos:
entrambi sarebbero passati entro breve all’utilizzo di XHTML 1.0 e dei
CSS per la costruzione delle pagine dei siti.

In un mondo dove spesso ancora si assiste all’utilizzo del tag marquee
queste notizie hanno quasi dell’incredibile, ma i motivi per passare ad
XHTML ci sono tutti:

• un buon grado di backward
  compatibility con browser di generazioni precedenti
• maggiore rigore
  nella sintassi e quindi codice più preciso, ordinato e compatto
• possibilit� di estendere
  il parco marcatori (XHTML è infatti un sottoinsieme di XML)
  per creare tag proprietari
• definizione degli elementi grafici attraverso l’uso
  dei fogli di stile

Ci viene data quindi la possibilit� di tenere fortemente separata la
struttura del documento (quindi ad esempio l’insieme di Titolo + Sottotitolo
+ Contenuto) dal suo aspetto grafico.

La prima considerazione che sicuramente va fatta è che per cambiare
di posizione un elemento che si ripete su tutto il sito, la barra menù
ad esempio, sar� sufficiente modificare le coordinate del relativo layer
nel CSS . Ad occhio e croce direi che un’operazione che usualmente sarebbe
costata giornate di lavoro può essere svolta in una manciata di minuti.
Un balzo di produttivit� che far� la gioia di più di un
project manager.

La possibilit� di definire fattivamente l’interfaccia all’interno di
un foglio di stile significa altresì che la creazione di n fogli di stile
porter� alla costruzione di n interfacce differenti per lo stesso contenuto.
Sar� quindi molto semplice modificare l’impatto grafico del nostro sito
anche più volte durante la giornata (magari caricando in maniera automatica
e casuale fogli di stile differenti o dando la possibilit� ai nostri
utenti, come gi� sta sperimentando da tempo il motore di ricerca All
The Web, di personalizzare l’interfaccia in base ai propri gusti/necessit� ).

E per dispositivi differenti dalla classica accoppiata PC + monitor?

Gi�
oggi è possibile definire un foglio
di stile ad uso esclusivo della stampante.
Si può così evitare di stampare elementi la cui funzione sia esclusivamente
legata all’interazione, come i pulsanti, piuttosto di decidere di utilizzare
font Sans-Serif per il monitor e Serif sulla carta; il tutto senza dovere per
forza creare una “versione stampabile” del codice.

Lo standard pubblicato dal W3C
prevede inoltre la possibilit� di definire fogli di stile per dispositivi
palmari, lettori braille, TV
interattiva il cui supporto, sebbene non ancora raggiunto, si avr�
nell’immediato futuro. La formattazione di un sito XHTML gi� esistente
per un nuovo dispositivo (magari con notevoli limitazioni di output visivo)
si tradurr� quindi nella semplice creazione di un differente foglio di
stile.

XHTML è solo uno degli strumenti oggi a nostra disposizione per ottenere
un’efficace separazione tra interfaccia e contenuto. Nel prossimo articolo di
questa serie andrò ad esplorare le molteplici
funzionalit� di Flash come efficace strumento per la costruzione
di interfacce utente: appuntamento al prossimo mese.

Qualche link

• Una semplice
  introduzione ad XHTML
• Reference
  con esempi
• XHTML school
• A List Apart: un’ottima
  risorsa anche per XHTML
• Il validatore del W3C