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

2,352 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,352
On SlideShare
0
From Embeds
0
Number of Embeds
109
Actions
Shares
0
Downloads
215
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. BÀI 2 TÌM HIỂU NGÔN NGỮ ĐÁNH DẤU TRONG VIỆC PHÁT TRIỂN WEB MOBILE
  2. 2. 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
  3. 3. 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
  4. 4. NGÔN NGỮ ĐÁNH DẤU CHO WEB DI ĐỘNG
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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" "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> 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" "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>
  10. 10. 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 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
  11. 11. 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
  12. 12. 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ỉ
  13. 13. 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>
  14. 14. 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
  15. 15. 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&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" "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&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>
  16. 16. 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>
  17. 17. 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>
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. CSS CHO WEB DI ĐỘNG
  23. 23. 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" />
  24. 24. 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
  25. 25. 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
  26. 26. CSS CHO WEB DI ĐỘNG 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ất trình duyệt nếu như tài liệu có sẵn Tham khảo CSDL thiết bị Sử dụng các trang thử nghiệm trình duyệt di động công cộng để giải quyết vấn đề hỗ trợ CSS Tạ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ất trình duyệt nếu như tài liệu có sẵn Tham khảo CSDL thiết bị Sử dụng các trang thử nghiệm trình duyệt di động công cộng để giải quyết vấn đề hỗ trợ CSS Tạo các trang thử nghiệm CSS riêng để minh họa hỗ trợ thuộc tính CSS. Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 26
  27. 27. CSS CHO WEB DI ĐỘNG 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ồm các đơn vị Sử dụng giá trị chung cho giá trị font-family và các giá trị tương đối cho font-size border-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ách URL 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ồm các đơn vị Sử dụng giá trị chung cho giá trị font-family và các giá trị tương đối cho font-size border-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ách URL Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 27
  28. 28. NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG
  29. 29. 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úng Nhận biết được các đặc điểm của thiết bị di động cho phép website đưa ra mã đánh dấu di động, định dạng, mã kịch bản và bố cục trang phù hợp, nhằm cung 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úng Nhận biết được các đặc điểm của thiết bị di động cho phép website đưa ra mã đánh dấu di động, định dạng, mã kịch bản và bố cục trang phù hợp, nhằm cung cấp trải nghiệm tốt nhất có thể cho người dùng Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 29
  30. 30. NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG 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êu cầu HTTP, ta xác định được thiết bị di động và trình duyệt • Sử dụng ba trường trong header yêu cầu đặc biệt quan trọ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ết bị di động và mô-đen thiết bị – Trường X Wap Profile: cung cấp URL cho User-Agent Profile theo định dạng file RDF (Resource Description Framework – là ngôn ngữ con của XML theo đặc tả của W3C) – 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êu cầu HTTP, ta xác định được thiết bị di động và trình duyệt • Sử dụng ba trường trong header yêu cầu đặc biệt quan trọ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ết bị di động và mô-đen thiết bị – Trường X Wap Profile: cung cấp URL cho User-Agent Profile theo định dạng file RDF (Resource Description Framework – là ngôn ngữ con của XML theo đặc tả của W3C) – Trường Accept Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 30
  31. 31. NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG – Trường Accept: cung cấp danh sách các kiểu MIME được hỗ trợ trong trình duyệt và thiết bị. Accept-Language: en-US,en;q=0.5 x-wap-profile: "http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf" Host: learnto.mobi Accept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,windows-1250 User-Agent: BlackBerry8310/4.2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/102 Accept: 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, ap plication/vnd.wap.wmlscriptc;q=0.7,text/vnd.wap.wml;q=0.7,*/*;q=0.5 profile: http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf Via: BISB_3.4.0.56, 1.1 pmds166.bisb1.blackberry:3128 (squid/2.7.STABLE6) Cache-Control: max-age=259200 Connection: keep-alive Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 31 Accept-Language: en-US,en;q=0.5 x-wap-profile: "http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf" Host: learnto.mobi Accept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,windows-1250 User-Agent: BlackBerry8310/4.2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/102 Accept: 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, ap plication/vnd.wap.wmlscriptc;q=0.7,text/vnd.wap.wml;q=0.7,*/*;q=0.5 profile: http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf Via: BISB_3.4.0.56, 1.1 pmds166.bisb1.blackberry:3128 (squid/2.7.STABLE6) Cache-Control: max-age=259200 Connection: keep-alive Header yêu cầu HTTP của điện thoại Blackberry Curve 8310
  32. 32. NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG Dùng CSDL thiết bị để nhận biết khả năng của thiết bị: • Sử dụng CSDL thiết bị là phương pháp chính xác nhất để nhận diện thiế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 định khá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 WURFL SourceForge Dùng CSDL thiết bị để nhận biết khả năng của thiết bị: • Sử dụng CSDL thiết bị là phương pháp chính xác nhất để nhận diện thiế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 định khá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 WURFL SourceForge Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 32
  33. 33. TỔNG KẾT Một số ngôn ngữ đánh dấu thông dụng cho việc phát triển web di động: XHTML: thường sử dụng trên smartphone HTML5: thường được sử dụng XHTML-MP WMP 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. Tuy nhiên với một số thuộc tính sẽ được rút gọn để phù hợp với thiết bị Một số ngôn ngữ đánh dấu thông dụng cho việc phát triển web di động: XHTML: thường sử dụng trên smartphone HTML5: thường được sử dụng XHTML-MP WMP 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. Tuy nhiên với một số thuộc tính sẽ được rút gọn để phù hợp với thiết bị Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 33

×