Xây dựng giao diện trang Website VNPT Hà nội cho các thiết bị di động

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

Hà nội 10 - 2013



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

1
MỤC LỤC

LỜI NÓI ĐẦU 3
DANH MỤC HÌNH VẼ 4
DANH MỤC TỪ VIẾT TẮT 6
CHƯƠNG 1: SỰ CẦN THIẾT PHẢI THIẾT KẾ WEBSITE CHO CÁC THIẾT
BỊ DI ĐỘNG 7

1.1.Sự cần thiết phải thiết kế Website cho các thiết bị di động 7
1.2.Phiên bản Website tốt dành cho thiết bị di động 9
CHƯƠNG 2: TỔNG QUAN VỀ ỨNG DỤNG TRÊN THIẾT BỊ DI ĐỘNG 11
2.1.Hệ điều hành trên các thiết bị di động 11
2.1.1.Giới thiệu các hệ điều hành cho thiết bị di động 11
2.1.2.Lịch sử phát triển các hệ điều hành cho thiết bị di động 11

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

3.3.2.Nhận dạng thiết bị và áp dụng Responsive Web Design 41
3.3.3.Lợi ích của Responsive Web Design 42
3.3.4.Hiệu năng của Responsive Web Design 42
3.4.Thiết kế giao diện Responsive Design trong 3 bước 43
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

2
3.5.Các kỹ thuật thiết kế giao diện Responsive Design 47

3.5.1.Sử dụng giá trị % 47
3.5.2.Sử dụng Word-break 50
3.5.3.Sử dụng Overflow:hidden 50
3.5.4.Sử dụng Max Width 51
3.5.5.Sử dụng Min Width 52
3.5.6.Responsive Image 52
3.5.7.Responsive Video 53
3.6.Các nguyên tắc thiết kế giao diện Responsive Design 54
3.6.1.Độ phân giải màn hình 54
3.6.2.Flexible Layout 55
3.6.3.Filament Group’s Responsive Images 55
3.6.4.Media Queries 55
3.6.5.Ẩn hoặc hiển thị nội dung 55
3.6.6.Touchescreen và Cursors 56
3.7.Thiết kế công cụ nhận dạng thiết bị trên Website của VNPT Hà
Nội 56

CHƯƠNG 4: 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 61

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

3
LỜI NÓI ĐẦU

Hà Nội là thủ đô của đất nước, với mật độ dân số hơn 7 triệu người,
tập trung nhiều văn phòng, doanh nghiệp lớn. Với vai trò là nhà cung cấp
chủ lực các dịch vụ, sản phẩm công nghệ thông tin tới khách hàng ở Thủ đô,
VNPT Hà Nội phải phục vụ số lượng khách hàng không hề nhỏ. Ngoài việc
cung cấp thông tin về dịch vụ, hiện nay trang Web của VNPT Hà Nội còn
đóng vai trò là cổng giao tiếp điện tử của doanh nghiệp với khách hàng
nhằm mục đích chăm sóc khách hàng được mọi lúc, mọi nơi. Trang Web của
VNPT Hà Nội cũng là nơi để khách hàng tra cứu thông tin về tài khoản cá
nhân, các khoản cước phí… và đăng ký thêm các dịch vụ gia tăng khi có nhu
cầu.

Tuy nhiên, Hiện tại VNPT Hà Nội mới chỉ cung cấp giao diện Web
chuẩn trên các thiết bị máy tính, chưa triển khai cung cấp giao diện cho thiết
bị truy nhập di động có đặc điểm là kích cỡ màn hình hạn chế.

Xuất phát từ nhu cầu thực tế của khách hàng là muốn truy nhập
Website bằng các thiết bị di động ở bất cứ nơi nào vào bất cứ thời gian nào,
nhóm nghiên cứu đề tài đề xuất nghiên cứu giao diện Website của VNPT Hà
Nội có khả năng tự nhận diện thiết bị đầu cuối để người dùng không cần
phải chọn lựa phiên giao diện chuẩn hay giao diện di động.

Với khả năng tự nhận biết thiết bị truy nhập, người dùng chỉ cần gõ
địa chỉ tên miền trên thiết bị di động, giao diện di động của Website VNPT
Hà Nội sẽ hiện ra. Người dùng hoàn toàn có thể dễ dàng chuyển từ giao diện
di động sang giao diện chuẩn một cách đơn giản để truy nhập đầy đủ thông
tin trên trang Website.

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

