bài 2 tìm hiểu ngôn ngữ đánh dấu trong việc phát triển web mobile

BÀI 2
TÌM HIỂU NGÔN NGỮ ĐÁNH DẤU TRONG VIỆC
PHÁT TRIỂN WEB MOBILE
NHẮC LẠI BÀI TRƯỚC
Những kiến thức cơ bản về thiết kế web cho thiết bị
di động:
Giới thiệu về thiết kế web dành cho thiết bị di động
Sự khác biệt giữa web dành cho thiết bị di động và web
chạy trên máy tính thông thường
Ngôn ngữ đánh dấu dành cho thiết bị di động
Style sheet cho web di động
Ngôn ngữ scirpt cho web mobile
Thiết lập môi trường phát triển web cho thiết bị di
động:
IDE để phát triển
Cấu hình máy chủ web theo kiểu MIME
Các công cụ phát triển khác
Những kiến thức cơ bản về thiết kế web cho thiết bị
di động:
Giới thiệu về thiết kế web dành cho thiết bị di động
Sự khác biệt giữa web dành cho thiết bị di động và web
chạy trên máy tính thông thường
Ngôn ngữ đánh dấu dành cho thiết bị di động
Style sheet cho web di động
Ngôn ngữ scirpt cho web mobile
Thiết lập môi trường phát triển web cho thiết bị di
động:
IDE để phát triển
Cấu hình máy chủ web theo kiểu MIME
Các công cụ phát triển khác
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 2

MỤC TIÊU BÀI HỌC
Làm quen với ngôn ngữ đánh dấu cho web di động:
XHTML, XHTML-MP
WML
CSS cho web di động
Nhận diện thiết bị và tính tương thích với các thiết bị
di động
Nâng cao khả năng tương tác của web di động với
Javascript và AJAX
Làm quen với ngôn ngữ đánh dấu cho web di động:
XHTML, XHTML-MP
WML
CSS cho web di động
Nhận diện thiết bị và tính tương thích với các thiết bị
di động
Nâng cao khả năng tương tác của web di động với
Javascript và AJAX
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 3
NGÔN NGỮ ĐÁNH DẤU CHO WEB DI ĐỘNG
XHTML
XHTML:
Sử dụng cho điện thoại thông minh
Sự phát triển của web trên thiết bị di động nhằm tạo ra những
trải nghiệm hữu dụng trên màn hình nhỏ bằng bộ thẻ nhớ
XHTML phong phú
Sử dụng bộ thẻ của HTML kết hợp với yêu cầu cú pháp nghiêm
ngặt của XML
Website trên di động được tối ưu hóa cho iPhone hoặc WebKit
có thể sử dụng XHTML và phần mở rộng CSS trong WebKit để
tạo ra trải nghiệm cho người dùng điện thoại có màn hình cảm

