SlideShare a Scribd company logo
1 of 32
Download to read offline
BÀI 6
KIỂM TRA TÍNH HỢP LỆ VÀ TỐI ƯU HÓA MÃ WEB DI
ĐỘNG
NHẮC LẠI BÀI TRƯỚ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 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 2
MỤC TIÊU BÀI HỌC
Tối ưu hóa mã web di động:
Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu
mobile
Tối ưu hóa web server cho trình duyệt di động
Kiểm tra tính hợp lệ của web trên các trình duyệt di
động
Tối ưu hóa mã web di động:
Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu
mobile
Tối ưu hóa web server cho trình duyệt di động
Kiểm tra tính hợp lệ của web trên các trình duyệt di
động
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 3
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Tối ưu hóa mã đánh dấu cho di động:
Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di
động và máy chủ web
Tối đa hóa khả năng lưu trữ đệm (cache)
Tối ưu hóa mã đánh dấu cho di động:
Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di
động và máy chủ web
Tối đa hóa khả năng lưu trữ đệm (cache)
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 5
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Kỹ thuật hậu xử lý cho mã đánh dấu di động:
Có thể lọc tài liệu web cho di động để giữ lại những
thành phần quan trọng của tài liệu và loại bỏ các
phần nội dung không liên quan
Tùy thuộc vào việc chọn lựa framework thực thi, các
kỹ thuật này hầu như đều có sẵn dưới dạng thư viện
phần mềm mã nguồn mở
Kỹ thuật hậu xử lý cho mã đánh dấu di động:
Có thể lọc tài liệu web cho di động để giữ lại những
thành phần quan trọng của tài liệu và loại bỏ các
phần nội dung không liên quan
Tùy thuộc vào việc chọn lựa framework thực thi, các
kỹ thuật này hầu như đều có sẵn dưới dạng thư viện
phần mềm mã nguồn mở
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 6
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Giảm thiểu sử dụng tài nguyên bên ngoài:
Giảm số lượng tài nguyên bên ngoài được liên kết
đến:
• Chỉ sử dụng những stylesheet CSS thật sự cần thiết.
Tốt nhất là chỉ nên sử dụng một file stylesheet CSS.
Xóa khoảng trắng, chú thích, mã đánh dấu không cần
thiết:
• Khoảng trắng và chú thích trong tài liệu web rất có ích
đối với người đọc nhưng lại không cần thiết cho quá
trình thông dịch của trình duyệt trên cả di động và máy
tính
Giảm thiểu sử dụng tài nguyên bên ngoài:
Giảm số lượng tài nguyên bên ngoài được liên kết
đến:
• Chỉ sử dụng những stylesheet CSS thật sự cần thiết.
Tốt nhất là chỉ nên sử dụng một file stylesheet CSS.
Xóa khoảng trắng, chú thích, mã đánh dấu không cần
thiết:
• Khoảng trắng và chú thích trong tài liệu web rất có ích
đối với người đọc nhưng lại không cần thiết cho quá
trình thông dịch của trình duyệt trên cả di động và máy
tính
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 7
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
• Sử dụng phương pháp minification (sự thu gọn - dùng
để chỉ việc loại bỏ nội dung không cần thiết ra khỏi tài
liệu web)
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-
//WAPFORUM//DTD
XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-
mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link
rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce
Specials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>Sunset
Farmers&apos; Market has weekly produce specials! Click the image below to
see
this week&apos; specials.</p><div class="content"><img id="theImg"
src="raspberries.jpg" alt="Produce Specials"/><div id="theText">$2.50 per
pint</div></div><div class="nav"><a href="#">market home</a></div></body>
</html>
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 8
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-
//WAPFORUM//DTD
XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-
mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link
rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce
Specials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>Sunset
Farmers&apos; Market has weekly produce specials! Click the image below to
see
this week&apos; specials.</p><div class="content"><img id="theImg"
src="raspberries.jpg" alt="Produce Specials"/><div id="theText">$2.50 per
pint</div></div><div class="nav"><a href="#">market home</a></div></body>
</html>
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Điều chỉnh và thay đổi định dạng ảnh:
2 cách điều chỉnh hình ảnh:
• Giảm kích thước file sao cho nhỏ nhất có thể:
– giảm mà không ảnh hưởng đến khả năng đọc cũng như
tính khả dụng của website
– giảm số lượng màu sắc được sử dụng cho hình ảnh
– sử dụng bộ nén hình ảnh để giảm kích thước file ảnh
• Chuyển mã hình ảnh sang định dạng tốt nhất được
trình duyệt di động hỗ trợ:
– Có thể chọn phương pháp tĩnh hoặc động (on-the-fly) để
thay đổi kích thước và chuyển mã hình ảnh
Điều chỉnh và thay đổi định dạng ảnh:
2 cách điều chỉnh hình ảnh:
• Giảm kích thước file sao cho nhỏ nhất có thể:
– giảm mà không ảnh hưởng đến khả năng đọc cũng như
tính khả dụng của website
– giảm số lượng màu sắc được sử dụng cho hình ảnh
– sử dụng bộ nén hình ảnh để giảm kích thước file ảnh
• Chuyển mã hình ảnh sang định dạng tốt nhất được
trình duyệt di động hỗ trợ:
– Có thể chọn phương pháp tĩnh hoặc động (on-the-fly) để
thay đổi kích thước và chuyển mã hình ảnh
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 9
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Mã hóa MIME đa phần cho tài liệu hồi đáp:
Đóng gói MIME đa phần là kỹ thuật kế thừa được sử
dụng để tăng tốc độ hiển thị web cho di động trên
thiết bị di động đời cũ.
Khi trang web được đóng gói bằng MIME đa phần, ta
sử dụng kiểu nội dung (content type) của trang là
multipart/related
Mã hóa MIME đa phần cho tài liệu hồi đáp:
Đóng gói MIME đa phần là kỹ thuật kế thừa được sử
dụng để tăng tốc độ hiển thị web cho di động trên
thiết bị di động đời cũ.
Khi trang web được đóng gói bằng MIME đa phần, ta
sử dụng kiểu nội dung (content type) của trang là
multipart/related
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 10
Tên header HTTP Mô tả giá trị header Header ví dụ
Content-Type Kiểu MIME của tài nguyên text/html
image/jpg
Content-ID ID duy nhất của tài nguyên
trong hồi đáp web
part100@mydomain.com
100
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Tối ưu hóa máy chủ web cho trình duyệt di động:
Máy chủ web có thể tối ưu việc phân phối nội dung
trên nhiều mạng di động khác nhau bằng cách giảm
thiểu tối đa số byte được truyền tải trong hồi đáp
web và sử dụng header hồi đáp để yêu cầu máy
khách lưu trữ đệm nội dung web
Trình duyệt điện thoại thông minh và một số trình
duyệt di động khác có thể dùng giải thuật gzip hoặc
deflate để giải nén và hiển thị những nội dung đã
được nén
Tối ưu hóa máy chủ web cho trình duyệt di động:
Máy chủ web có thể tối ưu việc phân phối nội dung
trên nhiều mạng di động khác nhau bằng cách giảm
thiểu tối đa số byte được truyền tải trong hồi đáp
web và sử dụng header hồi đáp để yêu cầu máy
khách lưu trữ đệm nội dung web
Trình duyệt điện thoại thông minh và một số trình
duyệt di động khác có thể dùng giải thuật gzip hoặc
deflate để giải nén và hiển thị những nội dung đã
được nén
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 11
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Nén thông tin hồi đáp bằng gzip hoặc deflate:
Nếu trình duyệt trên di động yêu cầu thì Apche, IIS và
những máy chủ khác có thể được cấu hình để nén tài liệu
web nhờ sử dụng giải thuật gzip hoặc deflate
Việc nén tài liệu văn bản rất hiệu quả để tối ưu hóa số
lượng byte cần truyền tải từ máy chủ đến trình duyệt
Trình duyệt trên di động (hoặc trên máy tính) sử dụng
header Accept-Encoding trong yêu cầu HTTP để yêu cầu
máy chủ web nén thông tin hồi đáp trả về
Giá trị của header Accept-Encoding gồm một danh sách
các giải thuật nén được trình duyệt hỗ trợ (bao gồm giá trị
gzip và deflate), phân cách với nhau bằng dấu phẩy
Nén thông tin hồi đáp bằng gzip hoặc deflate:
Nếu trình duyệt trên di động yêu cầu thì Apche, IIS và
những máy chủ khác có thể được cấu hình để nén tài liệu
web nhờ sử dụng giải thuật gzip hoặc deflate
Việc nén tài liệu văn bản rất hiệu quả để tối ưu hóa số
lượng byte cần truyền tải từ máy chủ đến trình duyệt
Trình duyệt trên di động (hoặc trên máy tính) sử dụng
header Accept-Encoding trong yêu cầu HTTP để yêu cầu
máy chủ web nén thông tin hồi đáp trả về
Giá trị của header Accept-Encoding gồm một danh sách
các giải thuật nén được trình duyệt hỗ trợ (bao gồm giá trị
gzip và deflate), phân cách với nhau bằng dấu phẩy
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 12
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Giá trị identity là một giá trị tùy chọn để cho biết hồi
đáp không nén vẫn được trình duyệt hỗ trợ, nhưng
trên thực tế điều này là do máy chủ web giả định
Cấu hình máy chủ web Apache:
Máy chủ web Apache 2 cho phép nén hồi đáp bằng cách
sử dụng mô-đun mod_deflate.
Để kích hoạt tính năng nén hồi đáp bằng kiểu MIME, sử
dụng lệnh dẫn hướng AddOutputFilterByType để kích hoạt
bộ lọc đầu ra DEFLATE cho danh sách các kiểu MIME
Accept-Encoding: gzip, deflate
Giá trị identity là một giá trị tùy chọn để cho biết hồi
đáp không nén vẫn được trình duyệt hỗ trợ, nhưng
trên thực tế điều này là do máy chủ web giả định
Cấu hình máy chủ web Apache:
Máy chủ web Apache 2 cho phép nén hồi đáp bằng cách
sử dụng mô-đun mod_deflate.
Để kích hoạt tính năng nén hồi đáp bằng kiểu MIME, sử
dụng lệnh dẫn hướng AddOutputFilterByType để kích hoạt
bộ lọc đầu ra DEFLATE cho danh sách các kiểu MIME
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 13
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Ví dụ Cấu hình máy chủ web Apache 2 cho phép
nén hồi đáp bằng URI
# Cho phép nén file trong thư mục /books/bmwd/08/compressed directory.
<Location /books/bmwd/08/compressed>
AddOutputFilterByType DEFLATE text/html text/plain text/xml
application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript
application/javascript text/css
</Location>
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 14
# Cho phép nén file trong thư mục /books/bmwd/08/compressed directory.
<Location /books/bmwd/08/compressed>
AddOutputFilterByType DEFLATE text/html text/plain text/xml
application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript
application/javascript text/css
</Location>
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Cấu hình máy chủ web Microsoft IIS:
Cấu hình máy chủ IIS có sự khác biệt giữa nén nội
dung web động và nội dung web tĩnh
IIS cho phép nén các file HTML tĩnh theo mặc định
nhưng lại yêu cầu phải tự cấu hình để nén thêm các
kiểu file tĩnh khác hoặc để nén nội dung web động
Chỉ thị lưu trữ đệm trong header hồi đáp HTTP:
Chuẩn HTTP 1.1 định nghĩa một số header để chỉ thị
lưu trữ đệm tài liệu web cũng như thời gian lưu trữ
các file đệm
Cấu hình máy chủ web Microsoft IIS:
Cấu hình máy chủ IIS có sự khác biệt giữa nén nội
dung web động và nội dung web tĩnh
IIS cho phép nén các file HTML tĩnh theo mặc định
nhưng lại yêu cầu phải tự cấu hình để nén thêm các
kiểu file tĩnh khác hoặc để nén nội dung web động
Chỉ thị lưu trữ đệm trong header hồi đáp HTTP:
Chuẩn HTTP 1.1 định nghĩa một số header để chỉ thị
lưu trữ đệm tài liệu web cũng như thời gian lưu trữ
các file đệm
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 15
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Header Date trong HTTP:
Header date trong hồi đáp HTTP cho biết ngày tháng
và thời gian của hồi đáp từ máy chủ
Header Last-Modified trong HTTP :
Header Last-Modified trong hồi đáp HTTP cho biết
ngày tháng và thời gian của lần sửa đổi cuối cùng của
tài liệu
Date: Sat, 17 Oct 2009 01:44:49 GMT
Header Date trong HTTP:
Header date trong hồi đáp HTTP cho biết ngày tháng
và thời gian của hồi đáp từ máy chủ
Header Last-Modified trong HTTP :
Header Last-Modified trong hồi đáp HTTP cho biết
ngày tháng và thời gian của lần sửa đổi cuối cùng của
tài liệu
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 16
Last-Modified: Mon, 02 Oct 1989 22:49:17 GMT
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Header Expires trong HTTP :
Header Expires trong hồi đáp HTTP cho biết ngày
tháng và thời gian mà tài liệu hồi đáp sẽ hết hạn và
phải được xác nhận lại hoặc xóa khỏi bộ nhớ đệm
máy khách
Header Expires trong HTTP :
Header Expires trong hồi đáp HTTP cho biết ngày
tháng và thời gian mà tài liệu hồi đáp sẽ hết hạn và
phải được xác nhận lại hoặc xóa khỏi bộ nhớ đệm
máy khách
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 17
Expires: Sun, 18 Oct 2009 00:00:00 GMT
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH
DẤU WEB DI ĐỘNG
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Tầm quan trọng của mã đánh dấu hợp lệ trong
trang web cho di động:
đối với web cho di động, cú pháp stylesheet và mã
đánh dấu hợp lệ lại là điều rất cần thiết
để đảm bảo khả năng tương thích của trang web với
nhiều loại trình duyệt di động khác nhau
mã đánh dấu không hợp lệ và định dạng kém sẽ ảnh
hưởng đến khả năng tương thích của tài liệu đối với
trình duyệt di động hơn nhiều so với sự ảnh hưởng
trên trình duyệt trên máy tính
Tầm quan trọng của mã đánh dấu hợp lệ trong
trang web cho di động:
đối với web cho di động, cú pháp stylesheet và mã
đánh dấu hợp lệ lại là điều rất cần thiết
để đảm bảo khả năng tương thích của trang web với
nhiều loại trình duyệt di động khác nhau
mã đánh dấu không hợp lệ và định dạng kém sẽ ảnh
hưởng đến khả năng tương thích của tài liệu đối với
trình duyệt di động hơn nhiều so với sự ảnh hưởng
trên trình duyệt trên máy tính
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 19
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Những vấn đề mà trình kiểm tra tính hợp lệ bỏ qua:
Trình kiểm tra tính hợp lệ không đánh giá chất lượng
và hiệu quả của mã đánh dấu.
Mã đánh dấu không chính xác và có kích thước lớn
hơn bình thường có thể vẫn đúng về mặt cú pháp
nhưng sẽ bị mắc lỗi trầm trọng khi chạy trên thiết bị
di động thật
tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm
bảo rằng tài liệu đánh dấu phù hợp với trình duyệt
trên di động
Những vấn đề mà trình kiểm tra tính hợp lệ bỏ qua:
Trình kiểm tra tính hợp lệ không đánh giá chất lượng
và hiệu quả của mã đánh dấu.
Mã đánh dấu không chính xác và có kích thước lớn
hơn bình thường có thể vẫn đúng về mặt cú pháp
nhưng sẽ bị mắc lỗi trầm trọng khi chạy trên thiết bị
di động thật
tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm
bảo rằng tài liệu đánh dấu phù hợp với trình duyệt
trên di động
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 20
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Các trình kiểm tra tính hợp lệ sẵn có cho mã đánh
dấu
Trình kiểm tra
tính hợp lệ
Phạm vi kiểm tra
tính hợp lệ
URL Mã nguồn
Dịch vụ kiểm tra
tính hợp lệ cho
mã đánh dấu
(Markup
Validation
Service) của W3C
Cú pháp mã đánh
dấu HTML,
XHTML và những
mã đánh dấu
web khác.
http://validator.w
3.
org/
http://validator.w
3
.org/source/
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 21
Dịch vụ kiểm tra
tính hợp lệ cho
mã đánh dấu
(Markup
Validation
Service) của W3C
Cú pháp mã đánh
dấu HTML,
XHTML và những
mã đánh dấu
web khác.
http://validator.w
3.
org/
http://validator.w
3
.org/source/
Trình kiểm tra
MobileOK của
W3C
http://validator.w
3.or
g/mobile/
http://dev.w3.org
/
cvsweb/2007/mo
bileok-ref/
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Dịch vụ kiểm tra tính hợp lệ cho tài liệu CSS của
W3C:
http://jigsaw.w3.org/css-validator/
Dịch vụ kiểm tra tính hợp lệ cho tài liệu CSS của
W3C:
http://jigsaw.w3.org/css-validator/
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 22
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Trình kiểm tra mobileOK của W3C:
http://validator.w3.org/mobile/
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 23
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
Phương pháp luận về kiểm thử trang web cho di
động:
Con đường truyền tin có thể thực hiện giữa trình
duyệt di động và máy chủ web.
Phương pháp luận về kiểm thử trang web cho di
động:
Con đường truyền tin có thể thực hiện giữa trình
duyệt di động và máy chủ web.
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 25
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
Những lưu ý khi kiểm thử trên trình duyệt di động:
Sử dụng cả hai biện pháp truy cập Internet để kiểm
thử website cho di động: wifi, 3G
Khi không thể kiểm thử trên thiết bị di động thật thì
việc kiểm thử được xem là thành công khi mô phỏng
tốt nhất có thể trình duyệt di động, thiết bị di động và
mạng di động:
• Chức năng của trình duyệt di động
• Các ràng buộc và chế độ hoạt động của thiết bị di động
• Phương pháp truy cập Internet và sự chỉnh sửa đối với
yêu cầu và hồi đáp web (bao gồm cả việc truy cập
Internet bị ngắt quãng)
Những lưu ý khi kiểm thử trên trình duyệt di động:
Sử dụng cả hai biện pháp truy cập Internet để kiểm
thử website cho di động: wifi, 3G
Khi không thể kiểm thử trên thiết bị di động thật thì
việc kiểm thử được xem là thành công khi mô phỏng
tốt nhất có thể trình duyệt di động, thiết bị di động và
mạng di động:
• Chức năng của trình duyệt di động
• Các ràng buộc và chế độ hoạt động của thiết bị di động
• Phương pháp truy cập Internet và sự chỉnh sửa đối với
yêu cầu và hồi đáp web (bao gồm cả việc truy cập
Internet bị ngắt quãng)
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 26
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
Chọn thiết bị di động dùng để kiểm thử:
Việc kiểm thử trang web cho di động đầy đủ yêu cầu
phải kiểm tra trên nhiều phiên bản trình duyệt di
động, mô-đen thiết bị, hệ điều hành và mạng di động
khác nhau
Tuân theo quy trình sau đây để chọn tập các thiết bị
di động mục tiêu cho việc kiểm thử website:
• Hãy bắt đầu với tất cả thiết bị di động mục tiêu của
website di động.
• Sắp xếp các thiết bị này theo nhóm thích ứng nội dung
• Sắp xếp các thiết bị theo phiên bản trình duyệt di động.
Tìm user-agent của thiết bị hoặc tham khảo CSDL thiết
bị để biết phiên bản trình duyệt
Chọn thiết bị di động dùng để kiểm thử:
Việc kiểm thử trang web cho di động đầy đủ yêu cầu
phải kiểm tra trên nhiều phiên bản trình duyệt di
động, mô-đen thiết bị, hệ điều hành và mạng di động
khác nhau
Tuân theo quy trình sau đây để chọn tập các thiết bị
di động mục tiêu cho việc kiểm thử website:
• Hãy bắt đầu với tất cả thiết bị di động mục tiêu của
website di động.
• Sắp xếp các thiết bị này theo nhóm thích ứng nội dung
• Sắp xếp các thiết bị theo phiên bản trình duyệt di động.
Tìm user-agent của thiết bị hoặc tham khảo CSDL thiết
bị để biết phiên bản trình duyệt
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 27
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
• Sắp xếp các thiết bị theo phiên bản và hệ điều hành di
động. Chọn ít nhất một thiết bị cho mỗi phiên bản hệ
điều hành để phục vụ cho việc kiểm thử.
• Sắp xếp các thiết bị theo cách thức nhập dữ liệu và chế
độ hoạt động.
• Chọn thiết bị mạnh nhất và yếu nhất từ danh sách tất
cả thiết bị được hỗ trợ
• Tập hợp lại danh sách các thiết bị từ Bước 2 đến Bước
6.
• Hãy đảm bảo rằng các thiết bị dùng để kiểm thử ở
Bước 7 được các nhà vận hành mạng di động mục tiêu
hỗ trợ với số lượng hợp lý
• Sắp xếp các thiết bị theo phiên bản và hệ điều hành di
động. Chọn ít nhất một thiết bị cho mỗi phiên bản hệ
điều hành để phục vụ cho việc kiểm thử.
• Sắp xếp các thiết bị theo cách thức nhập dữ liệu và chế
độ hoạt động.
• Chọn thiết bị mạnh nhất và yếu nhất từ danh sách tất
cả thiết bị được hỗ trợ
• Tập hợp lại danh sách các thiết bị từ Bước 2 đến Bước
6.
• Hãy đảm bảo rằng các thiết bị dùng để kiểm thử ở
Bước 7 được các nhà vận hành mạng di động mục tiêu
hỗ trợ với số lượng hợp lý
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 28
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
Kiểm thử trên thiết bị di động thật:
Nhận biết thiết bị di động
Chương trình dành cho lập trình viên:
Hệ điều hành trên di
động
Chương trình dành cho
lập trình viên
Thiết bị ảo
Nokia http://www.forum.nokia
.com/
Không
Kiểm thử trên thiết bị di động thật:
Nhận biết thiết bị di động
Chương trình dành cho lập trình viên:
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 29
Nokia http://www.forum.nokia
.com/
Không
Sony Ericsson http://developer.sony
ericsson.com/
Có, được
DeviceAnywhere hỗ trợ.
http://www.deviceanyw
here.com/sonyericsson/
welcome.htm
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
Kiểm thử trên trình mô phỏng di động:
Là giải pháp có độ chính xác hợp lý
Trình mô phỏng có thể kiểm tra xem trang web cho di
động có tuân theo chuẩn về mã đánh dấu và giới hạn
về kích cỡ tài liệu được hỗ trợ trên thiết bị hay
không?
Việc mô phỏng trình duyệt sẽ giúp đánh giá gần đúng
cách hiển thị và tính khả dụng của nội dung web trên
thiết bị chính xác hơn so với dùng trình duyệt máy
tính
Kiểm thử trên trình mô phỏng di động:
Là giải pháp có độ chính xác hợp lý
Trình mô phỏng có thể kiểm tra xem trang web cho di
động có tuân theo chuẩn về mã đánh dấu và giới hạn
về kích cỡ tài liệu được hỗ trợ trên thiết bị hay
không?
Việc mô phỏng trình duyệt sẽ giúp đánh giá gần đúng
cách hiển thị và tính khả dụng của nội dung web trên
thiết bị chính xác hơn so với dùng trình duyệt máy
tính
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 30
KIỂM THỬ TRANG WEB CHO DI ĐỘNG
Kiểm thử trên trình duyệt của máy tính:
Là giải pháp kém hiệu quả hơn so với kiểm thử bằng
trình mô phỏng hoặc trên thiết bị thật
Trình duyệt máy tính không hoặc mô phỏng được rất
ít những đặc trưng của trình duyệt di động và hệ sinh
thái di động
Kiểm thử trên trình duyệt của máy tính:
Là giải pháp kém hiệu quả hơn so với kiểm thử bằng
trình mô phỏng hoặc trên thiết bị thật
Trình duyệt máy tính không hoặc mô phỏng được rất
ít những đặc trưng của trình duyệt di động và hệ sinh
thái di động
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 31
TỔNG KẾT
2 phương pháp để tối ưu hóa mã đánh dấu cho di
động:
Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di
động và máy chủ web. Đây là kỹ thuật thường được
sử dụng nhất đối với người thiết kế web di động
Tối đa hóa khả năng lưu trữ đệm (cache)
Tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm bảo
rằng tài liệu đánh dấu phù hợp với trình duyệt trên di
động
Phương pháp tối ưu nhất để kiểm thử web di động:
kiểm thử trên thiết bị di động thật
2 phương pháp để tối ưu hóa mã đánh dấu cho di
động:
Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di
động và máy chủ web. Đây là kỹ thuật thường được
sử dụng nhất đối với người thiết kế web di động
Tối đa hóa khả năng lưu trữ đệm (cache)
Tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm bảo
rằng tài liệu đánh dấu phù hợp với trình duyệt trên di
động
Phương pháp tối ưu nhất để kiểm thử web di động:
kiểm thử trên thiết bị di động thật
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 32