Hình 2.16 Quá trình biên dịch các yêu cầu tại Protocol Gateway
Hình 2.17 Mô tả chức năng mã hoá/giải mã của WAP Gateway
Hình 2.18 Mô hình giao tiếp cổ điển trên Internet
Hình 2.19 Mô hình giao tiếp trên WAP
Hình 3.1 Thiết kế giao diện Responsive Design
Hình 3.2 Minh họa padding sử dụng px và %
Hình 3.3 Minh họa margin sử dụng px và %
Hình 3.4 Minh họa sử dụng % cho font-size
Hình 3.5 Minh họa khi chưa sử dụng overflow:hidden
Hình 3.6 Minh họa sau khi sử dụng overflow:hidden
Hình 3.7 Màn hình hiển thị ngang và đứng
Hình 4.1 Hiển thị trên các trình duyệt
Hình 4.2 Giao diện chính Website VNPT Hà Nội trên thiết bị di động
Hình 4.3 Giao diện tiếng Anh Website VNPT Hà Nội trên thiết bị di
động
Hình 4.4 Giao diện tin tức theo chủ đề Website VNPT Hà Nội trên
thiết bị di động
Hình 4.5 Giao diện tin tức chi tiết Website VNPT Hà Nội trên thiết bị
di động
Hình 4.6 Giao diện đăng nhập Website VNPT Hà Nội trên thiết bị di
động
Hình 4.7 Giao diện menu chính Website VNPT Hà Nội trên thiết bị di
động
Hình 4.8 Giao diện tính năng thay đổi thông tin khách hàngWebsite
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

5
VNPT Hà Nội trên thiết bị di động
Hình 4.9 Giao diện tính năng xem cước nóng Website VNPT Hà Nội

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

6
DANH MỤC TỪ VIẾT TẮT

CSS3 Cascading Style Sheets Version 3
HTML5 Hyper Text Mark Language Version 5
OS Operating System
PC Personal Computer
PHP6 Hypertext Preprocessor Version 6
SEO Search Engine Optimization
WAP Wireless Access Protocol
WML

Wireless Mark Language

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

tệ.
Nhưng năm 2011 đánh dấu bước ngoặt khi hàng loạt các thiết bị di
động với hệ điều hành thông minh và chất lượng phần cứng, màn hình cảm
ứng và tuyệt đẹp giúp cải thiện cảm nhận của người dùng. Và chúng ta bắt
đầu phải thích nghi với xu hướng mới: thiết kế các Website có thể hoạt động
trên các thiết bị di động khác nhau.
Và bây giờ, chúng ta đang chứng kiến một cuộc cách mạng thực sự
với điện thoại và các thiết bị di động. Hãy dành khoảng 10 phút quan sát
những thiết bị di động đang được sử dụng quanh ta. Những chiếc điện thoại
thông minh với cấu hình phần cứng còn cao hơn cấu hình của một chiếc máy
tính Desktop cách đây 10 năm. Phần lớn người dùng Việt Nam đang ưa thích
những chiếc điện thoại với màn hình khá lớn, trang bị màn hình cảm ứng mà
giá của chúng còn đắt hơn 1 chiếc máy tính xách tay.
Năm 2011 cũng đánh dấu sự ra đời hàng loạt và cạnh tranh gay gắt
của các máy tính bảng - được gọi là Tablet chạy hệ điều hành thông minh
Android hay iOS. Chắc hẳn những Kindle Fire, Ipad, Blackberry Playbook
là những cái tên quen thuộc bởi không ít lần chúng ta đã tiếp xúc với chúng,
ít nhất là qua Tivi hay trên các tờ báo. Các mẫu điện thoại và các mẫu máy
tính bảng mới liên tục được giới thiệu, thu hút người tiêu dùng bởi các tính
năng ngày càng được cải tiến. Với công nghệ 3G đã được phát triển ở Việt
Nam từ rất sớm, ngày nay ngay kể cả một cậu sinh viên cũng có thể sử dụng
điện thoại hay máy tính bảng của mình để cập nhật Facebook khi đang ngồi
trên xe buýt.
Chúng tôi đang muốn nói đến những bước phát triển nổi bật mà không
ít người đã coi là một cuộc cách mạng trên các thiết bị di động. Xã hội càng
phát triển, con người càng có xu hướng kết nối và cập nhật thông tin mọi
lúc, mọi nơi. Việc truy cập Website từ điện thoại thông minh hay máy tính
bảng ngày nay đã là việc làm thường xuyên của không ít người. Điều đơn
giản là điện thoại hay máy tính bảng đều rất nhỏ gọn, theo mọi người đi mọi
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

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ó

