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" "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> 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 [...]... 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. .. 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 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ố... href="wtai://wp/mc;+1503555 121 2"> +1-503-555 121 2 để biết thêm thông tin thêm vào sổ địa chỉ » 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 XHTML-MP – Scheme URI sms: » Khởi tạo một tin nhắn SMS » Định dạng: sms: ? Text... Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 26 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 Slide 2 - Tìm hiểu ngôn ngữ. .. Giải pháp tốt nhất cho phát triển web với XHTMLMP: 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... 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:3 128 (squid /2. 7.STABLE6) Cache-Control: max-age =25 920 0 Connection: keep-alive Header yêu cầu HTTP của điện thoại Blackberry Curve 8310 Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 31 NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG Dùng CSDL... href="foo.css" /> Slide 2 - Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển we mobile 23 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 XHTMLMP 2 chuẩn CSS di động... 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 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... 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 đủ border-style... đị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ẻ và , 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 . 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. 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;+1503555 121 2"> +1-503-555- 121 2 </ a>. 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