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

Đặ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ôitrường hiển thị tài nguyên hạn chế

Trang 1

BÀI 2 TÌM HIỂU NGÔN NGỮ ĐÁNH DẤU TRONG VIỆC

PHÁT TRIỂN WEB MOBILE

Trang 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

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

Trang 4

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

Trang 5

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:

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ớ

Trang 6

• 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

Trang 7

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

• 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

Trang 8

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

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

Trang 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 >

<head>

<!—Stylesheet liên kết bên ngoài >

<!—Khai báoXML, XHTML-MP ở trên là XML. >

<! DOCTYPE khai báo tài liệu này là XHTML-MP >

"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 >

<head>

<!—Stylesheet liên kết bên ngoài >

Trang 10

Đặ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ôitrường hiển thị tài nguyên hạn chế của trình duyệt di động

"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ôitrường hiển thị tài nguyên hạn chế của trình duyệt di động

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

không dễ sử dụng trên thiết bị di động

Trang 11

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>

Gọi <a href="tel:+1-503-555-1212"> +1-503-555-1212 </

a> để biết thêm thông tin

Trang 12

– 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

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ỉ

Trang 13

– 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>

Trang 14

• 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

• 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

Trang 15

<p>Join the Sunset Farmers' Market email list:</p>

<p>Join the Sunset Farmers' Market email list:</p>

Trang 16

<caption>Today's Freshest

Produce</caption>

</table>

Trang 17

• 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ố

Trang 18

• Đố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.

Trang 19

» 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.

Trang 20

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

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.

Trang 22

CSS CHO WEB DI ĐỘNG

Trang 23

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ị

Trang 24

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

Trang 25

Một số thuộc tính CSS di động:

background-color Màu nền cho

thành phần khối Giá trị inherit làtùy chọn trong

chuẩ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

Trang 26

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.