tecnologie di sviluppo per il web n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tecnologie di Sviluppo per il Web PowerPoint Presentation
Download Presentation
Tecnologie di Sviluppo per il Web

Loading in 2 Seconds...

play fullscreen
1 / 33

Tecnologie di Sviluppo per il Web - PowerPoint PPT Presentation


  • 158 Views
  • Uploaded on

Tecnologie di Sviluppo per il Web. Valutazione della Qualità del Codice HTML. versione 2.0. Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina). Qualità del Codice HTML >> Sommario. Sommario. Introduzione Caratteristiche di un sito Web

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Tecnologie di Sviluppo per il Web' - brice


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
tecnologie di sviluppo per il web

Tecnologie di Sviluppo per il Web

Valutazione della Qualità

del Codice HTML

versione 2.0

Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons

(vedi ultima pagina)

G. Mecca – mecca@unibas.it – Università della Basilicata

sommario

Qualità del Codice HTML >> Sommario

Sommario
  • Introduzione
    • Caratteristiche di un sito Web
    • Valutazione della qualità
  • Accessibilità
  • Usabilità
  • Caratterizzazione grafica

G. Mecca - Tecnologie di Sviluppo per il Web

introduzione

Qualità del Codice HTML >> Introduzione

Introduzione
  • Sito Web
    • utente: collezione di contenuti e servizi
    • sviluppatore: pagine e applicazioni
  • Pagine
    • documenti HTML/XHTML
    • fogli di stile CSS
    • script JavaScript
    • altre tecnologie (es: Macromedia Flash)

G. Mecca - Tecnologie di Sviluppo per il Web

introduzione1

Qualità del Codice HTML >> Introduzione

Introduzione
  • I due approcci allo sviluppo di pagine
    • approccio “disinvolto”
    • approccio “disciplinato”
  • Approccio “disinvolto”
    • tutte le tecnologie disponibili, scarsa attenzione alla correttezza sintattica, enfasi sugli effetti grafici
  • Approccio “disciplinato”
    • conformità agli standard del Consorzio, enfasi sull’accessibilità
  • Perchè preferire il secondo ?

G. Mecca - Tecnologie di Sviluppo per il Web

introduzione2

Qualità del Codice HTML >> Introduzione

Introduzione
  • Valutazioni della qualità dei siti Web
    • attività recente
  • Iniziative sui siti della P.A.
    • Roma Tre-AIPA, ottobre 2000
    • Censis, aprile 2001
    • Roma Tre-AIPA, aprile 2002 (accessibilità)
    • altre attività di valutazione
  • Che cosa vuol dire accessibile ?

G. Mecca - Tecnologie di Sviluppo per il Web

introduzione3

Qualità del Codice HTML >> Introduzione

Introduzione
  • L’accessibilità in concreto: 4 siti
    • il sito del corso di Sviluppo Web: grafica leggera, struttura snella
    • il sito del governo (governo.it): grafica sofisticata, struttura complessa
    • il sito di trenitalia (trenitalia.com): estensioni non standard ed elementi grafici
    • il sito della rai (rai.it): scorretto uso del codice HTML

G. Mecca - Tecnologie di Sviluppo per il Web

introduzione4

Qualità del Codice HTML >> Introduzione

Introduzione
  • Qualità di un sito Web
    • qualità dell’interfaccia
    • qualità dei contenuti e dei servizi
  • In questa lezione
    • ci concentriamo sull’interfaccia
  • Ma
    • la qualità dei contenuti e dei servizi è addirittura più importante

G. Mecca - Tecnologie di Sviluppo per il Web

introduzione5

Qualità del Codice HTML >> Introduzione

Introduzione
  • Principali qualità dell’interfaccia HTML
    • accessibilità
    • usabilità
    • caratterizzazione grafica
  • Rappresentano l’oggetto delle valutazioni
  • In ordine di priorità

G. Mecca - Tecnologie di Sviluppo per il Web

accessibilit

Qualità del Codice HTML >> Accessibilità

Accessibilità
  • Web: piattaforma mondiale
    • utenti diversi con abilità diverse
    • tecnologie diverse
  • Esempio
    • browser per dispositivi mobili
    • browser per disabili
    • Home Page Reader, un browser per non vedenti

G. Mecca - Tecnologie di Sviluppo per il Web

accessibilit1

Qualità del Codice HTML >> Accessibilità

Accessibilità
  • Accessibilità
    • possibilità di fruire del contenuto del sito indipendentemente dalle capacità dell’utente e della tecnologia che utilizza
  • Attività rilevante del Consorzio
    • Web Content Accessibility Guidelines 1.0maggio 1999
    • Techniques for WCAG 1.0novembre 2000

G. Mecca - Tecnologie di Sviluppo per il Web

accessibilit2

Qualità del Codice HTML >> Accessibilità

Accessibilità
  • Principi fondamentali (WCAG 1.0)
    • garantire la trasformazione indolore (“ensuring graceful transformation”)
    • rendere il contenuto comprensibile e navigabile (“making content understandable and navigatable”) >> usabilità
  • 14 linee guida
  • 3 livelli di priorità, 3 livelli di conformità
    • priority 1 - A, priority 2 - AA, priority 3 - AAA

