Share
Doriți să aflați cum să utilizați PhoneGap, dar nu știți de unde să începeți? Alăturați-vă nouă pe măsură ce am pus împreună "Sculder", nu numai un tribut adus unei serii excelente de televiziune science fiction, ci o aplicație mobilă nativă pentru credinciosul în tine!
În ultimele două părți am instalat Phonegap, am reușit o lume bună și am analizat câteva dintre funcțiile pe care Phonegap le oferă. În următoarele două părți, vom construi aplicația noastră și vom arunca o privire la unele dintre provocările care ar putea apărea în acest sens.
Înainte de a ajunge la cod, va trebui să ne gândim puțin. În acest fel, știm exact ce vrem să obținem și putem avea o idee bună despre experiența utilizatorului. S-ar putea să realizați o lucrare grozavă de la simpla lovire a codului imediat (ceva ce fac tot timpul), dar chiar și puțină planificare în prealabil poate merge mult. Gândirea prin scenarii din cap vă va permite să rezolvați problemele din timp.
În primul rând, trebuie să știm ce caracteristici principale ale aplicației vor fi, cum vor fi accesate și cum vor fi utilizate. Aplicația pe care o vom construi va avea următoarele caracteristici:
Dacă doriți să faceți cadre pentru proiectele dvs., acestea sunt întotdeauna bune pentru a vă asigura că știți ce doriți să faceți cererea dvs. și, de asemenea, aproximativ ce doriți să arate. În cazul în care aplicația va fi mare și au o mulțime de funcționalitate, aș face unele wireframes, dar în acest caz cred că aplicația este mică și astfel putem rezolva funcționalitatea destul de bază ca am construi app.
Dacă doriți să creați cadre de rețea, există câteva instrumente destul de bune pentru a vă ajuta.
mierloi este un instrument online în care puteți crea caracterele în browser. Puteți să-l încercați aici
Balsamiq este o aplicație Adobe Air cu o întreagă încărcare de șabloane și elemente. Are un stil ciudat, la fel ca Mockingbird. Puteți descărca aici.
OmniGraffle este o aplicație mac numai pe care puteți obține un studiu gratuit de 14 zile aici. Omnigraffle este preferatul meu personal și există o mulțime de șabloane pe Graffletopia pentru tine de folosit.
Uite și simt este un aspect important al oricărei aplicații. Când vine vorba de aplicații mobile, este o zonă în care mulți se înșelă des (mai ales din cauza lipsei de înțelegere). Nu sunt un designer și nu mă prefac că sunt una, deci dacă nu am un designer la îndemână pentru a face desenele, de obicei, voi proiecta doar în browser ca și cum aș cod (sau pe dispozitiv în acest caz).
Dacă doriți să vă asigurați că aplicația dvs. arată și se simte bine să o utilizați (și nu sunteți una), angajați-o! Ca un dezvoltator, designerii buni costă bani. În timp ce s-ar putea să nu vreți să vă descurcați pentru ceva ce ați putea să vă faceți singur, este mai bine să aveți pe cineva care înțelege designul pentru a face acest lucru pentru dvs. Aplicația dvs. va fi de o sută de ori mai bună pentru a face acest lucru!
Au fost câteva tutoriale excelente de design aici pe Mobiletuts +, care vă vor oferi o înțelegere excelentă a ceea ce este necesar atunci când scufundați în design pentru mobil.
Una dintre cele mai importante considerații pentru designul dvs. este cantitatea de imagini pe care o utilizați. Dacă proiectul dvs. va cere să tăiați fișierele PSD și să utilizați o mulțime de imagini - ceva nu este în regulă - vrem să facem cât mai mult posibil cu CSS și pe măsură ce construim pentru browsere moderne moderne, putem folosi puterea multora noile tehnici CSS3 pentru ieșirea dorită. Când începeți să utilizați o mulțime de imagini, acesta începe să influențeze performanța aplicației. Când trebuie să folosim imagini, care este probabil, ar trebui să construim un sprite (un fișier imagine care conține toate imaginile noastre) pentru a salva cererile HTTP. De asemenea, este posibilă stocarea în memoria cache a imaginilor pe dispozitiv sau utilizarea stocării locale.
Acum este momentul să intrăm în codificarea HTML, CSS și Javascript pentru aplicația noastră.
Vom incepe cu cateva HTML de baza.
Sculder
Suportul CSS pe mobil este bun, dar nu este grozav. În timp ce o mulțime de stiluri comune sunt acceptate, există și unele "gotcha", de asemenea. Una dintre resursele mele preferate pentru verificarea suportului este caniuse.com. În timp ce site-ul nu include fiecare browser pentru mobil, este o referință utilă.
Mergeți mai departe și creați o foaie nouă de stiluri goale și includeți-o în capul html-ului dvs. După cum probabil ați făcut deja cu aplicațiile browserului de pe desktop, configurați câteva stiluri de resetare de bază.
html, organism margine: 0; umplutura: 0; frontieră: 0; corp font-family: Arial, sans-serif; line-height: 1.5; font-size: 16px; fundal: #fff; padding: 5px; culoare: # 000; cuvânt-wrap: break-cuvânt; -webkit-text-size-adjust: nici unul; h1, h2, h3, h4, h5, h6 font-greutate: normal; p img float: left; margine: 0 10px 5px 0; umplutura: 0; img frontieră: 0; max-lățime: 100%;
Apoi, vom adăuga câteva coduri de bază HTML - un antet și câteva controale ale filelor.
Sculder
În primul rând, am să dau fundalului o culoare și apoi să modelez antetul și subsolul. Voi merge mai departe și le veți pune într-un mod destul de mediu, fixându-le în partea de sus și în partea de jos a ecranului și utilizând iScroll pentru a ne oferi posibilitatea de a depăși lipsa de sprijin pentru Poziția: fix în majoritatea dispozitivelor.
/ * Stiluri principale * / corp fundal: # 222; header top: 0; stânga: 0; înălțime: 45px; footer jos: 0; stânga: 0; înălțime: 48px; background-color: # c27b00; frontieră: 1px solid #eee; antetul, subsolul background-color: # deb500; padding: 0; Poziția: absolută; z-index: 2; font-size: 20px; lățime: 100%; text-align: center; Culoare: # f3f3f3; font-weight: bold; text-shadow: 0 -1px 0 rgba (0,0,0,0,5); line-height: 45px; h1 margine: 0; text-transform: majuscule; #wrapper poziție: absolută; z-index: 1; top: 45px; bottom: 48px; stânga: 0; lățime: 100%; overflow: auto; # principal-conținut poziție: absolută; z-index: 1; lățime: 100%; padding: 0;
Apoi, vom descărca iScroll 4 de aici și vom include iscroll-lite.js fişier. Acest lucru ne oferă funcționalitatea de bază de care vom avea nevoie. Vom face, de asemenea, o app.js fișier pentru a gestiona toate funcționalitățile JavaScript. Includeți aceste fișiere în capul dvs. index.html.
În fișierul nostru Javascript trebuie să inițiem o căutare.
Accentsconagua
var theScroll; funcția de defilare () theScroll = nou iScroll ("wrapper"); document.addEventListener ('DOMContentLoaded', parcurgere, false); Acum vom adăuga bara de tab-uri în subsolul nostru.
Vom proiecta bara de tab, astfel încât fiecare element să ia o treime din spațiul disponibil.
# tab-bar margine: 0; padding: 0; # tab-bar li afișare: inline; plutește la stânga; lățime: 33,333%; # tab-bar a culoare: #cdcdcd; afișare: bloc; font-weight: bold; overflow: ascuns; poziție: relativă; text-align: centru; text-decoration: nici unul; -webkit-touch-Callout: none;
Toate acestea sunt CSS destul de mediu pe care le-ați putea folosi într-o pagină Web. Singurul care ar putea fi unul ciudat la tine este -webkit-touch-Callout: nici unul. Această regulă este de a opri acțiunea implicită atunci când un utilizator deține un link.
Tot ce vom face cu bara tab, dar poate doriți să adăugați icoane la dvs., la fel ca majoritatea aplicațiilor. Nu uitați să vă asigurați că utilizați sprites pentru imaginile dvs. pentru a menține succesul pe performanță minimal.
Acum, când avem scheletul aplicației noastre pregătite, putem căuta în paginarea aplicației noastre. Există o serie de modalități bune de a face acest lucru. Unul este de a încărca totul în față și apoi de a ascunde paginile pe care nu mai dorim să le arătăm la început, apoi cu un clic pe un link putem folosi CSS pentru a glisa un nou container în vizualizare. O altă opțiune este de a folosi Ajax și de a face o cerere Ajax pentru un fișier HTML și apoi glisați în vedere. Deoarece aceasta este o aplicație relativ mică, nu există nici un rău în încărcarea totul în față și utilizarea CSS pentru cea mai mare parte a manipulării paginii, la fel ca jQuery Mobile nu.
Mai întâi vom înființa niște pagini în interiorul containerului nostru principal.
Apoi, asigurați-vă că link-urile href corespunde cu acestea.
Acum vom ascunde toate paginile și vom afișa doar pagina cu actual clasă.
#pages> div afișare: niciunul; #pages> div.current display: bloc;
Apoi, trebuie să ne scufundăm în JavaScript. Mă duc să merg și să folosesc jQuery pentru restul proiectului (nu jQuery mobile). Dacă doriți, aveți posibilitatea să jQuerify iScroll init (sau nu). Asigurați-vă că ați scăpat versiunea miniatură a jQuery în directorul JS, de asemenea.
În primul rând, voi lega un clic pe ancorele din tab-bar, pe măsură ce folosim jQuery 1.7, putem folosi noul .pe() funcţie. Vom preveni apoi acțiunea implicită a unui link, stocați href din link-ul clic într-un pagina următoare variabile, eliminați actual din pagina curentă și adăugați în final clasa la pagina pe care ați făcut clic.
$ ('# tab-bar a'), pe ('click', funcția (e) e.preventDefault (); var nextPage = $ (e.target.hash); removeClass ("curent"); nextPage.addClass ("curent");); Veți avea acum câteva pagini de bază de bază ca conținut divs se va ascunde și se va afișa când se dau clic pe link-uri.
Acest lucru este și va funcționa absolut bine, dar pentru a adăuga un pic suplimentar la paging vom folosi unele CSS și să facă trecerea între pagini un pic mai frumos, cu o culoare se estompeze în, se estompeze.
În primul rând trebuie să ne asigurăm că paginile noastre sunt poziționate într-un mod care ne oferă un anumit control asupra afișării lor. Adăugați următorul CSS.
#pages position: relative; / * Actualizați acest stil * / #pages> div display: none; poziția: absolută; top: 0 lungine: 0; lățime: 100%;
Acum vom folosi animația CSS pentru a anima tranziția paginii. Mai intai vom incepe cu o setare generica pentru functia de animatie si calendarul.
.in, .out -webkit-animație-temporizare-funcție: easy-in-out; -webkit-animație-durată: 400ms;
Am setat cadrele cheie pentru animarea cadrelor cheie.
@ -webkit-keyframes fade-in de la opacity: 0; la opacity: 1;
În sfârșit, am setat indexul Z pentru a ne asigura că pagina pe care tocmai l-am stins este pe partea superioară.
.fade.in -webkit-animație-nume: fade-in; z-index: 5; .fade.out z-index: 0;
Acum trebuie să adăugăm mai multe JavaScript pentru a adăuga și elimina clasele CSS la clic. Mai intai avem nevoie de o functie care va lua un parametru, care va fi pagina de navigat, apoi va adauga clasele necesare pentru a distruge noua pagina in si va lega o functie webkitAnimationEnd, aceasta va elimina apoi clasele necesare. Funcția arată astfel.
pagina de funcții (toPage) var toPage = $ (toPage), dinPage = $ ("# pagini .current"); toPage.addClass ("se estompează în"). un ("webkitAnimationEnd", funcția () fromPage.removeClass ("fade out out"), toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Dacă nu ați văzut niciodată metoda jQuery .unu() înainte de a verifica documentația, este doar o modalitate de legare și apoi dezlegare.
Dacă testați acum pe dispozitivul dvs., veți observa că dacă faceți clic pe linkul actual al paginii, acesta va scădea. Trebuie să punem un dacă înainte de a rula funcția paginii noastre pentru a ne asigura că nu suntem deja pe pagina curentă - dacă suntem noi putem doar să ne întoarcem din funcție.
pagina de funcții (toPage) var toPage = $ (toPage), dinPage = $ ("# pagini .current"); dacă (toPage.hasClass ("curent") || toPage === dinPage) return; ; toPage.addClass ("se estompează în"). un ("webkitAnimationEnd", funcția () fromPage.removeClass ("fade out out"), toPage.removeClass ("fade in")); fromPage.addClass ("fade out"); Acum puteți să aruncați niște text în containerul fiecărei pagini și să vă testați pe un dispozitiv.
Am inceput acum sa construim o aplicatie web si sa gasim layout si paging. În partea următoare vom începe să ne construim paginile, să depanem pe mobil și să începem procesul de integrare a telefonului.
