Smau milano 2012 arena social media massimo-grava
-
Upload
smau -
Category
Technology
-
view
297 -
download
0
Transcript of Smau milano 2012 arena social media massimo-grava
![Page 2: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/2.jpg)
Requisiti
Unico3 Mobile è una app per i tecnici della manutenzione 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)
![Page 3: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/3.jpg)
LO SVILUPPO HTML5 IN TEORIA
![Page 4: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/4.jpg)
Architettura Unico3 Mobile
Phone OS (iOS, Android)
Native Code (Java, Objective C)
Browser (webview)
Business Logic (JS)
Libraries (Sencha Touch 2)
Phonegap.js
UI (HTML5, CSS3, ST2 Components)
AJAX calls
Phonegap plugins
Local Storage
![Page 5: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/5.jpg)
Le librerie di interfaccia
Forniscono componenti UI
✔ elaborati, gradevoli e touch-friendly
✔ relativamente facili da programmare
✔ facilmente temizzabile
✔ aspetto e funzionamento uniforme
Libraries (Sencha Touch 2)
![Page 6: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/6.jpg)
QUELLO CHE È STATO IN REALTÀ
![Page 7: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/7.jpg)
Performance UI
Problema:
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.
![Page 8: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/8.jpg)
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à.
![Page 9: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/9.jpg)
Esemplare di form complesso in cattività
![Page 10: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/10.jpg)
Performance UI
Soluzione (nostra):
✔ Eliminare dove possibile uso di immagini di sfondo, trasparenze, ombre e angoli arrotondati CSS3.
✔ Riscrivere le parti più pesanti come i grandi form in «HTML scritto a mano»
Compromesso efficace tra velocità di scrittura e performance. CSS differenziati iOS/Android.
![Page 11: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/11.jpg)
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, …)
![Page 12: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/12.jpg)
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ù.
![Page 13: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/13.jpg)
La stampa in mobilità Requisito: stampare moduli come questo
con stampanti portatili come queste
![Page 14: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/14.jpg)
La stampa in mobilità Stampanti non compatibili AirPrint, su Apple solo Wi-Fi
Non è stato possibile supportare iOS
Situazione 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
![Page 15: Smau milano 2012 arena social media massimo-grava](https://reader034.fdocument.pub/reader034/viewer/2022052621/5581ae47d8b42afd4c8b532a/html5/thumbnails/15.jpg)
La stampa in mobilità
Risultato
http://www.youtube.com/watch?v=bv9OSltVLuQ&feature=plcp