Tecnologie web
Andrea Crevola
andrea.crevola@3juice.com
http://webdesign.3juice.com

Sommario
In questa lezione:
Tecnologie web: server e client;
Standard per il web e tecnologie proprietarie;
I vantaggi degli standard per il web;
XHTML, CSS, ECMAScript;
Dal bozzetto alla pagina;

Tecnologie web
Fino ad ora abbiamo affrontato le tematiche del web
design dal punto di vista progettuale;
Rischiamo tuttavia di perdere di vista la dimensione
tecnica dei siti web;
Un sito web di qualità non rispecchia solo le buone
regole di user-centered design, architettura
dell’informazione, usabilità ecc.
Dalla piattaforma tecnologica su cui è edificato il sito
web deriva l’efficacia, l’efficienza e la solidità del
sistema interattivo;

Navigare…
Tecnicamente, navigare il web significa:
Formulare una richiesta con un programma di navigazione
1.
(client);
Inviare la richiesta tramite HTTP;
2.
Il server web cerca ed elabora le risorse richieste;
3.
Il server web invia le risorse al client tramite HTTP;
4.
Il client riceve le risorse e le interpreta secondo il proprio
5.
motore di interpretazione;

Il WWW
Web server
e
ons
st HTTP
que resp
re
DB
browser
server
client

Tecnologie server-side
Il web server è un software che si occupa di gestire le risorse web
residenti sul calcolatore server e di rispondere alle richieste dei client.
Web server più diffusi: Apache, IIS…
Il web server, ricevuta la richiesta del browser, si occupa di fornire una
risposta:
La risposta può essere diretta: viene inviata la pagina HTML richiesta, le
immagini, il foglio di stile ecc. (risorse statiche);
Oppure può essere necessaria l’elaborazione di programmi (script)
memorizzati in file presenti sul server stesso (risorse dinamiche);
Linguaggi di scripting più diffusi: PHP, ASP, .Net, CFML, JSP, Python…
Le risorse dinamiche, spesso, sono realizzate grazie all’interazione con altri
software presenti sul server stesso: server di posta elettronica, Database
Management System Server ecc.
DBMSS più diffusi: SQL Server, IBM DB2, MySQL, PostgreeSQL…

Esempio:
Un utente visita il sito di Trenitalia e tramite il modulo in Home Page, richiede
l’orario dei prossimi treni da Torino a Milano; compilati i campi, invia i dati
premendo il pulsante corrispondente;
Il browser interpreta l’azione dell’utente come una richiesta da formulare al
server, inviando i dati alla risorsa che corrisponde all’indirizzo dell’attributo
“action” della form HTML;
Il browser manda la richiesta al server tramite HTTP;
L’indirizzo richiesto corrisponde ad una pagina dinamica (per esempio scritta in
PHP), la quale è in grado di ricevere l’informazione specificata dall’utente ed
utilizzarla per la propria elaborazione interna;
Nello specifico, la pagina PHP usa i dati ricevuti per interrogare un Database
contenente gli orari dei treni ed individua quelli che corrispondono alla ricerca
effettuata dall’utente;
Lo script, infine, inserisce i dati ottenuti in un documento HTML dalla struttura
già definita;
Al termine dell’elaborazione il web server invia il documento HTML così ottenuto
al browser;
Il browser interpreta i comandi HTML, CSS ecc e li rappresenta all’utente;