More Related Content

More from MasterCode.vn

Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vnPd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vnMasterCode.vn
 
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vnPdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vnMasterCode.vn
 
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vnPd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vnMasterCode.vn
 
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnPd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnMasterCode.vn
 
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vnPd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vnMasterCode.vn
 
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vnPdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vnMasterCode.vn
 
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vn
Pdfbài 7 máy tính xác tay và máy in   bảo trì sự cố máy tính-mastercode.vnPdfbài 7 máy tính xác tay và máy in   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vn
Pdfbài 6 bảo trì máy tính   bảo trì sự cố máy tính-mastercode.vnPdfbài 6 bảo trì máy tính   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vn
Pdfbài 5 bảo trì và tối ưu windows   bảo trì sự cố máy tính-mastercode.vnPdfbài 5 bảo trì và tối ưu windows   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vn
Pdfbài 4 ổ cứng hard drive   bảo trì sự cố máy tính-mastercode.vnPdfbài 4 ổ cứng hard drive   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vn
Pdfbài 3 cpu và ram   bảo trì sự cố máy tính-mastercode.vnPdfbài 3 cpu và ram   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vn
Pdfbài 1 giới thiệu chung về phần cứng   bảo trì sự cố máy tính-mastercode.vnPdfbài 1 giới thiệu chung về phần cứng   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdfbài 2 bo mạch chủ (main) bảo trì sự cố máy tính-mastercode.vn
Pdfbài 2 bo mạch chủ (main)   bảo trì sự cố máy tính-mastercode.vnPdfbài 2 bo mạch chủ (main)   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 2 bo mạch chủ (main) bảo trì sự cố máy tính-mastercode.vnMasterCode.vn
 
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...MasterCode.vn
 
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...MasterCode.vn
 
Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...
Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...
Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...MasterCode.vn
 
Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...
Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...
Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...MasterCode.vn
 
Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...
Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...
Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...MasterCode.vn
 
Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...
Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...
Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...MasterCode.vn
 
Pdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vn
Pdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vnPdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vn
Pdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vnMasterCode.vn
 

More from MasterCode.vn (20)

Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vnPd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
Pd fbuoi5 6-ảnh hưởng của social media tới kết quả seo-mastercode.vn
 
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vnPdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
Pdf buoi3 4-link-building-tran-ngoc-chinh-mastercode.vn
 
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vnPd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
Pd fbuoi3 4-kỹ thuật xây dựng back link-mastercode.vn
 
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnPd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
 
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vnPd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
Pd fbuoi1 giới thiệu seo tools cơ bản-seo manager + seo guy-mastercode.vn
 
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vnPdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
Pdf buoi1 2-on-page-tran-ngoc-chinh-mastercode.vn
 
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vn
Pdfbài 7 máy tính xác tay và máy in   bảo trì sự cố máy tính-mastercode.vnPdfbài 7 máy tính xác tay và máy in   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 7 máy tính xác tay và máy in bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vn
Pdfbài 6 bảo trì máy tính   bảo trì sự cố máy tính-mastercode.vnPdfbài 6 bảo trì máy tính   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 6 bảo trì máy tính bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vn
Pdfbài 5 bảo trì và tối ưu windows   bảo trì sự cố máy tính-mastercode.vnPdfbài 5 bảo trì và tối ưu windows   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 5 bảo trì và tối ưu windows bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vn
Pdfbài 4 ổ cứng hard drive   bảo trì sự cố máy tính-mastercode.vnPdfbài 4 ổ cứng hard drive   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 4 ổ cứng hard drive bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vn
Pdfbài 3 cpu và ram   bảo trì sự cố máy tính-mastercode.vnPdfbài 3 cpu và ram   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 3 cpu và ram bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vn
Pdfbài 1 giới thiệu chung về phần cứng   bảo trì sự cố máy tính-mastercode.vnPdfbài 1 giới thiệu chung về phần cứng   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 1 giới thiệu chung về phần cứng bảo trì sự cố máy tính-mastercode.vn
 
