Tp_Ch

Lp Trnh

{LpTrnh();}

Tp Ch

Coding is cool :-)

Shakira
10 cch tr thnh Lp trnh vin gii
4

Hiu ng

Trang 10

Responsive Web Design

16

Cu trc d liu
18

Coding Dojo
24

VOL. 1
Thng 1, 2013

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

194

17

categories

226 tags

comments

38,304

views

114

posts

VOL.1Thng 1/2013

http://www.zastavki.com/pictures/1920x1200/2009/New_Year_wallpapers_New_Zeland_New_Year_012879_.jpg

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

TRONG S NY
Th ng ca Ban bin tp Tnh trng thiu ht ngun nhn lc cng ngh thng tin (CNTT) ti Vit Nam trong thi im hin ti v trong nhng nm ti c nhc n rt nhiu trong thi gian gn y. Theo B TT-TT, nhu cu nhn lc CNTT mi nm tng 13%. c tnh trong vng 5 nm ti, cc doanh nghip trong nc c nhu cu tuyn dng 411.000 ngi c trnh chuyn mn v CNTT. Bn cnh , cc c quan nh nc cng cn khong 15.000 ngi tham gia trin khai cc d n. Tuy nhin, mi nm c nc cng ch o to c khong 60.000 nhn lc. Khng nhng thiu v s lng, m cht lng ca ngun nhn lc CNTT hin nay cng ang mc yu, v mt trong nhng nguyn nhn c ch ra l do chng trnh o to ca phn ln cc c s o to CNTT khng ph hp vi nhu cu thc t ca cc doanh nghip, cho nn c nhiu sinh vin ra trng nhng vn khng p ng c cc yu cu ca doanh nghip. Vi mong mun thc y vic hc tp, ging dy v thc hnh pht trin phn mm, thng 7/2012, mt nhm cc ging vin cng ngh phn mm c tm huyt khi xng vic thnh lp Tp Ch Lp Trnh vi mc ch to ra mt knh thng tin a chiu v pht trin phn mm. chng ta c c hi trao i vi nhau v tt c cc lnh vc, kha cnh c lin quan n ngh lp trnh. Vi s ng h ca ngi c cng vi s ng gp nhit tnh ca nhiu cng tc vin, Tp Ch Lp Trnh bc u t c nhng thnh cng ng mng. c hn 100 bi vit c ng vi tng cng gn 40000 lt truy cp, gn 200 kin phn hi thuc nhiu lnh vc khc nhau. khch l tinh thn ca i ng cc tc gi v cng tc vin cng nh l mt mn qu nm mi m Tp Ch Lp Trnh mun gi ti ngi c, chng ti chn lc v bin son li cc bi vit trn Tp Ch Lp Trnh cho ra i cun tp ch m cc bn ang cm trn tay. Ln xut bn ny nh du mt ct mc mi trong qu trnh pht trin ca Tp Ch Lp Trnh, v chng ti lun mong mun nhn c s ng h cng nh ng gp ca tt c nhng ai mang trong mnh dng mu lp trnh. Vi trnh , kinh nghim v thi gian cn eo hp nn chng ti tin rng s c nhiu thiu st trong ln xut bn ny. Chng ti mong mun s nhn c nhiu cc kin ng gp v ph bnh ca ngi c trong tng lai chng ti s c th mang n cho cng ng nhng n phm c cht lng tt hn. Xin cm n v chc cc bn mt nm mi trn y nng lng, thnh cng v vui vi ngh vit m.
VOL.1Thng 1/2013

NH HNG

10 cch tr thnh lp trnh vin gii T hc lp trnh trong 10 nm

LP TRNH

10

Hiu ng Shakira To layout n gin vi DIV v CSS Ty bin List p hn vi CSS 2013: Nm ca Responsive Web Design Cu trc d liu: Cht v thiu hiu bit Array trong JavaScript To gi hng trong ASP.NET

12

14

16

18

19

20

K NNG MM

20

khng mt ng lc hc tp

HOT NG

22

Coding Dojo l g?

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

10
T

cch tr thnh mt lp trnh vin gii

i vi mt lp trnh vin trong th gii cng ngh, c mt th m c th ko chng ta ra khi nh v n ni lm vic, l nim vui v am m trong vic lp trnh. Nhng khin cho cng vic thc s vui v v c th to ra mt nim hng khi vnh cu, chng ta cn phi bit nhng iu cn bn gip tr thnh mt nh lp trnh vin gii.
Tc gi: Ashish AryaNgi dch: Phm Thy Dng Mt lp trnh vin gii l mt ngi lun nhn 2 pha khi bng qua ng 1 chiu. ~ Doug Linder~

rong bi vit ny, ti tp hp nhng mo m mnh hc v thc hnh trong thc tin c c nhng kt qu tt nht. Khng c nh ngha th no l mt lp trnh vin gii, tuy nhin ti ang ni ti mt nhm nhng con ngi to ra nhng gii php xut sc cho nn cng nghip IT v gip cho nn cng nghip ny ngy cng pht trin.

1. Lm vic vi Cn bn

ng vi tt c cc ngnh ngh v cng vic, hiu c bn cht l nhn t quyt nh cho thnh cng. Tr khi mt ngi c mt nn tng vng chc, bng khng anh/c y s khng bao gi tr thnh mt ngi lp trnh gii. Vic hiu c bn cht gip cho chng ta c th thit k v thc hin nhng gii php hay vi nhng cch tt nht c th. Nu bn vn cn cm thy c khong trng trong lnh vc khoa hc my tnh hoc cc khi nim trong ngn ng lp trnh, s khng bao gi l qu mun quay u v hc li nhng iu cn bn.

ri dng code ca mnh cho n khi bit chc chn ci g ang xy ra khi dng code c chy. i khi, vi thi gian hn hp, chng ta khng th lc no cng c c s t do lm iu , v i khi ta phi b d vic o su nghin cu v chp nhn rng dng code c th lm c vic. Nhng i vi mt ngi lp trnh gii, chng ta lun c th c gng ht sc o vn cng su cng tt. V hy tin ti i, vic ny s tr thnh mt thi quen v sau bn lm m khng bit rng mnh ang thc hin iu .

nhng on code hp l v trnh s rm r phc tp. Nhiu ngi c tnh vit ra nhng on m phc tp chng t kh nng ca mnh, nhng theo kinh ca mnh, ti thy nhng on code n gin, logic lun lm c vic, n thng s t c vn v d dng m rng. Ti vn cn nh mt on trch dn: Nhng on m tt th bn thn n l mt ti liu tt nht. Mi khi bn phi thm vo 1 dng ch thch (comment), hy lun t cu hi: Lm cch no ti c th lm sng t on m ny m khng cn phi ch thch thm ~ Steve McConnel ~

3. Bn hc c nhiu hn nu gip

2. Hy bt u nhng cu hi (lm

sao, ci g) vi tt c nhng on code bn vit Mt iu gip ti nhn ra s khc bit gia nhng ngi lp trnh gii v nhng ngi khc chnh l s thi thc mun bit ci g v lm cch no iu li xy ra. C mt nhm nh nhng ngi s khng bao gi

ngi khc Hu ht chng ta c mt xu hng ph bin l quay li vi cc din n ch khi chng ta cn s gip . V mt ln na, mt iu phn bit gia ngi lp trnh gii v nhng ngi khc l h vo cc din n thng xuyn gip v chia s. iu ny s khin h hc hi thm c nhiu iu hn l vn ca mnh cho ngi khc gii quyt. V tin ti i, vic hiu c vn ca ngi khc trong bi cnh ca h , iu tra v cung cp gii php s khin bn hc c nhiu hn so vi trc y.

5. Dnh nhiu thi gian trong vic

phn tch vn , bn s cn t thi gian hn sa cha n Dnh nhiu thi gian trong vic tm hiu v phn tch vn v thit k gii php cho n s gip bn d dng thc hin c phn cn li. Thit k khng phi lc no cng c ngha l bng cch s dng ngn ng m hnh ha v cc cng bu

4. Vit code n gin, d hiu

nhng phi ng logic Nh trong hu ht mi kha cnh ca cuc sng, cng thc KISS (Keep It Short and Simple) cng c p dng vi lp trnh. Hy vit nhiu

tri v suy ngh gii php trong tm tr ca bn. Nhng ngi c thi quen nhn bn phm ( vit code) ngay thi im nhn c vn , thng kt thc vi mt ci g khc hn nhiu so vi yu cu.

VOL.1Thng 1/2013

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Nu bn khng th hnh dung ra

cu trc tng th ca mt chng trnh trong khi ang tm, bn cha sn sng code n.

6. Hy l ngi u tin phn tch

~ Richard Pattis ~

nhng khi nim ny hn l lo lng v chy theo nhng framework v tool xung quanh n. Vi nn tng v cc khi nim c bn vng chc, bn s lun lun thy vic hc cng ngh mi, tool hay cc API s l cng vic kh n gin.

10. Bn c th hc hi t m ca

