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

1. BÀI 5
TẠO APP CHO THIẾT BỊ DI ĐỘNG & MỘT SỐ CẢI
TIẾN CHO WEB DI ĐỘNG

2. NHẮC LẠI BÀI TRƯỚC
Khởi tạo trang mới với Jquery mobile
Chèn các thành phần:
Layout grid
Collapsible block
Sử dụng các thành phần form: input với Jquery
mobile:
Jump menu
Input form
Các thành phần đặc biệt khác
Khởi tạo trang mới với Jquery mobile
Chèn các thành phần:
Layout grid
Collapsible block
Sử dụng các thành phần form: input với Jquery
mobile:
Jump menu
Input form
Cá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

3. MỤC TIÊU BÀI HỌC
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
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 3

4. TẠO APP (ỨNG DỤNG) VỚI DREAMWEAVER

5. 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ạng
app (ứng dụng):
• App (ứng dụng) chạy trên thiết bị di động ngay cả khi
thiế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ực
tuyế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ạng
app (ứng dụng):
• App (ứng dụng) chạy trên thiết bị di động ngay cả khi
thiế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ực
tuyế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

6. 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ác
phiê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ác
phiê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

7. CẤU HÌNH, TÙY CHỈNH APP

8. CẤU HÌNH, TÙY CHỈNH APP
Yêu cầu trước khi sử dụng PhoneGap để chuyển đổi
app:
Download SDK (Apple SDK, Android SDK)
Kết nối SDK với Dreamweaver:
• Site | Mobile Applications | Configure Application
Framework.
• Hộp thoại Configure Application Framework xuất hiện
nhấn nút Easy Install
Yêu cầu trước khi sử dụng PhoneGap để chuyển đổi
app:
Download SDK (Apple SDK, Android SDK)
Kết nối SDK với Dreamweaver:
• Site | Mobile Applications | Configure Application
Framework.
• Hộp thoại Configure Application Framework xuất hiện
nhấ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ên
máy MAC, với Apple SDK

9. 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

10. 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 iOS
Trường Application Name: tên ứng dụng
Target Path: sử dụng biểu tượng Browse để điều
hướ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

11. XÂY DỰNG ỨNG DỤNG

12. XÂY DỰNG ỨNG DỤNG
Khi cài đặt SDK cho Android/ iOS, chương trình
emulation sẽ được tự động cài đặt
Hoặ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

13. 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ất
hiện
Cử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

14. CẢI TIẾN CHO WEB DI ĐỘNG

15. CẢI TIẾN CHO WEB DI ĐỘNG
Kỹ thuật web thông dụng cho trình duyệt trên điện
thoạ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ất
cho tài liệu web cho di động
• Giá trị content của thẻ <meta>Viewport là một danh sách
các chỉ thị và giá trị được phân cách với nhau bởi dấu
phẩy
Kỹ thuật web thông dụng cho trình duyệt trên điện
thoạ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ất
cho tài liệu web cho di động
• Giá trị content của thẻ <meta>Viewport là một danh sách
các chỉ thị và giá trị được phân cách với nhau bởi dấu
phẩ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" />

16. CẢI TIẾN CHO WEB DI ĐỘNG
• width và height lần lượt xác định chiều rộng và chiều
dà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óng
to/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óng
ban đầu được sử dụng cho trang web
• maximum-scale và minimum-scale thiết lập giới hạn
dà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ều
dà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óng
to/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óng
ban đầu được sử dụng cho trang web
• maximum-scale và minimum-scale thiết lập giới hạn
dà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

