bài 1 tổng quan về phát triển web mobile

BÀI 1
TỔNG QUAN VỀ PHÁT TRIỂN WEB MOBILE
MỤC TIÊU BÀI HỌC
Những kiến thức cơ bản về thiết kế web cho thiết bị
di động:
Giới thiệu về thiết kế web dành cho thiết bị di động
Sự khác biệt giữa web dành cho thiết bị di động và web
chạy trên máy tính thông thường
Ngôn ngữ đánh dấu dành cho thiết bị di động
Style sheet cho web di động
Ngôn ngữ script cho web mobile
Thiết lập môi trường phát triển web cho thiết bị di
động:
IDE để phát triển
Cấu hình máy chủ web theo kiểu MIME
Các công cụ phát triển khác
Những kiến thức cơ bản về thiết kế web cho thiết bị
di động:
Giới thiệu về thiết kế web dành cho thiết bị di động
Sự khác biệt giữa web dành cho thiết bị di động và web
chạy trên máy tính thông thường
Ngôn ngữ đánh dấu dành cho thiết bị di động
Style sheet cho web di động
Ngôn ngữ script cho web mobile
Thiết lập môi trường phát triển web cho thiết bị di
động:
IDE để phát triển
Cấu hình máy chủ web theo kiểu MIME
Các công cụ phát triển khác
Slide 1 - Tổng quan về phát triển web mobile 2
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG

THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Yếu tố dẫn đến sự phát triển của mobile web:
Phát triển web cho di động theo cách tiếp cận "lấy
tiêu chuẩn làm nền tảng phát triển" sẽ đảm bảo:
Sự tương thích trên thiết bị
Khả dụng trên nhiều nền tảng và trình duyệt di động
Thuộc tính
đặc trưng
Hệ sinh
thái di
động
Người
dùng
Sự phát
triển của
mobile
web
Yếu tố dẫn đến sự phát triển của mobile web:
Phát triển web cho di động theo cách tiếp cận "lấy
tiêu chuẩn làm nền tảng phát triển" sẽ đảm bảo:
Sự tương thích trên thiết bị
Khả dụng trên nhiều nền tảng và trình duyệt di động
Slide 1 - Tổng quan về phát triển web mobile 4
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Cơ chế hoạt động của web:
Giao thức HTTP (Hypertext Transfer Protocol): giao
thức để chia sẻ tài liệu, file
URI (Uniform Resource Identifiers): phương thức truy
cập cho các file văn bản, tài liệu đánh dấu và các tài
nguyên nhị phân khác

Cơ chế hoạt động của web:
Giao thức HTTP (Hypertext Transfer Protocol): giao
thức để chia sẻ tài liệu, file
URI (Uniform Resource Identifiers): phương thức truy
cập cho các file văn bản, tài liệu đánh dấu và các tài
nguyên nhị phân khác
Slide 1 - Tổng quan về phát triển web mobile 5
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Yêu cầu HTTP (HTTP request):
• Máy khách gửi URI của tài nguyên mong muốn và một
tập hợp các header tới máy chủ web
• Header là một phần của gói tin chuyển qua lại giữa
máy khách và máy chủ, chứa thông tin điều khiển
• Header có thể chứa danh sách kiểu MIME cho biết kiểu
định dạng nội dung hỗ trợ trên máy khách
Hồi đáp HTTP (HTTP response):
• Máy chủ web sẽ gửi cho máy khách các tài liệu (đánh
dấu, văn bản, mã nhị phân)
• Tập hợp header khác, một trong số đó có chứa MIME
mô tả kiểu file tài liệu truyền cho máy khách
Yêu cầu HTTP (HTTP request):
• Máy khách gửi URI của tài nguyên mong muốn và một
tập hợp các header tới máy chủ web
• Header là một phần của gói tin chuyển qua lại giữa
máy khách và máy chủ, chứa thông tin điều khiển
• Header có thể chứa danh sách kiểu MIME cho biết kiểu
định dạng nội dung hỗ trợ trên máy khách
Hồi đáp HTTP (HTTP response):
• Máy chủ web sẽ gửi cho máy khách các tài liệu (đánh
dấu, văn bản, mã nhị phân)

