Upload
hoc-lap-trinh-web
View
2.222
Download
1
Embed Size (px)
DESCRIPTION
Tổng quan về tạo App trong Dreamweaver Cấu hình, tùy chỉnh các App (ứng dụng) cho thiết bị di động Xây dựng ứng dụng Một số cải tiến cho web di động: Tổng quan về kỹ thuật web di động Webkit trong trình duyệt web di động Một số trình duyệt web trên các thiết bị di động Tổng quan về tạo App trong Dreamweaver Cấu hình, tùy chỉnh các App (ứng dụng) cho thiết bị di động Xây dựng ứng dụng Một số cải tiến cho web di động: Tổng quan về kỹ thuật web di động Webkit trong trình duyệt web di động Một số trình duyệt web trên các thiết bị di động
Citation preview
BÀI 5TẠO APP CHO THIẾT BỊ DI ĐỘNG & MỘT SỐ CẢI
TIẾN CHO WEB DI ĐỘNG
NHẮC LẠI BÀI TRƯỚC
Khởi tạo trang mới với Jquery mobileChèn các thành phần:
Layout gridCollapsible block
Sử dụng các thành phần form: input với Jquerymobile:
Jump menuInput formCác thành phần đặc biệt khác
Khởi tạo trang mới với Jquery mobileChèn các thành phần:
Layout gridCollapsible block
Sử dụng các thành phần form: input với Jquerymobile:
Jump menuInput formCác thành phần đặc biệt khác
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 2
MỤC TIÊU BÀI HỌC
Tổng quan về tạo App trong DreamweaverCấu hình, tùy chỉnh các App (ứng dụng) cho thiết bịdi độngXây dựng ứng dụngMột số cải tiến cho web di động:
Tổng quan về kỹ thuật web di độngWebkit trong trình duyệt web di độngMột số trình duyệt web trên các thiết bị di động
Tổng quan về tạo App trong DreamweaverCấu hình, tùy chỉnh các App (ứng dụng) cho thiết bịdi độngXây dựng ứng dụngMột số cải tiến cho web di động:
Tổng quan về kỹ thuật web di độngWebkit trong trình duyệt web di độngMột số trình duyệt web trên các thiết bị di động
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 3
TẠO APP (ỨNG DỤNG) VỚI DREAMWEAVER
TẠO APP (ỨNG DỤNG) VỚI DREAMWEAVER
Ưu điểm của App và web di động:Sự khác biệt:
• App được viết bởi ngôn ngữ CƯu điểm của web mobile được đóng gói như dạngapp (ứng dụng):
• App (ứng dụng) chạy trên thiết bị di động ngay cả khithiết bị đang offline (tắt)
• App tải nhanh hơn• Sau khi cài đặt, ứng dụng dễ dàng truy cập trên thiết bị
di động - ứng dụng sẽ hiển thị trên màn hình thiết bịvà không cần phải truy cập qua trình duyệt
• Có thể bán các ứng dụng thông qua các gian hành trựctuyến của Apple, Android, …
Ưu điểm của App và web di động:Sự khác biệt:
• App được viết bởi ngôn ngữ CƯu điểm của web mobile được đóng gói như dạngapp (ứng dụng):
• App (ứng dụng) chạy trên thiết bị di động ngay cả khithiết bị đang offline (tắt)
• App tải nhanh hơn• Sau khi cài đặt, ứng dụng dễ dàng truy cập trên thiết bị
di động - ứng dụng sẽ hiển thị trên màn hình thiết bịvà không cần phải truy cập qua trình duyệt
• Có thể bán các ứng dụng thông qua các gian hành trựctuyến của Apple, Android, …
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 5
TẠO APP (ỨNG DỤNG) VỚI DREAMWEAVER
PhoneGap và Dreamweaver:PhoneGap: là công nghệ có thể chuyển đổi HTML5,CSS & Javascript thành ứng dụng (app)PhoneGap được tích hợp với Dreamweaver từ cácphiên bản CS5.5, CS6:
• Tạo ra ứng dụng Android cho điện thoại di động thiết bịtrên Windows hoặc trên máy Mac
• Chỉ có thể tạo ra các ứng dụng cho iOS bằng cách sửdụng Dreamweaver trên máy Mac
PhoneGap và Dreamweaver:PhoneGap: là công nghệ có thể chuyển đổi HTML5,CSS & Javascript thành ứng dụng (app)PhoneGap được tích hợp với Dreamweaver từ cácphiên bản CS5.5, CS6:
• Tạo ra ứng dụng Android cho điện thoại di động thiết bịtrên Windows hoặc trên máy Mac
• Chỉ có thể tạo ra các ứng dụng cho iOS bằng cách sửdụng Dreamweaver trên máy Mac
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 6
CẤU HÌNH, TÙY CHỈNH APP
CẤU HÌNH, TÙY CHỈNH APP
Yêu cầu trước khi sử dụng PhoneGap để chuyển đổiapp:
Download SDK (Apple SDK, Android SDK)Kết nối SDK với Dreamweaver:
• Site | Mobile Applications | Configure ApplicationFramework.
• Hộp thoại Configure Application Framework xuất hiệnnhấn nút Easy Install
Yêu cầu trước khi sử dụng PhoneGap để chuyển đổiapp:
Download SDK (Apple SDK, Android SDK)Kết nối SDK với Dreamweaver:
• Site | Mobile Applications | Configure ApplicationFramework.
• Hộp thoại Configure Application Framework xuất hiệnnhấn nút Easy Install
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 8
Thực hiện các bước tương tự trênmáy MAC, với Apple SDK
CẤU HÌNH, TÙY CHỈNH APP
Cấu hình các ứng dụng mobile:Site > Mobile Applications > Application Settings
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 9
CẤU HÌNH, TÙY CHỈNH APP
Trường Bundle ID: đáp ứng yêu cầu kỹ thuật cho cảAndroid và các ứng dụng iOSTrường Application Name: tên ứng dụngTarget Path: sử dụng biểu tượng Browse để điềuhướng đến và chọn một thư mục đầu ra.
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 10
XÂY DỰNG ỨNG DỤNG
XÂY DỰNG ỨNG DỤNG
Khi cài đặt SDK cho Android/ iOS, chương trìnhemulation sẽ được tự động cài đặtHoặc có thể sử dụng Site | Mobile Applications |Build and Emulate
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 12
Hiển thị các thiết bị phù hợp để chuyển đổi
XÂY DỰNG ỨNG DỤNG
Kiểm tra ứng dụng trên máy tính:Sau khi thực hiện chuyển đổi, cửa sổ kiểm thử xuấthiệnCửa sổ kiểm thử mô phỏng các thiết bị di động
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 13
CẢI TIẾN CHO WEB DI ĐỘNG
CẢI TIẾN CHO WEB DI ĐỘNG
Kỹ thuật web thông dụng cho trình duyệt trên điệnthoại thông minh:
Thẻ Meta Viewport:• Nhiều trình duyệt điện thoại thông minh điều chỉnh tỷ lệ
trang web theo độ rộng của cửa sổ hiển thị (viewport)• Thẻ <meta> Viewport cho phép lập trình viên cho di động
thiết lập giới hạn về tỷ lệ và kích thước hiển thị tốt nhấtcho tài liệu web cho di động
• Giá trị content của thẻ <meta>Viewport là một danh sáchcác chỉ thị và giá trị được phân cách với nhau bởi dấuphẩy
Kỹ thuật web thông dụng cho trình duyệt trên điệnthoại thông minh:
Thẻ Meta Viewport:• Nhiều trình duyệt điện thoại thông minh điều chỉnh tỷ lệ
trang web theo độ rộng của cửa sổ hiển thị (viewport)• Thẻ <meta> Viewport cho phép lập trình viên cho di động
thiết lập giới hạn về tỷ lệ và kích thước hiển thị tốt nhấtcho tài liệu web cho di động
• Giá trị content của thẻ <meta>Viewport là một danh sáchcác chỉ thị và giá trị được phân cách với nhau bởi dấuphẩy
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 15
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />
CẢI TIẾN CHO WEB DI ĐỘNG
• width và height lần lượt xác định chiều rộng và chiềudài logic cho màn hình hiển thị:
– width sử dụng mã thông báo device-width– height sử dụng mã thông báo device-height
• user-scalable xác định xem người dùng có thể phóngto/thu nhỏ cửa sổ hiển thị và điều chỉnh tỷ lệ hiển thịcủa trang web hay không
• initial-scale thiết lập hệ số tỷ lệ hoặc hệ số thu phóngban đầu được sử dụng cho trang web
• maximum-scale và minimum-scale thiết lập giới hạndành khi thu phóng hay thay đổi tỷ lệ trang web
• width và height lần lượt xác định chiều rộng và chiềudài logic cho màn hình hiển thị:
– width sử dụng mã thông báo device-width– height sử dụng mã thông báo device-height
• user-scalable xác định xem người dùng có thể phóngto/thu nhỏ cửa sổ hiển thị và điều chỉnh tỷ lệ hiển thịcủa trang web hay không
• initial-scale thiết lập hệ số tỷ lệ hoặc hệ số thu phóngban đầu được sử dụng cho trang web
• maximum-scale và minimum-scale thiết lập giới hạndành khi thu phóng hay thay đổi tỷ lệ trang web
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 16
CẢI TIẾN CHO WEB DI ĐỘNG
Phát hiện sự thay đổi hướng màn hình bằngJavascript:
• Trình duyệt điện thoại thông minh phát hiện thông quasự kiện onresize hoặc onorientationchange của đốitượng window trong JavaScript
• iPhone hỗ trợ cả hai sự kiện này, nhưng các lập trìnhviên thường chỉ xử lý sự kiện onorientationchange đểphát hiện sự thay đổi hướng màn hình.
• Android và những trình duyệt dẫn xuất từ WebKit kháclại chỉ hỗ trợ sự kiện onresize.
• BlackBerry hỗ trợ sự kiện onresize của đối tượngdocument;
Phát hiện sự thay đổi hướng màn hình bằngJavascript:
• Trình duyệt điện thoại thông minh phát hiện thông quasự kiện onresize hoặc onorientationchange của đốitượng window trong JavaScript
• iPhone hỗ trợ cả hai sự kiện này, nhưng các lập trìnhviên thường chỉ xử lý sự kiện onorientationchange đểphát hiện sự thay đổi hướng màn hình.
• Android và những trình duyệt dẫn xuất từ WebKit kháclại chỉ hỗ trợ sự kiện onresize.
• BlackBerry hỗ trợ sự kiện onresize của đối tượngdocument;
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 17
CẢI TIẾN CHO WEB DI ĐỘNG
• Lập trình viên iPhone có thể sử dụng thuộc tínhwindow.orientation được tích hợp sẵn trong JavaScript
switch (window.orientation) {case -90:
// Hướng ngang quay theo chiều kim đồng hồbreak;
case 0:// Hướng dọcbreak;
case 90:// Hướng ngang quay ngược chiều kim đồng hồbreak;
}
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 18
switch (window.orientation) {case -90:
// Hướng ngang quay theo chiều kim đồng hồbreak;
case 0:// Hướng dọcbreak;
case 90:// Hướng ngang quay ngược chiều kim đồng hồbreak;
}
CẢI TIẾN CHO WEB DI ĐỘNG
• Có thể sử dụng các thuộc tính screen.width vàscreen.height tích hợp sẵn trong JavaScript và thựchiện các phép tính toán đơn giản để xác định hướngmàn hình của thiết bị
var width = parseInt(screen.width);var height = parseInt(screen.height);if (width > height) {
// Hướng ngang}else {
// Hướng dọc}
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 19
var width = parseInt(screen.width);var height = parseInt(screen.height);if (width > height) {
// Hướng ngang}else {
// Hướng dọc}
CẢI TIẾN CHO WEB DI ĐỘNG
WebKit trong trình duyệt trên di động:WebKit là bộ engine để render và tạo bố cục cho trìnhduyệt webWebKit cung cấp sự tương thích chuẩn web một cáchnghiêm ngặt mà không ảnh hưởng đến hiệu năng củaviệc hiển thị trang webWebKit ban đầu được viết bằng C++ sau đó đượcchuyển thể sang một số framework phát triển trongmôi trường tính toán trên máy tính và trên thiết bị diđộng
WebKit trong trình duyệt trên di động:WebKit là bộ engine để render và tạo bố cục cho trìnhduyệt webWebKit cung cấp sự tương thích chuẩn web một cáchnghiêm ngặt mà không ảnh hưởng đến hiệu năng củaviệc hiển thị trang webWebKit ban đầu được viết bằng C++ sau đó đượcchuyển thể sang một số framework phát triển trongmôi trường tính toán trên máy tính và trên thiết bị diđộng
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 20
CẢI TIẾN CHO WEB DI ĐỘNG
Bộ engine WebKit gồm hai thư viện chính là Webcorevà JavaScript Core, hỗ trợ những chuẩn web sau:
• Mã đánh dấu: HTML 4.01, XHTML 1.0, một phần củaHTML 5
• Định dạng: CSS 2.1 và một phần của CSS3• Mã kịch bản: JavaScript 1.8, AJAX và các DOM mức 1,
2, 3
Bộ engine WebKit gồm hai thư viện chính là Webcorevà JavaScript Core, hỗ trợ những chuẩn web sau:
• Mã đánh dấu: HTML 4.01, XHTML 1.0, một phần củaHTML 5
• Định dạng: CSS 2.1 và một phần của CSS3• Mã kịch bản: JavaScript 1.8, AJAX và các DOM mức 1,
2, 3
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 21
CẢI TIẾN CHO WEB DI ĐỘNG
WebKit giới thiệu một vài tính năng CSS mở rộngcung cấp các hiệu ứng hình ảnh cao cấp trong trìnhduyệt
Tên thuộc tính Giá trị thuộc tính Mô tả
-webkit-border-radius giá trị số nguyên thểhiện số pixel
Thiết lập bán kính bo tròncho góc của box
WebKit giới thiệu một vài tính năng CSS mở rộngcung cấp các hiệu ứng hình ảnh cao cấp trong trìnhduyệt
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 22
giá trị số nguyên thểhiện số pixel
Thiết lập bán kính bo tròncho góc của box
-webkit-box-shadow Độ rộng bóng (shadow)thể hiện bằng số pixelvà một giá trị màu sắc
Xác định bóng đổ chohình ảnh
CẢI TIẾN CHO WEB DI ĐỘNG<head><meta name="viewport" content="width=device-width,user-scalable=no" /><title>Ví dụ 7–3: Mở rộng CSS trong WebKit </title><style type="text/css">#content { width: 89px; height: 89px; padding: 10px; margin: 10px;border: 2px solid #333; -webkit-border-radius: 5px; -webkit-transform:rotate(15deg);}#tulips { width: 79px; height: 79px; margin: 5px; }</style></head><body><h1> Mở rộng CSS trong WebKit </h1><div id="content"><img id="tulips" src="tulips.JavaScriptpg" /></div></body></html>
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 23
<head><meta name="viewport" content="width=device-width,user-scalable=no" /><title>Ví dụ 7–3: Mở rộng CSS trong WebKit </title><style type="text/css">#content { width: 89px; height: 89px; padding: 10px; margin: 10px;border: 2px solid #333; -webkit-border-radius: 5px; -webkit-transform:rotate(15deg);}#tulips { width: 79px; height: 79px; margin: 5px; }</style></head><body><h1> Mở rộng CSS trong WebKit </h1><div id="content"><img id="tulips" src="tulips.JavaScriptpg" /></div></body></html>
CẢI TIẾN CHO WEB DI ĐỘNG
Một số trình duyệt trên thiết bị di động:Trình duyệt Safari Mobile cho iPhone:• Trình duyệt Safari Mobile là trình duyệt web mặc định
được cài đặt trên điện thoại iPhone• Thực tế, trình duyệt Safari Mobile tuy không hỗ trợ
WML - ngôn ngữ đánh dấu mang tính kế thừa của webcho di động - nhưng trình duyệt này lại hiển thị rất tốtnội dung web cho di động hiện có
• Safari Mobile sử dụng công cụ WebKit tương tự vớitrình duyệt web cho máy tính Safari của Apple
Một số trình duyệt trên thiết bị di động:Trình duyệt Safari Mobile cho iPhone:• Trình duyệt Safari Mobile là trình duyệt web mặc định
được cài đặt trên điện thoại iPhone• Thực tế, trình duyệt Safari Mobile tuy không hỗ trợ
WML - ngôn ngữ đánh dấu mang tính kế thừa của webcho di động - nhưng trình duyệt này lại hiển thị rất tốtnội dung web cho di động hiện có
• Safari Mobile sử dụng công cụ WebKit tương tự vớitrình duyệt web cho máy tính Safari của Apple
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 24
CẢI TIẾN CHO WEB DI ĐỘNG
Trình duyệt cho thiết bị di động Android:• Trình duyệt trên thiết bị di động Android sử dụng bộ
engine WebKit phiên bản của Apple• Việc thực thi WebKit trên điện thoại thông minh
Android gồm hỗ trợ chuẩn web đầy đủ và hỗ trợ chomột số thành phần HTML 5 (bao gồm cả cơ sở dữ liệucục bộ để cho phép duyệt web offline)
Trình duyệt webOS cho Palm Pre:• Trình duyệt webOS trong điện thoại thông minh Palm
Pre (và Pixi) sử dụng bộ engine WebKit• Trình duyệt webOS cũng hỗ trợ một vài tính năng
HTML5 bao gồm một phần chức năng của elementcavas và cơ sở dữ liệu cục bộ, là công nghệ cho phépduyệt web offline trên các ứng dụng web cho di động
Trình duyệt cho thiết bị di động Android:• Trình duyệt trên thiết bị di động Android sử dụng bộ
engine WebKit phiên bản của Apple• Việc thực thi WebKit trên điện thoại thông minh
Android gồm hỗ trợ chuẩn web đầy đủ và hỗ trợ chomột số thành phần HTML 5 (bao gồm cả cơ sở dữ liệucục bộ để cho phép duyệt web offline)
Trình duyệt webOS cho Palm Pre:• Trình duyệt webOS trong điện thoại thông minh Palm
Pre (và Pixi) sử dụng bộ engine WebKit• Trình duyệt webOS cũng hỗ trợ một vài tính năng
HTML5 bao gồm một phần chức năng của elementcavas và cơ sở dữ liệu cục bộ, là công nghệ cho phépduyệt web offline trên các ứng dụng web cho di động
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 25
CẢI TIẾN CHO WEB DI ĐỘNG
Trình duyệt BlackBerry:• Trình duyệt BlackBerry được tích hợp trong mọi điện
thoại thông minh BlackBerry• Ban đầu trình duyệt này chỉ hỗ trợ chuẩn web cho di
động (XHTML-MP, WML và Wireless CSS)Trình duyệt Nokia Web cho điện thoại thông minh sê-ri 60:
• Điện thoại thông minh phiên bản thứ ba và thứ nămcủa Nokia sê-ri 60 cài đặt trình duyệt Nokia Web có sửdụng bộ engine WebKit được chuyển thể cho nền tảngSymbian sê-ri 60
Trình duyệt BlackBerry:• Trình duyệt BlackBerry được tích hợp trong mọi điện
thoại thông minh BlackBerry• Ban đầu trình duyệt này chỉ hỗ trợ chuẩn web cho di
động (XHTML-MP, WML và Wireless CSS)Trình duyệt Nokia Web cho điện thoại thông minh sê-ri 60:
• Điện thoại thông minh phiên bản thứ ba và thứ nămcủa Nokia sê-ri 60 cài đặt trình duyệt Nokia Web có sửdụng bộ engine WebKit được chuyển thể cho nền tảngSymbian sê-ri 60
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 26
CẢI TIẾN CHO WEB DI ĐỘNG
Trình duyệt IE Mobile cho Windows Mobile:• Trình duyệt Internet Explorer Mobile (IE Mobile) là trình
duyệt được cài đặt mặc định trên tất cả các thiết bịWindows Mobile
• Internet Explorer 6 (thường đi kèm trong WindowsMobile 6) hỗ trợ những chuẩn web sau:
– Mã đánh dấu: HTML 4.01, XHTML 1.0 và 1.1, XHTML MP,XHTML Basic và WML.
– Định dạng: CSS 2.1, CSS Mobile Profile 1.0 và WirelessCSS 1.1.
– Mã kịch bản: Script 5.6 (tương thích với ECMAScript 3);DOM cấp 1 và một phần của DOM cấp 2 và DOM cấp 3;AJAX.
– Các chuẩn khác: Google Gears (IE Mobile 4.01 và cácphiên bản sau đó)
Trình duyệt IE Mobile cho Windows Mobile:• Trình duyệt Internet Explorer Mobile (IE Mobile) là trình
duyệt được cài đặt mặc định trên tất cả các thiết bịWindows Mobile
• Internet Explorer 6 (thường đi kèm trong WindowsMobile 6) hỗ trợ những chuẩn web sau:
– Mã đánh dấu: HTML 4.01, XHTML 1.0 và 1.1, XHTML MP,XHTML Basic và WML.
– Định dạng: CSS 2.1, CSS Mobile Profile 1.0 và WirelessCSS 1.1.
– Mã kịch bản: Script 5.6 (tương thích với ECMAScript 3);DOM cấp 1 và một phần của DOM cấp 2 và DOM cấp 3;AJAX.
– Các chuẩn khác: Google Gears (IE Mobile 4.01 và cácphiên bản sau đó)
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 27
CẢI TIẾN CHO WEB DI ĐỘNG
Các trình duyệt Opera Mini và Opera Mobile:• Opera Mini là ứng dụng trình duyệt gọn nhẹ phía máy
khách được viết trên nền tảng Java phiên bản Micro(Java ME hay J2ME) được triển khai cho điện thoạithông thường sản xuất hàng loạt trên thị trường
• Trình duyệt Opera Mini là một phần của giải pháp client– server cho phép thiết bị di động thông thường có thểduyệt bất kỳ website cho máy tính hay cho di động nào(ngay cả khi website sử dụng tính năng nâng cao dànhcho máy tính khiến trình duyệt được tích hợp sẵn củathiết bị không thể duyệt website đó được)
Các trình duyệt Opera Mini và Opera Mobile:• Opera Mini là ứng dụng trình duyệt gọn nhẹ phía máy
khách được viết trên nền tảng Java phiên bản Micro(Java ME hay J2ME) được triển khai cho điện thoạithông thường sản xuất hàng loạt trên thị trường
• Trình duyệt Opera Mini là một phần của giải pháp client– server cho phép thiết bị di động thông thường có thểduyệt bất kỳ website cho máy tính hay cho di động nào(ngay cả khi website sử dụng tính năng nâng cao dànhcho máy tính khiến trình duyệt được tích hợp sẵn củathiết bị không thể duyệt website đó được)
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 28
CẢI TIẾN CHO WEB DI ĐỘNG
• Trình duyệt Opera Mobile hỗ trợ chuẩn web đầy đủgồm:
– Mã đánh dấu: XHTML 1.0, HTML 4.01 và một phần củaHTML 5, WML 1.3 và WML 2.0.
– Định dạng: CSS 2 và CSS 3– Mã kịch bản: JavaScript, DOM cấp 2 và AJAX.– Các chuẩn khác: Google Gears (Opera Mobile 9.5 và các
phiên bản về sau)
• Trình duyệt Opera Mobile hỗ trợ chuẩn web đầy đủgồm:
– Mã đánh dấu: XHTML 1.0, HTML 4.01 và một phần củaHTML 5, WML 1.3 và WML 2.0.
– Định dạng: CSS 2 và CSS 3– Mã kịch bản: JavaScript, DOM cấp 2 và AJAX.– Các chuẩn khác: Google Gears (Opera Mobile 9.5 và các
phiên bản về sau)
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 29
CẢI TIẾN CHO WEB DI ĐỘNG
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 30
TỔNG KẾT
Sử dụng PhoneGap để thực hiện chuyển đổiwebpage thành dạng ứng dụng cho thiết bị di độngTrước khi thực hiện chuyển đổi, phải cài đặt SDK vàkết nối với DreamweaverĐối với việc chuyển đổi thành ứng dụng cho thiết bịdi động Apple, cần phải thực hiện trên máy MAC
Sử dụng PhoneGap để thực hiện chuyển đổiwebpage thành dạng ứng dụng cho thiết bị di độngTrước khi thực hiện chuyển đổi, phải cài đặt SDK vàkết nối với DreamweaverĐối với việc chuyển đổi thành ứng dụng cho thiết bịdi động Apple, cần phải thực hiện trên máy MAC
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 31