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
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 độngTRANSCRIPT
![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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/1.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/2.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/3.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/4.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/5.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/6.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/7.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/8.jpg)
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' Market has weekly produce specials! Click the image below toseethis week' 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' Market has weekly produce specials! Click the image below toseethis week' 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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/9.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/10.jpg)
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
![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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/11.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/12.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/13.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/14.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/15.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/16.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/17.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/18.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/19.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/20.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/21.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/22.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/23.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/24.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/25.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/26.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/27.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/28.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/29.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/30.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/31.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022020123/559114601a28ab0b168b45e5/html5/thumbnails/32.jpg)
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