Transcript Come sviluppare applicazioni cross-device con HTML

Marco Assandri
19/01/2012









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

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
◦
◦
◦
◦
◦
◦
◦

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

Image Optimizer

Web Standards Update for Microsoft Visual Studio
2010 SP1
◦ Facilità l’installazione, la rimozione e l’update di librerie
◦ Ottimizza le immagini in modo lossless ed è importante
perché usiamo il 3G
◦ 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




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)

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

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
CLASS: OFFLINE & STORAGE
Feature
iOS
/OS
Androi
d
NetFro
nt
Opera
Dolphi
n
UCWEB
appcac
he
BB
Symbia
n
IE
webOS
FF
N
N
Y
Y
Y
3.2+
Y
3.2+
Y
Y
Y
N
localsto
Y
rage
2.0+
Y
2.0+
Y
Y
Y
N
Y
N
N
session
Y
storage
2.0+
Y
2.0+
Y
Y
Y
N
Y
Y
Y
websql
databa
se
Y
2.0+
Y
2.0+
Y
Y
Y
N
N
Y
N
indexe
ddb
N
N
N
N
N
N
N
N
N
https://github.com/h5bp/mobileboilerplate/wiki/HTML5-Mobile-Support
http://caniuse.com/

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>


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



Per aiutarci nella modifica della grafica
possiamo usare il Theme Roller
http://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 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



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.



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.

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

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());

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

Per chiamate Ajax cross-domain è necessario:
◦ Crossdomain.xml nella root del sito: esempio il meno
restrittivo
<site-control permitted-cross-domain-policies="all"/> <allowaccess-from domain="*" to-ports="*" secure="false"/> <allow-httprequest-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 domain
Per IE bisogna utilizzare XDomainRequest che tuttavia ha alcune
limitazioni
(http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainr
equest-restrictions-limitations-and-workarounds.aspx)


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
});


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/responsiv
e-web-design/
/* 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

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 (maxdevice-width: 480px)" href="shetland.css" />



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/phonegapplugins
document.addEventListener("deviceready", onDeviceReady
, false);
function onDeviceReady() {
if (navigator.network.connection.type == Connectio
n.NONE) {
navigator.notification.alert("Non sei connesso a Inte
rnet. Riavvia l'applicazione quando sarai connesso.", funct
ion () {
navigator.app.exitApp();
});
}
}


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


Microsoft ha messo a disposizione uno
sviluppatore per migliorare il supporto
Il supporto per Mango è migliore rispetto a
quello per la versione precedente

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

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).

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



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.







http://jquerymobile.com/
http://knockoutjs.com/
http://phonegap.com/
http://html5boilerplate.com/
http://html5boilerplate.com/mobile
https://github.com/Modernizr/Modernizr/wi
ki/HTML5-Cross-Browser-Polyfills
http://www.modernizr.com/