bÀi 3 thiết kế web cho di động với dreamweaver cs5 & jquery - giáo trình fpt
DESCRIPTION
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 CSSTRANSCRIPT
BÀI 3THIẾ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-MPWML
CSS cho web di độngNhận diện thiết bị và tính tương thích với các thiết bịdi độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAX
Làm quen với ngôn ngữ đánh dấu cho web di động:XHTML, XHTML-MPWML
CSS cho web di độngNhận diện thiết bị và tính tương thích với các thiết bịdi độngNâng cao khả năng tương tác của web di động vớiJavascript 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 độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAXThiết kế trang web cho di động với DreamweaverCS5:
Khởi tạo và tùy biến nội dungChè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 độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAXThiết kế trang web cho di động với DreamweaverCS5:
Khởi tạo và tùy biến nội dungChè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ƯƠNGTHÍ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 XMLCSDL thiết bị là một file XML lớn có tên là wurfl.xmlCSDL 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ầnlượ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ếtbị 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 XMLCSDL thiết bị là một file XML lớn có tên là wurfl.xmlCSDL 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ầnlượ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ếtbị 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 SourceForgeCà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 APItrong file wurfl-config.xml
viết mã PHP khởi tạoAPI WURFL sử dụng filewurfl-config.xml
Viết mã PHP để nhận diệnthiết bị di động sử dụng headeryê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 SourceForgeCà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 APItrong file wurfl-config.xml
viết mã PHP khởi tạoAPI WURFL sử dụng filewurfl-config.xml
Viết mã PHP để nhận diệnthiết bị di động sử dụng headeryê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ínhKiểu Mô tả
brand_name product_info string Cho biết nhãn hiệu của thiếtbị di động (chẳng hạn LG,Apple, Nokia).
is_wireless_device product_info stringCó giá trị làtrue hoặcfalse.
Cho biết thiết bị được nhậndiện có phải là thiết bị diđộng hoặc trình duyệt haykhông. Giá trị này là falsecho 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 stringCó giá trị làtrue hoặcfalse.
Cho biết thiết bị được nhậndiện có phải là thiết bị diđộng hoặc trình duyệt haykhông. Giá trị này là falsecho trình duyệt máy tính,robot, máy tìm kiếm(spider).
device_claims_web_support
product_info stringCó giá trị làtrue hoặcfalse.
Cho biết trình duyệt di độngcó hỗ trợ chuẩn web (chẳnghạ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 đượccung cấp bởi dotMobilà công cụ nhanh nhất và chính xác nhất để nhậndiện thiết bị di độnglà 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ácDeviceAtlas lưu trữ dữ liệu thiết bị trong định dạngJSON, CSDL thiết bị là một file JSONAPI của CSDL thiết bị DeviceAtlas đã có sẵn cho cácmôi trường thực thi web như Java, .NET, PHP, Pythonvà Ruby
CSDL thiết bị DeviceAtlas:DeviceAtlas là CSDL thiết bị và API thương mại đượccung cấp bởi dotMobilà công cụ nhanh nhất và chính xác nhất để nhậndiện thiết bị di độnglà 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ácDeviceAtlas lưu trữ dữ liệu thiết bị trong định dạngJSON, CSDL thiết bị là một file JSONAPI của CSDL thiết bị DeviceAtlas đã có sẵn cho cácmôi trường thực thi web như Java, .NET, PHP, Pythonvà 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ậptrê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ậptrê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.
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 chomáy tính hay không
vendor string Cho biết nhãn hiệu của thiết bị di động (chẳnghạn LG, Apple hay Nokia).
Model string Cho biết tên mô-đen của thiết bị di động (chẳnghạ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ẳnghạn VX9100, iPhone và N96).
mobileDevice boolean Cho biết thiết bị có được nhận diện là trình duyệtdi độ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 chiatheo một số đặc tính thông dụngSự thích ứng nội dung sử dụng các nguyên tắc nhậnbiế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 nhauData 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, đồngthời thể hiện các nhóm mà mỗi thiết bị có thể đượcxế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 chiatheo một số đặc tính thông dụngSự thích ứng nội dung sử dụng các nguyên tắc nhậnbiế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 nhauData 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, đồngthời thể hiện các nhóm mà mỗi thiết bị có thể đượcxế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ợ choXHTML 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 độngNguyê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 độngNguyê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 địnhthiết bị di động mục tiêu cho website, hãy thực hiệnsự 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ómdựa trên các khả năng giống nhauxác định cách mà website cho di động tương thích vớithiết kế và chức năngsử dụng nhóm thiết bị và xác định sự thích nghi nộidung để 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 địnhthiết bị di động mục tiêu cho website, hãy thực hiệnsự 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ómdựa trên các khả năng giống nhauxác định cách mà website cho di động tương thích vớithiết kế và chức năngsử dụng nhóm thiết bị và xác định sự thích nghi nộidung để 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.
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ăngtính tương tác của website cho di độngJavaScript sử dụng chuẩn EcmaScript Mobile Profilecho di động, cho phép mở rộng các API có bảnquyền dẫn tới cách thức xử lý sự kiện không nhấtquán trên các trình duyệt cho di độngAJAX là phương pháp sử dụng JavaScript để cậpnhật từng phần (không phải toàn bộ) thông tin trêntrang 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ăngtính tương tác của website cho di độngJavaScript sử dụng chuẩn EcmaScript Mobile Profilecho di động, cho phép mở rộng các API có bảnquyền dẫn tới cách thức xử lý sự kiện không nhấtquán trên các trình duyệt cho di độngAJAX là phương pháp sử dụng JavaScript để cậpnhật từng phần (không phải toàn bộ) thông tin trêntrang 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íamáy khách trong trang webJavaScript hữu dụng trong phát triển giao diện độngcho người dùngJavaScript đượ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íamáy khách trong trang webJavaScript hữu dụng trong phát triển giao diện độngcho người dùngJavaScript đượ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ú
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ảnbao 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ínhECMAScript MP có cú pháp chặt chẽ hơn và cho phéptùy chọn những tính năng xử lý mạnh của ECMAScriptnhằ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 tả ECMAScript MP định nghĩa ngôn ngữ kịch bảnbao 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ínhECMAScript MP có cú pháp chặt chẽ hơn và cho phéptùy chọn những tính năng xử lý mạnh của ECMAScriptnhằ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
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-MP1.1 và XHTML-MP 1.2 sử dụng cú pháp đánh dấugiố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ấugiố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ểuMIME text/javascript hoặc text/ecmascript.
<script type="text/javascript">// Hàm xử lý sự kiện onloadfunction 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 onloadfunction 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-MP1.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ạtkhi 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ạtkhi tài liệu đánh dấuđược tải xong
onclick Bắt buộc: a, img, input,object, option, textareaTùy chọn: abbr, acronym,address, b, big,blockquote, body,caption, cite, code, dd,
Sự kiện được kích hoạtkhi element có thể nhấn(click) (ví dụ như mộtliên kết) được ngườidùng chọn. Nếu ngườidù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 độngbị 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 độngbị 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áchcậ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ủ webTrang 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áchcậ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ủ webTrang 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àiliệu web cho di động:
Xác định cách sử dụng AJAX để tự động cập nhật mộtphần tài liệu web.Trong JavaScript, tạo đối tượng XMLHttpRequestTrong JavaScript, xử lý các thay đổi trạng thái củaXMLHttpRequest để 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ằngkhô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àiliệu web cho di động:
Xác định cách sử dụng AJAX để tự động cập nhật mộtphần tài liệu web.Trong JavaScript, tạo đối tượng XMLHttpRequestTrong JavaScript, xử lý các thay đổi trạng thái củaXMLHttpRequest để 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ằngkhô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 độngcó hỗ trợ AJAX hay không2 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 độngcó hỗ trợ AJAX hay không2 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ỚIDREAMWEAVER 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 CSSjQuery không thể sửa file CSSMobile 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 tinCSS, 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 CSSjQuery không thể sửa file CSSMobile 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 tinCSS, 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ợpvớ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ùychỉnh, thêm các thànhphần HTML với bảng CSSSTYLES
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 HTML5Kết hợp thẻ <div> với jQuery Script MobileTuâ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 HTML5Kết hợp thẻ <div> với jQuery Script MobileTuâ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ửatrong 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ửatrong 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 choweb:
JavaScript được sử dụng để viết mã kịch bản phíamáy khách trong trang webAJAX được dùng để tạo trang web động bằng cáchcậ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 choweb:
JavaScript được sử dụng để viết mã kịch bản phíamáy khách trong trang webAJAX được dùng để tạo trang web động bằng cáchcậ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