Tm hiu v Responsive Web Design, Fluid Grids, Fluid Image v CSS3 Queries p dng to TemplatechoJoomla3

T cc trnh duyt in thoi n netbook v my tnh bng (tablets), ngi s dng s gh thm site t mt s lng ln cc thit b v trnh duyt. Bn sn sng thit k trang web ca mnh? Lm th no thit k trang web hin th p hn v ph hp hn trn tt c cc trnh duyt ca cc thit b khc thay v ch hin th ph hp trn mn hnh desktop ca my tnh (hoc phi thit k nhiu chng loi web cho tng thit b) l cu hi cn phi tr li. Nhng cng ngh nh CSS v cc nguyn tc thit k (bao gm fluid grids, flexible image v media queris) s em li nhng cng ngh gip chngtalmnniu

1. ResponsiveWebDesignResponsive Web Design l thit k web ph hp vi cc kiu mn hnh khc nhau, trn cc thitbkhcnhauvkchcmnhnh,trngthimnhnh(LandscapehayPortraint).

Hin nay trn th trng cng ngh c rt nhiu cc thit b vi mi loi kch c khc nhau, vic to ra mt trang web ph hp vi tt c cc thit b trn l hon ton cn thit. Do Responsive Web Design c xut, khi nim ct li ca tnh nng ny c th hin trong3tnhnngcngngh(ltritimcaResponsiveWebDesign):

1. Mediaqueriesandmediaquerylisteners 2. Aflexiblegridbasedlayoutthatusesrelativesizing 3. Flexibleimagesandmedia,throughdynamicresizingorCSS

ResponsiveWebDesignyucuttc3tnhnngtrntonnmttrangwebphhp.

2. FluidGridsiu quan trng trc tin l phi bit Fluid Grids l g trc khi bt u i vo thit k. Tt nht hiu c, chng ta tham kho li gii ca Wikipedia v Fluid (Cht lu): A fluid is a substance that continually deforms (flows) under an applied shear stress Wikipedia tm dchl:Mtdngchtcthchusbindnglintcditcdngcamtngsutct.

Trong thit k web th: fluid s c thit k hoc b tr v cn ng sut ct s l cc kch thc ca mn hnh hoc kch thc ng dng ca ngi s dng. Bt k thit b hay kch thc mn hnh l g, cc thnh phn trong thit k s bin dng p ng vi mi trng ngisdng.

Chng ta c th hnh dung mt mng li Fluid nh sau, mt mn hnh c th chia lm 12 phnvmiphnl1nvvtasthitkvbtrtrangwebtheonvnhvy:

V trong mi phn da vo n v ta c th chia tip ra cc n v nh hn. V d nh hnhdiy(utinchiatranglm12nv)sau:

hng trn ta chia trang lm i thnh 2 ct mi ct 6 n v trang. Trong tng ct mi talichiatipthnh12nvrichialm4ctmict3nv.

hng di ta chia mn hnh l 3 ct mi ct 4 n v. Trong tng ct mi ta li chia tipthnh12nvrichialm3ct,mict4nv.

C nhiu cch chia trang thnh cc n v ct c th chia lm 2, 3,, 12, t c nhngktqunhthitkmongmun:

3. FluidImage(FlexibleImages)Fluid Image l mt quy tc thit k: khng cho hnh nh vt qu chiu rng ca container chanvhnhnhcththayitheokchthccacontainerchan.

VtinttlnhltnhnngmaxwidthcaCSShtriu:

img{

maxwidth:100%

}

Quy tc ny ln u tin c khm ph bi Richard Rutter. N s cho php hnh nh c th hin th ti bt c kch c no, min l n hp hn so vi container cha n. Nu nh xy ra vichnhnhlnhncontainerchanthmaxwidth:100%scnhnvongvtr.

Nhng trnh duyt hin i ngy nay pht trin ti mc cc hnh nh c th thu nh hoc phngtomtlhnhnhvncnnguynvnvscnt.

Chng ta c th t chiu rng c nh cho image bng tnh nng width: ?px nhng mt khi image c chiu rng ln hn container cha n th maxwidth s t ng iu chnh v chiu rngscchnhlichongbngvichiurngcacontainer.

Thc t th, chng ta c th p dng tnh nng ny cho tt c cc loi media khc (image, embed,object,video)vsdnggingnhsau:

img,embed,object,video{

maxwidth:100%

}

