Xây dựng ứng dụng trên thiết bị di động ios sử dụng công cụ của ibm

I BD GIAO DUC vA DAo TAO TRUONG DAI HOC NGOAI NGU - TIN HOC TP.HCM KHOA CONG NGH:E:THONG TIN -03 W ro - KHOA LuAN TOT NGHIEP • • • XA Y DUNG •• UNG DUNG TREN THIET BI• DI DONG lOS sir DUNG eONG CU• eVA IBM • • GIANG VIEN HUONG DAN: Thfiy LE HoAI BAc SINH VIEN THl)'C HI-'::N: TRUONG MINH THONG -08DHlll92 TRAN THANH PHONG - 08DHl1297 /~"" , /' S'- ' ", I • ••• "',' ~ -" H~\ '" ~t- r- • •.••.••.• • ' -.:.o'\ N "' ' ;- \ , - ;'": ~r- r " -;- : -iJ r L-i ~/"'T.:/ '.~"'" \ H '~.-~ -:::: ",./ ~-;;o-~~~ \ ~ TP Ho Chi Minh, 08/2012 Ml)C Ll)C Lai M6 D~u Chuang 1: TONG QUAN vB DE TAI 1.1 Nhu e~u th\fe tS eua d~ tai 1.2 Tuang lai eua Web - Vng d\mg di d9ng HTML5 Chuang 2: TlNH NANG MOl CVA HTML5 TREN DI DONG 2.1 Cae tioo nang ehinh 2.2 So saM m9t sa Uti va OOuqedi@m 2.3 Gi6i thi~u v~ h~ di~u hanh lOS 2.4 Lieh su phat tri@neua h~ di~u hanh lOS Chuang 3: TiM HIEU cAu TRUC GAME xEP G~CH 3.1 Lu~t l~ eua Game 3.2 M6 ta v~ Game XSp G~eh 3.3 Quan ly khai g~eh 3.4 Nguyen ly kh6i t~o khai g~eh Chuang 4: xA Y Dl}NG DEMO UNG D()NG WEB 4.1 Game XSp G~eh 4.2 Vng dVng ve hiOOPaint 4.3 Demo thiSt kS Form Vng dl)ng Geo Meter Chuang 5: GIOi THI:eU vB UNG Dl)NG MAQETTA 5.1 Gi6i thi~u 5.2 Cae tiOOnang ehinh Chuang 6: cAc TlNH NANG TRaNG MAQETTA 6.1 Bien t~p Vng dl)ng Maqetta d~u tien 6.2 T~o trang HTML m6i Maqetta 6.3 Cae tiOOnang khae h9P tho~i File New 6.4 Giao di~n nguai dung di d9ng v6i Maqetta 6.5 Xay d\fllg Vng dVng dan gian Chuang 7: PM T TRIEN TlNH NANG GIAO DI:eN MOL 7.1 Gi6i thi~u 7.2 D6 h9a v6i Canvas Chuang 8: TONG :K.ET Danh mue tai lieu tham khao Trang Trang Trang Trang Trang Trang Trang Trang 10 Trang 11 Trang 11 Trang 12 Trang 15 Trang 16 Trang 21 Trang 21 Trang 37 Trang 44 Trang 48 Trang 48 Trang 48 Trang 51 Trang 51 Trang 53 Trang 56 Trang 59 Trang 63 Trang 65 Trang 65 Trang 65 Trang 90 Trang 92 LOIMOI>Au Hi~n nay, cong ngh~ danh cho thiSt bi di dQng cang phat tri~n NSu nhu truac day, ta phai dung chiSc may tinh d~ ban (MTDB) c6ng kSnh cung trinh duy~t web IE (Internet Explorer) d~ lum web, thi gia day vai may tinh xach tay (MTXT), di~n tho?i thong minh (DTTM) cung nit nhiSu trinh duy~t khac (Firefox, Opera ) ta co th~ d@dang lum "net" a bfit ky dau Tuy nhien vai cac thiSt bi, trinh duy~t web khac nhau, nQi dung hien thi tren man hinh se khac Chkg h?n, tren may tinh ta xem trang web rfit t6t, nhung tren DTTM thi giao di~n va cfiu truc trang bi xao trQn Hay co the xem phim rfit t6t vai IE nhung vai Firefox thi khong V~y giai phap nao d~ nguai dung co th~ su dVng bfit ky trinh duy~t tren bfit ky thiSt bi nao cling co th~ xem dugc day du, tn.m v~n nQi dung, thong tin tren internet HTML5 cho phep nha phat tri~n, l~p trinh web t?O cac trang web co nhUng tinh nang uu vi~t han Khong nhUng v~y, HTML5 dem dSn cho nguai dung nhung trai nghi~m vS t6c dQ truy c~p web nhanh han, t6t han, tai nguyen phong phu han HTML5 va CSS3 cling lam cho cac tmg dVng web va cac trang web hfip dful han HTML5 co cac tinh nang mai dugc them vao giup cho vi~c xay dlJng ung dVng web d@dang han dt nhiSu Vi dV nhu nhiSu mau s~c han va h6 trg duang cong, vi~c lam rna, goc tron (thay vi ep bUQc cac nha thiSt kS web suo dVng cac hinh anh d~ t?O cac goc tron), va dTnhien la ca vi~c luu trU'offline Tfit ca nhUng diSu lam mQt trang Web tra nen d@nhin han, b~t m~t han va lam cho rnc;>ithu tra nen sat vai nhfrng gi rna nha thi~t k~ tu6ng tugng dc1u han Ngoai ra, HTML5 va CSS3 se giup cac nha thi~t k~ Web dS dang han vi~c t~o cac hi~u trng dQng va cac tro chai tuang tac rna khong cc1ndung d~n Flash MQt s6 vi d\l v~ nhung gi ta co th~ lam vai HTML5, CSS3 va rnQt it h6 trg tu JavaScript la Tetris va Paint M?c du khong th~ thay th~ hoan toan cho Flash nhung HTML5 va CSS3 se co nhi~u hua h~n lInh V\fC Chuang 1: TONG QUAN VE DE TAl Trang I CHUONG : TONG QUAN vE DE TAl 1.1 Nhu cftu th1!c t~ Clla d~ tili: Cling v6i SlJ phat triSn m~OOme cua cong ngh~ thong tin va luqng nguai dl)ng Internet cang cao Ben c~ Slr OOungkeOOthong tin OOuquang cao tren tivi, pano, bang ron, to' rai Gia day vi~c gi6i thi~u san phAm tren m~ng Internet da: dugc xem la OOuc~u ttgradient tuy~n tinh Ca hai dSu lam vi~c t6t nhu tren cac may di~n tho~i thong minh Ap dVng S\f phan chi~u cho mvc b~ng cach thi~t l~p ki~u dangwebkit-box-ref1ect Ki~u dang duqc thi~t l~p d~ phan chi~u dS mvc nam pixel ben du6i no, v6i m(>thi~u (mg gradient duqc ap dVng cho phan chi~u Hi~u (mg gradient a day lam cho S\fphan chi~u rna dfin di N~u ta quay tra l~i 7.3,se thfiy r~g day la S\fk~t hqp vS ap dVng m(>tgradient v6i phan chi~u rna trinh duy~t Android khong th\fc hi~n: no chi trinh diSn S\fphan chi~u rna khong co bfit ky gradient nao Chuy~n t6i mvc ti~p theo, ap dVng m(>tki~u dang rfit dan gian cho no No chi co m(>tmau cho van ban, va m(>tmau rieng cho nSn Ca hai s6 cac mau dSu Slr dVng ham rgba d~ xac dinh cac gia tri mau do-xanh la cay-xanh da trai, c(>ngv6i m(>tgia tri alpha su6t Gia tri LOla hoan toan rna dvc va gia tri 0.0 la su6t Ti~p theo Li~t ke la rna cho do~ dfiu tien cua do~n van Van ban co m(>tduang viSn xung quanh no va ta su dVng ki~u border-radius (duang viSnvong tron) m6i d~ nh~ duqc cac goc tron Ta thfiy tfit ca cac lo~i goc duqc sir dVng tren trang Web hi~n nay, va chung thuang duqc th\fc hi~n b~ng cach Slr Chuang 7:PHA.T TRIEN GIAO DIBN NGVOI DUNG Trang 79 d\lng cac hinh anh f)i~u co ve hSt suc tho sa so vai cach chung dugc thgc hi~n d~ dang vai CSS 3.0 Ap d\lng m(>thinh bong cho van ban Cllado~n van bfulg cach su d\lng ki@utext-shadow (hinh bong van ban) Cu6i cling, luu y r~ng vling cho do~ van ban bi rang bu(>cb~ng cach thiSt l?p chi~u cao va chi~u r(>ngCllaphfuI tic div cha my, va van ban qua Ian Thay vi chi c~t bat van ban nhu ta da th~y cac trinh duy~t cu, ta se nh?il dugc m(>thi~u trng cac d~u ch~m lung ( ) thu vi b~ng cach thiSt l?p ki@udang text-overflow(tran van ban) Cu6i cling, di dSn phfuI cu6i Clla van ban No cung co m(>tduemg vi~n xung quanh, nhung luu y r~ng no xu~t hi~n b6n c(>tvai cac b(>chia tach c(>t.f)@lam di~u nay, hay thiSt l?p ki@u-webkit-column-count, va thiSt l?p ki@uwebkit-column-rule di kern d@nh?n dugc cac b(> chia tach Ta co th@tuang tuqng se te nh~t dSn dau nSu van ban theo dinh d~ng nhu thS rna khong co cac tinh nang CSS 3.0 mai Day cung co thS la m(>ttinh nang co ich ta t~o cac tieu d~ va cac chan trang dan gian, ca hai d~u la nhUng phc1ntll' mai HTML Hay xem xet chung va m(>t s6 cach danh d~u mai khac nu'a dugc HTML giai thi~u Cae ngfr nghia moo HTML them nhi~u phfuI tu mai van mon sup danh d~u HTML M(>ts6 cac phc1ntu se lam cho cac trinh duy~t dua cac cach xu ly hiSn thi maL Cac phc1ntu khac se them cac tinh nang be, sung rna sau tra nen co s~n thong qua JavaScript Tuy nhien, m(>ts6 phc1ntic s6 se khong lam nhu V?y Chung se gi6ng va co cling cac giao di~n l?p trinh nhu , , va

Tuy nhien, chung se them y nghi'a ngfr nghi'a be, sung Cac ngfr nghi'a mai khong chi quan tr9ng cho nguai su d\lng trang khong co hinh anh Trang 80 Chuang 7:PHAT TRlEN GIAO DII;:NNOVO! DUNO (bao g6m ca b~t clI dang sir d\ll1g cac cong ngh~ trq giup nhu cac trinh dQc man hinh) rna quan tr9ng cho cac chuang trinh may tinh gi6ng nhu cac trinh duy~t cua may tim kiSm Cac the m6'i cling cung c~p cac d~u moc cho cac nha phat triSn dS viSt cac bQ Ch9n CSS y nghia han Hinh cho th~y mQt trang Web dang sir d\lng mQt s6 cac phful tir ngfr nghia maio Hinh 7.4 Cae phAn tfr HTML m6'i tren iPhone h"IJ,~!8tJl~S\I~,~,;~"'ieM.', '!ll O ~ rR~a~o:ments have I headers Even if they don't say so ~.?l?l JYl'ov!l.t I~ There are a lot of new markup elements in HTML5 Sunday, May 16 Did you notice tbat we just bad two H l's? But it's cool! If this page was really popular, I'd put an ad Vi d\l Hinh co mQt ph~n tir header (tieu d~), cling nhu cac ph~n tir nay, mQt phful tir article (bai viSt), mQt ph~n tir section (ph~n), va mQt ph~n tir aside (nh?n xet) Cac ph~n tir khong gay b~t kY S\f di~n ta d~c bi~t nao Chung chi them gia tri ngfr nghia, va co thS sir d\lng chung dS viSt CSS nh~m Chuang 7:PHAT TRIEN GlAO meN NGU'OI DUNG cung c~p cho chung cac cach xu ly hinh Trang 81 anh t11lcquan cho phu hqp vai gia trj ngu nghia Ma dung cho trang duQ'chi@nthi a Hinh co Li~t ke Li~t ke Cae ph~n tir ngfr nghia mOl HTML -~ j i I I I I I I I J Trang 82 Chuang 7:PHA.T TRIEN GlAO meN NGUOl DUNG Ta co thS thfiy m