jQuery Mobile è un framework per la creazione di applicazioni web mobile. Prima di iniziare a studiare jQuery Mobile, si dovrebbe avere una conoscenza di base di: HTML, CSS, jQuery. jQuery Mobile è un framework web ottimizzato per un uso touch per la creazione di applicazioni web mobile e funziona su tutti i sistemi più diffusi...

1. jQuery mobile per App
Salvatore Paone

2. jQuery Mobile e Approcci per App
jQuery Mobile è un framework per la creazione di applicazioni web
mobile. Prima di iniziare a studiare jQuery Mobile, si dovrebbe avere una
conoscenza di base di: HTML, CSS, jQuery. jQuery Mobile è un framework
web ottimizzato per un uso touch per la creazione di applicazioni web
mobile e funziona su tutti i sistemi più diffusi:

3. I diversi approcci disponibili
Gli approcci possibili allo sviluppo mobile sono per lo più tre: nativo,
web app e ibrido:
u Per nativo, intendiamo lo sviluppo di applicazioni del tutto integrate
con il sistema operativo, sfruttando SDK messi a disposizione dallo
stesso produttore e con le tecnologie da esso previste.
u Realizzare web app, invece, significa creare delle applicazioni web in
tutto e per tutto, ottimizzate per il mobile, e che siano pertanto
perfettamente sfruttabili tramite i browser dei dispositivi mobili.
u Quando si pensa di utilizzare HTML5 per il mobile non ci si riferisce
all’approccio nativo, bensì alla possibilità che un esperto di
programmazione web possa cimentarsi con successo nello sviluppo di
App.

4. I diversi approcci disponibili

5. I diversi approcci disponibili
Gli applicativi per Android e Blackberry sono scritti in Java, gli
applicativi iOS sono scritti in Objective C e quelli per Windows Phone
sono scritti in C # e .NET, etc. jQuery Mobile risolve questo problema, in
quanto utilizza solo HTML, CSS e JavaScript, che è standard per tutti i
browser web per cellulari!

6. I diversi approcci disponibili
jQuery Mobile è una tappa obbligata del nostro percorso: consiste in una
libreria che si integra alla perfezione in HTML5, per cui il designer può
permettersi di integrarla gradualmente nel proprio lavoro senza doversi
cimentare da subito con la programmazione. Nasce da jQuery ed è
probabilmente uno degli ambienti più diffusi nello sviluppo di app ibride.
Come jQuery, vanta una grande comunità che lo sostiene ed una
documentazione piuttosto ricca.
È inoltre facilmente estensibile mediante plugin. Il suo aspetto grafico
può risultare un pò standardizzato: ciò non toglie, però, che i temi
possano essere personalizzati a piacimento con gli strumenti ufficiali
messi a disposizione.

7. Alternative a jQuery mobile
Sencha Touch: progetto che si basa anche sulle novità apportate da
HTML5, creato dagli stessi sviluppatori del framework JavaScript ExtJS,
ma non ne costituisce però una sua estensione, può essere di semplice
impiego per chi già conosce questo tipo di librerie, la curva di
apprendimento può invece risultare più ripida per chi è abituato ad
utilizzare soluzioni differenti come jQuery; lì dove jQuery Mobile ha lo
scopo di integrare una comune pagina HTML con funzionalità specifiche,
Sencha Touch genera invece un proprio Document Object Model basato su
oggetti creati da JavaScript. Quest’ultimo offre inoltre un buon numero
di componenti per le interfacce utente mentre potrebbe risultare
sovradimensionato per la realizzazione di progetti meno complessi come
semplici pagine Web. http://www.sencha.com/products/touch/

