bÀi 2 tìm hiểu ngôn ngữ đánh dấu trong việc phát triển web mobile - giáo trình fpt

BÀI 2TÌ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 độngSự khác biệt giữa web dành cho thiết bị di động và webchạy trên máy tính thông thườngNgôn ngữ đánh dấu dành cho thiết bị di độngStyle sheet cho web di độngNgô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ểnCấu hình máy chủ web theo kiểu MIMECá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 độngSự khác biệt giữa web dành cho thiết bị di động và webchạy trên máy tính thông thườngNgôn ngữ đánh dấu dành cho thiết bị di độngStyle sheet cho web di độngNgô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ểnCấu hình máy chủ web theo kiểu MIMECá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-MPWML

CSS cho web di độngNhận diện thiết bị và tính tương thích với các thiết bịdi độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAX

Làm quen với ngôn ngữ đánh dấu cho web di động:XHTML, XHTML-MPWML

CSS cho web di độngNhận diện thiết bị và tính tương thích với các thiết bịdi độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAX


NGÔN NGỮ ĐÁNH DẤU CHO WEB DI ĐỘNG

XHTML

XHTML:Sử dụng cho điện thoại thông minhSự phát triển của web trên thiết bị di động nhằm tạo ra nhữngtrả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êmngặt của XMLWebsite trên di động được tối ưu hóa cho iPhone hoặc WebKitcó 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 minhSự phát triển của web trên thiết bị di động nhằm tạo ra nhữngtrả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êmngặt của XMLWebsite trên di động được tối ưu hóa cho iPhone hoặc WebKitcó 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

Một số đặc điểm khi sử dụng ngôn ngữ đánh dấu choweb 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 choweb 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


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ặtcú 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ặtcú 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


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ủathiết bị di độngHiệ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 độngLà 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 độngHỗ 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ủathiết bị di độngHiệ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 độngLà 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 độngHỗ trợ CSS


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 html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><!—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="http://www.w3.org/1999/xhtml"><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>


<?xml version="1.0" encoding="UTF-8"?><!—Khai báoXML, XHTML-MP ở trên là XML.--><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><!—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="http://www.w3.org/1999/xhtml"><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>

http://www.wapforum.org/DTD/xhtml-mobile10.dtd

http://www.w3.org/1999/xhtml

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""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

Đặ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


Thành phần XHTML Lý do

frame, frameset, iframe,noframes

Frame yêu cầu bộ nhớ trình duyệt lớn, baogồm cả đối tượng DOM mới

area, map Bản đồ hình ảnh không được hỗ trợ và cũngkhông dễ sử dụng trên thiết bị di động

http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd

XHTML-MP

Các tính năng chuyên dụng cho di động và các tínhnă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ínhnă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>


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áctrì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áctrình duyệt di động


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àosổ đị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 aQuestion</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 >


<a href="sms:+15035551212?body=Ask+a+Question">Text mewith 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ểumẫu và phương thức được sử dụng để gửi biểu mẫu củayêu cầu HTTP

– Các thuộc tính name và target của thành phần <form> củaXHTML 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êntrong 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ànhphầ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ểumẫu và phương thức được sử dụng để gửi biểu mẫu củayêu cầu HTTP

– Các thuộc tính name và target của thành phần <form> củaXHTML 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êntrong 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ànhphần nhập liệu được lưu ý


XHTML-MP

– Ví dụ:<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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' 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>


<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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' 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ẻ


<table class="borderOne"><caption>Today's FreshestProduce</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ênkế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ímtắ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ênkế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ímtắt dạng số


<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áotrướ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ã đánhdấu

– Tài liệu XHTML-MP có thể được hiển thị với sự khác biệtchút ít hoặc rất rõ ràng trên các model và phiên bảntrì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áotrướ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ã đánhdấu