Lu : vi trnh duyt Internet Explorer 6 v cc phin bn IE trc khng h tr maxwidth,nhngktIE7trvsauhtrytnhnngmaxwidth.

4. CSS3QueriesCSS2 tr gip mt phn ca media type (Screen, Print,...). V d vi Print Type th mt ti liu c th s dng font sansserif hin th trn 1 mn hnh v s dng font serif in. Media queries trong CSS3 (CSS3 Queries) l m rng cc chc nng ca media type bi vic cho php s dng cc biu thc cho tng media type kim tra mt s iu kin v p dng nhng stylesheet khc nhau cho tng iu kin c th. V d, chng ta c th c 1 stylesheet cho kiu hin th rng v mt kiu stylesheet c bit khc cho thit b di ng. S mnh m ca n l cho php chng ta thit k ph hp vi cc thit b khc nhau m khng lmthayinidungcatiliu.

1. Media Type TrckhiisuvoMediaQuerychngtasxemcnhngloiMediaTypenothngquabngsau:

Ch : Tn loi media khng phn bit ch hoa ch thng (not case-sensitive)

Media Type M t

all S dng cho tt c cc thit b (all media type devices)

aural S dng cho cc thit b m thanh v li ni (speech and sound synthesizers)

braille S dng cho cc thit b phn hi ch ni (braille tactile feedback devices)

embossed S dng cho cc thit b in ch ni (paged braille printers)

handheld S dng cho cc thit b nh hoc cm tay (small or handheld devices)

print S dng cho in n (printers)

projection S dng cho cc d n thuyt trnh, ging nh l slide

screen S dng cho cc mn hnh my tnh (computer screens)

tty S dng cho cc thit b s dng li k t c nh (like teletypes and terminals)

tv S dng cho cc thit b tivi (television-type devices) 2. Media Query

Chng ta s tm hiu Media Query qua cc v d hiu r v cch lm vic ca media query:

Vd1:

Giithchvd:

Nukiumedialmnhnh(screen)thpdngstylesansserif.css Nukiumedialin(print)thspdngstyleserif.css

Vtrongsansserif.cssscnidunggingnhsau,tngtlcaserif.css:

@mediascreen{

*{fontfamily:sansserif}

}

Vd2:

V d ny biu th rng mt style sheet c tn l example.css s c p dng ti thit b c chakiulscreen(mnhnh)vchatnhnng(nphil1mnhnhmu).

Vd3:

@importurl(color.css)screenand(color)

V d ny c kiu khai bo theo cch khc @importrule, l mt biu thc so snh l true hoc false. Nu tt c ng (tc l mn hnh mu) th s s dng import v s dng file color.css.

Vd4:Haionkhaibosausctruyvnmediaginghtnhau

@mediaalland(minwidth:500px){}

@media(minwidth:500px){}

Gingvitruyvnmediasau

@media(orientation:portrait){}

@mediaalland(orientation:portrait){}

V d 5: Trong c php truy vn media, du phy ( , ) biu th mt logical OR, trong khi and biuthchologicalAND:

@mediascreenand(color),projectionand(color){}

Mt vi media querie c th kt hp to thnh mt danh sch truy vn media. Mt du phy ( , ) phn tch danh sch truy media. Nu mt hoc nhiu truy vn media s c phn tch bi du phy, nu 1 hoc nhiu truy vn l ng th danh sch tr v true, ngc li th false.

V d 6: Nu danh sch truy vn media l rng (empty) th n tr v gi tr true tc l lun lunthchintrong{}truyvnnhdiy:

@mediaall{}

@media{}

Vd7:SdngtkhanotbiuthchologicalNOT:

Vd8:Sdngtkhaonlypstylesheetcho1sitngxcnh:

V d 9: C php truy vn media c th c s dng vi HTML, XHTML, XML, @import v @mediarulecaCSS3

@importurl(ex.css)screenand(color),projectionand(color)

@mediascreenand(color),projectionand(color){}

Vd10:Xthaitruyvnmediasau:

@mediaall{body{background:lime}}

@mediaexample{body{background:red}}

Th ch c truy vn u tin l ng bi v truy vn th 2 c kiu media khng tn ti l example do cu trc truy vn media l @media media_type { } vi iu kin media_typecnhnghatrongCSS3.

3. Media features

