bài 3 thiết kế web cho di động với dreamweaver cs5 và jquery

NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNGCSDL WURFL: WURFL lưu trữ dữ liệu thiết bị theo định dạng XML CSDL thiết bị là một file XML lớn có tên là wurfl.xml CSDL WURFL có thể được tùy biến

Trang 1

BÀI 3 THIẾT KẾ WEB CHO DI ĐỘNG VỚI DREAMWEAVER

CS5 & JQUERY

Trang 2

NHẮC LẠI BÀI TRƯỚC

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

Trang 3

Khởi tạo và tùy biến nội dung

Chèn thêm trang web với Jquery mobile

Định dạng trang web với CSS

Nhận diện thiết bị và tính tương thích với các thiết bị

Khởi tạo và tùy biến nội dung

Chèn thêm trang web với Jquery mobile

Định dạng trang web với CSS

Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 3

Trang 4

NHẬN DIỆN THIẾT BỊ & TÍNH TƯƠNG THÍCH VỚI CÁC THIẾT BỊ DI ĐỘNG

Trang 5

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

CSDL WURFL:

WURFL lưu trữ dữ liệu thiết bị theo định dạng XML

CSDL thiết bị là một file XML lớn có tên là wurfl.xml

CSDL WURFL có thể được tùy biến và mở rộng bằngcách sử dụng file vá lỗi (patch) hay file XML có cùngkhuôn dạng với khuôn dạng của CSDL chính để lần

lượt thêm thiết bị mới và thay đổi thông tin về khả

năng của thiết bị các thiết bị đã có

WURFL cung cấp API hướng đối tượng của CSDL thiết

bị cho nền tảng thực thi web sử dụng Java, PHP và

.NET theo bản quyền GPL (General Public License)

CSDL WURFL:

WURFL lưu trữ dữ liệu thiết bị theo định dạng XML

CSDL thiết bị là một file XML lớn có tên là wurfl.xml

CSDL WURFL có thể được tùy biến và mở rộng bằngcách sử dụng file vá lỗi (patch) hay file XML có cùngkhuôn dạng với khuôn dạng của CSDL chính để lần

lượt thêm thiết bị mới và thay đổi thông tin về khả

năng của thiết bị các thiết bị đã có

WURFL cung cấp API hướng đối tượng của CSDL thiết

bị cho nền tảng thực thi web sử dụng Java, PHP và

.NET theo bản quyền GPL (General Public License)

Trang 6

Sử dụng API WURFL :

Tải phiên bản mới nhất của API PHP từ website phần mềm WURFL SourceForge Cài đặt CSDL WURFL cùng

các file vá lỗi vào nơi có thể

truy cập trên máy chủ web

Cấu hình cho cài đặt API

trong file wurfl-config.xml

viết mã PHP khởi tạo

API WURFL sử dụng file

các file vá lỗi vào nơi có thể

truy cập trên máy chủ web

Cấu hình cho cài đặt API

trong file wurfl-config.xml

viết mã PHP khởi tạo

API WURFL sử dụng file

Trang 7

Các đặc tính thiết bị WURFL thông dụng:

Tên đặc tính Nhóm đặc

brand_name product_info string Cho biết nhãn hiệu của thiết

bị di động (chẳng hạn LG, Apple, Nokia).

is_wireless_device product_info string

Có giá trị là true hoặc false.

Cho biết thiết bị được nhận diện có phải là thiết bị di động hoặc trình duyệt hay không Giá trị này là false cho trình duyệt máy tính, robot, máy tìm kiếm

(spider).

is_wireless_device product_info string

Có giá trị là true hoặc false.

Cho biết thiết bị được nhận diện có phải là thiết bị di động hoặc trình duyệt hay không Giá trị này là false cho trình duyệt máy tính, robot, máy tìm kiếm

(spider).

device_claims_we

b_support product_info stringCó giá trị là

true hoặc false.

Cho biết trình duyệt di động

có hỗ trợ chuẩn web (chẳng hạn HTML, JavaScript, AJAX) hay không.

Trang 8

DeviceAtlas lưu trữ dữ liệu thiết bị trong định dạng

JSON, CSDL thiết bị là một file JSON

API của CSDL thiết bị DeviceAtlas đã có sẵn cho các

DeviceAtlas lưu trữ dữ liệu thiết bị trong định dạng

JSON, CSDL thiết bị là một file JSON

API của CSDL thiết bị DeviceAtlas đã có sẵn cho các

Trang 9

Cài đặt và sử dụng CSDL DeviceAtlas và API PHP:

