Nessun titolo diapositiva

1
La costruzione di un sito web
Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN "http//www.w3.org/TR/ REC-htm
l40/loose.dtd"gt ltHTMLgtltHEADgtltTITLEgt Universitagr
ave di Firenze. Sistema bibliotecario d i
Ateneolt/TITLEgt .
Validazione e controllo
PROGEAS - Università di Firenze
2
La costruzione di un sito web
Il progetto
La struttura del sito

• Obiettivi

La struttura della pagina

• Utenza

• Contenuto informativo

Accessibilità
Validazione e controllo
3
La costruzione di un sito web

• La struttura dellinformazione
• Dividere linformazione 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 progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
4
La costruzione di un sito web

• La struttura del sito può essere

Il progetto
La struttura del sito

• sequenziale

La struttura della pagina

• a griglia

Accessibilità

• gerarchica

Validazione e controllo

• a ragnatela

5
La costruzione di un sito web
Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
6
La costruzione di un sito web

• Caratteristiche del sito
• Facilità di accesso
• Velocità di accesso
• Navigabilità
• Affidabilità
• Interattività
• Semplicità
• Coerenza

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
7
La costruzione di un sito web

• Caratteristiche del sito
• Facilità di accesso
• Lutente deve arrivare allinformazione 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 lesigenza
  di velocizzare il caricamento

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
8
La costruzione di un sito web

• Caratteristiche del sito
• Navigabilità
• Lutente deve potersi orientare allinterno 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 progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
9
La costruzione di un sito web

• Caratteristiche del sito
• Interattività
• Fornire sempre allutente la possibilità di
  interagire sia con critiche che con suggerimenti
• Usare il tag ltmailtogt o una form
• Semplicità
• Linterfaccia deve essere semplice, familiare
  allutente e logica
• Evitare complessità gratuite

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
10
La costruzione di un sito web

• Caratteristiche del sito
• Coerenza
• Costruire tutte le pagine sullo stesso modello
• Questo permette allutente di orientarsi più
  facilmente, prevedendo in quale parte della
  pagina può trovarsi linformazione che cerca

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
11
La costruzione di un sito web

• Struttura della pagina
• Identificare la tipologia della pagina
• Organizzare in unità logiche linformazione da
  inserire nella pagina
• Strutturare la pagina in modo da rispettare
  lorganizzazione logica dellinformazione

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
12
links di particolare rilievo
strumenti per orientarsi nel sito
link alla unità superiore
informazioni redazionali
logo
indice
indirizzo
13
logo
links di particolare rilievo
indice
links di particolare rilievo
strumenti per orientarsi nel sito
link alla unità superiore
informazioni redazionali
indirizzo
14
logo
link di navigazione
menu
informazioni redazionali
titolo
15
logo
titolo
menu
informazioni redazionali
link di navigazione
16
La costruzione di un sito web

• Il disegno della pagina
• Logo
• Uso dei colori e dei caratteri
• Uso delle immagini e degli effetti speciali

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
17
La costruzione di un sito web

• Il disegno della pagina
• Logo
• Studiare un logo che identifichi lorganizzazione
• Inserirlo in tutte le pagine
• Si può usare unimmagine più grande nella
  homepage e più piccola nelle altre pagine

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
18
La costruzione di un sito web

• Il disegno della pagina
• Uso dei colori e dei caratteri
• Coerenza nelluso dei colori e dei caratteri
• Usare colori che si armonizzino e rendano la
  lettura facile e scorrevole
• Per il background preferire un colore pastello
  unimmagine è più pesante, può disturbare la
  lettura e creare effetti spiacevoli su monitor
  con diversa risoluzione

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
19
La 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 dellutente luso
  di un font particolare può causare una
  visualizzazione diversa da quella pensata
  prevedere un font alternativo (Times o arial)

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
20
La 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 luso di linguaggi
  di scripting rischia di
• mettere in ombra il contenuto
• rendere difficoltoso il caricamento della pagina
• Non tutti i browser sono in grado di elaborare
  gli script

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
21
La costruzione di un sito web

• Nello sviluppare pagine web bisogna tener conto
  del fatto che molti utenti possono
• avere disabilità che rendano impossibile o
  difficoltoso laccesso 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 progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
22
La costruzione di un sito web

• 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/W
  AI-trad.htm)

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
23
La costruzione di un sito web

• Principi per una progettazione volta
  allaccessibilità
• Assicurare una trasformazione elegante
• Rendere il contenuto comprensibile e navigabile

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
24
La costruzione di un sito web

• Struttura vs presentazione
• Equivalenti testuali
• Pagine alternative
• Indipendenza da dispositivo di input
• Uso del colore
• Navigabilità
• Comprensibilità

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
25
La costruzione di un sito web

• 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

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
26
La costruzione di un sito web

• Struttura vs presentazione. HTML
• E un linguaggio a marcatori, in cui gli elementi
  del testo sono identificati e delimitati da
  unetichetta o lttaggt
• 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-199
  90505). Per una sintesi vedi http//ww.unifi.it/u
  niversita/biblioteche/af/web_area/accessibilita.ht
  m

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
27
La costruzione di un sito web

• 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 listruzione
• selettore proprietà valore proprietà valore
  
• p.es. H1 font-family comic sans ms color
  000080
• Lo stile può essere definito allinterno di un
  singolo documento o in un documento esterno che
  viene richiamato allinizio 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)

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
28
La costruzione di un sito web

• Struttura vs presentazione
• Avvertenze sulluso dei fogli di stile
• Benché luso 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 linformazione
• Accertarsi che il documento sia comunque
  leggibile anche se il browser non supporta i
  fogli di stile
• LHTML 4.0 supportato dai browers di ultima
  generazione raccomanda luso dei fogli di stile

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
29
La costruzione di un sito web

• 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 lattributo alt o
  longdesc in HTML)
• Lequivalente testuale deve essere esplicativo
  (si può immaginare di dover descrivere loggetto
  ad un interlocutore telefonico)

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
30
La costruzione di un sito web

• 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
  lelemento LINK in HTML

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
31
La costruzione di un sito web

• Indipendenza da dispositivo di input
• E necessario fare in modo che lutente 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 lattributo accesskey)
• Creare un ordine logico di tabulazione (p.es. con
  lattributo tabindex)

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
32
La costruzione di un sito web

• Uso del colore
• Non fare affidamento solo sul colore per
  veicolare informazione
• Assicurarsi che linformazione 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 leffetto stampare la pagina in
  scala di grigi

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
33
La costruzione di un sito web

• 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 lelemento LINK) e
  costituire archivi (p.es. in formato zip) delle
  diverse pagine

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
34
La costruzione di un sito web

• Comprensibilità
• Usare per i link frasi chiare ed esplicative
• Chiarire fin dallinizio 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 unidea principale

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
35
La costruzione di un sito web

• Validatori automatici
• Validazione HTML (http//validator.w3.org)
• Validazione dei fogli di stile (http//jigsaw.w3.o
  rg/css-validator)
• Validazione dellaccessibilità 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

Il progetto
La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo
36
La costruzione di un sito web
Il progetto

• Strumenti per la manutenzione del sito
• Link checker
• Site mapper
• Strumenti per misurazioni statistiche
• Contatori
• Log analyser

La struttura del sito
La struttura della pagina
Accessibilità
Validazione e controllo