– Tài liệu XHTML-MP có thể được hiển thị với sự khác biệtchút ít hoặc rất rõ ràng trên các model và phiên bảntrì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.


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.


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ảnECMAScript như JavaScript hay ECMAScript MP tối ưu hóadành di độngAJAX được dùng trong XHTML-MP 1.1 cho các trình duyệtdi động hỗ trợ một biến XmlHttpRequest và thuộc tínhcũng như phương thức đầy đủ của DOMTươ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 trongmột tài liệu XHTML-MPKiểu MIME text/javascript phải được sử dụng để định danhJavaScript và ECMAScript MP trong tài liệu đánh dấuXHTML-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ảnECMAScript như JavaScript hay ECMAScript MP tối ưu hóadành di độngAJAX được dùng trong XHTML-MP 1.1 cho các trình duyệtdi động hỗ trợ một biến XmlHttpRequest và thuộc tínhcũng như phương thức đầy đủ của DOMTươ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 trongmột tài liệu XHTML-MPKiểu MIME text/javascript phải được sử dụng để định danhJavaScript và ECMAScript MP trong tài liệu đánh dấuXHTML-MP 1.1.


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, đốitượ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 đầuNgười dùng di động phải trả phí cho mỗi kilobyte (KB) lưulượng sử dụngTrang web có thể đọc được mà không cần hình ảnh hoặcCSSRắ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, đốitượ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 đầuNgười dùng di động phải trả phí cho mỗi kilobyte (KB) lưulượng sử dụngTrang web có thể đọc được mà không cần hình ảnh hoặcCSSRắc rối với thanh cuộn


CSS CHO WEB DI ĐỘNG


Hầu hết các trình duyệt di động đều hỗ trợ mộthoặc vài chuẩn trong số ba chuẩn CSS (CascadingStyle Sheet): CSS2, Wireless CSS và CSS MobileProfileMột số điện thoại thông minh với trình duyệt WebKitcũng hỗ trợ một phần chuẩn CSS3Hỗ trợ sử dụng stylesheet trong tài liệu đánh dấutheo 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ộthoặc vài chuẩn trong số ba chuẩn CSS (CascadingStyle Sheet): CSS2, Wireless CSS và CSS MobileProfileMột số điện thoại thông minh với trình duyệt WebKitcũng hỗ trợ một phần chuẩn CSS3Hỗ trợ sử dụng stylesheet trong tài liệu đánh dấutheo 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ị


<link rel="stylesheet" type="text/css" media="handheld" href="foo.css" />


CSS2:Trình duyệt web trên di động đầy đủ sẽ hỗ trợ toànbộ 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ặtchẽ với nhauLà những tập con độc lập liên quan đến di động củaCSS2 và được sử dụng để định dạng tài liệu XHTML-MP2 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ànbộ 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ặtchẽ với nhauLà những tập con độc lập liên quan đến di động củaCSS2 và được sử dụng để định dạng tài liệu XHTML-MP2 chuẩn CSS di động này có giải pháp tương thích vàgiao thoa với nhau



Một số thuộc tính CSS di động:CSS2 Mô tả Wireless CSS CSS Mobile Profile

background-color Màu nền chothành phần khối

Giá trị inherit làtùy chọn trongchuẩn.

Hỗ trợ đầy đủ

background-image Xác định một ảnhnền


Hỗ trợ đầy đủ


Xác định một ảnhnền


border-style Thiết lập kiểu chođường viền hộpcủ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


Xác định khả năng hỗ trợ CSS của thiết bị di động:Hãy tham khảo tài liệu hướng dẫn của nhà sản xuấttrình duyệt nếu như tài liệu có sẵnTham khảo CSDL thiết bịSử dụng các trang thử nghiệm trình duyệt di độngcông cộng để giải quyết vấn đề hỗ trợ CSSTạo các trang thử nghiệm CSS riêng để minh họa hỗtrợ thuộc tính CSS.

Xác định khả năng hỗ trợ CSS của thiết bị di động:Hãy tham khảo tài liệu hướng dẫn của nhà sản xuấttrình duyệt nếu như tài liệu có sẵnTham khảo CSDL thiết bịSử dụng các trang thử nghiệm trình duyệt di độngcông cộng để giải quyết vấn đề hỗ trợ CSSTạo các trang thử nghiệm CSS riêng để minh họa hỗtrợ thuộc tính CSS.



