• Përshëndetje Vizitor!

    Nëse ju shfaqet ky mesazh do të thotë se ju nuk jeni regjistruar akoma. Edhe pse nuk jeni regjistruar ju arrini të shihni pjesën me të madhe të seksioneve dhe diskutimeve të forumit, por akoma nuk gëzoni të drejten për të marrë pjesë në to dhe në avantazhet e të qënurit anëtar i këtij komuniteti. Ju lutem : REGJISTROHUNI që të dërgoni postime dhe mesazhe në Forum-Al.

    Regjistrohu !

Zhvillimi i faqeve për iPhone dhe një shikim i jQTouch

Forum-Al

Aty ku shqiptarët mblidhen
Anëtar
Jan 5, 2010
Postime
560
Pikët
28
Vendndodhja
Forum

Pajisjet e reja si iPhone/iPod Touch, iPod, celularë të bazuar në Android, etj, praktikisht e kanë ndryshuar eksperiencën gjatë shfletimit të faqeve web. Shfletuesit e përfshirë në këto pajisje janë të fuqishëm sa versionet në desktop dhe ofrojnë pothuajse të njëjtat opsione. Faqet shfaqen të plota dhe më e rëndësishmja, shfletuesit janë modernë dhe suportojnë teknika të avancuara të HTML 5, CSS 3 dhe Javascript. Por në gjithë këtë ka një problem të “vogël”. Ekranet janë të vegjël, të rendit të 3-4″ (iPad është përjashtim me 10″) dhe të shfletosh faqe në to nuk është gjithmonë e lehtë.

Në këtë guidë do të shohim si të përmirësojmë eksperiencën e përdoruesëve të iPhone gjatë shfletimit të faqeve. Kushdo që ka përdorur një smart phone (telefon “inteligjent”) e di që të klikosh lidhje të vogla apo të kalosh një pjesë të mirë të kohës duke zmadhuar/zvogëluar është e bezdisshme dhe e prish pak eksperiencën e bukur që ekranet me prekje të ofrojnë. Duke përdorur disa teknika vërtetë të thjeshta, do ju tregoj si t’i mënjanoni këto probleme. Vërtetë guida i referohet iPhohe, por teknikat duhet të përdoren pa problem për çdo lloj pajisje të ngjashme (që ka shfletues të bazuar në webkit – Android, Palm Pre, etj). Për fat të keq nuk kam ndonjë pajisje tjetër përveç iPhone, kështu që s’mund t’i testoj e t’ju flas me siguri të plotë.

Përmirësimi i Eksperiencës

Ekranet që përdorim në Desktop/Laptop varjojnë nga 13″ në 30″ (apo edhe më tepër për të “çmendurit”) dhe të kryesh veprime në to është e thjeshtë, sepse ka hapësira plot. Gjithashtu faqet optimizohen për rezolucione të vogla (ku i vogël quhet 1024×768), kështu që çdo vizitor përfiton eksperiencë të plotë. Nga ana tjetër, ekranet e celularëve kanë rezolucione që rrotullohen tek 320×480 apo variacione të ngjashme. iPhone 4 është një hap i madh në cilësinë e ekranëve me rezolucionin 640×960, por rezolucioni tregon vetëm një pjesë të historisë. Madhësia e ekraneve është “problemi” më i madh, ku në ekstrem për momentin ndodhet HTC Evo 4G me ekranin 4.3″. Nëse hapim një faqe normale në iPhone, Safari do përpiqet t’a përfshijë të gjithë faqen brenda ekranit duke i bërë tekstet praktikisht të pa lexueshme nëse nuk zmadhohen. Proçesi zmadho, zvogëlo me gjeste vazhdon gjatë të gjithë kohës dhe mund të bëhet i lodhshëm.

Të gjitha këto që thashë mund të mënjanohen me vetëm pak punë. Krahas faqes normale që ja ofrojmë vizitorëve me kompjuter, ofrojmë edhe një faqe alternative për ata që janë me iPhone (kur them iPhone, flas edhe për celularë të ngjashëm). Në këtë faqe e bëjmë gjithçka më të thjeshtë, më të madhe e më intuitive për t’u përdorur me gishta. Faqja do të shfaqet njësoj në orientime të ndryshme (portret, landscape) dhe do të ofrojë disa funksionalitete specifike me Javascript. Disa mund të thonë pse duhet t’i hynë telasheve, kur faqet normale vërtetë nuk janë të optimizuara për iPhone, por të paktën hapen dhe lexohen. Kini parasysh që përdoruesit e internetit nga celulari po rriten ndjeshëm. Imagjinoni të keni një faqe X.com që ofron blerje produktesh dhe në treg keni vetëm një konkurrent të vërtetë, faqen Y.com. Faqja Y.com merr hapin dhe suporton plotësisht përdoruesit e celularëve duke i ofruar eksperiencë të përmirësuar, ndërsa ju jo. Si mendoni, ku do shkojnë vizituesit që përdorin celular?

Përmbatja Alternative

