bài 6 kiểm tra tính hợp lệ và tối ưu hóa mã web di động
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.66 MB, 32 trang )
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"
" />mobile11.dtd"><html xmlns=" />rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce
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>
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"
" />mobile11.dtd"><html xmlns=" />rel="stylesheet" href="/styles.css" type="text/css" /><title>Produce
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>
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
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/
/
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:
/>Dịch vụ kiểm tra tính hợp lệ cho tài liệu CSS của
W3C:
/>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:
/>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