G. Mecca - Tecnologie di Sviluppo per il Web

trasformazione indolore

Qualità del Codice HTML >> Accessibilità

Trasformazione Indolore
  • Opposto della filosofia “tipografica”
  • Separare struttura e presentazione
    • utilizzo dei fogli di stile CSS
  • Fornire descrizioni testuali equivalenti
    • per tutti gli altri “media”
    • il testo può essere reso da tutti i dispositivi

G. Mecca - Tecnologie di Sviluppo per il Web

trasformazione indolore1

Qualità del Codice HTML >> Accessibilità

Trasformazione Indolore
  • Pensare a non vedenti e non udenti
    • evitare affidamento eccessivo su immagini
    • “leggibilità” del contenuto
  • Indipendenza dall’hardware
    • schermo
    • browser
    • dispositivo di puntamento

G. Mecca - Tecnologie di Sviluppo per il Web

principali linee guida

Qualità del Codice HTML >> Accessibilità

Principali Linee Guida
  • LG 1 – Fornire descrizioni equivalenti per contenuti visuali e audio
    • attributo “alt”, attributo “summary”…
  • LG 2 – Non basarsi sul colore
    • informazioni leggibili in assenza di colore
    • contrasto
  • LG 3 – Correttezza sintattica del codice
    • HTML o XHTML corretto, CSS corretto

G. Mecca - Tecnologie di Sviluppo per il Web

principali linee guida1

Qualità del Codice HTML >> Accessibilità

Principali Linee Guida
  • LG 5 – Creare tabelle che si trasformano
    • non usare dimensioni assolute
    • accertarsi che le tabelle si ridimensionino (es: stampa)
    • informazione “linearizzata” leggibile
    • non utilizzarle a scopo di presentazione
    • aiutare gli utenti ad orientarsi nella tabella (intestazioni “th”; evitare posizionamenti complessi tra intestazioni e celle)

G. Mecca - Tecnologie di Sviluppo per il Web

principali linee guida2

Qualità del Codice HTML >> Accessibilità

Principali Linee Guida
  • LG 6 – Limitare tecnologie non standard
    • script (JavaScript), applet, plug-in
  • LG 7 – Ridurre al minimo il movimento
    • utenti ipovedenti
  • LG 8-9 – Indipendenza dal dispositivo
    • schermo, browser, dispositivi di input
  • LG 11 – Basarsi sugli standard del W3C

G. Mecca - Tecnologie di Sviluppo per il Web

valutazioni di accessibilit

Qualità del Codice HTML >> Accessibilità

Valutazioni di Accessibilità
  • Strumenti in linea
    • es: www.cast.org/bobby
  • Un caso pratico: Il sito del corso
    • non ci sono tabelle
    • struttura relativamente semplice
    • grafica leggera
  • Valutazione di accessibilità
    • utenti non vedenti e utenti ipovedenti

>> la valutazione di Bobby

G. Mecca - Tecnologie di Sviluppo per il Web

un caso pratico

Qualità del Codice HTML >> Accessibilità

Un Caso Pratico
  • Commento n. 1

“Non usando script e tabelle, con tutti i grafici commentati, informazioni molto chiare, la struttura semplice, il sito va bene. Se si volesse essere pignoli, manca l'attributo lang=it per indicare che e‘ una pagina italiana e, a qualche link, andrebbe messa una etichetta più esplicativa.”

G. Mecca - Tecnologie di Sviluppo per il Web

un caso pratico1

Qualità del Codice HTML >> Accessibilità

Un Caso Pratico
  • Commento n. 2

“La pagina è abbastanza chiara, ci sono però dei problemi insormontabili, (con certi tipi di ipovisione): 1) lo sfondo tipo quaderno a quadretti potrebbe confondere la lettura, 2) Un font meno pieno potrebbe migliorare la situazione. 3) La dimensione del caratteri di certe voci (come ad esempio data di inizio corso o link al sito) possono dare seri problemi. Questo tipo di utilizzo è stato riscontrato spesso anche in altri siti.”

G. Mecca - Tecnologie di Sviluppo per il Web

un caso pratico2

Qualità del Codice HTML >> Accessibilità

Un Caso Pratico
  • Commento n. 3

“Il sito è accessibile. Però il menu in testa produce uno sfarfallio quando ci passi sopra (credo sia dovuto alla differenza di dimensioni tra il testo normale e quello prodotto al passaggio del link), che potrebbe essere fastidioso per un ipovedente”

G. Mecca - Tecnologie di Sviluppo per il Web

un caso pratico3

Qualità del Codice HTML >> Accessibilità

Un Caso Pratico
  • Commento n. 4

“Le pagine sono molto accessibili! I link sono ben etichettati, cosi' come le immagini ben commentate. Solo che se la pagina che ci hai indicato e' la home page e' troppo lunga anche se le varie sezioni vengono raggiunte dai link della home. Sarebbe preferibile dividere le informazioni in piu' pagine.”

G. Mecca - Tecnologie di Sviluppo per il Web

