bài 6 kiểm tra tính hợp lệ và tối ưu hóa mã web di động

MỤC TIÊU BÀI HỌCTố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

Trang 1

BÀI 6 KIỂM TRA TÍNH HỢP LỆ VÀ TỐI ƯU HÓA MÃ WEB DI

ĐỘNG

Trang 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

Trang 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

Trang 4

TỐI ƯU HÓA MÃ WEB DI ĐỘNG

Trang 5

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)

Trang 6

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ữngthà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ệnphầ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ữngthà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ệnphần mềm mã nguồn mở

Trang 7

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ầnthiế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ầnthiế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

Trang 8

• 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"

mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce

"http://www.openmobilealliance.org/tech/DTD/xhtml-Specials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>Sunset Farmers' Market has weekly produce specials! Click the image below to see

this week' 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>

"http://www.openmobilealliance.org/tech/DTD/xhtml-Specials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>Sunset Farmers' Market has weekly produce specials! Click the image below to see

this week' 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>

Trang 9

Đ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

Trang 10

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

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

Trang 11

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ảmthiể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ặcdeflate để 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ảmthiể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ặcdeflate để giải nén và hiển thị những nội dung đã

được nén

Trang 12

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

Trang 13

đá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

đá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

Trang 14

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.

AddOutputFilterByType DEFLATE text/html text/plain text/xml

application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript

application/javascript text/css

</Location>

# Cho phép nén file trong thư mục /books/bmwd/08/compressed directory.

AddOutputFilterByType DEFLATE text/html text/plain text/xml

application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript

application/javascript text/css

</Location>

Trang 15

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áckiể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áckiể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

Trang 16

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ủatà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ủatài liệu

Last-Modified: Mon, 02 Oct 1989 22:49:17 GMT

Trang 17

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

Expires: Sun, 18 Oct 2009 00:00:00 GMT

Trang 18

KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH

DẤU WEB DI ĐỘNG

Trang 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ớinhiề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ẽ ảnhhưởng đến khả năng tương thích của tài liệu đối vớitrì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ớinhiề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ẽ ảnhhưởng đến khả năng tương thích của tài liệu đối vớitrì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

Trang 20

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

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

Trang 21

Các trình kiểm tra tính hợp lệ sẵn có cho mã đánh

XHTML và những

mã đánh dấu web khác.

http://validator.w 3.

org/

http://validator.w 3

XHTML và những

mã đánh dấu web khác.

http://validator.w 3.

org/

http://validator.w 3

g/mobile/

http://dev.w3.org /

cvsweb/2007/mo bileok-ref/

Trang 22

Dịch vụ kiểm tra tính hợp lệ cho tài liệu CSS của

Trang 23

Trình kiểm tra mobileOK của W3C:

http://validator.w3.org/mobile/

Trang 24

KIỂM THỬ TRANG WEB CHO DI ĐỘNG

Trang 25

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

Trang 26

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ểmthử 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ỏngtố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)