ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Sviluppo di applicazioni web in ambito mobile

•Download as PPTX, PDF•
•
Roberto Cappelletti
Roberto Cappelletti

Sviluppo di applicazioni web in ambito mobile

1 of 16
Downloaded 12 times
Sviluppo di applicazioni web in ambito mobile Roberto Cappelletti CTO at Elfo s.r.l. roberto.cappelletti@elfo.net - @rcappe http://www.robertocappelletti.com
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 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
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
Un esempio … Facebook 23/04/2015Web App 5
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
Responsive Design 23/04/2015Web App 7 http://www.mimoymima.com/wp-content/uploads/2012/06/illustrator-responsive-template_03.jpg
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 AJAX JSON Client Server Richiesta Iniziale HTML POST GET HTML
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 sviluppo. Esistono moltissimi framework, toolkit, librerie e widget a volte non è semplice decidere quale utilizzare. 23/04/2015Titolo Meeting 12
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
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
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
Grazie roberto.cappelletti@elfo.net @rcappe http://www.robertocappelletti.com 23/04/2015Web App 16

More Related Content

Sviluppo di applicazioni web in ambito mobile

  • 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. 23/04/2015Web App 2 Cosa utilizziamo per navigare in Internet?
  • 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. 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. Un esempio … Facebook 23/04/2015Web App 5
  • 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
  • 8. Responsive Design - OneDrive 23/04/2015Web App 8
  • 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. Single Page Application - GMail 23/04/2015Web App 10
  • 11. Api Html 5 • Storage • Media • Network • Input – Numerico – Mail – Data – Validazione – Obbligatorietà 23/04/2015Web App 11
  • 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. 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. 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. 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

Editor's Notes

  1. Contesto Interazioni Swipe Tap
  2. Colonna singola