Si j’u thashë më sipër, eksperienca mund të përmirësohet me vetëm pak punë. Në seksionin e parë të guidës do ju tregoj si të identifikoni vizitorët me celular dhe specifikisht ata me iPhone. Do ju tregoj si të ofroni një faqe tërësisht normale që për vizitorët me iPhone thjeshtë ndërron rregullat CSS për të ndërruar tërësisht edhe eksperiencën. Faqja do të jetë tmerrësisht e lehtë; një Listë Shpenzimesh ku shfaqim produktet e blera dhe çmimin e tyre, por duhet t’ju shërbejë për t’ju dhënë idenë e përgjithshme.

Përmbajtja me jQTouch

Në seksionin e dytë të guidës do i japim steroide Listës së Shpenzimeve me jQTouch. Për ata që s’e kanë dëgjuar, jQTouch është një plugin i jQuery për zhvillim faqesh për celularë që ofron një sërë lehtësirash, të cilat do ishin goxha komplekse pa të. Me të mund të ndërtohen fare lehtë faqe të ndryshme, animacione, forma, etj, dhe e bukura është që ofron disa shabllone për të gjithë elementët, për ta bërë vizitorin të ndihet sikur po shfleton një aplikacion të vërtetë për iPhone dhe jo një faqe web. Listën e Shpenzimeve do e bëjmë më interaktive, ku çdo shpenzim do të klikohet dhe do shfaqë çmimin, përshkrimin dhe një foto të produktit.

Testimi i Faqeve

Ky mund të jetë problem për shumicën, duke qenë se jo të gjithë kanë iPhone dhe në një browser normal s’mund ta testosh. Zotëruesit e Mac janë me fat sepse Apple ofron falas një Simulator iPhone-i të cilin mund t’a shkarkoni së bashku me xCode (program zhvillimi aplikacionesh për iPhone). Simulatori, ndryshe nga mendimi im fillestar, është një replikim perfekt i gjithçka që iPhone ofron, përfshi edhe multi-prekjet (duke mbajtur ALT shtypur). Ata që janë në Windows/Linux dhe nuk kanë iPhone janë pa fat, por mund t’ja kërkoni ndonjë miku iPhone-in borxh për disa ditë sa për të testuar faqet
.

Gjatë kodimit të kodit për këtë guidë, unë përdora simulatorin sepse është më praktik se sa të mbash në dorë një iPhone të vërtetë. Në fund e testova në iPhone për të qenë i sigurt që gjithçka shfaqej si duhej. Rezultati në të dy ishte egzaktësisht i njëjtë; një pikë plus për simulatorin.

Lista e Shpenzimeve

Të kalojmë në krijimin e faqes së thjeshtë që tregon si ofrohet përmbajtje alternative për iPhone. Nuk kam bërë asgjë spektakolare, thjeshtë një listë me titujt e shpenzimeve dhe çmimin. Lista paraqitet në një formë të këndshme, lexohet lehtësisht në të dyja orientimet dhe “ndriçohet” me Javascript kur shtypet. Kodi HTML dhe CSS që do ju tregoj është shumë i ngjashëm me kodet e një faqeje normale.

I gjithë truku qendron në përfshirjen e një dokumenti CSS alternativ dhe madhësitë relative. Pra, në vend që të krijojmë elementë HTML me madhësi fikse (psh 300px), i vendosim relative në % apo em (1em = 100%, 0.5em = 50%, 2em = 200%, etj). Në këtë mënyrë faqja do të shfaqet mirë në të dyja orientimet, ku normalisht në landscape tekstet do jenë pak më të mëdha sepse gjerësia e dokumentit është më e madhe e si rrjedhim edhe gjerësitë relative.

Para se të nis kodin HTML në indeks, krijova një skedar CSS bosh të quajtur “iphone.css” dhe e vendosa brenda direktorisë “css”. Gjithashtu shkarkova jQuery, e emërova “jquery.js” dhe e vendosa në direktorinë “js”. Me t’i krijuar resurset e nevojshme, mund të nisim të shkruajmë kodin HTML.

Ashtu si ç’do bëja me një faqe normale, krijova strukturën HTML bazë. Pra doctype, namespace, head dhe body. Jemi pak të “vjetër” këtu, me XHTML 1.0 dhe jo me HTML 5, por asnjë nga funksionet e shtuara nuk na nevojitet për qëllimin tonë. Për më tepër që do e komplikoja guidën pa arsye. Sidoqoftë, kini parasysh që Safari (në iPhone) dhe shfletuesi i Android (i bazuar në webkit, “motori” që përdor Safari) kanë suport të mirë ndaj HTML 5 dhe CSS 3, prandaj mund të kodohen pa problem.

Lista e Shpenzimeve Që “magjia” të ndodhë, na duhet të përfshijmë dokumentin CSS në të cilin do të shkruajmë stilet specifike për iPhone. Teknika është egzaktësisht e njëjtë me përfshirjen e një dokumenti normal CSS, ku krijomë një brenda , por do të ndryshojë vetëm vlera e “media”. Shikoni kodin më poshtë.

