În ultimul meu articol introducând Sencha Touch, am discutat despre abordarea utilizatorilor de dispozitive mobile prin intermediul aplicațiilor web în loc de aplicațiile native și a avantajelor și dezavantajelor distincte ale acestei abordări. Acest lucru este frumos, dar ce zici dacă doriți doar să împingeți conținut simplu la utilizatorii de pe dispozitivele mobile și nu aveți nevoie de sofisticarea unei aplicații obișnuite? Aici intrăm în crearea unui site web mobil. În această serie, vom crea o temă puternică pentru Wordpress mobilă pe care oricine o poate aplica blogului pentru a-și face site-ul ușor accesibil utilizatorilor de dispozitive mobile.

Site-ul Web mobil vs. versiunea web

Linia dintre site-urile web mobile și aplicațiile web este una care devine din ce în ce mai amestecată și neclară în fiecare zi. În multe cazuri, este dificil să se facă diferența între cele două. În scopul acestui tutorial, vom defini o aplicație web ca fiind ceva care necesită funcții mai avansate, în timp ce scopul unui site mobil este de a împinge conținutul unui site obișnuit în browserele mobile într-un mod mai ușor accesibil.

Ce vrem: Wordpress

Trebuie să mărturisesc, eu sunt un fan de Wordpress, dar pentru un motiv bun. Wordpress este o soluție versatilă pentru aproape orice nevoie de CMS. În acest caz, este soluția perfectă. Vrem un site web care să poată gestiona atât utilizatorii de dispozitive mobile cât și cei de pe desktop. Iată câteva dintre avantajele pe care le poate oferi Wordpress:

• Păstrați conținut într-un singur loc, dar aveți o temă separată pentru utilizatorii de dispozitive mobile și desktop.
• Ușor de editat de pe computer sau telefon (ați verificat aplicația Wordpress?)
• Puteți reutiliza cu ușurință aceeași temă pentru toate site-urile Wordpress pe care le puteți avea

Ce dorim și noi: JQTouch

Știu în ultimul meu articol, l-am lăudat pe Sencha Touch spunând:Sencha Touch este probabil unul dintre cele mai puternice cadre de aplicații web mobile acolo. " Acest lucru este complet adevărat, dar nu o vom folosi pentru acest tutorial. Unii ar putea întreba de ce. Ei bine, cheia este partea "web app". Sencha Touch este mult mai potrivit pentru aplicațiile web de nivel superior. Nu avem nevoie de setul bogat de caracteristici ale Sencha Touch. Trebuie să găsim ceva ușor de implementat, dar încă foarte eficient. Avem nevoie jQTouch. Ce este jQTouch? De pe site-ul lor:

Un plugin jQuery pentru dezvoltarea webului mobil pe dispozitive iPhone, iPod Touch și alte dispozitive de gândire înainte.

Interesant este faptul că jQTouch este, de asemenea, parte a Sencha Labs, astfel încât aceștia împărtășesc o mulțime de aceleași funcționalități uimitoare. Cu toate acestea, jQTouch va fi întotdeauna licențiat sub licența MIT. De fapt, David Kaneda a fost vital în dezvoltarea celor două. Diferența majoră dintre Sencha Touch și jQTouch este că, în timp ce Sencha Touch este un geniu în puterea și capacitățile sale, jQTouch este un geniu în simplitatea și eficacitatea sa.

Descărcați jQTouch

Vom avea nevoie de cea mai recentă versiune a jQTouch astfel încât du-te la jqtouch.com și faceți clic pe descărcare pentru a apuca o copie.

Descarcă Wordpress

În timpul descărcării, este posibil să descărcați cea mai recentă versiune a Wordpress (3.0 în momentul postării) de la wordpress.org. În tutorialul următor, vom seta Wordpress pe un server local de testare pentru a testa tema noastră. Dar pentru moment, lăsați-l la o parte.

Redarea cu jQTouch

Acum că ați descărcat jQTouch, deschideți-l și vom explora cadrul mai detaliat. În tutorialul de astăzi, vom acoperi elementele de bază ale programului jQTouch. În segmentul următor vom crea tema.