v kim duyt m ca bn Mc d c mt cht kh khn, nhng hy c gng khm ph nhng on m ca bn trc khi nhng ngi khc lm vic , v vi thi gian, bn s hc c cch vit ra nhng on m m hu nh s khng c li. Lun lun xem xt cht ch v khng thin v vi nhng on m ; Cng khng bao gi ngn ngi ngi khc xem n. Lm vic vi cc lp trnh vin tt th cc phn hi t h chc chn s gip bn tr thnh mt lp trnh vin tt. Khng chy theo cng ngh Trong giai on gn y ca ngnh cng nghip IT, ti gp rt nhiu ngi tht vng bi cng vic ca h, thm ch b vic tm nhng c hi mi. H ni rng h mun hc v tm hiu nhng cng ngh mi nht. Nhng g chng ta nghe thy hng ngy v cng ngh mi c th hiu l nhng cng c mi, API, framework v n c pht trin theo tng ngy khin cho vic lp trnh d dng hn v nhanh hn. iu ny d sao vn ang rt ph bin v s tip tc trong th gii cng ngh. Nhng nhng g cn phi hiu chnh l cc cng ngh ct li v c bn th thay i rt t so snh vi cc framework, tool v API xung quanh n. Cng ging nh nc bin, nu nc tng trn thng ni sng cun cun v chy i vi tc rt nhanh th nc tng su li t di chuyn v mi chnh l ni ngun thy sn sinh si v pht trin. V th, hy cm nhn chnh mnh trong phn nc su, v gn gi vi nhng cng ngh ct li. V d, trong Java Enterprise, hin ang c rt nhiu web frameworks tn ti v cn nhiu na sp c tung ra. Nhng nhng khi nim ct li ca m hnh ClientServer, MVC pattern, filters/servlets/ JSP, resource bundling, XML parsing th vn khng thay i. V th hy dnh nhiu thi gian tm hiu v

8. Gii php tm thi (work-around

solution) khng tn ti c lu Rt nhiu lp trnh vin s dng cc gii php tm thi, l do c th l do thiu thi gian, thiu kinh nghim, thiu s hiu bit ca vn . Nhng theo thi gian, nhng gii php

ngi khc Ti cng tc vi mt s lp trnh vin xut sc, nhng ngi lc no cng c nhng d n java trong IDE ca h c th c hoc tham chiu n n trong cng vic hng ngy. H lm iu khng ch tha mn nhu cu c hiu v cc vn cn bn m cn l mt cch vit nhng chng trnh tt. c v tham kho nhng m ngun uy tn hoc t nhng ng nghip lu nm, s gip cho bn to ra nhng chng trnh tt hn.

7.

s gy ra s hng hc ca chng trnh hoc m, n khin ta kh c kh nng m rng hoc bo tr, dn n vic tn nhiu thi gian v cng sc sau ny sa cha n. V th hy lun lun ghi nh l cn phi tm nhng gii php khi bn bit r u vo v u ra ca n. Trong nhiu trng hp, s kh trnh khi nhng vic phi s dng workaround, cng ging nh vic ngi ta hay ni: Ti lun lun ni tht, nhng trong mt vi trng hp ti phi ni di.

9. c ti liu

Mt trong nhng thi quen cn thit ca cc lp trnh vin gii l h c rt nhiu ti liu. N c th l cc thng s k thut, JSR (Java Specification Request), ti liu, hng dn API. c ti liu s gip bn hnh dung ra nn tng thit yu da trn , bn c th lp trnh theo cch tt nht.

V iu cui cng, khng c lit k trn: ng so snh mnh vi nhng ngi khc So snh ca bn v bn thn vi ngi khc s ch dn n nhng cm xc tiu cc v cnh tranh khng lnh mnh. Mi ngi u c im mnh v im yu ring. Quan trng hn l chng ta phi hiu bn thn v lm vic vi n. Ti nhiu ln chng kin nhng ngi c cho l lp trnh vin kit xut li lm ra nhng sai lm ng ngn. V vy, phn tch bn thn, lp danh sch nhng th bn cn ci thin v lm vic vi n. Lp trnh l mt nim vui thc s, hy tn hng n.

Bt k k ngc no cng c th vit

m mt my tnh c th hiu c. Cc lp trnh vin gii vit m cho nhng ngi khc c th hiu c.

~ Martin Fowler~
VOL.1Thng 1/2013

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

10 nm
Peter Norvig

T hc lp trnh trong

Trong 3 ngy thm ch bn cn cha thi gian vit c mt vi chng trnh cho ra hn ch ng ni n vic hc t nhng thnh cng v tht bi. Bn cng khng c c hi lm vic vi nhng ngi c kinh nghim v hiu xem ci g ang xy ra xung quanh mnh. Ni tm li l bn chng th no hc cho cn k c. 3 ngy ch bn lm quen vi phn ni b ngoi, khng phi s thu hiu. V nh Alexander Pope tng ni: Hiu bit nng cn cn nguy him hn k m ch (A little learning is a dangerous thing).

T
mt tm

i sao by gi ngi ta li vi vng n nh vy?

T y c th rt ra kt lun: Hoc l by gi ngi ta x i tm hiu v my tnh, hoc my tnh khng hiu v mt l do hoang ng no li tr nn d hc hn nhng th khc. Chng c quyn sch no hng dn hc Beethoven, Vt l Lng t hay thm ch l chm sc cho ch (Dog Grooming) ch trong c vi ngy. Felleisen v cc ng s ng tnh vi xu hng ny trong cun How to Design Programs, khi h cho rng lp trnh bn l rt d, nhng k ngc, thm ch n n c th hc n trong 24 gi Hy th xem ci title: Learn C++ in Three Days gi ln c iu g:

Ro bc quanh cc ca hng sch, bn s thy ci ta: Hng dn lp trnh Java trong 7 ngy nm bn cnh mt dy di v tn nhng li ngh dy hc i loi nh vy v Visual Basic, Windows hay Internet ch cn vi ngy hay vi gi ngn ngi. Ti th thc hin kim nng cao (advanced search) ti Amazon.com: pubdate: after 1992 and title: days and (title: learn or title: teach yourself) v nhn c 248 kt qu. 78 kt qu u tin l sch v my tnh (cun th 79 l Learn Bengali in 30 days). Th thay days bng hours, nhng g thu c cng hon ton tng t: 253 kt qu, vi 77 kt qu u tin l my tnh (cun th 78 l Teach Yourself Grammar and Style in 24 Hours ). Khi vt ra ngoi top 200, tt c cc cun sch u l sch v my tnh.

Learn:

Trong 3 ngy thm ch bn cn cha thi

