VIỄN THÔNG HÀ NỘI
TRUNG TÂM TIN HỌC
BÁO CÁO ĐỀ TÀI
XÂY DỰNG GIAO DIỆN TRANG WEBSITE VNPT HÀ NỘI
CHO CÁC THIẾT BỊ DI ĐỘNG
Mã số: VNPT-HNi-2013-06

Chủ trì đề tài: ThS.Trần Đình Chiến

P.PTPM3 - TTTH


2.1.3.Thị phần của các hệ điều hành cho thiết bị di động 12
2.1.4.Các hệ điều hành di động phổ biến 13
2.2.Một số trình duyệt Web thông dụng trên thiết bị di động 14
2.2.1.Google Chrome 14
2.2.2.Opera Mini 15
2.2.3.Opera Mobile 16
2.3.4.Mozilla Firefox 16
2.3.5.Dolphin Browser 18
2.3.Mô hình truy cập không dây 19
2.3.1.Tổng quan 19
2.3.2. Kiến trúc ứng dụng WAP 20
2.3.3.WAP Proxy, WAP Gateway và WAP Server 21
2.3.4.Mô hình bảo mật 25
2.4.Web Application và Native Application 29
2.4.1.So sánh Web Application và Native Application 29
2.4.2.Đặc điểm của Mobile Native Application 30
2.4.3.Đặc điểm Mobile Web Application 31
2.4.4.Đánh giá 32
2.5.Lựa chọn phát triển Native Application hay Web Application trên
Mobile 33

CHƯƠNG 3: THIẾT KẾ GIAO DIỆN VÀ CÔNG CỤ NHẬN DẠNG THIẾT BỊ
TRÊN MOBILE WEB APPLICATION 36

3.1.Responsive Design 36
3.2.Responsive Design cho Mobile Web Application 38
3.2.1.Fluid Grids 39
3.2.2.Media Queries 39
3.3.Lợi ích của Responsive Design trên trình duyệt Mobile 40
3.3.1.Bố cục trang Mobile Web 40

4.1.Thiết kế giao diện Web 61
4.1.1.Grateful Degradation 61
4.1.2.Progressive Enhancement 61
4.2. Các nguyên tắc cơ bản thiết kế giao diện Web cho thiết bị di
động 62

4.2.1. Màu sắc trong thiết kế 62
4.2.2.Thiết kế với người xem là trung tâm 63
4.2.3.Đơn giản trong thiết kế 63
4.2.4.Tương thích với trình duyệt 64
4.2.5.Luôn sử dụng thẻ Alt 66
4.2.6. Định dạng hình ảnh 66
4.2.7.Đặt tên hình ảnh hỗ trợ SEO và tìm kiếm 68
4.3.Thiết kế Website cho thiết bị di động 68
4.4.Áp dụng các nguyên tắc vào xây dựng giao diện hiển thị phù hợp
trên các thiết bị di động cho Website VNPT Hà Nội 69

4.5.Thể hiện giao diện Website VNPT Hà Nội trên thiết bị di động 72
4.5.1.Giao diện chính (Homepage) 72
4.5.2.Cấu trúc các lớp của trang Web 77
KẾT LUẬN 90
TÀI LIỆU THAM KHẢO 91 Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội


Chúng tôi xin chân thành cảm ơn lãnh đạo Viễn thông Hà Nội và các
đơn vị liên quan đã hết sức giúp đỡ tạo điều kiện để chúng tôi thực hiện đề
tài này.
Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

4
DANH MỤC HÌNH VẼ

Hình 2.1 Giới thiệu các HĐH của điện thoại di động
Hình 2.2 Thị phần các HĐH của điện thoại di động
Hình 2.3 Trình duyệt Google Chrome trên thiết bị di động
Hình 2.4 Trình duyệt Opera Mini trên thiết bị di động
Hình 2.5 Trình duyệt Mozilla Firefox trên thiết bị di động
Hình 2.6 Trình duyệt Dolphin trên thiết bị di động
Hình 2.7 Sự phát triển của điện thoại di động
Hình 2.8 Kiến trúc hệ thống truy cập trên Internet
Hình 2.9 WAP được dùng truy cập Internet
Hình 2.10 WAP được dùng truy cập Intranet
Hình 2.11 Server kết nối trực tiếp với Internet
Hình 2.12 Truy cập Internet thông qua Proxy Server
Hình 2.13 Gateway Server nằm giữa hai loại mạng khác nhau
Hình 2.14 Sử dụng WAP Proxy/Gateway
Hình 2.15 WAP Gateway trong mạng không dây

