Upload
fabrizio-caccavello
View
330
Download
0
Embed Size (px)
Citation preview
Web Accessibility Expert - Digital Strategic Planner
Mi occupo di standard, accessibilità e strategie per il web
Membro del Consiglio Direttivo di IWA Italy
Agenzia per l’Italia Digitale Area Architetture, Standard e infrastrutture
Amministratore e fondatore di Akebia società di servizi per il web.
Commissione e-Accessibility Coordinatore del GdL2 "Adozioni e Traduzioni”
About me: Fabrizio Caccavello
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
L’associazione internazionale per la professionalità nel Web
http://www.iwa.it
Associazione professionisti Web (Legge 4/2013), promotrice norme UNI in materia di professionalità ICT.
Dal 1996 (in Italia dal 2000) è il riferimento di chi lavora nel Web, sia nel settore pubblico che privato.
Obiettivo di IWA è creare rete tra i soci, partecipare all'evoluzione della rete e divulgare conoscenza tramite i soci con eventi e iniziative.
partecipazioni internazionali
principali partecipazioni nazionali
International Web Association
Fabrizio Caccavello
Gli utenti sono molto spesso critici rispetto ai siti web. Eppure sviluppatori, responsabili d’azienda e amministratori pubblici hanno la sensazione di aver fatto tutto il possibile per rendere i loro progetti efficienti e “a misura di utente”. Ma c’è un gap evidente tra ciò che si sarebbe voluto offrire e ciò che invece si sta davvero offrendo agli utenti.
In questo seminario sarà esposta una checklist in 5 punti attraverso la quale, si potrà valutare la qualità complessiva di un progetto web, in modo che possa essere ridotta quella costante insoddisfazione che hanno, a ragione, gli utenti.
@cfabry #SMAU
5 ragionamenti da fare per creare un sito internet professionale
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Utente, come ti trovi a navigare su questo sito
web?
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
mah… più o meno…
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Qualità dei siti weboggi parliamo di
marciapiedi
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
questo ambiente è molto familiare
e forse anche rassicurante
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Automobili ordinatamente
parcheggiate
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Pista ciclabile ai margini della
strada
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Un marciapiede protetto per le
persone
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Aiuole per gli alberi
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Marciapiedi con scivoli per agevolare il passaggio
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Non sembra esistano strisce per i parcheggi
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
La pista ciclabile è molto stretta
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
La pista ciclabile ha delle buche
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
La cunetta è accidentata e
sconnessa
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
La segnaletica è sbiadita e incerta
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Sugli alberi si notano strani oggetti:
segnali o protezioni?
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Il marciapiede è molto stretto
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Si notano segni non identificabili
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
È tutto un po’ così così, sia per il marciapiede che
per i siti web. Ma perché?
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
ci piace credere alle
favole!
SE ROTTAMI IL TUO VECCHIO SITO il tuo nuovo sito
internet professionale a
300€
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
ci piace credere alle
favole!
sito internet professionale
GRATISper il primo anno, poi 120€/anno
https://www.youtube.com/watch?v=Ac40lPo27Yk
“… Parlo mai di epigrafia greca? …” Sogni d’oro (1981) - Nanni Moretti
parliamo di cose che non conosciamo
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
competenze digitali per il webservono
per i professionisti per le imprese
che devono fornire progetti credibili ed efficienti che devono saper valutare e scegliere
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Ma chi sono questi professionisti?
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
! Information Architect ! Digital Strategic Planner ! Web Accessibility Expert ! Web Security Expert ! Mobile Application Developer ! E-commerce Specialist ! Online Store Manager ! Reputation Manager ! Knowledge Manager ! Augmented Reality Expert ! E-Learning Specialist ! Data Scientist ! Wikipedian
! Web Community Manager ! Web Project Manager ! Web Account Manager ! User Experience Designer ! Web Business Analyst ! Web DB Administrator ! Search Engine Expert ! Web Advertising Manager ! Frontend Web Developer ! Server Side Web Developer ! Web Content Specialist ! Web Server Administrator
http://www.skillprofiles.eu/
UNI 11621-1/4: 2016 Attività professionali non regolamentate – Profili professionali per l’ICT
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
COSA VEDREMO
Accessibilità
Responsive design
Tecnologia
Contenuti e Dati
5
1
32
4
User Experience5 punti non esaustivi
per creare un progetto web professionale
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee
La forza del Web sta nella sua universalità. Renderlo accessibile a tutti, indipendentemente dalla disabilità, è un aspetto essenziale.
http://www.w3.org/WAI/1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / riferimenti
http://www.w3.org/standards/webdesign/accessibilitypagine accessibilità sul sito W3C
http://www.w3.org/Translations/WCAG20-it/Web Content Accessibility Guidelines (WCAG) 2.0
Accessible Rich Internet Applications (WAI-ARIA) 1.0http://www.w3.org/TR/wai-aria/
1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / normativa per la PA
http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita/normativaSezione Accessibilità sul sito AgID
http://accessibilita.agid.gov.itPubblicazione obiettivi accessibilità (entro 31 marzo)
Legge 4/2004 http://www.camera.it/parlam/leggi/04004l.htm
http://www.agid.gov.it/dm-8-luglio-2005-allegato-A
DL 179/2012
DM 8 luglio 2005 - Requisiti tecnici e i diversi livelli per l'accessibilità agli strumenti informatici. Allegato A: Verifica tecnica e requisiti di accessibilità delle applicazioni basate su tecnologie internet aggiornato dal DM 20 marzo 2013 - GU Serie Generale n. 217 del 16-9-2013
1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / I PRINCIPI
1: percepibile
2: utilizzabile
3: comprensibile
4: robusto
http://www.w3.org/Translations/WCAG20-it/
1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / I PRINCIPI
1: percepibile
http://www.w3.org/Translations/WCAG20-it/
1
le informazioni e i componenti dell'interfaccia utente devono essere presentati in modo che possano essere fruiti attraverso differenti canali sensoriali
Abstract tratto da: DM 20 marzo 2013 - GU Serie Generale n. 217 del 16-9-2013
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / I PRINCIPI
2: utilizzabile
http://www.w3.org/Translations/WCAG20-it/
1
i componenti dell’interfaccia utente e i comandi in essa contenuti devono essere utilizzabili senza ingiustificati disagi o vincoli per l’utente
Abstract tratto da: DM 20 marzo 2013 - GU Serie Generale n. 217 del 16-9-2013
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / I PRINCIPI
3: comprensibile
http://www.w3.org/Translations/WCAG20-it/
1
gli utenti devono poter comprendere le modalità di funzionamento dell’interfaccia e le azioni in essa contenute, necessarie per ottenere servizi e informazioni
Abstract tratto da: DM 20 marzo 2013 - GU Serie Generale n. 217 del 16-9-2013
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità / I PRINCIPI
4: robusto
http://www.w3.org/Translations/WCAG20-it/
1
il contenuto deve essere abbastanza robusto da poter essere interpretato in modo affidabile da una vasta gamma di programmi utilizzati dall’utente, comprese le tecnologie assistive
Abstract tratto da: DM 20 marzo 2013 - GU Serie Generale n. 217 del 16-9-2013
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Accessibilità - Facciamo un esempio
immaginate che questo sia lo slideshow di un sito web
- ce ne sono tantissimi di questo tipo -
1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Per accessibilità web si indica la capacità di un sito web di essere acceduto efficacemente (alla sua interfaccia e al suo contenuto) da utenti diversi in differenti contesti. Rendere un sito web accessibile significa permettere l'accesso all'informazione contenuta nel sito anche a persone con disabilità fisiche di diverso tipo e a chi dispone di strumenti hardware e software limitati.
La Web Accessibility Initiative (WAI)
Accessibilità - Facciamo un esempio 1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
La Web Accessibility Initiative (WAI)
Web Accessibility Perspectives explores the impact of accessibility for people with disabilities and the benefits for everyone.
Accessibilità - Facciamo un esempio 1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
che cosa avete letto?che cosa avreste voluto fare?
Accessibilità - Facciamo un esempio 1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
chi può dire quanto tempo impiegherà un utente a leggere un testo?
10 secondi? 20 secondi? 1 minuto?
Accessibilità - Facciamo un esempio 1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
I contenuti che si aggiornano automaticamente devono avere dei meccanismi per mettere in pausa
anche con comandi da tastiera
WCAG 2.0 - Adeguata disponibilità di tempo - Principio 2.2.2 http://www.w3.org/Translations/WCAG20-it/#time-limits
L.4/2004 - Aggiornamento del 20/03/2013 dell’allegato A - D.M. 8 luglio 2005Punto di controllo 6.2 lettera a http://www.agid.gov.it/decreto-ministeriale-8-luglio-2005
Accessibilità - Facciamo un esempio 1
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
User Experience2 sviluppatore: “gli utenti dicono che non riescono a capisce questa interfaccia così semplice, ma come è possibile?”
utente: “ma chi ha fatto questo procedimento così complesso e tortuoso!?”
Medioman - Fabio De Luigi
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
User Experience
Usabilità Accessibilità Personas Scenari
2
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Avete mai iniziato la progettazione iniziando a ragionare di Personas e Scenari?
User Experience2
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
A chi state affidando i vostri
contenuti e i vostri dati?
3 Tecnologia
Mike Wasosky
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Tecnologia3A chi state affidando i vostri
contenuti e i vostri dati?
hardware software
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Contenuti / facciamoci un’idea
sito web
normativa
atti
turismo
utilities
Socialnews…
4
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
sito webnormativa
atti
turismoutilities
Social
news
…
albo pretorio
ammin. trasparente
canali
aree separate
Contenuti / facciamoci un’idea4
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
accessibili
testi video audio
e strutturati
Contenuti / facciamoci un’idea4
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Dati4quali azioni si devono fare?
• raccogliere • trattare • archiviare • …
con quale• sicurezza • normativa • efficienza • …
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Open Data
http://www.agid.gov.it/agenda-digitale/open-data
Occasione per riflettere almeno su due punti:
1) si hanno dei dati da poter distribuire in formato open? magari per permettere a terzi la creazione di nuovi servizi?
2) ci sono dati open che si possono riutilizzare per creare nuovi servizi sul progetto web?
4
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Responsive design5
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Mobile first?Siamo proprio sicuri che tutti i contenuti e i servizi devono essere ottimizzati per il mobile?
Responsive design5
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
/ non re-inventiamo la ruota
Foundation Bootstrap
i framework HTML - CSS - Javascript aiutano a creare applicazione web solide con funzionalità multi device già testate
Responsive design5
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
/ Layout
è solo una conseguenza
dei ragionamenti fatti fino a qui
Responsive design5
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
progettazione web efficace
ContenutiDati
Tecnologia
Standard,normative (accessibilità)
Design
UX di successo
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
siamo una bella squadra e stiamo per vincere, ma…
molti avevano aperto le alisenza essere capaci di volare, come dei gabbiani ipotetici
Giorgio Gaber
http://tinyurl.com/hzldjedGabriella Mighali
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
abbiamo parlatodi aspetto grafico e di homepage?
ciò che si richiede al fornitore è di vedere la demo della homepage
E queste riflessioni?
quando si progetta un sito internet si pensa al tema grafico da utilizzare
COMMITTENTI
Eppure quasi sempre
FORNITORI
Fabrizio Caccavello
5 ragionamenti da fareper creare un sito internet professionale
@cfabry #SMAU
Fabrizio Caccavello
@cfabry