gian vit c mt vi chng trnh cho ra hn ch ng ni n vic hc t nhng thnh cng v tht bi. Bn cng khng c c hi lm vic vi nhng ngi c kinh nghim v hiu xem ci g ang xy ra xung quanh mnh. Ni tm li l bn chng th no hc cho cn k c. 3 VOL.1Thng 1/2013

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com ngy ch bn lm quen vi phn ni b ngoi, khng phi s thu hiu. V nh Alexander Pope tng ni: Hiu bit nng cn cn nguy him hn k m ch (A little learning is a dangerous thing). C++: Trong 3 ngy c th bn hc xong c php ca C++ (nu bn thc s bit mt vi ngn ng lp trnh khc), nhng bn kh m hc c cch s dng chng. Ni ngn gn, nu bn l mt lp trnh vin Basic, bn c th vit nhng chng trnh theo phong cch Basic s dng c php ca Pascal, nhng bn s chng hiu c nhng u im hay nhc im ca Pascal. Vy quan im y l g? Alan Perlis (ND: Gio s i hc Yale), trong Epigrams on Programming tng ni: Mt ngn ng m chng nh hng g n cch bn t duy v lp trnh, ngn ng y ch l b i, khng ng hc. C th chp nhn c nu bn ch nh hc i cht v Pascal (hoc Visual Basic hay JavaScript) v bn ch cn lm quen vi nhng cng c c sn lm mt vic no . Nhng y khng phi l bn hc ngn ng lp trnh, bn ch hc hon thnh nhim v c th ca mnh m thi. Trong 3 ngy: Tht ng tic, iu ny l khng th, nh ti s ch ra di y. T hc lp trnh trong 10 nm Cc nh nghin cu (Bloom (1985), Bryan & Harter (1899), Hayes (1989), Simmon & Chase (1973)) ch ra rng cn t nht 10 nm t c s tinh thng trong nhiu lnh vc, t nh c, sng tc m nhc, hi ha, bi li, tennis, hay thu c xut bn #1 u tin vo nm 1964, h cng phi cm ci trong nhng cu lc b nh ti Liverpool hay Hamburg t nm 1957, v trong khi h c sc hp dn i chng t rt sm, thnh cng quan trng u tin ca nhm l Sgt. Pepper, album c pht hnh nm 1967. Malcolm Gladwell c bi bo nghin cu so snh v cc sinh vin ti Hc vin m nhc Berlin trong ba nhm tt, kh v trung bnh v hi h thc hnh chm ch nh no: Tt c mi ngi, t tt c ba nhm, bt u chi cng mt khong thi gian tm khong nm tui. Trong nhng nm u tin, tt c mi ngi thc hnh mt lng nh nhau kt qu trong tm l thn kinh hay hnh hc topo. iu quan trng l bn v phng php thc hnh: khng ch l vic lp i lp li n thun, m cn th thch chnh mnh bng nhng nhim v nh vt qua kh nng hin ti ca bn thn, c gng, phn tch hiu xut ca mnh trong v sau qu trnh rn luyn, v sa cha bt k sai lm no. C nh vy, lp i lp li. V lch s chng minh khng th c con ng tt: d cho l Mozart, thin ti m nhc ny n t nm ln 4 tui, cng phi mt 13 nm cho ra i tc phm nhc c in u tin. D cho l Beatles, trc khi khong hai hoc ba gi mt tun. Nhng tm tm tui s khc bit thc s bt u xut hin. Cc sinh vin trong nhm tt nht, h bt u thc hnh nhiu hn nhng ngi khc: su gi mt tun lc chn tui, tm tui l 12 gi, 16 gi mt tun khi 14 tui, v tng ln dn, cho n tui 20 h c tp luyn 30 gi mt tun. 20 tui, ngh s u t c tt c 10.000 gi thc hnh trong cuc sng ca h. Cc sinh vin ch n thun l tt t 8.000 gi, v gio vin m nhc trong tng lai l hn 4.000 gi. V vy, c th 10.000 gi, ch khng phi 10 nm, l con s k diu. (Henri Cartier-Bresson (1908-2004) ni: 10.000 bc nh u tin ca bn l t nht, nhng ng chp nhiu hn mt bc trong mt gi.). Samuel Johnson (1709-1784) ngh rng vic ny thm ch cn lu hn: S vt tri bt c lnh vc no cng ch c th t c bng lao ng ct lc trong sut cuc i, bn khng th mua n bng mt ci gi r hn. V Chaucer (1340-1400) phn nn rng: Cuc i qu ngn ngi, trong khi nhng mnh khe th li qu di c th hc c. Hippocrates (khong 400BC) c bit n vi cc trch on ars longa, vita brevis, l mt phn ca chch on di hn Ars longa, vita brevis, occasio praeceps, periculosum experimentum, iudicium difficile, vi ngha tm dch l Cuc i l ngn ngi, vi c hi ph du, y dy cc k nng, vi cc th nghim nguy him, v phn quyt kh khn. Mc d trong ting Latin, ars c th c ngha l ngh thut, hoc mnh khe, nu so t gc ting Hy Lp techne th ch c th c ngha l k nng, khng phi ngh thut. VOL.1Thng 1/2013

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com V nu bn mun tr thnh lp trnh vin. y l cng thc cho nhng thnh cng ca ti trong lp trnh: trong cng vic . Trong bt k trng hp no, ch c sch thi l cha . Bt v v mc mu khng th bin bn tr thnh ha s, cng nh nhng bi ging v khoa hc my tnh trn lp khng th gip bn tr thnh chuyn gia lp trnh, Eric Raymond, tc gi ca The New Hacker Hy yu thch n, bn lm v bn cm thy vui v v ho hng. Hy chc chn rng bn lun nh th trong 10 nm Hy trao i vi nhng lp trnh vin khc, c chng trnh ca h vit. iu ny cn quan trng hn bt k quyn sch hay kha o to no. Lp trnh: Cch hc tt nht l hc i i vi hnh (learning by doing). Ni cho r rng hn th: Tm cao nht ca mt lnh vc no khng th c c ch thng qua s b sung v mt kinh nghim. Nhng k c khi c rt nhiu kinh nghim, nu c gng v n lc, bn vn c th tin xa hn v hc tp mt cch hiu qu nht, bn cn phi xc nh r kh nng hin ti ca mnh, thu thp kin thc t ngi khc, v t tm ly nhng c hi hc theo v sa i sai lm ca chnh mnh. Cognition in Practice: Mind, Mathematics, and Culture in Everyday Life l mt cun sch rt hu ch cho quan im ny. Nu bn mun, hy ginh 4 nm i hc (v nhiu hn trng ph thng). Bn s c c hi lm nhng cng vic yu cu kh nng v hiu bit chuyn su hn trong mt vi lnh vc, nhng nu bn khng thch trng hc, bn c th (vi mt s s ni lc v cng hin) c c kinh nghim tng t ca ring bn hoc Dictionary ni nh vy. Mt trong nhng lp trnh vin gii nht m ti tng thu cha tng c bng i hc, nhng anh vit nhng tuyt vi (v d), ch cn giu hn c ti. Hy tham gia vo cc projects vi nhng lp trnh vin khc. Bn c th l best programmer trong mt projects, nhng cng c th l worst. Nu l best, hy th kh nng lm leader ca mnh. Cn ngc li, hy hc hi xem ngi gii nht lm g, v hc xem h khng lm g (v h mun bn lm nhng vic ). Trong mt project, hy bt tay lm vic sau nhng lp trnh vin khc, khi bn hiu chng trnh ca h. Hy tm xem nhng g cn thit hiu v chnh sa khi ngi vit ra chng trnh khng c mt y. Th ngh xem lm th no thit k nhng chng trnh gip cho nhng ngi sau ny c th d dng hn trong vic bo tr n. Hy hc t nht khong na t ngn ng lp trnh, bao gm: Mt ngn ng h tr vic to cc lp ta tham gia phn c news mm tru tng (Java hoc C++) Mt ngn ng lp trnh hm (Lisp hoc ML) Mt ngn ng c php (Lisp) Mt ngn ng h tr khai bo nh danh (Prolog hoc C++ templates) Mt ngn ng h tr coroutine (Icon hay Scheme) Mt ngn ng h tr song song (Sisal) Hy nh rng my tnh l mt phn ca khoa hc my tnh. Nn nm r thi gian my tnh thc hin mt ch th, ly mt t trong b nh (c hay khng c cache), c nhng t lin tip trong a, hay tm kim mt vng nh c th. Thi gian cn thit thc hin cc php ton vi mt PC tc 1GHz: Hy c gng tun nhng nh tiu chun ca ngn ng. C th l ca ANSI C++, hoc n gin l ca cng ty bn. Bn cng nn tm hiu xem ngi ta thch g ngn ng , h cm thy th no, hay v sao h thch n. Hy sn sng t b nhng tiu chun ca ngn ng cng nhanh cng tt. Vi nhng iu ti ni trn, bn c th bn khon rng bn s t n mc no nu ch c sch? Trc khi con trai c ca mnh ra i, ti c tt c nhng cun sch How To (lm th no), v vn cm thy v cng m m, ri rm. 30 thng sau, khi sinh a th hai, phi chng ti quay li chng vi ci nhn hon ton mi m? Khng, ti ch da vo kinh nghim ca chnh mnh. VOL.1Thng 1/2013 theo qui

group ca ring mnh v anh ta thm

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com Chng c ch v khin ti vng tin hn nhiu so vi vic c hng ngn trang sch ca cc bc chuyn gia. Fred Brooks, trong bi lun ni ting No Silver Bullets lm r ba bc tm mt nh thit k tt: Trao c hi cho nhng nh thit k ang trong giai on trng thnh h c th tip xc, hc hi, nng cao trnh . iu ny coi nh gi nh l mt s ngi c y nhng phm cht nn th. Perlis tng ni rng nhng ngi v i sn c mt ni lc vt qua c s o to. Nhng ni lc n t u? Bm sinh ? Hay chng c pht trin thng qua s tch cc? Nh Auguste Gusteau (u bp huyn thoi ca Ratatouille) ni: bt c ai cng c th nu n, nhng ch nhng ngi khng bit s mi tr nn v i. Ti ngh v iu ny nhiu n mc c nh l sn sng cng hin phn ln thi gian trong i ca ai lun bn. Nhng khng h s hi c l l cch tm li tt c nhng iu . Hoc, nh nh ph bnh Gusteau, Anton Ego, ni: Khng phi tt c mi ngi u c th tr thnh mt ngh s ln, nhng mt ngh s ln c th n t bt c ni no. V vy, nu mua quyn sch Java/ Hy gii thch mt cch c h thng cho cu hi: Th no l mt nh thit k nh? cng sm cng tt. Hy giao trin vng v tng lai pht trin ca cng ty cho nhng ngi thng thi, c nhiu kinh nghim v tm cch gi chn h cn thn. cn thit tr thnh mt nh thit k ln, v cng vic d h theo. Alan Perlis tng ni: Mi ngi u c th c dy iu khc, Michealangelo th khng. V ng t tr thnh nh iu khc v i. Nhng lp trnh vin siu hng cng Ruby/Javascript/ PHP ni trn, bn c th s thu c mt vi iu c ch. Nhng n khng th thay i cuc i ca bn, hoc a bn n s thnh tho hay tinh thng, ch trong 24 gi, vi ngy hay thm ch l vi thng. Ngi dch: Nguyn Ngc T

Ti nn la chn ngn ng lp trnh no bt u?