trên thiết bị di động
Hình 4.10 Giao diện tính năn xem và tải bản kê cước phí Website
VNPT Hà Nội trên thiết bị di động
Hình 4.11 Giao diện tính năng thanh toán cước viễn thông trực tuyến
Website VNPT Hà Nội trên thiết bị di động
Hình 4.12 Giao diện tính năng đăng ký dịch vụ gia tăng Website VNPT
Hà Nội trên thiết bị di động
Hình 4.13 Giao diện tính năng báo hỏng sửa chữa thuê bao Website
VNPT Hà Nội trên thiết bị di động
Hình 4.14 Giao diện tính năng tra cứu thông tin Website VNPT Hà Nội
trên thiết bị di động


Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

7
CHƯƠNG 1: SỰ CẦN THIẾT PHẢI THIẾT KẾ WEBSITE CHO
CÁC THIẾT BỊ DI ĐỘNG
1.1.Sự cần thiết phải thiết kế Website cho các thiết bị di động
Chỉ cách đây khoảng hai năm, nói tới thiết kế Website sẽ được hiểu là
thiết kế Website cho máy tính cá nhân, cả Laptop và Desktop. Khi đó, các
hãng viễn thông đã cho phép người dùng truy cập Internet ngay trên điện
thoại của mình. Tuy nhiên thực tế là chẳng mấy ai hứng thú với mức phí
Data đắt đỏ và màn hình cũng như hệ điều hành của các điện thoại khi đó rất

Trung tâm Tin học - Viễn thông Hà Nội

8
nơi, giúp họ cập nhật thông tin từ Internet một cách nhanh nhất. Thậm chí,
khi ta khởi động xong Laptop hay Desktop thì người bạn của ta sử dụng điện
thoại đã cập nhật xong những bức ảnh mới nhất lên Facebook. Cách mà
chúng ta tiếp cận với các Website đã thay đổi và các việc thiết kế các
Website cũng cần phải thay đổi để bắt kịp với những xu hướng mới.
Với nhiều ưu điểm như tính tức thời, cảm giác thoải mái, riêng tư, có
thể truy cập ở bất kỳ nơi đâu, cộng thêm giá cước ngày càng rẻ và thiết bị
đầu cuối đã đủ hoàn thiện, lướt Web trên thiết bị Mobile chính là hình thức
người dùng ưa chuộng nhất. Các số liệu thống kê về thị trường Internet vào
cuối năm 2012 vừa qua đều cho thấy: người dùng sử dụng thiết bị di động
như Smartphone và máy tính bảng Tablet để lướt Web đã vượt qua lượng
truy cập từ máy tính bàn Desktop hay Laptop.
Thực tế hiện nay, tất cả những khách hàng tiềm năng nhất của các
doanh nghiệp đều thích và thường xuyên truy cập Internet thông qua thiết bị
di động Mobile nhiều hơn. Nhiều khách hàng đã bỏ hẳn máy tính bàn
Desktop hay Laptop để truy cập Internet thông qua Tablet vì tính tức thời,
luôn sẵn sàng và cơ động. Vậy nếu Website được doanh nghiệp xem như
một cửa ngõ tiếp xúc với khách hàng, chắc chắn cần phải làm Website tối ưu
trên thiết bị di động.
Trước đây, việc thiết kế Website sử dụng cho điện thoại cũng đã được
biết tới. Giải pháp khi đó là viết một phần mềm cho điện thoại, với mục đích
tự động cập nhật thông tin từ Website. Cũng có thể là xây dựng một phiên
bản Web dành riêng cho điện thoại di động và sử dụng như một Sub-domain
(Ví dụ mobile.tenmien.com hay m.tenmien.com ). Các giải pháp này đòi
hỏi ngoài việc thiết kế Website thông thường, cần phải thiết kế thêm một
Website nữa hay một phần mềm di động nữa.
Trong một vài năm trở lại đây, các kỹ thuật thiết kế Website cũng có

