NMB là m t công c đ c phát tri n nh m đ n các nhà phát tri n n i dung Internet trên di đ ng, h mong mu n xem tr c ph n n i dung c a h trông nh th nào tr c khi nó đ c th trên m t đi n tho i c m tay th t.
S d ng NMB, các nhà phát tri n n i dung có th hi n th b t k n i dung Iternet trên di đ ng nào đ c phát tri n dùng Nokia Mobile Internet Toolkit 4.0 (NMIT), c ng nh n i dung t p tin t i c c b và n i dung th ng trú trên các server Internet và truy c p vào thông qua n i k t WAP. Các n i k t WAP có th đ c hình thành thông qua WAP Gateway server ho c qua trình gi l p WAP Gateway c a Nokia (NWGS).
NMB s d ng ph n m m Nokia Mobile Browser, ph n m m này đ c Nokia phát tri n dùng cho vi c tri n khai trên các đi n tho i c m tay th t. Tuy nhiên, NMB không đ c thi t k t ng ng v i ch c n ng c a b t k m t thi t b c m tay riêng bi t nào mà nó ch m ra m t ph m vi m i cho các nhà phát tri n Internet trên di đ ng theo công ngh hi n nay.
Nokia Mobile Browser có th đ c s d ng trong m t môi tr ng đ c l p đ n p n i dung c c b hay trên Internet di đ ng. Nó có th qu n lý t t c các d ng n i dung có th đ c t o ra trong NMIT ngo i tr thông đi p đa truy n thông MMS.
PH L C D B WAP CSS
S đ i m i n t ng nh t c a XHTML MP so v i WAP 1.x và các ngôn ng đánh d u dùng trên di đ ng đó là vi c h tr CSS.
CSS là m t d ng báo cáo có t li u t t trong các quy n sách hay trên Internet. Trong tài li u này, s khác nhau gi a WAP CSS và CSS1 đ y đ đ c bàn đ n, bên c nh m t vài g i ý v cách s d ng m t cách hi u qu trên các thi t b di đ ng. WAP CSS là m t t p riêng c a CSS1.
Kh n ng c a CSS là cung c p đi u khi n chính xác và d dàng v m t n i dung có th trình bày trên b t k thi t b di đ ng nào. M i góc đ xu t hi n c a tài li u – v trí, font ch , các thu c tính v n b n, đ ng biên, canh l , dòng (lu ng) – có th đ c đnh ngh a b ng cách dùng các m u. N u c n thay đ i b t k m t giá tr nào thì ch c n th c hi n t i m t v trí duy nh t. Th c t , b ng vi c s d ng các m u chia s bên ngoài, vi c thay đ i b t k m t cách trình bày nào c a toàn b tài li u trên m t trang ch c n th c hi n m t l n.
i u khi n cung c p b i CSS giúp ch ng trình d dàng đ c đnh d ng l i n i dung cho các thi t b di đ ng khác. Trong CSS, s trình bày, ki u m u, và vi c đnh v đ c d dàng đ nh d ng l i đ i v i m i trình duy t. Trong hình X, cùng m t trang XHTML MP đ c hi n th trên hai trình duy t khác nhau, v i m i trình duy t s d ng riêng b m u c a mình. C t 1 là n i dung hi n th trên Nokia Mobile Browser 4.0, trong khi c t 2 l i là cùng m t n i dung nh ng đ c hi n th trên Internet Explorer 5.0.
Nokia Browser 4.0 Microsoft IE 5.0
Hình 8.2-1: Các ki u đnh d ng khác nhau trên các trình duy t khác nhau
Hình C-2 sau đây mô t vi c s d ng các thu c tính đnh d ng CSS đ thay đ i th hi n c a các bullet trong m t danh sách đ c bulleted. Các đnh ngh a thu c tính CSS đ c mô t bên d i m i trình bày. Các m u bullet đ c đnh ngh a trong b n m u c a CSS, không ph i trong tài li u XHTML MP. S d ng CSS, b n có th dùng các bullet trong các ki u m u khác nhau, t các s ki u Roman và Latin, đ n các hình vuông và hình tròn.
li {list-style-type:disc} a {text-decoration:underline} li {list-style-type:square; color:red} a {text-decoration:underline} Hình 8.2-2: Thay đ i ki u bullet s d ng m u 1. Các v n đ đ c ki m soát b i các d ng m u
S cách kho ng, thêm m i, và canh l . Canh hàng và dàn trang.
Font ch và các thu c tính v n b n. Các đ ng biên.
Màu trên các thi t b có kh n ng hi n th màu.
S chuy n đ i v n b n và n n trên các thi t b không có kh n ng hi n th màu.
M t n đ nh d ng nh p v n b n s d ng –wap-input-format.
2. Áp d ng các ki u đnh d ng
M i trình duy t s d ng m t b n m u m c đnh c a mình đ ch rõ cách các ph n t XHTML s đ c hi n th nh th nào. Vì th , ngay c khi b n không đ a ra m t ki u m u nào, hay ch là m t vài ki u, thì ph n còn l i c a tài li u c ng đ c
hi n th s d ng các ki u m u đ c đ a ra trong b ng m u m c đnh. Các d ng m u đ c đnh ngh a trong b n m u m c đnh có u tiên th p nh t trong th t thác n c, đi u này cho th y r ng n u b n đ nh ngh a m t d ng m u nào đó c a riêng b n thì nó s đ c th c hi n tr c các d ng m u m c đ nh.
a. Các b ng đ nh d ng bên ngoài
Bên trong ph n t head c a m t ph n tài li u b n có th s d ng m t hay nhi u ph n t link đ ch đ n m t hay nhi u URL, nh ng đa ch này xác đnh các b n m u bên ngoài đ c dùng đ đnh d ng cho tài li u hi n hành. Ví d nh , dòng l nh sau đây mô t cách s d ng b ng m u mydoc.css, nó đ c đ t trong cùng đ ng d n v i tài li u hi n hành.
<link rel="stylesheet" href="mydoc.css" type="text/css"/>
b. Ph n t style trong đ u đ tài li u
Ph n t <style> có th s d ng bên trong ph n t <head> c a tài li u nh m đ xác đnh m t d ng m u áp d ng cho toàn b tài li u. Trong ví d ti p sau đây ph n t style cho bi t là màu xanh đ c dùng làm màu ch cho t t c các đo n v n b n (đ c đánh d u b i các ph n t <p>).
<style> p {color: blue} </style>
c. Ph n t style trong thân tài li u
Ph n t <style> có th đ c dùng b t c đâu trong gi i h n c a hai ph n t <body> và </body> c a m t tài li u. Các đnh ngh a m u theo cách này s đ c th c hi n mà không quan tâm đ n các đnh ngh a đ c đ a ra tr c đó (bên trong m t b ng m u ngoài hay do m t ph n t <style> đ c ch ra trong <head> c a tài li u) trong cùng ph n t . ó là do m t d ng m u tr c ti p đ c th c hi n sau cùng trong th t thác n c.
d. Lu t thác n c cho các ph n t m u
V trí bên trong tài li u mà các ph n t ki u m u đ c ch ra (ho c là ph n t <style> ho c là <link> c n đ c chú ý: Các ph n t ki u m u đ c đ a ra tr c (adsbygoogle = window.adsbygoogle || []).push({});
tiên s b đè lên b i chính các ph n t m u đ c đnh ngh a sau đó trong th t c a tài li u. B t c m t thi t l p thu c tính m u nào áp d ng cho m t ph n t XHTML riêng bi t s có quy n cao h n t t c các thi t l p tr c cho thu c tính đó trên ph n t đó.
Ví d gi s r ng m t tài li u XHTML MP ch a m t n i k t đ n m t b ng m u ngoài nh sau:
<link rel="stylesheet" href="your-style-sheet-url.css" type="text/css"/>
và gi đnh r ng b ng m u đ c tham chi u đ n ch a đnh ngh a sau:
p {font-family: arial; color: black}
Bây gi , n u nh m t ph n t <style> nh sau đ c đ a ra trong tài li u trên m t dòng ti p sau dòng có ch c ph n t <link>:
<style> p {color: blue} </style>
khi đó các ph n t <p> trong tài li u s s d ng font ch Arial, nh ng màu ch s là màu xanh.
Tuy nhiên, n u nh th t b đ o l i:
<style> p {color: blue} </style>
<link rel="stylesheet" href=" style-sheet-url.css" type="text/css"/>
Khi đó màu c a ch s là màu đen.
e. S d ng các thu c tính c a XHTML
style
Thu c tính style cho phép đ t ki u m u cho m t ph n t đ n l t i m t đi m trong tài li u t i n i ph n t đ c đ a ra. Tham chi u đ n nh là m t ki u m u bên trong (“inline style”), đ c tr ng này là m t ph n m r ng trong XHTML MP. Nó cho phép áp d ng các ki u m u cho các ph n t riêng l , do đó đ c u tiên h n b t
k ki u m u nào khác đ c đnh ngh a trong các ph n t <style> tr c đó hay các b ng m u ngoài:
<p style="color:red”>red</p>
M t h n ch c a vi c ch ra các ki u m u bên trong là nó làm cho vi c tìm ki m và thay đ i t t c s c c a m u khó kh n. M t h n ch khác là vi c s d ng chúng có th làm t ng kích th c c a tài li u n u nh đ c s d ng nhi u l n đ thay đ i các ki u m u c a cùng m t ph n t t i nh ng n i khác nhau bên trong tài li u.
S t t h n n u đnh ngh a m t l p ch a các ki u m u mà ta mu n áp d ng cho nhi u ph n t , ch ng h n nh sau:
.class1 {padding-bottom:4px}
Lúc này ta có th áp d ng ki u m u đnh d ng m t cách d dàng ch c n đnh ngh a đnh d ng t i m t v trí (trong b ng m u). Ví d , đ áp d ng ki u m u này cho m t phân đo n riêng bi t nào đó, b n có th s d ng thu c tính class bên trong ph n t đo n và ch ra giá tr c a thu c tính này ch ng h n là “class1” nh đ c mô t bên d i:
<p class="class1">This paragraph will have bottom padding. </p>
id
XHTML cùng v i WAP CSS có th cho phép b n gi các đnh ngh a m u c a mình t i cùng m t đi m (trong m t b ng m u hay trong m t đo n m u bên trong ph n t <head>), ngay c khi b n mu n áp d ng m t m u cho m t ph n t đ n nh ng không nh h ng đ n các ph n t khác cùng m t l ai.
Ví d nh b n có th đnh ngh a m t m u cho m t ph n t <h1> riêng l trong m t đo n m u bên trong ph n t <head> nh sau:
<head> <style>
#myid {border-width: 1; border: solid; text-align: center}
<style> </head>
và sau đó áp d ng m u này cho m t ph n t <h1> riêng nh sau:
<h1 id=”myid”> This heading has a solid order.</h1> (adsbygoogle = window.adsbygoogle || []).push({});
div và span
Ngoài vi c áp d ng các ki u m u cho m t n i dung đ c đ a ra b ng m t hay nhi u ph n t nh đã đ c bàn đ n trên, b n c ng có th s d ng các m u, đ c đnh ngh a trong b ng m u hay bên trong ph n t <head>, cho m t chu i các ph n t s d ng ph n t div hay m t chu i các các ký t bên trong s d ng ph n t span. Ví d m t b ng m u ch c các giá tr sau:
<style type=”text/css”>
div.test-case {text-align: center; color: blue} span.test-id {color: red}
</style>
Bên trong ph n thân tài li u, b n có th áp d ng ki u m u đ c đ a ra b i ph n t div cho m t chu i các đo n v n và ki u m u đ c đ a ra b i ph n t span cho m t chu i các ký t nh sau:
<div class=”test-case”>
<p>This paragraph is blue.</p>
<p>Here are <span class=”test-id”>Test51 and Test52</span> specs.</p>
Trong đo n code trên, ph n n i dung c a c hai đo n v n đ c canh gi a và s d ng font ch màu xanh, ngo i tr chu i ký t “Test51 and Test52”, đ c s d ng font màu đ .
3. Nh ng đi u c n tránh
Tránh n đ ng bao n i dung XHTML. Hay nói cách khác, không s d ng giá tr nowrap c a white-space property. L p bao đ c nh n m nh s d ng b i vì nó cho phép nhi u n i dung đ c nhìn th y ngay mà không c n ph i dùng đ n thanh cu n. L p bao đ c kích ho t t đ ng trong Nokia Mobile Browser v3.0.
Tránh vi c xóa các đ ng g ch d i t các ph n t <a>. Hay nói cách khác, không s d ng m u text–decoration:none trong các liên k t. Ng i s d ng s không th phân bi t đ c li u m t liên k t không đ c g ch d i có ph i là m t liên k t không hay đ n gi n ch là m t đo n v n b n bình th ng. H n n a, m t n i k t đ c g ch d i đã khá quen thu c v i ng i dùng và vi c b đi ph n g ch d i s làm cho ti n đnh v c a d ch v tr nên m h và ch m l i mà thôi.
Và ng c l i, tránh s d ng text-decoration:underline property
trong d ng v n b n bình th ng. Vi c g ch d i ph n v n b n s làm cho nhi u ng i s d ng hi u nh m vì nó trông gi ng nh m t là liên k t. Thay vào đó, có th làm n i b t v n b n b ng cách khác, ví d nh làm cho nó đ m lên ch ng h n. Nói chung là các d ng v n b n gây phi n ph c c n đ c tránh nh m giúp tài li u d đ c và t p trung h n vào n i dung c a tài li u.
Tránh làm n i b t v n b n quá nhi u thông qua vi c s d ng font-style và font-variant, đ c bi t là trên cùng m t trang XHTML. Quá nhi u và quá khác nhau s làm cho n i dung tài li u m t đi s t p trung. C g ng áp d ng ph n nh n m nh trên ch m t vài t trong m i trang XHTML.
Tránh s d ng quá nhi u lo i font ch (font-family) và kích th c (font- weight, font-size) khác nhau trong cùng m t trang XHTML. C g ng gi i h n vi c s d ng các kích th c và các lo i font ch trong m i trang XHTML là t m t đ n hai mà thôi. ng th i c ng tránh đnh ngh a t mà ch s d ng các ký t in hoa vì
nó th ng đ c hi u nh là nh ng ti ng reo hò, và chúng l i khó đ c h n là các ký t th ng.
Không nên xóa các đ ng biên trên các b ng đ c dùng đ mô t thông tin theo cách ghi thành b ng.
nh ng n i có th , đnh ngh a các ki u m u s d ng các lu t thác n c thay cho vi c dùng các thu c tính class hay id bên trong các ph n t . Ví d nh trong b ng m u WAP CSS c a b n s d ng các thu c tính nh :
p (color:red}
h n là dùng thu c tính class nh sau:
.red {color:red}
Nh ng lo i tr khi c n ph i đ a ra chu i class=“red” bên trong m i ph n t <p> trong m t tài li u.
PH L C E
1. Tr c khi thi t k m t wapsite
Khi thi t k m t d ch v nh m vào c thi t b di đ ng và máy tính đ bàn thì ph i b t đ u b ng b ng thi t k cho giao di n ng i dùng trên thi t b di đ ng. Vi c m r ng m t d ch v h ng di đ ng cho môi tr ng máy tính đ bàn th ng s d dàng h n là làm theo cách ng c l i.
Khi b t đ u b ng m t Website dành cho máy tính đ bàn, ng i ta khuy n cáo r ng nên chia d ch v thành nh ng ph n nh . Ta ch ch n nh ng ph n là trung tâm c a h th ng d ch v đ dành cho phiên b n trên môi tr ng di đ ng. C n ph i chú tr ng vào các ph n trung tâm này khi thi t k d ch v trên di đ ng.