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

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

Upload: hoc-lap-trinh-web

Post on 29-Jun-2015

867 views

Category:

Documents


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 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

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

ĐỘNG

Page 2: 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

NHẮC LẠI BÀI TRƯỚC

Tổng quan về tạo App trong DreamweaverCấu hình, tùy chỉnh các App (ứng dụng) cho thiết bịdi độngXây dựng ứng dụngMột số cải tiến cho web di động:

Tổng quan về kỹ thuật web di độngWebkit trong trình duyệt web di độngMột số trình duyệt web trên các thiết bị di động

Tổng quan về tạo App trong DreamweaverCấu hình, tùy chỉnh các App (ứng dụng) cho thiết bịdi độngXây dựng ứng dụngMột số cải tiến cho web di động:

Tổng quan về kỹ thuật web di độngWebkit trong trình duyệt web di độngMộ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

Page 3: 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

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ấumobileTố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ấumobileTố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

Page 4: 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

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

Page 5: 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

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ủ webTố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ủ webTố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

Page 6: 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

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ữngthành phần quan trọng của tài liệu và loại bỏ cácphần nội dung không liên quanTùy thuộc vào việc chọn lựa framework thực thi, cáckỹ 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ácphần nội dung không liên quanTùy thuộc vào việc chọn lựa framework thực thi, cáckỹ 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ở

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

Page 7: 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

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ầ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áytí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áytính

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

Page 8: 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

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àiliệu web)

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTDXHTML Mobile 1.1//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><linkrel="stylesheet" href="/styles.css" type="text/css" /><title>ProduceSpecials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>SunsetFarmers&apos; Market has weekly produce specials! Click the image below toseethis week&apos; specials.</p><div class="content"><img id="theImg"src="raspberries.jpg" alt="Produce Specials"/><div id="theText">$2.50 perpint</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//DTDXHTML Mobile 1.1//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><linkrel="stylesheet" href="/styles.css" type="text/css" /><title>ProduceSpecials</title></head><body><h1 class="hdr">Weekly Specials</h1><p>SunsetFarmers&apos; Market has weekly produce specials! Click the image below toseethis week&apos; specials.</p><div class="content"><img id="theImg"src="raspberries.jpg" alt="Produce Specials"/><div id="theText">$2.50 perpint</div></div><div class="nav"><a href="#">market home</a></div></body></html>

Page 9: 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

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 đượctrì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 đượctrì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

Page 10: 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

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ênthiết bị di động đời cũ.Khi trang web được đóng gói bằng MIME đa phần, tasử 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ênthiết bị di động đời cũ.Khi trang web được đóng gói bằng MIME đa phần, tasử 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/htmlimage/jpg

Content-ID ID duy nhất của tài nguyêntrong hồi đáp web

[email protected]

Page 11: 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

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 dungtrê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 đápweb và sử dụng header hồi đáp để yêu cầu máykhách lưu trữ đệm nội dung webTrình duyệt điện thoại thông minh và một số trìnhduyệ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 dungtrê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 đápweb và sử dụng header hồi đáp để yêu cầu máykhách lưu trữ đệm nội dung webTrình duyệt điện thoại thông minh và một số trìnhduyệ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

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

Page 12: 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

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ệuweb nhờ sử dụng giải thuật gzip hoặc deflateViệ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ệtTrình duyệt trên di động (hoặc trên máy tính) sử dụngheader Accept-Encoding trong yêu cầu HTTP để yêu cầumá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áchcá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ệuweb nhờ sử dụng giải thuật gzip hoặc deflateViệ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ệtTrình duyệt trên di động (hoặc trên máy tính) sử dụngheader Accept-Encoding trong yêu cầu HTTP để yêu cầumá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áchcá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

Page 13: 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

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ưngtrê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áchsử 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ạtbộ 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ưngtrê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áchsử 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ạtbộ 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

Page 14: 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

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

Ví dụ Cấu hình máy chủ web Apache 2 cho phépné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/xmlapplication/vnd.wap.xhtml+xml application/xhtml+xml text/javascriptapplication/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/xmlapplication/vnd.wap.xhtml+xml application/xhtml+xml text/javascriptapplication/javascript text/css</Location>

Page 15: 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

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ộidung web động và nội dung web tĩnhIIS cho phép nén các file HTML tĩnh theo mặc địnhnhư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ộidung web động và nội dung web tĩnhIIS cho phép nén các file HTML tĩnh theo mặc địnhnhư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

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