Hy nhn vo bn b mnh. Khi hi: Ti nn s dng h iu hnh no y, Windows, Unix hay Mac? ti thng p rng: Hy nhn vo bn ca mnh. Li ch thu c t vic hc hi bn b s b p cho nhng khc bit cn bn gia cc h iu hnh hay ngn ng lp trnh. Thm na, hy nhn nhng ngi bn sp quen: l tp hp cc programmer m bn s song hnh cng h nu bn vn tip tc hnh trnh. Ngn ng bn chn c mt cng ng pht trin rng ln hay ch mt vi ngi tham gia? C nhng ti liu, websites hay forums no m bn s nhn c li gii p cho thc mc ca mnh? Bn c thch nhng ngi khng? Hy lm tht n gin. Nhng ngn ng nh C++ v Java c thit k cho cc ng dng chuyn nghip thc hin bi i ng ng o cc lp trnh vin giu kinh nghim, nhng ngi vn rt quan tm n hiu sut nhng dng m ca h. V th, chng thng bao gm nhiu thnh phn rt phc tp. Nu mi bt u, bn khng cn n s phc tp. Bn hy hc nhng ngn ng c cu trc n gin, d hc. Chi. Bn thch hc piano theo cch no hn: kiu tng tc thng thng, tc l bn nghe mi nt nhc ngay khi nhn mt phm n hay cch thc theo l, tc bn ch nghe cc nt sau khi hon thnh c nhc phm? R rng, cch th nht gip bn d dng hc hn phi khng? Lp trnh cng nh vy. Hy chn cho mnh mt kiu tng tc v s dng n Theo tiu chun ca ring mnh, ti khuyn bn nn bt u vi Python hoc Scheme. Nhng mi ngi c nhng hon cnh khc nhau, v c th c nhng la chn tt hn. Nu tui ca bn mi ch l s c mt ch s, theo ti bn nn chn Alice hoc Squeak (ngi ln cng c th thch chng). Tuy nhin, khng phi l iu quan trng. Quan trng l, hy chn i v bt u ngay lp tc.

VOL.1Thng 1/2013

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Hiu ng

Khi di chut ln bc nh ta nhn c kt qu sau:

Shakira
Nguyn Khc Nht

Hiu ng Shakira?
Cho cc bn, Coding is cool l cu khu hiu ca Tp Ch Lp Trnh, tuy nhin, ti bit rng vic Lp trnh c i khi l nhm chn, nht l i vi nhng ngi vn cn kh khn trong vic tip cn nhng dng code mi. Nhm to mt cht vui v v cng mang li cho cc bn cht hng th play vi nhng dng code ca mnh, hm nay ti gii thiu ti cc bn cch dng CSS to mt hiu ng c tn l Hiu ng Shakira. Chc chn bn gp hiu ng ny nhiu ln nhng ch l bn khng bit n ci tn m ti dng gi n m thi, (th thc l cch y khong 30 pht v trc nu c ai hi ti v ci hiu ng c tn nh vy th ti cng chu, n gin l v ti va mi ngh ra :)). Hiu ng ny c m t nh sau: Chng ta c mt bc nh, trn bc nh c mt tiu ca bi vit, khi ta di chut ln trn bc nh th mt on tm tt ni dung bi vit s c hin ra. n gin l th. Tm li, ban u ta c ci ny:

HTML Code
Chng ta bt u nh, m HTML ca chng ta l nh sau:
<div class="shakira-box"> <img src="shakira-1.jpg"/> <div class="shakira-content"> <h2 class="shakira-header">Nhy cng Shakira</h2> <p class="shakira-body">Shakira sinh ngy 2 thng 2 nm 1977, l mt ca s, nhc s, nhc cng ngi Colombia, mt trong nhng ca s nhc Rock thnh cng nht th gii.</p> </div> </div>

Nhn vo bn s d dng nhn thy rng ti c mt th div ngoi cng vi class l shakira -box, y chnh l th div cha tt c cc thnh phn con bn trong nh l: mt bc nh (th <img>), mt th <div> vi ni dung bn trong l mt header (th <h2>) v mt on tm tt bi vit (th <p>). d b iu khin cc thuc tnh ca th th ti thm vo cc class khc nhau. By gi n lt thm cc dng code css.

CSS Code
.shakira-box{ width:400px; height:300px; overflow:hidden; }

i vi th <div> ngoi cng th ti s gn cho n mt chiu cao, chiu rng nht nh; thm na ti gn gi tr hidden cho thuc tnh overflow, iu ny khin cho ci box ny ch hin th nhng ni dung nm trong khong khng gian ca n, nhng phn nm ngoi th s b n i.
.shakira-box img{ width:100%; height:100%; }

VOL.1Thng 1/2013