Pentru testare, voi folosi simulatorul oficial Apple iPhone. Pentru a rula simulatorul, va trebui să descărcați SDK-ul iOS la centrul de dezvoltare al Apple. Descărcarea SDK-ului necesită înregistrarea mai întâi ca dezvoltator pentru iPhone (înregistrarea este gratuită) și veți avea nevoie de un Mac care rulează OS X Snow Leopard. Nu aveți un Mac sau nu doriți să vă înregistrați ca dezvoltator de iPhone? Nu vă faceți griji, puteți urmări împreună cu aproape orice alt browser, dar rezultatele dvs. pot fi mai puțin exacte decât a mea (să sperăm că nimeni nu citește acest lucru este încă rulează IE6).

Continuați și deschideți Simulatorul iPhone sau browser-ul dvs. de alegere. Dacă aveți Xcode și SDK-ul iOS instalat, ar trebui să puteți căuta doar "Simulator" în centrul atenției pentru a găsi aplicația.

Acum, deschideți dosarul jQTouch pe care l-ați descărcat mai devreme și navigați la demonstrații> principale. Trageți index.html în Simulatorul iPhone sau într-un alt browser.

Redați-vă cu această aplicație de probă pentru a vă familiariza cu interfața jQTouch.

Învățarea din aplicația jQTouch Demo

Demo-ul pe care l-am explorat mai sus este un exemplu foarte bun pentru ceea ce poate face jQTouch. Restul acestui tutorial este dedicat examinării câtorva porțiuni din cod în demo, începând cu aspectul de bază.

Pentru a crea un aspect de bază, trebuie să definiți ecranul de pornire sau o parte a codului HTML pe care jQTouch trebuie să îl încarce ca conținut principal la domiciliu, cum ar fi:

Bara de instrumente

Pentru a adăuga bara de instrumente pe care o vedem în partea superioară, ați adăuga pur și simplu următoarele rânduri:

 
 
 
Site-ul Wordpress
 
 

Crearea meniurilor

Dacă doriți să creați un set de meniu ca în imaginea de mai sus, tot ce trebuie să faceți este să creați o listă neordonată cu clasa rotunjită. Iată codul:

 
 
 
Site-ul Wordpress
 
 
 
Elementul de meniu 1
 
Elementul de meniu 2
 
 

Fiecare element de listă include un link. În majoritatea cazurilor, link-ul va merge la o altă parte a aceluiași document ca mai sus.

Conectarea meniurilor

Dacă dorim ca meniul să funcționeze efectiv, trebuie să creăm locurile pentru care să meargă legăturile. Dacă vrem să creăm un meniu pe mai multe niveluri, vom face așa:

 
 
 
Site-ul Wordpress
 
 
 
Elementul de meniu 1
 
Elementul de meniu 2
 
 
 
 
 
Titlul barei de instrumente
 Înapoi 
 
 
Punctul de meniu mort
 
Punctul de meniu mort
 
Punctul de meniu mort
 
Punctul de meniu mort
 
 
 
 
 
Titlul barei de instrumente
 Înapoi 
 
 
Punctul de meniu mort
 
Punctul de meniu mort
 
Punctul de meniu mort
 
Punctul de meniu mort
 
 

Observați elementul de meniu dinapoi pe care l-am adăugat, de asemenea, acolo. Clasa de spate va da automat elementului funcționalitatea corespunzătoare.

Încărcați o pagină externă prin AJAX

jQTouch face este foarte ușor să încărcați pagini externe la fel ca și când ar fi fost o parte a aceluiași document. În loc de eticheta de ancorare care leagă un element de pe aceeași pagină, pur și simplu încărcați o pagină html cu atributul "href":

 
 
AJAX
 

Examinare și previzualizare

În acest tutorial, ați văzut câteva dintre fundamentele JQTouch. În următoarea tranșă a acestei serii, vom crea tema jQTouch, în care vom implementa principiile de mai sus și vom afla despre câteva concepte mai specifice. Iată o previzualizare: