Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare bene servizi web per la...

Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare bene servizi web per la pubblica amministrazione

Digital Strategic Planner - Web Accessibility Expert

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

Progetti web vincenti: 10 requisiti, tra design e normativa per sviluppare bene servizi web per la PA

@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

http://www.iwa.it

Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare bene servizi web per la pubblica amministrazione

Fabrizio Caccavello

Gli utenti molto spesso sono critici rispetto ai siti web della Pubblica Amministrazione. Eppure sviluppatori e amministratori pubblici hanno la sensazione di aver fatto tutto il possibile per rendere i loro progetti efficienti e “a misura del cittadino”. 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 10 punti attraverso la quale gli amministratori pubblici che commissionano i progetti e gli sviluppatori che li realizzano, potranno valutare la qualità complessiva di un progetto web, in modo che possa essere ridotta quella costante insoddisfazione che hanno, a ragione, gli utenti nei confronti della PA e dei progetti web che espongono sulla rete.

@cfabry #SMAU

Fabrizio Caccavello


@cfabry #SMAU

Utente, come ti trovi a navigare su questo sito

web?

Fabrizio Caccavello


@cfabry #SMAU

mah… più o meno…

Fabrizio Caccavello


@cfabry #SMAU

Qualità dei siti weboggi parliamo di

marciapiedi

Fabrizio Caccavello


@cfabry #SMAU

questo ambiente è molto familiare

e forse anche rassicurante

Fabrizio Caccavello


@cfabry #SMAU

Automobili ordinatamente

parcheggiate

Fabrizio Caccavello


@cfabry #SMAU

Pista ciclabile ai margini della

strada

Fabrizio Caccavello


@cfabry #SMAU

Un marciapiede protetto per le

persone

Fabrizio Caccavello


@cfabry #SMAU

Aiuole per gli alberi

Fabrizio Caccavello


@cfabry #SMAU

Marciapiedi con scivoli per agevolare il passaggio

eppure…

Fabrizio Caccavello


@cfabry #SMAU

Non sembra esistano strisce per i parcheggi

Fabrizio Caccavello


@cfabry #SMAU

La pista ciclabile è molto stretta

Fabrizio Caccavello


@cfabry #SMAU

La pista ciclabile ha delle buche

Fabrizio Caccavello


@cfabry #SMAU

La cunetta è accidentata e

sconnessa

Fabrizio Caccavello


@cfabry #SMAU

La segnaletica è sbiadita e incerta

Fabrizio Caccavello


@cfabry #SMAU

Sugli alberi si notano strani oggetti:

segnali o protezioni?

Fabrizio Caccavello


@cfabry #SMAU

Il marciapiede è molto stretto

Fabrizio Caccavello


@cfabry #SMAU

Si notano segni non identificabili

Fabrizio Caccavello


@cfabry #SMAU

È tutto un po’ così così, sia per il marciapiede che

per i siti web. Ma perché?

Fabrizio Caccavello


@cfabry #SMAU

COSA VEDREMO

Trasparenza

Accessibilità

Anticorruzione

Privacy

Open Data

1

2

3

4

5

6

9

10

7

8

User Experience

Responsive design

Layout

Tecnologia

Contenuti

Fabrizio Caccavello


@cfabry #SMAU

1 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/

Fabrizio Caccavello


@cfabry #SMAU

1 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/

Fabrizio Caccavello


@cfabry #SMAU

1 Accessibilità / normativa

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

Fabrizio Caccavello


@cfabry #SMAU

1 Accessibilità - Facciamo un esempio

immaginate che questo sia lo slideshow di un sito web

- ce ne sono tantissimi di questo tipo -

Fabrizio Caccavello


@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)


Fabrizio Caccavello


@cfabry #SMAU

La Web Accessibility Initiative (WAI)

Web Accessibility Perspectives explores the impact of accessibility for people with disabilities and the benefits for everyone.


Fabrizio Caccavello


@cfabry #SMAU

che cosa avete letto?che cosa avreste voluto fare?


Fabrizio Caccavello


@cfabry #SMAU

1chi può dire quanto tempo impiegherà un utente a leggere un testo?

10 secondi? 20 secondi? 1 minuto?

Accessibilità - Facciamo un esempio

Fabrizio Caccavello


@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


Fabrizio Caccavello


@cfabry #SMAU

1 Accessibilità / I PRINCIPI

Principio 1: percepibile le informazioni e i componenti dell'interfaccia utente devono essere presentati in modo che possano essere fruiti attraverso differenti canali sensoriali.

Principio 2: utilizzabile i componenti dell’interfaccia utente e i comandi in essa contenuti devono essere utilizzabili senza ingiustificati disagi o vincoli per l’utente.

Principio 3: comprensibile gli utenti devono poter comprendere le modalità di funzionamento dell’interfaccia e le azioni in essa contenute necessarie per ottenere servizi e informazioni.

Principio 4: robusto 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.

Requisiti tecnici di accessibilità e punti di controllo per la valutazione di conformitàhttp://www.w3.org/Translations/WCAG20-it/

Fabrizio Caccavello


@cfabry #SMAU

2 Trasparenza / Amministrazione Trasparente - normativa

LEGGE 6 novembre 2012, n. 190Disposizioni per la prevenzione e la repressione della corruzione e dell'illegalità nella pubblica amministrazione.

Riordino della disciplina riguardante gli obblighi di pubblicita', trasparenza e diffusione di informazioni da parte delle pubbliche amministrazioni.

DECRETO LEGISLATIVO 14 marzo 2013, n. 33

ATTENZIONE Dal 19 maggio 2016

NUOVO DECRETO TRASPARENZA

il cosiddetto Freedom of Information Act (FOIA)

Fabrizio Caccavello


@cfabry #SMAU

