BÁO CÁO:Kiểm tra và khắc phục mã nguồn về khả năng truy cập thuận tiện ứng dụng web trên mobile

BÁO CÁO NCKH CẤP TRƯỜNG
ĐỀ TÀI


Software Engineering Department | Email:

Hưng yên, tháng 03 năm 2013
Chủ nhiệm đề tài: Ks. Lê Thị Thu Hương
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN
KHOA CÔNG NGHỆ THÔNG TIN
Kiểm tra và khắc phục mã nguồn về khả năng
truy cập thuận tiện ứng dụng web trên mobile

03/2013
NỘI DUNG
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
2/32


Website
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
3/20 3/32

03/2013
Thiết bị di động

4/20 4/32

Màn hình kích thước nhỏ
Giới hạn về CPU
Không thiết
bị chuột
Bàn phím nhỏ
Hạn chế bộ nhớ
Chi phí
Dung lượng
pin hạn chế
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013
WACG & MWBP
 The Web Content Accessibility Guidelines (WCAG) là
chuẩn truy cập thuận tiện nội dung website dành cho người
khuyết tật.

 The Mobile Web Best Practices (MWBP) là chuẩn truy cập
thuận tiện website dành cho thiết bị di động. Nó bao gồm nhiều chỉ
dẫn với mục tiêu cải tiến kinh nghiệm người sử dụng trên mobile.

5/32
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013
Mobile Web Best Practices
 Tạo ra trang web có thể truy cập
trên thiết bị một cách liền mạch, tin
cậy, hiệu quả về chi phí.
 Có 10 nguyên tắc và 60 chỉ dẫn
nên nhớ khi tạo nội dung trang web
trên mobile.

6/32


Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013
Kinh nghiệm người dùng








7/20 7/32

Hạn chế về bàn phím và
không có chuột
Không có khả năng điều
khiển
Nhập văn bản tự do, dài
dòng
Ồn và ở những nơi công
cộng
Điếc hoặc khó nghe Chỉ có âm thanh nhắc
nhở ví dụ: errors,
warnings
Ánh sáng lóa Người bị mù màu và
khiếm thị
Thông tin truyền tải
bằng cách sử dụng
màu sắc
Ngữ cảnh người dùng
mobile
Ngữ cảnh người dùng
bị khuyết tật
Vấn đề

Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013
Các giải pháp
8/32
AVOID_FREE_TEXT &

PROVIDE_DEFAULTS
Không nội
dung văn bản
Nhập văn bản tự do, dài
dòng
NON-
TEXT_ALTERNATIVES
Không nội
dung văn bản
Chỉ có âm thanh nhắc
nhở ví dụ: errors,
warnings
USE_OF_COLOR Sử dụng màu Thông tin truyền tải bằng
cách sử dụng màu sắc
WCAG 2.0 MWBP Vấn đề
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013

Nội dung nghiên cứu của đề tài
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
9/20 9/32

 Tìm hiểu công nghệ và nguyên tắc xây dựng ứng dụng web
trên di động
 Đề xuất mô hình và thuật toán kiểm tra cho một số chỉ dẫn
truy cập thuận tiện

 Cài đặt thử nghiệm công cụ giúp kiểm tra khả năng truy cập
thuận tiện của dịch vụ web trên di động
03/2013

Sản phẩm của đề tài
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
10/20 10/32

Sản phẩm của đề tài là một bản báo cáo kết quả nghiên cứu
của đề tài và một công cụ kiểm tra mã nguồn về khả năng truy
cập thuận tiện. Kết quả chính của đề tài được công bố trong 01
bài báo, cụ thể là:
1. Lê Thị Thu Hương, Đào Anh Hiển (2012) Kiểm tra mã nguồn về khả năng
truy cập thuận tiện ứng dụng web trên mobile. Tạp chí Nghiên cứu khoa học
và công nghệ quân sự: những tiến bộ của kỹ thuật máy tính, Điện – điện tử,
Công nghệ thông tin trong Khoa học và Cuộc sống, ISSN 1859-1043, Đặc
san, 11-2012, tr. 169-176

03/2013

Cấu trúc của báo cáo tổng kết
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
11/20 11/32

Báo cáo chia thành 03 chương:
Chương I. Tổng quan

Chương II. Thuật toán kiểm tra các chỉ dẫn truy
cập thuận tiện
Chương III. Xây dựng công cụ và đánh giá khả
năng thực hiện của công cụ
03/2013

Chương I. Tổng quan
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
12/20 12/32

1.1. Tìm hiểu công nghệ và nguyên tắc xây dựng ứng dụng di động
1.2. Các chỉ dẫn về khả năng truy cập thuận tiện ứng dụng
1.3. Nội dung và đóng góp của đề tài
03/2013
1.1. Tìm hiểu công nghệ và nguyên tắc xây dựng ứng dụng di động
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
13/20 13/32

Chương I. Tổng quan
 Xây dựng website trên di động cũng đòi hỏi các yếu tố cơ bản
của người lập trình khi tạo ra các website chạy trên máy tính PC
như là yếu tố thẩm mỹ, cách trình bày, bố cục trang, nội dung
hiển thị…
 Thiết kế website trên di động cần phải tuân thủ theo những luật
hay nguyên tắc xây dựng riêng
 Báo cáo trình bày 17 chỉ dẫn hay nguyên tắc khi thiết kế ứng

dụng web trên di động
03/2013
1.2. Các chỉ dẫn về khả năng truy cập thuận tiện
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
14/20 14/32

Chương I. Tổng quan
 Tổ chức W3C đã đưa ra khoảng 60 chỉ dẫn truy cập thuận tiện