Pdfbài 2 bo mạch chủ (main) bảo trì sự cố máy tính-mastercode.vn
Pdfbài 2 bo mạch chủ (main)   bảo trì sự cố máy tính-mastercode.vnPdfbài 2 bo mạch chủ (main)   bảo trì sự cố máy tính-mastercode.vn
Pdfbài 2 bo mạch chủ (main) bảo trì sự cố máy tính-mastercode.vn
 
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
Pdf bai 7 làm việc với truy vấn nâng cao-slide 07-quan tri csdl voi access-ma...
 
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
Pdf bai 6 làm việc với truy vấn cơ bản-slide 06-quan tri csdl voi access-mast...
 
Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...
Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...
Pdf bai 5 làm việc với báo cáo nâng cao-slide 05-quan tri csdl voi access-mas...
 
Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...
Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...
Pdf bai 4 làm việc với báo cáo cơ bản-slide 04-quan tri csdl voi access-maste...
 
Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...
Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...
Pdf bai 3 làm việc với biểu mẫu nâng cao-slide 03-quan tri csdl voi access-ma...
 
Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...
Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...
Pdf bai 2 làm việc với biểu mẫu cơ bản-slide 02-quan tri csdl voi access-mast...
 
Pdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vn
Pdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vnPdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vn
Pdf bai 1 tổng quan về ms access-quan tri csdl voi access-mastercode.vn
 

