Corso HTML •Qualità di un sito web: comunicazione, usabilità e

Corso HTML
LEZIONE n. 4
• Qualità di un sito web: comunicazione,
usabilità e accessibilità
• Validazione di un sito
• Strumenti di ausilio alla stesura del
codice: Dreamweaver
• Il linguaggio HTML (XHTML 1.0 Strict)
• Inserimento di testo, immagini,
collegamenti ipertestuali, liste e tabelle in
una pagina web
• Uso di Dreamweaver per la stesura del
codice HTML
• Validazione del codice utilizzando
Dreamweaver
Sandra Farnedi
pag. 1/10
Qualità di un sito web
comunicazione, usabilità e accessibilità
La qualità di un sito è determinata da:
1. efficacia della comunicazione con cui vengono
divulgati i contenuti (comunicazione)
2. facilità di reperimento delle informazioni in esso
contenute (usabilità)
3. possibilità per chiunque di visitarlo
indipendentemente dalla tecnologia di cui dispone e
dalle eventuali disabilità personali (accessibilità)
Sandra Farnedi
pag. 2/10
Qualità di un sito web (1)
comunicazione
• individuare lo scopo del sito e il tipo di pubblico a
cui è rivolto
• utilizzare un linguaggio semplice e chiaro che sia
facilmente comprensibile agli utenti
• non appesantire le pagine con inutili effetti speciali
che ne rallentano il caricamento e annoiano il
visitatore
• utilizzare la grafica con moderazione e mai in
maniera ridondante o prevalente rispetto ai
contenuti
• organizzare le informazioni e non proporre pagine
zeppe di contenuti; ricordare che “troppa informazione
equivale a nessuna informazione”
• controllare sempre l’attendibilità dei contenuti
pubblicati e mantenerli costantemente aggiornati
Sandra Farnedi
pag. 3/10
Qualità di un sito web (2)
usabilità
• progettare il sito pensando agli utenti che lo
visiteranno
• non discostarsi dai modelli concettuali che l’utente
ha ormai acquisito, es. le parole sottolineate sono
collegamenti ipertestuali
• utilizzare URL facili da ricordare
• realizzare pagine veloci da caricare
• tenere informato l’utente sullo stato delle attività
che sta svolgendo es. indicare sempre le dimensioni
dei file da scaricare, confermare sempre l’avvenuta
ricezione di un modulo inviato
• organizzare le informazioni in aree logiche
strutturate gerarchicamente
• fornire più modi per raggiungere un’informazione o
per svolgere un’operazione
• inserire un motore di ricerca interno
• inserire i menù “a briciole di pane”
Sandra Farnedi
pag. 4/10
Qualità di un sito web (3)
accessibilità
• il web deve essere uno strumento universale quindi
•
•
•
•
•
•
bisogna eliminare le barriere architettoniche in esso
presenti
presupposto dell’accessibilità di un sito è la sua usabilità
condizione indispensabile per ottenere un sito accessibile
è l’uso almeno del linguaggio XHTML 1.0 Strict e dei
CSS
obiettivo da raggiungere: la fruibilità del sito deve essere
indipendente dalle eventuali disabilità del visitatore e dalla
tecnologia utilizzata durante la navigazione
W3C, WAI si occupano di regolamentare e punti di
controllo di priorità 1, 2 e 3
la legge Stanca n. 4/2004 si applica ai siti di tutte le
pubbliche amministrazioni e dichiara nulli i contratti
relativi alle realizzazioni di siti web che non risultino
accessibili
il livello di accessibilità di un sito viene valutato tramite
un’apposita verifica tecnica superata la quale, il sito può
esporre il “bollino” che ne certifica la conformità ai 22
requisiti della legge Stanca
Sandra Farnedi
pag. 5/10
Usabilità e Accessibilità a confronto
tratto dalla lezione tenuta al Cefriel del Politecnico di Milano il 29 ottobre 2003 da Paolo Castagna ai corsisti ForTIC tutor C
Sandra Farnedi
pag. 6/10
Validazione di un sito
•
•
•
•
controllo del codice:
(http://validator.w3.org/)
controllo dei CSS:
(http://jigsaw.w3.org/css-validator/)
controllo dell’accessibilità:
(http://www.webxact.com)
le barre dell’accessibilità:
- per FireFox:
http://chrispederick.com/work/web-developer/
- per InternetExplorer:
http://www.webaccessibile.org/argomenti/argome
nto.asp?cat=671
- per Opera:
http://www.paciellogroup.com/resources/watabout.html
Sandra Farnedi
pag. 7/10
Strumenti di ausilio alla stesura del
codice HTML
•
Dreamweawer (a pagamento)
http://www.adobe.com/it/products/dreamweaver/
•
NVU (gratis)
http://www.sanavia.it/nvuitalia/
•
HTML-kit (gratis)
http://www.htmlkit.com/
Tutorial disponibili su
http://www.porteapertesulweb.it
●
FCKeditor (gratis) http://www.fckeditor.net/ il
cui tutorial, per chi aderisce al progetto
Scuola&Servizi, è disponibile nell'area
riservata all'indirizzo
http://wiki.scuolaeservizi.it:8081/space/Servizi/FCKeditor/Uso+di+FCK+Editor
Sandra Farnedi
pag. 8/10
Il linguaggio HTML
XHTML 1.0 Strict
•
•
•
•
•
Consente, insieme all’uso dei CSS, la
realizzazione di pagine web accessibili in
quanto “pretende” la totale separazione
del codice dalla presentazione
I browser spesso non fanno controlli sul
codice e visualizzano comunque una
pagina web anche se non è formalmente
corretta
Elementi sconsigliati: aperture di nuove
pagine e uso di frame
L’importanza della DTD
Prendere l’abitudine di validare ogni
pagina
Sandra Farnedi
pag. 9/10
Altri Riferimenti
Uso del linguaggio HTML:
•
•
il sito web
http://xhtml.html.it/guide/leggi/51/guida-html/
il manuale prodotto da “Porte Aperte sul Web” che si
trova all’indirizzo:
http://www.porteapertesulweb.it/tutorial/tut_strict/sommstrict.htm
Uso di DreamWeaver:
•
la guida di “Porte Aperte sul Web” che si trova
all’indirizzo
http://www.porteapertesulweb.it/tutorial/materiali/guida_a.pdf
Validazione del codice:
•
la barra dell’accessibilità per IE, Opera e FireFox (vedi
pag. 7)
Sandra Farnedi
pag. 10/10