đây là công việc tối ưu tổng thể. Khi thiết kế, cần phải tính thêm những vấn
đề nằm ngoài nhận biết của khách truy cập như Website sau khi tối ưu phải
được thân thiện trên các công cụ tìm kiếm, không đánh mất thứ hạng hiện có
hay lựa chọn Font chữ, Themes màu Website không quá lòe loẹt. Nói cách
khác, công việc này chính là xây dựng phiên bản trên thiết bị di động của
Website.
Đối với Website của VNPT Hà Nội, do vẫn dùng Source Code (mã
nguồn) của Website hiện tại và chỉnh sửa thành Website mới cho thiết bị di
động, nên nội dung công việc đỡ phức tạp hơn.
1
.2.Phiên bản Website tốt dành cho thiết bị di động
- Cấu trúc giao diện, điều hướng nội dung sắp xếp hợp lý, tiện lợi cho
thao tác chạm cảm ứng.
- Hình ảnh được Resize và nén cho phù hợp độ phân giải, Website tải
nhanh hơn.
- Giảm bớt các Banner, nội dung không phù hợp, sắp xếp vào vị trí hợp
lý.
- Font chữ và định dạng bài viết hợp lý, tinh chỉnh màu sắc phù hợp.
Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

10
- Quan trọng nhất: Lựa chọn và tập trung vào một số nội dung cốt lõi
mà người dùng thường quan tâm, lược bỏ những nội dung kém quan
trọng.
Nói tóm lại, giao diện, màu sắc, nội dung hiển thị gồm cả hình ảnh,
chữ viết là những điểm cơ bản cần đảm bảo. Tiếp theo là trải nghiệm người
dùng với các nút bấm có kích cỡ và sắp xếp hợp lý. Cuối cùng Website phải
đủ nhẹ để tải nhanh trên thiết bị di động.
Nhưng như vậy liệu việc tối ưu hóa Website cho thiết bị di động có

ĐỘNG
2.1.Hệ điều hành trên các thiết bị di động
2.1.1.Giới thiệu các hệ điều hành cho thiết bị di động

Hệ điều hành di động (Mobile Operating System) còn được biết đến
như Mobile OS, Mobile Software Platform hay Handheld Operating System
là hệ điều hành điều khiển thiết bị di động giống như các hệ điều hành dành
cho máy tính để bàn hay Laptop như Windows, Mac OS X hay Linux.

Những ví dụ tiêu biểu cho các thiết bị chạy trên hệ điều hành di động
là SmartPhoness, Personal Digital Assistant (PDAs), Tablet Computer và
Information Applicance, hoặc đôi khi ám chỉ các thiết bị thông minh có thể
dùng với các hệ thống nhúng hay các thiết bị di động khác và thiết bị không
dây.
Hình 2.1. Giới thiệu các HĐH của điện thoại di động
2.1.2.Lịch sử phát triển các hệ điều hành cho thiết bị di động

Tầm quan trọng ngày càng tăng của thiết bị di động đã gây ra sự tranh
đua mãnh liệt giữa các nhà khổng lồ về phần mềm như Google, Microsoft và
Apple cũng như những công ty hàng đầu về thiết bị di động như Nokia,
Research In Motion (RIM) và Palm trong nỗ lực nắm bắt được thị trường
lớn nhất này.
Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

12
Với sự ra đời của iPhone vào năm 2007, Apple đã tấn công vào ngành

thúc hợp tác với Micrsoft về phát triển Symbian OS, hệ điều hành phổ biến
nhất dành cho điện thoại thông thường.