Tải API của DeviceAtlas vào nơi cho phép truy cập

trên máy chủ web

Tải CSDL JSON của DeviceAtlas vào nơi cho phép truycập trên máy chủ web

Viết mã PHP để khởi tạo API của DeviceAtlas

Viết mã PHP nhận diện thiết bị di động sử dụng

User-Agent và lấy giá trị đặc tính của thiết bị di động.

Cài đặt và sử dụng CSDL DeviceAtlas và API PHP:

Tải API của DeviceAtlas vào nơi cho phép truy cập

trên máy chủ web

Tải CSDL JSON của DeviceAtlas vào nơi cho phép truycập trên máy chủ web

Viết mã PHP để khởi tạo API của DeviceAtlas

Viết mã PHP nhận diện thiết bị di động sử dụng

User-Agent và lấy giá trị đặc tính của thiết bị di động.

Trang 10

Các đặc tính thiết bị thông dụng trong DeviceAtlas:

Tên đặc tính Kiểu Mô tả

isBrowser boolean Cho biết thiết bị có phải là trình duyệt dành cho

máy tính hay không vendor string Cho biết nhãn hiệu của thiết bị di động (chẳng

hạn LG, Apple hay Nokia).

Model string Cho biết tên mô-đen của thiết bị di động (chẳng

hạn VX9100, iPhone và N96).

Model string Cho biết tên mô-đen của thiết bị di động (chẳng

hạn VX9100, iPhone và N96).

mobileDevice boolean Cho biết thiết bị có được nhận diện là trình duyệt

di động hoặc thiết bị di động hay không markupSupport string Liệt kê tập các ngôn ngữ đánh dấu được thiết bị

hỗ trợ

Trang 11

THÍCH ỨNG NỘI DUNG

Trang 12

Là chiến lược tùy biến mã đánh dấu, định dạng, và

mã kịch bản cho từng nhóm thiết bị di động chia

theo một số đặc tính thông dụng

Sự thích ứng nội dung sử dụng các nguyên tắc nhận biết thiết bị để định danh thiết bị và trình duyệt và nhóm chúng theo các thuộc tính giống nhau

Data Explorer của DeviceAtlas là công cụ hữu ích để hiển thị dữ liệu thiết bị một cách trực quan, đồng

thời thể hiện các nhóm mà mỗi thiết bị có thể được xếp vào

Là chiến lược tùy biến mã đánh dấu, định dạng, và

mã kịch bản cho từng nhóm thiết bị di động chia

theo một số đặc tính thông dụng

Sự thích ứng nội dung sử dụng các nguyên tắc nhận biết thiết bị để định danh thiết bị và trình duyệt và nhóm chúng theo các thuộc tính giống nhau

Data Explorer của DeviceAtlas là công cụ hữu ích để hiển thị dữ liệu thiết bị một cách trực quan, đồng

thời thể hiện các nhóm mà mỗi thiết bị có thể được xếp vào

Trang 13

Data Explorer của DeviceAtlas thể hiện khả năng hỗ trợ cho

XHTML MP 1.1 trên thiết bị di động.

Trang 14

Luật thích ứng nội dung được tạo bởi nhà thiết kế

hoặc lập trình viên web cho di động

Nguyên tắc đầu tiên của sự thích ứng nội dung là

cần có cái nhìn bao quát, dự trù trước và quản lý

được tính đa dạng

Luật thích ứng nội dung được tạo bởi nhà thiết kế

hoặc lập trình viên web cho di động

Nguyên tắc đầu tiên của sự thích ứng nội dung là

cần có cái nhìn bao quát, dự trù trước và quản lý

được tính đa dạng

Trang 15

Sau khi thiết kế website cho di động và xác định

thiết bị di động mục tiêu cho website, hãy thực hiện

sự thích ứng nội dung theo ba bước sau:

sử dụng các đặc tính sẵn có trong CSDL thiết bị để

chia các thiết bị di động mục tiêu thành từng nhóm

dựa trên các khả năng giống nhau

xác định cách mà website cho di động tương thích vớithiết kế và chức năng

sử dụng nhóm thiết bị và xác định sự thích nghi nội

dung để viết luật quy đinh một cách chính xác nhữngthay đổi của website cho mỗi nhóm

Sau khi thiết kế website cho di động và xác định

thiết bị di động mục tiêu cho website, hãy thực hiện

sự thích ứng nội dung theo ba bước sau:

sử dụng các đặc tính sẵn có trong CSDL thiết bị để