Giải pháp tốt nhất cho CSS di động:Tất cả các giá trị thuộc tính dạng số phải bao gồmcác đơn vịSử dụng giá trị chung cho giá trị font-family và cácgiá trị tương đối cho font-sizeborder-style đáng tin cậy duy nhất là solid (nét đậm)Kiểm tra khả năng tương thích của dấu phân cáchURL

Giải pháp tốt nhất cho CSS di động:Tất cả các giá trị thuộc tính dạng số phải bao gồmcác đơn vịSử dụng giá trị chung cho giá trị font-family và cácgiá trị tương đối cho font-sizeborder-style đáng tin cậy duy nhất là solid (nét đậm)Kiểm tra khả năng tương thích của dấu phân cáchURL


NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘIDUNG

NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG

Nhận diện thiết bị:Là quá trình sử dụng thông tin trong yêu cầu HTTPđể xác định trình duyệt, thiết bị di động và những khảnăng của chúngNhận biết được các đặc điểm của thiết bị di động chophép website đưa ra mã đánh dấu di động, địnhdạng, mã kịch bản và bố cục trang phù hợp, nhằmcung cấp trải nghiệm tốt nhất có thể cho người dùng

Nhận diện thiết bị:Là quá trình sử dụng thông tin trong yêu cầu HTTPđể xác định trình duyệt, thiết bị di động và những khảnăng của chúngNhận biết được các đặc điểm của thiết bị di động chophép website đưa ra mã đánh dấu di động, địnhdạng, mã kịch bản và bố cục trang phù hợp, nhằmcung cấp trải nghiệm tốt nhất có thể cho người dùng



Dùng header của yêu cầu HTTP để nhận diện thiết bịdi động:

• Bằng cách kiểm tra siêu dữ liệu trong header của yêucầu HTTP, ta xác định được thiết bị di động và trìnhduyệt

• Sử dụng ba trường trong header yêu cầu đặc biệt quantrọng trong định danh thiết bị:

– Trường User-Agent : dùng để xác định trình duyệt diđộng và hầu như cũng định danh luôn nhà sản xuất thiếtbị di động và mô-đen thiết bị

– Trường X Wap Profile: cung cấp URL cho User-AgentProfile theo định dạng file RDF (Resource DescriptionFramework – là ngôn ngữ con của XML theo đặc tả củaW3C)

– Trường Accept

Dùng header của yêu cầu HTTP để nhận diện thiết bịdi động:

• Bằng cách kiểm tra siêu dữ liệu trong header của yêucầu HTTP, ta xác định được thiết bị di động và trìnhduyệt

• Sử dụng ba trường trong header yêu cầu đặc biệt quantrọng trong định danh thiết bị:

– Trường User-Agent : dùng để xác định trình duyệt diđộng và hầu như cũng định danh luôn nhà sản xuất thiếtbị di động và mô-đen thiết bị

– Trường X Wap Profile: cung cấp URL cho User-AgentProfile theo định dạng file RDF (Resource DescriptionFramework – là ngôn ngữ con của XML theo đặc tả củaW3C)

– Trường AcceptSlide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 30


– Trường Accept: cung cấp danh sách các kiểu MIME đượchỗ trợ trong trình duyệt và thiết bị.