Đáng chú ý rằng Intel đang bắt đầu tập trung vào các thiết bị di động
hơn là điện thoại di động. Có thể kể đến là Mobile Internet Devices (MID)
và Ultra-Mobile PC (UMPC). Trong lúc đó, Palm đã từ bỏ kế hoạch phát
triển Foleo, một thiết bị đi chung với SmartPhone.
2.1.4.Các hệ điều hành di động phổ biến

a. Android của Google Inc. (Mã nguồn mở)

Android được phát triển bởi một công ty được Google Inc. mua và
Google tiếp tục cập nhật phần mềm. Android là hệ điều hành mã nguồn mở
bắt nguồn từ Linux Kernel cùng với những nhà phát triển phần mềm như
Intel, HTC, ARM, Samsung.

b. BlackBerry của RIM (Mã nguồn đóng)

BlackBerry tập trung vào thao tác dễ dàng và được thiết kế cho việc
kinh doanh. Gần đây rất nhiều những ứng dụng bên thứ 3 đã được phát triển
và BlackBerry đã được nâng cấp để hỗ trợ đầy đủ cho Multimedia. Chiến
lược tương lai của RIM là tập trung vào hệ điều hành QNX và trông đợi
QNX dành cho SmartPhone đã ra mắt vào đầu năm 2012.

c. iOS của Apple Inc. (Mã nguồn đóng)

iPhone, iPod hay iPad đều sử dụng chung một hệ điều hành được gọi
là iOS, được phát triển từ Mac OS X. Những ứng dụng của bên thứ 3 không
được hỗ trợ chính thức cho tới phiên bản iOS 2.0 vào tháng 7/2008. Hiện tại
tất cả thiết bị dùng iOS được phát triển bởi Apple và được sản xuất bởi

f. webOS của HP

webOS là hệ điều hành di động độc quyền chạy trên Linux Kernel,
được phát triển bởi Palm, sau đó được mua bởi HP. HP đã tung ra hai điện
thoại là Veer, Pre 3 và Tablet TouchPad chạy trên webOS.

Có thể thấy rằng Android đang lên như một cơn sóng, trở thành một
hệ điều hành mã nguồn mở tiềm năng.
2.2.Một số trình duyệt Web thông dụng trên thiết bị di động
2.2.1.Google Chrome

Đây là phiên bản di động của trình duyệt máy tính để bàn phổ biến
của Google, Chrome có một giao diện bóng bẩy, tích hợp chặt chẽ với các
bản sao của Chrome trên các thiết bị khác, cho phép người dùng có thể đồng
bộ giữa máy tính xách tay, Smartphone, máy tính bảng…

Trong khi các trình duyệt lướt Web trên di động khác như Opera
không hỗ trợ đồng bộ Bookmark thì chỉ có Chrome cung cấp tính năng đồng
bộ này giữa các phiên hoạt động. Tuy nhiên Chrome chỉ hoạt động trên
phiên bản Android 4.0 hoặc cao hơn và không hỗ trợ Flash.
Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

15
Hình 2.3. Trình duyệt Google Chrome trên thiết bị di động

2.2.2.Opera Mini

Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

17
Firefox dành cho Smartphone cũng có các tính năng tương tự như
phiên bản cho PC. Về các tính năng cơ bản, Firefox dành cho Android rất
giống với các lựa chọn của các trình duyệt phổ biến khác như Opera và
Chrome. Firefox cũng cho phép đồng bộ các thiết lập và Bookmark giữa
thiết bị di động và PC. Nó có giao diện tương tự giúp người dùng không cảm
thấy xa lạ và thiếu bất cứ chức năng nào so với phiên bản PC.

Hình 2.5. Trình duyệt Mozilla Firefox trên thiết bị trên di độngGiống như phiên bản dành cho máy tính để bàn, Firefox trên di động
cũng cho phép tải và cài đặt các ứng dụng của bên thứ ba. Do đó chúng
không chặn các phần mềm quảng cáo. Firefox kém Opera về tốc độ và sự
đơn giản, tuy nhiên người dùng có thể tùy biến trình duyệt theo cách riêng
của mình.
Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

18
2.3.5.Dolphin Browser

