La navigazione in internet ha subito negli ultimi anni un cambiamento radicale. Gli utenti da statici utilizzatori di computer desktop si sono trasformati in soggetti in movimento. Nelle comunità l’accesso a internet è diventato una consuetudine per accedere a contenuti e servizi, facilitato dalla massiccia presenza di smartphone carichi di applicazioni. Talvolta si tende però ad affidare all’applicazione un ruolo dominante, come se la creazione di un’app fosse di per sé una strategia. Viviamo in un mondo di iper-informazione e iper-connettività, ma lo sviluppo disorganizzato di contenuti e applicazioni ancora rende difficili azioni elementari, soprattutto se fatte da mobile, come la consultazione di un numero di telefono o la ricerca dell’orario di un autobus, azioni che possono sembrare facili ma che invece non lo sono. In questo contesto HTML5, il nuovo linguaggio di scripting che prossimamente diventerà uno standard, permette di sviluppare applicazioni web e progetti di web design responsive che gli utenti possono usare senza dover scaricare un’applicazione, offrendo spesso gli stessi servizi. Quello che cambia non è soltanto l’uso della tecnologia, ma l’approccio alla creazione del contenuto, che diventa strategico.

1. HTML5/CSS3 e webapp
nelle strategie di territorio
La navigazione in internet ha subito negli ultimi anni un cambiamento radicale. Gli utenti da statici utilizzatori di computer desktop
si sono trasformati in soggetti in movimento. Nelle comunità l’accesso a internet è diventato una consuetudine per accedere a
contenuti e servizi, facilitato dalla massiccia presenza di smartphone carichi di applicazioni. Talvolta si tende però ad affidare
all’applicazione un ruolo dominante, come se la creazione di un’app fosse di per sé una strategia.
Viviamo in un mondo di iper-informazione e iper-connettività, ma lo sviluppo disorganizzato di contenuti e applicazioni ancora
rende difficili azioni elementari, soprattutto se fatte da mobile, come la consultazione di un numero di telefono o la ricerca
dell’orario di un autobus, azioni che possono sembrare facili ma che invece non lo sono.
In questo contesto HTML5, il nuovo linguaggio di scripting che prossimamente diventerà uno standard, permette di sviluppare
applicazioni web e progetti di web design responsive che gli utenti possono usare senza dover scaricare un’applicazione,
offrendo spesso gli stessi servizi. Quello che cambia non è soltanto l’uso della tecnologia, ma l’approccio alla creazione del
contenuto, che diventa strategico.
Fabrizio Caccavello
cfabry
Bologna, 17 ottobre 2013
sabato 26 ottobre 13

2. About me: Fabrizio Caccavello
Web Project Manager e User Experience Designer.
Mi occupo di strategie di comunicazione online, e di sviluppo di applicazioni
web con particolare riferimento ai temi dell'accessibilità.
Cerco di applicare ai miei progetti processi di semplificazione e riduzione in
modo da renderli più efficienti e semplici.
Sono amministratore e fondatore di Akebia
società di servizi per il web.
Sono membro del Consiglio Direttivo di IWA Italy.
sabato 26 ottobre 13

3. HTML5/CSS3 e webapp
nelle strategie di territorio
La navigazione in internet ha subito negli ultimi anni un cambiamento radicale. Gli utenti da statici utilizzatori di computer desktop
si sono trasformati in soggetti in movimento. Nelle comunità l’accesso a internet è diventato una consuetudine per accedere a
contenuti e servizi, facilitato dalla massiccia presenza di smartphone carichi di applicazioni. Talvolta si tende però ad affidare
all’applicazione un ruolo dominante, come se la creazione di un’app fosse di per sé una strategia.
Viviamo in un mondo di iper-informazione e iper-connettività, ma lo sviluppo disorganizzato di contenuti e applicazioni ancora
rende difficili azioni elementari, soprattutto se fatte da mobile, come la consultazione di un numero di telefono o la ricerca
dell’orario di un autobus, azioni che possono sembrare facili ma che invece non lo sono.
In questo contesto HTML5, il nuovo linguaggio di scripting che prossimamente diventerà uno standard, permette di sviluppare
applicazioni web e progetti di web design responsive che gli utenti possono usare senza dover scaricare un’applicazione,
offrendo spesso gli stessi servizi. Quello che cambia non è soltanto l’uso della tecnologia, ma l’approccio alla creazione del
contenuto, che diventa strategico.
Fabrizio Caccavello
cfabry
Bologna, 17 ottobre 2013
sabato 26 ottobre 13

4. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
DESKTOP VS MOBILE
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

5. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
qualcosa sta
cambiando
questa immagine è stata
molto codivisa in rete
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

6. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

7. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
SITO INTERNET
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

8. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
SITO INTERNET
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
APPLICAZIONE

9. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
SITO INTERNET
RESPONSIVE
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
APPLICAZIONE

10. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
SITO INTERNET
RESPONSIVE
Fabrizio Caccavello
sabato 26 ottobre 13
APPLICAZIONE
WEBAPP
cfabry
NATIVA

11. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
« Nulla si crea, nulla si distrugge, tutto si trasforma »
(Antoine Lavoisier)
È un progetto web che si
adatta automaticamente al
dispositivo che lo sta
visualizzando
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

12. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE WEB DESIGN
« Nulla si crea, nulla si distrugge, tutto si trasforma »
(Antoine Lavoisier)
È un progetto web che si
adatta automaticamente al
dispositivo che lo sta
visualizzando
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

13. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
mobile
desktop
tablet
adattamento in base al dispositivo
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

14. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE WEB DESIGN
mobile
desktop
tablet
adattamento in base al dispositivo
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

15. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
pensare prima al contenuto
il design deve adattarsi in progressione
MOBILE
sabato 26 ottobre 13
DESKTOP
SMALL TABLET
Fabrizio Caccavello
TABLET
BIG DESKTOP
cfabry

16. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE WEB DESIGN
MOBILE FIRST
MOBILE
pensare prima al contenuto
il design deve adattarsi in progressione
sabato 26 ottobre 13
DESKTOP
SMALL TABLET
Fabrizio Caccavello
TABLET
BIG DESKTOP
cfabry

17. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
Aggiungere un sito internet sul
proprio home screen
comparirà come un’app nativa
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

18. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE WEB DESIGN
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
Aggiungere un sito internet sul
proprio home screen
comparirà come un’app nativa

19. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
Possiamo aggiungere un
elemento (in javascript) che inviti
l’utente a utilizzare la funzione
“aggiungi a Home”
http://cubiq.org/add-to-home-screen
(quasi) una webapp
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

20. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE WEB DESIGN
Possiamo aggiungere un
elemento (in javascript) che inviti
l’utente a utilizzare la funzione
“aggiungi a Home”
http://cubiq.org/add-to-home-screen
(quasi) una webapp
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

21. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
SITO INTERNET
RESPONSIVE
Fabrizio Caccavello
sabato 26 ottobre 13
WEBAPP
cfabry

22. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
il nuovo linguaggio con
cui si costruiscono le
pagine web
non è ancora uno standard del
W3C (lo diventerà
presumibilmente nel 2014) ma
ne viene ugualmente
consigliata l’utilizzazione
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

23. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
WEBAPP
il nuovo linguaggio con
cui si costruiscono le
pagine web
non è ancora uno standard del
W3C (lo diventerà
presumibilmente nel 2014) ma
ne viene ugualmente
consigliata l’utilizzazione
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

24. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
Attraverso HTML5
e i fogli di stile
CSS3 si possono
creare progetti web
che rassomigliano
ad applicazioni
native
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

25. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
WEBAPP
Attraverso HTML5
e i fogli di stile
CSS3 si possono
creare progetti web
che rassomigliano
ad applicazioni
native
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

26. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
principali caratteristiche per le app mobile
Accesso alla fotocamera
Accesso al filesystem
Geolocalizzazione
Memorizzazione dati offline
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

27. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
APP NATIVA
WEBAPP
Objective C (per Apple)
Java (per Android)
HTML + CSS + JAVASCRIPT
Attraverso un’applicazione tipo PhoneGap è possibile
trasformare una web app in una app nativa
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

28. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
i confini tecnologici e strategici possono essere poco netti
RESPONSIVE
web design
APPLICAZIONE
WEB
stesso linguaggio
HTML CSS Javascript
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
APPLICAZIONE
NATIVA

29. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
i confini tecnologici e strategici possono essere poco netti
RESPONSIVE
web design
APPLICAZIONE
WEB
stesso linguaggio
HTML CSS Javascript
differenze?
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
APPLICAZIONE
NATIVA

30. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE
web design
APPLICAZIONE
WEB
stesso linguaggio
HTML CSS Javascript
differenze?
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

31. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE
web design
APPLICAZIONE
WEB
stesso linguaggio
HTML CSS Javascript
differenze?
tecnologia, user experience, contenuti
STRATEGIA
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

32. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
RESPONSIVE
web design
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
APPLICAZIONE
WEB

33. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA
RESPONSIVE
web design
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry
APPLICAZIONE
WEB

34. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

35. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
RESPONSIVE
web design
Fabrizio Caccavello
sabato 26 ottobre 13
APPLICAZIONE
WEB
cfabry
APPLICAZIONE
NATIVA

36. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
RESPONSIVE
web design
APPLICAZIONE
WEB
APPLICAZIONE
NATIVA
dove trovo queste app?
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

37. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
APPLICAZIONE
NATIVA
l’utente è in grado di scaricare e/o acquistare
un’app nativa dallo store mentre è in mobilità?
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

38. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
APPLICAZIONE
NATIVA
l’utente è in grado di scaricare e/o acquistare
un’app nativa dallo store mentre è in mobilità?
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

39. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
progetti web responsive e webapp si trovano
semplicemente online: http://www.miosito/it
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

40. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
STRATEGIA E TERRITORIO
RESPONSIVE
web design
APPLICAZIONE
WEB
progetti web responsive e webapp si trovano
semplicemente online: http://www.miosito/it
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

41. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
QR Code
posso favorire l’accesso alla
webapp attraverso un QR code
l’utente non dovrà neanche digitare
l’indirizzo web
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

42. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
geolocalizzando l’accesso si
possono fornire informazioni
su orari, traffico, servizi nei
dintorni, ecc.
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

43. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

44. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
148 pagine in PDF sono difficilente
consultabili su mobile
è evidente che l’idea progettuale non è fornire
questi dati a un utente in movimento
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

45. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
L’obiettivo è la tecnologia?
L’obiettivo è il
contenuto o il servizio
Fabrizio Caccavello
sabato 26 ottobre 13
cfabry

46. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
IL NUOVO PROGETTO
SITO INTERNET
RESPONSIVE
Fabrizio Caccavello
sabato 26 ottobre 13
APPLICAZIONE
WEBAPP
cfabry
NATIVA

47. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
•
pensare prima al contenuto e al
servizio
•
un progetto web responsive è già
una buona strategia
•
una webapp ottimizzata può
essere poi trasformata in una app
nativa
•
pensare in questo modo strategico
può aiutare a ridurre i costi e ad
avere servizi migliori
•
gli utenti devono essere facilitati
nell’uso delle tecnologie
IL NUOVO PROGETTO
SITO INTERNET
RESPONSIVE
APPLICAZIONE
WEBAPP
Fabrizio Caccavello
sabato 26 ottobre 13
NATIVA
cfabry

48. HTML5/CSS3 e webapp nelle strategie di territorio
Bologna, 17 ottobre 2013
Fabrizio Caccavello
cfabry
http://www.fabriziocaccavello.akebia.it
fabrizio@akebia.it
sabato 26 ottobre 13