ứng
XHTML:
Sử dụng cho điện thoại thông minh
Sự phát triển của web trên thiết bị di động nhằm tạo ra những
trải nghiệm hữu dụng trên màn hình nhỏ bằng bộ thẻ nhớ
XHTML phong phú
Sử dụng bộ thẻ của HTML kết hợp với yêu cầu cú pháp nghiêm
ngặt của XML
Website trên di động được tối ưu hóa cho iPhone hoặc WebKit
có thể sử dụng XHTML và phần mở rộng CSS trong WebKit để
tạo ra trải nghiệm cho người dùng điện thoại có màn hình cảm
ứng
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 5
XHTML
Một số đặc điểm khi sử dụng ngôn ngữ đánh dấu cho
web di động:
• Làm giảm khả năng tương thích với thiết bị, ảnh hưởng
đến hiệu năng của trình duyệt và khiến bộ chuyển mã
định dạng sai mã đánh dấu
• Khi sử dụng XHTML thay vì dùng XHTML-MP trong quá
trình phát triển web trên di động, có rất nhiều vấn đề
cần cân nhắc liên quan đến hệ sinh thái và kỹ thuật
Một số đặc điểm khi sử dụng ngôn ngữ đánh dấu cho
web di động:
• Làm giảm khả năng tương thích với thiết bị, ảnh hưởng
đến hiệu năng của trình duyệt và khiến bộ chuyển mã
định dạng sai mã đánh dấu
• Khi sử dụng XHTML thay vì dùng XHTML-MP trong quá
trình phát triển web trên di động, có rất nhiều vấn đề
cần cân nhắc liên quan đến hệ sinh thái và kỹ thuật

Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 6
XHTML
Vì sao không chọn HTML?
• HTML có định dạng kém, nên khi sử dụng, hiệu năng
duyệt web của người dùng cũng bị kém đi
• HTML không có nhiều ràng buộc trong cú pháp
• Lập trình viên web trên di động sử dụng biến thể
XHTML của HTML để tạo ra mã đánh dấu hợp lệ về mặt
cú pháp cho trình duyệt di động
HTML5 với web di động?
• Là phiên bản kế tiếp chính thức của ngôn ngữ nền tảng
web
• Là sự kết hợp của cả 2 dạng cú pháp: XHTML và HTML
Vì sao không chọn HTML?
• HTML có định dạng kém, nên khi sử dụng, hiệu năng
duyệt web của người dùng cũng bị kém đi
• HTML không có nhiều ràng buộc trong cú pháp
• Lập trình viên web trên di động sử dụng biến thể
XHTML của HTML để tạo ra mã đánh dấu hợp lệ về mặt
cú pháp cho trình duyệt di động
HTML5 với web di động?
• Là phiên bản kế tiếp chính thức của ngôn ngữ nền tảng
web
• Là sự kết hợp của cả 2 dạng cú pháp: XHTML và HTML
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 7
XHTML-MP
XHTML-MP:
XHTML Mobile Profile - là tập con của XHTML được
định hướng sử dụng trong khả năng hạn chế của
thiết bị di động

Hiện đang được xem xét trên ngôn ngữ chuẩn thực tế
cho phát triển web trên di động
Là mã đánh dấu phù hợp cho trình duyệt trên tất cả
các loại thiết bị di động
Hỗ trợ CSS
XHTML-MP:
XHTML Mobile Profile - là tập con của XHTML được
định hướng sử dụng trong khả năng hạn chế của
thiết bị di động
Hiện đang được xem xét trên ngôn ngữ chuẩn thực tế
cho phát triển web trên di động
Là mã đánh dấu phù hợp cho trình duyệt trên tất cả
các loại thiết bị di động
Hỗ trợ CSS
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 8
NGÔN NGỮ ĐÁNH DẤU CHO WEB DI ĐỘNG
Ví dụ:
<?xml version="1.0" encoding="UTF-8"?>
<!—Khai báoXML, XHTML-MP ở trên là XML >
<! DOCTYPE khai báo tài liệu này là XHTML-MP. >
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
" /><!—Phần còn lại của tài liệu này trông rất giống tài liệu HTML cho máy tính. >
<html xmlns=" /><head>
<!—Stylesheet liên kết bên ngoài >
<link rel="stylesheet" href="/learnto.css" type="text/
<title>Annotated XHTML Example</title>
</head>
<body>
<div class="hdr">Annotated XHTML Example</div>
</body>

</html>
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 9
<?xml version="1.0" encoding="UTF-8"?>
<!—Khai báoXML, XHTML-MP ở trên là XML >
<! DOCTYPE khai báo tài liệu này là XHTML-MP. >
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
" /><!—Phần còn lại của tài liệu này trông rất giống tài liệu HTML cho máy tính. >
<html xmlns=" /><head>
<!—Stylesheet liên kết bên ngoài >
<link rel="stylesheet" href="/learnto.css" type="text/
<title>Annotated XHTML Example</title>
</head>
<body>
<div class="hdr">Annotated XHTML Example</div>
</body>
</html>
XHTML-MP
Đặc điểm cấu trúc:
• Khai báo DocType:
• Các thành phần XHTML không được hỗ trợ trong XHTML-MP:
– Một số thẻ XHTML không thích hợp để sử dụng trong môi
trường hiển thị tài nguyên hạn chế của trình duyệt di động
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
" />Đặc điểm cấu trúc:
• Khai báo DocType:
• Các thành phần XHTML không được hỗ trợ trong XHTML-MP:
– Một số thẻ XHTML không thích hợp để sử dụng trong môi
trường hiển thị tài nguyên hạn chế của trình duyệt di động
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 10
Thành phần XHTML

