Chương 2 Tổng quan công nghệ
2.5 Lập trình web cho từng dòng điện thoại
2.5.3 Cấu trúc chính của một tài liệu web trên di động
Một tài liệu web trên di động điển hình sẽ được chia thành bốn phần chính:
1. Header
2. Main navigation 3. Content
4. Footer
Các vấn đề cần lưu ý khi xây dựng web trên di động:
20 2.5.3.1 Images
Thẻ này chỉ nên được sử dụng cho:
Một logo của công ty
Một hình ảnh bài viết hoặc sản phẩm
Một bản đồ
Không sử dụng các thẻ hình ảnh cho:
Các nút
Các biểu tượng cho liên kết hoặc menu
Các hình nền
Hình ảnh phân cách
Nhan đề
Các thuộc tính bắt buộc đối với một thẻ img là src, chiều rộng, chiều cao, và alt. Điều này sẽ giảm thời gian vẽ ban đầu, bởi vì các trình duyệt di động sẽ không cần phải chờ đợi các hình ảnh tải lên để biết sẽ mất bao nhiêu không gian và làm thế nào để rút ra những phần còn lại của nội dung.
Thuộc tính alt là bắt buộc, vì người dùng có thể vô hiệu hóa hình ảnh hoặc có thể rất chậm để tải, và các tài liệu phải làm việc mà không có chúng.
Hầu hết các trình duyệt web di động hiểu được hình ảnh bình thường định dạng: GIF, JPEG, và PNG. Đề xuất là sử dụng PNG bởi vì nó là định dạng bắt buộc đối với Java ME.
Đối với hình ảnh động, tiêu chuẩn phát triển web di động là hoạt ảnh GIF. Như Flash không bao gồm trong nhiều trình duyệt, và thậm chí cả khi nó được tích hợp nó có thể
21 làm chậm tốc độ của trang web.
2.5.3.2 Links
Mỗi liên kết trong một trang web di động cần phải có các thuộc tính href và các liên kết quan trọng nhất trên trang (lên đến 10) có thể có một thuộc tính accesskey để truy cập dễ dàng thông qua các phím tắt bàn phím, trên các thiết bị có hỗ trợ phím truy cập.
Để tạo ra cửa sổ mới, thực hiện cuộc gọi, gửi SMS hay email trên màn hình di động ta làm như sau:
2.5.3.2.1 Cửa sổ mới
Một số trình duyệt chấp nhận các thuộc tính target = "_blank”, nhưng tuỳ thuộc vào trình duyệt các hành vi này là khác nhau.
Bảng 8: Khả năng tương thích tạo liên kết mở cửa sổ mới 2.5.3.2.2 Thực hiện cuộc gọi
Chức năng này không hoạt động trên tất cả các thiết bị di động.
<a href="tel:+1800229933">Call us free!</a>
22
Hình 4: Thực hiện cuộc gọi trong Nokia, BlackBerry và trình duyệt NetFront của Sony Ericsson.
Bảng 9: Khả năng tương thích cho hành động gọi 2.5.3.2.3 Gửi email
23
Cú pháp là mailto:<email_destination>[?parameters]. Các thông số có thể thay đổi tùy thiết bị nhưng thường bao gồm cc, bcc, subject, and body. Các tham số được xác định trong một định dạng URL (key=value&key=value), và các giá trị phải được mã hoá URI.
<a href="mailto:info@mobilexweb.com">Mail us</a>
<a href = “mailto:info@mobilexweb.com?subject = Contact%20from%20mobile”>Mail us </a>
<a href = “mailto:info@mobilexweb.com?subject
=Contact&body=This%20is%20the%20body”> Mail us </a>
2.5.3.2.4 SMS
Các trình duyệt di động nói chung cung cấp khả năng để gọi cửa sổ tin nhắn SMS mới từ một liên kết. Để làm điều này, chúng tôi có hai phương án URI, sms: / / và smsto: / /.
Cú pháp là sms[to]://[<destination number>][?parameters]. Các tham số thường được xác định trong thân, nhưng điều này là không tương thích với tất cả điện thoại vì lý do an ninh (Ví dụ: để tránh một trang web gửi tin nhắn SMS văn bản). Liên kết này chỉ mở cửa sổ soạn tin nhắn SMS, người sử dụng phải kết thúc quá trình thủ công.
Ví dụ:
<a href="sms://">Send an SMS</a>
<a href =
"sms://?body=Visit%20the%20best%20site%20at%20http://mobilexweb.com">
24 Invite a friend by SMS <a>
<a href="sms://+3490322111"> Contact us by SMS </a>
<a href = "sms://+3490322111?body=Interested%20in%20Product%20AA2">
More info for producto AA2 </a>
Bảng 2: Khả năng tương thích cho hành động nhắn tin 2.5.3.3 Select lists
Các thẻ chọn là một trong các thẻ sử dụng nhiều nhất trên di động.
25
Hình 5: Select lists của Safari trên IOS.
26
Hình 6: Select lists trên Symbian và Android.
27
Bảng 3: Khả năng tương thích danh sách lựa chọn.