Page 16: 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

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ángvà 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ếtngà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ángvà 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ếtngày tháng và thời gian của lần sửa đổi cuối cùng củatà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

Page 17: 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

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

Header Expires trong HTTP :Header Expires trong hồi đáp HTTP cho biết ngàythá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ớ đệmmáy khách

Header Expires trong HTTP :Header Expires trong hồi đáp HTTP cho biết ngàythá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ớ đệmmá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

Page 18: 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

KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNHDẤU WEB DI ĐỘNG

Page 19: 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

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ệ trongtrang 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 nhaumã đá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ưởngtrê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ệ trongtrang 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 nhaumã đá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ưởngtrê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

Page 20: 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

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ượngvà 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ớnhơn bình thường có thể vẫn đúng về mặt cú phápnhưng sẽ bị mắc lỗi trầm trọng khi chạy trên thiết bịdi động thậttính hợp lệ là điều cần thiết nhưng chưa đủ để đảmbảo rằng tài liệu đánh dấu phù hợp với trình duyệttrê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ượngvà 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ớnhơn bình thường có thể vẫn đúng về mặt cú phápnhưng sẽ bị mắc lỗi trầm trọng khi chạy trên thiết bịdi động thậttính hợp lệ là điều cần thiết nhưng chưa đủ để đảmbảo rằng tài liệu đánh dấu phù hợp với trình duyệttrên di động

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

Page 21: 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

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ã đánhdấu

Trình kiểm tratính hợp lệ

Phạm vi kiểm tratính hợp lệ

URL Mã nguồn

Dịch vụ kiểm tratính hợp lệ chomã đánh dấu(MarkupValidationService) của W3C

Cú pháp mã đánhdấu HTML,XHTML và nhữngmã đánh dấuweb khác.

http://validator.w3.org/

http://validator.w3.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 tratính hợp lệ chomã đánh dấu(MarkupValidationService) của W3C

Cú pháp mã đánhdấu HTML,XHTML và nhữngmã đánh dấuweb khác.

http://validator.w3.org/

http://validator.w3.org/source/

Trình kiểm traMobileOK củaW3C

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

http://dev.w3.org/cvsweb/2007/mobileok-ref/

Page 22: 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

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ủaW3C:

http://jigsaw.w3.org/css-validator/

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

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

Page 23: 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

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

Page 24: 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

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

Page 25: 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

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ìnhduyệ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ìnhduyệ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

Page 26: 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

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ểmthử website cho di động: wifi, 3GKhi 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ậpInternet 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ểmthử website cho di động: wifi, 3GKhi 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ậpInternet 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

Page 27: 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

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ầuphả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 độngkhác nhauTuâ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ủawebsite 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ếtbị để 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ầuphả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 độngkhác nhauTuâ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ủawebsite 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ếtbị để 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

Page 28: 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

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ấtcả 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ước6.

• 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êuhỗ 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ấtcả 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ước6.

• 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êuhỗ 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

Page 29: 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

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 độngChươ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 cholậ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 độngChươ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.sonyericsson.com/

Có, đượcDeviceAnywhere hỗ trợ.http://www.deviceanywhere.com/sonyericsson/welcome.htm

Page 30: 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

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ạnvề kích cỡ tài liệu được hỗ trợ trên thiết bị haykhông?Việc mô phỏng trình duyệt sẽ giúp đánh giá gần đúngcách hiển thị và tính khả dụng của nội dung web trênthiết bị chính xác hơn so với dùng trình duyệt máytí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ạnvề kích cỡ tài liệu được hỗ trợ trên thiết bị haykhông?Việc mô phỏng trình duyệt sẽ giúp đánh giá gần đúngcách hiển thị và tính khả dụng của nội dung web trênthiết bị chính xác hơn so với dùng trình duyệt máytính

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

Page 31: 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

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ằngtrình mô phỏng hoặc trên thiết bị thậtTrì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ệ sinhthá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ằngtrình mô phỏng hoặc trên thiết bị thậtTrì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ệ sinhthái di động

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

Page 32: 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

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 đượcsử dụng nhất đối với người thiết kế web di độngTố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ảorằng tài liệu đánh dấu phù hợp với trình duyệt trên diđộngPhươ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 đượcsử dụng nhất đối với người thiết kế web di độngTố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ảorằng tài liệu đánh dấu phù hợp với trình duyệt trên diđộngPhươ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