Lý do
frame, frameset, iframe,
noframes
Frame yêu cầu bộ nhớ trình duyệt lớn, bao
gồm cả đối tượng DOM mới
area, map
Bản đồ hình ảnh không được hỗ trợ và cũng
không dễ sử dụng trên thiết bị di động
XHTML-MP
Các tính năng chuyên dụng cho di động và các tính
năng mới của XHTML-MP:
• URI Scheme:
– Các trình duyệt di động hỗ trợ URI Scheme như mục tiêu
liên kết trong thuộc tính href của thẻ <a>
– Những scheme này được kích hoạt trong các trường hợp
sử dụng di động phổ biến về nội dung web trên di động
– Scheme Tel:
» URI cho phép người sử dụng di động bấm vào một liên kết để bắt
đầu cuộc gọi điện thoại
» Định dạng của scheme URI Tel: là tel: <số điện thoại>
Các tính năng chuyên dụng cho di động và các tính
năng mới của XHTML-MP:
• URI Scheme:
– Các trình duyệt di động hỗ trợ URI Scheme như mục tiêu
liên kết trong thuộc tính href của thẻ <a>
– Những scheme này được kích hoạt trong các trường hợp
sử dụng di động phổ biến về nội dung web trên di động
– Scheme Tel:
» URI cho phép người sử dụng di động bấm vào một liên kết để bắt
đầu cuộc gọi điện thoại

» Định dạng của scheme URI Tel: là tel: <số điện thoại>
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 11
Gọi <a href="tel:+1-503-555-1212"> +1-503-555-1212 </
a> để biết thêm thông tin
XHTML-MP
– Scheme Wtai:
» Được sử dụng để bắt đầu các cuộc gọi điện thoại và thêm số điện
thoại liên lạc vào sổ địa chỉ của thiết bị di động
» Sử dụng định dạng URI khác nhau cho mỗi tác vụ
» Định dạng để bắt đầu một cuộc gọi điện thoại từ thiết bị di động
là wtai ://wp/mc; <số điện thoại>
» Để thêm một liên lạc vào sổ địa chỉ điện thoại di động, sử dụng sơ
đồ wtai://wp/ap; < số điện thoại >, <tên>
» scheme URI tel: và wtai: không được hỗ trợ rộng rãi trong các
trình duyệt di động
– Scheme Wtai:
» Được sử dụng để bắt đầu các cuộc gọi điện thoại và thêm số điện
thoại liên lạc vào sổ địa chỉ của thiết bị di động
» Sử dụng định dạng URI khác nhau cho mỗi tác vụ
» Định dạng để bắt đầu một cuộc gọi điện thoại từ thiết bị di động
là wtai ://wp/mc; <số điện thoại>
» Để thêm một liên lạc vào sổ địa chỉ điện thoại di động, sử dụng sơ
đồ wtai://wp/ap; < số điện thoại >, <tên>
» scheme URI tel: và wtai: không được hỗ trợ rộng rãi trong các
trình duyệt di động
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 12
Gọi <a href="wtai://wp/mc;+15035551212"> +1-503-555-
1212 </ a> để biết thêm thông tin
<a href="wtai://wp/ap;+15035551212;Information"> thêm vào
sổ địa chỉ

