La costruzione di un sito web Manola Tagliabue - Università di Firenze ...

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


Obiettivi

Utenza

Contenuto informativo







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







La struttura del sito può essere:

sequenzialea grigliagerarchicaa ragnatela







Caratteristiche del sito

Facilità di accesso Velocità di accesso Navigabilità Affidabilità Interattività Semplicità Coerenza








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








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








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








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







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






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


Il disegno della pagina

Logo Uso dei colori e dei

caratteri Uso delle immagini e degli

“effetti speciali”








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








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








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)








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






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







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)







Principi per una progettazione volta all’accessibilità

Assicurare una trasformazione elegante

Rendere il contenuto comprensibile e navigabile







Struttura vs presentazione Equivalenti testuali Pagine alternative Indipendenza da dispositivo

di input Uso del colore Navigabilità Comprensibilità







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







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







http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505

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)







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







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)







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







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







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







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







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







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







Strumenti per la manutenzione del sito Link checker Site mapper

Strumenti per misurazioni statistiche Contatori Log analyser







La costruzione di un sito web Manola Tagliabue - Università di Firenze ...

Documents

Transcript of La costruzione di un sito web Manola Tagliabue - Università di Firenze ...