8. Alternative a jQuery mobile
IUI: è un framework per lo sviluppo di applicazioni Web destinate al
mobile ed in particolare per l’iPhone e dispositivi compatibili, fornisce
librerie JavaScript, regole CSS e componenti grafiche pronte all’uso;
gestisce le problematiche relative ad orientamento e rotazione ed è
particolarmente adatto per coloro che non hanno conoscenze
approfondite su JavaScript; il progetto, ancora in fase beta, è rilasciato
sotto licenza BSD, soffre purtroppo di un’eccessiva lentezza nel rilascio
di aggiornamenti. http://code.google.com/p/iui/

9. Aggiunta di jQuery Mobile al progetto
Ci sono due modi per aggiungere jQuery Mobile per il tuo sito web. Puoi:
1. Collegamento a una libreria jQuery Mobile conservato a un CDN
(consigliato)
2. Collegamento a una libreria jQuery Mobile memorizzati sul proprio
computer
Link a jQuery Mobile da un CDN:
Un CDN (Content Delivery Network) viene utilizzato per distribuire file
utilizzati più spesso sul web.
Questo rende la velocità di download molto più veloce per l'utente.
Come per jQuery core, non c'è nulla da installare sul vostro computer.

10. Aggiunta di jQuery Mobile al progetto
I tag <script> possono essere
inclusi all’interno dei blocchi
<head> o <body>. Mentre prima
era usuale inserirli all’interno
della prima porzione del file HTML
(il tag <head>), oggi si tende ad
includere il Javascript alla fine del
blocco <body>, al fine di
velocizzare il caricamento del
layout e posticipare l’esecuzione
del codice dinamico.
<!-- Include jQuery Mobile
stylesheets -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile
/1.4.5/jquery.mobile-
1.4.5.min.css">
<!-- Include the jQuery library -->
<script
src="http://code.jquery.com/jquery-
1.11.2.min.js"></script>
<!-- Include the jQuery Mobile
library -->
<script
src="http://code.jquery.com/mobile/
1.4.5/jquery.mobile-
1.4.5.min.js"></script>

11. Il data-role
HTML 5 introduce un attributo
globale chiamato data-*, al quale
asterisco si può sostituire qualsiasi
stringa. Tale introduzione
permette la creazione di attributi
specifici con notevole libertà da
parte dello sviluppatore. jQuery
Mobile usa l’attributo data-role:
http://view.jquerymobile.com/ma
ster/demos/pages
Viene qui dichiarato un
contenitore principale con data-
role definito come page.
<div data-role="page"
id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Questa é la home
page</p>
<p>Vai al <a
href="#catalogo">catalogo</a>
</p>
</div>
</div>

12. Anatomia di una pagina
L’altro div con data-role definito
come header e il suo contenuto,
verranno renderizzato in quanto
tali da jQuery e dall’engine del
mobile browser.
Infine il data-role definito come
content sarà il “contenitore
principale (main)”.
Infine il data-role definito come
footer sarà il “contenitore basso
(pie’ di pagina)”.
<div data-role="page">
<div data-
role="header">...</div>
<div role="main" class="ui-
content">...</div>
<div data-
role="footer">...</div>
</div>

13. Le liste
Estremamente interessante è il
supporto per le liste di jQuery
Mobile che consentirà
un’esperienza utente facilitata.
Cliccando sull’ancora come tag
<li> all’interno di un tag </ul> al
quale viene assegnare l’attributo
data-role=”listview”, l’utente
verrà portato ad avere accesso
diretto al contenuto. Le liste sono
a “misura di dito”.
<ul data-role="listview" data-
theme="d">
<li><a href="gesso1.html">Gesso
1</a></li>
<li><a href="gesso2.html">Gesso
2</a></li>
<li><a href="gesso3.html">Gesso
3</a></li>
<li><a href="gesso4.html">Gesso
4</a></li>
<li><a href="gesso5.html">Gesso
5</a></li>
</ul>