ma amministrazione trasparente significa esporre uno di questi loghi in homepage?


Fabrizio Caccavello


@cfabry #SMAU

oppure accendere le faccine verdi sulla bussola della trasparenza?http://www.magellanopa.it/bussola/


Fabrizio Caccavello


@cfabry #SMAU

invece avremmo dovuto:• verificare i contenuti • pubblicarli in modo accessibile • accertarci che l’interfaccia d’uso fosse accessibile • che la sezione fosse presente sul sito ufficiale • che la User Experience dell’utente fosse simile al

resto del sito web • che la ricerca delle informazioni fosse attiva anche

in questa area • …


Fabrizio Caccavello


@cfabry #SMAU

2 Trasparenza / Albo Pretorio - normativa

Disposizioni per lo sviluppo economico, la semplificazione, la competitività nonché in materia di processo civile

LEGGE 18 giugno 2009, n. 69 art. 32 comma 1

Fabrizio Caccavello


@cfabry #SMAU

2 Trasparenza / Albo Pretorio - normativaanche in questo caso avremmo dovuto:• verificare i contenuti • pubblicarli in modo accessibile • accertarci che l’interfaccia d’uso fosse accessibile • che la sezione fosse presente sul sito ufficiale • che la User Experience dell’utente fosse simile al

resto del sito web • che la ricerca delle informazioni fosse attiva anche

in questa area • …

Fabrizio Caccavello


@cfabry #SMAU

2 Trasparenza / Albo Pretorio - normativa

invece spesso con l’albo pretorio online abbiamo nascosto e complicato, invece di usare la tecnologia per semplificare, fornire trasparenza, migliorare il rapporto PA/utenti

Fabrizio Caccavello


@cfabry #SMAU

3 Anticorruzione / normativa

LEGGE 6 novembre 2012, n. 190Disposizioni per la prevenzione e la repressione della corruzione e dell'illegalità nella pubblica amministrazione.

Autorità Nazionale Anticorruzione (ANAC)http://www.anticorruzione.it/portal/public/classic/

Fabrizio Caccavello


@cfabry #SMAU

Entro il 30 gennaio invio all’ANAC del file XML

ecco cosa succede

Una grande quantità di file XML è errato. Probabilmente sono tutti errori formali ma dimostrano una scarsa attenzione a questi temi importanti

3 Anticorruzione / normativa

Fabrizio Caccavello


@cfabry #SMAU

4 Privacy

Informativahttp://www.garanteprivacy.it/privacy-e-internet

Non significa solo pubblicare un documento frutto di inconsapevole copia e incolla, ma riflettere sui temi della privacy di un progetto web

Fabrizio Caccavello


@cfabry #SMAU

http://garanteprivacy.it/cookieCookie

Come per l’informativa, riflettere su ciò che significa usare i cookie

4 Privacy

Fabrizio Caccavello


@cfabry #SMAU

5 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 possiamo riutilizzare per creare nuovi servizi sul progetto web?

Fabrizio Caccavello


@cfabry #SMAU

6 User Experience

Usabilità Accessibilità Personas Scenari

Fabrizio Caccavello


@cfabry #SMAU

Avete mai iniziato la progettazione iniziando a ragionare di Personas e Scenari?

6 User Experience

Fabrizio Caccavello


@cfabry #SMAU

7 Tecnologia

A chi state affidando i vostri contenuti e i

vostri dati?

Fabrizio Caccavello


@cfabry #SMAU

Solo un esempio: legittimo fornire servizi agli utenti usando risorse di tipo cloud, ma avete mai controllato, per esempio, se al termine di un contratto i vostri dati potranno essere recuperati e riutilizzati su altre piattaforme web o altri servizi cloud?

7 Tecnologia

Fabrizio Caccavello


@cfabry #SMAU

8 Contenuti / facciamoci un’idea

sito web

normativa

atti

turismo

utilities

Socialnews…

Fabrizio Caccavello


@cfabry #SMAU


sito webnormativa

atti

turismoutilities

Social

news

…

albo pretorio

ammin. trasparente

canali

aree separate

Fabrizio Caccavello


@cfabry #SMAU

accessibili

testi video audio

e strutturati


Fabrizio Caccavello


@cfabry #SMAU

9 Responsive design

Fabrizio Caccavello


@cfabry #SMAU

Mobile first?Siamo proprio sicuri che tutti i contenuti e i servizi devono essere ottimizzati per il mobile?

9 Responsive design

Fabrizio Caccavello


@cfabry #SMAU

Responsive design / non re-inventiamo la ruota

Foundation Bootstrap

i framework HTML - CSS - Javascript aiutano a creare applicazione web solide con funzionalità multi device già testate

9

Fabrizio Caccavello


@cfabry #SMAU

Layout10

è solo una conseguenza

dei ragionamenti fatti fino a qui

Fabrizio Caccavello


@cfabry #SMAU

progettazione web efficace

Contenuti

Tecnologia

Standard e normative

Design

UX di successo

Fabrizio Caccavello


@cfabry #SMAU

eppur si muovein Agenzia per l’Italia Digitale si sta cercando di mettere in piedi delle linee guida per il design dei siti della PA (versione alfa)

http://design.italia.it

Fabrizio Caccavello


@cfabry #SMAU

Chi farà tutto questo lavoro?

Fabrizio Caccavello


@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


@cfabry #SMAU

abbiamo parlato mai di aspetto grafico e di homepage?

riflessione finale

;)

Eppure quasi sempre ciò che si richiederà al fornitore sarà di vedere la demo della homepage. E questi 10 punti?

Fabrizio Caccavello


@cfabry #SMAU

Fabrizio Caccavello

@cfabry

[email protected]

Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare bene servizi web per la...

Internet

Transcript of Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare bene servizi web per la...