BÀI 6 Kiểm tra tính hợp lệ và tối ưu hóa mã web di động - Giáo trình FPT

  • 1. BÀI 6 KIỂM TRA TÍNH HỢP LỆ VÀ TỐI ƯU HÓA MÃ WEB DI ĐỘNG
  • 2. NHẮC LẠI BÀI TRƯỚ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 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 2
  • 3. MỤC TIÊU BÀI HỌC Tối ưu hóa mã web di động: Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu mobile Tối ưu hóa web server cho trình duyệt di động Kiểm tra tính hợp lệ của web trên các trình duyệt di động Tối ưu hóa mã web di động: Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu mobile Tối ưu hóa web server cho trình duyệt di động Kiểm tra tính hợp lệ của web trên các trình duyệt di động Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 3
  • 4. TỐI ƯU HÓA MÃ WEB DI ĐỘNG
  • 5. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Tối ưu hóa mã đánh dấu cho di động: Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di động và máy chủ web Tối đa hóa khả năng lưu trữ đệm (cache) Tối ưu hóa mã đánh dấu cho di động: Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di động và máy chủ web Tối đa hóa khả năng lưu trữ đệm (cache) Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 5
  • 6. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Kỹ thuật hậu xử lý cho mã đánh dấu di động: Có thể lọc tài liệu web cho di động để giữ lại những thành phần quan trọng của tài liệu và loại bỏ các phần nội dung không liên quan Tùy thuộc vào việc chọn lựa framework thực thi, các kỹ thuật này hầu như đều có sẵn dưới dạng thư viện phần mềm mã nguồn mở Kỹ thuật hậu xử lý cho mã đánh dấu di động: Có thể lọc tài liệu web cho di động để giữ lại những thành phần quan trọng của tài liệu và loại bỏ các phần nội dung không liên quan Tùy thuộc vào việc chọn lựa framework thực thi, các kỹ thuật này hầu như đều có sẵn dưới dạng thư viện phần mềm mã nguồn mở Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 6
  • 7. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Giảm thiểu sử dụng tài nguyên bên ngoài: Giảm số lượng tài nguyên bên ngoài được liên kết đến: • Chỉ sử dụng những stylesheet CSS thật sự cần thiết. Tốt nhất là chỉ nên sử dụng một file stylesheet CSS. Xóa khoảng trắng, chú thích, mã đánh dấu không cần thiết: • Khoảng trắng và chú thích trong tài liệu web rất có ích đối với người đọc nhưng lại không cần thiết cho quá trình thông dịch của trình duyệt trên cả di động và máy tính Giảm thiểu sử dụng tài nguyên bên ngoài: Giảm số lượng tài nguyên bên ngoài được liên kết đến: • Chỉ sử dụng những stylesheet CSS thật sự cần thiết. Tốt nhất là chỉ nên sử dụng một file stylesheet CSS. Xóa khoảng trắng, chú thích, mã đánh dấu không cần thiết: • Khoảng trắng và chú thích trong tài liệu web rất có ích đối với người đọc nhưng lại không cần thiết cho quá trình thông dịch của trình duyệt trên cả di động và máy tính Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 7
  • 8. TỐI ƯU HÓA MÃ WEB DI ĐỘNG • Sử dụng phương pháp minification (sự thu gọn - dùng để chỉ việc loại bỏ nội dung không cần thiết ra khỏi tài liệu web) <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "- //WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml- mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce Specials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>Sunset Farmers&apos; Market has weekly produce specials! Click the image below to see this week&apos; specials.</p><div class="content"><img id="theImg" src="raspberries.jpg" alt="Produce Specials"/><div id="theText">$2.50 per pint</div></div><div class="nav"><a href="#">market home</a></div></body> </html> Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 8 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "- //WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml- mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce Specials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>Sunset Farmers&apos; Market has weekly produce specials! Click the image below to see this week&apos; specials.</p><div class="content"><img id="theImg" src="raspberries.jpg" alt="Produce Specials"/><div id="theText">$2.50 per pint</div></div><div class="nav"><a href="#">market home</a></div></body> </html>
  • 9. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Điều chỉnh và thay đổi định dạng ảnh: 2 cách điều chỉnh hình ảnh: • Giảm kích thước file sao cho nhỏ nhất có thể: – giảm mà không ảnh hưởng đến khả năng đọc cũng như tính khả dụng của website – giảm số lượng màu sắc được sử dụng cho hình ảnh – sử dụng bộ nén hình ảnh để giảm kích thước file ảnh • Chuyển mã hình ảnh sang định dạng tốt nhất được trình duyệt di động hỗ trợ: – Có thể chọn phương pháp tĩnh hoặc động (on-the-fly) để thay đổi kích thước và chuyển mã hình ảnh Điều chỉnh và thay đổi định dạng ảnh: 2 cách điều chỉnh hình ảnh: • Giảm kích thước file sao cho nhỏ nhất có thể: – giảm mà không ảnh hưởng đến khả năng đọc cũng như tính khả dụng của website – giảm số lượng màu sắc được sử dụng cho hình ảnh – sử dụng bộ nén hình ảnh để giảm kích thước file ảnh • Chuyển mã hình ảnh sang định dạng tốt nhất được trình duyệt di động hỗ trợ: – Có thể chọn phương pháp tĩnh hoặc động (on-the-fly) để thay đổi kích thước và chuyển mã hình ảnh Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 9
  • 10. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Mã hóa MIME đa phần cho tài liệu hồi đáp: Đóng gói MIME đa phần là kỹ thuật kế thừa được sử dụng để tăng tốc độ hiển thị web cho di động trên thiết bị di động đời cũ. Khi trang web được đóng gói bằng MIME đa phần, ta sử dụng kiểu nội dung (content type) của trang là multipart/related Mã hóa MIME đa phần cho tài liệu hồi đáp: Đóng gói MIME đa phần là kỹ thuật kế thừa được sử dụng để tăng tốc độ hiển thị web cho di động trên thiết bị di động đời cũ. Khi trang web được đóng gói bằng MIME đa phần, ta sử dụng kiểu nội dung (content type) của trang là multipart/related Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 10 Tên header HTTP Mô tả giá trị header Header ví dụ Content-Type Kiểu MIME của tài nguyên text/html image/jpg Content-ID ID duy nhất của tài nguyên trong hồi đáp web part100@mydomain.com 100
  • 11. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Tối ưu hóa máy chủ web cho trình duyệt di động: Máy chủ web có thể tối ưu việc phân phối nội dung trên nhiều mạng di động khác nhau bằng cách giảm thiểu tối đa số byte được truyền tải trong hồi đáp web và sử dụng header hồi đáp để yêu cầu máy khách lưu trữ đệm nội dung web Trình duyệt điện thoại thông minh và một số trình duyệt di động khác có thể dùng giải thuật gzip hoặc deflate để giải nén và hiển thị những nội dung đã được nén Tối ưu hóa máy chủ web cho trình duyệt di động: Máy chủ web có thể tối ưu việc phân phối nội dung trên nhiều mạng di động khác nhau bằng cách giảm thiểu tối đa số byte được truyền tải trong hồi đáp web và sử dụng header hồi đáp để yêu cầu máy khách lưu trữ đệm nội dung web Trình duyệt điện thoại thông minh và một số trình duyệt di động khác có thể dùng giải thuật gzip hoặc deflate để giải nén và hiển thị những nội dung đã được nén Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 11
  • 12. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Nén thông tin hồi đáp bằng gzip hoặc deflate: Nếu trình duyệt trên di động yêu cầu thì Apche, IIS và những máy chủ khác có thể được cấu hình để nén tài liệu web nhờ sử dụng giải thuật gzip hoặc deflate Việc nén tài liệu văn bản rất hiệu quả để tối ưu hóa số lượng byte cần truyền tải từ máy chủ đến trình duyệt Trình duyệt trên di động (hoặc trên máy tính) sử dụng header Accept-Encoding trong yêu cầu HTTP để yêu cầu máy chủ web nén thông tin hồi đáp trả về Giá trị của header Accept-Encoding gồm một danh sách các giải thuật nén được trình duyệt hỗ trợ (bao gồm giá trị gzip và deflate), phân cách với nhau bằng dấu phẩy Nén thông tin hồi đáp bằng gzip hoặc deflate: Nếu trình duyệt trên di động yêu cầu thì Apche, IIS và những máy chủ khác có thể được cấu hình để nén tài liệu web nhờ sử dụng giải thuật gzip hoặc deflate Việc nén tài liệu văn bản rất hiệu quả để tối ưu hóa số lượng byte cần truyền tải từ máy chủ đến trình duyệt Trình duyệt trên di động (hoặc trên máy tính) sử dụng header Accept-Encoding trong yêu cầu HTTP để yêu cầu máy chủ web nén thông tin hồi đáp trả về Giá trị của header Accept-Encoding gồm một danh sách các giải thuật nén được trình duyệt hỗ trợ (bao gồm giá trị gzip và deflate), phân cách với nhau bằng dấu phẩy Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 12
  • 13. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Giá trị identity là một giá trị tùy chọn để cho biết hồi đáp không nén vẫn được trình duyệt hỗ trợ, nhưng trên thực tế điều này là do máy chủ web giả định Cấu hình máy chủ web Apache: Máy chủ web Apache 2 cho phép nén hồi đáp bằng cách sử dụng mô-đun mod_deflate. Để kích hoạt tính năng nén hồi đáp bằng kiểu MIME, sử dụng lệnh dẫn hướng AddOutputFilterByType để kích hoạt bộ lọc đầu ra DEFLATE cho danh sách các kiểu MIME Accept-Encoding: gzip, deflate Giá trị identity là một giá trị tùy chọn để cho biết hồi đáp không nén vẫn được trình duyệt hỗ trợ, nhưng trên thực tế điều này là do máy chủ web giả định Cấu hình máy chủ web Apache: Máy chủ web Apache 2 cho phép nén hồi đáp bằng cách sử dụng mô-đun mod_deflate. Để kích hoạt tính năng nén hồi đáp bằng kiểu MIME, sử dụng lệnh dẫn hướng AddOutputFilterByType để kích hoạt bộ lọc đầu ra DEFLATE cho danh sách các kiểu MIME Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 13
  • 14. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Ví dụ Cấu hình máy chủ web Apache 2 cho phép nén hồi đáp bằng URI # Cho phép nén file trong thư mục /books/bmwd/08/compressed directory. <Location /books/bmwd/08/compressed> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript application/javascript text/css </Location> Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 14 # Cho phép nén file trong thư mục /books/bmwd/08/compressed directory. <Location /books/bmwd/08/compressed> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript application/javascript text/css </Location>
  • 15. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Cấu hình máy chủ web Microsoft IIS: Cấu hình máy chủ IIS có sự khác biệt giữa nén nội dung web động và nội dung web tĩnh IIS cho phép nén các file HTML tĩnh theo mặc định nhưng lại yêu cầu phải tự cấu hình để nén thêm các kiểu file tĩnh khác hoặc để nén nội dung web động Chỉ thị lưu trữ đệm trong header hồi đáp HTTP: Chuẩn HTTP 1.1 định nghĩa một số header để chỉ thị lưu trữ đệm tài liệu web cũng như thời gian lưu trữ các file đệm Cấu hình máy chủ web Microsoft IIS: Cấu hình máy chủ IIS có sự khác biệt giữa nén nội dung web động và nội dung web tĩnh IIS cho phép nén các file HTML tĩnh theo mặc định nhưng lại yêu cầu phải tự cấu hình để nén thêm các kiểu file tĩnh khác hoặc để nén nội dung web động Chỉ thị lưu trữ đệm trong header hồi đáp HTTP: Chuẩn HTTP 1.1 định nghĩa một số header để chỉ thị lưu trữ đệm tài liệu web cũng như thời gian lưu trữ các file đệm Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 15
  • 16. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Header Date trong HTTP: Header date trong hồi đáp HTTP cho biết ngày tháng và thời gian của hồi đáp từ máy chủ Header Last-Modified trong HTTP : Header Last-Modified trong hồi đáp HTTP cho biết ngày tháng và thời gian của lần sửa đổi cuối cùng của tài liệu Date: Sat, 17 Oct 2009 01:44:49 GMT Header Date trong HTTP: Header date trong hồi đáp HTTP cho biết ngày tháng và thời gian của hồi đáp từ máy chủ Header Last-Modified trong HTTP : Header Last-Modified trong hồi đáp HTTP cho biết ngày tháng và thời gian của lần sửa đổi cuối cùng của tài liệu Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 16 Last-Modified: Mon, 02 Oct 1989 22:49:17 GMT
  • 17. TỐI ƯU HÓA MÃ WEB DI ĐỘNG Header Expires trong HTTP : Header Expires trong hồi đáp HTTP cho biết ngày tháng và thời gian mà tài liệu hồi đáp sẽ hết hạn và phải được xác nhận lại hoặc xóa khỏi bộ nhớ đệm máy khách Header Expires trong HTTP : Header Expires trong hồi đáp HTTP cho biết ngày tháng và thời gian mà tài liệu hồi đáp sẽ hết hạn và phải được xác nhận lại hoặc xóa khỏi bộ nhớ đệm máy khách Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 17 Expires: Sun, 18 Oct 2009 00:00:00 GMT
  • 18. KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU WEB DI ĐỘNG
  • 19. KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU Tầm quan trọng của mã đánh dấu hợp lệ trong trang web cho di động: đối với web cho di động, cú pháp stylesheet và mã đánh dấu hợp lệ lại là điều rất cần thiết để đảm bảo khả năng tương thích của trang web với nhiều loại trình duyệt di động khác nhau mã đánh dấu không hợp lệ và định dạng kém sẽ ảnh hưởng đến khả năng tương thích của tài liệu đối với trình duyệt di động hơn nhiều so với sự ảnh hưởng trên trình duyệt trên máy tính Tầm quan trọng của mã đánh dấu hợp lệ trong trang web cho di động: đối với web cho di động, cú pháp stylesheet và mã đánh dấu hợp lệ lại là điều rất cần thiết để đảm bảo khả năng tương thích của trang web với nhiều loại trình duyệt di động khác nhau mã đánh dấu không hợp lệ và định dạng kém sẽ ảnh hưởng đến khả năng tương thích của tài liệu đối với trình duyệt di động hơn nhiều so với sự ảnh hưởng trên trình duyệt trên máy tính Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 19
  • 20. KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU Những vấn đề mà trình kiểm tra tính hợp lệ bỏ qua: Trình kiểm tra tính hợp lệ không đánh giá chất lượng và hiệu quả của mã đánh dấu. Mã đánh dấu không chính xác và có kích thước lớn hơn bình thường có thể vẫn đúng về mặt cú pháp nhưng sẽ bị mắc lỗi trầm trọng khi chạy trên thiết bị di động thật tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm bảo rằng tài liệu đánh dấu phù hợp với trình duyệt trên di động Những vấn đề mà trình kiểm tra tính hợp lệ bỏ qua: Trình kiểm tra tính hợp lệ không đánh giá chất lượng và hiệu quả của mã đánh dấu. Mã đánh dấu không chính xác và có kích thước lớn hơn bình thường có thể vẫn đúng về mặt cú pháp nhưng sẽ bị mắc lỗi trầm trọng khi chạy trên thiết bị di động thật tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm bảo rằng tài liệu đánh dấu phù hợp với trình duyệt trên di động Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 20
  • 21. KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU Các trình kiểm tra tính hợp lệ sẵn có cho mã đánh dấu Trình kiểm tra tính hợp lệ Phạm vi kiểm tra tính hợp lệ URL Mã nguồn Dịch vụ kiểm tra tính hợp lệ cho mã đánh dấu (Markup Validation Service) của W3C Cú pháp mã đánh dấu HTML, XHTML và những mã đánh dấu web khác. http://validator.w 3. org/ http://validator.w 3 .org/source/ Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 21 Dịch vụ kiểm tra tính hợp lệ cho mã đánh dấu (Markup Validation Service) của W3C Cú pháp mã đánh dấu HTML, XHTML và những mã đánh dấu web khác. http://validator.w 3. org/ http://validator.w 3 .org/source/ Trình kiểm tra MobileOK của W3C http://validator.w 3.or g/mobile/ http://dev.w3.org / cvsweb/2007/mo bileok-ref/
  • 22. KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU Dịch vụ kiểm tra tính hợp lệ cho tài liệu CSS của W3C: http://jigsaw.w3.org/css-validator/ Dịch vụ kiểm tra tính hợp lệ cho tài liệu CSS của W3C: http://jigsaw.w3.org/css-validator/ Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 22
  • 23. KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU Trình kiểm tra mobileOK của W3C: http://validator.w3.org/mobile/ Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 23
  • 24. KIỂM THỬ TRANG WEB CHO DI ĐỘNG
  • 25. KIỂM THỬ TRANG WEB CHO DI ĐỘNG Phương pháp luận về kiểm thử trang web cho di động: Con đường truyền tin có thể thực hiện giữa trình duyệt di động và máy chủ web. Phương pháp luận về kiểm thử trang web cho di động: Con đường truyền tin có thể thực hiện giữa trình duyệt di động và máy chủ web. Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 25
  • 26. KIỂM THỬ TRANG WEB CHO DI ĐỘNG Những lưu ý khi kiểm thử trên trình duyệt di động: Sử dụng cả hai biện pháp truy cập Internet để kiểm thử website cho di động: wifi, 3G Khi không thể kiểm thử trên thiết bị di động thật thì việc kiểm thử được xem là thành công khi mô phỏng tốt nhất có thể trình duyệt di động, thiết bị di động và mạng di động: • Chức năng của trình duyệt di động • Các ràng buộc và chế độ hoạt động của thiết bị di động • Phương pháp truy cập Internet và sự chỉnh sửa đối với yêu cầu và hồi đáp web (bao gồm cả việc truy cập Internet bị ngắt quãng) Những lưu ý khi kiểm thử trên trình duyệt di động: Sử dụng cả hai biện pháp truy cập Internet để kiểm thử website cho di động: wifi, 3G Khi không thể kiểm thử trên thiết bị di động thật thì việc kiểm thử được xem là thành công khi mô phỏng tốt nhất có thể trình duyệt di động, thiết bị di động và mạng di động: • Chức năng của trình duyệt di động • Các ràng buộc và chế độ hoạt động của thiết bị di động • Phương pháp truy cập Internet và sự chỉnh sửa đối với yêu cầu và hồi đáp web (bao gồm cả việc truy cập Internet bị ngắt quãng) Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 26
  • 27. KIỂM THỬ TRANG WEB CHO DI ĐỘNG Chọn thiết bị di động dùng để kiểm thử: Việc kiểm thử trang web cho di động đầy đủ yêu cầu phải kiểm tra trên nhiều phiên bản trình duyệt di động, mô-đen thiết bị, hệ điều hành và mạng di động khác nhau Tuân theo quy trình sau đây để chọn tập các thiết bị di động mục tiêu cho việc kiểm thử website: • Hãy bắt đầu với tất cả thiết bị di động mục tiêu của website di động. • Sắp xếp các thiết bị này theo nhóm thích ứng nội dung • Sắp xếp các thiết bị theo phiên bản trình duyệt di động. Tìm user-agent của thiết bị hoặc tham khảo CSDL thiết bị để biết phiên bản trình duyệt Chọn thiết bị di động dùng để kiểm thử: Việc kiểm thử trang web cho di động đầy đủ yêu cầu phải kiểm tra trên nhiều phiên bản trình duyệt di động, mô-đen thiết bị, hệ điều hành và mạng di động khác nhau Tuân theo quy trình sau đây để chọn tập các thiết bị di động mục tiêu cho việc kiểm thử website: • Hãy bắt đầu với tất cả thiết bị di động mục tiêu của website di động. • Sắp xếp các thiết bị này theo nhóm thích ứng nội dung • Sắp xếp các thiết bị theo phiên bản trình duyệt di động. Tìm user-agent của thiết bị hoặc tham khảo CSDL thiết bị để biết phiên bản trình duyệt Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 27
  • 28. KIỂM THỬ TRANG WEB CHO DI ĐỘNG • Sắp xếp các thiết bị theo phiên bản và hệ điều hành di động. Chọn ít nhất một thiết bị cho mỗi phiên bản hệ điều hành để phục vụ cho việc kiểm thử. • Sắp xếp các thiết bị theo cách thức nhập dữ liệu và chế độ hoạt động. • Chọn thiết bị mạnh nhất và yếu nhất từ danh sách tất cả thiết bị được hỗ trợ • Tập hợp lại danh sách các thiết bị từ Bước 2 đến Bước 6. • Hãy đảm bảo rằng các thiết bị dùng để kiểm thử ở Bước 7 được các nhà vận hành mạng di động mục tiêu hỗ trợ với số lượng hợp lý • Sắp xếp các thiết bị theo phiên bản và hệ điều hành di động. Chọn ít nhất một thiết bị cho mỗi phiên bản hệ điều hành để phục vụ cho việc kiểm thử. • Sắp xếp các thiết bị theo cách thức nhập dữ liệu và chế độ hoạt động. • Chọn thiết bị mạnh nhất và yếu nhất từ danh sách tất cả thiết bị được hỗ trợ • Tập hợp lại danh sách các thiết bị từ Bước 2 đến Bước 6. • Hãy đảm bảo rằng các thiết bị dùng để kiểm thử ở Bước 7 được các nhà vận hành mạng di động mục tiêu hỗ trợ với số lượng hợp lý Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 28
  • 29. KIỂM THỬ TRANG WEB CHO DI ĐỘNG Kiểm thử trên thiết bị di động thật: Nhận biết thiết bị di động Chương trình dành cho lập trình viên: Hệ điều hành trên di động Chương trình dành cho lập trình viên Thiết bị ảo Nokia http://www.forum.nokia .com/ Không Kiểm thử trên thiết bị di động thật: Nhận biết thiết bị di động Chương trình dành cho lập trình viên: Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 29 Nokia http://www.forum.nokia .com/ Không Sony Ericsson http://developer.sony ericsson.com/ Có, được DeviceAnywhere hỗ trợ. http://www.deviceanyw here.com/sonyericsson/ welcome.htm
  • 30. KIỂM THỬ TRANG WEB CHO DI ĐỘNG Kiểm thử trên trình mô phỏng di động: Là giải pháp có độ chính xác hợp lý Trình mô phỏng có thể kiểm tra xem trang web cho di động có tuân theo chuẩn về mã đánh dấu và giới hạn về kích cỡ tài liệu được hỗ trợ trên thiết bị hay không? Việc mô phỏng trình duyệt sẽ giúp đánh giá gần đúng cách hiển thị và tính khả dụng của nội dung web trên thiết bị chính xác hơn so với dùng trình duyệt máy tính Kiểm thử trên trình mô phỏng di động: Là giải pháp có độ chính xác hợp lý Trình mô phỏng có thể kiểm tra xem trang web cho di động có tuân theo chuẩn về mã đánh dấu và giới hạn về kích cỡ tài liệu được hỗ trợ trên thiết bị hay không? Việc mô phỏng trình duyệt sẽ giúp đánh giá gần đúng cách hiển thị và tính khả dụng của nội dung web trên thiết bị chính xác hơn so với dùng trình duyệt máy tính Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 30
  • 31. KIỂM THỬ TRANG WEB CHO DI ĐỘNG Kiểm thử trên trình duyệt của máy tính: Là giải pháp kém hiệu quả hơn so với kiểm thử bằng trình mô phỏng hoặc trên thiết bị thật Trình duyệt máy tính không hoặc mô phỏng được rất ít những đặc trưng của trình duyệt di động và hệ sinh thái di động Kiểm thử trên trình duyệt của máy tính: Là giải pháp kém hiệu quả hơn so với kiểm thử bằng trình mô phỏng hoặc trên thiết bị thật Trình duyệt máy tính không hoặc mô phỏng được rất ít những đặc trưng của trình duyệt di động và hệ sinh thái di động Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 31
  • 32. TỔNG KẾT 2 phương pháp để tối ưu hóa mã đánh dấu cho di động: Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di động và máy chủ web. Đây là kỹ thuật thường được sử dụng nhất đối với người thiết kế web di động Tối đa hóa khả năng lưu trữ đệm (cache) Tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm bảo rằng tài liệu đánh dấu phù hợp với trình duyệt trên di động Phương pháp tối ưu nhất để kiểm thử web di động: kiểm thử trên thiết bị di động thật 2 phương pháp để tối ưu hóa mã đánh dấu cho di động: Kỹ thuật hậu xử lý để tối ưu hóa mã đánh dấu di động và máy chủ web. Đây là kỹ thuật thường được sử dụng nhất đối với người thiết kế web di động Tối đa hóa khả năng lưu trữ đệm (cache) Tính hợp lệ là điều cần thiết nhưng chưa đủ để đảm bảo rằng tài liệu đánh dấu phù hợp với trình duyệt trên di động Phương pháp tối ưu nhất để kiểm thử web di động: kiểm thử trên thiết bị di động thật Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 32