I 5 ragionamenti da fare per creare un sito internet professionale - SMAU Firenze 2016

5 ragionamenti da fare per creare un sito internet professionale

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

http://www.iwa.it

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


@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

ci piace credere alle

favole!

SE ROTTAMI IL TUO VECCHIO SITO il tuo nuovo sito

internet professionale a

300€

Fabrizio Caccavello


@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


@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


@cfabry #SMAU

Ma chi sono questi professionisti?

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

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


@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


@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


@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


@cfabry #SMAU

Accessibilità / I PRINCIPI

1: percepibile

2: utilizzabile

3: comprensibile

4: robusto

http://www.w3.org/Translations/WCAG20-it/

1

Fabrizio Caccavello


@cfabry #SMAU


1: percepibile


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


@cfabry #SMAU


2: utilizzabile


1

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



Fabrizio Caccavello


@cfabry #SMAU


3: comprensibile


1

gli utenti devono poter comprendere le modalità di funzionamento dell’interfaccia e le azioni in essa contenute, necessarie per ottenere servizi e informazioni



Fabrizio Caccavello


@cfabry #SMAU


4: robusto


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



Fabrizio Caccavello


@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


@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


@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

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

10 secondi? 20 secondi? 1 minuto?


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

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


@cfabry #SMAU

User Experience

Usabilità Accessibilità Personas Scenari

2

Fabrizio Caccavello


@cfabry #SMAU

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

User Experience2

Fabrizio Caccavello


@cfabry #SMAU

A chi state affidando i vostri

contenuti e i vostri dati?

3 Tecnologia

Mike Wasosky

Fabrizio Caccavello


@cfabry #SMAU

Tecnologia3A chi state affidando i vostri

contenuti e i vostri dati?

hardware software

Fabrizio Caccavello


@cfabry #SMAU

Contenuti / facciamoci un’idea

sito web

normativa

atti

turismo

utilities

Socialnews…

4

Fabrizio Caccavello


@cfabry #SMAU

sito webnormativa

atti

turismoutilities

Social

news

…

albo pretorio

ammin. trasparente

canali

aree separate

Contenuti / facciamoci un’idea4

Fabrizio Caccavello


@cfabry #SMAU

accessibili

testi video audio

e strutturati

Contenuti / facciamoci un’idea4

Fabrizio Caccavello


@cfabry #SMAU

Dati4quali azioni si devono fare?

• raccogliere • trattare • archiviare • …

con quale• sicurezza • normativa • efficienza • …

Fabrizio Caccavello


@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


@cfabry #SMAU

Responsive design5

Fabrizio Caccavello


@cfabry #SMAU

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

Responsive design5

Fabrizio Caccavello


@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


@cfabry #SMAU

/ Layout

è solo una conseguenza

dei ragionamenti fatti fino a qui

Responsive design5

Fabrizio Caccavello


@cfabry #SMAU

progettazione web efficace

ContenutiDati

Tecnologia

Standard,normative (accessibilità)

Design

UX di successo

Fabrizio Caccavello


@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

http://tinyurl.com/hzldjed

Fabrizio Caccavello


@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


@cfabry #SMAU

Fabrizio Caccavello

@cfabry

[email protected]

I 5 ragionamenti da fare per creare un sito internet professionale - SMAU Firenze 2016

Education

Transcript of I 5 ragionamenti da fare per creare un sito internet professionale - SMAU Firenze 2016