Corso HTML •Qualità di un sito web: comunicazione, usabilità e
Transcript
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