những bước tiến vượt bậc và ta đã có những giải pháp khác. Các ngôn ngữ
lập trình ngày một được hoàn thiện, các kỹ thuật mới ngày càng sáng tạo.
HTML5, CSS3, PHP6 mang đến cho người thiết kế Web nhiều giải pháp
mới để lập trình Website, trong đó có kỹ thuật Responsive. Cho tới thời
điểm này, Website của VNPT Hà Nội cũng đã được nâng cấp theo các kỹ
thuật Responsive. Khi thu nhỏ cửa sổ trình duyệt, chúng ta sẽ thấy giao diện
trang Web cũng sẽ được thu nhỏ theo đúng tỷ lệ. Khi xem Website của
VNPT Hà Nội trên Tablet, Ipad, điện thoại với những kích cỡ màn hình khác
nhau, ta cũng không phải kéo thanh cuộn ngang để xem hết trang Web như
trước kia.
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

9
Dần dần các Website chưa được tối ưu hóa trên thiết bị di động đang
bị coi là lỗi thời, kém cập nhật, dẫn đến hạ thấp uy tín thương hiệu, khối
lượng truy cập và mức độ truy cập thường xuyên của người dùng. Theo phân
tích của các nhà nghiên cứu Internet, người dùng khi truy cập trên thiết bị di
động sẽ thoát và chọn một Website khác vì các lý do:
- Website tải quá chậm trên thiết bị di động, do chưa được tối ưu về
dung lượng cho khả năng tải của thiết bị và thường là chậm hơn.
- Hình ảnh bị vỡ và cỡ chữ không được tối ưu với độ phân giải của thiết
bị đi động, nội dung chi tiết thường quá nhỏ không thể đọc được, tiêu
đề thì quá to đến mức không cần thiết
- Nút bấm trên Website quá nhỏ và không đặt ở vị trí thuận lợi.
- Cấu trúc Website không được dàn trải hợp lý cho kích cỡ màn hình
nhỏ hơn của thiết bị di động.
- Chức năng điều hướng, phân mục nội dung Website không sắp xếp
hợp lý.
Như vậy, tối ưu hóa Website không chỉ là thiết kế lại giao diện, mà

đâ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ó

đánh mất hệ thống nhận diện thương hiệu của doanh nghiệp hay không? Hệ
thống nhận diện thương hiệu phải được thể hiện khác nhau trên nhiều môi
trường khác nhau. Giống như Logo doanh nghiệp tối thiểu phải có phiên bản
màu - trắng đen, hoặc bảng hiệu công ty trên giấy phải khác trên bảng quảng
cáo. Nếu hiểu rõ về thương hiệu, Website trên di động sẽ giúp người dùng
ghi nhớ thương hiệu doanh nghiệp dễ dàng hơn là nhìn thấy Layout nhỏ xíu
của Website cũ trên thiết bị mới.


















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

11
CHƯƠNG 2: TỔNG QUAN VỀ ỨNG DỤNG TRÊN THIẾT BỊ DI

ĐỘ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

công nghiệp di động và mở ra một kỷ nguyên của hệ điều hành dành cho
SmartPhone, tập trung vào kinh nghiệm của người dùng và trông cậy vào
tương tác hướng chạm. Vào tháng 10/2007, Google thành lập Open Handset
Alliance với 79 công ty viễn thông, phần cứng, phầm mềm khác nhau để
xâm nhập vào thị trường SmartPhone thông qua hệ điều hành Android và
nhận được những phản hồi tích cực từ cộng đồng và giới truyền thông.

