Per creare un web professionale è necessario focalizzare l'attenzione su molti punti, ma ci sono 5 che sono fondamentali. Ecco quali sono.

1. 5 ragionamenti da fare
per creare un sito
internet professionale

2. 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

3. Fabrizio Caccavello
5 ragionamenti da fare
per 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

4. 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

5. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Utente, come ti
trovi a navigare
su questo sito
web?

6. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
mah…
più o meno…

7. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Qualità dei siti web
oggi parliamo di
marciapiedi

8. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
questo ambiente
è molto familiare
e forse anche rassicurante

9. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Automobili
ordinatamente
parcheggiate

10. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Pista ciclabile ai
margini della
strada

11. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Un marciapiede
protetto per le
persone

12. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Aiuole per gli
alberi

13. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Marciapiedi con scivoli per
agevolare il passaggio

14. eppure…

15. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Non sembra
esistano strisce
per i parcheggi

16. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
La pista ciclabile è
molto stretta

17. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
La pista ciclabile
ha delle buche

18. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
La cunetta è
accidentata e
sconnessa

19. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
La segnaletica è
sbiadita e incerta

20. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Sugli alberi si notano
strani oggetti:
segnali o protezioni?

21. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Il marciapiede è
molto stretto

22. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Si notano segni non
identificabili

23. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
È tutto un po’ così così,
sia per il marciapiede che
per i siti web.
Ma perché?

24. Fabrizio Caccavello
5 ragionamenti da fare
per 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€

25. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
ci piace
credere alle
favole!
sito internet professionale
GRATIS
per il primo anno, poi 120€/anno

26. https://www.youtube.com/watch?v=Ac40lPo27Yk
“… Parlo mai di epigrafia greca? …”
Sogni d’oro (1981) - Nanni Moretti
parliamo di cose che non conosciamo

27. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
competenze digitali per il web
servono
per i
professionisti
per le imprese
che devono fornire progetti credibili ed efficienti che devono saper valutare e scegliere

28. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Ma chi sono questi professionisti?

29. Fabrizio Caccavello
5 ragionamenti da fare
per 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

30. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
COSA VEDREMO
Accessibilità
Responsive design
Tecnologia
Contenuti e Dati
5
1
3
2
4
User Experience5 punti
non esaustivi
per creare un
progetto web
professionale

31. Fabrizio Caccavello
5 ragionamenti da fare
per 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

32. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Accessibilità / riferimenti
http://www.w3.org/standards/webdesign/accessibility
pagine 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.0
http://www.w3.org/TR/wai-aria/
1

33. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Accessibilità / normativa per la PA
http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita/normativa
Sezione Accessibilità sul sito AgID
http://accessibilita.agid.gov.it
Pubblicazione 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

34. Fabrizio Caccavello
5 ragionamenti da fare
per 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

35. Fabrizio Caccavello
5 ragionamenti da fare
per 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

36. Fabrizio Caccavello
5 ragionamenti da fare
per 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

37. Fabrizio Caccavello
5 ragionamenti da fare
per 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

38. Fabrizio Caccavello
5 ragionamenti da fare
per 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

39. Fabrizio Caccavello
5 ragionamenti da fare
per 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

40. Fabrizio Caccavello
5 ragionamenti da fare
per 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 esempio1

41. Fabrizio Caccavello
5 ragionamenti da fare
per 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 esempio1

42. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
che cosa avete letto?
che cosa avreste voluto fare?
Accessibilità - Facciamo un esempio1

43. Fabrizio Caccavello
5 ragionamenti da fare
per 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 esempio1

44. Fabrizio Caccavello
5 ragionamenti da fare
per 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 2005
Punto di controllo 6.2 lettera a
http://www.agid.gov.it/decreto-ministeriale-8-luglio-2005
Accessibilità - Facciamo un esempio1

45. Fabrizio Caccavello
5 ragionamenti da fare
per 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

46. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
User Experience
Usabilità
Accessibilità
Personas
Scenari
2

47. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Avete mai iniziato la
progettazione
iniziando a ragionare
di Personas e
Scenari?
User Experience2

48. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
A chi state
affidando i vostri
contenuti e i
vostri dati?
3 Tecnologia
Mike Wasosky

49. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Tecnologia3
A chi state affidando i vostri
contenuti e i vostri dati?
hardware software

50. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Contenuti / facciamoci un’idea
sito web
normativa
atti
turismo
utilities
Social
news…
4

51. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
sito webnormativa
atti
turismo
utilities
Social
news
…
albo
pretorio
ammin.
trasparente
canali
aree
separate
Contenuti / facciamoci un’idea4

52. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
accessibili
testi
video
audio
e strutturati
Contenuti / facciamoci un’idea4

53. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Dati4
quali azioni si devono fare?
• raccogliere
• trattare
• archiviare
• …
con quale
• sicurezza
• normativa
• efficienza
• …

54. Fabrizio Caccavello
5 ragionamenti da fare
per 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

55. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Responsive design5

56. Fabrizio Caccavello
5 ragionamenti da fare
per 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

57. Fabrizio Caccavello
5 ragionamenti da fare
per 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

58. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
/ Layout
è solo una
conseguenza
dei
ragionamenti
fatti fino a qui
Responsive design5

59. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
progettazione web
efficace
Contenuti
Dati
Tecnologia
Standard,
normative
(accessibilità)
Design
UX di successo

60. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
siamo una bella squadra
e stiamo per vincere, ma…

61. molti avevano aperto le ali
senza essere capaci di volare,
come dei gabbiani ipotetici
Giorgio Gaber
http://tinyurl.com/hzldjed
Gabriella Mighali

62. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
abbiamo parlato
di 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

63. Fabrizio Caccavello
5 ragionamenti da fare
per creare un sito internet professionale
@cfabry #SMAU
Fabrizio Caccavello
@cfabry
fabrizio.caccavello@gmail.com