soluzioni per l accessibilit

Qualità del Codice HTML >> Accessibilità

Soluzioni per L’accessibilità
  • Tre possibili soluzioni
  • Soluzione 1
    • un unico sito con grafica semplice e accessibile; es: w3.org
  • Soluzione 2 (costosa)
    • due siti distinti; es: tesoro.it, camera.it
  • Soluzione 3 (tecnologicamente compl.)
    • un unico sito con grafica sofisticata ma accessibile; es: governo.it

G. Mecca - Tecnologie di Sviluppo per il Web

usabilit

Qualità del Codice HTML >> Usabilità

Usabilità
  • Usabilità
    • efficacia, efficienza e soddisfazione dell’utente nell’interazione con il sito (semplicità di utilizzo)
  • Principali componenti
    • “correttezza” del sito
    • organizzazione
    • connettività

G. Mecca - Tecnologie di Sviluppo per il Web

usabilit1

Qualità del Codice HTML >> Usabilità

Usabilità
  • Correttezza
    • correttezza del codice (vedi accessibilità)
    • link “appesi” – errore 404 “Not Found”
    • correttezza e qualità della lingua
    • utilizzo corretto dei titoli di pagina (<title>) – preferiti, cronologia ecc.
  • Organizzazione
    • importante per consentire agli utenti di “orientarsi” nel sito

G. Mecca - Tecnologie di Sviluppo per il Web

usabilit2

Qualità del Codice HTML >> Usabilità

Usabilità
  • Organizzazione in sezioni
    • divisione naturale dei contenuti del sito
    • coerenza dei contenuti
  • Struttura di navigazione
    • “link di servizio” basati sull’organizzazione delle sezioni principali del sito
  • Strumenti di ausilio
    • orientamento nelle strutture complesse (ricerca, indici, “mappa del sito”)
  • Regola dei “3 click”

G. Mecca - Tecnologie di Sviluppo per il Web

usabilit3

Qualità del Codice HTML >> Usabilità

Usabilità
  • Esempio: Sito del corso
    • home, avvisi, programma, materiale, laboratorio
    • struttura di navigazione semplice (un link per ogni sezione) ripetuta in tutte le pagine
  • Esempio: governo.it
    • struttura di navigazione articolata
    • cerca nel sito, mappa del sito

G. Mecca - Tecnologie di Sviluppo per il Web

usabilit4

Qualità del Codice HTML >> Usabilità

Usabilità
  • Connettività
    • dimensione media delle pagine
    • dimensione della pagina principale (home)
    • livello di compressione delle immagini
  • Servizi di valutazione dell’usabilità
    • netmechanic.com

G. Mecca - Tecnologie di Sviluppo per il Web

caratterizzazione grafica

Qualità del Codice HTML >> Caratterizzazione Grafica

Caratterizzazione Grafica
  • La grafica è importante
    • importante per attrarre visitatori
    • ma non deve andare a scapito di usabilità e accessibilità
  • Caratterizzazione
    • tema che rende il sito identificabile
    • “taglio” grafico originale
    • coerenza della grafica (pochi fogli di stile)
    • gradevolezza

G. Mecca - Tecnologie di Sviluppo per il Web

caratterizzazione grafica1

testata

titolo e logo

corpo centrale

contenuto

barra di

navigazione

eventuale

piè di pagina

eventuale

barra laterale

ulteriori motivi

Qualità del Codice HTML >> Caratterizzazione Grafica

Esempi:

tiscali.it

governo.it

Caratterizzazione Grafica
  • Impostazione grafica standard

G. Mecca - Tecnologie di Sviluppo per il Web

caratterizzazione grafica2

Qualità del Codice HTML >> Caratterizzazione Grafica

Caratterizzazione Grafica
  • Realizzabile con una tabella

<table summary=“Tabella per la presentazione”>

<tr> <td colspan=“3”>Testata</td> </tr>

<tr>

<td>Barra di navigazione</td>

<td>Corpo Centrale</td>

<td>Barra destra</td>

</tr>

<tr> <td colspan=“3”>Piè di pagina </td> </tr>

</table>

G. Mecca - Tecnologie di Sviluppo per il Web

caratterizzazione grafica3

Qualità del Codice HTML >> Caratterizzazione Grafica

Caratterizzazione Grafica
  • In alternativa
    • realizzabile con CSS – float e clear
    • esistono vari modelli pronti, compatibili anche con Netscape 4
  • Vantaggi e svantaggi della tabella
    • tutti i browser da tavolo la supportanto
    • lega struttura e presentazione

G. Mecca - Tecnologie di Sviluppo per il Web

riassumendo

Qualità del Codice HTML >> Sommario

Riassumendo
  • Introduzione
    • Caratteristiche di un sito Web
    • Valutazione della qualità
  • Accessibilità
  • Usabilità
  • Caratterizzazione grafica

G. Mecca - Tecnologie di Sviluppo per il Web

termini della licenza

Termini della Licenza

Termini della Licenza
  • This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
  • Questo lavoro viene concesso in uso secondo i termini della licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.

G. Mecca - Tecnologie di Sviluppo per il Web