chia các thiết bị di động mục tiêu thành từng nhóm

dựa trên các khả năng giống nhau

xác định cách mà website cho di động tương thích vớithiết kế và chức năng

sử dụng nhóm thiết bị và xác định sự thích nghi nội

dung để viết luật quy đinh một cách chính xác nhữngthay đổi của website cho mỗi nhóm

Trang 16

JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG

Trang 17

Dùng JavaScript và AJAX cho di động (AJAX

-Asynchronous JavaScript and XML) có thể làm tăng tính tương tác của website cho di động

cho di động, cho phép mở rộng các API có bản

quyền dẫn tới cách thức xử lý sự kiện không nhất

quán trên các trình duyệt cho di động

AJAX là phương pháp sử dụng JavaScript để cập

nhật từng phần (không phải toàn bộ) thông tin trên trang web thông qua yêu cầu nền gửi tới máy chủ

web

Dùng JavaScript và AJAX cho di động (AJAX

-Asynchronous JavaScript and XML) có thể làm tăng tính tương tác của website cho di động

cho di động, cho phép mở rộng các API có bản

quyền dẫn tới cách thức xử lý sự kiện không nhất

quán trên các trình duyệt cho di động

AJAX là phương pháp sử dụng JavaScript để cập

nhật từng phần (không phải toàn bộ) thông tin trên trang web thông qua yêu cầu nền gửi tới máy chủ

web

Trang 18

Javascript cho trình duyệt di động:

JavaScript được sử dụng để viết mã kịch bản phía

máy khách trong trang web

JavaScript hữu dụng trong phát triển giao diện độngcho người dùng

JavaScript được thực thi một cách đáng tin cậy trênđiện thoại thông minh và các thiết bị di động mới vớinhững tính năng Internet phong phú

Javascript cho trình duyệt di động:

JavaScript được sử dụng để viết mã kịch bản phía

máy khách trong trang web

JavaScript hữu dụng trong phát triển giao diện độngcho người dùng

JavaScript được thực thi một cách đáng tin cậy trênđiện thoại thông minh và các thiết bị di động mới vớinhững tính năng Internet phong phú

Trang 19

ECMAScript Mobile Profile:

được sử dụng trong trình duyệt dành cho máy tính

nhằm cho phép nhà cung cấp trình duyệt tránh thựcthi các tính năng JavaScript không phù hợp với hiệunăng của trình duyệt

ECMAScript Mobile Profile:

được sử dụng trong trình duyệt dành cho máy tính

nhằm cho phép nhà cung cấp trình duyệt tránh thựcthi các tính năng JavaScript không phù hợp với hiệunăng của trình duyệt

Trang 20

Sự khác biệt giữa ECMAScript MP và ECMAScript:

• Phương thức toàn cục eval() là tùy chọn.

– Từ khóa with là tùy chọn.

– Việc xây dựng hàm động là tùy chọn.

– Việc cho phép sửa đổi thuộc tính đối với đối tượng tích hợp sẵn là tùy chọn.

– Câu lệnh lập phải kết thúc bằng dấu chấm phẩy – Cây DOM được xây dựng dựa trên JavaScript 1.2.

Sự khác biệt giữa ECMAScript MP và ECMAScript:

• Phương thức toàn cục eval() là tùy chọn.

– Từ khóa with là tùy chọn.

– Việc xây dựng hàm động là tùy chọn.

– Việc cho phép sửa đổi thuộc tính đối với đối tượng tích hợp sẵn là tùy chọn.

– Câu lệnh lập phải kết thúc bằng dấu chấm phẩy – Cây DOM được xây dựng dựa trên JavaScript 1.2.

Trang 21

Nhúng JavaScript vào tài liệu đánh dấu:

Mã kịch bản JavaScript được hỗ trợ trong XHTML-MP1.1 và XHTML-MP 1.2 sử dụng cú pháp đánh dấu

giống như XHTML

Nhúng JavaScript vào tài liệu đánh dấu:

Mã kịch bản JavaScript được hỗ trợ trong XHTML-MP1.1 và XHTML-MP 1.2 sử dụng cú pháp đánh dấu

giống như XHTML

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1 //EN"

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

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2 //EN"

"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Trang 22

Trang 23

Các sự kiện JavaScript được hỗ trợ trong XHTML-MP 1.1:

Sự kiện Các thẻ XHTML-MP

được hỗ trợ Mô tả sự kiện

onload body Sự kiện được kích hoạt

khi tài liệu đánh dấu được tải xong

