Your SlideShare is downloading. ×
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Smau milano 2012   arena social media massimo-grava
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Smau milano 2012 arena social media massimo-grava

289

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
289
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 + PhoneGap un esempio concreto Massimo Grava gravam@futurasi.com
  • 2. Requisiti Unico3 Mobile è una app per i tecnici dellamanutenzione impianti termici che deve essere✔ Disponibile su Android e iOS✔ Editing di moduli complessi✔ Stampa in più formati (A4, rotolo 4 in.)✔ Funzionamento offline✔ Time-To-Market limitato (4-10 mesi)✔ Risorse limitate (1.5 anni/uomo)
  • 3. LO SVILUPPO HTML5 IN TEORIA
  • 4. Architettura Unico3 Mobile UI (HTML5, CSS3, ST2 Components) Business Logic Libraries Phonegap.js (JS) (Sencha Touch 2) Browser LocalAJAX calls Storage (webview) Native Code Phonegap (Java, Objective C) plugins Phone OS (iOS, Android)
  • 5. Le librerie di interfaccia Libraries (Sencha Touch 2)Forniscono componenti UI✔ elaborati, gradevoli e touch-friendly✔ relativamente facili da programmare✔ facilmente temizzabile✔ aspetto e funzionamento uniforme
  • 6. QUELLO CHE È STATO IN REALTÀ
  • 7. Performance UIProblema: le performances di rendering HTML non sono uguali in tutte le piattaforme. Performance browser Android molto inferiori rispetto a browser iOS. Problema principale fluidità scroll touch.
  • 8. Le librerie UI nonostante l’ottimizzazione generano un html piuttosto pesante!(diversi livelli di <div> nesting, uso funzioni CSS3 per ombre, …) Spesso questo mette in crisi Android, specialmente per form complessi. Le performance di scrolling talvolta sono ridotte sotto i limiti dell’usabilità.
  • 9. Esemplare di formcomplesso in cattività
  • 10. Performance UISoluzione (nostra):✔ Eliminare dove possibile uso di immagini disfondo, trasparenze, ombre e angoli arrotondatiCSS3.✔ Riscrivere le parti più pesanti come i grandiform in «HTML scritto a mano»Compromesso efficace tra velocità di scritturae performance. CSS differenziati iOS/Android.
  • 11. LocalStorage: i limiti LocalStorage = area di memoria persistente* accessibile anche offline da un sito/app web. Cinque megabytes basteranno a chiunque!(in realtà non sono 5MB davvero ma la metà perché lo storage avviene in UTF e un carattere occupa 2 Bytes)Vabbè, due mega e mezzo basteranno a chiunque! oppure no? E se non bastano? Avevamo bisogno di memorizzare offline una grande quantità di dati > 2.5 MB (tabelle di rifermento comuni, marche, modelli, …)
  • 12. LocalStorage: un trick Dati memorizzati in formato JSON (+ XML)JSON (XML ancora di più) è un formato verboso Idea: usare tecniche di compressione Le CPU degli SmartPhone sono in grado di (de)comprimere in tempi «umani». Librerie di compressione in JS (deflate) Dati ridotti dell’85% o più.
  • 13. La stampa in mobilitàRequisito: stampare moduli come questo con stampanti portatili come queste
  • 14. La stampa in mobilità Stampanti non compatibili AirPrint, su Apple solo Wi-Fi Non è stato possibile supportare iOSSituazione Android: manca un’infrastuttura driver di stampa a livello OS. Per ricorso a programma di stampa proprietario (PrinterShare) con driver propri. Per disponibile driver proprietario Solo supporto stampa «scontrino» e bitmap
  • 15. La stampa in mobilità Risultatohttp://www.youtube.com/watch?v=bv9OSltVLuQ&feature=plcp
  • 16. grazie per l’attenzione per informazioni gravam@futurasi.com

×