La costruzione di un sito webLa costruzione di un sito web
Manola Tagliabue - Università di FirenzeManola Tagliabue - Università di Firenze
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN” "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML><HEAD><TITLE>Università di Firenze. Sistema bibliotecario di Ateneo</TITLE>…………………….
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Obiettivi
Utenza
Contenuto informativo
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
La struttura dell’informazione
Dividere l’informazione in unità logiche
Stabilire una gerarchia (dal generale al particolare o dal più importante al meno importante)
Organizzare le relazioni fra le unità informative sulla base della gerarchia individuata
Controllare la funzionalità della struttura creata
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
La struttura del sito può essere:
sequenzialea grigliagerarchicaa ragnatela
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Caratteristiche del sito
Facilità di accesso Velocità di accesso Navigabilità Affidabilità Interattività Semplicità Coerenza
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Caratteristiche del sito
Facilità di accesso L’utente deve arrivare
all’informazione col minor numero possibile di passaggi
Velocità di accesso Se un utente accede attraverso un
modem può avere difficoltà a caricare una pagina troppo pesante
Bilanciare le esigenze estetiche con l’esigenza di velocizzare il caricamento
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Caratteristiche del sito
Navigabilità L’utente deve potersi orientare
all’interno del sito Fornire strumenti per la
navigazione
Affidabilità Il sito deve essere
costantemente monitorato, in modo da evitare link persi o pagine che non funzionano correttamente
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Caratteristiche del sito
Interattività Fornire sempre all’utente la
possibilità di interagire sia con critiche che con suggerimenti
Usare il tag <mailto> o una form
Semplicità L’interfaccia deve essere
semplice, familiare all’utente e logica
Evitare complessità gratuite
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Caratteristiche del sito
Coerenza Costruire tutte le pagine sullo
stesso modello Questo permette all’utente di
orientarsi più facilmente, prevedendo in quale parte della pagina può trovarsi l’informazione che cerca
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Struttura della pagina
Identificare la tipologia della pagina
Organizzare in unità logiche l’informazione da inserire nella pagina
Strutturare la pagina in modo da rispettare l’organizzazione logica dell’informazione
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
logoindicelinks diparticolarerilievo
strumenti per orientarsinel sito
informazioniredazionaliindirizzolink allaunitàsuperiore
logo
indice
links diparticolarerilievo
strumenti per orientarsi nel sito
informazioniredazionali
indirizzolink allaunitàsuperiore
links diparticolarerilievo
logotitolomenuinformazioni
redazionalilink di
navigazione
logo
titolo
menu
informazioni
redazionali link di
navigazione
La costruzione di un sito webLa costruzione di un sito web
Il disegno della pagina
Logo Uso dei colori e dei
caratteri Uso delle immagini e degli
“effetti speciali”
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Il disegno della pagina
Logo Studiare un logo che
identifichi l’organizzazione Inserirlo in tutte le pagine Si può usare un’immagine
più grande nella homepage e più piccola nelle altre pagine
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Il disegno della pagina
Uso dei colori e dei caratteri Coerenza nell’uso dei colori e
dei caratteri Usare colori che si armonizzino
e rendano la lettura facile e scorrevole
Per il background preferire un colore pastello; un’immagine è più pesante, può disturbare la lettura e creare effetti spiacevoli su monitor con diversa risoluzione
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Il disegno della pagina
Uso dei colori e dei caratteri Non tutti i colori risultano
uguali con tutti browser Un font di caratteri, per essere
visualizzato, deve essere installato sul pc dell’utente; l’uso di un font particolare può causare una visualizzazione diversa da quella pensata; prevedere un font alternativo (Times o arial)
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
La costruzione di un sito webLa costruzione di un sito web
Il disegno della pagina
Uso delle immagini e degli “effetti speciali” Un uso eccessivo di immagini,
statiche o animate, e di effetti creati attraverso l’uso di linguaggi di scripting rischia di:
mettere in ombra il contenutorendere difficoltoso il
caricamento della pagina Non tutti i browser sono in
grado di elaborare gli script
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Nello sviluppare pagine web bisogna tener conto del fatto che molti utenti possono:
avere disabilità che rendano impossibile o difficoltoso l’accesso ad alcuni tipi di informazione
non avere o non poter usare determinati dispositivi di input (mouse, tastiera)
avere monitor testuali o connessioni di rete molto lente
essere in una situazione per cui non possono usare occhi, orecchie o mani (p.es. in ambienti rumorosi)
avere versioni precedenti o diverse di browser
non capire perfettamente la lingua in cui il documento è scritto
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Il W3C, nell'ambito della Web Accessibility Initiative, ha sviluppato le Linee guida per l'accessibilità ai contenuti del Web, reperibili all'URL: http://www.w3.org/TR/1999/WAI-WEBCONTENT (traduzione italiana http://www.aib.it/aib/cwai/WAI-trad.htm)
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Principi per una progettazione volta all’accessibilità
Assicurare una trasformazione elegante
Rendere il contenuto comprensibile e navigabile
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Struttura vs presentazione Equivalenti testuali Pagine alternative Indipendenza da dispositivo
di input Uso del colore Navigabilità Comprensibilità
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Struttura vs presentazione
Distinguere la struttura del documento da come il documento viene presentato
Definire le varie sezioni del documento e utilizzare gli elementi strutturali (es. intestazioni H1-H6 in HTML) per identificarle
Non usare elementi strutturali per creare effetti di presentazione
Usare elementi strutturali (TITLE, META, LINK) che forniscono informazioni sul documento (metadati)
Usare i fogli di stile per gestire la presentazione del documento
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Struttura vs presentazione. HTML E’ un linguaggio a marcatori, in cui gli elementi
del testo sono identificati e delimitati da un’etichetta o <tag>
Dovrebbero essere usati solo i marcatori strutturali, e nel modo corretto, cioè al fine per cui sono stati creati e non per produrre effetti di formattazione
Le linee guida per un uso corretto del linguaggio HTML allo scopo di garantire la massima accessibilità si trovano in: Techniques for web Content Accessibility Guidelines 1.0 ( http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505). Per una sintesi vedi: http://ww.unifi.it/universita/biblioteche/af/web_area/accessibilita.htm
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Struttura vs presentazione. Fogli di stile I fogli di stile permettono di controllare la
presentazione di una pagina web Le caratteristiche di ogni elemento del
documento vengono definite con l‘istruzione:
selettore { proprietà: valore; proprietà: valore }
p.es.: H1 { font-family: “comic sans ms”; color: #000080 }
Lo stile può essere definito all’interno di un singolo documento o in un documento esterno che viene richiamato all’inizio di ogni pagina (molto utile se si vuol definire uno stile uniforme per tutto il sito; ogni variazione viene effettuata una sola volta ed ha effetto su tutto il sito)
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Struttura vs presentazione
Avvertenze sull’uso dei fogli di stile
Benché l’uso dei fogli di stile offra grandi potenzialità per la presentazione delle pagine, bisogna ricordare che essi non sono ancora totalmente supportati e quindi non è possibile affidare a questi effetti di formattazione il compito di veicolare l’informazione
Accertarsi che il documento sia comunque leggibile anche se il browser non supporta i fogli di stile
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Equivalenti testuali
Il testo è accessibile per quasi tutte le tipologie di utenti e può essere gestito da ogni tipo di interprete
Fornire un equivalente testuale per ogni oggetto non testuale (p.es. con l’attributo “alt” o “longdesc” in HTML)
L’equivalente testuale deve essere esplicativo (si può immaginare di dover descrivere l’oggetto ad un interlocutore telefonico)
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Pagine alternative
Se si ritiene che la pagina sia comunque inaccessibile si possono fornire pagine alternative, per es. in versione esclusivamente testuale
Si può inserire il link alla pagina alternativa in testa ad ogni pagina oppure utilizzare l’elemento LINK in HTML
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Indipendenza da dispositivo di input
E’ necessario fare in modo che l’utente possa interagire con la pagine anche senza mouse
Fornire equivalenti testuali per le aree delle mappe sensibili
Fornire scorciatoie da tastiera per i link (p.es. con l’attributo “accesskey”)
Creare un ordine logico di tabulazione (p.es. con l’attributo “tabindex”)
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Uso del colore
Non fare affidamento solo sul colore per veicolare informazione
Assicurarsi che l’informazione sia fornita anche attraverso altri effetti stilistici (p.es. tipi di carattere) e attraverso il contesto (p.es. testi dei links esplicativi)
Assicurarsi che le combinazioni di colori fra sfondo e testo forniscano un contrasto sufficiente
Per verificare l’effetto stampare la pagina in scala di grigi
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Navigabilità
Rispettare uno stile coerente di presentazione (la struttura delle pagine di un sito deve essere uniforme)
Provvedere barre di navigazione, mappa del sito, strumenti di ricerca
Fornire adeguata informazione sulle raccolte di documenti (p.es. con l’elemento LINK) e costituire archivi (p.es. in formato zip) delle diverse pagine
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Comprensibilità
Usare per i link frasi chiare ed esplicative
Chiarire fin dall’inizio della frase o del paragrafo quale sia il suo contenuto
Usare un linguaggio semplice e usare parole di uso comune
Non usare costrutti troppo complessi Limitare ogni paragrafo ad un’idea
principale
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Validatori automatici Validazione HTML (http://validator.w3.org) Validazione dei fogli di stile
(http://jigsaw.w3.org/css-validator) Validazione dell’accessibilità: BOBBY
(http://www.cast.org/bobby/)
Scenari utente Testare la pagina con un emulatore di un
browser testuale, p. es. Lynxview (http://www.delorie.com/web/lynxview.html)
Provare diverse impostazioni del browser (con o senza immagini etc.)
Usare diversi browser, anche in versioni precedenti
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo
Strumenti per la manutenzione del sito Link checker Site mapper
Strumenti per misurazioni statistiche Contatori Log analyser
La costruzione di un sito webLa costruzione di un sito web
Il progettoIl progetto
La struttura del sitoLa struttura del sito
La struttura della paginaLa struttura della pagina
AccessibilitàAccessibilità
Validazione econtrolloValidazione econtrollo