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

Tên đề tài: “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

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.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

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

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

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

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

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

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

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ý

- 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

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à

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à

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

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

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

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

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

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

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 (http://www.ovum.com) đã 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

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

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

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

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

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

mạng có băng thông thấp (thường ở dạng nhị phân) Quá trình này được mô

tả trong hình 2.17 dưới đây

Hình 2.17 Mô tả chức năng mã hoá/giải mã của WAP Gateway

Một dịch vụ khác mà chức năng CODEC có thể cung cấp là biên dịch HTML hay văn bản thành WML/XTHML Tuy nhiên, việc sử dụng Gateway như vậy còn rất nhiều giới hạn Mặc dù HTML và WML/XHTML đều cho phép hiển thị các nội dung động cũng như các dạng dữ liệu đa truyền thông (Multimedia) như hình ảnh, âm thanh, đồ họa hay các cấu trúc phức tạp như các khung, các bảng lồng nhau nhưng với những giới hạn của thiết bị di động (bộ nhớ nhỏ, băng thông thấp, độ trễ cao) thì việc chuyển đổi đơn thuần sẽ gây không ít khó khăn cho việc hiển thị

2.3.4.Mô hình bảo mật

a Bảo mật trên mạng Internet

Giả sử thiết bị ở phía Client là một PC được kết nối với Internet thông qua một ISP dùng Modem với giao thức PPP (Point-to-Point Protocol) Người dùng được ISP định danh trước khi cho phép sử dụng mạng do mình cung cấp Các giao thức định danh này thực hiện bằng cách sử dụng tên và mật khẩu mà người dùng cung cấp Khi việc định danh hoàn tất, thiết bị ở phía Client được cung cấp một địa chỉ IP và đăng ký địa chỉ này với ISP Tiếp theo, RAS Server sẽ đóng vai trò như một Proxy đối với thiết bị Client

và thực hiện gửi đi các gói IP nhận được từ Client rồi thu thập các gói tin gửi thẳng đến Server và chuyển tiếp chúng thông qua nối kết PPP

Hình 2.18 Mô hình giao tiếp cổ điển trên Internet

Mạng của ISP sẽ kết nối với mạng trục Internet (Internet Backbone) thông qua một Router hoặc Gateway Đồng thời sự có mặt của tường lửa (Firewall) sẽ bảo vệ mạng của ISP với những những lưu chuyển bên ngoài mạng Internet (Firewall có thể nằm độc lập hoặc tích hợp ngay trong Router) Khi ra bên ngoài Internet, dữ liệu sẽ đi qua nhiều mạng chuyển mạch (Circuit-Switched) và chuyển mạch gói (Packet-Switched), lưu chuyển

từ Router này qua Router khác trước khi đi đến đích

Phương thức bảo mật phổ biến nhất được dùng để bảo vệ là giao thức TLS (Transport Layer Security), trước đây là SSL (Secure Sockets Layer) Đây là một giao thức ở tầng vận chuyển Khi Client yêu cầu một phiên làm việc an toàn với Server, các tham số của phiên sẽ được trao đổi giữa Client

và Server trước khi phiên làm việc an toàn được thiết lập Tất cả các giao tiếp giữa Client và Server đều được mã hóa bằng các thuật toán và khóa được trao đổi như là một phần của việc thiết lập phiên Mặc dù kẻ tấn công

có thể sẽ chặn được các gói tin thiết lập phiên nhưng với sự có mặt của khóa (Key) đủ để đảm bảo rằng phiên làm việc không bị ảnh hưởng Điều này đạt được là do các khóa phiên được hình thành nhờ vào sự phối hợp của các

khóa của phiên giao dịch, kẻ tấn công phải sở hữu một trong số các khoá riêng này

TLS cung cấp các giao tiếp an toàn dạng End-to-End giữa Client và Server Với hướng giao tiếp này, tất cả dữ liệu được mã hóa và không thể được giải mã bởi bất kỳ trạm trung gian nào giữa Client và Server

b Bảo mật trên di động

Cũng giống như Internet, bảo mật được thực hiện ngay trên tầng vận chuyển Mô hình trên mạng Internet thực thi phần lớn các chức năng bảo mật của mình trong TLS còn WAP thì thực hiện phần lớn trong WTLS (WTLS dựa trên nền của TLS)

Trong mô hình này, nối kết được thiết lập thông qua điện thoại di động nhưng lúc này kết nối được quản lý bởi người điều khiển mạng chứ không phải từ ISP Khi điện thoại thực hiện cuộc gọi, tín hiệu sẽ được truyền đến cho người quản lý, nó thực hiện việc tìm đường đi thông qua một trong những Modem của mình và nối kết với RAS Server cũng giống như trong

mô hình mạng Internet RAS Server cũng sẽ thực hiện việc định danh nhưng một khi gói tin đi qua RAS Server thì thay vì tìm đường trên Internet đến Web Server, dữ liệu được định tuyến đến WAP Gateway Tại đây dữ liệu sẽ được biên dịch thành dạng nhị phân nếu (cần sau) đó được chuyển đi không dây Gateway cũng hoạt động như là một Proxy đối với điện thoại, việc giao tiếp với Web Server được thực hiện thông qua các giao thức HTTP 1.1 Web Server không quan tâm là mình đang giao tiếp với một WAP Gateway bởi

nó xem Gateway đơn giản như là một thiết bị Client

Web Server có thể nằm ngay bên trong mạng hay cũng có thể thuộc một tổ chức bên ngoài khác WAP Gateway sẽ gửi các gói tin HTTP của

mình qua tường lửa đến Web Server thuộc mạng cần đến

Hình 2.19 Mô hình giao tiếp trên WAP

c Chứng thực người dùng

Khi muốn nối kết với ISP, ta cần phải cung cấp ID và mật khẩu người dùng để ISP thực hiện việc chứng thực Hầu hết mọi người đều lưu trữ những thông tin này bên trong máy tính của mình và chúng sẽ đại diện cho người dùng mỗi khi cần đến Sẽ không có vấn đề gì nếu như mỗi người có một máy tính cho riêng mình nhưng điều gì sẽ xảy ra khi có nhiều người cùng truy cập trên cùng một máy tính? Khi đó người sử dụng sau có thể sử dụng thông tin của người sử dụng trước đó để truy cập Internet, gửi nhận Email hay thậm chỉ có thể sử dụng cả những chứng nhận (Certificate) của người dùng trước Trường hợp này đòi hỏi hệ thống cần được quản lý bằng một cơ chế bảo mật nào đó Những vấn đề có thể được bỏ qua trong môi trường có dây thông thường nhưng trong thế giới không dây thì lại là cả một vấn đề Có sự khác nhau rõ ràng giữa việc chứng thực thiết bị sử dụng và chứng thực người dùng, sự khác nhau này quan trọng hơn trong trường hợp

có nhiều ứng dụng

Mặc dù vấn đề này tồn tại trên môi trường thương mại điện tử cũng như trên môi trường di động nhưng trong môi trường di động nó lại được ưu tiên cao hơn Khi số lượng điện thoại di động cũng như các thiết bị di động khác tăng lên thì tỷ lệ bị mất cắp cũng sẽ tăng theo Một số tổ chức thậm chí còn không dùng các máy Laptop cho đội ngũ bán hàng của mình vì các máy Laptop rất dễ bị mất cắp và dẫn đến việc mất thông tin quan trọng có trên máy

Trong nhiều hệ điều hành, vấn đề bảo mật không chỉ dừng ở mức giao thức, nó còn có nhiều dạng khác nhau như bảo mật ở cấp tệp tin thông qua việc sử dụng các danh sách điều khiển truy xuất ACL (Access Control Lists) Nhưng nếu ACL được lưu trữ dưới dạng tệp tin thì các thể hệ thống khác cũng có thể đọc được nội dung này Về bản chất đây không phải là vấn

đề của WAP, nhưng nó lại là một vấn đề của công nghệ di động và cần phải được quan tâm nếu như các thiết bị di động chứa các thông tin quan trọng

Một cách để tránh được trường hợp này là không bao giờ lưu các thông tin quan trọng trên thiết bị di động nếu có thể Một khả năng khác là thực hiện việc chứng thực người dùng Sử dụng cách chứng nhận sẽ định danh một cách hiệu quả các thiết bị và thiết lập một kết nối an toàn, sau đó tất cả dữ liệu được truyền đi dưới dạng được mã hoá yêu cầu người dùng nhập vào ID và mật khẩu Chúng ta có thể dùng bất kỳ một kỹ thuật thông thường nào để xác nhận ID và mật khẩu như Kerberos, LDAP hay một sản phẩm chứng thực người dùng nào đó

2.4.Web Application và Native Application

2.4.1.So sánh Web Application và Native Application

Xu thế lập trình ngày càng hướng tới thiết bị di động trong đó Native Application và Web Application đang trở nên mạnh mẽ hơn bao giờ hết Về lịch sử thì Mobile Native Application ra đời trước Mobile Web Application, chỉ nổi bật khi kho ứng ứng AppStore của Apple ra đời

Mobile Application là một phần mềm được viết cho một thiết bị di động như điện thoại hoặc Tablet, thực hiện một tác vụ đặc biệt cho một nhu cầu của người dùng như: Game, lịch, trình chơi nhạc, bản đồ Google Map

Native Application là một ứng dụng được thiết kế đặc biệt chỉ chạy trên một hệ điều hành của một thiết bị nào đó và thường phải điều chỉnh để chạy được trên các thiết bị khác nhau Ví dụ Game Angry Bird được Download trên AppStore tức là chúng phải chỉ chạy trên iOS, nếu cài đặt trên HĐH khác thì nó không thể hiểu được, Facebook Native Application hiện tại có mặt trên các AppStore như Google Market, Apple Store… mà người dùng phải truy nhập vào đó tải về và cài đặt trên máy, là ứng dụng được viết bằng Native Code cho từng hệ điều hành sử dụng nó Facebook Application trên Android sẽ được viết bằng Java, Facebook Application trên iOS sẽ được viết bằng Object C

Web Application là ứng dụng chạy trên nền tảng Web-based Ứng dụng này sẽ chạy trên trình duyệt của thiết bị di động đó Ví dụ Facebook Web Application trong trường hợp này sẽ là http://m.facebook.com, chạy bằng trình duyệt trên cả 2 HĐH trên

Về mặt tính năng thì cả 2 hầu như giống nhau trên 90% Web Application trên Mobile có xu hướng phát triển về mặt giao diện và kỹ thuật càng giống với Native Application càng tốt Tuy nhiên không phải những gì Native Application làm được thì Web Application cũng có thể (điều ngược lại sẽ đúng)

2.4.2.Đặc điểm của Mobile Native Application

• Về mặt Performance: Mobile Native Application chạy nhanh hơn Mobile Web Application trong hầu hết trường hợp Tuy nhiên sự chênh lệch ở các ứng dụng có thể là rất nhỏ, chấp nhận được và khó nhận biết bởi người dùng Hiện tại, với ứng dụng Game thì Mobile

• Về mặt tính năng: Mobile Native Application có khả năng truy cập phần cứng (như Camera, GPS, thiết bị thu âm…) và có thể truy cập đến các quyền Local như : sao chép, tạo, ghi, đọc tập tin (trên bộ nhớ của Mobile) về thông tin danh bạ, thông tin cá nhân, thực hiện cuộc gọi, nhắn tin… Trong khi Mobile Web Application thì không thể (chỉ

có thể đọc file để Upload)

• Chế độ Offline-mode: Mobile Native Application có lợi thế so với Mobile Web Application (Mobile Web Application luôn phải chạy Online) Ở Offline-mode, Mobile Native Application sẽ dùng những

dữ liệu đã Cache trước đó ở lần cuối cùng mà người dùng truy cập Online

• Việc bảo trì hay nâng cấp sẽ làm mất nhiều thời gian do phải sửa chữa từng Application trên từng HĐH, thủ tục đưa lên chợ ứng dụng và chờ đợi Approval (đôi khi bị Reject vì vi phạm một số điều lệ của nhà phát triển chợ ứng dụng), nên bản cập nhật không đến tay người dùng ngay lập tức, hơn nữa họ phải tự Update khi vào chợ ứng dụng

• Tính đa dạng phiên bản của HĐH làm cản trở việc phổ dụng các Mobile Native Application Các thiết bị chạy phiên bản HĐH cũ hơn

sẽ không cài đặt được

2.4.3.Đặc điểm Mobile Web Application

a Điểm mạnh

• Cross platform: Có thể chạy trên tất cả trình duyệt của Mobile hỗ trợ

• Thuận lợi cho các nhà phát triển: với một phiên bản duy nhất cho tất

cả, nên giảm chi phí và thời gian cho phát triển, bảo trì, cũng như nâng cấp sau này

• Ngôn ngữ lập trình phổ dụng là HTML và Javascript mà hầu hết các lập trình viên đều biết

• Không giới hạn môi trường lập trình, lập trình viên có thể làm việc trên hầu hết các HĐH

• Ứng dụng không cần phải được Build lại qua SDK hoặc một công cụ phát triển độc quyền khác như xCode (chỉ cần Deploy lên Server và chạy)

• Việc cập nhật phiên bản sẽ đến ngay lập tức và trong suốt với người dùng (ngay sau khi Deploy) mà không cần thông qua thủ tục và chờ đợi Approval như các chợ ứng dụng

• Có thể được đánh dấu bởi Search Engines (tốt cho SEO)

• Dễ dàng quảng bá: người dùng có thể tìm thấy thông qua Search Engine, Share Link từ Email, từ Social Netwoks hoặc từ các dich vụ quảng cáo trực tuyến như Google Ads

b Điểm yếu

• Về Performance: không chạy nhanh, không thích hợp cho các ứng dụng Game

• Luôn phải chạy Online, không thể phát triển ở chế độ Offline-mode

• Thích hợp cho các ứng dụng, dịch vụ thường là miễn phí, vì thủ tục thanh toán không an toàn và nhanh chóng, dẫn đến thu hút tiêu dùng kém

2.4.4.Đánh giá

Như đề cập ở trên, ta đã thấy được điểm mạnh và yếu của Web Application và Native Application trên Mobile Điều này sẽ làm gây khó khăn cho ta trong quyết định chọn 1 trong 2 để đạt được hiệu quả tốt nhất

Các nhà phát triển HĐH cho Mobile đã giúp chúng ta có thể dung hòa

2 lựa chọn trên bằng cách mang đến cho lập trình viên một Component là Web View Đây là một Component viết bằng Native Code, có thể chạy được hầu hết tính năng mà trình duyệt hệ điều hành đó đang có thông qua điều khiển bằng Native Code

2.5.Lựa chọn phát triển Native Application hay Web Application trên Mobile

Nếu để nói một cách ngắn gọn về tương lai của các dịch vụ gia tăng (VAS) thì trong khoảng vài năm tới, gần như tất cả các dịch vụ VAS hiện đang triển khai qua SMS-based đều sẽ phát triển chậm lại, trừ một số dịch

vụ kiểu SMS Mobile Marketing

Không thể phủ nhận một điều là từ trước đến nay các dịch vụ nội dung SMS-based với ưu điểm là không kén thiết bị đầu cuối của người dùng, không cần khởi tạo Connection và dễ sử dụng luôn đóng góp phần lớn vào doanh thu thị trường VAS Nhưng sau sự kiện triển khai 3G kéo theo sự phổ biến của Mobile Internet, người dùng tất yếu sẽ đòi hỏi sự khác biệt về chất trong cách thức họ sử dụng các dịch vụ VAS

Trong tương lai gần, khi ngày càng nhiều người dùng có sẵn kết nối Mobile Internet, việc khách hàng đọc báo miễn phí từ các bản Mobile Reader là điều không hiếm Thay vì chờ SMS trả kết quả, họ bật ứng dụng

và xem Live Mọi thông tin mà người dùng quan tâm giờ đây nằm gọn trong một Icon trên màn hình điện thoại, và chỉ với một Click họ có ngay thông tin

mà họ cần, Live và thậm chí hoàn toàn miễn phí Với nội dung Multimedia, khách hàng có thể dùng thử, nghe thử, Customize nội dung theo ý mình hoặc thoải mái lựa chọn kích thước hay định dạng phù hợp với dòng điện thoại đang sử dụng, thanh toán Online… Tất cả đã và đang diễn ra hàng ngày, có điều chắc chắn là người dùng sẽ mất thời gian để làm quen và một khi đã quen rồi, họ không có lý gì mà không nói lời từ biệt với các dịch vụ VAS dạng SMS-based

Cho tới thời điểm hiện tại, hai ứng cử viên nặng ký thay thế các dịch

vụ VAS trên nền SMS-based sẽ là Mobile Native Application và Mobile Web Application

Mobile Native Application được viết riêng cho một dòng điện thoại di động bằng ngôn ngữ lập trình của điện thoại đó Các Application được phân phối chủ yếu qua kênh phân phối của nhà sản xuất, chẳng hạn như Apple Store cho dòng điện thoại chạy iOS, Android Market cho các điện thoại sử dụng Android OS của Google hay Ovi Store cho các dòng máy của Nokia…

Ưu điểm của Mobile Native Application với người dùng phải kể đến

đó là tốc độ phản hồi rất nhanh, không phải đợi lâu cho một Request, điều này đặc biệt ưu thế khi điện thoại bị rớt sóng 3G và bị chuyển xuống kết nối 2G (EDGE hay GPRS) Người dùng có thể lưu một số dữ liệu trên Application để giảm tải thay vì Load tất cả dữ liệu từ Remote Server Một

ưu điểm nữa của Mobile Native Application là khả năng tương tác trực tiếp với cả phần cứng và phần mềm của điện thoại di động để truy xuất thông tin, khả năng kiểm soát một cách chính xác việc hiển thị trên màn hình của điện thoại di động, thao tác thực hiện được tối ưu hóa cho từng dòng điện thoại

Mobile Web Application có thể hiểu đơn giản là một Website được tối

ưu hóa cho điện thoại di động với kích thước màn hình nhỏ hơn, cấu hình thấp hơn, chạy trên đường truyền tốc độ chậm hơn Ngay từ đầu người ta đã đặt ra bài toán làm sao cho Website nhẹ hơn, hiển thị tốt hơn để thuận tiện trong việc lướt Web bằng di động và đó là lý do cho sự ra đời của Mobile Web Application

Một trong những ưu điểm dễ nhận thấy của Mobile Web Application

là không tốn nhiều chi phí xây dựng, tốc độ phát triển nhanh hơn so với làm Mobile Native Application Việc triển khai trong thực tế một Mobile Web Application cũng khá đơn giản Chỉ cần phát triển một ứng dụng Mobile Web Application duy nhất mà không cần quan tâm tới hệ điều hành haythiết

bị bởi điều kiện cần và đủ của điện thoại là có chức năng Web Browsing (phần lớn điện thoại hiện nay đều có) Nếu doanh nghiệp đang sở hữu một Website với lượng truy cập lớn, phát triển thêm phiên bản dành cho di động

sẽ giúp phiên bản Mobile Web Application nhanh chóng được biết đến nhờ Brand sẵn có của Website đồng thời tăng độ trung thành của người dùng Doanh nghiệp cũng chẳng cần lo lắng về việc nâng cấp phiên bản, bởi mọi thay đổi trong ứng dụng đều có thể được hiển thị trên điện thoại của người dùng ngay tức khắc mà không cần phải Download hay cài đặt gì Ngoài ra việc thanh toán Online cũng không gặp khó khăn và các điện thoại di động thế hệ mới hỗ trợ các chức năng vốn trước đây chỉ dành riêng cho Desktop (HTML,Flash, Javascript,…)

Còn nhiều vấn đề khác liên quan tới việc lựa chọn triển khai một ứng dụng Mobile Native Application hay Mobie Web Application Ví dụ việc trả lời câu hỏi rằng phát triển Mobile Native Application hay Mobile Web Application cho loại điện thoại di động nào? Là iPhone/iPad hay Android vốn được trang bị các chức năng duyệt Web hoàn hảo cho việc truy cập các

một kiểu riêng? Một khi muốn các Mobile Native Application xuất hiện trên nhiều điện thoại di động khác nhau, ta sẽ khá mệt mỏi bởi cái sự muôn hình vạn trạng của các điện thoại này Lúc đó, thay vì một kênh phân phối cho một loại điện thoại như AppStore, ta sẽ phải lo đưa lên các AppStore tương ứng với mỗi dòng điện thoại mà ta nhắm tới hay tìm đến những kênh phân phối không chính thức Ngoài ra thay vì một ngôn ngữ cho một điện thoại, ta

sẽ phải viết Mobile Native Application bằng từng ngôn ngữ khác nhau ứng với từng điện thoại

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

3.1.Responsive Design

Với sự phát triển nhanh chóng của máy tính bảng, điện thoại thông minh thì nhu cầu duyệt Web trên các thiết bị này càng nhiều Trước đây, một Website thường dùng giải pháp tạo thêm trang thích nghi với điện thoại nhưng hiện nay chúng ta không cần phải phiền phức như vậy nữa Giải pháp cho chúng ta là Responsive Design

Responsive Design là một khái niệm để chỉ việc Website có thể tự co giãn kích thước các thành phần trên trang Web để hiển thị tốt nhất trên các loại kích thước màn hình như Desktop, Laptop, Tablet hay Mobile

Để áp dụng vào Website, đầu tiên bạn thêm thẻ <meta viewport> vào thẻ < head> như ví dụ sau:

<meta name=”viewport” content=”width=device-width,

Để dễ dàng, thiết kế nên có những khối, mảng rõ ràng:

#wrap: bao toàn bộ code

#header: tên website

#content: nội dung chính liên quan đến SEO

#sidebar: các widget

#footer: thông tin bản quyền

Dựa vào các thống kê để xác định các kích thước màn hình thường truy cập website nhiều nhất Ví dụ: 1240px, 980px, 700px, 480px Dưới

CSS3 ta đã bổ sung thêm nhiều khai báo mới như max-width,

Ta định nghĩa float của #header là none để #header không còn chạy

về bên trái nữa và đặt lại độ rộng của header là 100%

Tương tự với màn hình 700px thì hiển thị 1 cột:

}