Media feature bao gm 12 feature: Width Color Height Colorindex Deviceheight Monochrome Orientation Resolation Aspectratio Scan Deviceaspectratio Grid

Chng ta s i su vo tng loi media feature v cc v d c th

1. Width: Gitr:|Quynhkhngthm pdngvi:kiumediacthnhnthyvoc(visualandtactilemediatypes) Chpnhncctintmaxvmin

Tnh nng width m t chiu rng vng hin th trn thit b u ra. V nh chiu rng ca trnhduyt.

Vd3.1:Truyvnmediasaussdngstylesheetex.csskhiinvichiurnghn25cm:

V d 3.2: Truy vn media sau s s dng style sheet cho thit b c chiu rng ca ch xemnmtrongkhong400v700pixels

@mediascreenand(minwidth:400px)and(maxwidth:700px){}

V d 3.3: Truy vn media sau s s dng style sheet khi s dng mn hnh hoc thit b cmtaycchiurngcachxemlnhn20em(emlnvgitrcafontsize)

@mediahandheldand(minwidth:20em),screenand(minwidth:20em){}

2. Height: Gitr:|Quynhkhngthm pdngvi:kiumediacthnhnthyvoc Chpnhncctintmaxvmin

Tnh nng height m t chiu cao vng hin th trn thit b u ra, s dng height nh width.Vdnhchiucaocatrnhduyt.

3. Devicewidth: Gitr:|Quynhkhngthm. pdngvi:kiumedianhnthyvoc Chpnhncctintmaxvmin

Tnh nng: devicewidth m tat chiu rng ca b mt thit b u cui. V d nh chiu rngcamnhnh(yninchiurngvtlthctcathitb)s

Vd3.4:Vdnyspdngstylesheetchomnhnhcchiurnglng800pixel

@mediascreenand(devicewidth:800px){}

4. Deviceheight: Gitr:|Quynhkhngthm pdngvi:kiumedianhnthyvoc Chpnhncctintmaxvmin

Vd3.5:Vdnyspdngstylesheetkhimnhnhcchiucaongbng600px

5. Orientation: Gitr:portrait|landscape pdngvi:kiumediacnhbitmap Khngccctint

Tnh nng orientation s l portrait khi chiu cao cao hn hoc bng vi chiu ngang. V ngclisllandscape

Vd3.6:

@mediaalland(orientation:portrait){}

@mediaalland(orientation:landscape){}

6. Aspectratio: Gitr: pdngvi:kiumediacnhbitmap Chpnhncctintmaxvmin

Tnhnngaspectratiosgipphthintlcagitrchiurngvichiucaocamedia.

7. Deviceaspectratio: Gitr:

pdngvi:kiumediacnhbitmap Chpnhncctintmaxvmin

Tnhnngdeviceaspectratiosgipphthintlchiurngvichiucaocathitb

V d 3.7: Nu mt thit b mn hnh c s pixel ngang l 1280 v chiu dc l 720 (thng gilmnhnh16:9),4ontruyvnmediadiyungvithitb:

@mediascreenand(deviceaspectratio:16/9){}

@mediascreenand(deviceaspectratio:32/18){}

@mediascreenand(deviceaspectratio:1280/720){}

@mediascreenand(deviceaspectratio:2560/1440){}

8. Color: Gitr: pdngvi:kiumedianhnthyc Chpnhncctintmaxvmin

Tnh nng color pht hin s thnh phn bit mu ca thit b u ra. Nu thit b khng l mtthitbmuthgitrlzero(0)

Quynhkhngthm

Vd3.8:Haitruyvnmediasauspdngstylesheetchottcccthitbmu

@mediaalland(color){}

@mediaalland(mincolor:1){}

V d 3.9: Truy vn media sau s p dng style sheet cho cc thit b mu c bng hoc ln hn2thnhphnmusc:

@mediaalland(mincolor:2){}

Mt thnh phn mu c i din bi mt s lng bit v tnh nng color tr v s lng bitnhnhtcsdng.

Vd3.10:Chomtvd:

Nu mt h thng 8bit mu thnh phn: mu (R) vi 3 bit s dng, mu xanh dng (G) vi 3 bit s dng v xanh da tri (B) vi 2 bit s dng, th tnh nng color strvgitrl2.

Trong mt thit b m mu sc c lp ch mc (index) th s bit nh nht ca thnh phnmusctrongbngtcu(lookuptable)csdng.

