BÀI 3
THIẾT KẾ WEB CHO DI ĐỘNG VỚI DREAMWEAVER
CS5 & JQUERY
NHẮC LẠI BÀI TRƯỚ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 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 2
MỤC TIÊU BÀI HỌC
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
Thiết kế trang web cho di động với Dreamweaver
CS5:
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ị
di động
Nâng cao khả năng tương tác của web di động với
Javascript và AJAX
Thiết kế trang web cho di động với Dreamweaver
CS5:
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
NHẬN DIỆN THIẾT BỊ & TÍNH TƯƠNG
THÍCH VỚI CÁC THIẾT BỊ DI ĐỘNG
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ằng
cách sử dụng file vá lỗi (patch) hay file XML có cùng
khuô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ằng
cách sử dụng file vá lỗi (patch) hay file XML có cùng
khuô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)
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 5
NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG
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
wurfl-config.xml
Viết mã PHP để nhận diện
thiết bị di động sử dụng header
yêu cầu HTTP
Viết mã PHP sử dụng API để
có được đặc tính của thiết bị vừa được xác định
<?xml version="1.0" encoding="UTF-8"?>
<wurfl-config>
<wurfl>
<main-file>wurfl.xml</main-file>
<patches>
<patch>web_browsers_patch.xml</patch>
<patch>bots_and_spider.xml</patch>
</patches>
</wurfl>
<persistence>
<provider>file</provider>
<params>dir=cache</params>
</persistence>
<cache>
<provider>null</provider>
</cache>
</wurfl-config>
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
wurfl-config.xml
Viết mã PHP để nhận diện
thiết bị di động sử dụng header
yêu cầu HTTP
Viết mã PHP sử dụng API để
có được đặc tính của thiết bị vừa được xác định
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 6
<?xml version="1.0" encoding="UTF-8"?>
<wurfl-config>
<wurfl>
<main-file>wurfl.xml</main-file>
<patches>
<patch>web_browsers_patch.xml</patch>
<patch>bots_and_spider.xml</patch>
</patches>
</wurfl>
<persistence>
<provider>file</provider>
<params>dir=cache</params>
</persistence>
<cache>
<provider>null</provider>
</cache>
</wurfl-config>
NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG
Các đặc tính thiết bị WURFL thông dụng:
Tên đặc tính Nhóm đặc
tính
Kiểu Mô tả
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).
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 7
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 string
Có 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.
NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG
CSDL thiết bị DeviceAtlas:
DeviceAtlas là CSDL thiết bị và API thương mại được
cung cấp bởi dotMobi
là công cụ nhanh nhất và chính xác nhất để nhận
diện thiết bị di động
là tập hợp thông tin thiết bị từ các nhà vận hành, nhà
sản xuất, WURFL và các nguồn khá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
môi trường thực thi web như Java, .NET, PHP, Python
và Ruby
CSDL thiết bị DeviceAtlas:
DeviceAtlas là CSDL thiết bị và API thương mại được
cung cấp bởi dotMobi
là công cụ nhanh nhất và chính xác nhất để nhận
diện thiết bị di động
là tập hợp thông tin thiết bị từ các nhà vận hành, nhà
sản xuất, WURFL và các nguồn khá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
môi trường thực thi web như Java, .NET, PHP, Python
và Ruby
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 8
NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG
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 truy
cậ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 truy
cậ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.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 9
NHẬN DIỆN THIẾT BỊ & THÍCH ỨNG NỘI DUNG
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).
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 10
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ợ .
THÍCH ỨNG NỘI DUNG
THÍCH ỨNG NỘI DUNG
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
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 12
THÍCH ỨNG NỘI DUNG
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 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.
THÍCH ỨNG NỘI DUNG
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
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 14
THÍCH ỨNG NỘI DUNG
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ới
thiế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ững
thay đổ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ới
thiế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ững
thay đổi của website cho mỗi nhóm.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 15
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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
JavaScript sử dụng chuẩn EcmaScript Mobile Profile
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
JavaScript sử dụng chuẩn EcmaScript Mobile Profile
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
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 17
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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 động
cho 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ới
nhữ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 động
cho 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ới
những tính năng Internet phong phú
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 18
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
ECMAScript Mobile Profile:
Đặc tả ECMAScript MP định nghĩa ngôn ngữ kịch bản
bao hàm WMLScript và là tập con của ECMAScript
được sử dụng trong trình duyệt dành cho máy tính
ECMAScript MP có cú pháp chặt chẽ hơn và cho phép
tùy chọn những tính năng xử lý mạnh của ECMAScript
nhằm cho phép nhà cung cấp trình duyệt tránh thực
thi các tính năng JavaScript không phù hợp với hiệu
năng của trình duyệt
ECMAScript Mobile Profile:
Đặc tả ECMAScript MP định nghĩa ngôn ngữ kịch bản
bao hàm WMLScript và là tập con của ECMAScript
được sử dụng trong trình duyệt dành cho máy tính
ECMAScript MP có cú pháp chặt chẽ hơn và cho phép
tùy chọn những tính năng xử lý mạnh của ECMAScript
nhằm cho phép nhà cung cấp trình duyệt tránh thực
thi các tính năng JavaScript không phù hợp với hiệu
năng của trình duyệt
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 19
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 20
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
Nhúng JavaScript vào tài liệu đánh dấu:
Mã kịch bản JavaScript được hỗ trợ trong XHTML-MP
1.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-MP
1.1 và XHTML-MP 1.2 sử dụng cú pháp đánh dấu
giống như XHTML
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 21
<!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">
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
XHTML-MP 1.1 hỗ trợ ECMAScript MP sử dụng kiểu
MIME text/javascript hoặc text/ecmascript.
<script type="text/javascript">
// Hàm xử lý sự kiện onload
function handleOnLoad(event) {
alert(event.type);
}
</script>
<script type="text/javascript" src="http://learnto.mobi/books/bmwd/05/lib.js"
/>
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 22
<script type="text/javascript">
// Hàm xử lý sự kiện onload
function handleOnLoad(event) {
alert(event.type);
}
</script>
<script type="text/javascript" src="http://learnto.mobi/books/bmwd/05/lib.js"
/>
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 23
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
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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:
• 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ợ
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 24
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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ạy
nền (background process) để lấy thêm dữ liệu từ máy
chủ 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ạy
nền (background process) để lấy thêm dữ liệu từ máy
chủ web
Trang web JavaScript với chức năng AJAX thường
được gọi là RIA (Rich Internet Application)
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 25
JAVASCRIPT & AJAX VỚI WEB DI ĐỘ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
không sử dụng giao dịch AJAX quá thường xuyên.
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
không sử dụng giao dịch AJAX quá thường xuyên.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 26
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
Ví dụ về AJAX:
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 27
JAVASCRIPT & AJAX VỚI WEB DI ĐỘNG
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/
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 28
THIẾT KẾ WEB DI ĐỘNG VỚI
DREAMWEAVER CS5
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.
jQuery Mobile (PhoneGap) sử dụng phiên bản local của tập tin
CSS, nhưng cũng tạo ra tập tin JavaScript cần thiết để chuyển
đổi trang điện thoại di động của bạn thành ứng dụng.
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.
jQuery Mobile (PhoneGap) sử dụng phiên bản local của tập tin
CSS, nhưng cũng tạo ra tập tin JavaScript cần thiết để chuyển
đổi trang điện thoại di động của bạn thành ứng dụng.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 30
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Khởi tạo site với Dreamweaver:
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 31
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 32
Cấu trúc web di động được khởi tạo trong Dreamweaver
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Cửa sổ Split sau khi khởi tạo site
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 33
Có thể tùy chỉnh kích thước phù hợp
với thiết bị di động
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 34
Hoàn toàn có thể tùy
chỉnh, thêm các thành
phần HTML với bảng CSS
STYLES
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Tùy biến nội dung với HTML5:
Sử dụng thuộc tính data-role của HTML5
Kết hợp thẻ <div> với jQuery Script Mobile
Tuân thủ cấu trúc của HTML5:
• Page
• Header
• Content
• Footer
Tùy biến nội dung với HTML5:
Sử dụng thuộc tính data-role của HTML5
Kết hợp thẻ <div> với jQuery Script Mobile
Tuân thủ cấu trúc của HTML5:
• Page
• Header
• Content
• Footer
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 35
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Trang data-role:
• Đóng vai trò thường xuyên, tổ chức các yếu tố trong
một trang Mobile jQuery.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 36
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Thêm trang jQuery Mobile và đối tượng mới:
Insert | jQuery Mobile | Page
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 37
Có thể sử dụng cách copy <div data-
role=“” id=“”></div> để tạo thêm
phần tử mới
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Định dạng lại trang web cho di động với CSS:
Có thể tạo mới các thành phần css hoặc chỉnh sửa
trong file:
• jquery.mobile.structure-1.0.min.css
• jquery.mobile.theme-1.0.min.css
Hoặc sử dụng file css online:
• http://code.jquery.com/mobile/latest/jquery.mobile.css.
Định dạng lại trang web cho di động với CSS:
Có thể tạo mới các thành phần css hoặc chỉnh sửa
trong file:
• jquery.mobile.structure-1.0.min.css
• jquery.mobile.theme-1.0.min.css
Hoặc sử dụng file css online:
• http://code.jquery.com/mobile/latest/jquery.mobile.css.
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 38
Thông qua bảng CSS STYLE
THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5
Áp dụng và chỉnh sửa theme cho web di động:
Sử dụng thành phần data-theme trong HTML5
Áp dụng CSS trong file jquery.mobile.theme-
1.0.min.css
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 39
TỔNG KẾT
Trong việc phát triển web cho thiết bị di động, sử
dụng Javascript & AJAX làm tăng tính tương tác cho
web:
JavaScript được sử dụng để viết mã kịch bản phía
máy khách trong trang web
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ộ
Khi sử dụng Dreamweaver để thiết kế web:
Sử dụng HTML5
Định dạng trang web với jquery.mobile.structure-
1.0.min.css; jquery.mobile.theme-1.0.min.css
Trong việc phát triển web cho thiết bị di động, sử
dụng Javascript & AJAX làm tăng tính tương tác cho
web:
JavaScript được sử dụng để viết mã kịch bản phía
máy khách trong trang web
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ộ
Khi sử dụng Dreamweaver để thiết kế web:
Sử dụng HTML5
Định dạng trang web với jquery.mobile.structure-
1.0.min.css; jquery.mobile.theme-1.0.min.css
Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 40

BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPT

  • 1.
    BÀI 3 THIẾT KẾWEB CHO DI ĐỘNG VỚI DREAMWEAVER CS5 & JQUERY
  • 2.
    NHẮC LẠI BÀITRƯỚ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 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 2
  • 3.
    MỤC TIÊU BÀIHỌC 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 Thiết kế trang web cho di động với Dreamweaver CS5: 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ị di động Nâng cao khả năng tương tác của web di động với Javascript và AJAX Thiết kế trang web cho di động với Dreamweaver CS5: 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
  • 4.
    NHẬN DIỆN THIẾTBỊ & TÍNH TƯƠNG THÍCH VỚI CÁC THIẾT BỊ DI ĐỘNG
  • 5.
    NHẬN DIỆN THIẾTBỊ & 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ằng cách sử dụng file vá lỗi (patch) hay file XML có cùng khuô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ằng cách sử dụng file vá lỗi (patch) hay file XML có cùng khuô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) Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 5
  • 6.
    NHẬN DIỆN THIẾTBỊ & THÍCH ỨNG NỘI DUNG 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 wurfl-config.xml Viết mã PHP để nhận diện thiết bị di động sử dụng header yêu cầu HTTP Viết mã PHP sử dụng API để có được đặc tính của thiết bị vừa được xác định <?xml version="1.0" encoding="UTF-8"?> <wurfl-config> <wurfl> <main-file>wurfl.xml</main-file> <patches> <patch>web_browsers_patch.xml</patch> <patch>bots_and_spider.xml</patch> </patches> </wurfl> <persistence> <provider>file</provider> <params>dir=cache</params> </persistence> <cache> <provider>null</provider> </cache> </wurfl-config> 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 wurfl-config.xml Viết mã PHP để nhận diện thiết bị di động sử dụng header yêu cầu HTTP Viết mã PHP sử dụng API để có được đặc tính của thiết bị vừa được xác định Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 6 <?xml version="1.0" encoding="UTF-8"?> <wurfl-config> <wurfl> <main-file>wurfl.xml</main-file> <patches> <patch>web_browsers_patch.xml</patch> <patch>bots_and_spider.xml</patch> </patches> </wurfl> <persistence> <provider>file</provider> <params>dir=cache</params> </persistence> <cache> <provider>null</provider> </cache> </wurfl-config>
  • 7.
    NHẬN DIỆN THIẾTBỊ & THÍCH ỨNG NỘI DUNG Các đặc tính thiết bị WURFL thông dụng: Tên đặc tính Nhóm đặc tính Kiểu Mô tả 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). Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 7 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 string Có 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.
  • 8.
    NHẬN DIỆN THIẾTBỊ & THÍCH ỨNG NỘI DUNG CSDL thiết bị DeviceAtlas: DeviceAtlas là CSDL thiết bị và API thương mại được cung cấp bởi dotMobi là công cụ nhanh nhất và chính xác nhất để nhận diện thiết bị di động là tập hợp thông tin thiết bị từ các nhà vận hành, nhà sản xuất, WURFL và các nguồn khá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 môi trường thực thi web như Java, .NET, PHP, Python và Ruby CSDL thiết bị DeviceAtlas: DeviceAtlas là CSDL thiết bị và API thương mại được cung cấp bởi dotMobi là công cụ nhanh nhất và chính xác nhất để nhận diện thiết bị di động là tập hợp thông tin thiết bị từ các nhà vận hành, nhà sản xuất, WURFL và các nguồn khá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 môi trường thực thi web như Java, .NET, PHP, Python và Ruby Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 8
  • 9.
    NHẬN DIỆN THIẾTBỊ & THÍCH ỨNG NỘI DUNG 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 truy cậ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 truy cậ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. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 9
  • 10.
    NHẬN DIỆN THIẾTBỊ & THÍCH ỨNG NỘI DUNG 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). Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 10 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ợ .
  • 11.
  • 12.
    THÍCH ỨNG NỘIDUNG 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 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 12
  • 13.
    THÍCH ỨNG NỘIDUNG Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 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.
  • 14.
    THÍCH ỨNG NỘIDUNG 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 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 14
  • 15.
    THÍCH ỨNG NỘIDUNG 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ới thiế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ững thay đổ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ới thiế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ững thay đổi của website cho mỗi nhóm. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 15
  • 16.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG
  • 17.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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 JavaScript sử dụng chuẩn EcmaScript Mobile Profile 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 JavaScript sử dụng chuẩn EcmaScript Mobile Profile 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 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 17
  • 18.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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 động cho 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ới nhữ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 động cho 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ới những tính năng Internet phong phú Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 18
  • 19.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG ECMAScript Mobile Profile: Đặc tả ECMAScript MP định nghĩa ngôn ngữ kịch bản bao hàm WMLScript và là tập con của ECMAScript được sử dụng trong trình duyệt dành cho máy tính ECMAScript MP có cú pháp chặt chẽ hơn và cho phép tùy chọn những tính năng xử lý mạnh của ECMAScript nhằm cho phép nhà cung cấp trình duyệt tránh thực thi các tính năng JavaScript không phù hợp với hiệu năng của trình duyệt ECMAScript Mobile Profile: Đặc tả ECMAScript MP định nghĩa ngôn ngữ kịch bản bao hàm WMLScript và là tập con của ECMAScript được sử dụng trong trình duyệt dành cho máy tính ECMAScript MP có cú pháp chặt chẽ hơn và cho phép tùy chọn những tính năng xử lý mạnh của ECMAScript nhằm cho phép nhà cung cấp trình duyệt tránh thực thi các tính năng JavaScript không phù hợp với hiệu năng của trình duyệt Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 19
  • 20.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 20
  • 21.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG Nhúng JavaScript vào tài liệu đánh dấu: Mã kịch bản JavaScript được hỗ trợ trong XHTML-MP 1.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-MP 1.1 và XHTML-MP 1.2 sử dụng cú pháp đánh dấu giống như XHTML Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 21 <!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">
  • 22.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG XHTML-MP 1.1 hỗ trợ ECMAScript MP sử dụng kiểu MIME text/javascript hoặc text/ecmascript. <script type="text/javascript"> // Hàm xử lý sự kiện onload function handleOnLoad(event) { alert(event.type); } </script> <script type="text/javascript" src="http://learnto.mobi/books/bmwd/05/lib.js" /> Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 22 <script type="text/javascript"> // Hàm xử lý sự kiện onload function handleOnLoad(event) { alert(event.type); } </script> <script type="text/javascript" src="http://learnto.mobi/books/bmwd/05/lib.js" />
  • 23.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 23 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
  • 24.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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: • 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ợ Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 24
  • 25.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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ạy nền (background process) để lấy thêm dữ liệu từ máy chủ 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ạy nền (background process) để lấy thêm dữ liệu từ máy chủ web Trang web JavaScript với chức năng AJAX thường được gọi là RIA (Rich Internet Application) Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 25
  • 26.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘ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 không sử dụng giao dịch AJAX quá thường xuyên. 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 không sử dụng giao dịch AJAX quá thường xuyên. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 26
  • 27.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG Ví dụ về AJAX: Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 27
  • 28.
    JAVASCRIPT & AJAXVỚI WEB DI ĐỘNG 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/ Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 28
  • 29.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5
  • 30.
    THIẾT KẾ WEBDI ĐỘ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. jQuery Mobile (PhoneGap) sử dụng phiên bản local của tập tin CSS, nhưng cũng tạo ra tập tin JavaScript cần thiết để chuyển đổi trang điện thoại di động của bạn thành ứng dụng. 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. jQuery Mobile (PhoneGap) sử dụng phiên bản local của tập tin CSS, nhưng cũng tạo ra tập tin JavaScript cần thiết để chuyển đổi trang điện thoại di động của bạn thành ứng dụng. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 30
  • 31.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Khởi tạo site với Dreamweaver: Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 31
  • 32.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 32 Cấu trúc web di động được khởi tạo trong Dreamweaver
  • 33.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Cửa sổ Split sau khi khởi tạo site Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 33 Có thể tùy chỉnh kích thước phù hợp với thiết bị di động
  • 34.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 34 Hoàn toàn có thể tùy chỉnh, thêm các thành phần HTML với bảng CSS STYLES
  • 35.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Tùy biến nội dung với HTML5: Sử dụng thuộc tính data-role của HTML5 Kết hợp thẻ <div> với jQuery Script Mobile Tuân thủ cấu trúc của HTML5: • Page • Header • Content • Footer Tùy biến nội dung với HTML5: Sử dụng thuộc tính data-role của HTML5 Kết hợp thẻ <div> với jQuery Script Mobile Tuân thủ cấu trúc của HTML5: • Page • Header • Content • Footer Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 35
  • 36.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Trang data-role: • Đóng vai trò thường xuyên, tổ chức các yếu tố trong một trang Mobile jQuery. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 36
  • 37.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Thêm trang jQuery Mobile và đối tượng mới: Insert | jQuery Mobile | Page Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 37 Có thể sử dụng cách copy <div data- role=“” id=“”></div> để tạo thêm phần tử mới
  • 38.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Định dạng lại trang web cho di động với CSS: Có thể tạo mới các thành phần css hoặc chỉnh sửa trong file: • jquery.mobile.structure-1.0.min.css • jquery.mobile.theme-1.0.min.css Hoặc sử dụng file css online: • http://code.jquery.com/mobile/latest/jquery.mobile.css. Định dạng lại trang web cho di động với CSS: Có thể tạo mới các thành phần css hoặc chỉnh sửa trong file: • jquery.mobile.structure-1.0.min.css • jquery.mobile.theme-1.0.min.css Hoặc sử dụng file css online: • http://code.jquery.com/mobile/latest/jquery.mobile.css. Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 38 Thông qua bảng CSS STYLE
  • 39.
    THIẾT KẾ WEBDI ĐỘNG VỚI DREAMWEAVER CS5 Áp dụng và chỉnh sửa theme cho web di động: Sử dụng thành phần data-theme trong HTML5 Áp dụng CSS trong file jquery.mobile.theme- 1.0.min.css Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 39
  • 40.
    TỔNG KẾT Trong việcphát triển web cho thiết bị di động, sử dụng Javascript & AJAX làm tăng tính tương tác cho web: JavaScript được sử dụng để viết mã kịch bản phía máy khách trong trang web 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ộ Khi sử dụng Dreamweaver để thiết kế web: Sử dụng HTML5 Định dạng trang web với jquery.mobile.structure- 1.0.min.css; jquery.mobile.theme-1.0.min.css Trong việc phát triển web cho thiết bị di động, sử dụng Javascript & AJAX làm tăng tính tương tác cho web: JavaScript được sử dụng để viết mã kịch bản phía máy khách trong trang web 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ộ Khi sử dụng Dreamweaver để thiết kế web: Sử dụng HTML5 Định dạng trang web với jquery.mobile.structure- 1.0.min.css; jquery.mobile.theme-1.0.min.css Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 40