Lưu ý: Khi thiết kế ta nên thiết kế trang cho kích thước lớn nhất rồi nhỏ dần

3.2.Responsive Design cho Mobile Web Application

Phát triển Mobile Application đang là xu hướng của thời đại hiện nay

và cũng vì lẽ đó mà SEO Mobile là một phần gắn liền không thể thiếu khi nhắc tới Mobile Responsive Design cho Mobile Web Application bước vào giai đoạn phát triển với những tiêu chuẩn nhất định Điều này cũng quan trọng như việc chuyển đổi từ thiết kế Layout sang CSS

Để biết một Website có thuộc dạng Responsive Design hay không chỉ cần mở một trình duyệt trên Desktop và từ từ thu hẹp bề rộng trình duyệt lại Responsive Design sẽ tự động điều chỉnh giao diện sao cho vừa khít với bề rộng của trình duyệt, cho dù là hẹp như trên điện thoại

Nói tới Responsive Design cho Mobile Web Application không thể không nói tới người sáng lập ra nó là Ethan Marcotte với bài báo đáng chú ý

về Responsive Design cho Mobile Web Trong bài báo này, Ethan đề cập tới tất cả cả các ý tưởng chính hình thành nên Responsive Design cho Mobile Web Đó không phải là một phần kỹ thuật nào cả mà là một loạt các kỹ thuật