Từ khi có sự xuất hiện iOS của Apple và Android của Google, thị
trường SmartPhone đã bùng nổ thật sự với hơn 17,3% thiết bị di động sử
dụng các HĐH này đã được bán ra vào tháng 5/2010. Điều này dẫn tới sự
nhận thức càng lớn của người tiêu dùng về các hệ điều hành di động, khiến
cho các nhà sản xuất quảng cáo liên tục về những hệ điều hành di động khác
nhau của họ. Tháng 2/2011, Google giữ 33,3% thị phần SmartPhone trên
toàn thế giới, cho thấy sự lớn mạnh đáng kinh ngạc của Android OS so với
năm trước đó là 4,7%. Nokia, Apple, RIM và Microsoft tương ứng giữ 31%,
16,2%, 14,6% và 3,1% thị phần.



Hình 2.2. Thị phần các HĐH của điện thoại di động
2.1.3.Thị phần của các hệ điều hành cho thiết bị di động

Hệ điều hành di động đang trong giai đoạn non trẻ và thật khó để dự
đoán về sự phát triển thị phần trong tương lai. Tuy nghiên, một xu hướng rõ
ràng là các hệ điều hành được phát triển cho thiết bị thông minh nhiều hơn là
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

13
cho những điện thoại thông thường. Tháng 2/2011, Nokia đã thông báo kết

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

Foxconn hoặc những đối tác của Apple.

d. Symbian của Symbian Foundation (Open public license)

Symbian có thị phần lớn nhất trên hầu hết thị trường, nhưng bị bỏ lại
sau những công ty nhỏ khác ở thị trường Bắc Mỹ. Điều này tương đồng với
sự thành công của Nokia trong hầu hết thị trường trừ Nhật Bản. Ở Nhật Bản,
Symbian rất mạnh bởi sự quan hệ với NTT DoCoMo. Nó được dùng bởi
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

14
những nhà sản xuất máy thu phát cầm tay gồm BenQ, Fujitsu, LG,
Mitsubishi, Motorola, Nokia, Samsung, Sharp và Sony Ericsson. Những
thiết bị dựa trên Symbian hiện nay được tạo bởi Fujitsu, Nokia, Samsung,
Sharp và Sony Ericsson. Gần đây, mặc dù sự xuất khẩu thiết bị Symbian đã
tăng nhưng thị phần trên toàn thế giới đã sụt giảm từ hơn 50% thành chỉ hơn
40% từ 2009 sang 2010. Nokia đã chuyển giao Symbian cho Accenture để
tiếp tục hỗ trợ cho tới 2016.

e. Windows Phone của Microsoft (mã nguồn đóng)

Ngày 15/2/2010, Microsot khai trương hệ điều hành thế hệ tiếp theo
Windows Phone 7. Hệ điều hành mới này sở hữu một giao diện cuốn hút lấy
cảm hứng từ Metro Design Language của Microsoft. Nó được tích hợp đầy
đủ các dịch vụ của Microsoft như Windows Live, Zune, Xbox Live và Bing
nhưng cũng tích hợp nhiều những dịch vụ không phải của Microsoft như
Facebook hay Google Accounts. Phiên bản mới nhận được phản hồi tích cực
từ báo chí công nghệ.

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

Ra đời từ năm 2006, Opera Mini có lẽ là trình duyệt ra đời lâu nhất và
được sử dụng nhiều nhất trên các Smartphone. Theo báo cáo của Opera
Software, tính đến tháng 2/2013 đã có 300 triệu thiết bị sử dụng trình duyệt
Opera Mini. Trình duyệt này được thiết kế để nén dữ liệu và thay đổi kích cỡ
trang một cách thông minh, phù hợp với mọi kích cỡ màn hình của thiết bị.
Kết quả là trình duyệt mang hiển thị dữ liệu khá nhanh, ngay cả trên các
thiết bị có tốc độ xử lý chậm.
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

16


Hình 2.4. Trình duyệt Opera Mini trên thiết bị di động


Tuy nhiên, phiên bản này không hỗ trợ Flash cũng như các hình ảnh
động, chất lượng hình ảnh cũng kém hơn so với không nén dữ liệu. Nhìn
chung, Opera Mini nhanh, dễ sử dụng và đáp ứng nhu cầu của người dùng ở
mức trung bình.
2.2.3.Opera Mobile

