Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery mobile per App
Salvatore Paone
jQuery Mobile e Approcci per App
jQuery Mobile è un framework per la creazione di applicazioni web
mobile. Prima di inizia...
I diversi approcci disponibili
Gli approcci possibili allo sviluppo mobile sono per lo più tre: nativo,
web app e ibrido:
...
I diversi approcci disponibili
I diversi approcci disponibili
Gli applicativi per Android e Blackberry sono scritti in Java, gli
applicativi iOS sono scr...
I diversi approcci disponibili
jQuery Mobile è una tappa obbligata del nostro percorso: consiste in una
libreria che si in...
Alternative a jQuery mobile
Sencha Touch: progetto che si basa anche sulle novità apportate da
HTML5, creato dagli stessi ...
Alternative a jQuery mobile
IUI: è un framework per lo sviluppo di applicazioni Web destinate al
mobile ed in particolare ...
Aggiunta di jQuery Mobile al progetto
Ci sono due modi per aggiungere jQuery Mobile per il tuo sito web. Puoi:
1. Collegam...
Aggiunta di jQuery Mobile al progetto
I tag <script> possono essere
inclusi all’interno dei blocchi
<head> o <body>. Mentr...
Il data-role
HTML 5 introduce un attributo
globale chiamato data-*, al quale
asterisco si può sostituire qualsiasi
stringa...
Anatomia di una pagina
L’altro div con data-role definito
come header e il suo contenuto,
verranno renderizzato in quanto
...
Le liste
Estremamente interessante è il
supporto per le liste di jQuery
Mobile che consentirà
un’esperienza utente facilit...
La struttura e lo stile: HTML e CSS
Il linguaggio HTML consente di specificare la struttura delle pagine e,
soprattutto co...
Dove scrivere il codice
u NetBeans nasce principalmente per Java, ma con il tempo si è esteso per
supportare ulteriori te...
Dove scrivere il codice: Intel XDK
Intel XDK: si tratta di uno strumento gratuito e multipiattaforma, con
tutte le funzion...
Dove scrivere il codice: Intel XDK
Dove scrivere il codice: Intel XDK
Come si vede, il flusso di lavoro che si dovrà seguire è scandito dalla
struttura a sch...
Dove scrivere il codice: Intel XDK
La scheda Emulate offre la possibilità di osservare rapidamente il
risultato parziale d...
Dove scrivere il codice: Intel XDK
Un aspetto molto interessante è la possibilità di provare l’App su un
dispositivo mobil...
Dove scrivere il codice: Intel XDK
Per i test su dispositivo reale, Intel
XDK si appoggia ad un’app, Intel
App Preview, es...
Dove scrivere il codice: Intel XDK
Dalla schermata di Build si potrà scegliere il sistema di destinazione. Lo
stesso proge...
Upcoming SlideShare
Loading in …5
×

Jquery mobile per App

229 views

Published on

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...

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Jquery mobile per App

  1. 1. jQuery mobile per App Salvatore Paone
  2. 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. 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. 4. I diversi approcci disponibili
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Dove scrivere il codice: Intel XDK
  18. 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. 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. 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. 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. 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.

×