come sviluppare applicazioni cross- device con html
DESCRIPTION
Come sviluppare applicazioni cross- device con HTML. Marco Assandri 19/01/2012. Agenda. Vantaggi e svantaggi di un approccio di questo tipo Chiudere il Gap jQuery Mobile (single page, multipage , gestione del DOM, ThemeRoller ) Utilizzo di MVVM in Javascript - PowerPoint PPT PresentationTRANSCRIPT
Come sviluppare applicazioni cross-device
con HTMLMarco Assandri
19/01/2012
Agenda Vantaggi e svantaggi di un approccio di questo tipo Chiudere il Gap jQuery Mobile (single page, multipage, gestione del
DOM, ThemeRoller) Utilizzo di MVVM in Javascript Il problema del crossdomain per le chiamate ajax Media queries (cambiare gli stili in base alle
dimensioni) PhoneGap e funzionalità native supportate Complicazioni PhoneGap – Windows Phone Compilazione nativa, signing e inserimento nel
market
Vantaggi L’applicazione viene scritta una volta sola (o quasi) e:
◦ Funge da sito web ottimizzato per mobile◦ Compilabile per Iphone e Ipad e inseribile nell’Apple Store◦ Compilabile per Android e inseribile nel market◦ Compilabile per BlackBerry e inseribile nel market◦ Compilabile per WebOs◦ Compilabile per Symbian e inseribile in OviStore◦ Compilabile per Windows Phone 7 Mango (anche se bisogna
fare attenzione a non usare alcune funzionalità) e inseribile nel market. Il supporto per la versione precedente a Mango è molto più limitato.
◦ può anche essere adeguata ai browser desktop se necessario◦ Dovrebbe funzionare anche come applicazione nativa Windows
8, ma le chiamate al sistema vanno rimappate in molti casi
Svantaggi Il codice applicativo va scritto in Javascript senza
supporto di un linguaggio lato server:◦ Maggiori difficoltà in mantenibilità e debugging
Potrebbe essere necessaria la comunicazione cross-domain con le conseguenti problematiche connesse
Differenze di comportamento dei browser dei dispositivi in rapporto a HTML5 e CSS3 possono portare a differenze di rappresentazione non sempre semplici da risolvere
Non tutte le chiamate alle API native sono disponibili su tutti i device. Occorre tenerne conto nell’implementazione.
NuGet Package Manager◦ Facilità l’installazione, la rimozione e l’update di librerie
Image Optimizer◦ Ottimizza le immagini in modo lossless ed è importante perché
usiamo il 3G Web Standards Update for Microsoft Visual Studio 2010
SP1◦ Migliora il supporto per html5 e css3
Web Essentials◦ Aggiunge funzionalità di productivity per il web
CSS 3 Intellisense Schema JScript Editor Extensions e Javascript Parser
◦ Migliorano il supporto per la scrittura del codice Javascript
Estensioni Visual Studio utili
Browser diversi Differenti renderizzazioni e features.
Anche quando compilato viene creata un’istanza del browser del device su cui girerà il codice HTML.
È consigliabile applicare best practices per ridurre al minimo le differenze in base alle funzionalità che si desiderano utilizzare.
Le best practices differiscono molto se decidiamo di scrivere il codice solo per dispositivi mobili oppure anche per browser desktop (IE6 per esempio)
Chiudere il GAP
Nel caso in cui il codice sarà anche per browser desktop è consigliabile applicare:◦ Modernizr◦ Commenti condizionali nel tag html per identificare il
browser◦ Polyfill per JSON (json2.js) per rendere disponibili i
metodi JSON anche su browser legacy (JSON serve moltissimo per la comunicazione con il server)
◦ Polyfill per Media Queries (respond.js) per il supporto con i browser legacy
◦ Un buon esempio è rappresentato da HTML5 Boilerplate◦ http://www.ie6countdown.com/#list
Chiudere il GAP
Nel caso in cui il codice sarà esclusivamente per dispositivi mobili:◦ Applicare solo i polyfills strettamente richiesti (i
browser mobile supportano HTML5 solitamente in modo migliore rispetto ai browser legacy). Android e Iphone hanno browser che supportano molte funzionalità di HTML5. Windows Phone 7 dipende dalla versione, ma comunque più limitato. Symbian, WebOs e BlackBerry invece sono molto limitati.
◦ Un buon esempio è rappresentato da HTML5 Mobile Boilerplate
Chiudere il GAP
Supporto HTML5 browser mobile
CLASS: OFFLINE & STORAGE
Feature/OS iOS Androi
d NetFront Opera Dolphi
n UCWEB BB Symbi
an IE webOS FF
appcache Y 3.2+ Y 3.2+ Y Y Y N N N Y Y
localstorage Y 2.0+ Y 2.0+ Y Y Y N Y N N
sessionstorage Y 2.0+ Y 2.0+ Y Y Y N Y Y Y
websqldatabase
Y 2.0+ Y 2.0+ Y Y Y N N Y N
indexeddb N N N N N N N N N
https://github.com/h5bp/mobile-boilerplate/wiki/HTML5-Mobile-Support
http://caniuse.com/
Supporto HTML5 browser mobile
Non usare esclusivamente le CDN, ma lasciare anche una versione locale più veloce da caricare sul device◦ <script>window.jQuery || document.write('<script src="js/libs/jquery-
1.7.1.min.js"><\/script>')</script> Non è possibile usare la sintassi indipendente dal
protocollo //, ma è necessario specificare il protocollo (http:// o https://) il device è come se leggesse da file system◦ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>va corretta con<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Chiudere il GAP
jQuery Mobile A unified, HTML5-based user interface
system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.
Interfaccia unificata e ottimizzata per il touch. Testata su iOS, Android, BlackBerry, bada, Windows Phone, palm webOS, symbian, MeeGo
jQuery Mobile – Theme Roller Per aiutarci nella modifica della grafica
possiamo usare il Theme Rollerhttp://jquerymobile.com/themeroller/
Successivamente possiamo modificare a nostro piacimento i CSS tenendo però conto che i controlli subiscono l’enhancement e quindi vengono trasformati in un markup più complesso
Attenzione all’uso della CDN per le immagini. Bug con Opera Mobile obbliga la copia in locale.
jQuery Mobile - concetti jQuery Mobile cambia molto il modo di scrivere HTML
◦ Esistono due strutture di base: single page e multipage.◦ Le pagine vengono caricate tramite AJAX quindi nel DOM
entrano solo gli elementi all’interno del tag <body>◦ Solo la pagina iniziale carica il tag <head>◦ Le pagine sono in realtà dei <div data-role="page" />◦ Viene fatto massiccio uso dell’attributo data- di HTML5◦ Disponibili diversi eventi molto utili: swipeleft, swiperight,
tap, orientationchange, pagebeforeshow, pagebeforehide, …
◦ Microsoft dovrebbe rilasciare un tema in stile Metro
Knockoutjs - MVVM in Javascript Un approccio che facilità molto lo sviluppo,
riducendo di molto le linee di codice e la sua complessità è MVVM in Javascript.
La libreria Knockout JS è un ottimo strumento.
Questo approccio non è adatto se la parte SEO è estremamente importante perché il binding dei dati avviene tramite Javascript e sarebbe nascosto ai motori di ricerca.
Knockoutjs - MVVM in Javascript Elegant dependency tracking -
automatically updates the right parts of your UI whenever your data model changes.
Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.
Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.
Knockoutjs - MVVM in Javascript Tutto inizia creando un View Model oppure
importandolo dal server◦ var myViewModel = {
personName: 'Bob', personAge: 123};
E usando la sintassi di bind◦ Il nome è <span data-bind="text: personName"></span>
Ad ogni modifica dell’oggetto, i rispettivi binding vengono automaticamente aggiornati (anche in differita se desiderato)
Il binding è di tipo two-way
Knockoutjs - MVVM in Javascript La libreria include anche un motore di templating (prima era
jQuery template, ora sostituito)◦ <h2>Participants</h2>
Here are the participants:<div data-bind="template: { name: 'person-template', foreach: people }"></div><script type="text/html" id="person-template"> <h3 data-bind="text: name"></h3> <p>Credits: <span data-bind="text: credits"></span></p></script> function MyViewModel() { this.people = [ { name: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800 } ] } ko.applyBindings(new MyViewModel());
Considerazioni sul cross-domain Normalmente il problema del cross-domain
non è sentito dall’applicazione compilata sul device tuttavia è consigliabile abilitare i seguenti settaggi:◦ Cross Origin Resource Sharing
$.support.cors = true;◦ Allow Cross Domain Pages. Nell’evento mobileinit
di jQuery Mobile inserire$.mobile.allowCrossDomainPages = true;
◦ PhoneGap White Listing
Considerazioni sul cross-domain Per chiamate Ajax cross-domain è necessario:
◦ Crossdomain.xml nella root del sito: esempio il meno restrittivo<site-control permitted-cross-domain-policies="all"/> <allow-access-from domain="*" to-ports="*" secure="false"/> <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
◦ Aggiunta di header http Access-Control-Allow-Origin<add name="Access-Control-Allow-Origin" value="*" />
◦ XMLHttpRequest non funziona su IE per cross domainPer IE bisogna utilizzare XDomainRequest che tuttavia ha alcune limitazioni (http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx)
Considerazioni sul cross-domain Ogni volta che potete non fate chiamate
AJAX cross-domain (preferite servizi sullo stesso dominio oppure proxy)
Quando non potete farne a meno conviene trasformarle in script (si perde la possibilità di fare il POST) e settare un callback (ci sono diverse librerie: HeadJs per esempio)◦ head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done });
Media queries Le media queries permettono di avere regole
di stile differente in base alle dimensioni dello schermo del device e non solo
Essendo una specifica CSS3, per i browser che non le supportano si può usare respond.js◦ <script>Modernizr.mq('(min-width:0)') || document.write('<script
src="js/libs/respond.min.js">\x3C/script>')</script>◦ Se desideriamo anche usare i selettori CSS3 in IE6-8
aggiungere anche http://selectivizr.com/ http://www.alistapart.com/articles/responsive-
web-design/
Media queries/* Default Layout: 992. */.wrapper { width: 896px;} /* Tablet Layout: 768px */@media only screen and (min-width: 768px) and (max-width: 991px) { .wrapper { width: 712px; }} /* Mobile Layout: 320px */@media only screen and (max-width: 767px) { .wrapper { width: 252px; } } /* Wide Mobile Layout: 480px */@media only screen and (min-width: 480px) and (max-width: 767px) { .wrapper { width: 436px; } }
http://www.html.it/articoli/3784/layout_css3_media_queries/index.html
Media queries Retina media query@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
body {}
} È possibile anche caricare i fogli di stili in
base al device◦ <link rel="stylesheet" type="text/css" media="screen and
(max-device-width: 480px)" href="shetland.css" />
PhoneGap PhoneGap is an HTML5 app platform that
allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.
http://docs.phonegap.com/en/1.3.0/index.html Disponibili anche plugin (barcode scanner,
Phone Listener, ...) https://github.com/phonegap/phonegap-plugins
PhoneGapdocument.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() {
if (navigator.network.connection.type == Connection.NONE) {
navigator.notification.alert("Non sei connesso a Internet. Riavvia l'applicazione quando sarai connesso.", function () {navigator.app.exitApp();});} }
Supporto PhoneGap
Complicazioni PhoneGap WP7 Modalità offline HTML5 non disponibile su IE9 per
Mango e tantomeno su IE7 per la versione precedente Il multipage template di jQuery Mobile non funziona se
l’applicazione viene compilata per Windows Phone 7◦ https://issues.apache.org/jira/browse/CB-106◦ PhoneGap 1.2: Error loading page◦ PhoneGap 1.3: Loading
By design alcune funzionalità non sono possibili: intercettazione delle chiamate e degli SMS, call history, … gli eventi disponibili sono meno rispetto ad altri sistemi
Complicazioni PhoneGap WP7 Microsoft ha messo a disposizione uno
sviluppatore per migliorare il supporto Il supporto per Mango è migliore rispetto a
quello per la versione precedente
Compilazione nativa, signing e inserimento nel market
Per ogni piattaforma c’è una soluzione da compilare per rendere il codice nativo ◦ necessaria l’installazione di Eclipse per Android e
BlackBerry.◦ Necessario un Mac OS, Xcode e un iPhone / iPad◦ Visual Studio 2010 con Windows Phone SDK 7.1 per
WP7◦ http://phonegap.com/start per maggiori
informazioni◦ A volte è necessario qualche aggiustamento nel
codice per renderlo adatto al device o più performante
PhoneGap Build
In alternativa è possibile utilizzare PhoneGap Build:◦ Compila per Android, BlackBerry, Symbian,
webOS e iOS◦ Molto comodo e fa risparmiare molto tempo◦ La parte di configurazione per iOS richiede
comunque la prima volta un sistema operativo Apple e un iPhone / iPad. È inoltre richiesto ogni volta che si fa l’upload sull’apple store (Application Loader).
PhoneGap Build
Vanno preparate le icone e gli splashscreen, oltre ad altre informazioni che verranno inserite nel file config.xml tra cui:◦ Nome applicazione◦ Descrizione◦ Versione◦ Feature utilizzate◦ Autore◦ Preferenze◦ Path icone◦ Path splash
Signing e inserimento nel market Se l’applicazione deve essere inserita nel
market, va molto probabilmente firmata (Android, BlackBerry, Windows Phone 7, iOS). Ogni device ha la propria procedura per l’ottenimento delle chiavi.
Le chiavi ottenute vanno inserite nel pannello di controllo di PhoneGap Build e la compilazione restituirà il file da caricare nei rispettivi Store.
È probabile che sia necessario applicare piccole modifiche al codice in quanto ogni app store ha regole differenti.
Link
http://jquerymobile.com/ http://knockoutjs.com/ http://phonegap.com/ http://html5boilerplate.com/ http://html5boilerplate.com/mobile https://
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
http://www.modernizr.com/