Tecnologie client-side
I contenuti inviati dal server sono ricevuti e rappresentati da uno “user agent”
(browser ma non solo);
Un browser è un software che interpreta i comandi di marcatura, di stile e di
programmazione presenti nelle pagine web, ne fornisce una rappresentazione
(visuale) e si preoccupa di cercare e utilizzare quelle risorse come immagini,
suoni, animazioni ecc. che il codice della pagina prevede (es. le immagini).
Restando ai soli browser grafici, esistono numerose alternative:
Internet Explorer, Mozilla Firefox, Opera, Safari (Mac), Konqueror e Galeon (Linux),
ecc.;
Di ciascuno di essi esistono versioni successive (es. IE 5.0, 5.5, 6.0, 7.0) e parallele per
le varie piattaforme (es. Opera per Windows e per Linux).
Ciascun browser, infine, può essere diversamente configurato dall’utente finale per
motivi di efficienza (es. disabilitazione delle immagini), accessibilità (dimensione del
testo, foglio di stile personalizzato), di sicurezza (disabilitazione di Java e di Javascript);
Ciascuna installazione di un browser è un’interpretazione e una
rappresentazione del codice sorgente: date le numerose variabili, la
configurazione tecnologica del browser dell’utente potrebbe essere molto
diversa da quella su cui abbiamo visto il sito web in fase di sviluppo;

Risorse web
Un browser può ricevere e rappresentare diversi tipi di file:
Documenti HTML e XHTML;
Documenti XML;
Fogli di stile CSS;
Fogli di Stile XSL;
Script JavaScript;
Applet Java;
Animazioni Flash (SWF);
Contenuti audio / video (streaming e download);
Documenti PDF;
…
L’elenco preciso dipende dal browser specifico (es. IE visualizza anche i file
Office come documenti Word, Presentazioni Powerpoint, Fogli Excel);
Per visualizzare alcuni formati è necessaria la presenza di software aggiuntivi
(plug-in e viewer): es. Flash, PDF, RealVideo, QuickTime ecc.

Le tecnologie proprietarie
Una tecnologia proprietaria è una soluzione tecnica solitamente creata da
un’azienda per ottenere un vantaggio concorrenziale;
Può consistere in un’applicazione, in un linguaggio di programmazione, in
versioni di un linguaggio di programmazione, in formati di codifica dei dati…
Per definizione, sono in antitesi al concetto di standard:
Richiedono la presenza di un particolare software per la loro rappresentazione;
Per la creazione dei file è necessario usare specifici software;
La loro fruibilità e la loro producibilità dipendono dalle scelte di un singolo
soggetto (che potrebbe anche decidere di non sostenere più la tecnologia in
questione);
I formati di codifica dell’informazione non sono “aperti”;
I file prodotti non sono direttamente accessibili da altre tecnologie (es. screen
reader);

Gli standard web
L’unico modo per essere certi che una determinata informazione possa
essere veicolata all’utente finale è quello di codificarla in un formato
sicuramente interpretabile da parte del programma di navigazione;
Questi formati sono definiti web standard, perché assolutamente
compatibili e interoperabili fra i diversi browser e le diverse piattaforme;
Per esempio, XHTML è uno standard web (tutti i browser lo interpretano),
mentre PDF – anche se molto diffuso – richiede un programma aggiuntivo
che non necessariamente è installato sul computer dell’utente;
Un formato web standard è un formato che non richiede tecnologie
specifiche per essere consultato:
non richiede un browser particolare, non richiede un sistema operativo
particolare, non richiede un plug-in particolare…

Quali sono gli standard per il web?
Esistono standard per tutte le componenti di una pagina web:
Marcatura dell’informazione: XML e XHTML;
Presentazione stilistica: CSS;
Comportamento delle pagine (programmazione client-side):
ECMAScript;
Contenuti audio / video: formati MPEG (es. mp3);
Immagini: PNG e JPG (e non GIF);
Animazioni vettoriali: SVG;
…
Chi definisce gli standard?
W3C, ISO, ECMA, Unicode Consortium, IETF, OMA ecc.