• Tập hợp header khác, một trong số đó có chứa MIME
mô tả kiểu file tài liệu truyền cho máy khách
Slide 1 - Tổng quan về phát triển web mobile 6
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Web dành cho thiết bị di động là gì?
Về cơ bản là những trang web thông thường
Sử dụng những nền tảng của web thông thường và
bổ sung thêm các kiểu MIME
Kiểu MIME phân biệt ngôn ngữ đánh dấu di động với
HTML trên máy tính
Ngôn ngữ đánh dấu và định dạng được tối ưu hóa
riêng cho thiết bị di động
Web dành cho thiết bị di động là gì?
Về cơ bản là những trang web thông thường
Sử dụng những nền tảng của web thông thường và
bổ sung thêm các kiểu MIME
Kiểu MIME phân biệt ngôn ngữ đánh dấu di động với
HTML trên máy tính
Ngôn ngữ đánh dấu và định dạng được tối ưu hóa
riêng cho thiết bị di động
Slide 1 - Tổng quan về phát triển web mobile 7
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Sử dụng nền tảng của web thông thường
Nội dung của một trang web bao
gồm mã đánh dấu, định dạng, kịch
bản và các nội dung đa phương
tiện hiển thị nhờ các trình duyệt
web
Slide 1 - Tổng quan về phát triển web mobile 8
Nội dung của một trang web bao

gồm mã đánh dấu, định dạng, kịch
bản và các nội dung đa phương
tiện hiển thị nhờ các trình duyệt
web
Chứa kiểu MIME phân biệt ngôn ngữ
đánh dấu di động
Hiển thị trên Firefox, Opera hoặc
Internet Explorer sử dụng máy
tính để bàn, máy tính xách tay và
Netbook
Kích cỡ màn hình hiển thị nhỏ
Kích cỡ màn hình: 800x600 trở lên
Số trình duyệt: 12+
Số trình duyệt: đa dạng
Lỗi trình duyệt: xuất hiện nhiều
Lỗi trình duyệt: ít, được vá lỗi
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Tiêu chuẩn W3C: ít tiêu chuẩn được công
bố
Tiêu chuẩn W3C: áp dụng rộng rãi
Ngôn ngữ đánh dấu:
- WML
- CHTML
- XHTML Basic
- XHTML-MP
- XHTML
-HTML
Ngôn ngữ đánh dấu:
- XHTML, HTML
Slide 1 - Tổng quan về phát triển web mobile 9

Ngôn ngữ đánh dấu:
- WML
- CHTML
- XHTML Basic
- XHTML-MP
- XHTML
-HTML
Ngôn ngữ đánh dấu:
- XHTML, HTML
JavaScript và AJAX: Không có trên 90%
thiết bị di động
JavaScript và AJAX: Sẵn có
Địa chỉ của máy khách: 3 tỷ người dùng
di động
Địa chỉ máy khách: 1 tỷ máy tính
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Ngôn ngữ đánh dấu cho thiết bị di động:
XHTML và HTML
XHTML-MP (XHTML Mobile Profile - hồ sơ di động
XHTML)
CHTML (iMode)
WML (Wireless Markup Language - ngôn ngữ đánh
dấu không dây)
Ngôn ngữ đánh dấu cho thiết bị di động:
XHTML và HTML
XHTML-MP (XHTML Mobile Profile - hồ sơ di động
XHTML)
CHTML (iMode)
WML (Wireless Markup Language - ngôn ngữ đánh
dấu không dây)