10

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com on code trn th qu n gin phi khng no, chc khng cn phi gii thch g thm.
.shakira-box .shakira-content{ width:100%; height:120px; top:-40px; position:relative; background-color:rgba(0,0,0,0.6); color:#FFF; }

Cc bn cng bit rng css3 vn ang trong qu trnh pht trin, do c nhiu trnh duyt cha h tr ht cc thuc tnh transition, vic ta thm cc tin t nh -moz-, webkit-, -o- l cn thit thuc tnh ny hot ng tt trn cc loi trnh duyt khc nhau (ngoi tr anh chng Internet Explorer t trc cho n phin bn 9). Thuc tnh transition trong trng hp ny quy nh rng thuc tnh top s khng thay i ngay tc th khi chng ta hover chut ln box, m n s thay i dn dn trong vng 0.5 giy.

on code trn chnh l ni quan trng nht ca hiu ng ny, ta s i phn tch tng dng mt. Thuc tnh width quy nh rng th <div> ny s c rng bng chnh th bao ngoi (th c class l shakira-box ); thuc tnh height quy nh chiu cao ca th content (th c class l shakira-content), trong trng hp ny th th content ca ti c chiu cao l 120px. Thuc tnh position c gi tr l relative, thuc tnh top c gi tr l-40px, iu ny lm cho th <div> ca chng ta c dch ln pha trn mt on l 40pxso vi v tr bnh thng ca n, ti lm nh vy vi mc ch l phn header ca chng ta nm gn bn trong box v s c nhn thy, bn nn xem on code di y v bn s thy l phn header s c chiu cao l 40px:
.shakira-box .shakira-header{ height:40px; margin:0; font-size:24pt; padding: 0 5px; }

Li kt
c c nhng hiu ng nh trn th ngoi vic s dng CSS chng ta c th dng javascript, hoc n gin hn l dng jQuery, nhng nu so v s lng dng code th chc chn vic dng css s t hn nhiu, cn nu so v performance th vic dng css cng ti u hn (sao th nh?), chng ta cn phi cm n css3 v cung cp nhiu thuc tnh mi v rt tin li chng ta s dng.

Song song vi vic quy nh v tr cho th content, by gi chng ta s to mt b chn css khc nu khi ta di chut ln trn box th v tr ca th content s thay i:
.shakira-box:hover .shakira-content{ top: -120px; }

By gi bn th dng li v quan st kt qu ca mnh no. Tt c mi th hot ng tt, tr vic chng ta vn cha c c hiu ng di chuyn chm ln pha trn. lm c iu ny th chng ta nn s dng thuc tnh transition m css3 cung cp cho chng ta, b chn .shakira-box .shakira-content by gi c sa li :
.shakira-box .shakira-content{ width:100%; height:120px; top:-40px; position:relative; background-color:rgba(0,0,0,0.6); color:#FFF; transition:top 0.5s; -moz-transition:top 0.5s; -webkit-transition:top 0.5s; -o-transition:top 0.5s; -ms-transition:top 0.5s; }

W3C a ra bn dng th u tin ca CSS3 vo thng 2 nm 2008, sau hn mt thp k k t khi CSS2 ra i. Thi im pht hnh ca HTML5 c n nh vo nm 2022, cn CSS3 th phi mt hn 10 nm mi c th tr thnh mt tiu chun c khuyn dng. Nhng ngy pht hnh cc tiu chun ny khng quan trng bng vic cc trnh duyt nhanh chng h tr n.

VOL.1Thng 1/2013

11

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

To Layout n gin v hiu qu vi DIV v CSS

V
ic s dng DIV kt hp vi CSS lm layout (b cc) cho mt trang web tr ln ph bin v t hiu qu cao. Chng hn bn cn thit k mt trang c giao din c thit k vi layout nh sau: 1. 2. 3. 4. 5.

~ Nguyn Vit Khoa~

Cc cp th trong on m trn gip bn to ra cc phn vng khc nhau trn trang HTML ca mnh, mi phn vng c nh ID ring bit (cc ID ny s dng nh ngha CSS), chi tit nh sau: main: Phn vng cha ton b ni dung ca trang. head: Phn vng cha ni dung u tin ca trang (theo VD trn l phn logo + banner) head-link: Phn vng cha cc lin kt u trang ( VD trn: Home, Students, Course, v.v.) left: Phn vng cha cc ni dung bn tri ( VD trn l cc lin kt tri) content: Phn vng cha cc ni dung chnh ca trang ( VD trn l cc phn vng thng tin nh: Hot news, Photo Slide, News 1, v.v.) right: Phn vng cha cc thng tin bn phi trang ( VD trn l lch, biu , bn ) footer: Phn vng cha cc thng tin cui trang ( VD trn l thng tin v ch s hu v cc lin kt)

6. Vi layout nh trn bn hon ton bn c th s dng table (bng) cho vic thit k, tuy nhin table li bc l kh nhiu nhc im khi s dng lm layout cho mt trang web c cu trc nh trn. Cc nhc im c th gp phi vi table vi nhng dng layout ny l chm, kh ty chnh v kh kt hp vi CSS\Javascript to ln s linh hot cho trang web. Sau y ti s hng dn cc bn cc bc cn bn nht c th to c cc layout vi DIV v CSS. Trc ht bn cn to mi mt trang HTML vi cu trc chun (gm y cc phn html, head, title, body). Tip theo bn code on m HTML sau vo phn body ca trang.
<div id="main"> <div id="head"> </div> <div id="head-link"> </div> <div id="left"> </div> <div id="content"> </div> <div id="right"> </div> <div id="footer"> </div> </div>

7.

By gi l n cng on code cc b chn CSS (selector) phn vng r rng cho cc DIV to trn: 1. To b chn body c nh phng ch cho c trang v b chn #main c nh rng vng thng tin v trang s chim v cn chnh vng ny nm gia mn hnh.
body{ font-family: Arial, Tahoma; font-size: 12px; } #main{ width: 1000px; padding: 0; margin-left: auto; margin-right: auto; }

2. To b chn #head xc nh chiu cao, mu nn, ng vin v khong cch so vi cc vng khc (khong cch so vi vng bn di margin-bottom). VOL.1Thng 1/2013

12

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com
#head{ height: 100px; background-color: #F5F5F5; border: 1px solid #CDCDCD; margin-bottom:5px; } #content{ width: 600px; min-height: 400px; border: 1px solid #CDCDCD; float:left; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; } #right{ width: 234px; min-height: 400px; border: 1px solid #CDCDCD; float:right; margin-bottom: 5px; }

3. Kim tra li trang trn trnh duyt bn s c kt qu sau (phn div vi id l head c xc nh):

9. Quan st li trang:

4. Tip tc vi nh ngha b chn #head-link, xc nh vng t cc lin k u trang:

#head-link{ height: 30px; line-height: 30px; padding-left: 10px; padding-right: 10px; border: 1px solid #CDCDCD; background-color: #F5F5F5; margin-bottom:5px; clear: both; }

10. Cui cng, bn nh ngha b chn cho phn vng cui trang vi id l #footer:
#footer{ height: 50px; clear: both; border: 1px solid #CDCDCD; background-color: #F8F8FF; }

5. Quan st li trang trn trnh duyt, bn s thy vng lin kt u trang hin th ngay di phn head. 6. nh ngha tip b chn #left xc nh vng cho ni dung bn tri, vi rng l 200px, chiu cao ti thiu l 400px v c bit ch ti m t float: left; m t ny lm cho vng bn tri (DIV vi ID l left) s dt sang bn tri nhng ch cho cc phn vng khc: content v right).
#left{ width: 150px; min-height: 400px; border: 1px solid #CDCDCD; float:left; background-color: #004C00; margin-bottom: 5px; }

11. Quan st li trang trn trnh duyt bn s thy cc phn vng cn thit vo ng v tr cn t:

7. Quan st li s thay i v cc vng ca trang trn trnh duyt: Nh vy qua cc bc trn chng ta th nghim vi cc phng php c bn dn trang s dng th Div c s kt hp vi CSS. iu quan trng nht l bn bit cch p dng nhng k thut c bn ny to ra cc trang web c layout m bn\khch hng ca bn mong mun. By gi bn tip tc b sung thng tin vo cc phn vng v nh ngha thm cc b chn cn thit c th c mt trang HTML ging nh mu thit k u bi vit. 8. B sung tip cc selector cho vng gia v vng phi ln lt l #content v #right: Chc bn thnh tho DIV v CSS c c nhng trang web va mt ngi dng! VOL.1Thng 1/2013

13

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Ty bin List p hn vi CSS

Nguyn Vit Khoa Cch th nht: S dng thuc tnh list-style-image ca CSS thay i bullet cho danh sch. tin hnh cch ny bn tm mt icon m mnh thy ph hp nht cho danh sch k trn, cn y l icon ti chn: Icon ny ti t vo th mc icons, l th mc con ca th mc cha trang HTML k trn. By gi ta s nh ngha mt selector (b nh kiu) cho danh sch ca mnh, n gin nh sau:
ul{ list-style-image: url('icons/ bullet_green.png'); }

n c hc HTML, bn hiu rt r v cc th to List (danh sch) trong HTML. List cng cung cp cho bn nhiu cng dng trong thit k web, chng hn bn c th bin chng thnh cc Trnh n (Menu ngang, dc), dng chng lit k mt s -ri nh, mu tin, danh sch cc hng mc, v.v Bn c th thay i danh sch vi cc kiu khc nhau nh bullet trn, vung, v.v.. tuy nhin tt c nhng kiu nh dng sn c ny u khng p ng c nhu cu v m thut. Vi CSS bn c th ty bin cho List ca mnh tr ln sinh ng hn. Bi vit ny ti s gii thiu 02 cch thc n gin bn c th lm c iu ny. Trc ht bn chun b mt trang HTML cha on code sau:
<h4>Tp ch Lp trnh</h4> <ul> <li>Tin mi</li> <li>Array trong Javascript</li> <li>Hiu ng Shakira</li> <li>Tm hiu Cu trc d liu #1: Cht v thiu hiu bit</li> </ul>

Kt qu nh nh minh ha di y, chng ta s c mt danh sch vi bullet sinh ng hn so vi ban u.

Vy y, ch vi mt cht ci tin ta c danh sch vi cc bullet khc nhau thay v s dng nhng icon mc nh ca n. u im: n gin, nhanh chng t c kt qu. Nhc im: Mt s trnh duyt khng h tr thuc tnh list-style-image do c th bn s khng nhn c kt qu nh mong mun. Cch th hai: S dng thuc tnh background-image ca CSS thit lp bullet cho danh sch. Chng ta vn tip tc s dng icon trn cho trng hp ny. Tuy nhin selector dnh cho th ul c nh ngha li nh sau:
ul{ list-style-type: none; padding: 0px; margin: 0px; }

Trang ny ca chng ta s c kt qu nh th no chc bn tng tng ra ri nh?

Gi chng ta s bt tay vo lm cho danh sch ny p hn.

VOL.1Thng 1/2013

14

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com Selector trn s tin hnh b cc bullet ca danh sch (trn en, vung, trn trng) v thit lp cc thng s canh l, ni dung (margin, padding) v gi tr 0. Lc ny danh sch ca chng ta s c hnh dng nh sau: u im: H tr bi tt c cc trnh duyt, nhiu ty chnh hn i vi bullet. Nhc im: Mt nhiu thi gian v dng lnh hn so vi cch th nht

Kt lun:
Sau bi vit ny bn li trang b thm cho mnh mt v kh mi lm cho trang web ca mnh ngy cng sinh ng hn. Bn cng thy c s hiu qu khi kt hp HTML vi CSS trong pht trin website. Chc bn thnh cng :o) By gi l cng on cui trc khi xem xt kt qu, ta cn mt selector na cho th li, c th nh sau:
li{ background-image: url('icons/ bullet_green.png'); background-repeat: no-repeat; background-position: 0 5px; padding-left: 15px; }

CSS3: Mt s thuc tnh th v

Mt s thuc tnh th v c gii thiu trong CSS3, hu ht cc trnh duyt hin nay h tr cc thuc tnh ny. Vi cc phin bn c th cn b sung thm cc tin t trc cc thuc tnh: Mozilla: -mozWebKit: -webkitOpera: -oIE: -ms1. Border Radius (gc ca ng vin): border-radius

No chng ta cng xem xt thnh qu ca mnh:

danh sch ny thm sinh ng hn, bn tm thm mt icon na dnh cho trng hp a con tr qua mi phn t trong danh sch, chng hn ti dng icon sau:

2. Border Images (ng vin s dng nh): border-image 3. Box Shadow ( bng dnh cho cc khi): box-shadow

Chng ta thm mt selector na cho th li mi khi c hnh ng a con tr qua chng:

li:hover{ background-image: url('icons/ bullet_yellow.png'); cursor: pointer; }

4. Multi-Column Layout (dn trang vi nhiu ct) column-gap (khong cch gia cc ct) column-rule (ng k gia cc ct) column-count (s lng ct) 5. Multiple Backgrounds (nhiu nh nn) Cho php a nhiu nh nn vo khu vc no . VD: background: url(topbg.jpg) top left no-repeat, url(middlebg.jpg)center left norepeat, url(bottombg.jpg) bottom left norepeat; 6. Opacity (Lm m) opacity

V y l kt qu m bn nhn c vi danh sch ca mnh:

VOL.1Thng 1/2013

15

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

2013:
bin hn l s dng PC.

Nm ca Responsive Web Design

Vic truy cp cc website bng cc thit b di ng ph bin t lu nay, nhng phi cho n gn y, vi s ra i hng lot ca cc loi in thoi thng minh v my tnh bng th n mi tr thnh mt xu hng thc s. Theo mt d on ca Gartner th n nm 2013 vic s dng cc thit b di ng duyt web s tr nn ph trn?

~ Nguyn Khc Nht ~

Thng 5 nm 2010 Ethan Marcotte ng mt bi vit vi tiu Responsive Web Design cp n mt hng tip cn mi cho vic thit k giao din web, theo th chng ta khng nht thit phi to ra v s cc phin bn khc nhau cho website ca mnh, m thay vo chng ta ch nn tp trung vo mt thit k duy nht, v thit k ny phi c kh nng t ng iu chnh, t ng thch nghi vi vi cc kch thc mn hnh khc nhau. Nhng Responsive Web Design khng ch dng li vic to ra cc website c kh nng thch nghi vi nhiu li kch thc mn hnh, m n cn l mt cch suy ngh mi v vic thit k. Trong lot bi ny, chng ta s cng nhau im qua nhng tnh nng ch cht ca Responsive Web Design, v chng ta cng s c cc v d demo nh ta c th d dng hn trong vic lm quen v tin ti p dng Responsive Web Design vo trong cc sn

Vi xu hng , hu ht cc cc cng ty hin nay u tnh n vic chuyn i website ca mnh c th h tr tt vic duyt web trn nhiu thit b khc nhau. Mt gii php c a ra l to ra nhiu phin bn khc nhau ca website cho cc thit b khc nhau: iPhone, iPad, netbook, Kindle, BlackBerry v tt nhin l cho c pc. Th nhng, vi s phong ph v chng loi ca cc thit b di ng, cng nh a dng v kch thc mn hnh nh hin nay th chng ta s phi to ra bao nhiu phin bn cho ? l cha k nhng trng hp cc thit b thng minh nh iPad hin nay c kh nng quay ngang quay dc mn hnh; ngoi ra, theo mt thng k khc, c mt s lng ln ngi dng thng khng ca s trnh duyt ca mnh dng cc i; lm th no cc website c th hin th tt trong tt c nhng trng hp

phm thc t. tm hiu xem s quan tm ca ngi dng i vi Responsive Web Design l nh th no, ti th dng cng c Google Insights for Search v nhp vo t kha Responsive Web Design th nhn c kt qu nh sau:

VOL.1Thng 1/2013

16

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com Biu trn phn nh s lng tm kim c thc hin ca t kha Responsive Web Design, ta c th d dng nhn thy rng k t na cui nm 2010 mi bt u xut hin s quan tm n khi nim ny, v n na cui nm 2011 cho n nay th n to nn mt xu hng thc s trn ton th gii (Ch rng con s t 0-100 c chia theo t l ch khng phi l gi tr thc ca s lt tm kim). V chng ta cng c c kt qu thng k theo tng vng, theo th s quan tm ln nht n t cc quc gia Bc M, Bc u, n v c, iu cng khng c g l ngc nhin, bi v y chnh l cc quc gia c nn CNTT pht trin ng vo top u ca th gii.

Cc khi nim c bn trong Responsive Web Design

C 3 c im k thut ct li to nn Responsive Web Design: Media queries v media query listeners Mt b cc dng li linh hot i i vi vic s dng cc cch o kch thc bng cc n v o tng i. S dng cc nh vi kch thc linh hot bng cch thay i kch thc ng hoc l thng qua CSS t c hiu qu cao nht th nn s dng kt hp c 3 k thut trn vi nhau. im mu cht trong Responsive Web Design l s thch nghi tt nht vi kh nng ca tng thit b v nhu cu ca tng ngi dng. C th bn s i trt t hin th ca cc i vi tng nhm ngi cn phi thay khi thng tin

Media Queries bn c th p dng cc style ca mnh cho tng trng hp khc nhau, hay ni cch khc, bn c th dng mnh if trong CSS.

Media Queries Listeners

S dng Media Queries Listeners bn c th a ra cc phn hi khi c mt s thay i no ca Media Queries. V d, bn c th ti v mt tm nh vi kch thc nht nh khi c s thay kin i rng

ca khung cha n.

Li linh hot (Flexible Grids)

Li linh hot c ngha l chng ta s s dng CSS nh v cc thnh phn, to ra mt s dng b cc theo mt cch mi. c c Responsive Web Design chng ta s phi quyn i mt n v o m ta rt yu thch l pixel, thay vo s l % hoc l em. B cc dng li cho php chng ta trnh by cc thnh phn da trn mt b cc bao gm cc hng v ct.

dng khc nhau, song song vi vic thay i kch thc ch, kch thc ca tng vng tng tc, tt c nhm mang li tri nghim tt nht cho ngi dng. Tt c nhng yu t cng nh hng n vic trang web ca bn c c nh gi l Responsive hay khng.

nh linh hot
Tnh nng ny cho php chng ta hin th cc nh vi kch thc ph hp trong tng trng hp, bng cch co gin nh hoc l s thuc tnh overflow ca CSS.

Media Queries
Mc d Media Queries c s dng k t phin bn CSS 2.1, tuy nhin phi i n CSS3 th Media Queries mi c trang b mt sc mnh v cng ln lao. Vi

VOL.1Thng 1/2013

17

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Cu trc d liu: Cht v thiu hiu bit.

~ Dng Trng Tn ~

u bn hc mn cu trc d liu v gii thut, hoc c ht (nghim chnh) mt cun sch v ch ny, th bn c th b qua vt bi ti sp ng ln Tp ch Lp trnh c tn Tm hiu Cu trc d liu ny. Mc ch chnh ca vt bi ny l cung cp cc hiu bit ch c g mi v cc cu trc d liu c bn (bao gm cc danh sch, hng i, ngn xp, cy, bng bm v th) bng cch vit gin lc v nhng v d minh ha. hiu c cc bi vit trong vt bi ny, bn cn c kin thc c bn v ngn ng lp trnh (Java, C, C#) trc. Ti s dng Java lm ngn ng minh ha, nhng cc vn c cp th c gng tru tng ha nht c th, v CTDL l mt vn nn tng, khng ph thuc ngn ng mt vn m mi lp trnh vin u phi quan tm khng k l ch ta ang s dng ngn ng no. V ti s c gng dng ngn ng bnh dn, thay v ngn ng hc thut nh cc sch v CTDL hay dng. *** Chng ta cng bt u vi mt cu chuyn thng gp trong cc tnh hung lp trnh. Gi s bn nhn c mt class c vit bi ngi khc (t mt API no , hoc t mt thnh vin khc trong team) vi mt hm quan trng getData() c nguyn mu nh sau: public List<Integer> getData(); Hm ny tr v tt c cc d liu quan trng cho cc chc nng m bn s code ngay sau . D liu tr v l mt danh sch (List), v bn bt u vit on code u tin duyt (traverse) ton b d liu trong nh sau:
//duyet danh sach for (int i = 0; i < aList.size(); i++) { System.out.println(aList.get(i)); }

chc nghn cho ti mt vi triu bn ghi nm trong mt collection l chuyn thng ngy huyn), nh trong hnh ghi li t Profiler (nu bn cha dng Profiler, hy xem qua bi Dng Profiler o hiu nng ng dng Java) nh sau:

Hm useFor() vi on code trn cn ti 5369031 ms (gn 90 pht) hon tt vic duyt qua tp hp d liu. Th tng tng nu bn code mt ng dng web e commerce, khch hng s b bn v khng th kin nhn n th. Nhn vo hnh trn, bn thy hm useForEach() c th thc hin cng vic tng t m ch cn ti 415972 ms ( cha ti 7 pht), y l li ca hm useForEach():
//duyet qua danh sach for (Integer i : aList) { System.out.println(i); }

S khc nhau gia hai on code ch mt im mu cht: la chn for hay for-each duyt aList(). n y bn c th t cu hi: vy ci hm useFor() chy nh ra kia sai ch no? Cu tr li rt n gin: vic duyt theo kiu random access (ngu nhin) nh trong useFor() (gi hm get(i) duyt phn t th i) l sai nguyn tc. V LinkedList c t chc c bit, nn ch c th c truy xut tun t ch khng phi l truy xut ngu nhin thng qua ch s nh l mt danh sch dng mng. truy xut phn t th i ca mt danh sch lin kt, bn s phi bt u t phn t u tin (head), tun t i qua cc phn t k tip (th hai, th ba, v.v.) cho ti khi n phn t th i. Do , mi ln ving thm phn t i, bn tiu tn ng i ln bc, do vy bn i rt chm, c bit l khi i ln.

n gin, ng khng? C bao gi bn t cu hi on code trn c vn g khng? Nu cha, th bn va c t cu hi ri y. C vn g khng? on code v bn cht l khng vn g nu n khng ri vo trng hp oi om nh sau: ci Collection m ngi vit hm getData() dng t chc d liu l LinkedList. Khi , vic dng khng ng cch nh trn c th dn n hu qu rt ti t: bn phi ngi ch hng ting ng h ch chng trnh kt thc, trong khi nu bit cch dng cho ng, bn ch mt vi pht duyt ht mt danh sch mt triu phn t (thng thi khi bn code, bn ch chy th vi vi chc phn t nn c th khng pht hin ra, nhng mt chng trnh chy th vi

Vi vic dng for-each, danh sch s c dng theo cch ti u vi danh sch lin kt. hiu r c ch duyt theo for-each, chng ta th nhn mt on code minh ha khc nh sau y: VOL.1Thng 1/2013

18

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com
for (Iterator<Integer> it = aList.iterator(); it.hasNext();) { System.out.println(it.next()); }

chnh l l do ti sao hm useFor() li mt th gi n vy, trong khi hm useForEach() v explicitIterator() th li rt tit kim th gi. Bn thy y, ch khc c mi ci lnh lp m chuyn xem ra phc tp. Sai mt li i mt dm. Trong lp trnh, i khi tc ca chng trnh ch do mt dng code quyt nh. V vt bi Tm hiu Cu trc d liu s c gng cung cp cc hiu bit c bn bn khng phi mt dm no, vi cc tnh hung lin quan n cu trc d liu. Nhng y l cu chuyn di k, hy tm dng y . bi ti (s rt sm thi) chng ta s tr chuyn v cc cu trc tun t: danh sch.

Trong Java, mi mt tp hp (collection) u c t chc vi mt iterator (mt i tng ph tr cho vic duyt qua cc phn t bn trong tp hp). Khi duyt qua aList, iterator ca mt LinkedList nh du phn t ang duyt (current), nh ang t con tr (cursor) vy; o , khi gi hm it.next(), th iterator khng phi mt cng d t u (head) cho ti phn t th i, m ch cn ln theo lin kt n vi phn t tip theo, tnh t v tr ang ng (current), mt thm ng mt ln di chuyn.

ARRAY TRONG JAVASCRIPT

C l cc bn quen thuc vi Javascript qua lot bi Javascript v lp trnh hng i tng. Bi vit ny tc gi Nguyn Hin s gii thiu mt i tng quan trng trong Javascript: Array. Array c mt trong hu ht cc ngn ng lp trnh, l mt cu trc d liu cho php lu tr v truy xut cc phn t ngu nhin da trn v tr. Trong Javascript, Array c g khc?

V...
Ngoi vic lu tr nhng phn t c kiu khc nhau, i tng Array cn cho php dng nhiu kiu d liu khc nhau lm key:
var arr = new Array("Bob", "Jobs", "Bill"); arr[1] = 1; arr['hello'] = "World"; for (i in arr) { document.write(i + ': ' + arr[i]); }

Mt lp
V do , chng ta c th to mt i tng Array lu tr cc phn t. C 2 cch thng dng khi to 1 i tng Array:
var arr = new Array("Bob", "Jobs", "Bill");

hoc:
var arr = ["Bob", "Jobs", "Bill"];

n y chc bn cng nhn ra, i tng Array khng ging nh mng thng thng, ch cho php truy xut qua ch s l s nguyn, m cn cho php truy xut qua ch s l mt i tng bt k. Thc ra, Javascript lu tr cc i tng di dng key-value-based, tc l mi i tng key (kho) s tng ng (nh x) vi mt i tng value (gi tr) theo cp. Cu trc d liu no lu tr di dng key-value-based? C l l Map.

s khi to 1 i tng mng arr cha cc phn t Bob, Jobs v Bill.

Ngoi ra..
Hy cc phng thc c sn ca i tng Array, c l bn s n tng vi 2 phng thc hay c s dng nht: pop() v push(). Cu trc d liu no s hu nhng phng thc ny? Stack v Queue. Vy i tung Array mang hnh nh ca Stack hay Queue? Cch kim chng n gin nht l da trn c ch ca 2 kiu cu trc d liu ny: Stack hot ng theo phng thc LIFO (Last In First Out Vo sau ra trc), Queue th ngc li LILO (Last In Last Out Vo sau ra sau) (C ngi thch gi c ch hot ng ca Stack l: FILO v Queue l: FIFO). Hy a mt phn t vo mt Array c d liu qua phng thc push(), tip , ly phn t trong Array qua phng thc pop(). Nu hai phn t ny ging nhau, chc chn Array hot ng theo phng thc LIFO tc l Stack, ngc li Array hot ng theo phng thc LILO hay Queue:
var arr = new Array("Bob", "Jobs", "Bill"); arr.push('new item'); item = arr.pop(); alert(item);

No-type
Nh bn bit, trong Javascript, ni chung cc bin khng cn ch nh r kiu. Do , chng ta c th cha nhng phn t c kiu khc nhau trong cng 1 mng nh:
var arr = new Array("Bobs","has","$",1000);

iu ny rt khc so vi nhng ngn ng nh C++, Java khi khai bo mng vi int arr[10]; s gii hn mng arr ch cha cc s kiu int.

Mutable
iu g xy ra nu chng ta thc hin on m sau?
var arr = new Array(3); for (i = 0; i < 10; i++) { arr[i] = i; }

S chng c li OutOfRange no nh chng ta mong i. n gin v Javascript t iu chnh kch thc ca mng cho ph hp, hay kh nng co gin, cn gi l mutable. C l Array mang hnh nh ca List?

Chc bn c cu tr li. ~ Nguyn Vn Hin ~ VOL.1Thng 1/2013

19

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

TO GI HNG
TRONG
ng Kim Thi

ASP.NET

Cu chuyn v gi hng trong website thng mi in t, n cng ging nh chic xe y ch hng trong siu th. Tc l, bn phi lm sao cho ngi dng la chn c sn phm, a vo gi hng, thay i s lng sn phm, xa sn phm trong gi hng. V bn nh rng gi hng ch l ni lu tr tm thi cc sn phm m bn cn mua trc khi thanh ton.

gy nay, vic mua hng qua website tr nn quen thuc vi nhiu

hiu v gi hng th chng ta hy tng tng chng ta ang i siu th nh. Vic u tin khi bn vo siu th l bn lm g? Ti chc rng bn s cn ti mt chic xe y ch hng, hay mt ci gi ng hng, ti xin tm gi hai th l gi hng. Cng vic tip theo l la chn sn phm mua, bn c th nht sn phm nh mua, a vo gi hng, mua bao nhiu sn phm th bn nht by nhiu. Sau khi nht mt hi, bn c th thay i nh, b bt mt s sn phm, hoc gim

hoc tng s lng sn phm mnh mua trong gi hng. Nhng sn phm trong gi hng l nhng sn phm bn chn mua, v n ch c tnh cht lu tr tm thi trc khi thanh ton. Tc l, khi bn thanh ton xong gi hng li tr v trng thi rng. Cu chuyn v gi hng trong website thng mi in t, n cng ging nh chic xe y ch hng trong siu th. Tc l, bn phi lm sao cho ngi dng la chn c sn phm, a vo gi hng, thay i s lng sn phm, xa sn phm trong gi hng. V bn nh rng gi hng ch l ni lu tr tm thi cc sn phm m bn cn mua trc khi thanh ton. Ti thy c kh nhiu bn sinh vin au u vi bi ton kinh in ny. gip cc bn bt au u, ti s hng dn cc bn nhng thao tc c bn xy dng c gi hng trong ASP.NET.

ngi v n mang li mt th trng m cho cc nh kinh doanh. khch hng c th mua hng qua website ca mnh, th h cn phi xy dng mt website thng mi in t. Vi vai tr l mt lp trnh vin, bn thng xuyn gp phi bi ton gi hng trong nhng d n y. y l mt trong nhng nghip v quan trng bc nht vi nhng website thng mi in t.

VOL.1Thng 1/2013

20

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com to ra c gi hng, chng ta cn c 3 class c bn l ShoppingCart, CartItem, Product c m t nh class diagram di y. CartItem lm vic ny. Chng ta cng s to ra mt class Product n gin, n s cha thng tin c bn v sn phm chng ta ang bn. Mt property (thuc tnh) l mt bin trong mt class m n km theo

4. Hin th gi hng
Tt c nhng g chng ta lm trn ch l chun b cho shopping cart! Gi chng ta hy nhn trang ViewCart.aspx. V c bn chng ta s s dng

1. To Class ShoppingCart
Chng ta cn mt ni lu tr tr cc mc (item) trong gi hng cng nh cung cp chc nng thao tc vi nhng phn t . Chng ta s to ra mt class lm c vic ny. Class ny s qun l vic lu tr session (phin lm vic). u tin, chng ta phi to ra th mc App_Code. lm c vic ny, vo menu Website, sau chn Add ASP.NET Folder, ri chn App_Code. y chnh l ni chng ta t ton b class do mnh vit ra. T bt k trang web no cng c th truy cp ti code trong App_Code (chng ta khng cn phi tham chiu ti n bng cch s dng nhng lnh kiu nh include hay bt c ci g). Sau , chng ta c th thm class vo th mc ny bng cch kch chut phi vo folder ri chn Add New Item. Mo nhanh: Regions (Khu vc) trong ASP.NET thc s l mt iu tuyt vi t chc v nhm code li vi nhau. iu tt p nht v chng l bn c th m v ng cc khu vc thu gn s lng m m bn ang tm kim hoc nhanh chng tm thy theo cch ca bn xung quanh mt tp tin.

setter, getter hoc c hai. Trong class Product chng ta khai bo cc thuc tnh ca sn phm thng qua cc property: Id, Price, Description. Ngoi ra, class Product cn khi to mt vi sn phm (3 sn phm) chng ta d dng kim tra phn gi hng.

3. Thm vo gi hng
Sau khi code rt nhiu, gi l lc chng ta lm ci g tht trc quan. Chng ta s to ra mt page n gin thm cc mc vo trong gi hng. Tt c, chng ta c mt vi mc cng vi link Add to Cart . No chng ta hy cng code trang Default.aspx.

GridView hin th thng tin trong gi hng. Ct Description trong GridView chng ta s s dng BoundFiled. Cn ct Quantity cha s lng sn phm s mua, ta cn s dng TemplateFiled, c th a TextBox v link Remove lun vo . hin th thng tin nh Price, Description . trn GridView chng ta cn dng ti <%# Eval (PropertyName) %>.

Kt qu
By gi, chng ta c mt shopping cart kh l p mt ! Bi ny mi ch dng li vic hng dn bn xy dng gi hng bng ASP.NET s dng C#, nhng t y bn hon ton c th th trin khai cch lm ny vi cc ngn ng khc. Chc bn thnh cng vi nhng website thng mi in t ca mnh ! Bi vit c tham kho thng tin ca net.tutspluts.com xem v download SourceCode hy ln blog Tp Ch Lp Trnh.

2. To CartItem v Product
Bn cnh vic to ra mt ni lu tr cc phn t, chng ta cng cn to ra ni lu tr thng tin v mi mc (item). Chng ta s to ra class

VOL.1Thng 1/2013

21

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Khng Mt

ng Lc Hc Tp

10 cch bn khng b mt hng trong lc hc.

Bt tay vo no: Dn mt t stick note (t giy dn, thng ghi ch ln ) ghi thi hn cht np bi ln lch, sau nh du ngy bn s bt u tin hnh lm bi cng trn t lch .

2. Ln danh sch nhng yu t thc y bn hc hnh: khch quan (nhn c li khen ca b m, qu thng, hc bng), ch quan (t c trnh cao cp trong lnh vc mnh ang hc, tho mn s ham m tm hiu ca bn thn).

1. Xc nh mt mc ch r rng v thc t m bn c th lm c, phi chc rng thc s l mc -ch-ca -bn ch khng phi l mc ch ca b m, ngi xung quanh hay ca s ng. C thi v suy ngh tch cc theo ui mc tiu m mnh ra trong vic hc, cng nh khi thc hin k hoch. VOL.1Thng 1/2013

22

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com 3. To mt p lc thi gian cho bn thn khi lm bi tp, nu khng c p lc v thi gian, bn s d lng qun nhim v chnh ca mnh v dn dn mt hng th khi bt tay vo lm. C mt cch cc tt: Dn t stick note (t giy dn, thng ghi ch ln ) ghi thi hn cht np bi ln lch, sau nh du ngy bn s bt u tin hnh lm bi cng trn t lch . 9. Hn ch nhng suy ngh hoc thi thiu tch cc nh: chn ch, ch i may mn mm ci, t ti khi hc. Nhn vo nhng thnh cng hoc kt qu m bn t

4. Nu bn thy bi tp qu nhiu v nng, hy chia nh ra lm nhiu phn. Mi ngy lm mt cht, nhng phi chc chn l mnh lm xong ch khng dn sang hm sau. 5. Bn mun hon thnh sm bi tp th chn phn d trc, kh sau, chn nhng phn no bn cm thy hng th hoc nhng mc nh trc. Vic hon thnh mt cch nhanh chng nhng phn nh th s khin bn t tin hn v kh nng ca mnh. 6. Nu cm thy kh khn hoc kh hiu im no trong bi tp, ng ngi hi gio vin hoc ngi hng dn. S ging gii ngn gn ca h s gip bi tp tr nn d hiu hn, do bn c th tip tc pht trin bi lm nu i ng hng, cng nh hn ch c nhng sai st trong qu trnh thc hin.

c, tuy nh thi, nhng n c th thay i thi ca bn y.

10. Mi khi hon thnh xong mt phn bi tp ra, bn hy t thng cho mnh nh. Mt que kem, thanh ko, mt gi nghe nhc hoc xem phim va khin u c bn thoi mi hn, va duy tr c s nhit tnh trong bn. ng ngh n nhng g cha hon thnh, hy hi lng vi nhng g mnh hon thnh bn nh!

7. Tm mi lin h gia nhng g bn ang hc/ang lm vi nhng g bn s thc hin trong tng lai. 8. C gng gii quyt nhng vn c nhn c th lm nh hng n s tp trung ca bn, nu khng, hy iu tit sao cho n khng can thip su vo vic hc.

Ngun: ione.net VOL.1Thng 1/2013

23

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Coding Dojo l g?

Coding Dojo l mt bui lm vic m nhm lp trnh vin s cng nhau gii quyt mt bi ton vi mc tiu nng cao k nng no trong khng kh vui v. y l mt hot ng thc hnh c ch . ParisDojo tp trung vo vic biu din lp trnh trc nhng ngi khc, h thng lm mt chng trnh hon chnh trong khong thi gian ngn t 1 n 1,5 gi v dng nhiu ngn ng, cng c v cc dng bi tp khc nhau. Mt bi tp c coi l thnh cng khi n c hon thnh trong thi gian nh v nhng ngi khc c th t lm li bi tp . Tin : Vic tip thu cc k nng lp trnh phi l mt

25-30 pht: Xem nhanh li nhng g ca bui trc, nhng g tt, th v, nhng g cn cha tt. 10 pht: Quyt nh ch ca bui gp ny. 40 pht hoc hn: Lp trnh! Cch thc lm vic ty theo l PreparedKata hoc RandoriKata. 5-10 pht: Ngh gia phin lm vic tho lun cch mi vic ang din ra. 40 pht: Lp trnh thm.

Cc hnh thc: PreparedKata: Mt thuyt trnh vin s ch cch gii quyt th thch dng TDD hoc BabySteps. Mi bc lm phi c ngha cho cc thnh vin. Mi ngi ch ngt khi khng hiu iu g ang din ra. RandoriKata: Th thch c gii quyt bng cch lp trnh theo cp (bao gm driver v navigator). Mi ngi c mt u c th gip . Mi cp c 1 khong thi gian ngn (5 n 7 pht) vit m ngun, dng TDD v BabySteps. Kt thc thi gian trn, ngi va lm driver s v ch ngi lm khn gi, ngi navigator tr thnh driver v 1 khn gi s ln lm hoa tiu. Ngun: http://codingdojo.org. Bin tp: Phm Anh i cng nhm sinh vin.

qu trnh lin tc. c im: Cng tc, to khng kh lm vic vui v, khng cnh tranh. Cc i tng vi mi trnh , k nng u c th tham gia. Thoi mi xut, th tng mi. C s vt cht: Phng hp phi c ch ngi. Cn phi c ti thiu mt my tnh xch tay hoc bn. C mt my chiu. Cu trc ca mt phin lm vic: Phin bn ParisDojo t chc theo cu trc sau: 2 pht: quyt nh thi gian cho bui gp mt tip theo.

VOL.1Thng 1/2013

24

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com "Gi em yu, Th Tnh ca Lp Trnh Vin Th Tnh cho Lp Trnh Vin

Anh nhn ra em khi ang lt trn sn ga v thy rng em l site duy nht anh truy cp. Em bit khng, t lu lm ri anh rt c n v ang phn tch, test k li li lm ca chnh mnh. C th em s l ngi g li v kim th thc s cho anh.

ng di yu dn IT
ng di m quen bn IT Chng n kh khan, lng mn g? Vit th tn gi th kinh d. Chng vit bng g? Ngn ng C. ng di m yu bn IT. Chng n ti nng, mi ti kz. Bn gi chng i i ng k{ B kha c ri ng k{ chi?. ng di m yu bn IT. Chng n 35 n l kz. Gp nhau anh tan nn n. Em m m ngun cho anh i. ng di m yu bn IT Chng n yu ng ci kiu g Gp th i cm u t b (usb) Lc v n bo Format i

Khng c em, i anh nh mt phn mm dang d, khng to c m thc thi, khng c ngi s dng ch thc v tr nn v dng, ch tn ti nguyn m thi. Em khng ch c giao din p, tin dng m cn c c t th phng v ActiveX tht l d thng trc bn ngi dng con trai l nh. N ci ti sng, tng mu giao din o qun em tht nh nhng cng lm anh thy mnh nn thay i c gam mu mnh m, mt sc mnh mi tng ng vi hng ngn con vi x l Dual Core hin nay gp li. Anh vit th ny bng m Unicode ting Vit ch l th l mt iu rng chng ta 2 chip Nam, chip N hy nn lin kt li vi nhau. Anh s mang li cho em trong thi i truyn thng tch hp ny mi th, mi thng tin v nng lc x l cn thit hai ta cng sng mt cuc i khng c li hay trc trc g ht. Em cng ng qu lo v firewall m b m em hay cng ng dng ln v anh crack v hack rt gii. Anh s cy m v ph bng c password hay nhng cn tr truy cp ca h h chp nhn m ci ca chng ta nh mt entry min ph ca cng ng. V anh s cng em t do nh bao blog nng hi ca bu tri o lung linh mi ngy v ri page views ca mnh s cc cao. (St) Ch Lp trnh vin mi hiu int array[2]=new int[]{1,2}; int n=array.length-1; for(int i=0;i<n;i++){ array[0]=i; array[1]=i+1; } }

Hai ly nc
Mt lp trnh vin trc khi i ng t ln t 2 ci ly: Mt ly c nc phng nu m mun ung nc. Mt ly khng c nc dng trong trng hp khng mun ung.

int getRandomNumber() { //chosen by fair dice roll //guaranteed to be random return 4;

VOL.1Thng 1/2013

25

Tp Ch Lp Trnh tapchilaptrinh.wordpress.com

Chc Mng Nm Mi

Thng tin Ban bin tp Ban bin tp Tp Ch Lp Trnh bao gm cc thnh vin: Nguyn Vit Khoa, Dng Trng Tn, Nguyn Ngc T, Phm Anh i, ng Kim Thi, Nguyn Khc Nht. Website: http://tapchilaptrinh.wordpress.com Facebook: http://www.facebook.com/tapchilaptrinh Email: lienhe.tapchilaptrinh@gmail.com
VOL.1Thng 1/2013