Il principio di Archimede afferma che ogni corpo immerso [...] in un fluido riceve una spinta verticale dal basso verso l'alto, uguale per intensità al peso del fluido che occupa nel volume spostato. Durante questo seminario sono stati analizzati i passaggi fondamentali per affiancare ad un comunissimo sito web, una Web App, evidenziando le criticità e coniugando le giuste regole di User Experience, Responsive Web Design e Mobile Centric Design.

1. Strategie per applicazioni web
prima o meglio dell'app nativa
Strategie per applicazioni
web: prima o meglio dell'app
nativa
Il principio di Archimede afferma che ogni corpo immerso [...] in un fluido riceve
una spinta verticale dal basso verso l'alto, uguale per intensità al peso del fluido
che occupa nel volume spostato.
Durante questo seminario analizzeremo i passaggi fondamentali per affiancare ad
un comunissimo sito web, una Web App, evidenziando le criticità e coniugando le
giuste regole di User Experience, Responsive Web Design e Mobile Centric
Design, e fornendo la giusta spinta al nostro progetto potremo in fine esclamare
Eureka!
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

2. Hello World!
Fabrizio Caccavello
Digital Strategic Planner
mail: fabrizio.caccavello@akebia.it
web: http://www.fabriziocaccavello.it
twitter: @cfabry
skype: cfabry
mobile: +39 347 4922476
Diego La Monica
Web Solution Developer
mail: diego.lamonica@gmail.com
web: http://diegolamonica.info
twitter: @jast
skype: diego.la.monica
mobile: +39 333 7235 382

3. Strategie per applicazioni web
prima o meglio dell'app nativa
International Webmasters Association
Fabrizio Caccavello
@cfabry
● Prima associazione al mondo che raggruppa chi
● Obiettivo di IWA: creare rete tra soci, partecipare
all'evoluzione del Web, divulgare conoscenza
tramite soci con eventi ed iniziative
● Associazione professionale rappresentanza delle
● unica Associazione del settore ICT attualmente
censita dal Ministero dello Sviluppo Economico
Diego La Monica
lavora nel Web
professionalità Web
@jast #webapp

4. Strategie per applicazioni web
prima o meglio dell'app nativa
International Webmasters Association
Fabrizio Caccavello
@cfabry
● Associazione Professionale che raggruppa i
soggetti che - ai sensi della legge 4/2013, sono
definibili come "professionisti Web"
● Ha rilasciato i primi profili professionali (G3 Web
Skill Profiles) in linea con i dettami dell'agenda
digitale europea e italiana ed ha avviato accordi di
collaborazione con realtà di tutela del lavoro
(sindacati) e di domanda/offerta di lavoro: ancora
una volta il ruolo di IWA è quello di unire, far
collaborare e tutelare chi opera nel Web
Diego La Monica
@jast #webapp

5. Strategie per applicazioni web
prima o meglio dell'app nativa
International Webmasters Association
Fabrizio Caccavello
@cfabry
● Potrai ottenere uno sconto sulla quota associativa*
che pagherai euro 50,00 anziché euro 65,00. Lo
sconto vale sia per i nuovi soci che per i rinnovi. http:
//www.iwa.it/join/
● Per usufruire dello sconto usa in fase di
registrazione o rinnovo il seguente codice
promozionale:
SMAUMILANO2014
* valido sono nel periodo fieristico
Diego La Monica
@jast #webapp

6. Strategie per applicazioni web
prima o meglio dell'app nativa
Che cos’è una WebApp?
Un’applicazione eseguita in un browser basata sulle
stesse tecnologie (HTML5, CSS, JavaScript) utilizzate
per la produzione di Siti Web e che ha comportamenti
tipicamente presenti nelle applicazioni native
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

7. Strategie per applicazioni web
prima o meglio dell'app nativa
Corpo immerso in un liquido
1. Il corpo tende a cadere fino a raggiungere il fondo se la
forza di Archimede è minore del peso.
Principio di Archimede
2. Il corpo tende a risalire fino alla superficie dove
galleggia se la forza di Archimede è maggiore del peso.
3. Il corpo si trova in una situazione di equilibrio se la forza
di Archimede è uguale al peso.
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

8. Strategie per applicazioni web
prima o meglio dell'app nativa
Relazione tra WebApp e SitoWeb
1. Il corpo tende a cadere fino a raggiungere il fondo
se la forza di Archimede è minore del peso.
1. Il sito Web tende a perdere utenti se le sue
funzionalità sono minori per qualità o quantità
rispetto alla WebApp, che invece ne guadagna...
forse.
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

9. Strategie per applicazioni web
prima o meglio dell'app nativa
Relazione tra WebApp e SitoWeb
2. Il corpo tende a risalire fino alla superficie dove
galleggia se la forza di Archimede è maggiore del
peso.
2. Il sito Web tende a consolidare il suo bacino di
utenza se le sue funzionalità sono maggiori per
qualità e quantità rispetto alla WebApp che invece
non raggiunge una ipotetica massa critica.
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

