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

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ợ . [...]... 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 Cấu trúc web di động được khởi tạo trong Dreamweaver Slide 3 - Thiết kế web cho di động. .. động với Dreamweaver CS5 & JQuery 32 THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5 Cửa sổ Split sau khi khởi tạo site Có thể tùy chỉnh kích thước phù hợp với thiết bị di động Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 33 THIẾT KẾ WEB DI ĐỘNG VỚI DREAMWEAVER CS5 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 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5. .. 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. .. 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... web cho di động với Dreamweaver CS5 & JQuery 34 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ẻ 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ò... 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 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 Slide 3 - Thiết kế web cho di động với Dreamweaver CS5 & JQuery 13 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ự... 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... 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... 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... 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ú Slide 3 - Thiết kế web cho di động . 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à. 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. 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