Web Design1 Usabilità e Accessibilità ISO 9241-11:1998: l’usabilità è “l’efficacia,...

Click here to load reader

  • date post

    02-May-2015
  • Category

    Documents

  • view

    217
  • download

    1

Embed Size (px)

Transcript of Web Design1 Usabilità e Accessibilità ISO 9241-11:1998: l’usabilità è “l’efficacia,...

  • Slide 1
  • Web Design1 Usabilit e Accessibilit ISO 9241-11:1998: lusabilit lefficacia, lefficienza e la soddisfazione con cui specifici utenti raggiungono specifici obiettivi in particolari ambienti. ISO TS 16071: Laccessibilit lusabilit di un prodotto, servizio, ambiente o strumento, per persone col pi ampio raggio di capacit. Fruibile da chiunque
  • Slide 2
  • Web Design2 Usabilit e Accessibilit Un sito web usabile quando soddisfa i bisogni informativi dell'utente che lo sta visitando, fornendogli facilit di accesso e navigabilit e consentendo un adeguato livello di comprensione dei contenuti
  • Slide 3
  • Web Design3 Accessibilit: una definizione Un sito web accessibile quando la sua interfaccia fruibile indipendentemente da: Browser (browser grafici, testuali, vocali); Periferiche di input / output (tastiera, schermo, mouse, barre braille ecc. Canale sensoriale utilizzato per linterazione (vista, udito, tatto); Abilit psico-motorie dellutente; Abilit percettive dellutente; Connettivit (LAN, Modem, GPRS ecc.); Hardware e software (Palmari, Desktop, WebTV ecc.);
  • Slide 4
  • Web Design4 Usabilit e Accessibilit Lusabilit non pu essere progettata a prescindere dagli utenti che utilizzano effettivamente il sito, dagli obiettivi che questi cercano di raggiungere, dallambiente in cui ci avviene. Laccessibilit deve essere progettata tenendo bene in mente le esigenze dellampio numero di persone disabili, o che hanno tecnologie obsolete, o che si collegano al web con dispositivi diversi dal computer.
  • Slide 5
  • Web Design5 Cosa hanno in comune lusabilit e laccessibilit? Lutente Un progetto di usabilit pone gli utenti al centro. Un progetto di accessibilit pone al centro gli utenti disabili o con problemi di accesso alla rete. Progettare un sito usabile e accessibile un processo user-centered.
  • Slide 6
  • Web Design6 Principi di design universale Laccessibilit web ha come suo antecedente culturale il concetto di design universale: Principi di design volti a progettare e realizzare oggetti utilizzabili da chiunque e che non precludano linterazione alle categorie di utenti pi marginali (disabili permanenti e temporanei, anziani ecc.) Dal design delloggetto non traggono vantaggio solo le categorie marginali ma tutti ricevono un beneficio (es. rampe daccesso) Esistono 7 linee guida che dovrebbero ispirare il lavoro di tutti coloro che realizzano artefatti utilizzati da altre persone (architetti, designer, grafici, programmatori ecc.);
  • Slide 7
  • Web Design7 Principi di design universale (2) 1.Equit duso; 2.Flessibilit duso; 3.Uso semplice e intuitivo; 4.Informazione accessibile; 5.Tolleranza agli errori; 6.Sforzo fisico minimo; 7.Dimensione e spazio duso adatti a qualsiasi utente; questi principi si possono applicare indifferentemente a una sedia cos come a un sito web anche perch sono eccessivamente generali e generici.
  • Slide 8
  • Web Design8 Utenti diversamente abili Disabilit della vista Disabilit delludito Disabilit motorie emulatori di mouse, testiera, ingrandimento di oggetti Disabilit cognitive evitare immagini in movimento veloce
  • Slide 9
  • Web Design9 Quindi gli utenti Possono non essere in grado di vedere, ascoltare o muoversi Possono non essere in grado di trattare alcuni tipi di informazioni facilmente o del tutto. Possono avere difficolt nella lettura o nella comprensione del testo. Possono non avere o non essere in grado di usare una tastiera o un mouse. Possono avere uno schermo solo testuale, un piccolo schermo o una connessione Internet molto lenta.
  • Slide 10
  • Web Design10 Utenti con limitazioni allaccesso Possono non parlare e capire fluentemente la lingua in cui il documento scritto. Possono trovarsi in una situazione in cui i loro occhi, orecchie o mani sono occupati o impediti (ad es., stanno guidando, lavorano in un ambiente rumoroso, ecc.). Possono avere la versione precedente di un browser, un browser completamente diverso, un browser basato su dispositivi di sintesi vocale o un diverso sistema operativo.
  • Slide 11
  • Web Design11 Le tecnologie assistive Tecnologie di ausilio a portatori di handicap nella fruizione dei servizi informatici: Screen reader: Jaws; Windows Eye; IBM Home Page Reader; Display (Barre) Braille; Screen Magnifier; Browser testuali Lynx;
  • Slide 12
  • Web Design12 Il quadro normativo di riferimento USA: Section 508 (1998) emendamento del Rehabilitation Act che richiede la conformit ad un insieme di punti di controllo per la realizzazione di servizi digitali offerti / per la pubblica amministrazione; http://www.access-board.gov/sec508/508standards.htm Unione Europea: Piano dazione eEurope 2002 Reclama la necessit di adottare laccessibilit come requisito fondamentale dei servizi informatici; Indica le linee guida dettate dal W3C come punto di riferimento; Risoluzione della Commissione Europea del 3 gennaio 2003;
  • Slide 13
  • Web Design13 Il quadro normativo di riferimento Italia: Circolare AIPA (6 settembre 2001): il consiglio dei ministri aveva aderito al W3C Indica le linee guida del W3C come modello cui uniformarsi progettazione universale; Non viene indicato alcun obbligo ma solo una richiesta di conformit; 2003 anno europeo dei disabili Libro bianco di Lucio Stanca (Ministro per linnovazione e le tecnologie): Analisi esaustiva della tematica; Detta lorientamento che le successive deliberazioni dovranno possedere;
  • Slide 14
  • Web Design14 Il quadro normativo di riferimento Dicembre 2003 Approvazione della Legge Stanca "Disposizioni per favorire laccesso dei soggetti disabili agli strumenti informatici". Ad esso seguono numerose altre iniziative legislative, alla fine unificate nel testo di legge approvato nel dicembre 2003. Legge Stanca del 2004 lavoro di sintesi Sancito il diritto di ciascun individuo ad accedere a tutte le fonti informative e rende obbligatorio che tale accesso sia garantito dalla pubblica amministrazione e dagli enti di pubblica utilit (es. scuole e biblioteche) Le PA sono obbligate a seguire la legge, i privati incentivati Regolamento di attuazione (90gg) e decreto legge (120gg) con linee guida e metodologia
  • Slide 15
  • Web Design15 La Web Accessibility Initiative Nel 1996 stato creato il WAI allo scopo di stendere un insieme di linee guida da applicare agli strumenti informatici legati al WWW. Sono cos nate: WCAG:Web Content Accessibility Guidelines (le pagine web); UAAG: User Agent Accessibility Guidelines (gli strumenti di navigazione); ATAG: Authoring Tool Accessibility Guidelines (editor, CMS ecc.); XAG: XML Accessibility Guidelines (linee guida che i linguaggi basati su XML devono seguire, es. SMIL, RSS ecc); http://www.w3.org/WAI/
  • Slide 16
  • Web Design16 Le WCAG 2 temi fondamentali; 14 linee guida; 65 punti di controllo; 3 livelli di conformit;
  • Slide 17
  • Web Design17 Le WCAG: temi fondamentali Indicano le due anime delle WCAG: Assicurare una trasformazione elegante Le pagine devono essere ugualmente fruibili indipendentemente da device, abilit, software, capacit percettive ecc. (aspetto pi tecnico) Rendere il contenuto comprensibile e navigabile laccessibilit non solo un fatto tecnico/percettivo, ma anche e soprattutto psicologico-cognitivo;
  • Slide 18
  • Web Design18 Assicurare una trasformazione elegante ( linee guida 1-11 ) Separare la struttura dalla presentazione Fornire testo (compresi gli equivalenti testuali) Creare documenti funzionanti nonostante lutente non possa vedere e/o sentire Creare documenti che non si basino su uno specifico hardware
  • Slide 19
  • Web Design19 Rendere il contenuto comprensibile e navigabile ( linee guida 12-14 ) Dovreste gi essere in grado La navigazione e lorientamento devono essere massimizzate in qualsiasi condizione
  • Slide 20
  • Web Design20 Le WCAG: punti di controllo I punti di controllo sono articolati in 3 livelli di priorit: Priorit 1: punti che devono essere soddisfatti, pena linaccessibilit di molte categorie di utenti (accessibilit base); Priorit 2: punti che dovrebbero essere soddisfatti, pena la difficolt daccesso di alcune categorie di utenti (rimozione di barriere significative); Priorit 3: punti che potrebbero essere soddisfatti, pena lostacolo allaccesso di alcune categorie di utenti (miglioramento dellaccessibilit);
  • Slide 21
  • Web Design21 Le WCAG: livelli di conformit Assolvendo tutti i punti di controllo di un dato livello di priorit, ottengo un corrispettivo livello di conformit: Priorit 1 => Conformit A; Priorit 2 => Conformit Doppia-A; Priorit 3 => Conformit Tripla-A;
  • Slide 22
  • Web Design22 WCAG 1.0 Fornire un contenuto che, quando viene presentato all'utente, gli trasmetta essenzialmente la stessa funzione o scopo del contenuto audio o visivo. Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo
  • Slide 23
  • Web Design23 Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo 1.1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio, mediante "alt", "longdesc" o contenuto nell'elemento stesso). [Priorit 1] 1.2 Fornire ridondanti collegamenti di testo per ogni zona attiva di una immagine sensibile sul lato server. [Priorit 1] 1.3 Fino a quando gli interpreti non potranno leggere automaticamente ad alta voce l'equivalente testuale di un filmato, fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale. [Priorit 1]
  • Slide 24
  • Web Design24 Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo 1.4 Per ogni presentazione multimediale temporizzata (per es. un film o una animazione), sincronizzare alternative equivalenti (per es. didascalie o descrizioni parlate del filmato) con la presentazione. [Priorit 1] 1.5 Fino a quando gli interpreti non renderanno disponibili equivalenti testuali per collegamenti di immagini sensibili sul lato client fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine sensibile sul lato client. [Priorit 3]
  • Slide 25
  • Web Design25 WCAG 1.0 Assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il colore. Linea guida 2. Non fare affidamento sul solo colore.
  • Slide 26
  • Web Design26 Linea guida 2. Non fare affidamento sul solo colore. 2.1 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori. [Priorit 1] 2.2 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in bianco e nero. [Priorit 2 per le immagini, Priorit 3 per il testo].
  • Slide 27
  • Web Design27 WCAG 1.0 Marcare i documenti con i corretti elementi strutturali. Controllare la presentazione con fogli di stile piuttosto che con elementi e attributi di presentazione. Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato.
  • Slide 28
  • Web Design28 Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato. 3.1 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. [Priorit 2] 3.2 Creare documenti che facciano riferimento a grammatiche formali pubblicate. (DTD)[Priorit 2] 3.3 Usare fogli di stile per controllare l'impaginazione e la presentazione. [Priorit 2] 3.4 Usare unit relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della propriet del foglio di stile. [Priorit 2] 3.5 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche. (H1)[Priorit 2]
  • Slide 29
  • Web Design29 Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato. 3.6 Marcare le liste ed elencare le voci della lista in modo appropriato. [Priorit 2] 3.7 Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formato come il rientro. [Priorit 2]
  • Slide 30
  • Web Design30 WCAG 1.0 Utilizzare marcatori che facilitino la pronuncia o l'interpretazione di testi stranieri o abbreviati. Linea guida 4. Chiarire l'uso di linguaggi naturali.
  • Slide 31
  • Web Design31 Linea guida 4. Chiarire l'uso di linguaggi naturali. 4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie). [Priorit 1] 4.2 Specificare lo scioglimento di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta. [Priorit 3] 4.3 Identificare il linguaggio naturale principale di un documento. [Priorit 3]
  • Slide 32
  • Web Design32 WCAG 1.0 Assicurarsi che le tabelle abbiano la marcatura necessaria per essere trasformate dai browser accessibili e da altri interpreti. Linea guida 5. Creare tabelle che si trasformino in maniera elegante.
  • Slide 33
  • Web Design33 Linea guida 5. Creare tabelle che si trasformino in maniera elegante. 5.1 Per tabelle di dati, identificare le intestazioni di righe e colonne. [Priorit 1] 5.2 Per tabelle di dati che hanno due o pi livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione. [Priorit 1] 5.3 Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire una alternativa equivalente (che pu essere una versione linearizzata). [Priorit 2]
  • Slide 34
  • Web Design34 Linea guida 5. Creare tabelle che si trasformino in maniera elegante. 5.4 Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva. [Priorit 2] 5.5 Per le tabelle, fornire sommari. [Priorit 3] 5.6 Fornire abbreviazioni per le etichette di intestazione. [Priorit 3]
  • Slide 35
  • Web Design35 WCAG 1.0 Assicurarsi che le pagine siano accessibili anche quando le tecnologie pi recenti non sono supportate o sono disabilitate. Linea guida 6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante.
  • Slide 36
  • Web Design36 Linea guida 6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante. 6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento. [Priorit 1] 6.2 Assicurarsi che gli equivalenti del contenuto dinamico vengano aggiornati quando il contenuto dinamico cambia. [Priorit 1] 6.3 Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non possibile, fornire informazione equivalente in una pagina accessibile alternativa. [Priorit 1]
  • Slide 37
  • Web Design37 Linea guida 6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante. 6.4 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. [Priorit 2] 6.5 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. [Priorit 2]
  • Slide 38
  • Web Design38 WCAG 1.0 Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si autoaggiornano possano essere arrestati temporaneamente o definitivamente. Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso del tempo.
  • Slide 39
  • Web Design39 Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso del tempo. 7.1 Fino a quando gli interpreti non permetteranno agli utenti di controllare lo sfarfallo, evitare di far sfarfallare lo schermo.[Priorit 1] 7.2 Fino a quando gli interpreti non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto (cio di cambiare la presentazione a intervalli regolari, come se si accendesse e spengesse). [Priorit 2] 7.3 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. [Priorit 2]
  • Slide 40
  • Web Design40 Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso del tempo. 7.4 Fino a quando gli interpreti non forniranno la possibilit di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente. [Priorit 2] 7.5 Fino a quando gli interpreti non forniranno la capacit di bloccare l'auto-reindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti. [Priorit 2]
  • Slide 41
  • Web Design41 WCAG 1.0 Assicurarsi che la progettazione delle interfacce utente segua i principi dell'accessibilit: accesso alle diverse funzionalit indipendente dai dispositivi usati, possibilit di operare da tastiera, comandi vocali, ecc. Linea guida 8. Assicurare l'accessibilit diretta delle interfacce utente incorporate.
  • Slide 42
  • Web Design42 Linea guida 8. Assicurare l'accessibilit diretta delle interfacce utente incorporate. 8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive [Priorit 1 se la funzionalit importante e non presentata altrove, altrimenti Priorit 2.]
  • Slide 43
  • Web Design43 WCAG 1.0 Usare caratteristiche che permettono di attivare gli elementi della pagina attraverso una molteplicit di dispositivi di input. Linea guida 9. Progettare per garantire l'indipendenza da dispositivo.
  • Slide 44
  • Web Design44 Linea guida 9. Progettare per garantire l'indipendenza da dispositivo. 9.1 Fornire immagini sensibili sul lato client invece di immagini sensibili sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida.[Priorit 1] 9.2 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalit indipendente da dispositivo. [Priorit 2] 9.3 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo. [Priorit 2]
  • Slide 45
  • Web Design45 Linea guida 9. Progettare per garantire l'indipendenza da dispositivo. 9.4 Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti. [Priorit 3] 9.5 Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli. [Priorit 3]
  • Slide 46
  • Web Design46 WCAG 1.0 Usare soluzioni provvisorie in modo che le tecnologie assistive e i browser pi vecchi possano operare correttamente. Linea guida 10. Usare soluzioni provvisorie.
  • Slide 47
  • Web Design47 Linea guida 10. Usare soluzioni provvisorie. 10.1 Fino a quando gli interpreti non permetteranno agli utenti di bloccare la generazione di nuove finestre, non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente. [Priorit 2] 10.2 Fino a quando gli interpreti non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente. [Priorit 2] 10.3 Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo corretto il testo affiancato, fornire un testo lineare alternativo (nella pagina attiva o in qualche altra) per tutte le tabelle che dispongono testo su colonne parallele e andando a capo. [Priorit 3]
  • Slide 48
  • Web Design48 Linea guida 10. Usare soluzioni provvisorie. 10.4 Fino a quando gli interpreti non gestiranno in maniera corretta controlli vuoti, inserire caratteri di default come segnaposto nelle caselle per l'immissione di testo a una riga oppure a pi righe.[Priorit 3] 10.5 Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo distinto collegamenti adiacenti, inserire caratteri stampabili (delimitati da spazi), non facenti parte dei collegamenti, per separare i collegamenti adiacenti. [Priorit 3]
  • Slide 49
  • Web Design49 WCAG 1.0 Usare le tecnologie del W3C (in conformit con le specifiche) e seguire le raccomandazioni sull'accessibilit. Nei casi in cui non sia possibile usare una tecnologia del W3C, oppure se nell'utilizzarla si ottenesse materiale che non si trasforma in maniera elegante, fornire una versione alternativa del contenuto che sia accessibile. Linea guida 11. Usare le tecnologie e le raccomandazioni del W3C.
  • Slide 50
  • Web Design50 Linea guida 11. Usare le tecnologie e le raccomandazioni del W3C. 11.1 Usare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito e usare le versioni pi recenti quando sono supportate. [Priorit 2] 11.2 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate. [Priorit 2] 11.3 Fornire agli utenti l'informazione necessaria perch possano ricevere i documenti in maniera che si adattino alle loro preferenze (per es., lingua, tipo di contenuto ecc.) [Priorit 3] 11.4 Se, nonostante ogni sforzo, non si pu creare una pagina accessibile, fornire un collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalit) equivalenti, e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile. [Priorit 1]
  • Slide 51
  • Web Design51 WCAG 1.0 Fornire informazione per la contestualizzazione e l'orientamento, per aiutare gli utenti a comprendere pagine od elementi complessi. Linea guida 12. Fornire informazione per la contestualizzazione e l'orientamento.
  • Slide 52
  • Web Design52 Linea guida 12. Fornire informazione per la contestualizzazione e l'orientamento. 12.1 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione. [Priorit 1] title 12.2 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non evidente dai titoli dei frame da soli. [Priorit 2] longdesc 12.3 Dividere grandi blocchi di informazione in gruppi pi maneggevoli quando naturale ed appropriato. [Priorit 2] OPTGROUP 12.4 Associare esplicitamente le etichette ai loro controlli. [Priorit 2]
  • Slide 53
  • Web Design53 WCAG 1.0 Fornire chiari e coerenti meccanismi di navigazione -- informazione per l'orientamento, barre di navigazione, una mappa del sito, ecc. per aumentare le probabilit che una persona trovi quello che sta cercando in un sito. Linea guida 13. Fornire chiari meccanismi di navigazione.
  • Slide 54
  • Web Design54 Linea guida 13. Fornire chiari meccanismi di navigazione. 13.1 Identificare con chiarezza l'obiettivo di ogni collegamento. [Priorit 2] 13.2 Fornire metadata per aggiungere informazione di tipo semantico alle pagine e ai siti. [Priorit 2] 13.3 Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito). [Priorit 2] 13.4 Usare meccanismi di navigazione in modo coerente. [Priorit 2] 13.5 Fornire barre di navigazione per evidenziare e dare accesso ai meccanismi di navigazione. [Priorit 3] 13.6 Raggruppare i collegamenti correlati, identificare i gruppi (per gli interpreti) e, fino a quando gli interpreti non lo fanno, fornire un modo per saltare il gruppo. [Priorit 3] dal title
  • Slide 55
  • Web Design55 Linea guida 13. Fornire chiari meccanismi di navigazione. 13.7 Se sono fornite funzionalit di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilit e per preferenze diverse. [Priorit 3] 13.8 Posizionare l'informazione pi significativa all'inizio delle intestazioni, dei paragrafi, delle liste, ecc. [Priorit 3] 13.9 Fornire informazione sulle raccolte di documenti (cio documenti composti da pi pagine). [Priorit 3]
  • Web Design84 Giorno 26: Usate dimensioni relative per i font p { font-size: 12px; } /*/*/a{} netscape4 e opera 5 MAC ignorano queste regole body, body p, body td{ font-size: x-small; voice-family: "\"}\""; IE si ferma qui voice-family: inherit; font-size: small; padding: 10px; } opera 5 html>body p, html>body td { font-size: small; }/* */
  • Slide 85
  • Web Design85 Giorno 27: Usate intestazioni vere,,
  • Slide 86
  • Web Design86 Giorno 28: Etichettate gli elementi dei moduli URL: Comments: Remember info? esempio
  • Slide 87
  • Web Design87 Giorno 29: Rendete tutto ricercabile accesskey="4"
  • Slide 88
  • Web Design88 Giorno 30: Dichiarate il vostro livello di accessibilit Accessibility statement
  • Slide 89
  • Web Design89 La conformit Questa pagina conforme alle "Linee guida per l'accessibilit ai contenuti del Web 1.0" del W3C disponibili a http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505, livello Doppia-A. Specificare: l Il titolo delle linee guida: "Linee guida per l'accessibilit ai contenuti del Web 1.0" L'URI delle Linee Guida: http://www.w3.org/TR/1999/WAI- WEBCONTENT- 19990505 Il Livello di conformit: "A", "Doppia-A", o "Tripla-A". L'ambito della dichiarazione (ad. es., pagina, sito, o una ben definita porzione di un sito.).
  • Slide 90
  • Web Design90 La conformit 2 Specificare: Includere, su ciascuna pagina che si dichiara conforme,una delle tre icone fornite dal W3C e collegare l'icona all'appropriata spiegazione W3Criguardante la dichiarazione. Informazioni circa le icone e su come inserirle all'interno delle pagine sono disponibili presso http://www.w3.org/WAI/WCAG1-Conformance.html http://www.w3.org/WAI/WCAG1-Conformance.html
  • Slide 91
  • Web Design91 La dichiarazione di accessibilit http://www.webaccessibile.org/argomenti/documento.asp?D ocID=329http://www.webaccessibile.org/argomenti/documento.asp?D ocID=329 http://www.m3lab.csp.it/index.php?IDpage=9 http://www.csp.it/access.php
  • Slide 92
  • Web Design92 JAVASCRIPT
  • Slide 93
  • Web Design93 Javascript Linguaggio di programmazione interpretato e leggero Lato client e lato server Pu controllare il contenuto e il comportamento dei documenti HTML Accede a gerarchie di oggetti basate sul contenuto della pagina web DOM standard che specifica come il modo in cui i linguaggi di script possono accedere alla struttura di un documento HTML e modificarla
  • Slide 94 ">
  • Web Design94 Rollover
  • Slide 95
  • Web Design95 window.open Clicca qui per aprire la nuova finestra http://javascript.about.com/library/weekly/aa031203a.htm
  • Slide 96
  • Web Design96 window.status Cambia la barra di stato
  • Slide 97
  • Web Design97 Server side include
  • Slide 98
  • Web Design98 SSI Mettere su un server Salvare come.shtml
  • Slide 99
  • Web Design99 CSS 2
  • Slide 100
  • Web Design100 Classificazione degli elementi Prima di addentrarci nei segreti di CSS bene capire la distinzione tra gli elementi che possiamo trovare in un documento HTML. Gli elementi principali sono: Elementi blocco Elementi inline Elementi lista Esempio
  • Slide 101
  • Web Design101 Elementi blocco Gli elementi blocco sono i box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Sono elementi blocco:,,,..,,,,,,. ESEMPIO:ESEMPIO Titolo Paragrafo Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perch e sono elementi blocco.
  • Slide 102
  • Web Design102 Elementi inline Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto, essenzialmente testo o immagini). Sono elementi inline:,,,,,,,,,,.. Una terza categoria quella degli elementi lista. Comprende soltanto l'elemento LI (list item).
  • Slide 103
  • Web Design103 Come usare i Css? Ci sono tre modalit valide, ognuna caratterizzata da alcuni aspetti: Fogli collegati (il classico tag oppure lattributo @import allinterno del tag ) @import "stile.css" screen; Fogli incorporati Fogli in linea
  • Slide 104
  • Web Design104 Lattributo Media Non solo i browser accedono al nostro sito.Anche palmari, cellulari e altri dispositivi sono abilitati a farlo..e ognuno di questi ha caratteristiche diverse. Riuscire ad adattare uno stile unico a tutti praticamente impossibile. La soluzione ideale sta nella creazione di fogli di stile ad hoc. Esempi di sintassi:...
  • Slide 105
  • Web Design105 Quali dispositivi? all: Il CSS si applica a tutti i dispositivi di visualizzazione. screen. Valore usato per la resa sui normali browser web. print. Il CSS viene applicato in fase di stampa del documento. projection. Usato per presentazioni e proiezioni a tutto schermo. aural. Da usare per dispositivi come browser a sintesi vocale. braille. Il CSS viene usato per supporti basati sull'uso del braille. embossed. Per stampanti braille. handheld. Palmari e simili. tv.Web-tv.
  • Slide 106
  • Web Design106 Cascade: concetti di base Per capire meglio il significato di cascade vediamo come si comporta un browser di fronte a un foglio di stile (ex):ex 1.Per prima cosa controlla il target stabilito con l'attributo media o con dichiarazioni equivalenti. Scarta quindi tutti gli stili riferiti alla stampa o ad altri supporti. Allo stesso tempo scarta tutte le regole che non trovino corrispondenza negli elementi strutturali del documento. 2.Comincia ad ordinare per peso e origine secondo le regole viste sopra. Se c un Css definito dallautore user quello. Altrimenti verificher la presenza di un foglio di stile utente e in sua assenza applicher le regole stilistiche predefinite. 3.Quindi calcola la specificit dei selettori e in caso di conflitto tra regole usa questo criterio di prevalenza. 4.In generale gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.
  • Slide 107
  • Web Design107 Box-model Il box-model uno degli elementi-cardine dei Css. L'insieme di regole che gestisce l'aspetto visuale degli elementi blocco in genere riferito a questo modello. l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Si pu agire sulle dimensioni di questarea con le propriet width e height. il padding. E' uno spazio vuoto che pu essere creato tra l'area del contenuto e il bordo dell'elemento. il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto. il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti. Esempio
  • Slide 108
  • Web Design108 Css in pratica: sfondi Ecco la lista delle propriet, applicabili a tutti gli elementi (vantaggio di CSS!): 1.background-color 2.background-image 3.background-repeat 4.background-attachment 5.background-position Esempi body { background-color: white; } p { background-color: #FFFFFF; }.classe1 { background-color: rgb(0, 0, 0) Esempio: fixed
  • Slide 109
  • Web Design109 Css in pratica: il testo Le propriet di base a proposito dellelemento testo sono: il font da usare (font-family) la sua dimensione (font-size) la sua consistenza (font-weight) l'interlinea tra i paragrafi (line-height) l'allineamento del testo (text-align) la sua decorazione (text-decoration) Poi esistono propriet pi raffinate (da wordprocessor): word-spacing, letter-spacing, text-shadow, text-transform Esempio
  • Slide 110
  • Web Design110 Css in pratica: i margini Una delle maggiori limitazioni di HTML la mancanza di un meccanismo interno per spaziare gli elementi di un documento (lunica possibilit che avevamo a disposizione era lattributo cellspacing). Sono cinque le propriet con cui possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato del box. L'ultima, margin, una propriet a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati. Esempio
  • Slide 111
  • Web Design111 Css in pratica: padding Un altro modo per creare spazio intorno ad un elemento quello di usare il padding. Come per i margini, HTML incorpora un meccanismo simile solo per le celle di tabella, tramite il cosiddetto cellpadding. Rispetto a margin: quando si usa il padding, lo spazio di distanza viene inserito al di qua dei bordi dell'elemento e non all'esterno. Un'analogia rispetto ai margini sta nella sintassi. Anche qui quattro propriet singole per i lati e una a sintassi abbreviata (padding). Esempio
  • Slide 112
  • Web Design112 Css in pratica: border Esempio
  • Slide 113
  • Web Design113 Css in pratica: liste Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste (X)HTML. Le propriet che andremo ad esaminare si riferiscono non ai canonici tag usati per inserire una lista ordinata ( ) o non ordinata ( ), ma ai singoli elementi che le compongono, ovvero l'elemento (ricordate? Elemento lista!) Propriet: list-style-image list-style-position list-style-type Esempio
  • Slide 114
  • Web Design114 3 propriet speciali di Css Sono display, float e clear Display: Avevamo chiarito in quella sede la fondamentale distinzione tra elementi blocco, inline e lista che alla base di (X)HTML. Quello che si era detto pu essere rimesso in discussione da questa propriet: la funzione di display di definire il trattamento e la presentazione di un elemento.Display Float: con questa propriet possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrer intorno ad esso sul lato opposto rispetto a quello indicato come valore di float (in pratica ripete ci che faceva align con le immagini in HTML) Clear: questa propriet serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco. esempi
  • Slide 115
  • Web Design115 Css in pratica: posizionamento E' con queste regole che si pu pensare di realizzare il layout delle nostre pagine solo con i CSS e giungere cos alla definitiva e reale separazione tra presentazione e struttura! Position la propriet fondamentale per la gestione della posizione degli elementi, di cui determina la modalit di presentazione sulla pagina. Si applica a tutti gli elementi (static, absolute, fixed, relative).absolutefixedrelative
  • Slide 116
  • Web Design116 Css in pratica: posizionamento E' con queste regole che si pu pensare di realizzare il layout delle nostre pagine solo con i CSS e giungere cos alla definitiva e reale separazione tra presentazione e struttura! Position la propriet fondamentale per la gestione della posizione degli elementi, di cui determina la modalit di presentazione sulla pagina. Si applica a tutti gli elementi (static, absolute, fixed, relative).absolutefixedrelative