Pjesa e shkruar në atributin “media” quhet media query, një opsion i ri në CSS3 që përcakton kushte për përfshirjen e dokumentit CSS. Pjesa “only” e fsheh deklarimin nga shfletuesit e vjetër, ndërsa në shfletuesit modernë nuk konsiderohet. Pjesa “screen” përcakton që rregullat vendosen për ekrane dhe jo printim (përndryshe do të ishte “print”). Pjesa “max-device-width: 480px” përcakton gjerësinë maksimale të ekranit. Duke vendosur gjerësi maksimale të caktuar, përfshijmë çdo pajisje që e ka rezolucionin 480px ose më të vogël. iPhone 4 në këtë rast nuk suportohet sepse ka gjerësi 960px, por thjeshtë duhet të modifikohet vlera. Unë kam iPhone 3GS dhe thjeshtë suportova ekranin e tij
. Pra, duke përcaktuar një media query fare të thjeshtë (mbani mend “only”, “screen” dhe “max-device-width”) përfshijmë një dokument CSS që lexohet vetëm nga iPhone.

Deri tani jemi shumë mirë. Nëse shkruajmë në dokumentin CSS ndonjë rregull (si psh body{ background:red; }) ajo do egzekutohet në iPhone, por jo në një shfletues kompjuteri. Megjithatë kemi një problem. Safari (shfletuesi i iPhone) vërtetë lexon dokumentin CSS të krijuar kastile për të, por nuk e kupton sa e gjerë duhet të jetë faqja. Nëse e testojmë faqen, do shohim se gjerësia dhe gjatësia e saj i kalon limitet e ekranit të iPhone e na duhet të spostohemi për të gjetur fundin. Që t’i tregojmë sfhletuesit se faqja do shfaqet vetëm brenda limiteve të ekranit, na duhet të shkruajmë një deklarim brenda të dokumentit HTML.

Me një deklarim Meta Viewport, i tregojmë shfletuesit se gjerësia e përmbajtjes duhet të jetë sa gjerësia e vetë ekranit. Në këtë mënyrë faqja shfaqet brenda limiteve dhe nuk ka nevojë që vizitori të spostohet apo të zmadhojë/zvogëlojë për t’a parë të tërën. Gjithashtu, kam shtuar një rregull “user-scalable=no” në mënyrë që vizituesëve t’i çaktivizohet zmadhimi/zvogëlimi. Arsyeja është sepse faqja që do ofroj përmban tekste me madhësi të mjaftueshme për t’u lexuar, por nëse e doni këtë funksionalitet, thjeshtë fshiheni.

Ju thashë që është e thjeshtë apo jo? Me vetëm 2 rreshta kemi krijuar skeletin e një faqeje që do të shfaqet tek përdoruesit e iPhone. Kodi HTML dhe CSS që vjen në vijim është tërësisht normal, ashtu si do ishte për çdo faqe tjetër. Le ta shohim rresht për rresht, së bashku me rregullat CSS.

Rregullat e para CSS që do shkruaj i përkasin , pra të tërë dokumentit. Kam hequr “margin” dhe “padding” që krijohen automatikisht nga shfletuesi, kam vendosur si sfond një imazh dhe në fund kam përcaktuar tipin e tekstit. Helvetica është tipi i tekstit standart në iPhone, por në celularë të tjerë jo, prandaj e kam forcuar.