Slide 1 - Tổng quan về phát triển web mobile 10
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
HTML:
• Là ngôn ngữ đánh dấu web chuẩn
• Nhiều trình duyệt di động hỗ trợ đầy đủ các tập thẻ của
HTML
• Độ phân giải màn hình, dung lượng lưu trữ và giới hạn
băng thông của thiết bị di động đòi hỏi phải tối ưu hóa
trong việc hiển thị
XHTML:
• Là sự kết hợp giữa tập hợp thẻ của HTML với việc tuân
thủ cú pháp nghiêm ngặt của XML
• Trình duyệt của các thiết bị di động thông minh như
điện thoại Android, iPhone, Nokia Series 60, Windows
Mobile và BlackBerry đều hỗ trợ XHTML, HTML,
JavaScript và AJAX
HTML:
• Là ngôn ngữ đánh dấu web chuẩn
• Nhiều trình duyệt di động hỗ trợ đầy đủ các tập thẻ của
HTML
• Độ phân giải màn hình, dung lượng lưu trữ và giới hạn
băng thông của thiết bị di động đòi hỏi phải tối ưu hóa
trong việc hiển thị
XHTML:
• Là sự kết hợp giữa tập hợp thẻ của HTML với việc tuân
thủ cú pháp nghiêm ngặt của XML
• Trình duyệt của các thiết bị di động thông minh như
điện thoại Android, iPhone, Nokia Series 60, Windows
Mobile và BlackBerry đều hỗ trợ XHTML, HTML,
JavaScript và AJAX

Slide 1 - Tổng quan về phát triển web mobile 11
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
XHTML-MP (XHTML Mobile Profile):
• Là chuẩn đánh dấu không chính thức cho web di động
• Là tập con của XHTML, bao gồm:
– XHTML-MP 1.0 thiết lập các thẻ cơ bản cho mã đánh dấu
thiết bị di động.
– XHTML-MP 1.1 thêm thẻ <script> và hỗ trợ JavaScript
cho thiết bị di động
– XHTML-MP 1.2 thêm nhiều thẻ định dạng và kiểu nhập
dữ liệu
XHTML-MP (XHTML Mobile Profile):
• Là chuẩn đánh dấu không chính thức cho web di động
• Là tập con của XHTML, bao gồm:
– XHTML-MP 1.0 thiết lập các thẻ cơ bản cho mã đánh dấu
thiết bị di động.
– XHTML-MP 1.1 thêm thẻ <script> và hỗ trợ JavaScript
cho thiết bị di động
– XHTML-MP 1.2 thêm nhiều thẻ định dạng và kiểu nhập
dữ liệu
Slide 1 - Tổng quan về phát triển web mobile 12
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
WML (Wireless Markup Language – WML):
• Ngôn ngữ đánh dấu không dây - Là ngôn ngữ đánh
dấu cũ và đơn giản hơn dành cho những thiết bị di
động hiệu năng thấp
• Là ứng dụng của XML sử dụng hai khái niệm ‘deck’ và
‘card’
HDML:
• Handheld Device Markup Language - ngôn ngữ đánh

dấu cho thiết bị cầm tay - là tiền thân của WML
CHTML :
• Compact HTML – là tập con của HTML, chỉ phát triển ở thị
trường Nhật Bản
• Không hỗ trợ các tính năng: JPEG, table, bản đồ dạng ảnh,
màu nền, ….
WML (Wireless Markup Language – WML):
• Ngôn ngữ đánh dấu không dây - Là ngôn ngữ đánh
dấu cũ và đơn giản hơn dành cho những thiết bị di
động hiệu năng thấp
• Là ứng dụng của XML sử dụng hai khái niệm ‘deck’ và
‘card’
HDML:
• Handheld Device Markup Language - ngôn ngữ đánh
dấu cho thiết bị cầm tay - là tiền thân của WML
CHTML :
• Compact HTML – là tập con của HTML, chỉ phát triển ở thị
trường Nhật Bản
• Không hỗ trợ các tính năng: JPEG, table, bản đồ dạng ảnh,
màu nền, ….
Slide 1 - Tổng quan về phát triển web mobile 13
THIẾT KẾ WEB CHO THIẾT BỊ DI ĐỘNG
Style sheet cho web di động:
Trình duyệt di động tốt nhất hỗ trợ CSS2, định dạng
chuẩn sử dụng với XHTML và HTML trên trình duyệt
của máy tính
Trình duyệt di động hỗ trợ XHTML-MP sử dụng CSS
không dây (Wireless CSS) và/hoặc CSS Mobile Profile
Style sheet cho web di động:
Trình duyệt di động tốt nhất hỗ trợ CSS2, định dạng