W3C
Il World Wide Web Consortium (http://www.w3c.org) è un consorzio
internazionale che ha per obiettivo condurre il web alla sua piena maturazione
(“Leading the Web to its full potential”);
Il W3C è nato nel 1994 grazie al contributo di Tim Berners Lee, ideatore del
Web e attuale coordinatore del consorzio stesso; ha tre sedi principali: il MIT
negli Stati Uniti, l’INRIA in UE, l’Università di Keio in Giappone.
Il consorzio è formato da circa 500 soggetti: aziende di software, produttori di
hardware, fornitori di contenuti, istituzioni accademiche, compagnie di
telecomunicazione e pubbliche amministrazioni di tutto il mondo
(tecnologicamente avanzato);
Il W3C definisce specifiche aperte che possono essere adottato per
incrementare l’interoperabilità delle risorse e delle tecnologie web. Dopo un
elaborato processo di proposta, valutazione e revisione, il consorzio pubblica tali
specifiche nella forma di “Raccomandazioni”: non hanno un valore normativo o
legale (anche se spesso sono state recepite in toto da provvedimenti legislativi
di stati o da altri enti preposti alla definizione di standard, come l’ISO);

Standard e separazione
Realizzare siti secondo gli standard significa:
Adottare la corretta tecnologia per lo scopo che si desidera
perseguire;
Adottare tale tecnologia in modo conforme alle specifiche;
Adottare tale tecnologia per gli obiettivi per cui essa è stata
sviluppata;
Questi tre principi conducono ad una suddivisione
delle risorse web in tre dimensioni fondamentali:
XHTML e struttura dell’informazione;
CSS e presentazione dell’informazione;
ECMAScript e comportamento dell’informazione;

I vantaggi dei web standard
Sviluppo e manutenzione del sito web:
maggior controllo sulla presentazione e sul comportamento delle pagine:
usando linguaggi specializzati per intervenire su queste dimensioni avrò
maggiori e più accurate opportunità di intervento;
riduzione dei tempi/costi di design e sviluppo (e di riprogettazione): nel
momento in cui in un sito web struttura, presentazione e comportamento
sono stati separati a dovere, è possibile intervenire solo su uno dei tre livelli
senza dover necessariamente influenzare gli altri due; per esempio posso
variare il layout di una pagina controllando il foglio di stile CSS senza dover
per questo modificare l’XHTML del documento
(http://www.csszengarden.com); Inoltre le conseguenze di un intervento
cadranno “a cascata” su tutte le risorse che condividono lo stile o il
comportamento;
assicurare una maggiore longevità alle proprie pagine: non è necessario
aggiornare il codice delle proprie pagine per rispondere alle richieste di
programmi di navigazione futura, dal momento che essi continueranno a
interpretare correttamente – se non meglio – gli standard per il web
(forward compatibility);

I vantaggi dei web standard
Accessibilità:
maggior compatibilità con i programmi di navigazione tradizionali (browser
grafici) e non (device wireless, tv digitale, screen reader, barre Braille ecc…): gli
standard sono stati ideati e definiti per garantire la massima compatibilità sia
all’indietro che in avanti;
conformità alle norme in tema di accessibilità: tutti gli insiemi di linee guida
dettate dal W3C (dalle WCAG alle XAG) richiedono l’osservanza delle ultime
specificazioni tecniche in tema di linguaggi utilizzati per la costruzione delle
pagine;
assicurare una piena fruibilità dei contenuti anche nei browser meno performanti
(backward compatibility):
anche un browser obsoleto (come Netscape Navigator 4.x) oppure dalle potenzialità
ridotte (come i programmi di navigazione presenti su smartphone e palmari) sono in
grado di leggere e rappresentare XHTML e – in caso di mancato o parziale supporto del
linguaggio CSS – consentono una piena fruizione dei contenuti;

I vantaggi dei web standard
Semanticità ed efficienza:
utilizzare la tecnologie XML e avvantaggiarsene: anche se non si utilizza un
vocabolario XML ex-novo, l’uso di XHTML permette di adottare un linguaggio
di marcatura strutturato, robusto e portabile, nonché pronto ad essere
elaborato da altre tecnologie web pensate per il trattamento di XML (come le
trasformazioni XSLT, per esempio);
preparare le proprie pagine per lo scenario del Semantic Web: pagine ben
strutturate possono essere facilmente interpretate da strumenti automatici di
trattamento dell’informazione come i motori di ricerca e dunque migliorare il
reperimento dell’informazione su una base semantica e non più
esclusivamente formale;
riduzione drastica del peso delle pagine: i siti web realizzati con gli standard
occupano meno memoria e richiedono un consumo di banda di trasmissione
minore rispetto a soluzioni non conformi (“tag soup”):
<p align=“center”><b><i><font
= 93Byte
color=“#0000FF” face=“Verdana”
Ciao size=“4”>Ciao</font></i></b></p>
= 21Byte
<p class=“b”>Ciao</p>

I vantaggi dei web standard
Visibilità:
aumento della visibilità per i motori di ricerca: un codice conforme permette
ai motori di ricerca di assimilare meglio e senza ambiguità le informazioni
contenute nel proprio sito e quindi di migliorare il ranking delle pagine per le
parole chiave in esse contenute;
favorire un accesso multicanale alle informazioni: la stessa pagina può
essere fruita sia da browser grafici per i potenti personal computer desktop
sia da programmi meno performanti presenti su dispositivi di accesso
alternativo;
È possibile personalizzare e ottimizzare la presentazione in funzione del media
di accesso, per esempio impostando un’impaginazione diversa tra desktop e
dispositivi mobili;
aumento del numero dei potenziali visitatori: è una conseguenza dei punti
precedenti: se le mie pagine sono più accessibili e più compatibili il numero
dei visitatori che potranno fruire senza difficoltà non può che aumentare.

Standard e
Tecnologie proprietarie
Date simili premesse sembrerebbe ovvio che le tecnologie proprietarie
siano state evitate e abbiano avuto applicazioni limitate;
In realtà i primi dieci anni di web hanno visto realizzarsi lo scenario
opposto: i siti web realizzati con tecnologie standard sono una netta
minoranza;
Perché?
Per molto tempo i web standard non erano completi: non si potevano
ottenere tutti gli effetti richiesti dai web designer (es. interattività => Applet
Java);
Per molto tempo i browser non sono stati capaci di dare una
rappresentazione efficiente ed efficace dei linguaggi standard (es. impatto
grafico => Flash);
Uno standard è per sua natura rigoroso: è inizialmente più difficile imparare
ad utilizzarlo;

Un caso esemplare: la storia di HTML
HTML (HyperText Mark-up Language) nasce nel 1991, come applicazione del linguaggio
SGML (Standard Generalized Mark-up Language), per strutturare documenti di carattere
tecnico scientifico;
Nasce come linguaggio di strutturazione/presentazione dei contenuti da trasmettere
attraverso il protocollo HTTP (HyperText Transfer Protocol) in modo da garantire la
portabilità delle pagine web da un programma di navigazione all’altro;
I comandi (tag e attributi) erano un insieme fisso e limitato e non serviva una grande
rigidità di utilizzo dei comandi (è stato un fattore positivo!)
Non appena il web divenne un fenomeno non più ristretto al mondo accademico, emerse
l’esigenza di arricchire le pagine con elementi multimediali e interattivi
Negli anni il set di tag e attributi è stato ampliato in modo disordinato e incoerente: il
linguaggio è diventato una raccolta di comandi eterogenei che non erano più limitati
all’obiettivo primario di HTML, ossia la strutturazione dei documenti web;
Inoltre, per ottenere la ricchezza e la piacevolezza richiesta dal mercato, i browser
permisero la diffusione e il supporto di quelle tecnologie proprietarie che potevano
(teoricamente) migliorare l’esperienza d’uso;

XHTML
Nel 2000 è stata pubblicata dal W3C la specifica ufficiale
dell’erede di HTML;
La “X” significa che HTML è stato riformulato secondo i principi di
XML:
Conformità;
Validità rispetto alla grammatica;
Utilizzo semantico dei comandi;
Conseguenze positive:
Il codice è più sintetico e strutturato;
Le pagine sono più portabili su browser e piattaforme differenti;
Estensibilità: possibilità di includere comandi scritti in altri linguaggi
XML
Maggiore accessibilità;

Regole di XHTML
No:
Gli elementi devono
1.
<p><em>
essere correttamente <strong>Ciao</em>
<p></strong>
annidati;
OK:
<p><em><strong>Ciao</strong></em>
</p>
No:
I nomi di elementi e
2. <TABLE><TR><TD> …
attributi devono essere
in minuscolo; OK:
<table><tr><td> …

Regole di XHTML
No:
Gli elementi non vuoti
3.
<p>Nel mezzo del cammin di nostra vita
devono essere chiusi; <p>Mi ritrovai per una selva…
OK:
<p>Nel mezzo del cammin di nostra
vita</p>
<p>Mi ritrovai per una selva…</p>
No:
I valori degli attributi
4. <input type=text value=esempio />
devono essere posti
OK:
tra virgolette;
<input type=“text” value=“esempio” />

Regole di XHTML
No:
Ogni attributo deve avere un
5.
<option value=“TO”
valore; selected>Torino</option>
OK:
<option value=“TO”
selected=“selected”>Torino</option>
No:
Gli elementi vuoti devono
6.
<hr ><br><img src=“foto.jpg”>
terminare con />
OK:
<hr /><br /><img src=“foto.jpg” />
No:
Sostituzione dell’attributo
7. <img src=“paesaggio.jpg”
“name” con “id”; name=“immagine”>
OK:
<img src=“paesaggio.jpg” id=“immagine” />

La grammatica di XHTML
La forza di XML e dei vocabolari da essi derivati risiede nel rigore e nella
struttura fornita da una serie di regole definiti a livello grammaticale;
Queste regole sono contenute in una DTD (Document Type Definition);
Nella DTD si dichiara quali elementi, quali attributi e quali entità saranno
accettate nei documenti XML che si dichiareranno conformi ad essa; Tale
dichiarazione è il primo enunciato di un documento XHTML;
La DTD è essenziale per condividere dati tra applicazioni diverse, che devono
avere uno un comune riferimento circa struttura e composizione dei documenti
scambiati;
In XHTML 1.0 abbiamo tre possibili DTD:
Transitional
Strict
Frameset
In XHTML 1.1 si ha solo la versione strict

Caratteristiche
delle DTD XHTML
Rispetto ad HTML le grammatiche XHTML affermano con
maggior precisione la relazione reciproca tra i vari tag: si
specifica quali altri tag può contenere un tag (e viceversa), quali
sono gli attributi possibili e con quali valori;
Sono stati eliminati numerosi comandi (tag e attributi)
considerati non più coerenti con il ruolo di XHTML:
Gli elementi e gli attributi che definiscono l’aspetto dell’informazione:
<center>, <font>, <background>, align, bgcolor, width ecc.
Gli elementi e gli attributi che definiscono il comportamento
dell’informazione: target;
Nota bene: conformità e validità si possono verificare
tecnicamente grazie ad appositi strumenti chiamati “validatori”
http://validator.w3.org

Marcatura semantica
dell’informazione
I comandi dei linguaggi XML sono meta-informazioni: servono per assegnare un
significato all’informazione che sia comprensibile anche da parte del calcolatore;
XHTML è un linguaggio di strutturazione di documenti ipertestuali: i suoi
comandi devono servire a comunicare al programma di navigazione qual è la
struttura del documento da rappresentare; Software di indicizzazione e ricerca
possono offrire agli utenti risultati più pertinenti rispetto al contenuto della
pagina;
In XHTML si chiede che i comandi siano applicati secondo il loro significato:
<h1> serve per un titolo, non per ottenere un testo grassetto e di dimensioni
maggiori;
<p> serve per indicare un paragrafo, non per spaziare tra di loro i contenuti;
<table> serve per presentare tabelle di dati, non per gestire l’impaginazione;
<img> serve per fornire informazioni in modo grafico, non per decorare la pagina;
Viceversa, se esiste un comando per definire una particolare struttura
informativa… tale comando va usato:
Se ho un elenco di voci devo usare i tag delle liste (e non semplicemente andare a
capo);
Se ho una citazione devo usare <blockquote> o <q>;
Se ho una porzione di testo che funge da titolo di una sezione del documento, devo
usare un tag tra <h1>, <h2>, <h3> ecc secondo la loro relazione gerarchica.

Dal bozzetto alla struttura
XHTML
A partire dall’bozzetto della pagina è definire
comprendere quale debba essere la struttura
XHTML del documento;
Possiamo immediatamente capire che cosa
sia il titolo principale, che cosa sia un menu
di navigazione ecc.

Il titolo interno ha un livello Un altro elenco (<ul><li> <form><input>
È il titolo principale della
gerarchico inferiore: <h2>
pagina: <h1>
ENG | ESP | ITA
Titolo del sito
ricerca
Immagine
decorativa
Home page | Contatti | Mappa del sito
Eventi
Titolo pagina
• Il Progetto
• Il coordinatore Lorem ipsum dolor sit amet, • alfa (12.02.2006)
consectetuer adipiscing elit. bla bla bla bla…
• I Partners
È una lista di Pellentesque ornare augue
elementi: userò nec odio. Cum sociis • beta (13.03.2006)
• il Comitato di progetto
<ul> ed <li> natoque penatibus et bla bla bla bla..
• Il progetto in movimento magnis dis parturient
[archivio]
montes, nascetur ridiculus
• Newsletter
mus. Cras enim. Sed aliquet
• I documenti rhoncus urna. Nunc varius
Immagine a scopo lacinia odio. Pellentesque
• Links
informativo: <img> News
consequat luctus nisi.
• alfa (12.02.2006)
Lorem ipsum dolor sit amet, consectetuer bla bla bla bla…
adipiscing elit. Pellentesque ornare augue nec
odio. Cum sociis natoque penatibus et magnis dis • beta (13.03.2006)
Banner parturient montes, nascetur ridiculus mus. bla bla bla bla..
Immagine a scopo
Questionario
informativo: <img> (Link a contenuti correlati) [archivio]
Email – credits - copyright

“Flusso XHTML”
[…]
<body>
<h1>Titolo del sito</h1>
<hr />
<p>Scelta della lingua:</p>
<ul>
<li>Italiano</li>
<li>Inglese</li>
<li>Francese</li>
</ul>
<hr />
<p>Menu del sito:</p>
<ul>
<li>Il progetto</li>
<li>Il coordinatore</li>
<li>I Partners</li>
<li>Il comitato di progetto</li>
<li>Newsletter</li>
<li>I documenti</li>
<li>Links</li>
</ul>
<hr />
<h2>Titolo pagina</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque ornare augue nec odio. Cum sociis natoque penatibus et
magnis dis parturient</p>
[…]

“Flusso XHTML”
La pagina viene “linearizzata”
e spogliata da
ogni presentazione visuale:
sarà compito del
foglio di stile CSS
definire il look & feel

Cascading Style Sheets
CSS è un linguaggio di gestione della presentazione
per il web:
Attributi tipografici;
Dimensioni;
Disposizione spaziale;
Immagini e sfondi;
CSS nascono nel 1996, ma solo nel 2002 si
diffondono i browser in grado di interpretarli
pienamente e correttamente;

Regole CSS .titolo-box {
font-size: 13px;
color: #000;
selettore {
background-color: #fff;
proprietà: valore; }
}
[selettore = valore di attributo “class”]
#colonna-dx {
h1 {
width: 150px;
font-size: 16px; background-color: red;
color: blue;
}
border: 1px solid blue;
} [selettore = valore di attributo “id”]
[selettore = nome del tag]

CSS: opportunità e vantaggi
Un’ampia separazione tra struttura e presentazione consente di:
Ottenere un ampia compatibilità con tutti i browser disponibili (tutti in grado
di rappresentare l’XHTML anche se non capaci di utilizzare i CSS);
Realizzare pagine più leggere: il “vestito” della pagina viene scaricato solo al
primo accesso e memorizzato nella memoria cache del browser;
Le pagine si caricano più rapidamente: il browser impiega meno tempo a
elaborare il CSS e ad utilizzarlo per rappresentare l’informazione;
Semplificare le operazioni di manutenzione: la veste visuale può essere
aggiornata o modificata indipendentemente dai contenuti; inoltre con un CSS
esterno ogni modifica ha effetto su tutte le pagine che incorporano quel
foglio di stile (= non è necessario modificare tutte le pagine ad una ad una);
Migliorare la precisione con cui i motori di ricerca possono indicizzare le
pagine: il codice non standard “distrae” gli spider dei motori di ricerca;
Rendere il sito più accessibile (nota bene: non è però sufficiente);

Una struttura, tante presentazioni
Una delle caratteristiche più interessanti dei CSS è
l’opportunità di associare presentazioni diverse in
funzione del canale di distribuzione del contenuto;
L’attributo “media” consente di indicare al browser
quale foglio di stile adottare tra una serie di
alternative, in funzione del valore di tale attributo:
<link type=“text/css” rel=“stylesheet” href=“stile.css” media=“print” />

Valori di “media”
“all”: tutti i dispositivi;
“screen”: monitor di personal computer;
“print”: stampanti;
“handheld”: dispositivi portatili, come palmari e telefoni
cellulari;
“projection”: proiettori;
“aural”: dispositivi che utilizzano la sintesi vocale per la
rappresentazione dell’informazione (voice browsers, screen
readers);
“braille”: dispositivi braille;
“tv”: televisori e altri dispositivi a bassa risoluzione (es.
totem informativi);

PC
stampante
“screen”
“print”
XHTML
“handheld”
palmare
“tv”
Televisione

Esempi di applicazione:
CSS per la stampante:
Eliminazione delle immagini decorative: stamparle, per l’utente è
un costo inutile;
Eliminazione dei menu di navigazione: su carta non servono;
Impaginazione su tutta la larghezza di pagina (eliminazione di
colonne e di tutti gli elementi non necessari);
Cambiamento del tipo di font: da sans-serif a serif;
Cambiamento del colore del font: il colore di sfondo non viene
stampato dai browser (impostazione predefinita) e c’è il rischio
che il testo sia poco contrastato rispetto al foglio bianco;
Possibilità di impostare margini (ad esempio per permettere
l’annotazione di appunti del lettore);

Esempi di applicazione:
CSS per dispositivi mobili:
Spostamento della navigazione nella parte superiore della
pagina (per rendere le opzioni di navigazione
immediatamente visibili anche su schermi molto piccoli:
240x320 o meno)
Ingrandimento del carattere per facilitare la lettura;
Modifica dello schema cromatico per favorire la lettura
anche in condizioni di elevata illuminazione (fruizione
outdoor);
Eliminare le immagini di sfondo: il download di dati è un
costo per gli utenti;

Il flusso di lavoro e gli standard
Analisi: Personae
1.
User centered design
1. Content Plan
Analisi dei contenuti
2.
Progettazione: Information architecture
Architettura dell’informazione Bozzetti (infodesign)
Interface design
Layout grafico
Sviluppo: Struttura XHTML
Sviluppo grafico
1.
Template CSS
Sviluppo applicativo
2.
Funzionalità interattive
(Server e client)
Test
1.
Debug applicativo e
1.
funzionale Report
Test di usabilità e accessibilità
2.
Pubblicazione e manutenzione

Information Design
ENG | ESP | ITA
ricerca
Home page | Contatti | Mappa del sito
Normalmente
lo sviluppo
XHTML
di XHTML e CSS
parte da una
bozza grafica
costruita con un lavoro
di interface e
information design

Obiettivi di questa fase
La traduzione di un layout grafico comporta una
serie di passaggi:
Comprendere la struttura generale e particolare della
pagina;
Distinguere tra gli elementi di struttura dell’informazione e
la presentazione visuale;
Identificare in modo chiaro tutti gli elementi che
compongono la pagina;
Progettare una struttura XHTML che consenta di
identificare in modo univoco tutti i blocchi e sotto-blocchi di
informazione;
Allestire una struttura XHTML che consenta di ottenere gli
effetti visuali voluti dal designer della pagina:
Inserimento di “div”, “id” e “class”, se necessari

Header
content
Col-1 Col-2 Col-3
Footer

Header

<div id=“header”>
<a id="inici_pagina" name="inici_pagina" href="http://www.bcn.es/"><img src="logo0000.gif" alt="Barcelona City Council"></a>
<ul>
<li><a href="http://www.bcn.es/catala/chome.htm" hreflang="ca"><span xml:lang="ca"
lang="ca">Català</span></a></li>
<li class="separador"><a href="http://www.bcn.es/castella/ehome.htm" hreflang="es"><span
xml:lang="es" lang="es">Castellano</span></a></li>
</ul>
<h1 class="access">Barcelona City Council website</h1>
<img src="foto_hea.jpg" alt="BCN.es">
<hr>
<ul>
<li><a href="#menu">Skip to main menu</a></li>
<li><a href="#utilitats">Skip to web services menu</a></li>
<li><a href="#contingut">Skip to page contents</a></li>
</ul>
<hr class="access">
<h2 class="access">Website services</h2>
<ul>
<li class="agenda"><a href="http://www.bcn.es/english/bdades/agenda/iagenda.htm">Diary</a></li>
<li class="tramits"><a href="http://w10.bcn.es/APPS/STPSipacWeb/inici.do?i=e">Administrative
procedures</a></li>
<li class="planol"><a href="http://www.bcn.es/guia/welcomea.htm" accesskey="1">BCN map</a></li>
<li class="anarhi"><a href="http://www.bcn.es/cgi-
bin/pt.pl?url=http://w10.bcn.es/APPS/ComAnar/ComAnarIniciAc.do?idioma%21ENGLISH&amp;i=i">How to get there</a></li>
<li class="directoris"><a href="http://www.bcn.es/english/bdades/eq/eq.htm">Directories</a></li>
<li class="transit"><a href="http://www.bcn.es/cgi-bin/pt.pl?url=/transit/nv2/index_s.htm&amp;i=i"
accesskey="3" title="Road traffic">Traffic</a></li>
<li class="correu"><a href="http://www.ambtu.bcn.es/">Your e-mail</a></li>
</ul>
<form id="frmcerca" method="post" action="http://w10.bcn.es/ya2/fromCharmap/iso-8859-1/ya2/baSimpleSearchAc.do">
<p>
<input name="idioma" value="en" type="hidden">
<label for="cerca">Search </label><input id="cerca" name="queryText" value="&nbsp;" type="text">
<input src="bot_flet.gif" value="Envia" alt="Send" type="image">
</p>
</form>
</div>

#header {
width: 740px;
height: 90px;
background: url(“header.jpg”);
/* altre regole… */
Flusso }
XHTML
CSS

http://www.bcn.cat/
La procedura vista per l’header
si può applicare a tutti gli
elementi e ai sotto-elementi
della pagina.
Per approfondire il tema:
• Libro Zeldman;
• Tutorial online (www.html.it)
• Corso di Web Design II