Mobile App Design / Dev Guida per principianti a jQuery Mobile

Negli ultimi 2-3 anni abbiamo assistito a un'enorme crescita del supporto del browser e del sistema operativo per i siti Web mobili. In particolare, mi vengono in mente le piattaforme iOS di Apple e Android di Google. Ma altri come PalmOS e Blackberry sono ancora nel mix. Fino a poco tempo fa era molto difficile abbinare un unico tema mobile in tutte queste piattaforme.

JavaScript è stato un inizio, ma fino ad ora non ci sono state librerie veramente unificate. jQuery Mobile prende tutte le migliori caratteristiche di jQuery e le trasferisce su una fonte web mobile. La libreria è più simile a un framework che include animazioni, effetti di transizione e stili CSS automatici per elementi HTML di base. In questa guida, spero di presentare la piattaforma in modo che tu possa sentirti a tuo agio nel progettare le tue app mobili jQuery.

Funzionalità e supporto del sistema operativo

La ragione per cui suggerisco di imparare jQuery Mobile su qualsiasi altro framework è la semplicità. Il codice è stato creato sul core jQuery e ha un team attivo di sviluppatori che scrivono script e modificano bug. Tra le molte funzionalità, il supporto HTML5, i link di navigazione basati su Ajax e i gestori di eventi touch / swipe.

Il supporto è variabile tra i telefoni ed è suddiviso in un grafico di 3 categorie da A-C. A è il livello più alto che vanta il pieno supporto di jQuery Mobile, B ha tutto eccetto Ajax mentre C è HTML di base con un minimo di JavaScript. Fortunatamente la maggior parte dei sistemi operativi più diffusi sono pienamente supportati - ho aggiunto un elenco di seguito di alcuni esempi.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Se vuoi saperne di più, prova a leggere nella loro pagina ufficiale dei documenti. Non è scritto in parole senza senso e in realtà sembra molto facile da seguire. Ora concentriamoci sulle basi della scrittura di una pagina mobile jQuery e su come possiamo creare una piccola applicazione!

Il modello HTML standard

Per far funzionare la tua prima app per dispositivi mobili è disponibile un modello di set con cui iniziare. Ciò include il codice base jQuery insieme al JS e CSS mobile, tutti esterni ospitati dal CDN jQuery. Controlla il mio codice di esempio qui sotto.

Gli unici elementi stranieri qui dovrebbero essere i due meta tag. La cima viewport tag aggiorna i browser mobili per utilizzare un effetto zoom completo. Impostazione del valore larghezza = device-width imposterà la larghezza della pagina esattamente alla larghezza dello schermo del telefono. E soprattutto non disabilita le funzioni di zoom poiché jQuery Mobile può adattarsi ai layout mutevoli.

Il prossimo meta tag X-UA-Compatible forza semplicemente Internet Explorer a rendere l'HTML nella sua iterazione più recente. I browser meno recenti e in particolare i cellulari cercheranno di aggirare i bug di rendering non familiari.

Costruire il contenuto del corpo

Ora è qui che jQuery mobile può diventare complicato. Ogni pagina HTML non è necessariamente una pagina sul sito mobile. Il framework si avvale degli attributi dei dati di HTML5, che è possibile creare per capriccio aggiungendo dati- in anticipo. In modo simile data-role = "pagina" può essere impostato su più div in un singolo file HTML, dandoti più di una pagina.

Dovresti quindi spostarti tra queste pagine con link di ancoraggio e un ID univoco. Questa configurazione è una buona idea per applicazioni semplici e di base. Se hai solo bisogno di 3-5 pagine, perché non archiviarlo tutto in un unico file? A meno che tu non abbia un sacco di contenuti scritti, nel qual caso prova a utilizzare PHP include per risparmiare tempo.

Controlla l'esempio di codice qui sotto se ti sei perso.

 
 
 
La barra del titolo in alto
 
 
 
Mostra un'altra pagina??
 
suggerimento: clicca sul pulsante qui sotto!
 
Riguardo a noi
 
  
 
 
 
Pagina 2 Qui
 
 
 
solo alcuni contenuti extra.
 
Voglio dire, puoi torna indietro in ogni momento.
 
 
   

Dai un'occhiata al link di ancoraggio dalla pagina dell'indice per un momento. Avviso Ho aggiunto l'attributo data-role = "button" per configurare il collegamento come un pulsante. Ma invece di usare gli stili predefiniti che includiamo Dati-theme = "c". Passa da 1 a 5 (temi a-e) a modelli che vengono confezionati di default come stili CSS all'interno di jQ ​​Mobile.