chuẩn sử dụng với XHTML và HTML trên trình duyệt
của máy tính
Trình duyệt di động hỗ trợ XHTML-MP sử dụng CSS
không dây (Wireless CSS) và/hoặc CSS Mobile Profile
Slide 1 - Tổng quan về phát triển web mobile 14
MÔI TRƯỜNG PHÁT TRIỂN WEB CHO DI
ĐỘNG
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Để phát triển web di động, cần thiết phải có:
Môi trường phát triển tích hợp – IDE
Máy chủ web & trình duyệt web
Để xem thử và kiểm tra web di động, có thể sử
dụng:
Firefox – cài đặt thêm mobile add-on
Các trình duyệt mô phỏng trình duyệt di động
Trình duyệt di động trên thiết bị di động thật
Để phát triển web di động, cần thiết phải có:
Môi trường phát triển tích hợp – IDE
Máy chủ web & trình duyệt web
Để xem thử và kiểm tra web di động, có thể sử
dụng:
Firefox – cài đặt thêm mobile add-on
Các trình duyệt mô phỏng trình duyệt di động
Trình duyệt di động trên thiết bị di động thật
Slide 1 - Tổng quan về phát triển web mobile 16
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Môi trường phát triển tích hợp – IDE:
Là bộ công cụ dành cho lập trình viên cho phép thiết
kế, lập trình, thực thi và gỡ lỗi ứng dụng web (hay
bất kỳ dạng phần mềm nào khác)

Không yêu cầu IDE cụ thể, có thể sử dụng:
• Adobe Dreamweaver CS5/ CS6
• Eclipse
• Microsoft Visual Studio
• Komodo
• NetBeans
• Zend Studio
• ….
Môi trường phát triển tích hợp – IDE:
Là bộ công cụ dành cho lập trình viên cho phép thiết
kế, lập trình, thực thi và gỡ lỗi ứng dụng web (hay
bất kỳ dạng phần mềm nào khác)
Không yêu cầu IDE cụ thể, có thể sử dụng:
• Adobe Dreamweaver CS5/ CS6
• Eclipse
• Microsoft Visual Studio
• Komodo
• NetBeans
• Zend Studio
• ….
Slide 1 - Tổng quan về phát triển web mobile 17
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Kiểu MIME cho di động:
Kiểu MIME di động (hay kiểu nội dung) xác định định
dạng cho nội dung web di động
Máy chủ web và trình duyệt trên máy khách sử dụng
các kiểu MIME để phân biệt tài liệu văn bản…
Trong giao dịch HTTP giữa trình duyệt và máy chủ,
kiểu MIME được sử dụng theo nhiều cách khác nhau
thông qua bộ chuyển mã hoặc proxy trung gian

