Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sviluppo di applicazioni
web in ambito mobile
Roberto Cappelletti
CTO at Elfo s.r.l.
roberto.cappelletti@elfo.net - @rcapp...
23/04/2015Web App
2
Cosa utilizziamo per navigare in Internet?
In che modo possiamo realizzare app?
App Native
• Distribuite
tramite gli store
• Pieno accesso
all’hw
• Sviluppate con i
...
Web App
Vantaggi
• Stesso linguaggio
HTML/Js/Css per tutte le
piattaforme
• Fruibili anche da tutti i web
browser desktop
...
Un esempio … Facebook
23/04/2015Web App
5
Quali sono i vincoli nella progettazione ?
Spazio
• Riorganizzare i
contenuti
• Nascondere il
superfluo
Tempo
• Tempi di
c...
Responsive Design
23/04/2015Web App
7
http://www.mimoymima.com/wp-content/uploads/2012/06/illustrator-responsive-template_...
Responsive Design - OneDrive
23/04/2015Web App
8
Single Page Application
Life Cycle Tradizionale Life Cycle SPA
23/04/2015Web App
9
Client Server
Richiesta Iniziale
HTML
A...
Single Page Application - GMail
23/04/2015Web App
10
Api Html 5
• Storage
• Media
• Network
• Input
– Numerico
– Mail
– Data
– Validazione
– Obbligatorietà
23/04/2015Web App
11
Come partire a sviluppare una applicazione
Dobbiamo affidarci a componenti già pronti che ci
aiutano a velocizzare lo svil...
Angular Js
• Framework per creare SPA
• Gestito da Google
• Le caratteristiche principali
sono:
– Ci consente di struttura...
Kendo UI
23/04/2015Web App
14
• Un toolkit per
realizzare
applicazioni Html
• Mette a disposizione
dei controlli
ottimizza...
Recap
Oggi abbiamo visto:
• Importanza che lo sviluppo mobile sta acquisendo
• Modalità che abbiamo per sviluppare App
• I...
Grazie
roberto.cappelletti@elfo.net
@rcappe
http://www.robertocappelletti.com
23/04/2015Web App
16
Upcoming SlideShare
Loading in …5
×

Sviluppo di applicazioni web in ambito mobile

521 views

Published on

Sviluppo di applicazioni web in ambito mobile

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Sviluppo di applicazioni web in ambito mobile

  1. 1. Sviluppo di applicazioni web in ambito mobile Roberto Cappelletti CTO at Elfo s.r.l. roberto.cappelletti@elfo.net - @rcappe http://www.robertocappelletti.com
  2. 2. 23/04/2015Web App 2 Cosa utilizziamo per navigare in Internet?
  3. 3. In che modo possiamo realizzare app? App Native • Distribuite tramite gli store • Pieno accesso all’hw • Sviluppate con i linguaggi dei vari SO App Ibride • Distribuite tramite gli store • Parziale accesso all’hw • Sviluppate con HTML CSS JS e un SDK che le impacchetta 23/04/2015Web App 3 Web App • Distribuite come un sito web • Non hanno accesso all’hw • Sviluppate con HTML CSS JS
  4. 4. Web App Vantaggi • Stesso linguaggio HTML/Js/Css per tutte le piattaforme • Fruibili anche da tutti i web browser desktop • Costi di sviluppo inferiori • Facilità di Distribuzione Svantaggi • Non possono essere pubblicate negli Store • Non possono interagire con l'hardware del device • Necessitano di connettività 23/04/2015Web App 4
  5. 5. Un esempio … Facebook 23/04/2015Web App 5
  6. 6. Quali sono i vincoli nella progettazione ? Spazio • Riorganizzare i contenuti • Nascondere il superfluo Tempo • Tempi di caricamento • Navigazione lineare 23/04/2015Web App 6 Contesto • Tipo di input (dita, voce) • Gestures • Contenuti dipendenti dal contesto
  7. 7. Responsive Design 23/04/2015Web App 7 http://www.mimoymima.com/wp-content/uploads/2012/06/illustrator-responsive-template_03.jpg
  8. 8. Responsive Design - OneDrive 23/04/2015Web App 8
  9. 9. Single Page Application Life Cycle Tradizionale Life Cycle SPA 23/04/2015Web App 9 Client Server Richiesta Iniziale HTML AJAX JSON Client Server Richiesta Iniziale HTML POST GET HTML
  10. 10. Single Page Application - GMail 23/04/2015Web App 10
  11. 11. Api Html 5 • Storage • Media • Network • Input – Numerico – Mail – Data – Validazione – Obbligatorietà 23/04/2015Web App 11
  12. 12. Come partire a sviluppare una applicazione Dobbiamo affidarci a componenti già pronti che ci aiutano a velocizzare lo sviluppo. Esistono moltissimi framework, toolkit, librerie e widget a volte non è semplice decidere quale utilizzare. 23/04/2015Titolo Meeting 12
  13. 13. Angular Js • Framework per creare SPA • Gestito da Google • Le caratteristiche principali sono: – Ci consente di strutturare l’applicazione – Dividere le responsabilità Pattern: MvvM View Html - Css ViewModel JavaScript Model Json 23/04/2015Web App 13
  14. 14. Kendo UI 23/04/2015Web App 14 • Un toolkit per realizzare applicazioni Html • Mette a disposizione dei controlli ottimizzati per i dispositivi mobili • Si integra con Angular Js
  15. 15. Recap Oggi abbiamo visto: • Importanza che lo sviluppo mobile sta acquisendo • Modalità che abbiamo per sviluppare App • I vincoli e le caratteristiche della progettazione di Web App • Esplorato i concetti di Responsive Design, SPA, HTML5 • Dove possiamo partire per sviluppare una Web App 23/04/2015Titolo Meeting 15
  16. 16. Grazie roberto.cappelletti@elfo.net @rcappe http://www.robertocappelletti.com 23/04/2015Web App 16

×