Designul aplicației mobile / Ghidul începătorului Dev pentru jQuery Mobile

În ultimii 2-3 ani, am înregistrat o creștere puternică în ceea ce privește browserul și suportul de operare pentru site-urile mobile. În special, iOS și platformele Android ale Apple vin în minte. Dar altele, cum ar fi PalmOS și Blackberry sunt încă în mix. Până de curând a fost foarte dificil să se potrivească o singură temă mobilă în toate aceste platforme.

JavaScript a fost un început, dar până acum nu a existat nici o bibliotecă cu adevărat unificată. jQuery Mobile ia toate cele mai bune caracteristici ale jQuery și le portă pe o sursă de web mobilă. Biblioteca este mai mult ca un cadru care include animații, efecte de tranziție și stiluri CSS automate pentru elementele HTML de bază. În acest ghid sper să introduc platforma într-un mod în care vă puteți simți confortabil în proiectarea propriilor aplicații mobile jQuery.

Caracteristici și suport OS

Motivul pentru care sugerez să învăț jQuery Mobile peste orice alte cadre este simplitatea. Codul a fost construit pe baza jQuery și are o echipă activă de dezvoltatori care scrie scripturi și editează bug-uri. Dintre numeroasele caracteristici se numără suportul HTML5, legăturile de navigare activate de Ajax și manipulatorii pentru atingerea / deplasarea evenimentelor.

Suportul variază între telefoane și este împărțit într-o diagramă de 3 categorii din A-C. A este nivelul de vârf care se mândrește cu suportul deplin al jQuery Mobile, B are totul, cu excepția lui Ajax, în timp ce C este un element de bază HTML cu puțin până la nici un JavaScript. Din fericire majoritatea sistemelor de operare populare sunt pe deplin suportate - am adăugat o listă de mai jos, doar câteva exemple.

• 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

Dacă doriți să aflați mai multe, încercați să citiți pe pagina oficială a documentelor. Nu este scris in gabberish si de fapt se simte foarte usor de urmarit de-a lungul. Acum, să ne concentrăm asupra principiilor de scriere a unei pagini mobile jQuery și asupra modului în care putem construi o aplicație mică!

Șablonul HTML standard

Pentru a obține prima dvs. aplicație mobilă care funcționează, există un set de șablon la care ar trebui să începeți. Aceasta include codul de bază jQuery împreună cu JS și CSS mobil, toate găzduite din jQuery CDN. Consultați exemplul de mai jos.

Singurele elemente străine de aici ar trebui să fie cele două meta-etichete. Topul viewport tag-ul actualizează browserele mobile pentru a utiliza un efect de zoom complet. Setarea valorii width = dispozitiv lățime va seta lățimea paginii exact la lățimea ecranului telefonului. Și cel mai bine nu dezactivează funcțiile de zoom deoarece jQuery Mobile se poate adapta layout-urilor de schimbare.

Următoarea meta-etichetă X-UA-Compatibil doar forțează Internet Explorer să redea codul HTML în cea mai recentă iterație. Browserele mai vechi și, în special, cele mobile vor încerca să obțină erori de redare nefamiliare.

Construirea conținutului corpului

Acum, acest lucru este în cazul în care jQuery mobil poate deveni complicat. Fiecare pagină HTML nu este neapărat o pagină pe site-ul mobil. Cadrul utilizează atributele de date HTML5, pe care le puteți crea la un capriciu prin adăugarea date- în prealabil. În mod similar date-rol = „pagina“ poate fi setat la mai multe divs într-un singur fișier HTML, oferindu-vă mai mult de o pagină.

Apoi, vă mutați între aceste pagini cu legături de ancoră și un ID unic. Această configurare este o idee bună pentru aplicațiile de bază, simple. Dacă aveți nevoie doar de 3-5 pagini, atunci de ce să nu le stocați într-un singur fișier? Cu excepția cazului în care aveți o mulțime de conținut scris, caz în care încercați să utilizați PHP include pentru a economisi timp.

Verificați exemplul de cod de mai jos dacă vă pierdeți.

 
 
 
Bara de titlu superioară
 
 
 
Afișați o altă pagină??
 
Sugestie: faceți clic pe butonul de mai jos!
 
Despre noi
 
  
 
 
 
Aici
 
 
 
doar un conținut suplimentar, de asemenea.
 
Adică, puteți întoarce-te oricand.
 
 
   

Aruncați o privire la link-ul de ancorare din pagina index pentru o clipă. Observați că am adăugat atributul date-rol = „buton“ pentru a configura linkul ca pe un buton. Dar în loc să folosim stilurile implicite pe care le includem date temă = „c“. Aceasta comută între 1 din 5 (teme a-e) șabloane care vin ambalate în mod prestabilit ca stiluri CSS în cadrul jQ Mobile.