9. Colorindex: Gitr: pdngvi:kiumedianhnthy Chpnhncctintmaxvmin

Tnh nng colorindex pht hin s ch mc mu trong bng my ca thit b u ra. Nu thitbkhngsdngmtbngmuthgitrtrvlzero(0).

V d 3.11: y l 2 cch m t style sheet p dng ti tt c cc thit b c ch mc mu (colorindex)

@mediaalland(colorindex){}

@mediaalland(mincolorindex:1){}

Vd3.12:Truyvnmediachothitbmuvinhiuhnhocbng256chmcmu

10. Monochrome: Gitr: pdngvi:kiumedianhnthy Chpnhncctintmaxvmin

Tnh nng monochrome pht hin s lng bit ca trong pixel ca thit b en trng. Nu thitbkhnglmtthitbentrngthgitrtrv0.

Vd3.13:Haicchbiuthstylesheetchottcccthitbentrng

@mediaalland(monochrome){}

@mediaalland(minmonochrome:1){}

Vd3.14:Truyvnmediachothitbentrngvinhiuhn2bittrn1pixel

@mediaalland(minmonochrome:2){}

Vd3.15:Truyvnmediachotranginmuv1stylesheetkhcchoinentrng

11. Resolution: Gitr: pdngvi:kiumediacnhbitmap Chpnhncctintmaxvmin

Tnh nng resolution pht hin phn gii ca thit b u ra, v nh mt pixel. Khi truy vn n thit b c pixel khng vung th truy vn minresolution v maxresolution phi csdngthayth.

Vd3.16:Truyvnmediachoccthitbcphngiilnhn300imtrn1inch

@mediaprintand(minresolution:300dpi){}

Vd3.17:Truyvnmediachoccthitbcphngiilnhn118imtrn1centimet

@mediaprintand(minresolution:118dpcm){}

12. Scan: Gitr:progessive|interlace pdngvi:kiumedialtivi Khngccctintmaxvmin

Tnhnngscanphthinqutrnhqutcathitburaltivi

Vd3.18:Truyvnmediachothitbtivicchqutlprogessive

@mediatvand(scan:progressive){}

13. Grid: Gitr:0|1(Ch0v1lgitrhpl) pdngvi:kiumedianhnthyvoc

Tnh nng media s dng truy vn n thit b u ra l grid hay bitmap. Nu thit b u ra c c s l grid (v d nh l tty mt thit b u cui hoc handheld mt in thoi chhinthchvimtfontcnh)thgitrtrvl1.Ngclithtrv0.

Vd3.19:

@mediahandheldand(grid)and(maxwidth:15em){}

@mediahandheldand(grid)and(devicemaxheight:7em){}

4. Kt lun: Media Queries em n cho chng ta cch thc thit k web theo chun tt hn v tin lihnchonhiuthitb,nhiuchngloikhcnhau.Nhvdsau(hnhdi)chotathy:

ViLargesize:thanhiuhngphatrnv1hnglnh ViMediumsize:thanhiuhngbntri,3ctlnh ViSmallsize:thanhiuhngphatrn,khngcnhlogov3cthinthnh

Kt lun: l vic lm rt tuyt vi i vi thit k web, trang web hin th p hn trn mi thit b. Nhng cng cn ch rng c s iu chnh stylesheet cho thit b di ng khng c ngha l site ca chng ta s c iu chnh trn thit b di ng. iu chnh ng ngha

chothitbdingthnhtrnsitecngcncctloadngkchcmongmun.

5. ToTemplatechoJoomla31. Joomla Template l g?

Joomla Template l mt gi bao gm cc file PHP, HTML, CSS, JS (Javascript),... v cc tm hnh, nh, biu tng, video, flash km theo to nn giao din (b cc v hnh hi) ca Website Joomla.

y l th mc template beez3 mt template mc nh ca joomla 3.0

y l mt th mc template ti gin

Thc cht Joomla Template dng to b cc v hnh hi trang do nhng thnh phn c bn bt buc phi c l nhng file to nn b cc ca template (index.php) cn nhng thnh phn khc ch l b tr cho file b cc. Mt thnh phn khng km quan trng l (templateDetails.xml)y l file xml nh ngha nhng thnh phn c trong template v nhng thng tin ci t.

Di y l list chc nng ca cc file v th mc beez3

toc 1 Joomla Template chng ta cn phi bit to mt Basic Template. T Basic Template ta s k tha cc tnh nng ca Joomla hon thin thnh mt Joomla Template