XHTML-MP
– Scheme URI sms:
» Khởi tạo một tin nhắn SMS
» Định dạng: sms: <số điện thoại>?<thao tác>
– Scheme URI mmsto:
» Khởi tạo một tin nhắn MMS
» Định dạng: sms: < số điện thoại >;< thao tác >
<a href="sms:+15035551212,+15035551234">Text us with a
Question</a>
– Scheme URI sms:
» Khởi tạo một tin nhắn SMS
» Định dạng: sms: <số điện thoại>?<thao tác>
– Scheme URI mmsto:
» Khởi tạo một tin nhắn MMS
» Định dạng: sms: < số điện thoại >;< thao tác >
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 13
<a href="sms:+15035551212?body=Ask+a+Question">Text me
with a Question</a>
<a href="mmsto:+15035551212">Send us a Photo</a>
XHTML-MP
• Hỗ trợ tính năng form:
– XHTML-MP cung cấp hỗ trợ cơ bản cho biểu mẫu (form).
– Thành phần <form> hỗ trợ các thuộc tính action, enctype
và method lần lượt dùng để xác định URL của việc gửi dữ
liệu biểu mẫu, gửi bảng mã MIME dùng cho nội dung biểu
mẫu và phương thức được sử dụng để gửi biểu mẫu của
yêu cầu HTTP
– Các thuộc tính name và target của thành phần <form> của
XHTML không được hỗ trợ trong XHTML-MP
– Các thành phần con hợp lệ của <form> bao gồm

<fieldset>, <p> và <table>
– Thành phần <input> của biểu mẫu phải được chứa bên
trong một trong ba thẻ con kể trên
– Trong thành phần <input>, thuộc tính tittle quy định cụ thể
nhãn softkey (phím mềm) sẽ được hiển thị khi các thành
phần nhập liệu được lưu ý
• Hỗ trợ tính năng form:
– XHTML-MP cung cấp hỗ trợ cơ bản cho biểu mẫu (form).
– Thành phần <form> hỗ trợ các thuộc tính action, enctype
và method lần lượt dùng để xác định URL của việc gửi dữ
liệu biểu mẫu, gửi bảng mã MIME dùng cho nội dung biểu
mẫu và phương thức được sử dụng để gửi biểu mẫu của
yêu cầu HTTP
– Các thuộc tính name và target của thành phần <form> của
XHTML không được hỗ trợ trong XHTML-MP
– Các thành phần con hợp lệ của <form> bao gồm
<fieldset>, <p> và <table>
– Thành phần <input> của biểu mẫu phải được chứa bên
trong một trong ba thẻ con kể trên
– Trong thành phần <input>, thuộc tính tittle quy định cụ thể
nhãn softkey (phím mềm) sẽ được hiển thị khi các thành
phần nhập liệu được lưu ý
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 14
XHTML-MP
– Ví dụ:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
" /><html xmlns=" /><head>
<link rel="stylesheet" href="/learnto.css" type="text/css" />
<title>XHTML-MP Form</title>

</head>
<body>
<form action="/signup.php" method="post">
<p>Join the Sunset Farmers&apos; Market email list:</p>
<fieldset>
<label>First Name: <input type="text" name="firstname" size="7"
title="First"/></label>
<label>Email: <input type="text" name="email" size="10"
title="Email"/></label>
</fieldset>
<p>
<input type="submit" src="send.jpg" value="Join List" title="Join List"/>
</p>
</form>
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 15
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
" /><html xmlns=" /><head>
<link rel="stylesheet" href="/learnto.css" type="text/css" />
<title>XHTML-MP Form</title>
</head>
<body>
<form action="/signup.php" method="post">
<p>Join the Sunset Farmers&apos; Market email list:</p>
<fieldset>
<label>First Name: <input type="text" name="firstname" size="7"
title="First"/></label>
<label>Email: <input type="text" name="email" size="10"
title="Email"/></label>
</fieldset>