Butonul meu include și lățimea întregii pagini. Pentru a elimina comportamentul, trebuie să setăm elementul de la bloc la afișarea inline. Atributul pentru a face acest lucru este date inline = "true" pe care le puteți adăuga pe orice buton de ancorare.

Bara antet și subsol

Pe partea de sus și de jos a aplicațiilor dvs. ar trebui să adăugați conținut antet și subsol. Acest stil de design este adesea atribuit aplicațiilor iOS care au devenit mai întâi populare folosind App Store-ul Apple pentru dispozitive mobile. jQ Mobile utilizează atribute ale rolului de date pentru a defini antetul, subsolul și conținutul paginii. Să aruncăm o privire scurtă asupra acestor zone.

Butoanele de sus a barei

În mod prestabilit, bara de sus acceptă un set de două (2) linkuri într-un mod similar cu alte aplicații mobile. iOS este implicit să folosească a “înapoi” butonul spre stânga și de multe ori un “Opțiuni” sau “config” pe dreapta.

 
 Setări 
Aici
 
 

Codul de mai sus se concentrează doar pe containerul div pentru pagina Despre, împreună cu conținutul antetului. Atributul HTML suplimentar Date-add-back-BTN = "true" va funcționa numai când este adăugat la un rol de date pe pagină. Scopul este să includeți în mod automat un buton înapoi care funcționează similar butonului de navigare al browserului dvs..

Am fi putut adăuga manual un buton înapoi cu un cod similar cu cel utilizat în zona de conținut. Dar simt că durează mult mai mult pentru a configura în special pe mai multe pagini. Toate legăturile de ancorare din secțiunea antet vor fi implicite în pozițiile butonului stânga / dreapta. Prin utilizarea class = "BTN-dreapta-ui" acest lucru mi-a restabilit butonul Setări, astfel încât să existe spațiu liber pentru butonul din spate. De asemenea, folosesc stilurile tematice secundare pentru a le da ceva extra!

Footer Navigation

În zona footerului, mulți nu se simt foarte folosiți la început. Este un loc în care puteți stoca materiale legate de drepturile de autor și legături mai importante, dar acest lucru ar putea fi adăugat la fel de ușor în partea de jos a zonei de conținut. Deci ce bun foloseste subsolul?

Cel mai bun exemplu pe care l-am văzut utilizează spațiul de subsol ca sistem de navigare în care legăturile de file apar pentru a controla navigarea pe pagină. Există o mulțime de opțiuni în care puteți selecta efectele de ecran complet, adăugați pictograme, ajustați plasarea și câteva alte atribute. Dar să construim doar un simplu subsol cu ​​3 butoane pentru a obține o idee despre cum funcționează acest lucru.

• Previzualizați Live Demo

Deci, aici este un cod de subsol pentru secțiunea despre pagina. date-rol = "navbar" ar trebui adăugat pe elementul recipientului care conține o listă neordonată și nu elementul UL însuși. Fiecare link din listă este tratat ca o bară tabulară, care este împărțită în mod egal pe baza numărului total de linkuri. Clasa suplimentară de -corp-ui b adaugă doar efecte estetice pe măsură ce trecem de la câteva dintre stilurile disponibile.

Dacă observați pe primul buton, am atributul date-direcție = "reverse". Chiar dacă aș putea folosi setarea butonului pentru a reveni pe pagina de pornire, am folosit în schimb ID-ul paginii #index. În mod prestabilit, fereastra aplicației va trece la dreapta, care arată destul de lipicioasă, deoarece vă așteptați ca animația să se deplaseze înapoi. Puteți juca cu mai multe dintre aceste efecte animate dacă aveți timp. Consultați pagina cu informații despre tranziții din documentația jQuery.

Ajax și pagini dinamice

Primul segment a deschis cu adevărat punctele-cheie pentru construirea unei aplicații mobile cu jQuery. Dar vreau să încep o nouă aplicație care să încarce datele dintr-o pagină externă. Voi folosi un script PHP foarte simplu pentru a atinge $ _REQUEST [] variabilă și afișa un mic Dribbble împușcat în consecință. Ecranul de mai jos vă va oferi o idee despre ce vom construi.

Mai întâi voi seta o pagină index.html pe șablonul implicit. Pentru acest ecran de pornire, folosesc o listă de vizualizare a listei pentru a afișa fiecare link în ordine. Acest lucru se face în zona de conținut cu un date-rol = "listview" atribut pe containerul listei. Tăcând aceleași chestii cu antetul ca înainte, am adăugat tot codul meu de pe această pagină de index nouă de mai jos.

 
 
 
Octombrie 2011 Shots
 
 
 
 
Prima imagine
 
A doua imagine
 
Imaginea a treia
 
A patra imagine
 
 
  
   