Il mio pulsante si estende anche sull'intera larghezza della pagina. Per rimuovere il comportamento, è necessario impostare l'elemento dal blocco alla visualizzazione in linea. L'attributo per fare questo è Dati-Inline = "true" che è possibile aggiungere a qualsiasi pulsante di ancoraggio.

Intestazione e piè di pagina

Lungo la parte superiore e inferiore delle tue applicazioni devi aggiungere il contenuto di intestazione e piè di pagina. Questo stile di progettazione è spesso attribuito a app iOS che sono diventate popolari con l'App Store di Apple. jQ Mobile utilizza gli attributi del ruolo dei dati per definire l'intestazione, il piè di pagina e il contenuto della pagina. Diamo una breve occhiata a queste aree.

Pulsanti Top Bar

Per impostazione predefinita, la barra superiore supporta un insieme di due (2) collegamenti in modo simile ad altre app mobili. L'impostazione predefinita di iOS è l'utilizzo di a “indietro” pulsante a sinistra e spesso a “opzioni” o “config” sulla destra.

 
 impostazioni 
Pagina 2 Qui
 
 

Il codice sopra riportato si concentra solo sul contenitore div per la nostra pagina About insieme al contenuto dell'intestazione. L'attributo HTML aggiuntivo Dati-add-back-btn = "true" funzionerà solo se aggiunto a un ruolo di dati della pagina. Lo scopo è quello di includere automaticamente un pulsante Indietro che funziona in modo simile al pulsante Indietro del browser.

Potremmo aver aggiunto un pulsante indietro manualmente con codice simile a quello che usavamo nell'area del contenuto. Ma ritengo che ciò richieda molto più tempo per l'installazione soprattutto su più pagine. Tutti i collegamenti di ancoraggio all'interno della sezione di intestazione assumeranno automaticamente le posizioni dei pulsanti sinistra / destra. Usando class = "ui-btn-right" questo ha riposizionato il mio pulsante Impostazioni in modo che ci sia spazio libero per il pulsante Indietro. Inoltre sto usando gli stili del tema secondario per dargli un tocco in più!

Navigazione a piè di pagina

All'inizio l'area dei piedi non è molto utile. È un luogo in cui è possibile archiviare materiale protetto da copyright e link più importanti, ma questo potrebbe essere facilmente aggiunto nella parte inferiore dell'area dei contenuti. Quindi, a che serve usare il footer?

Bene, l'esempio migliore che ho visto utilizza lo spazio del piè di pagina come sistema di navigazione in cui i collegamenti delle schede sembrano controllare la navigazione della pagina. Esistono molte opzioni in cui è possibile selezionare effetti a schermo intero, aggiungere icone, regolare la posizione e alcuni altri attributi. Ma costruiamo semplicemente un semplice footer nav con 3 pulsanti per avere un'idea di come funziona.

• Anteprima demo live

Quindi ecco un codice footer per la sezione about page. data-role = "navbar" dovrebbe essere aggiunto all'elemento del contenitore che contiene una lista non ordinata e NON l'elemento UL stesso. Ogni collegamento all'interno dell'elenco viene considerato come una barra delle schede, che viene divisa equamente in base al numero totale di collegamenti. La classe aggiuntiva di ui-body-b aggiunge solo effetti estetici mentre passiamo tra i pochi stili disponibili.

Se noti il ​​primo pulsante, ho l'attributo Dati direzione = "reverse". Anche se potevo usare la configurazione del pulsante Indietro come prima per tornare alla pagina iniziale, ho invece usato l'ID della pagina di #indice. Per impostazione predefinita, la finestra dell'app passerà a destra, il che appare piuttosto appiccicoso poiché ti aspetti che l'animazione si sposti indietro. Puoi giocare con ancora più di questi effetti animati se hai tempo. Dai un'occhiata alla pagina delle informazioni sulle transizioni nella documentazione di jQuery.

Ajax e pagine dinamiche

Il primo segmento ha davvero aperto i punti chiave per la creazione di un'app mobile con jQuery. Ma voglio iniziare una nuova app che carica i dati da una pagina esterna. Userò uno script PHP molto semplice per raggiungere il $ _REQUEST [] variabile e visualizzare un piccolo colpo Dribbble di conseguenza. Lo screenshot qui sotto dovrebbe darti un'idea di ciò che costruiremo.

Innanzitutto creerò una pagina index.html sul modello predefinito. Per questa schermata iniziale sto utilizzando una configurazione di visualizzazione elenco per visualizzare ciascun collegamento in ordine. Questo viene fatto nell'area dei contenuti con a data-role = "ListView" attributo nel contenitore dell'elenco. Tagliando le stesse cose come prima, ho aggiunto tutto il mio codice da questa nuova pagina di indice qui sotto.

 
 
 
Scatti di ottobre 2011
 
 
 
 
Prima immagine
 