và ý tưởng kết hợp với nhau

Thay vì trả lời câu hỏi Responsive Design cho Mobile Web chính xác

là gì, hãy quan tâm tới nó giải quyết được vấn đề gì Ngày nay để lướt Web, máy tính không còn là lựa chọn duy nhất nữa iPhone và nhiều thiết bị tương

tự ra đời, chỉ trong nháy mắt đã làm thay đổi hoàn toàn trải nghiệm lướt web trên di động

Sự thay đổi trong trình duyệt Web khiến cho kỳ vọng của người dùng thay đổi Ai cũng muốn việc lướt web trên điện thoại cũng phải dễ dàng như trên màn hình máy tính Để đáp ứng được điều này, cộng đồng thiết kế Web bắt đầu sáng tạo nên phiên bản Web dành cho điện thoại di động Như vậy là bên cạnh phiên bản dành cho màn hình thông thường sẽ có một phiên bản khác dành riêng cho điện thoại

Cùng với sự phát triển của Laptop thì điện thoại thông minh

hình lớn và độ phân giải cao Sẽ khá lãng phí nếu những người thiết kế Web không tận dụng xu hướng này Trước sự bùng nổ và ngày càng đa dạng đủ loại kích thước và độ phân giải màn hình, Responsive Design cho Mobile web hướng tới việc tạo ra phiên bản Web đáp ứng nhu cầu cho từng đối tượng người dùng khác nhau Điểm qua một số phần trong Responsive Design cho Mobile Web:

3.2.1.Fluid Grids

Ý tưởng chủ đạo đầu tiên của Responsive Design là Fluid Grid Trước đây, Liquid Layout (một dạng Layout có thể tự động chỉnh sửa kích cỡ để vừa màn hình, tự động xoay ngang, dọc) không phổ biến bằng việc thiết kế các Layout cố định bề rộng, các trang Web được thiết kế với số Pixels cố định và căn chính giữa trang Tuy nhiên, với khối lượng đồ sộ đủ các loại kích thước màn hình như hiện nay, khó có thể bỏ qua lợi ích của Liquid Layout

Fluid Grid tiến một bước xa hơn so với Liquid Layout truyền thống Thay vì thiết kế một Layout dựa trên số Pixels cố định hay giá trị phần trăm tùy ý, Fluid Grid được thiết kế kỹ càng hơn theo tỷ lệ Theo cách này, khi một Layout được thu gọn trên màn hình điện thoại di động hay trải rộng trên một màn hình lớn, tất cả mọi thành phần trong Layout đều tự thay đổi kích thước để tương thích với nhau

Để tính được tỷ lệ cho thành phần của từng trang, cần phải chia các nhân tố mục tiêu theo từng bối cảnh Hiện tại, cách tốt nhất để làm điều này

là tạo ra một bản Mockup chính xác trên phần mềm như Photoshop Nhờ đó,

có thể đo được các phần trong trang và chia cho bề rộng của toàn trang Ví

dụ, nếu Layout có kích thước bề ngang là 960 pixel, và bề rộng của thành phần mục tiêu là 300 pixel thì giá trị phần trăm sẽ là 31,25% Nếu kết quả ra

số lẻ thì đừng làm tròn, hãy giữ nguyên vì với máy tính mọi con số cần phải giữ chính xác

Fluid Grid là một phần rất quan trọng khi tạo ra Responsive Design Khi bề rộng của trình duyệt quá hẹp thì giao diện có thể bị vỡ Ví dụ: Layout

ba cột không thích hợp cho màn hình nhỏ của điện thoại Tuy nhiên Responsive Design có thể xử lý việc này bằng Media Queries