Share
Vuoi imparare come usare PhoneGap, ma non sai da dove iniziare? Unisciti a noi mentre mettiamo insieme "Sculder", non solo un tributo ad una serie televisiva di fantascienza eccellente, ma un'applicazione mobile nativa a tutti gli effetti per il credente in te!
Nelle ultime due parti abbiamo installato Phonegap, ottenuto un ciao mondo in esecuzione, e poi dato un'occhiata ad alcune delle funzionalità che ci offre Phonegap. Nelle prossime due parti, costruiremo la nostra app e daremo un'occhiata ad alcune delle sfide che potrebbero sorgere nel farlo.
Prima di arrivare al codice, dovremo fare un po 'di pianificazione. In questo modo sappiamo esattamente cosa vogliamo ottenere e possiamo avere una buona idea dell'esperienza dell'utente. Potresti ottenere un grande lavoro semplicemente inserendo il codice immediatamente (qualcosa che faccio sempre), ma anche solo un po 'di pianificazione in anticipo può fare molto. Pensare attraverso gli scenari nella tua testa ti permetterà di affrontare i problemi nella fase iniziale.
Innanzitutto, dobbiamo sapere quali saranno le funzionalità principali dell'applicazione, come saranno accessibili e come verranno utilizzate. L'app che stiamo per costruire avrà le seguenti caratteristiche:
Se desideri realizzare wireframe per i tuoi progetti, è sempre bene assicurarsi di sapere cosa vuoi che faccia la tua applicazione e anche approssimativamente come vuoi che sia. Se l'applicazione sarà grande e avrà molte funzionalità, farei alcuni wireframe, ma in questo caso penso che l'applicazione sia piccola e quindi possiamo mettere a punto le funzionalità di base mentre costruiamo l'app.
Se vuoi creare wireframe, ci sono alcuni strumenti abbastanza buoni per aiutarti.
mimo è uno strumento online in cui è possibile creare i wireframe nel browser. Puoi provarlo qui
Balsamiq è un'applicazione Adobe Air con un intero carico di modelli ed elementi. Ha uno stile abbozzato molto simile a Mockingbird. Potete scaricarlo qui.
OmniGraffle è un'applicazione per Mac che puoi ottenere qui per una prova gratuita di 14 giorni. Omnigraffle è il mio preferito e ci sono un sacco di modelli su Graffletopia da usare.
Il look and feel è un aspetto importante di qualsiasi applicazione. Quando si tratta di applicazioni mobili, si tratta di un'area che spesso si sbaglia (principalmente a causa della mancanza di comprensione). Non sono un designer e non pretendo di esserlo, quindi se non ho un designer a portata di mano per fare i disegni, di solito disegno nel browser solo come codice (o sul dispositivo in questo caso).
Se vuoi assicurarti che la tua app sia piacevole da usare (e tu non ne sia una sola) noleggiane una! Come uno sviluppatore, i buoni designer costano soldi. Mentre potresti non voler sborsare qualcosa che potresti essere in grado di fare da solo, è meglio avere qualcuno che capisca il design per farlo per te. La tua app sarà cento volte migliore per farlo!
Ci sono stati alcuni tutorial di design su Mobiletuts +, che ti daranno una grande comprensione di cosa è richiesto quando ti immergi nel design per i dispositivi mobili.
Una delle considerazioni più importanti per il tuo design è la quantità di immagini che usi. Se il tuo progetto richiederà di tagliare i file PSD e usare molte immagini - qualcosa non va - vogliamo fare il più possibile con i CSS e mentre stiamo costruendo per browser abbastanza moderni, possiamo sfruttare il potere di molti nuove tecniche CSS3 per l'output desiderato. Quando inizi a utilizzare molte immagini, inizia a influire sulle prestazioni dell'applicazione. Quando dobbiamo usare le immagini, che è probabile, dovremmo creare uno sprite (un file immagine contenente tutte le nostre immagini) per salvare le richieste HTTP. È anche possibile memorizzare nella cache le immagini sul dispositivo o utilizzare anche la memoria locale.
Ora è il momento di entrare in realtà nella codifica di HTML, CSS e Javascript per la nostra applicazione.
Inizieremo con un codice HTML piuttosto semplice.
Sculder
Il supporto CSS sui dispositivi mobili è buono, ma non eccezionale. Sebbene siano supportati molti stili comuni, ci sono anche alcuni "gotcha". Una delle mie risorse preferite per il controllo del supporto è caniuse.com. Sebbene il sito non includa tutti i browser per dispositivi mobili, è un riferimento utile.
Vai avanti e crea un nuovo foglio di stile vuoto e includilo nella testa del tuo html. Come puoi già fare con le app del browser desktop, imposta alcuni stili di ripristino di base.
html, body margin: 0; padding: 0; confine: 0; body font-family: Arial, sans-serif; line-height: 1.5; font-size: 16px; sfondo: #fff; padding: 5px; colore: # 000; word-wrap: break-word; -webkit-text-size-adjust: nessuno; h1, h2, h3, h4, h5, h6 carattere-peso: normale; p img float: left; margine: 0 10px 5px 0; padding: 0; img border: 0; larghezza massima: 100%;
Successivamente, aggiungeremo un codice HTML di base: un'intestazione e alcuni controlli di tabulazione.
Sculder
In primo luogo, ho intenzione di dare allo sfondo un colore e poi di stile l'intestazione e il piè di pagina. Ho intenzione di andare avanti e disporli in un modo abbastanza media, fissandoli alla parte superiore e inferiore dello schermo e utilizzando iScroll per darci la possibilità di superare la mancanza di supporto per position: fixed nella maggior parte dei dispositivi.
/ * Stili principali * / body background: # 222; header top: 0; a sinistra: 0; altezza: 45px; footer bottom: 0; a sinistra: 0; altezza: 48px; background-color: # c27b00; border-top: 1px solid #eee; header, footer background-color: # deb500; padding: 0; position: absolute; z-index: 2; font-size: 20px; width: 100%; text-align: center; color: # f3f3f3; font-weight: bold; text-shadow: 0 -1px 0 rgba (0,0,0,0,5); line-height: 45px; h1 margine: 0; text-transform: maiuscolo; # wrapper position: absolute; z-index: 1; top: 45px; bottom: 48px; a sinistra: 0; width: 100%; overflow: auto; # main-content position: absolute; z-index: 1; width: 100%; padding: 0;
Successivamente, scaricheremo iScroll 4 da qui e includeremo il iscroll-lite.js file. Questo ci dà la funzionalità di base di cui avremo bisogno. Faremo anche un app.js file per gestire tutte le nostre funzionalità JavaScript. Includi questi file nella testa del tuo index.html.
Nel nostro file Javascript dobbiamo avviare iscroll.
Accentsconagua
var theScroll; function scroll () theScroll = new iScroll ('wrapper'); document.addEventListener ('DOMContentLoaded', scroll, false); Ora aggiungeremo la nostra barra delle schede nel nostro footer.
Disegneremo la nostra barra delle schede in modo che ogni elemento occupi un terzo dello spazio disponibile.
# tab-bar margin: 0; padding: 0; # tab-bar li display: inline; float: sinistra; larghezza: 33,333%; # tab-bar a color: #cdcdcd; blocco di visualizzazione; font-weight: bold; overflow: nascosto; posizione: relativa; allineamento del testo: centro; decorazione del testo: nessuna; -webkit-touch-callout: none;
Tutto questo è un CSS piuttosto medio che potresti usare in una pagina web. L'unico che potrebbe essere strano per te è il -webkit-touch-callout: nessuno. Questa regola è di interrompere l'azione predefinita quando un utente tiene premuto un collegamento.
Questo è tutto ciò che faremo con la barra delle linguette, ma potresti voler aggiungere delle icone alle tue, proprio come la maggior parte delle app. Ricordati solo di assicurarti di utilizzare gli sprite per le tue immagini per mantenere il risultato minimo sulle prestazioni.
Ora che abbiamo pronto lo scheletro della nostra applicazione, possiamo esaminare il paging tramite la nostra app. Ci sono molti buoni modi per farlo. Uno è quello di caricare tutto in anticipo e quindi nascondere le pagine che non vogliamo mostrare in un primo momento, quindi con un clic di un collegamento possiamo usare i CSS per far scorrere un nuovo contenitore in vista. Un'altra opzione è usare Ajax e creare una richiesta Ajax per un file HTML e poi farla scorrere in vista. Poiché si tratta di un'applicazione relativamente piccola, non c'è nulla di male nel caricare tutto in anticipo e utilizzare CSS per la maggior parte della gestione della pagina, proprio come fa jQuery Mobile.
Per prima cosa installeremo alcune pagine all'interno del nostro contenitore principale.
Quindi assicurati che i link href corrisponde a questi.
Ora nasconderemo tutte le pagine e mostreremo semplicemente la pagina con attuale classe.
#pages> div display: none; #pages> div.current display: block;
Successivamente, dobbiamo immergerci in alcuni JavaScript. Ho intenzione di andare avanti e utilizzare jQuery per il resto del progetto (non jQuery mobile). Se lo desideri, puoi jQuerificare l'init di iScroll (o meno). Assicurati di lasciare la versione minified di jQuery nella tua directory JS.
Per prima cosa legherò un clic alle ancore nella barra delle schede, dato che stiamo usando jQuery 1.7 possiamo usare il nuovo .sopra() funzione. Preventeremo quindi l'azione predefinita di un collegamento, archiviamo il file href del link cliccato in a pagina successiva variabile, rimuovere il attuale classe dalla pagina corrente e infine aggiungere la classe alla pagina cliccata.
$ ('# tab-bar a'). on ('click', function (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# pages .current"). removeClass ("current"); nextPage.addClass ("current");); Avrai ora un cercapersone molto semplice come contenuto div ora verrà nascosto e mostrato quando si fa clic sui collegamenti.
Questo è e funzionerà perfettamente, ma per aggiungere un po 'di più al paging useremo alcuni CSS e renderemo la transizione tra le pagine un po' più carina con una dissolvenza di base, dissolvenza in chiusura.
Per prima cosa dobbiamo assicurarci che le nostre pagine siano posizionate in un modo che ci dia un po 'di controllo sul loro display. Aggiungi il seguente CSS.
#pages position: relativo; / * Aggiorna questo stile * / #pages> div display: none; posizione: assoluta; top: 0; a sinistra: 0; width: 100%;
Ora useremo l'animazione CSS per animare la transizione della pagina. Per prima cosa iniziamo con alcune impostazioni generiche per la funzione di animazione e i tempi.
.in, .out -webkit-animation-timing-function: easy-in-out; -webkit-animation-duration: 400ms;
Abbiamo impostato i fotogrammi chiave per l'animazione dei fotogrammi chiave.
@ -webkit-keyframes fade-in from opacity: 0; a opacità: 1;
Infine, impostiamo lo Z-index per assicurarci che la pagina che abbiamo appena sfumato sia on-top.
.fade.in -webkit-animation-name: fade-in; z-index: 5; .fade.out z-index: 0;
Ora dobbiamo aggiungere altro JavaScript per aggiungere e rimuovere le classi CSS al clic. Per prima cosa abbiamo bisogno di una funzione che utilizzi un parametro, che sarà la pagina in cui navigare, quindi aggiungerà le classi necessarie per dissolvere la nuova pagina e associare una funzione a webkitAnimationEnd, questo rimuoverà quindi le classi necessarie. La funzione è simile a questa.
function page (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); toPage.addClass ("current fade in"). one ("webkitAnimationEnd", function () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Se non hai mai visto il metodo jQuery .uno() prima, controlla la documentazione è solo un modo per legare e poi slegare.
Se provi ora sul tuo dispositivo, noterai che se fai clic sul link della pagina corrente, questo si dissolvera. Dobbiamo inserire un Se dichiarazione prima di eseguire la nostra funzione di pagina per assicurarci che non siamo già sulla pagina corrente - se siamo possiamo solo tornare dalla funzione.
function page (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); if (toPage.hasClass ("current") || toPage === fromPage) return; ; toPage.addClass ("current fade in"). one ("webkitAnimationEnd", function () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Ora puoi scaricare del testo in ogni contenitore di pagine e testare su un dispositivo.
Ora abbiamo iniziato a costruire un'applicazione web e abbiamo lavorato sul layout e sul paging. Nella parte successiva inizieremo a costruire le nostre pagine, eseguire il debug sul cellulare e avviare la nostra integrazione con Phonegap.