Kiểu MIME cho di động:
Kiểu MIME di động (hay kiểu nội dung) xác định định
dạng cho nội dung web di động
Máy chủ web và trình duyệt trên máy khách sử dụng
các kiểu MIME để phân biệt tài liệu văn bản…
Trong giao dịch HTTP giữa trình duyệt và máy chủ,
kiểu MIME được sử dụng theo nhiều cách khác nhau
thông qua bộ chuyển mã hoặc proxy trung gian
Slide 1 - Tổng quan về phát triển web mobile 18
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
• Bộ chuyển mã và gateway:
– Thường gặp vấn đề chuyển đổi máy chủ proxy HTTP
giữa thiết bị và máy chủ web
– Máy chủ proxy kiểm tra trường Accept và Content-Type
trong header để xác định cách xử lý nội dung gốc sao
cho phù hợp với từng loại thiết bị
• Ngôn ngữ thực thi phía máy chủ:
– Có thể thay đổi kiểu MIME liên kết với một tài liệu sử
dụng ngôn ngữ thực thi phía máy chủ
• Ví dụ:
• Bộ chuyển mã và gateway:
– Thường gặp vấn đề chuyển đổi máy chủ proxy HTTP
giữa thiết bị và máy chủ web
– Máy chủ proxy kiểm tra trường Accept và Content-Type
trong header để xác định cách xử lý nội dung gốc sao
cho phù hợp với từng loại thiết bị
• Ngôn ngữ thực thi phía máy chủ:
– Có thể thay đổi kiểu MIME liên kết với một tài liệu sử
dụng ngôn ngữ thực thi phía máy chủ
• Ví dụ:

Slide 1 - Tổng quan về phát triển web mobile 19
<?php
header('Content-Type: application/vnd.wap.xhtml+xml');
?>
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Một vài kiểu MIME cho di động:
Kiểu MIME
Phần mở rộng file
Nội dung
Nơi dùng
application/vnd.w
ap.xhtml+xml
application/xhtml
+xml
xhtml
XHTML-MP
Các trang web di
động
text/html
html (hay htm trên
Windows servers)
HTML
Các trang web di
động
Slide 1 - Tổng quan về phát triển web mobile 20
text/html
html (hay htm trên
Windows servers)
HTML
Các trang web di

động
text/css
css
CSS1, CSS2, và
Wireless CSS
CSS dành cho các
nội dung trên web
di động
application/javascr
ipt text/javascript
js
Java Script
Ngôn ngữ kịch
bản sử dụng cùng
với HTML và
XHTML-MP 1.1 và
1.2
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Cấu hình máy chủ web:
Máy chủ Apache:
• Sử dụng chỉ thị AddType trong cấu hình mod_mine để
thêm kiểu MIME mới vào file cấu hình mime.types,
httpd.conf hay .htaccess
• File mime.types và http.conf của Apache là file cấu hình
máy chủ web toàn cục (global)
• Chỉ thị cấu hình AddType xác định kiểu MIME và danh
sách các phần mở rộng tên file phù hợp với kiểu MIME
theo cú pháp:
Cấu hình máy chủ web:
Máy chủ Apache:

• Sử dụng chỉ thị AddType trong cấu hình mod_mine để
thêm kiểu MIME mới vào file cấu hình mime.types,
httpd.conf hay .htaccess
• File mime.types và http.conf của Apache là file cấu hình
máy chủ web toàn cục (global)
• Chỉ thị cấu hình AddType xác định kiểu MIME và danh
sách các phần mở rộng tên file phù hợp với kiểu MIME
theo cú pháp:
Slide 1 - Tổng quan về phát triển web mobile 21
AddType <kiểu MIME> <phần mở rộng tên file> [<phần mở rộng tên file >]

MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Máy chủ Microsoft IIS:
• Microsoft Internet Information Services cung cấp giao
diện người dùng, dòng lệnh và phương pháp lập trình
để quản lý liên kết kiểu với từng loại file có phần mở
rộng khác nhau
• Bên cạnh việc sử dụng ứng dụng quản lý IIS để cấu
hình kiểu MIME, IIS 7 giới thiệu cú pháp dòng lệnh để
quản lý kiểu MIME
• Ví dụ:
Máy chủ Microsoft IIS:
• Microsoft Internet Information Services cung cấp giao
diện người dùng, dòng lệnh và phương pháp lập trình
để quản lý liên kết kiểu với từng loại file có phần mở
rộng khác nhau
• Bên cạnh việc sử dụng ứng dụng quản lý IIS để cấu
hình kiểu MIME, IIS 7 giới thiệu cú pháp dòng lệnh để
quản lý kiểu MIME
• Ví dụ:

