esempi pratici
of 25
/25
3° Workshop "Accessibilità: primi passi per un mondo fruibile da tutti" Alessandro Olivi Modellazione di pagine WEB e accessibilità
Embed Size (px)
DESCRIPTION
Verrà illustrato un caso pratico di modifica di un sito web, su tecnologia ASP.NET 1.1, completo ma non accessibile: obiettivo del tutorial è quello di ottenere in tempi brevi una versione accessibile dello stesso sito.TRANSCRIPT
- 1. 3 Workshop "Accessibilit: primi passi per un mondo fruibile da tutti" Modellazione di pagine WEB e accessibilit Alessandro Olivi
- 2. Sommario Evoluzione delle web page, in tre step Obiettivo: micro-sito accessibile Case History di un progetto ASP.NET 1.1
- 3. Prendiamo per assunto Legge Stanca e i 22 requisiti http://www.pubbliaccesso.gov.it/ Specifiche internazionali alle quali si ispirata la legge Stanca W3C WCAG Section 508
- 4. Sito Conforme alla legge Stanca e tecnologie Asp.Net Obiettivi: Un flash sulla modellazione di pagine web Costruire una pagine Asp.Net accessibile Prima del 2004 Pagine accessibile 3 step per descrivere levoluzione nella creazione di pagine web 1) Layout tabellare 1b) Layout assistito da Visual Studio 2) Pagine strutturate 3) Pagine accessibili
- 5. Step 1 Realizzazione di una pagina HTML 3.02 Utilizzo dei TAG di tabulazione per definire la struttura della pagina Demo: Step1 realizzato manualmente Il drag and drop di VS2005 tenta di arrivare da solo allo Step2
- 6. Strumenti Visuali Gli strumenti visuali usati per realizzare pagine HTML/PHP/ASP/ASP.NET agiscono sulla formattazione modificando: i TAG ed i loro attributi Aggiungendo stili ai TAG Demo: Step1b
- 7. Step 2 DOCTYPE: Document Type Declaration Indica la conformit del DTD A cosa serve: Informa il browser della tipologia del documento che sta caricando Sintassi utilizzata e Tag ammessi Aumenta la velocit di caricamento Aumenta indirettamente il PageRank di un sito Nota Step 1: Le formattazioni sono attributi dei TAG Step 2: Utilizzo degli stili
- 8. HTML 4 e CSS Obiettivo: separare il contenuto della pagina dalla sua presentazione grafica Vantaggio: la grafica di un sito pu cambiare nel tempo, utilizzando i tag con gli attributi di formattazione si complica il mantenimento del sito
- 9. Pagina strutturata La pagina non ancora accessibile Non una nuova tecnologia da imparare, ma e una vecchia tecnologia usata secondo specifiche diverse (imposte dalla legge e del buon senso)
- 10. Requisiti principali per la conformit alla legge Stanca Tipologie dei requisiti Strutturali Di navigazione Come verificare cosa stiamo facendo ? Rispettiamo i 22 requisiti? Webaccessibile.org Toolbar Microsoft I Validatori di VS2005
- 11. I validatori di VS2005 La legge Stanca fa riferimenti a WCAG e Section 508
- 12. DOCTYPE inserito da VS 2005 In VS 2003 le nuove pagine non erano create in XHTML In VS 2005 di default
- 13. XHTML Strict Per far si che il rendering dei controlli sia Strict Web.Config Si possono modificare i Template di Visual Studio [C:ProgrammiMicrosoft Visual Studio 8Common7IDEItemTemplatesWebCSharp1033]
- 14. XHTML la mappatura di HTML su XML, con le sematiche xml viene formalizzato lhtml Demo Step 3 : pagina accessibile
- 15. Controlli ASP.NET e TAG HTML Nellesempio useremo: Master Page & Contentplaceholder HyperLink SiteMapPath Button Literal I tag HTML ed un esempio script
- 16. Struttura della pagina Le tabelle non vengono usate per definire la struttura della pagina, la struttura grafica demandata al CSS Le tabelle non vanno pi usate?
- 17. LINK Devono avere descrizioni interpretabile da qualsiasi device Obiettivo: informare lutente sulla navigazione C un link che collega a una certa pagina Devono avere un tasto di accesso rapido associato [AccessKey] I.E. Alt+Lettera Non presente lattributo TARGET
- 18. Script pagine accessibili Rif. Art. 15 legge Stanca Script per lapertura di una pagina Si deve informate lutente che lapertura sar in unaltra finestra Se il browser non permette lapertura della pagina in pop-up, la pagina deve essere comunque visibile
- 19. Apertura di un pop-up Apertura di una pagina in pop-up con il target Demo: Step3 pagina B Rif:http://webdesign.html.it/articoli/leggi/304/costruire-popup-accessibili
- 20. Storia di un progetto Progetto A9 Sintesi dei requisiti: Portale web con banner pubblicitari Gestione di un mercatino localizzato a livello territoriale Autenticazione mediante smart card Infrastruttura di sicurezza firewall, posta elettronica e gestione in datacenter
- 21. che divenne (accessibile) Logica funzionale: realizzata in .NET 1.1 Logiche di caricamento dei banner Accesso controllato e logging Back-office e gestione del DB Grafica e CSS [realizzato da una societ che ha curato il layout grafico]
- 22. Impatto della legge Stanca Tipologia del cliente che ha commissionato il lavoro: Grande azienda di telecomunicazioni Il cliente finale: Una societ a partecipazione pubblica Dovevano essere garantiti i requisiti definiti dalla Legge Stanca
- 23. Front-Office Cosa era necessario: DataList multi colonna accessibili Cosa non si potuto usare: Nessun controllo asp.net ad eccezione dei link e literal Come si risolto: realizzando controlli basati sul Repeater e Literal ma che generassero codice html accessibile con riferimenti a classi del CSS
- 24. Analisi dei costi Vantaggi nellusare un ambiente RAD Drag and drop costo 0 Realizzazione di un componente x giorni Costi aggiuntivi: un componente che ha un render corretto non detto che sia accessibile costi di debugging Stima del fattore di costo in giornate uomo: X 5
- 25. Grazie