17. CẢI TIẾN CHO WEB DI ĐỘNG
Phát hiện sự thay đổi hướng màn hình bằng
Javascript:
• Trình duyệt điện thoại thông minh phát hiện thông qua
sự kiện onresize hoặc onorientationchange của đối
tượng window trong JavaScript
• iPhone hỗ trợ cả hai sự kiện này, nhưng các lập trình
viê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ác
lại chỉ hỗ trợ sự kiện onresize.
• BlackBerry hỗ trợ sự kiện onresize của đối tượng
document;
Phát hiện sự thay đổi hướng màn hình bằng
Javascript:
• Trình duyệt điện thoại thông minh phát hiện thông qua
sự kiện onresize hoặc onorientationchange của đối
tượng window trong JavaScript
• iPhone hỗ trợ cả hai sự kiện này, nhưng các lập trình
viê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ác
lại chỉ hỗ trợ sự kiện onresize.
• BlackBerry hỗ trợ sự kiện onresize của đối tượng
document;
Slide 5 - Tạo App cho thiết bị di động & Một số cải tiến cho web di động 17

18. CẢI TIẾN CHO WEB DI ĐỘNG
• Lập trình viên iPhone có thể sử dụng thuộc tính
window.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ọc
break;
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ọc
break;
case 90:
// Hướng ngang quay ngược chiều kim đồng hồ
break;
}

19. 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ực
hiện các phép tính toán đơn giản để xác định hướng
mà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
}

20. 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ình
duyệt web
WebKit cung cấp sự tương thích chuẩn web một cách
nghiêm ngặt mà không ảnh hưởng đến hiệu năng của
việc hiển thị trang web
WebKit ban đầu được viết bằng C++ sau đó được
chuyển thể sang một số framework phát triển trong
mô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ình
duyệt web
WebKit cung cấp sự tương thích chuẩn web một cách
nghiêm ngặt mà không ảnh hưởng đến hiệu năng của
việc hiển thị trang web
WebKit ban đầu được viết bằng C++ sau đó được
chuyển thể sang một số framework phát triển trong
mô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

21. CẢI TIẾN CHO WEB DI ĐỘNG
Bộ engine WebKit gồm hai thư viện chính là Webcore
và 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ủa
HTML 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à Webcore
và 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ủa
HTML 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

22. CẢI TIẾN CHO WEB DI ĐỘNG
WebKit giới thiệu một vài tính năng CSS mở rộng
cung cấp các hiệu ứng hình ảnh cao cấp trong trình
duyệ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òn
cho góc của box
WebKit giới thiệu một vài tính năng CSS mở rộng
cung cấp các hiệu ứng hình ảnh cao cấp trong trình
duyệ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òn
cho góc của box
-webkit-box-shadow Độ rộng bóng (shadow)
thể hiện bằng số pixel
và một giá trị màu sắc
Xác định bóng đổ cho
hình ảnh

23. 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>

24. 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 web
cho di động - nhưng trình duyệt này lại hiển thị rất tốt
nội dung web cho di động hiện có
• Safari Mobile sử dụng công cụ WebKit tương tự với
trì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 web
cho di động - nhưng trình duyệt này lại hiển thị rất tốt
nội dung web cho di động hiện có
• Safari Mobile sử dụng công cụ WebKit tương tự với
trì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

25. 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ợ cho
một số thành phần HTML 5 (bao gồm cả cơ sở dữ liệu
cụ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 element
cavas và cơ sở dữ liệu cục bộ, là công nghệ cho phép
duyệ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ợ cho
một số thành phần HTML 5 (bao gồm cả cơ sở dữ liệu
cụ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 element
cavas và cơ sở dữ liệu cục bộ, là công nghệ cho phép
duyệ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

26. 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ăm
củ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ảng
Symbian 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ăm
củ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ảng
Symbian 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

27. 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 Windows
Mobile 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à Wireless
CSS 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ác
phiê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 Windows
Mobile 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à Wireless
CSS 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ác
phiê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

28. 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ại
thô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ành
cho máy tính khiến trình duyệt được tích hợp sẵn của
thiế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ại
thô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ành
cho máy tính khiến trình duyệt được tích hợp sẵn của
thiế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

29. 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ủa
HTML 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ủa
HTML 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

30. 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

31. TỔNG KẾT
Sử dụng PhoneGap để thực hiện chuyển đổi
webpage thành dạng ứng dụng cho thiết bị di động
Trướ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 đổi
webpage thành dạng ứng dụng cho thiết bị di động
Trướ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