Slide 1 - Tổng quan về phát triển web mobile 22
appcmd set config /section:staticContent ^
/+"[fileExtension='.xhtml',mimeType='application/vnd.wap.xhtml+xml']"
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Máy chủ Nginx:
• Là máy chủ web dạng đơn giản phù hợp cho file tĩnh
• Đối với các trang web có lượng truy cập lớn, thông
thường sử dụng một máy chủ Apache (hoặc máy chủ
IIS) cung cấp các trang động và một máy chủ nginx
đảm nhiệm vai trò làm việc với hình ảnh, style sheets
và các file tĩnh khác giúp tiết kiệm tài nguyên
• Ví dụ:
Máy chủ Nginx:
• Là máy chủ web dạng đơn giản phù hợp cho file tĩnh
• Đối với các trang web có lượng truy cập lớn, thông
thường sử dụng một máy chủ Apache (hoặc máy chủ
IIS) cung cấp các trang động và một máy chủ nginx
đảm nhiệm vai trò làm việc với hình ảnh, style sheets
và các file tĩnh khác giúp tiết kiệm tài nguyên
• Ví dụ:
Slide 1 - Tổng quan về phát triển web mobile 23
types {
application/vnd.wap.xhtml+xml xhtml;
text/vnd.wap.wml wml;
}
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Trình duyệt web di động trên máy tính:
Cần thiết phải có công cụ giả lập môi trường di động
Công cụ thuận tiện để sử dụng web di động: firefox
kết hợp với add-on:

• Add-on XHTML Mobile Profile
• Add-on wmlbrowser
• Add-on User Agent Switcher
• Add-on Modify Headers
• Add-on Live HTTP Headers
• Add-on Small Screen Renderer
• Add-on Firebug
Trình duyệt web di động trên máy tính:
Cần thiết phải có công cụ giả lập môi trường di động
Công cụ thuận tiện để sử dụng web di động: firefox
kết hợp với add-on:
• Add-on XHTML Mobile Profile
• Add-on wmlbrowser
• Add-on User Agent Switcher
• Add-on Modify Headers
• Add-on Live HTTP Headers
• Add-on Small Screen Renderer
• Add-on Firebug
Slide 1 - Tổng quan về phát triển web mobile 24
MÔI TRƯỜNG PHÁT TRIỂN WEB DI ĐỘNG
Công cụ mô phỏng trình duyệt di động (Mobile
Browser Emulators):
Là công cụ giúp gỡ lỗi cho lập trình viên web di động
Ba loại trình mô phỏng di động:
• Trình mô phỏng thiết bị di động: mô phỏng hệ điều
hành của điện thoại di động và các ứng dụng di động
• Trình mô phỏng trình duyệt di động: chỉ mô phỏng ứng
dụng trình duyệt trên di động
• Trình mô phỏng hạ tầng di động: mô phỏng thiết bị di
động và dịch vụ liên quan trong hệ sinh thái di động

Công cụ mô phỏng trình duyệt di động (Mobile
Browser Emulators):
Là công cụ giúp gỡ lỗi cho lập trình viên web di động
Ba loại trình mô phỏng di động:
• Trình mô phỏng thiết bị di động: mô phỏng hệ điều
hành của điện thoại di động và các ứng dụng di động
• Trình mô phỏng trình duyệt di động: chỉ mô phỏng ứng
dụng trình duyệt trên di động
• Trình mô phỏng hạ tầng di động: mô phỏng thiết bị di
động và dịch vụ liên quan trong hệ sinh thái di động
Slide 1 - Tổng quan về phát triển web mobile 25