Là anh em của Opera Mini, Opera Mobile bổ sung thêm một vài tính
năng hữu ích khác. Opera Mobile cũng cung cấp một số tính năng nén dữ
liệu như Opera Mini nhưng hỗ trợ Flash, hình ảnh động, HTML5 Kết quả
là nó mang lại cho người dùng cảm giác như trải nghiệm trình duyệt trên
máy tính để bàn với các nội dung đa phương tiện phong phú.
2.3.4.Mozilla Firefox

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 động


Giố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

Browser là một trình duyệt đáng để trải nghiệm. Trình duyệt này sở hữu
thiết kế đơn giản, khá giống với Chrome của Google nhưng có tốc độ tải
Web nhanh hơn trên cả 3G và Wi-Fi, tính năng Zoom mượt mà, hỗ trợ nhiều
Add-on hữu ích. Một số Add-on đáng chú ý trên Dolphin bao gồm YouTube
Search, eBay Search, Dolphin Translate, Password Manage Pro hay PDF
Viewer.



Hình 2.6. Trình duyệt Dolphin trên thiết bị trên 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

19
Tính năng thú vị nhất của trình duyệt này chính là hỗ trợ duyệt Web
bằng cử chỉ. Người dùng có thể cài đặt để nhanh chóng việc truy cập vào
Google bằng cách vẽ lên màn hình của máy chữ G. Tuy nhiên, điểm hạn chế
là trình duyệt này không có khả năng hiển thị phù hợp theo kích cỡ trang,
tức là chúng cố định giao diện hiển thị của trang web nên cho dù hiển thị
trên màn hình lớn thì cửa sổ trình duyệt Web vẫn căn gọn vào giữa.
2.3.Mô hình truy cập không dây
2.3.1.Tổng quan

Trong những năm gần đây, khái niệm về thông tin di động đang được
mọi người ưu chuộng. Người ta quan tâm ngày càng nhiều hơn đến các thiết
bị nhỏ gọn với tốc độ xử lý nhanh.

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

(Third-party). Mỗi một thiết bị có một cách hiển thị khác nhau và các
phương pháp nhập liệu khác nhau. Công việc của công nghệ WAP là sắp
xếp lại “mớ hỗn độn” đó và cung cấp một chuẩn (Framework) chung cho
phép các ứng dụng chạy được trên cả tất hệ nền khác nhau này.
2.3.2. Kiến trúc ứng dụng WAP

Các giao thức WAP được thiết kế trên nền của các giao thức Web.
Mục đích của WAP là sử dụng lại cấu trúc cơ sở của Web để từ đó nâng cao
quá trình giao tiếp giữa nhà cung cấp và các thiết bị di động giúp quá trình
này trở nên hiệu quả và tốn ít thời gian hơn là sử dụng chính các giao thức
Web.

Do kiến trúc của WAP được thiết kế gần giống với Web nên nó cũng
kế thừa mô hình Client/Server được dùng trên Internet. Điểm khác nhau
chính là sự có mặt của WAP Gateway dùng cho việc chuyển đổi giữa HTTP
và WAP.

Để truy cập vào một ứng dụng trên Server, Client khởi tạo một nối kết
với WAP Gateway và gửi yêu cầu đi. Gateway sẽ chuyển đổi những yêu cầu
này sang định dạng được dùng trên Internet (HTTP) sau đó chuyển chúng
đến Server cung cấp dịch vụ. Nội dung trả về được gửi từ Server đến
Gateway, tại đây nó sẽ được chuyển sang định dạng WAP và sau đó gửi về
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

21
cho thiết bị di động. Như vậy, Gateway đã giúp Internet có thể giao tiếp với
môi trường mạng không dây.

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

hai loại mạng khác nhau. Nó nhận yêu cầu trực tiếp từ các Client như
thể nó chính là một Server mà Client muốn truy xuất thông tin. Các
Client này thông thường không nhận ra mình đang giao tiếp với
Gateway.



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

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

23


Hình 2.13. Gateway Server nằm giữa hai loại mạng khác nhau

Trong kiến trúc WAP, WAP Gateway thật ra là một Proxy. Nó được
dùng để nối một vùng mạng không dây (Wireless Domain) với mạng
Internet. Tuy nhiên nó có thêm chức năng của Gateway chuyển đổi giao thức
(Protocol Gateway) và chức năng mã hoá/giải mã.

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

24


Hì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