Fiecare dintre legăturile de ancorare din vizualizarea listei mele indică același fișier - index.php. Dar trecem parametrul imgid ca variabila de cerere. În fișierul image.php luăm ID-ul și testăm-l cu 4 valori prestabilite. Dacă se potrivește oricare dintre acestea, vom folosi adresa URL și titlul imaginii potrivite, în caz contrar vom afișa doar o fotografie Dribbble implicită.

Script de încărcare imagine

Scriptul image.php mai are șablonul mobil jQuery implicit adăugat în cod. De fapt, are un antet și un subsol foarte asemănător, cu excepția adăugării atributului link-back Date-add-back-BTN = "true". Observați că acest buton va apărea numai dacă venim din index.html mai întâi! Încercați să încărcați direct image.php și nimic nu va apărea, deoarece nu există “înapoi” a se deplasa către.

Cred că putem înțelege mai bine codul examinând mai întâi logica PHP. Noi folosim a intrerupator / caz pentru a verifica cele 4 ID-uri diferite și pentru a oferi un titlu de antet, o adresă URL a imaginii și un link sursă original de artist.

Totul pare destul de simplu - chiar și un novice PHP dev ar trebui să poată urmări de-a lungul! Și dacă nu înțelegeți că nu este important pentru codul jQuery oricum, așa că nu vă faceți griji. Ar trebui să schimbăm acum și să aruncăm o privire la șablonul pe care l-am construit în cadrul acestei noi pagini. Tot codul HTML este adăugat după întregul bloc PHP de mai sus. Am folosit codul “imagini” pentru container și chiar setarea antetului pentru a schimba cu fiecare fotografie nouă.

 
 
 
 
 
 Vizualizați originalul
 
 
  
 

Puteți vedea probabil cât de simplist este acest demo. Dar scopul este de a demonstra scalabilitatea mobilului jQuery. PHP poate fi adăugat cu ușurință în mix și puteți să scoateți câteva aplicații curate cu doar câteva ore de dezvoltare.

Design fantezie cu miniaturi de listă

Un ultim efect adăugat pe care îl putem pune în aplicare este utilizarea miniaturilor pentru a îmbunătăți pagina de înscriere. De asemenea, voi împărți textul într-o casetă de titlu și descriere pentru a afișa atât titlul de artă, cât și numele artistului.

Pentru a începe să deschideți Photoshop și să creați un document de 80 × 80 px. O să redimensionez rapid fiecare imagine și să salvez miniaturile pentru a se potrivi cu fiecare. Apoi, actualizarea elementelor de vizualizare a listei ar trebui să includă și alte câteva elemente.

Verificați codul de mai jos și exemplul demo-ului meu pentru a vedea ce vreau să spun.

[Preview Live Demo]

 
 
  
Sarcinile Wunderkit
 
de Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
de Scott Hill
 
  
Aplicația Forum pentru Facebook
 
de Ionut Zamfir
 
  
Stare de nervozitate
 
de Sam Jones
 
 
 

Clasele pentru -li-ui poziție și -li-ui desc sunt adăugate în mod implicit în foaia de stil jQuery Mobile. Acesta este similar cu clasa de imagini -li-ui degetul mare care redimensionează automat fiecare bara de vizualizare a listei în funcție de înălțimea imaginii. Acum, de aici puteți construi mai mult pe interfață cu animații, efecte de pagină, foi de stil etc..

Sau, alternativ, ați putea începe să construiți un sistem backend pentru a încărca imagini noi și pentru a tăia în mod automat miniaturile pentru a le include în listă. Există atât de multă flexibilitate cu jQuery Mobile încât aproape că nu îl puteți eticheta numai ca o bibliotecă JavaScript. Este mai mult un cadru HTML5 / CSS / jQuery pentru construirea de aplicații mobile rapide și scalabile.

Concluzie

De la scrierea acestui articol, echipa jQuery Mobile a lansat oficial RC1.0 din biblioteca de coduri. Aceasta înseamnă că cele mai multe, dacă nu toate, rezolvările majore ale erorilor au fost suprimate și acum testerele se pregătesc pentru o eliberare completă. Din această cauză nu veți găsi o mulțime de informații pe web.

Dar, pe măsură ce dezvoltatorii de luni avansează pe săptămână, sunt siguri că vor lua această tendință. Aplicațiile mobile și chiar dispozitivele web mobile cresc în popularitate datorită creșterii uriașe a smartphone-urilor. Dezvoltatorii web nu au timp să învețe un limbaj de programare complet pentru construirea de aplicații Android / iOS. Astfel, jQuery Mobile este o alternativă subțire, care include suport pentru o majoritate a software-ului din industria mobilă și continuă să crească în fiecare zi cu o comunitate dezvoltatoare activă.