Chrome, Firefox hay Opera có thể là những trình duyệt nổi tiếng mà
bất cứ ai cũng biết, nhưng đối với người dùng thiết bị di động thì Dolphin

WAP Market Strategies của Ovum () đã so
sánh và dự đoán sự phát triển của các thế hệ điện thoại di động nói chung,
các thế hệ điện thoai di động hỗ trợ Internet và các loại điện thoại di động hỗ
trợ Internet hiện đang được dùng để truy cập thông tin.
Hình 2.7. Sự phát triển của điện thoại di động

Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

20
Chính nhu cầu truy cập thông tin từ các thiết bị di động đã mở đường
cho các công nghệ không dây phát triển mạnh mẽ. Wireless Application
Protocol (WAP) là một dạng đặc tả theo chuẩn công nghiệp mở cho các ứng
dụng thực thi trên môi trường mạng không dây chú trọng vào các ứng dụng
trên thiết bị di động, đặc biệt là điện thoại di động. Các tiêu chuẩn này được
đưa ra bởi WAP Forum được thành lập vào tháng 6/1997 bởi Ericsson,
Nokia, Motorola và Unwired Planet và hiện được hàng trăm hãng khác tham
gia bao gồm cả IBM, Hewlett Packard, Visa và Microsoft. Theo thống kê
chính thức của WAP Forum, những thành viên thuộc WAP Forum hiện đại
diện cho trên 90% nhà sản xuất điện thoại di động trên toàn thế giới.

WAP đã và sẽ được hỗ trợ trên nhiều loại thiết bị từ đơn giản như điện
thoại di động thông thường cho đến những thiết bị thế hệ mới như điện thoại
“thông minh” với màn hình rộng có thể chạy được nhiều ứng dụng, thậm chí
là cả những máy PDA, Palmtop hay các máy tính kích thước nhỏ gọn. Tất cả
các thiết bị di động rồi sẽ được áp dụng công nghệ WAP trực tiếp từ nhà sản
xuất hay là từ phiên bản nâng cấp nào đó thuộc nhóm các hãng thứ ba


Hình 2.8. Kiến trúc hệ thống truy cập trên Internet Hình 2.9. WAP được dùng truy cập Internet

Hình 2.10. WAP được dùng truy cập Intranet
2.3.3.WAP Proxy, WAP Gateway và WAP Server

Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

22
Ba thuật ngữ này thường được sử dụng thay thế cho nhau nhưng trong
môi trường mạng thì chúng lại hoàn toàn khác nhau với những chức năng
cũng khác nhau:

• Server: là phần tử trong mạng chứa thông tin hoặc các ứng dụng
Web/WAP.
• Proxy: là một phần tử trung gian, hoạt động cả như Client lẫn Server
trên mạng. Nó nằm giữa các Client và các Origin Server. Các Client
gửi yêu cầu đến cho Proxy, nó sẽ truy xuất và lưu trữ thông tin cần
thiết bằng cách giao tiếp với trình duyệt gốc.
• Gateway: là một thành phần trung gian thường được dùng để nối kết

Hình 2.14. Sử dụng WAP Proxy/Gateway

Hình 2.14 cho thấy một WAP Gateway cùng với các phần tử khác
trong mạng không dây và mô tả cách mà một WAP Gateway cộng tác và
giao tiếp với tất cả các phần tử khác để cung cấp một dịch vụ phù hợp.

Xây dựng giao diện trang website VNPT Hà Nội cho các thiết bị di động
Trung tâm Tin học - Viễn thông Hà Nội

24Hình 2.15. WAP Gateway trong mạng không dây

Hình 2.16. Quá trình biên dịch các yêu cầu tại Protocol Gateway

Hình 2.16 mô tả quá trình biên dịch tại Gateway chuyển đổi giao thức
các yêu cầu được gửi và nhận giữa thiết bị di động và mạng Internet. Chức
năng mã hoá/giải mã (CODEC) bên trong Gateway được dùng để chuyển
đổi nội dung dạng WML và WML Script thành một dạng phù hợp với các