10. Strategie per applicazioni web
prima o meglio dell'app nativa
Corpo immerso in un liquido
3. Il corpo si trova in una situazione di equilibrio se la
forza di Archimede è uguale al peso.
3. Esiste una situazione di equilibrio se le funzioni del
sito Web e le funzioni della WebApp sono
sinergiche e complementari.
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

11. Strategie per applicazioni web
prima o meglio dell'app nativa
Da sapere per creare una WebApp
● User Experience (UX)
● Responsive Web Design (RWD)
● Mobile Centric Design
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

12. Strategie per applicazioni web
prima o meglio dell'app nativa
Quante novità!!!
E se qualcuno affermasse che le “best practice” erano
già previste dal DM 8/7/2005 All. A?
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

13. Strategie per applicazioni web
prima o meglio dell'app nativa
Fabrizio Caccavello
@cfabry
User Experience (UX)
Analizza i comportamenti,
le attitudini e le emozioni
che una persona dimostra
e percepisce nell’utilizzo di
un particolare prodotto,
sistema o servizio
Diego La Monica
@jast #webapp
http://www.mitchell.com/company/user-experience.asp

14. Strategie per applicazioni web
prima o meglio dell'app nativa
User Experience - Worst Practice
1. Usare una finestra di benvenuto
2. Aprire i link esterni in nuove finestre
3. Inserire le keyword nel titolo
4. Scrivere la “Divina Commedia”
5. Usare dei font a dimensione fissa (px)
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

15. Strategie per applicazioni web
prima o meglio dell'app nativa
User Experience - Best Practice
1. Dare una risposta significativa a qualsiasi ricerca,
anche se sbagliata… la ricerca.
2. Organizzare la profondità di navigazione
3. Pianificare gli spazi
4. Colori e formattazioni hanno il loro significato
5. Ogni gesture ha il suo scopo
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

16. Strategie per applicazioni web
prima o meglio dell'app nativa
Responsive Web Design (RWD)
Il controllo che i designer possono
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp
esercitare nella stampa, e che
spesso desiderano anche nel web,
è semplicemente una funzione dei
limiti della pagina stampata.
Dovremmo accettare l'idea che il
web non ha gli stessi limiti e
pertanto progettare avendo in
mente la sua flessibilità. Ma prima
di tutto, dobbiamo accettare il
flusso ed il riflusso delle cose.
i progetti web si adattano
automaticamente al dispositivo
cit. John Allsopp April 07, 2000

17. Strategie per applicazioni web
prima o meglio dell'app nativa
Responsive Web Design - Worst
Practice
1. Tanto con lo zoom si vede tutto
2. Immagini di dimensione fissa
3. Tutto è importante e necessario
4. Responsive non è solo pensare al mobile
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

18. Strategie per applicazioni web
prima o meglio dell'app nativa
Responsive Web Design - Best
Practice
1. Utilizzare i c.d. “Grid Layout”
2. Bloccare il pinch-to-zoom sui device
3. Razionalizzare i contenuti
4. Testare a più risoluzioni
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

19. Strategie per applicazioni web
prima o meglio dell'app nativa
Mobile Centric Design
1. Le interazioni previste per i siti web non valgono
(sempre) per i dispositivi mobili
2. Precisione di puntamento non accurata
3. Risoluzioni elevate in uno spazio ridotto
4. Visualizzazione in portrait e landscape
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

20. Strategie per applicazioni web
prima o meglio dell'app nativa
Mobile Centric Design - Worst Practice
1. Gestire interazioni sull’hover
2. Emulare comportamenti nativi del device (es.
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp
scrolling)
3. Emulare i controlli nativi del device
4. Implementare funzioni già previste dai browser o
comunque collocarle in posti errati

21. Strategie per applicazioni web
prima o meglio dell'app nativa
Mobile Centric Design - Best Practice
1. Ogni gesture ha il suo scopo
2. Always connected è una chimera
3. Feature detection
4. Usare framework pensati per il mobile… ma non
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp
sempre.

22. Strategie per applicazioni web
prima o meglio dell'app nativa
Ma perchè mi serve?
● La navigazione da dispositivi mobili è in costante ed
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp
esponenziale crescita
● Il Sito Web richiede la volontà dell’utente ad accedere al
sito
● Con un’icona nella home del proprio device l’utente è
invogliato ad usarla
● Per la fidelizzazione dei propri clienti

23. Strategie per applicazioni web
prima o meglio dell'app nativa
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

24. Strategie per applicazioni web
prima o meglio dell'app nativa
Ma come posso realizzare una
WebApp?
● Acquisendo le necessarie competenze
● Rivolgendosi a professionisti che hanno già le
competenze necessarie
● Rivolgendoti a noi! :-)
Fabrizio Caccavello
@cfabry
Diego La Monica
@jast #webapp

25. Grazie
Fabrizio Caccavello
Digital Strategic Planner
mail: fabrizio.caccavello@akebia.it
web: http://www.fabriziocaccavello.it
twitter: @cfabry
skype: cfabry
mobile: +39 347 4922476
Diego La Monica
Web Solution Developer
mail: diego.lamonica@gmail.com
web: http://diegolamonica.info
twitter: @jast
skype: diego.la.monica
mobile: +39 333 7235 382