jquery mobile per app

jQuery mobile per AppSalvatore Paone

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 frameworkweb ottimizzato per un uso touch per la creazione di applicazioni web mobile e funziona su tutti i sistemi più diffusi:

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.


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!


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.

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/

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/

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.

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.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

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. jQueryMobile usa l’attributo data-role:http://view.jquerymobile.com/master/demos/pagesViene 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>

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 comecontent sarà il “contenitore principale (main)”.

Infine il data-role definito comefooter 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>

Le liste

Estremamente interessante è il supporto per le liste di jQueryMobile che consentirà un’esperienza utente facilitata.

Cliccando sull’ancora come tag<li> all’interno di un tag </ul> al quale viene assegnare l’attributodata-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>





</ul>

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 jQuerymobile che mettono a disposizione pratici tool per definire il themadell’app: https://themeroller.jquerymobile.com/

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.

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.


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.


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.


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.


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.


Dalla schermata di Build si potrà scegliere il sistema di destinazione. Lo stesso progetto sorgente potrà essere reso “eseguibile” su piattaforme mobile differenti.