các ứng dụng web trên di động
 Mỗi chỉ dẫn sẽ đưa ra những gợi ý về việc thiết kế website đảm
bảo tính truy cập thuận tiện trên mobile
 Ví dụ:
[PAGE_TITLE] Cung cấp một mô tả tiêu đề trang ngắn gọn.
[NO_FRAMES] Không sử dụng khung - frames.
[TABLES_NESTED] Không sử dụng bảng tạo tổ lồng nhau.
[TABLES_LAYOUT] Không sử dụng các bảng để bố trí
v v …
03/2013
1.3. Nội dung và đóng góp của đề tài
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
15/20 15/32

Chương I. Tổng quan
 Tìm hiểu công nghệ và nguyên tắc xây dựng ứng dụng web trên di
động
 Tìm hiểu về lý thuyết truy cập thuận tiện MWBP

 Đề xuất mô hình kiểm tra theo yêu cầu
 Đề xuất thuật toán kiểm tra cho một số chỉ dẫn truy cập thuận tiện
 Xây dựng công cụ kiểm tra theo mô hình và thuật toán đã đề xuất.
03/2013

Chương II. Thuật toán kiểm tra
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
16/20 16/32

2.1. Đề xuất một số chỉ dẫn truy cập thuận tiện
2.2. Đề xuất kiến trúc hệ thống
2.3. Thuật toán kiểm tra một số chỉ dẫn truy cập thuận tiện
2.4. Đánh giá ưu khuyết điểm của giải pháp
03/2013
2.1. Một số chỉ dẫn truy cập
thuận tiện
17/32
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
PROVIDE_DEFAULTS: cung cấp giá trị mặc định lựa chọn trước đó khi
mà có thể
POP_UPS: không tạo ra cửa sổ pop up hoặc các cửa sổ khác xuất hiện
và không thay đổi cửa sổ hiện hành mà không có thông báo cho người sử
dụng
AUTO REFRESH: không tạo ra các trang định kỳ làm mới, trừ khi bạn đã
thông báo cho người sử dụng và cung cấp phương tiện để ngăn chặn nó
REDIRECTION: không sử dụng đánh dấu để chuyển hướng các trang tự

động. Thay vào đó, cấu hình máy chủ để thực hiện việc chuyển hướng
bằng phương tiện mã HTTP 3xx
03/2013
2.1. Một số chỉ dẫn truy cập
thuận tiện
18/32
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
NO FRAME: không sử dụng khung
NON-TEXT ALTERNATIVE: cần phải có văn bản thay thế
PAGE TITLE: cung cấp mô tả ngắn về tiêu đề trang
TABLE ALTERNATIVE: có thể thay thế việc lựa chọn bảng để
biểu diễn
TABLES NESTED: không sử dụng bảng lồng nhau
TABLES LAYOUT: không sử dụng bảng để trang trí
03/2013
2.2. Kiến trúc hệ thống
19/32
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013
20/32
Chỉ dẫn
Phân tích thẻ Thuộc tính Giá trị
AUTO_REFRESH & REDIRECTION
Meta http-equiv not null/ refresh
IMAGE_MAPS
Input Type image

NO_FRAMES
iFrame/
Frame/
Frameset
NON_TEXT_ALTERNATIVES
Img alt Null or length=0
PAGE_TITLE
title Contain(“head”)
POP_UPS
a Target _self | _parent |
_top
PROVIDE_DEFAULTS
Select Selected Not null
TABLE_ALTENATIVES
table
TABLE_LAYOUT Table Name=“tr”
TABLES_NESTED
Table Contain(“table”)
2.3. Thuật toán kiểm tra một số
chỉ dẫn truy cập thuận tiện
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013
21/32
2.3. Thuật toán kiểm tra một số
chỉ dẫn truy cập thuận tiện
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị

Kiểm tra chỉ dẫn [AUTO REFRESH & REDIRECTION]
Thuật toán: muốn kiểm tra chỉ dẫn này cần phân tích thẻ content
Mô hình:
03/2013
22/32
2.3. Thuật toán kiểm tra một số
chỉ dẫn truy cập thuận tiện
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
Kiểm tra chỉ dẫn [NO FRAMES]
Thuật toán: chỉ dẫn này được kiểm tra trong thẻ có frame, iframe, frameset
Mô hình:
03/2013
2.4. Đánh giá ưu khuyết điểm
của giải pháp
23/32
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
 Đây là một hướng rất mới ra đời từ năm 2008 nên chưa có
nhiều lý thuyết và ứng dụng về hướng nghiên cứu đề này.
 Nhóm tác giả dựa trên cơ sở lý thuyết về MWBP từ đó đề
xuất các thuật toán kiểm tra cho các tiêu chí truy cập thuận
tiện này.
 Tuy nhiên, chúng tôi chưa thể kiểm chứng được giải pháp
mà chúng tôi đề xuất là đúng đắn hoàn toàn.
03/2013

Chương III. Xây dựng công cụ

& đánh giá kết quả
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
24/20 24/32

3.1. Xây dựng công cụ hỗ trợ kiểm tra mã nguồn về khả năng truy
cập thuận tiện
3.2. Thử nghiệm công cụ kiểm tra
3.3. Đánh giá kết quả
03/2013
3.1. Xây dựng công cụ kiểm
tra mã nguồn
Đầu vào:
 Địa chỉ URL của website
Đầu ra:
 Phân tích các thẻ của website đã đạt chuẩn truy
cập thuận tiện trên mobile
25/32
Phần I. Tổng quan
Phần II. Các kết quả chính của đề tài
Phần III. Kết luận và khuyến nghị
03/2013