14. La struttura e lo stile: HTML e CSS
Il linguaggio HTML consente di specificare la struttura delle pagine e,
soprattutto con il contributo dei nuovi tag di HTML5, di valorizzare
semanticamente il ruolo dei singoli elementi. I fogli di stile, invece, sono
realizzati con il linguaggio CSS, e vengono usati principalmente per
modellare gli aspetti grafici degli elementi (font, colori, bordi, forme,
eccetera) e gestire il posizionamento all’interno della pagina. Con
l’avanzare di nuove problematiche (tra cui quelle legate al mobile), la
complessità dei fogli di stile è diventata un problema sempre più
significativo; per ovviare a ciò, sono nati alcuni framework fra cui jQuery
mobile che mettono a disposizione pratici tool per definire il thema
dell’app: https://themeroller.jquerymobile.com/

15. Dove scrivere il codice
u NetBeans nasce principalmente per Java, ma con il tempo si è esteso per
supportare ulteriori tecnologie di programmazione tra cui, appunto, HTML e
JavaScript. È un ambiente adatto sia a web designer che a programmatori,
offrendo varie funzionalità di debug per JavaScript, con esecuzione passo
passo ed ispezione dei valori.
u Anche uno strumento tradizionale del web design come Adobe Dreamweaver
CC può rendersi utilissimo. Oltre alle sue notevoli capacità di design è stato
arricchito, negli anni, con plugin e funzionalità legate alle sviluppo di app,
integrazione di jQuery e molto altro.
u Si potrebbero elencare altri editor e IDE, ma uno che risulta piuttosto comodo
e completo per creare App in jQuery Mobile è Intel XDK.

16. Dove scrivere il codice: Intel XDK
Intel XDK: si tratta di uno strumento gratuito e multipiattaforma, con
tutte le funzionalità che ci occorrono. Una volta installato ed avviato,
viene richiesto di effettuare il login tramite un account Intel,
eventualmente creandolo ad hoc. Ciò è necessario perché questo IDE non
svolge tutte le elaborazioni in locale ma, al fine offrire performance
migliori, demanda i compiti più onerosi (come il building del progetto) al
potente sistema cloud di Intel.
In pratica i nostri sorgenti verranno inviati in rete ai server di Intel, che
ci restituiranno il pacchetto di installazione dell’App, pronto da usare.

17. Dove scrivere il codice: Intel XDK

18. Dove scrivere il codice: Intel XDK
Come si vede, il flusso di lavoro che si dovrà seguire è scandito dalla
struttura a schede in alto: ogni scheda corrisponde ad una fase di
creazione dell’App. La prima di esse, intitolata Develop, mostra tutto ciò
che serve alla realizzazione del lavoro.A sinistra troviamo la struttura
del progetto – essenzialmente composta da file HTML, CSS e JavaScript –
ed al centro sarà collocato l’editor, che potrà essere testuale (come
quello visibile in figura) o visuale se si è scelto di utilizzare AppDesigner.

19. Dove scrivere il codice: Intel XDK
La scheda Emulate offre la possibilità di osservare rapidamente il
risultato parziale di quanto si sta realizzando:
Sulla sinistra si può scegliere la configurazione dell’emulatore
specificando il tipo di dispositivo e l’orientamento (portrait o
landscape). Al centro della pagina sarà mostrata l’anteprima della nostra
applicazione.

20. Dove scrivere il codice: Intel XDK
Un aspetto molto interessante è la possibilità di provare l’App su un
dispositivo mobile reale, tramite le funzionalità della scheda Debug. La
seguente figura mostra come viene richiesto il collegamento di un
dispositivo Android o iOS sul quale verrà direttamente testata l’App.

21. Dove scrivere il codice: Intel XDK
Per i test su dispositivo reale, Intel
XDK si appoggia ad un’app, Intel
App Preview, esistente per tutti i
principali sistemi operativi mobile
e da installare sul device:
anch’essa è parte integrante del
sistema Intel.

22. Dove scrivere il codice: Intel XDK
Dalla schermata di Build si potrà scegliere il sistema di destinazione. Lo
stesso progetto sorgente potrà essere reso “eseguibile” su piattaforme
mobile differenti.