Sự kiện được kích hoạt khi tài liệu đánh dấu được tải xong

onclick Bắt buộc: a, img, input,

object, option, textarea Tùy chọn: abbr, acronym, address, b, big,

blockquote, body, caption, cite, code, dd,

Sự kiện được kích hoạt khi element có thể nhấn (click) (ví dụ như một liên kết) được người dùng chọn Nếu người dùng không kích hoạt

Trang 24

Phân tán JavaScript trong trình duyệt cho di động:

Việc thực thi JavaScript trong trình duyệt cho di động

bị phân tán bởi ba lý do:

• phần mở rộng API có bản quyền

• sự khác biệt trong các phương thức và thuộc tính của cây DOM

• sự khác biệt của các tập sự kiện được hỗ trợ

Phân tán JavaScript trong trình duyệt cho di động:

Việc thực thi JavaScript trong trình duyệt cho di động

bị phân tán bởi ba lý do:

Trang 25

AJAX trong trình duyệt cho di động:

AJAX được dùng để tạo trang web động bằng cách

cập nhật chỉ một phần nội dung tài liệu web thay vì

tải lại toàn bộ

Hoạt động này được thực thi nhờ một tiến trình chạynền (background process) để lấy thêm dữ liệu từ máychủ web

Trang web JavaScript với chức năng AJAX thường

được gọi là RIA (Rich Internet Application)

AJAX trong trình duyệt cho di động:

AJAX được dùng để tạo trang web động bằng cách

cập nhật chỉ một phần nội dung tài liệu web thay vì

tải lại toàn bộ

Hoạt động này được thực thi nhờ một tiến trình chạynền (background process) để lấy thêm dữ liệu từ máychủ web

Trang web JavaScript với chức năng AJAX thường

được gọi là RIA (Rich Internet Application)

Trang 26

Các bước cần thực hiện để cho phép AJAX trong tài liệu web cho di động:

Xác định cách sử dụng AJAX để tự động cập nhật một

phần tài liệu web.

Trong JavaScript, tạo đối tượng XMLHttpRequest

Trong JavaScript, xử lý các thay đổi trạng thái của

XMLHttpRequest để phát hiện lỗi và lấy về tài liệu web

được gửi phản hồi.

Trong JavaScript, sử dụng document.getElementById và

element.innerHTML để cập nhật phần động của tài liệu.

Xem lại việc triển khai các bước trên để đảm bảo rằng

Các bước cần thực hiện để cho phép AJAX trong tài liệu web cho di động:

Xác định cách sử dụng AJAX để tự động cập nhật một

phần tài liệu web.

Trong JavaScript, tạo đối tượng XMLHttpRequest

Trong JavaScript, xử lý các thay đổi trạng thái của

XMLHttpRequest để phát hiện lỗi và lấy về tài liệu web

được gửi phản hồi.

Trong JavaScript, sử dụng document.getElementById và

element.innerHTML để cập nhật phần động của tài liệu.

Xem lại việc triển khai các bước trên để đảm bảo rằng

Trang 27

Ví dụ về AJAX:

Trang 28

Kiểm tra tính hỗ trợ AJAX của trình duyệt cho di

động:

CSDL thiết bị có thể cho biết trình duyệt cho di động

có hỗ trợ AJAX hay không

2 website cung cấp công cụ kiểm tra miễn phí:

• http://pwmwa.com/frost/, http://frostlib.org

• http://ajax.mobiletech.mobi/

Kiểm tra tính hỗ trợ AJAX của trình duyệt cho di

động:

CSDL thiết bị có thể cho biết trình duyệt cho di động

có hỗ trợ AJAX hay không

2 website cung cấp công cụ kiểm tra miễn phí:

• http://pwmwa.com/frost/, http://frostlib.org

• http://ajax.mobiletech.mobi/

Trang 29

THIẾT KẾ WEB DI ĐỘNG VỚI

DREAMWEAVER CS5

Trang 30

THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5

Dreamweaver CS5.5 cung cấp ba mẫu jQuery Mobile

để khởi tạo webpage:

jQuery Mobile (CDN)

jQuery Mobile (Local)

jQuery Mobile (PhoneGap).

Cả ba mẫu Trang jQuery Mobile đều có thể liên kết đến một CSS cụ thể:

Mobile jQuery (CDN) liên kết đến một phiên bản của tập tin CSS jQuery  không thể sửa file CSS

Mobile jQuery (Local) sử dụng phiên bản của các tập tin CSS  Tập tin CSS có thể chỉnh sửa.