body{ margin:0; padding:0; background:url(../images/sfondi.png) repeat-x #e0f5f8; font-family:Helvetica, sans-serif; } Krijova një <div> mbajtës brenda të cilit do vendosen elementët e tjerë. Gjerësinë e ka 90% që të ketë hapësirë nga konturet, vendoset në qendër të faqen me trukun “margin:auto” dhe tekstet brenda tij qendërzohen.


#mbajtesi{ width:90%; margin:10px auto; text-align:center; } Më duhet t’i vendos një titull faqes, kështu që krijoj një kokë . Madhësinë e gërmave e bëj 150% (pra 50% më të madhe se gërmat standarte), Bold dhe me ngjyrë Blu (nuancë të saj, po nejse).

<h1>Lista e Shpenzimeve


h1{ font-size:1.5em; font-weight:bold; color:#3c747c; } Krijoj një tjetër mbajtës, por kësaj rradhe për vetë elementët e listës. Mbajtësi ka ngjyrë të bardhë sfondi, ngjyrë gri të errët për tekstet, madhësi teksti 0.8em (80%) dhe hapësirë të brendshme për të gjitha anët. “-webkit-border-radius:20px” krijon “cepa” të rrumbullakët, për t’i dhënë një efekt më të këndshëm listës. Rregulli njihet vetëm nga Safari dhe shfletuesit që përdorin Webkit (Android një nga këta).


#lista{ background-color:white; -webkit-border-radius:20px; color:#686868; font-size:0.8em; padding:1.2em; } Me kodin që kemi shkruar deri tani, në iPhone duhet të na shfaqet një rezultat si më poshtë.



Nuk është shumë akoma, por ju jep një ide të pamjeve të ndryshme (që ngjasojnë shumë) në 2 orientimet. Mund t’a shihni që në orientimin landscape gërmat duken pak më të mëdha, duke qenë se i kemi vendosur madhësi relative dhe gjerësia e ekranit është me e madhe. Të vazhdojmë me kodimin e listës.

Shpenzimet individuale i kam futur brenda një me klasë “shpenzimet”. Titullin e kam vendosur brenda një paragrafi, ndërsa çmimin në një <span>. E kam krijuar të tillë në mënyrë që t’i stiloj me CSS, meqë titulli dhe çmimi kërkojnë rregulla të ndryshme (madhësinë e gërmave, pozicionimi, etj).

Laptop i ri

1.200 Euro
iPhone 4 me kontrate

300 Euro
Dy shishe vere te 94'

270 Euro
TV LED 52"

1.800 Euro
2 Kg luleshtrydhe

12 Euro
Reklame per Feniksi.com

30 Euro
Makina e re

14.000 Euro
Magic Mouse

50 Euro
Dhoma e re e gjumit

2.000 Euro
Fshese me korent

180 Euro
Fillimisht vendos rregullat e div-eve mbajtës të shpenzimeve individuale. Tekstin e drejtoj majtas dhe krijoj një kontur në fund që t’i ndaj shpenzimet nga njëra tjetra. Përcaktoj gjithashtu hapësirë të brendshme për ti ndarë shpenzimet nga njëri tjetri. Rregullin “position:relative” e krijova sepse elementin <span> do e pozicion në mënyrë absolute dhe më duhet t’a instruktoj që ky div është mbajtësi. Pa vendosur “position:relative” span-i do pozicionohej relativisht kontureve të dokumentit (shfletuesit).

div.shpenzimet{ text-align:left; position:relative; border-bottom:1px solid #b1e0e7; padding:0.8em; } Paragrafet kanë hapësirë standarte e cila nuk më duhet dhe e heq.

div.shpenzimet p{ margin:0; padding:0; } Rregullat për span-in që mban çmimin. E pozicionoj në mënyrë absolute që t’a vendos në ekstremin e djathtë, në krah të titullit. Me vlerën e “top” dhe “right” kam eksperimentuar pak për ti gjetur pozicionin e duhur në qendër vertikalisht. I kam vendosur madhësi gërme më të vogël dhe ngjyrë gri më të hapur se titulli.

div.shpenzimet span{ position:absolute; top:1.6em; right:1em; font-size:0.7em; color:#acacac; } Një klasë që do i vendoset shpenzimit të fundit për t’i hequr konturin e poshtëm. Duke qenë i fundit, nuk ka nevojë të ndahet vizualisht nga elementët e tjerë.

div.pa-kontur{ border-bottom:0; } Një klasë që do i vendoset div-it mbajtës të shpenzimeve (atij me klasë “shpenzimet”) me Javascript. Do ju tregoj pak më poshtë për çfarë bëhet fjalë, por për tani mund t’ju them që klasa e bën titullin të spostohet pak djathtas dhe sfondin një gri të hapur.

div.ndricuar{ padding-left:1em; background:#eee; } Shpenzime të çmendura hë? Nëse do kisha shpenzuar vërtetë aq, do kisha 19.842 Euro më pak në bankë (ose më mirë një kredi të majme). Sidoqoftë, e mira është që e koduam faqen specifikisht për iPhone dhe rezultati në shfletues duhet të jetë si më poshtë.



S’duket keq apo jo? Nuk ofron shumë, por si një faqe shembull s’është keq. Më e rëndësishjma është që ofron një ndërfaqe lehtësisht të lexueshme dhe përdorshme në iPhone; me butona të mëdhenj që janë të lehtë të shtypen (edhe pse s’kanë funksion këtu). Akoma më e rëndësishme është që ju ka dhënë një ide se si të krijoni përmbajtje alternative për vizitorët në celular me vetëm 2 rreshta kod. Pjesa tjetër, kodi HTML dhe CSS duhet të jetë i njohur nga ata me pak eksperiencë.

Po mendoni se ka mbaruar këtu? Ehhh kemi akoma për të provuar dhe llogarisni që ky është vetëm seksioni i parë. Në vazhdim do ju tregoj si të kapni ngjarjet (eventet) me Javascript.

Ngjarjet me Javascript dhe ekstra

Normalisht, një ndërfaqe me prekje nuk mund të ketë gjendje hover (mouse-i sipër), sepse supozohet që ta prekësh. Nëse do kodonim në CSS një pseudo-klasë :hover, nuk do ndodhte asgjë! Këtu hynë në punë disa ngjarje specifike për pajisje me prekje që mund t’i shfrytëzojmë me Javascript. Ngjarjet janë:

Prekje:


  • touchstart (kur prekja nis)
  • touchend (kur prekja përfundon)
  • touchmove (kur prekja lëviz – kur prek me gisht dhe e lëviz gishtin)
  • touchcancel (kur prekja anulohet – sinqerisht, nuk ja kam idenë kur kjo ndodh)
Gjeste:


  • gesturestart (kur gjesti fillon – psh kur vendosen 2 gishta për të nisur zmadhim)
  • gestureend (kur gjesti mbaron)
  • gesturechange (kur gjesti ndryshon – psh kur lëviz gishtat larg njëri tjetrit për të zmadhur)
Këto janë ngjarjet që mund të kapen me Javascript dhe praktikisht përfshijnë çdo veprim që mund të kryhet në iPhone. Për t’i shtuar listës, secili funksion kthen një objekt që mban informacione rreth ngjarjes. Funksionet e prekjes kthejnë 2 objekte: “touches” dhe “targetTouches”. Të 2 janë të njëjtë, vetëm se “touches” kthen prekjet në dokument, ndërsa “targetTouches” kthen prekjet relative ndaj një elementi. Disa nga informacionet që ato kthejnë janë kordinatat X dhe Y të prekjes. Funksionet e gjesteve kthejnë 2 objekte: “scale” (shkalla) dhe “rotate” (rrotullimi). Shkalla kthen më pak se 1 kur kryhet gjest zvogëlimi dhe më shumë se 1 kur kryhet gjest zmadhimi. Përdorimi i tyre limitohet tërësisht nga fantazia juaj dhe eksperienca që doni t’i ofroni vizitorëve. Psh, mund të ndërtoni funksionalitete “drag and drop” duke matur kordinatat e kthyera apo zmadhim/zvogëlim individual për fotot duke përdorur gjestet. Mjafton të njihni Javascript dhe gjithçka është e mundur.

Për këtë guidë unë do bëj diçka fare të thjeshtë me ngjarjet e prekjes. Duke përdorur jQuery, do ja ngjis ngjarjet div-eve të shpenzimeve për ti “ndriçuar” kur preken. Teknika është fare e thjeshtë dhe funksionon si një ngjarje “click”, “mouseover”, etj. Gjithashtu kam përfshirë “jquery.js”. Kodi duhet vendosur brenda të dokumentit.

Kam ngjitur ngjarjet me funksionin bind() (do ishte addEventListener() pa jQuery) tek div-et dhe kam shtuar apo hequr klasen “ndricuar” (që përmenda më sipër në CSS). Në “touchstart”, atëherë kur përdoruesi nis prekjen e shtoj klasën për t’a diferencuar elementin. Kur përdoruesi heq gishtin (touchend) apo e lëviz atë (touchmove) e heq klasën për t’a kthyer si më parë. Arsyeja që kam shtuar edhe “touchmove” është sepse elementit do i hiqej “ndriçimi” vetëm kur ta heqë gishtin dhe nëse ndërkohë e lëviz faqen (bën scroll), ngjarja e heqjes do regjistrohej kur lëvizja e faqes mbaron. Është një efekt i çuditshëm dhe jo intuitiv që duhet t’a shikoni për t’a kuptuar dhe duke shtuar “touchmove” tek ngjarja e heqjes, mënjanohet.

Do doja t’ju jepja më shumë shembuj Javascript rreth ngjarjeve dhe transformime të ndryshme që mund t’i bëjme elementëve me prekje apo gjeste, por guida do zgjatej shumë dhe do kthejej në më shumë teknike se niveli që dua të ruaj. Nëse guida do ketë interes tek lexuesit, atëherë mund të bëj një të dedikuar për ngjarjet në Javascript. Për tani duhet të mjaftoheni me kaq


Efekti Javascript që shtuam duhet të shfaqet në shfletues si në figurën më poshtë.



Për ta mbyllur faqen tonë me stil, do t’i shtojmë një ikonë. Mendojeni si favicon që del në shfletuesit e kompjuterave, vetëm se për iPhone ndryshon pak. Në Safari ofrohet një opsion për t’a ruajtur faqen si ikonë në “desktop” (home screen) që t’a aksesosh lehtë. Nëse nuk vendosim një ikonë tonën, iPhone krijon një ikonë nga pamja e faqes, që pothuajse asnjëherë nuk ngjan bukur. Duke i dhënë një ikonë, iPhone përdor atë dhe biles i shton automatikisht edhe “cepa” të rrumbullakët dhe efekt ndriçimi; efekte standarte këto për ikonat e iPhone. Mjafton të krijoni një imazh PNG me madhësi 57x57px, t’a vendosni në direktorinë e imazheve (apo ku të doni) dhe në të dokumentit HTML të shkruani rreshtin e mëposhtëm:

Në këtë mënyrë instruktoni shfletuesin ku ndodhet ikona. Në figurën më poshtë mund të shihni ikonën që unë krijova (majtas) dhe si duket në iPhone (djathtas).

Mbaroi seksioni parë dhe rezultati është një faqe e thjeshtë, tërësisht e krijuar për iPhone. Zbuluam si të vendosim rregulla CSS posaçërisht për iPhone, si t’a instruktojmë shfletuesin për gjerësinë e faqes, ngjarjet e prekjeve dhe gjesteve me Javascript dhe në fund ikona. Me këto informacione që keni marrë, nuk ka justifikime që mos t’a suportoni iPhone (dhe jo vetëm) në faqet tuaja. Jam i sigurt që zbuluar se është më e thjeshtë se ç’e kishit menduar
. Por nuk mbaron këtu dhe është e dyta herë që e them këtë frazë. Në seksionin tjetër do shohim si t’a bëjmë listën e ikonave më interaktive dhe të ngjajë si aplikacion i vërtetë për iPhone me jQTouch.

Lista e Shpenzimeve në steroide me jQTouch

jQTouch është një plugin fantastik për jQuery me të cilin mund të krijosh një faqe për iPhone brenda pak minutash. Praktikisht mund t’i harroni çfarë keni mësuar në seksionin e parë, të vendosni jQTouch dhe të kodoni direkt faqen bukur dhe thjeshtë. Kurba e mësimit është pothuajse e drejtë; mjafton të njihni nomeklaturën e jQTouch dhe mund të krijoni faqe web që ngjajnë shumë me aplikacione standarte të iPhone, për t’a çuar eksperiencën në një nivel komplet tjetër. Në përgjithësi jam vërtetë entuziast me ato që jQTouch ofron dhe në të ardhmen mund të bëhet edhe më e fuqishme. Megjithatë, çdo medalje ka 2 anë, prandaj po ju tregoj, sipas mendimit tim personal, se çfarë anësh pozitive dhe negative ka kjo librari.

Pozitive:


  • Instalohet dhe vihet në produksion sa hap e mbyll sytë.
  • Shumë e thjeshtë për t’u përdorur. Praktikisht duhen mësuar vetëm disa emra klasash dhe ID që libraria ofron.
  • Ka 2 shabllone që mund të përdoren direkt që e stilojnë faqen si një aplikacion standart për iPhone. Shabllonet mund të ndryshohen lehtësisht apo të krijohen të reja.
  • Fasilitete për të krijuar lista, forma, animacione, AJAX, etj, duke ndjekur “filozofinë” e iPhone.
  • API në Javascript për ngjarje të avancuara (si “swipe”).
  • Zhvilluesit thonë se suporton iPhone dhe çdo celular tjetër që “mendon larg” (Android i përfshirë).
Negative:


  • Është akoma version Beta dhe mund të ketë probleme.
  • Lista e opsioneve është akoma e vogël për të krijuar aplikacione të mëdha që ngjajnë me ato standarte të iPhone.
  • Filozofia e pluginit, edhe pse super e thjeshtë për t’u përdorur, më duket pak e ngurtë për aplikacione të mëdha.
  • Dokumentimi është inegzistent dhe të vetmet burime janë guida të pakta apo eksperimentimi me emrat e klasave.
Me të thënë këto, absolutisht që e rekomandoj jQTouch sepse seriozisht nuk do gjeni alternativë më të mirë (falas). Sidoqoftë, duhet të keni parasysh që t’a përdorni vetëm atëherë kur doni të ofroni një eksperiencë për iPhone që ndryshon tërësisht nga faqja normale. Faqet e koduara me jQTouch, edhe pse shkruhen në HTML të pastër, nuk ngjasojnë në strukturë me një faqe normale. Si rrjedhim, faqja për iPhone duhet të jetë e dedikuar dhe jo një alternativë e faqes normale si në seksionin e parë. Pra, përdorni ato që mësuat në seksionin e parë kur doni të ofroni përmbajtje alternative tek iPhone dhe ato që do të mësojmë rreth jQTouch kur doni t’i ofroni përdoruesëve një “aplikacion” tërësisht të veçantë nga faqja (që kuptohet ka të njëjtën përmbajtje). Në kodet më pas do e kuptoni ndryshimin.

Si fillim na duhet një mënyrë për t’i drejtuar përdoruesit e iPhone në faqen që do kodojmë me jQTouch. Pra, të supozojmë se kemi një faqe x.com dhe vizitorët më iPhone duam ti drejtojmë në një direktori ku kemi ruajtur faqen e dedikuar. Kohët e fundit është bërë e modës që versionet “mobile” të ndodhen në një nën-domain me emrin “m”. Në faqen tonë x.com, i drejtojmë në m.x.com. Për ta bërë këtë na duhet një kod i thjeshtë në PHP që lexon User-Agent (tipin e shfletuesit) dhe nëse gjen atë që i duhet, bën drejtimin. Flamur Mavraj ka shkruar para disa kohësh një guidë për detektimin e iPad në PHP dhe Javascript. Të njëjtën teknikë do përdorim edhe këtu, por për iPhone.

Mjafton që kodin më sipër t’a vendosni në faqen x.com, sipër çdo kodi tjetër dhe vizitorët me iPhone do drejtohen në m.x.com. Kuptohet që faqja duhet të jetë PHP, përndryshe kodin nuk do të printohet. Në atë rast, përdorni alternativë me Javascript që Flamuri ka dhënë. Gjithashtu, si ç’mund t’a merrni me mend, nën-domaini “m” nuk krijohet automatikisht. Zakonisht panelet e kontrollit të serverave/hosteve lejojnë të krijohen lehtësisht nën-domaine që drejtojnë tek direktori (në këtë rast direktoria do ishte “m”).

Para se t’ju tregoj kodin me jQTouch, shikoni imazhin e mëposhtëm. Janë disa pamje të aplikacionit të Listës së Shpenzimeve të shkruar me jQTouch. Duket i lezetshëm apo jo? Shumë më interesant se dizenjo që koduam në seksionin e parë, por më e rëndësishmja është që ngjan si aplikacion i vërtetë iPhone.



Fotot nuk të japin të njëjtën eksperiencë si aplikacioni i vërtetë sepse nuk shihni dot tranzicionet, por të paktën e krijoni idenë se si duket. Më duhet të theksoj që ngjan perfekt si në orentim portret, ashtu edhe në landscape. Le të fillojmë me kodin tani.

Fillimisht shkarkojmë jQTouch, e ekstraktojmë dhe të gjitha skedarët dhe direktoritë e saj i fusim brenda direktorisë “js”. Në të ndodhen edhe direktoria e demove, licensa apo “readme”, por mos e vrisni mendjen për tani. Thjeshte lërini si janë. Gjithashtu, në “js/jqtouch/” ndodhet “jquery.js” që me siguri ka mbrapa edhe versionin. Thjeshtë emërojeni në “jquery.js” dhe mbaruam punë.

Bëjmë hapin kryesor në kodimin me jQTouch: përfshirjen e skedarëve. Do të përfshijmë jquery, jqtouch, css-në bazë dhe shabllonin që duam të përdorim. Ofrohen 2 shabllone, “apple” dhe “jqt”. I pari është i ngjashëm me ndërfaqen e Apple, por mu duk pak problematik në funksionim kështu që zgjodha “jqt”, një shabllon i errët. Vendosni kodet më poshtë në të dokumentit HTML.

Rreshti i parë përfshin CSS-në bazë. I dyti përfshin CSS-në e shabllonit (vini re pjesën “jqt”; ajo mund të zëvendësohet me “apple” apo emrin e shabllonit tuaj). Rreshti i tretë dhe i katërt përfshijnë kodet Javascript të jQuery dhe jQTouch. Jemi pothuajse gati më nisjen, përvec një rreshti tjetër që initializon librarinë e jQTouch. Shkruajeni kodin më poshtë direkt pas kodeve të mësipërme.

Kodi më sipër nis jQTouch dhe përcakton parametrat. I vetmi parametër që më intereson është ikona (e mbani mend nga seksioni i parë, ku krijuam një ), ku përcaktoj direktorinë në të cilën ndodhet. jQTouch kujdeset për të tjerat automatikisht.

Fillimisht, filozofia e jQTouch për të krijuar faqe është pak e çuditshme, sepse ndryshon nga faqe normale. Këtu ofrohet një eksperiencë që nuk kërkon “refresh”, prandaj të gjitha faqet e ndryshme vendosen brenda një dokumenti. Praktikisht, secilës faqe i vendoset një id (HTML: id=”faqja”) dhe lidhjet drejtojnë direkt tek ajo ID (href=”#faqja”). Çdo faqe ndërtohet sipas një skeme të caktuar (shumë të thjeshtë) dhe animacionet, butonat dhe format e shfaqjes përcaktohen me klasa CSS. Më poshtë është kodi bazë i skeletit të një faqeje me jQTouch.

Rreth Nesh




Kontaktoni me ne




Div-i me ID “faqja_rreth” është faqja kryesore (meqë është i pari) dhe hapet e para. Div-i me ID “faqja_kontakt” nuk shfaqet fillimisht, por është aty gati për t’u hapur nga ndonjë lidhje. Div-i me klasë “toolbar” dhe brenda njihet nga jQTouch si titull i faqet dhe stilohet në formë të tillë. Në pjesën e informacioneve mund të shkruani çfarëdo kodi HTML që ju duhet, pa përjashtime. Unë po ilustroj si të krijoni një lidhje në “faqja_rreth” që hap “faqja_kontakt”.

Na Kontaktoni Kaq e thjeshtë! Mjafton të vendosim një “#” të ndjekur nga ID-ja e “faqes” në formën e një adrese të fragmentizuar dhe një disa klasa të jQTouch. Klasa “button” e stilon lidhjen si buton, ndërsa “flip” përcakton tipin e animacionit. Me të marrë bazat, po ju tregoj kodet e secilës faqe që kam krijuar për aplikacionin Lista e Shpenzimeve. Shënim: kam krijuar detajet e vetëm 3 shpenzimeve që t’a mbaj kodin sa më të shkurtër. Të tjerat nuk funksionojnë, por vetëm listohen.

Indeksi

<h1>Shpenzimet


Rreth


Ashtu si në strukturën fillestare që ju tregova, edhe këtu kam përdorur të njëjtën logjikë. Në “toolbar”, në krah të titullit kam krijuar një buton që drejton për tek faqja “rreth”, i cili si në shembullin e lidhjes më sipër mban klasat “button” (buton) dhe “flip” (animacion që kthen faqen). Lista e parenditur mban të gjitha shpenzimet. Klasa “plastic” në <ul> i shfaq elementët e listës sipër njëra tjetrës me një pamje të errët dhe me rreshta të alternuar në ngjyra. Klasa “arrow” në i vendos elementit një shigjetë për të treguar që shtypet. Brenda elementëve të listës janë thjeshtë lidhje që drejtojnë për tek faqen e duhura të shpenzimeve.

Rreth

Rreth Faqes

Prapa
Demo per guiden "Zhvillimi i faqeve per iPhone dhe nje shikim i jQTouch" nga Fadion Dashi.
Te drejtat e rezervuara Feniksi.com


Si ç’e shihni, brenda pjesës së informacionit kam shkruar disa informacione rreth faqes. Kam krijuar 2 div-e me klasën “info” që i vendos një sfond të bardhë dhe i stilon si informacione, por mund të ishin në çfarëdo forme të mundshme. Gjithashtu, kam shtuar një buton që kthen faqen në indeks duke përcaktuar klasat “button” (buton) dhe “back” (kthehu mbrapa).

Detajet e Shpenzimeve

Laptop i ri

Prapa
Cmimi: 1.200 Euro

Pershkrimi

Bleva MacBook Pro 13" sepse me duhej nje laptop high-end si suplement i desktopit. Me te mund te punoj pa pasur nevoje te ulem ne tavoline dhe mund ta marr me vete ne takime me kliente.



Do ju tregoj vetëm një detaj shpenzimi sepse të tjerat janë egzaktësisht të njëjta. Ashtu si tek “rreth”, edhe këtu krijova një buton për t’u kthyer prapa me klasat “button” dhe “back”. Informacioni më pas është në lidhje me shpenzimin specifik. Me , që shërben si titull dytësor, kam shkruar çmimin dhe titullin e përshkrimit. Përshkrimin e kam vendosur në një paragraf. Në fund, kam vendosur një foto të produktit të blerë me klasën “foto”. Këtë klasë e krijova vetë për t’i vendosur fotove një kontur të trashë dhe pak hije. Asgjë e komplikuar.

Më lehtë se kaq prishet! Duke mbajtur mend vetëm një strukturë të thjeshtë dhe disa emra klasash për të përcaktuar paraqitjen dhe animacionet mund të krijojmë aplikacione që duken fantastike dhe funksionojnë pothuajse si aplikacione standarte në iPhone. Për fat të keq, dokumentimi i jQTouch është inegzistent dhe duhet të eksperimentoni me vlerat e klasave duke parë demot në faqen zyrtare. Psh, nëse tregohet një demo për animacion “Cube”, atëherë klasa për këtë animacion patjetër është “cube”. Shpresoj vërtetë që në të ardhmen gjërat të ndryshojnë dhe është e sigurtë që jQTouch do marrë shumë më tepër vëmendje.

<h2>Alternativa ndaj jQTouch


Në fakt jQTouch nuk është alternativa e vetme në treg, por për mendimin tim më e mira ndër ato falas. Sidoqoftë, secili ka mënyrën e tij të koduarit dhe mund t’i përshtatet një librari tjetër. Alternativa falas dhe popullore janë iUI dhe iWebkit. Një alternativë tjetër, që nga demot dhe opsionet duket fantastike është Sencha Touch, por që vjen me 2 tipe liçensash. Duhet të kodoni aplikacione open-source për t’a përdorur falas, pëndryshe duhet të paguani.

Nga ana tjetër, smart phones nuk janë të vetmit celularë në treg. Kini parasysh që Nokia dhe RIM (Blackberry) janë liderë në tregun e telefonisë, prandaj ide e mirë do të ishte të eksploroni alternativa/librari edhe për to.

Përfundimi

Guida ka qenë e gjatë dhe me vëllim jo të vogël informacioni, por për mua ka qenë interesante sepse kam studiuar dhe kam eksperimentuar në një fushë ku nuk kam shumë eksperiencë. Për fat të mirë apo të keq, teknologjia është në zhvillim të përhershëm dhe sa më shpejt të përshtatemi me të, aq më tepër mundësi kemi t’i mbijetojmë tregut me sukses. Ndërtimi i faqeve për celularë është një shërbim i mirë që mund t’a fusni pa shumë kohë të shpenzuar në listën tuaj dhe si rrjedhim, më tepër klientë. Apo nëse keni një faqe, ofrimi i një eksperience alternative do të jetë e mirëpritur nga vizitorët tuaj.

Shpresoj t’ju kem ndihmuar me këto teknika dhe t’ju kem drejtuar në rrugën e duhur të kodimit për celularë. Nëse kjo guidë do ketë interes, patjetër që do mendoj shkruarjen e ndonjë guide suplement që shpjegon ndonjë teknikë të re, e sidomos ngjarjet e prekjeve dhe gjesteve në Javascript, të cilat i përmenda vetëm pak. Ndërkohë, mos e lini me kaq, por testoni faqet tuaj dhe eksperimentoni me rezultatet.

Pyetjet, komentet, sygjerimet apo kritikat janë të mirëpritura. Mos hezitoni!

Mësim të mbarë.

Zhvillimi i faqeve për iPhone dhe një shikim i jQTouch është një postim nga: Feniksi.Com - Thesari i Njohurive



Forum-Al.com
Aty ku shqiptarët mblidhen!
 
Top