<p>
<input type="submit" src="send.jpg" value="Join List" title="Join List"/>
</p>
</form>
XHTML-MP
• Hỗ trợ tính năng bảng (table):
– Bảng được đơn giản hóa rất nhiều trong XHTML-MP
nhưng vẫn giữ lại một số tính năng hữu ích
– Thành phần <table> chỉ có thể chứa các thành phần con
<caption> và <tr>, <th>, <td>
– Các thuộc tính cellpadding và cellspacing không được hỗ
trợ
– Sử dụng CSS để định dạng bảng, hàng, cột, và từng ô
riêng lẻ
• Hỗ trợ tính năng bảng (table):
– Bảng được đơn giản hóa rất nhiều trong XHTML-MP
nhưng vẫn giữ lại một số tính năng hữu ích
– Thành phần <table> chỉ có thể chứa các thành phần con
<caption> và <tr>, <th>, <td>
– Các thuộc tính cellpadding và cellspacing không được hỗ
trợ
– Sử dụng CSS để định dạng bảng, hàng, cột, và từng ô
riêng lẻ
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 16
<table class="borderOne">
<caption>Today&apos;s Freshest
Produce</caption>
</table>
XHTML-MP
• Liên kết và phím truy cập:

– Điều hướng giữa các liên kết và cuộn cửa sổ trình duyệt
là các tác vụ khó thực hiện trên thiết bị di động
– XHTML-MP cung cấp cách thức giúp đẩy nhanh việc kích
hoạt liên kết trong thẻ <a> bằng cách sử dụng bàn phím
điện thoại di động
– Phím truy cập là phím tắt dạng số được gắn với một liên
kết. Khi nhấn phím tắt đó thì sẽ kích hoạt liên kết tương
ứng
– Sử dụng thuộc tính accesskey của thẻ <a> để tạo phím
tắt dạng số
• Liên kết và phím truy cập:
– Điều hướng giữa các liên kết và cuộn cửa sổ trình duyệt
là các tác vụ khó thực hiện trên thiết bị di động
– XHTML-MP cung cấp cách thức giúp đẩy nhanh việc kích
hoạt liên kết trong thẻ <a> bằng cách sử dụng bàn phím
điện thoại di động
– Phím truy cập là phím tắt dạng số được gắn với một liên
kết. Khi nhấn phím tắt đó thì sẽ kích hoạt liên kết tương
ứng
– Sử dụng thuộc tính accesskey của thẻ <a> để tạo phím
tắt dạng số
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 17
<div>1. <a href="/" accesskey="1">Home</a></div>
XHTML-MP
• Đối tượng nhúng:
– Các thẻ <object> và <param> đều được hỗ trợ trong
XHTML-MP trừ khi có những thay đổi được thông báo
trước
• Lỗi thực thi thông dụng:
– Trình duyệt di động có những khiếm khuyết và cũng hỗ

trợ không đầy đủ các tính năng và ngôn ngữ mã đánh
dấu
– Tài liệu XHTML-MP có thể được hiển thị với sự khác biệt
chút ít hoặc rất rõ ràng trên các model và phiên bản
trình duyệt khác nhau
– Một số lỗi:
» Trình duyệt có thể có một số lượng nhỏ phông chữ đã được cài
đặt. Thành phần tiêu đề (<h1> <h6>) chỉ có thể tăng kích cỡ
phông lên hai hoặc ba lần.
• Đối tượng nhúng:
– Các thẻ <object> và <param> đều được hỗ trợ trong
XHTML-MP trừ khi có những thay đổi được thông báo
trước
• Lỗi thực thi thông dụng:
– Trình duyệt di động có những khiếm khuyết và cũng hỗ
trợ không đầy đủ các tính năng và ngôn ngữ mã đánh
dấu
– Tài liệu XHTML-MP có thể được hiển thị với sự khác biệt
chút ít hoặc rất rõ ràng trên các model và phiên bản
trình duyệt khác nhau
– Một số lỗi:
» Trình duyệt có thể có một số lượng nhỏ phông chữ đã được cài
đặt. Thành phần tiêu đề (<h1> <h6>) chỉ có thể tăng kích cỡ
phông lên hai hoặc ba lần.
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 18
XHTML-MP
» Hiển thị bảng kém đến mức nên tránh hoàn toàn.
» Giao diện người dùng cho các danh sách lựa chọn đơn hoặc danh
sách lựa chọn nhiều mục sẽ thay đổi khi hiển thị.
» Tiêu đề tài liệu có thể được hiển thị ngay trong cửa sổ trình duyệt,