Accept-Language: en-US,en;q=0.5x-wap-profile: "http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf"Host: learnto.mobiAccept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,windows-1250User-Agent: BlackBerry8310/4.2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/102Accept:application/vnd.rim.html,text/html,application/xhtml+xml,application/vnd.wap.xhtml+xml,t ext/vnd.sun.j2me.app-descriptor,image/vnd.rim.png,image/jpeg,application/x-vnd.rim.pme.b,application/vnd.rim.ucs,image/gif;anim=1,application/vnd.wap.wmlc;q=0.9,application/vnd.wap.wmlscriptc;q=0.7,text/vnd.wap.wml;q=0.7,*/*;q=0.5profile: http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdfVia: BISB_3.4.0.56, 1.1 pmds166.bisb1.blackberry:3128 (squid/2.7.STABLE6)Cache-Control: max-age=259200Connection: keep-alive


Accept-Language: en-US,en;q=0.5x-wap-profile: "http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf"Host: learnto.mobiAccept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,windows-1250User-Agent: BlackBerry8310/4.2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/102Accept:application/vnd.rim.html,text/html,application/xhtml+xml,application/vnd.wap.xhtml+xml,t ext/vnd.sun.j2me.app-descriptor,image/vnd.rim.png,image/jpeg,application/x-vnd.rim.pme.b,application/vnd.rim.ucs,image/gif;anim=1,application/vnd.wap.wmlc;q=0.9,application/vnd.wap.wmlscriptc;q=0.7,text/vnd.wap.wml;q=0.7,*/*;q=0.5profile: http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdfVia: BISB_3.4.0.56, 1.1 pmds166.bisb1.blackberry:3128 (squid/2.7.STABLE6)Cache-Control: max-age=259200Connection: keep-alive

Header yêu cầu HTTP của điện thoại Blackberry Curve 8310

http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf





Dùng CSDL thiết bị để nhận biết khả năng của thiếtbị:

• Sử dụng CSDL thiết bị là phương pháp chính xác nhất để nhận diệnthiết bị di động và xác định đặc tính

• Các công cụ được sử dụng bao gồm: CSDL thiết bị và API của CSDLđó

• CSDL thiết bị có thể là file vật lý ở định dạng XML, JSON hoặc địnhkhác, hoặc có thể là một cơ sở dữ liệu quan hệ (relation database)

CSDL thiết bị WURFL:• WURFL (Wireless Universal Resource File) là CSDL thiết bị di động

mở được xây dựng bởi cộng đồng, cung cấp các API mã nguồn mởcho phép truy cập vào CSDL chứa thông tin đặc tính của thiết bị vàtrình duyệt di động

• Có thể tải CSDL WURFL, file vá lỗi và cài đặt API từ website WURFLSourceForge

Dùng CSDL thiết bị để nhận biết khả năng của thiếtbị:

• Sử dụng CSDL thiết bị là phương pháp chính xác nhất để nhận diệnthiết bị di động và xác định đặc tính

• Các công cụ được sử dụng bao gồm: CSDL thiết bị và API của CSDLđó

• CSDL thiết bị có thể là file vật lý ở định dạng XML, JSON hoặc địnhkhác, hoặc có thể là một cơ sở dữ liệu quan hệ (relation database)

CSDL thiết bị WURFL:• WURFL (Wireless Universal Resource File) là CSDL thiết bị di động

mở được xây dựng bởi cộng đồng, cung cấp các API mã nguồn mởcho phép truy cập vào CSDL chứa thông tin đặc tính của thiết bị vàtrình duyệt di động

• Có thể tải CSDL WURFL, file vá lỗi và cài đặt API từ website WURFLSourceForge


TỔNG KẾT

Một số ngôn ngữ đánh dấu thông dụng cho việcphát triển web di động:

XHTML: thường sử dụng trên smartphoneHTML5: thường được sử dụngXHTML-MPWMP

Hầu hết các trình duyệt di động đều hỗ trợ mộthoặc vài chuẩn trong số ba chuẩn CSS. Tuy nhiênvới một số thuộc tính sẽ được rút gọn để phù hợpvới thiết bị

Một số ngôn ngữ đánh dấu thông dụng cho việcphát triển web di động:

XHTML: thường sử dụng trên smartphoneHTML5: thường được sử dụngXHTML-MPWMP

Hầu hết các trình duyệt di động đều hỗ trợ mộthoặc vài chuẩn trong số ba chuẩn CSS. Tuy nhiênvới một số thuộc tính sẽ được rút gọn để phù hợpvới thiết bị


bÀi 2 tìm hiểu ngôn ngữ đánh dấu trong việc phát triển web mobile - giáo trình fpt

Documents