Strategie per applicazioni web prima o meglio dell'app nativa

Strategie per applicazioni web prima o meglio dell'app nativa

Fabrizio Caccavello@cfabry

Diego La Monica@jast#webapp

Strategie per applicazioni web: prima o meglio dell'app nativaIl 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!

Hello World!

Fabrizio Caccavello

Digital Strategic Planner

mail: [email protected]

web: http://www.fabriziocaccavello.it

twitter: @cfabry

skype: cfabry

mobile: +39 347 4922476

Diego La Monica

Web Solution Developer


web: http://diegolamonica.info

twitter: @jast

skype: diego.la.monica

mobile: +39 333 7235 382

mailto:[email protected]

http://www.fabriziocaccavello.it


http://diegolamonica.info




International Webmasters Association● Prima associazione al mondo che raggruppa chi

lavora nel Web

● Obiettivo di IWA: creare rete tra soci, partecipare

all'evoluzione del Web, divulgare conoscenza

tramite soci con eventi ed iniziative

● Associazione professionale rappresentanza delle

professionalità Web

● unica Associazione del settore ICT attualmente

censita dal Ministero dello Sviluppo Economico




International Webmasters Association● 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




International Webmasters Association● 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

http://www.iwa.it/join/






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




Corpo immerso in un liquido

1. Il corpo tende a cadere fino a raggiungere il fondo se la

forza di Archimede è minore del peso.

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.

Principio di Archimede




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.




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.




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.




Da sapere per creare una WebApp

● User Experience (UX)

● Responsive Web Design (RWD)

● Mobile Centric Design




Quante novità!!!

E se qualcuno affermasse che le “best practice” erano

già previste dal DM 8/7/2005 All. A?




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

http://www.mitchell.com/company/user-experience.asp






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)

User Experience - Worst Practice




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




Responsive Web Design (RWD)Il controllo che i designer possono

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




Responsive Web Design - Worst Practice1. Tanto con lo zoom si vede tutto

2. Immagini di dimensione fissa

3. Tutto è importante e necessario

4. Responsive non è solo pensare al mobile




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




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




Mobile Centric Design - Worst Practice

1. Gestire interazioni sull’hover

2. Emulare comportamenti nativi del device (es.

scrolling)

3. Emulare i controlli nativi del device

4. Implementare funzioni già previste dai browser o

comunque collocarle in posti errati




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

sempre.




Ma perchè mi serve?

● La navigazione da dispositivi mobili è in costante ed

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




Ma come posso realizzare una WebApp?

● Acquisendo le necessarie competenze

● Rivolgendosi a professionisti che hanno già le

competenze necessarie

● Rivolgendoti a noi! :-)

Grazie

Fabrizio Caccavello

Digital Strategic Planner


web: http://www.fabriziocaccavello.it

twitter: @cfabry

skype: cfabry

mobile: +39 347 4922476

Diego La Monica

Web Solution Developer


web: http://diegolamonica.info

twitter: @jast

skype: diego.la.monica

mobile: +39 333 7235 382


http://www.fabriziocaccavello.it


http://diegolamonica.info

Strategie per applicazioni web prima o meglio dell'app nativa

Software

Transcript of Strategie per applicazioni web prima o meglio dell'app nativa