2. Cc bc to mt Joomla Template Bc1:Thitkbcctrang

y l bc to b cc trang trn giy, phc tho trn nn ha hnh dung ra hnhhitrangwebmunthhinnhthno?

binystotemplatetheophcthosau

Bc2:Toccthmc

TothmcchaTemplate,ttnbtk TothmcCSS:chaccfilecss TothmcJS:chaccfilejavascript Cthtothm1sthmckhc

Bc3:Thmccfilehtml,php,css,rng

Index.html (Thc cht l cc file rng nhm trnh vic view cc file trong th mc template)

Index.php(Filebcctrang,thnhphnquantrngnht) css/style.css templateDetails.xml (File nh ngha thnh phn ca Template v cu hnh cc thng s

citchoJoomlaTemplate)

Bc4:Thmnidungchoccfile Vdtofileindex.phptheobccthitk

LOGO BANNER MENU CONTEXT FOOTER

NidungfileStyle.css .container { width:90% margin:auto } .logo { width:10% float:left backgroundcolor:yellow } .banner { width:90% float:left backgroundcolor:green } .menu { backgroundcolor: orange } .context { backgroundcolor:#E1E2E4 } .footer

{ backgroundcolor:#E3E2E5 }

NidungfiletemplateDetails.xml

Mytemplateforjoomla3.0 4/4/2013 VuQuynh vquynh22@gmail.com http://www.facebook.com/vuvanquynh Copyright(C)2013 Changbiet 1.0 Template css index.html index.php templateDetails.xml debug position0 position1 position2 position3 position4 position5 position6 position7 position8 position9 position10 position11 position12 position13 position14 Giithchfilexml

Ccthname,creationDate,author,authorEmail,authorUrl,copyright,license,version,desciptionlnhngthmtchitittemplate

Cpthmtccthmc,cctptinnmtrongthmcgccatemplate

Cpththhinccvtrkhaibotrntemplatevnscjoomlasdngchoviccpphtccvngvtr

Bc5:ThmcclnhphpcaJoomlachoindex.php

Saukhithitktheoccbctrntathuc1templatechnhdngnhsau:

Bc6:ThmcclnhphpvoTemplate

Nu nguyn dng Template ci t th Joomla s khng nhn din c cc v tr v ccfilecssnhnghado:

Bcnylbcrtquantrng. V Joomla Template s hin th chun khi chng ta thm cc lnh php ng v ph hp

viccchuncaJoomlaara. Trctinchngtatmhiuvcclnhphpgnvojoomla 1. s t v tr mun hin th cc thng bo cho ngi

dng, thng thng chng ta s dng dng ny mt v tr bt k trong thn trang

2. s t v tr mun hin th cc component, thng thngnntdngny1lntrongthntrang

3. s t v tr mun hin th cc module, c th xut hin nhiu nitrongthntrang

4. s t trong th v thm cc dng php tng t nhsauutrangnhngccfilecss(chnitfilecsskhilinkbngJoomla)

Trong Joomla 3 c sn bootstrap trong /media/jui/css/bootstrap/ nn dng khai bo css trnlunngtrongJoomla3.

dng khai bo css th 2 s ng khi file style.css t trong th mc css ca template, gingnhtemplatechngtaanglm.

Cthpdngluncctnhnngcabootstrapreponsivevittemplate.

Sauqutrnhnysthucnidungnhsau:

LOGO

BANNER

MENU

CONTEXT

FOOTER

Bc7:NnzipthmcTemplate

Bc8:UploadJoomlaTemplate

Bc8:EditTemplate

Qu trnh ny c th thc hin bng cch browser thng vo th mc ci t template chnhsavbxung,nnsaolulithmccnchnhsatrckhithchin.

ThamKhohttp://webdesignerwall.com/tutorials/css3mediaqueries

http://www.w3.org/TR/css3mediaqueries/

http://www.w3schools.com/css/css_mediatypes.asp

http://alistapart.com/article/fluid-images

http://clagnut.com/sandbox/imagetest3/

http://www.responsivegridsystem.com/

http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/

http://vi.wikipedia.org/wiki/Ch%E1%BA%A5t_l%C6%B0u

http://en.wikipedia.org/wiki/Fluid

http://www.websitedep.com.vn/blog/thiet-ke-web/joomla-template-la-gi.html