trong chrome cửa sổ, hoặc không được hiển thị.
» Cắt và căn chỉnh hình ảnh có thể không được hỗ trợ sử dụng CSS.
Hỗ trợ không chính xác hoặc không đầy đủ các chỉ thị dùng để
định dạng trong CSS.
» Các thuộc tính mặc định về lề và padding (vùng đệm) trong mô
hình hộp CSS có thể thay đổi.
» Hiển thị bảng kém đến mức nên tránh hoàn toàn.
» Giao diện người dùng cho các danh sách lựa chọn đơn hoặc danh
sách lựa chọn nhiều mục sẽ thay đổi khi hiển thị.
» Tiêu đề tài liệu có thể được hiển thị ngay trong cửa sổ trình duyệt,
trong chrome cửa sổ, hoặc không được hiển thị.
» Cắt và căn chỉnh hình ảnh có thể không được hỗ trợ sử dụng CSS.
Hỗ trợ không chính xác hoặc không đầy đủ các chỉ thị dùng để
định dạng trong CSS.
» Các thuộc tính mặc định về lề và padding (vùng đệm) trong mô
hình hộp CSS có thể thay đổi.
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 19
XHTML-MP
XHTML-MP 1.1:
Bổ sung hỗ trợ cho các thẻ <script> và <noscript>, các sự
kiện DOM và phương ngữ của ngôn ngữ kịch bản
ECMAScript như JavaScript hay ECMAScript MP tối ưu hóa
dành di động
AJAX được dùng trong XHTML-MP 1.1 cho các trình duyệt
di động hỗ trợ một biến XmlHttpRequest và thuộc tính
cũng như phương thức đầy đủ của DOM
Tương tự như XHTML, mã kịch bản của XHTML-MP 1.1 có
thể được tham chiếu bên ngoài hoặc được viết ngay trong
một tài liệu XHTML-MP
Kiểu MIME text/javascript phải được sử dụng để định danh

JavaScript và ECMAScript MP trong tài liệu đánh dấu
XHTML-MP 1.1.
XHTML-MP 1.1:
Bổ sung hỗ trợ cho các thẻ <script> và <noscript>, các sự
kiện DOM và phương ngữ của ngôn ngữ kịch bản
ECMAScript như JavaScript hay ECMAScript MP tối ưu hóa
dành di động
AJAX được dùng trong XHTML-MP 1.1 cho các trình duyệt
di động hỗ trợ một biến XmlHttpRequest và thuộc tính
cũng như phương thức đầy đủ của DOM
Tương tự như XHTML, mã kịch bản của XHTML-MP 1.1 có
thể được tham chiếu bên ngoài hoặc được viết ngay trong
một tài liệu XHTML-MP
Kiểu MIME text/javascript phải được sử dụng để định danh
JavaScript và ECMAScript MP trong tài liệu đánh dấu
XHTML-MP 1.1.
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 20
XHTML-MP
XHTML-MP 1.2 :
XHTML-MP 1.2 là phiên bản mới nhất cho chuẩn mã đánh dấu.
XHTML-MP 1.2 bổ sung hỗ trợ cho chế độ nhập văn bản, đối
tượng và sự kiện
Giải pháp tốt nhất cho phát triển web với XHTML-
MP:
Trang web được thiết kế đơn giản, tải nhanh sẽ chiếm vị
trí hàng đầu
Người dùng di động phải trả phí cho mỗi kilobyte (KB) lưu
lượng sử dụng
Trang web có thể đọc được mà không cần hình ảnh hoặc
CSS

Rắc rối với thanh cuộn
XHTML-MP 1.2 :
XHTML-MP 1.2 là phiên bản mới nhất cho chuẩn mã đánh dấu.
XHTML-MP 1.2 bổ sung hỗ trợ cho chế độ nhập văn bản, đối
tượng và sự kiện
Giải pháp tốt nhất cho phát triển web với XHTML-
MP:
Trang web được thiết kế đơn giản, tải nhanh sẽ chiếm vị
trí hàng đầu
Người dùng di động phải trả phí cho mỗi kilobyte (KB) lưu
lượng sử dụng
Trang web có thể đọc được mà không cần hình ảnh hoặc
CSS
Rắc rối với thanh cuộn
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 21
CSS CHO WEB DI ĐỘNG
CSS CHO WEB DI ĐỘNG
Hầu hết các trình duyệt di động đều hỗ trợ một
hoặc vài chuẩn trong số ba chuẩn CSS (Cascading
Style Sheet): CSS2, Wireless CSS và CSS Mobile
Profile
Một số điện thoại thông minh với trình duyệt WebKit
cũng hỗ trợ một phần chuẩn CSS3
Hỗ trợ sử dụng stylesheet trong tài liệu đánh dấu
theo ba phong cách: ngoại, nội và cục bộ
Từ khóa chọn media và stylesheet phụ thuộc thiết bị
Hầu hết các trình duyệt di động đều hỗ trợ một
hoặc vài chuẩn trong số ba chuẩn CSS (Cascading
Style Sheet): CSS2, Wireless CSS và CSS Mobile
Profile

Một số điện thoại thông minh với trình duyệt WebKit
cũng hỗ trợ một phần chuẩn CSS3
Hỗ trợ sử dụng stylesheet trong tài liệu đánh dấu
theo ba phong cách: ngoại, nội và cục bộ
Từ khóa chọn media và stylesheet phụ thuộc thiết bị
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 23
<link rel="stylesheet" type="text/css" media="handheld" href="foo.css" />
CSS CHO WEB DI ĐỘNG
CSS2:
Trình duyệt web trên di động đầy đủ sẽ hỗ trợ toàn
bộ bản mô tả của CSS2
Wireless CSS và CSS Mobile Profile:
Wireless CSS và CSS Mobile Profile có mối liên hệ chặt
chẽ với nhau
Là những tập con độc lập liên quan đến di động của
CSS2 và được sử dụng để định dạng tài liệu XHTML-
MP
2 chuẩn CSS di động này có giải pháp tương thích và
giao thoa với nhau
CSS2:
Trình duyệt web trên di động đầy đủ sẽ hỗ trợ toàn
bộ bản mô tả của CSS2
Wireless CSS và CSS Mobile Profile:
Wireless CSS và CSS Mobile Profile có mối liên hệ chặt
chẽ với nhau
Là những tập con độc lập liên quan đến di động của
CSS2 và được sử dụng để định dạng tài liệu XHTML-
MP
2 chuẩn CSS di động này có giải pháp tương thích và
giao thoa với nhau

Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 24
CSS CHO WEB DI ĐỘNG
Một số thuộc tính CSS di động:
CSS2
Mô tả
Wireless CSS
CSS Mobile Profile
background-color
Màu nền cho
thành phần khối
Giá trị inherit là
tùy chọn trong
chuẩn.
Hỗ trợ đầy đủ
background-image
Xác định một ảnh
nền
Giá trị inherit là
tùy chọn trong
chuẩn.
Hỗ trợ đầy đủ
Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 25
Xác định một ảnh
nền
Giá trị inherit là
tùy chọn trong
chuẩn.
border-style
Thiết lập kiểu cho
đường viền hộp

của tài liệu
Các giá trị được hỗ
trợ là none, solid,
dashed và dotted.
Giá trị tùy chọn là
hidden, double,
groove, ridge,
inset, outset và
inherit
Các giá trị được hỗ
trợ là none, solid,
dashed, dotted và
inherit