Seconda immagine
 
Terza immagine
 
Quarta immagine
 
 
  
   

Ciascuno dei link di ancoraggio nella mia vista elenco punta allo stesso file - index.php. Ma stiamo passando il parametro imgid come variabile di richiesta. Nel file image.php prendiamo l'ID e lo proviamo contro 4 valori preimpostati. In caso di abbinamento, utilizziamo l'URL e il titolo dell'immagine corrispondenti, altrimenti visualizziamo solo uno scatto Dribbble predefinito.

Script del caricatore di immagini

Lo script image.php ha ancora il modello jQuery mobile predefinito aggiunto al codice. In realtà condivide un'intestazione e un piè di pagina molto simili, fatta eccezione per l'aggiunta dell'attributo back link Dati-add-back-btn = "true". Si noti che questo pulsante verrà visualizzato solo se provengono prima da index.html! Prova a caricare direttamente image.php e non apparirà nulla poiché non c'è “indietro” traslocare.

Penso che possiamo dare un po 'più senso al codice esaminando prima la logica PHP. Usiamo a interruttore / Astuccio metodo per verificare i 4 diversi ID e fornire un titolo di intestazione, un URL di immagine e il link di origine dell'artista originale.

Tutto sembra abbastanza semplice - anche un debuttante sviluppatore PHP dovrebbe essere in grado di seguirlo! E se non capisci che non è importante per il codice jQuery, quindi non preoccuparti. Dovremmo passare ora e dare un'occhiata al modello che ho creato all'interno di questa nuova pagina. Tutto il codice HTML viene aggiunto dopo l'intero blocco PHP sopra. Ho usato l'ID di “immagini” per il contenitore e persino impostare l'intestazione per cambiare con ogni nuova foto.

 
 
 
 
 
 Visualizza l'originale
 
 
  
 

Probabilmente puoi vedere quanto sia semplicistica questa demo. Ma l'intero scopo è dimostrare la scalabilità di jQuery mobile. PHP può essere facilmente aggiunto al mix e puoi sfornare alcune app davvero carine con poche ore di sviluppo.

Design di fantasia con miniature di elenchi

Un ultimo effetto aggiunto che possiamo implementare è l'uso delle miniature per ravvivare la pagina dell'elenco. Sto anche andando a dividere il testo in una finestra di titolo e descrizione per visualizzare sia il titolo della grafica che il nome dell'artista.

Per iniziare, apri Photoshop e crea un documento 80 × 80 px. Ho intenzione di ridimensionare rapidamente ogni immagine e salvare le miniature per abbinarle. Quindi aggiornando gli elementi della vista elenco dovremmo includere alcuni altri elementi.

Controlla il codice qui sotto e il mio esempio dimostrativo per vedere cosa intendo.

[Anteprima demo live]

 
 
  
Compiti di Wunderkit
 
di Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
di Scott Hill
 
  
App Forum per Facebook
 
di Ionut Zamfir
 
  
cinguettio
 
di Sam Jones
 
 
 

Le classi per ui-li-rubrica e ui-li-disc vengono aggiunti di default nel foglio di stile jQuery Mobile. Questo è simile alla classe dell'immagine ui-li-pollice che ridimensiona automaticamente ciascuna barra di visualizzazione elenco in base all'altezza dell'immagine. Ora da qui puoi costruire di più sul frontend con animazioni, effetti di pagina, fogli di stile, ecc.

In alternativa, è possibile iniziare a costruire un sistema di backend per caricare nuove immagini e tagliare automaticamente le miniature da includere nell'elenco. C'è così tanta flessibilità con jQuery Mobile che quasi non puoi etichettarlo solo come una libreria JavaScript. È più di un intero framework HTML5 / CSS / jQuery per creare app mobili rapide e scalabili.

Conclusione

Al momento della stesura di questo articolo, il team jQuery Mobile ha ufficialmente pubblicato RC1.0 della libreria di codici. Ciò significa che la maggior parte se non tutte le principali correzioni dei bug sono state schiacciate e ora i tester si stanno attrezzando per una versione completa. Per questo motivo non troverai molte informazioni sul web.

Ma con l'avanzare dei mesi gli sviluppatori web sono sicuri di cogliere la tendenza. Le applicazioni mobili e persino i layout web mobili stanno diventando sempre più popolari con l'enorme aumento degli smartphone. Gli sviluppatori Web non hanno il tempo di imparare un linguaggio di programmazione completo per creare app per Android / iOS. Pertanto, jQuery Mobile è un'alternativa sottile che include il supporto per la maggior parte del software del settore mobile e continua a crescere ogni giorno con una comunità di sviluppatori attiva.