Báo cáo đồ án tốt nghiệp xây dựng Web trên nền mobile

Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
MỤC LỤC:
Chương I : Tổng quan về Mobile Website 2
I.Những kiến thức cơ bản về thiết kế web cho thiết bị 2
II.Môi trường phát triển web cho di động 5
III.5 yếu tố thiết yếu cho một web mobile 8
Chương II : Phương thức lưu trữ tập tin trên mobile 12
I.Lưu trữ bên trong hay bên ngoài 12
II.Quyền được lưu trữ bộ nhớ ngoài 13
III.Lưu trữ một tệp tin trong bộ nhớ trong 14
IV.Lưu trữ một tệp tin trong bộ nhớ ngoài 15
V.Kiểm ra không gian trống 17
Chương III : Xây dựng ứng dụng tải game trên nền tảng web mobile 19
Cho phép JavaScript 24
Lời nói đầu
Website phiên bản mobile, công nghệ phát triển không ngừng đã
làm thay đổi thói quen của người sử dụng máy tính và mạng internet
để tìm kiếm thông tin, dịch vụ, sản phẩm. Bây giờ, người lướt web có
thể không ngồi trước màn hình máy tính để tìm kiếm sản phẩm hay
dịch vụ mà đã chuyển sang các thiết bị cầm tay – smartphone – tablet.
Như Mary Meeker – Kleiner Perkins cho biết: “Sự chấp nhận sử
dụng mobile web diễn ra nhanh hơn 8 lần so với web truyền thống
trong cuối thập niên 90.”.
Trong quá trình thực chương trình còn nhiều thiếu sót rất mong
được sự chỉ dẫn của thầy cô.
Em xin chân thành cảm ơn!
GVHD: TS ngô hữu phúc 1 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Chương I : Tổng quan về Mobile Website
I. Những kiến thức cơ bản về thiết kế web cho thiết bị
- Yếu tố dẫn đến sự phát triển của mobile web:

- Phát triển web cho di động theo cách tiếp cận " lấy tiêu chuẩn làm nền
tảng phát triển " sẽ đảm bảo:
o Sự tương thích trên thiết bị
o Khả dụng trên nhiều nền tảng và trình duyệt di động
- Cơ chế hoạt động của web:
o Giao thức HTTP (Hypertext Transfer Protocol): giao thức để chia
sẻ tài liệu, file
GVHD: TS ngô hữu phúc 2 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
o URI (Uniform Resource Identifiers): phương thức truy cập cho các
file văn bản, tài liệu đánh dấu và các tài nguyên nhị phân khác
o Yêu cầu HTTP (HTTP request):
 Máy khách gửi URI của tài nguyên mong muốn và một tập
hợp các header tới máy chủ web
 Header là một phần của gói tin chuyển qua lại giữa máy
khách và máy chủ, chứa thông tin điều khiển
 Header có thể chứa danh sách kiểu MIME cho biết kiểu định
dạng nội dung hỗ trợ trên máy khách
o Hồi đáp HTTP (HTTP response):
 Máy chủ web sẽ gửi cho máy khách các tài liệu (đánh dấu,
văn bản, mã nhị phân)
 Tập hợp header khác, một trong số đó có chứa MIME mô tả
kiểu file tài liệu truyền cho máy khách
- Web dành cho thiết bị di động là gì ?
o Về cơ bản là những trang web thông thường
o Sử dụng những nền tảng của web thông thường và bổ sung thêm
các kiểu MIME
o Kiểu MIME phân biệt ngôn ngữ đánh dấu di động với HTML trên
máy tính
o Ngôn ngữ đánh dấu và định dạng được tối ưu hóa riêng cho thiết bị

di động
Web cho thiết bị di động Web trên máy tính
Sử dụng nền tảng của web thông
thường
Nội dung của một trang web bao
gồm mã đánh dấu, định dạng, kịch
bản và các nội dung đa phương
tiện hiển thị nhờ các trình duyệt
web
Chứa kiểu MIME phân biệt ngôn ngữ
đánh dấu di động
Hiển thị trên Firefox, Opera hoặc
Internet Explorer sử dụng máy
tính để bàn, máy tính xách tay và
Netbook
Kích cỡ màn hình hiển thị nhỏ Kích cỡ màn hình: 800x600 trở lên
Số trình duyệt: 12+ Số trình duyệt: đa dạng
Lỗi trình duyệt: xuất hiện nhiều Lỗi trình duyệt: ít, được vá lỗi
Tiêu chuẩn W3C: ít tiêu chuẩn được
công bố
Tiêu chuẩn W3C: áp dụng rộng rãi
Ngôn ngữ đánh dấu:
- WML
- CHTML
- XHTML Basic
- XHTML-MP
Ngôn ngữ đánh dấu:
- XHTML, HTML
GVHD: TS ngô hữu phúc 3 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile

- XHTML
- HTML
JavaScript và AJAX: Không có trên
90% thiết bị di động
JavaScript và AJAX: Sẵn có
Địa chỉ của máy khách: 3 tỷ người
dùng di động
Địa chỉ máy khách: 1 tỷ máy tính
- Ngôn ngữ đánh dấu cho thiết bị di động:
o XHTML và HTML
o XHTML -MP (XHTML Mobile Profile - hồ sơ di động
o XHTML)
o CHTML (iMode)
o WML (Wireless Markup Language - ngôn ngữ đánh
o dấu không dây)
o HTML:
 Là ngôn ngữ đánh dấu web chuẩn
 Nhiều trình duyệt di động hỗ trợ đầy đủ các tập thẻ của
HTML
 Độ phân giải màn hình, dung lượng lưu trữ và giới hạn
băng thông của thiết bị di động đòi hỏi phải tối ưu hóa
trong việc hiển thị
o XHTML:
 Là sự kết hợp giữa tập hợp thẻ của HTML với việc tuân
thủ cú pháp nghiêm ngặt của XML
 Trình duyệt của các thiết bị di động thông minh như
điện thoại Android, iPhone, Nokia Series 60, Windows
Mobile và BlackBerry đều hỗ trợ XHTML, HTML,
JavaScript và AJAX
o XHTML -MP (XHTML Mobile Profile):

 Là chuẩn đánh dấu không chính thức cho web di động
 Là tập con của XHTML, bao gồm:
• XHTML -MP 1.0 thiết lập các thẻ cơ bản cho mã đánh
dấu thiết bị di động.
• XHTML -MP 1.1 thêm thẻ <script> và hỗ trợ
JavaScript cho thiết bị di động
• XHTML -MP 1.2 thêm nhiều thẻ định dạng và kiểu
nhập dữ liệu
o WML (Wireless Markup Language – WML):
 Ngôn ngữ đánh dấu không dây - Là ngôn ngữ đánh
dấu cũ và đơn giản hơn dành cho những thiết bị di
động hiệu năng thấp
 Là ứng dụng của XML sử dụng hai khái niệm ‘deck’ và
GVHD: TS ngô hữu phúc 4 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
‘card’
o HDML:
 Handheld Device Markup Language - ngôn ngữ đánh
dấu cho thiết bị cầm tay - là tiền thân của WML
o CHTML :
 Compact HTML – là tập con của HTML, chỉ phát triển ở thị
trường Nhật Bản
 Không hỗ trợ các tính năng: JPEG, table, bản đồ dạng ảnh,
màu nền, ….
- Style sheet cho web di động:
o Trình duyệt di động tốt nhất hỗ trợ CSS2, định dạng
chuẩn sử dụng với XHTML và HTML trên trình duyệt
của máy tính
o Trình duyệt di động hỗ trợ XHTML -MP sử dụng CSS
không dây (Wireless CSS) và/hoặc CSS Mobile Profile

II. Môi trường phát triển web cho di động
- Để phát triển web di động, cần thiết phải có:
o Môi trường phát triển tích hợp – IDE
o Máy chủ web & trình duyệt web
- Để xem thử và kiểm tra web di động, có thể sử dụng:
o Firefox – cài đặt thêm mobile add-on
o Các trình duyệt mô phỏng trình duyệt di động
o Trình duyệt di động trên thiết bị di động thật
- Môi trường phát triển tích hợp – IDE:
o Là bộ công cụ dành cho lập trình viên cho phép thiết kế, lập trình, thực
thi và gỡ lỗi ứng dụng web (hay bất kỳ dạng phần mềm nào khác)
o Không yêu cầu IDE cụ thể, có thể sử dụng:
 Adobe Dreamweaver CS5/ CS6
 • Eclipse
 • Microsoft Visual Studio
 • Komodo
 • NetBeans
 • Zend Studio
 • ….
- Kiểu MIME cho di động:
o Kiểu MIME di động (hay kiểu nội dung) xác định định dạng cho nội
dung web di động
o Máy chủ web và trình duyệt trên máy khách sử dụng các kiểu MIME để
phân biệt tài liệu văn bản…
GVHD: TS ngô hữu phúc 5 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
o Trong giao dịch HTTP giữa trình duyệt và máy chủ, kiểu MIME được sử
dụng theo nhiều cách khác nhau thông qua bộ chuyển mã hoặc proxy
trung gian
 Bộ chuyển mã và gateway:

• Thường gặp vấn đề chuyển đổi máy chủ proxy HTTP giữa
thiết bị và máy chủ web
• Máy chủ proxy kiểm tra trường Accept và Content- Type
trong header để xác định cách xử lý nội dung gốc sao cho
phù hợp với từng loại thiết bị
 Ngôn ngữ thực thi phía máy chủ:
• Có thể thay đổi kiểu MIME liên kết với một tài liệu sử
dụng ngôn ngữ thực thi phía máy chủ
 Ví dụ:
- Một vài kiểu MIME cho di động:
Kiểu MIME Phần mở rộng
file
Nội dung Nơi dùng
application/vnd.w
ap.xhtml+xml
application/xhtml
+xml
Xhtml XHTML-MP Các trang web di
động
text/html html (hay htm trên
Windows servers)
HTML Các trang web di
động
text/css Css CSS1, CSS2, và
Wireless CSS
CSS dành cho các
nội dung trên web
di động
application/javascr
ipt text/javascript

Js Java Script Ngôn ngữ kịch
bản sử dụng cùng
với HTML và
XHTML-MP 1.1 và
1.2
- Trình duyệt web di động trên máy tính:
o Cần thiết phải có công cụ giả lập môi trường di động
o Công cụ thuận tiện để sử dụng web di động: firefox kết hợp với add-on:
 Add-on XHTML Mobile Profile
 Add-on wmlbrowser
 Add-on User Agent Switcher
 Add-on Modify Headers
 Add-on Live HTTP Headers
 Add-on Small Screen Renderer
GVHD: TS ngô hữu phúc 6 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
 Add-on Firebug
- Công cụ mô phỏng trình duyệt di động (Mobile Browser Emulators):
o Là công cụ giúp gỡ lỗi cho lập trình viên web di động
o Ba loại trình mô phỏng di động:
 Trình mô phỏng thiết bị di động: mô phỏng hệ điều hành của
điện thoại di động và các ứng dụng di động
 Trình mô phỏng trình duyệt di động: chỉ mô phỏng ứng dụng
trình duyệt trên di động
 Trình mô phỏng hạ tầng di động: mô phỏng thiết bị di động
và dịch vụ liên quan trong hệ sinh thái di động
- Một số trình mô phỏng
Trình mô phỏng Kiểu mô phỏng Mô tả
iPhone SDK Thiết bị Chứa bộ giả lập Iphone,
chỉ chạy trên OS X

Android SDK Thiết bị Giả lập thiết bị chạy
Android
Windows Mobile 6
SDK
Thiết bị Giả lập thiết bị, và vỏ
ngoài cho thiết bị sử
dụng Windows Mobile
Nokia Mobile
Browser Simulator
4.0
Thiết bị Giả lập XHTML,
XHTMLMP và WML
giống các
thiết bị của Nokia
- Thiết bị di động thật:
o Là giải pháp tốt nhất và chính xác hơn cả
o Có thể sử dụng giải pháp thay thế: DeviceAnywhere
- Các công cụ phát triển khác:
o Công cụ đối sánh file: Tiện ích đối sánh file cho phép kiểm tra một
cách trực quan từng dòng và hợp nhất lại các điểm khác biệt giữa
các file văn bản
o Công cụ quản lý mã nguồn
- Để đảm bảo sự tương thích trên thiết bị và khả dụng trên nhiều nền tảng,
trình duyệt di động, hãy tiếp cận việc phát triển web di động theo hướng "
lấy tiêu chuẩn làm nền tảng"
- Khi trả về cho yêu cầu HTTP (HTTP request), máy chủ sẽ đưa về danh
sách MIME để biết định dạng nội dung hỗ trợ trên thiết bị người truy cập
(máy tính, laptop, thiết bị di động,…)
- Có nhiều môi trường phát triển web di động, khuyến khích sử dụng:
Adobe Dreamweaver CS5/CS6

- Sử dụng các công cụ mô phỏng trình duyệt di động để kiểm tra lỗi cho
web di động
GVHD: TS ngô hữu phúc 7 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
III. 5 yếu tố thiết yếu cho một web mobile.
Chúng ta thường nghĩ rằng thiết kế web và thiết kế web mobile rất khác
nhau, thực sự không phải
là như vậy.
Có một số điểm cần lưu ý khi thiết kế các trình duyệt web mobile (web di
động). Dưới đây là 5 yếu
tố chính mà tất cả các trang web mobile CẦN PHẢI CÓ.
1. Thiết kế các yếu tố định vị, định hướng có chủ đích
2. Tập trung vào nội dung
3. Cung cấp phản hồi (feedback)
4. Làm nổi bật thương hiệu
5. Sử dụng khoảng trắng
1. Thiết kế các yếu tố định vị, định hướng có chủ đích
Việc lướt web trong mobile là một trải nghiệm khá thú vị. Vì thế chúng ta
nên làm cho nó trở nên sinh động và có ý nghĩa. Việc chuyển hướng là bao
gồm những gì mà người dùng cần thao tác và cung cấp đường dẫn rõ ràng.
Việc gỡ bỏ những lần chạm/ tương tác trên màn hình mobile không làm
cho trình ứng dụng của bạn trở nên dễ sử dụng và có ý nghĩa hơn. Người
dùng chỉ việc chạm một đến hai lần trên màn hình nếu họ biết họ đang ở đâu
và làm gì.
Điều đầu tiên, đảm bảo các yếu tố định vị nhìn có thể tương tác được. Ta
nên thiết kế chúng trông giống như dạng nút, các danh sách hoặc dùng các
dấu mũi tên.
Vì là thiết kế web cho mobile, sẽ không có những trạng thái như bàn tay
hay con chuột trên màn hình, do dó hãy chắc chắn rằng các yếu tố định vị,
định hướng cần được thiết kế sao cho người dùng có cảm giác những yếu tố

này có thể tương tác được.
Thứ hai, việc đặt tên nhãn cho tiêu đề rất quan trọng. Cần đảm bảo rằng
những tiêu đề có một ý nghĩa gì đó cho người dùng. Mọi người đều biết ý
nghĩa và công dụng của nút “back”. Nếu bạn có một đường dẫn cần một vài
thao tác, thay vì ghi nhãn cho các nút quay lại với các tiêu đề trang trước đó,
chỉ cần đặt tên “back”.
Nên đặt tên nhãn đơn giản và có ý nghĩa. Tránh gộp tất cả mọi thứ mà bạn
không biết phải làm gì với chúng. Đây chính là những nơi có khả năng bẫy
người sử dụng khi thao tác.
Hãy nhớ rằng với ít yếu tố định vị không có nghĩa là việc định hướng trở
nên dễ dàng, vì vậy việc thêm những nút như “My Profile” hay “Password”
sẽ tốt hơn là chôn chặt chúng vào trong một nhóm thông tin đã được thiết
lập.
GVHD: TS ngô hữu phúc 8 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Icon là cách đơn giản nhất trong việc cung cấp thông tin. Điều này có
nghĩa là không phải các câu chữ khó đọc hoặc là mất nhiều thời gian, nhưng
bởi vì những nội dung thể hiện bằng đồ họa tạo ra một sự cân bằng thị giác
tốt hơn.
Các thiết bị mobile là một môi trường khá thú vị để sử dụng và với các
icon có thể cải thiện những trải nghiệm tổng thể cho người dùng. Thêm vào
đó, icon kết hợp với nhãn tên rõ ràng sẽ giúp người dùng hiểu rõ ý nghĩa và
cung cấp cho họ một đường dẫn rõ ràng.
2. Tập trung vào nội dung
Việc gỡ bỏ những lần thao tác trên web mobile không thực sự làm cho
mọi thứ trở nên dễ dàng và thao tác nhanh hơn. Thêm vào đó, đơn giản gỡ bỏ
một nội dùng nào đó cũng không làm cho các giao diện web mobile dễ sử
dụng hơn.
Nếu bạn gỡ bỏ một số nội dung giữa website và web mobile, bạn có thể
ĐANG GỠ BỎ những nội dung mà người dùng cần hoặc muốn có. Bạn cần

tập trung vào nội dung hơn – đây là điều mang lại lợi ích cho cả website và
web mobile.
Thay vì gỡ bỏ nội dung được cho là “KHÔNG QUAN TRỌNG”, bạn cần
tái mục đích thiết kế hoặc là tái tập trung nội dung. Bạn có thể xóa những
mảng nội dung trên màn hình, nhưng điều này chỉ có thể giúp cho người
dùng dễ đọc hơn. Việc tái mục đích thiết kế có thể được thực hiện bằng cách
chia nhỏ đoạn văn bản hoặc đặt chúng dưới dạng bullet.
Ngoài ra, việc chia nhỏ khối văn bản thành những dạng khác như câu
trích dẫn, các dòng hay đặt chúng vào những khối đồ họa giúp người dùng dễ
đọc được nội dung.
Dưới đây là một số cách sử dụng yếu tố trực quan hỗ trợ cho văn bản:
Sử dụng các icon đi kèm với các tiêu đề.
Sử dụng các yếu tố đồ họa cho ngày tháng này thay vì chỉ liệt kê
các ngày.
Sử dụng inforgraphic (thể hiện thông tin bằng hình ảnh) nhằm giải
thích nội dung cần thông báo.
Sử dụng màu khác nhau cho các tiêu đề thay vì thay đổi kích thước
font chữ.
Sử dụng nền màu sáng nhẹ nhằm giúp xác định các nội dung khác
nhau.
Làm nổi rõ các nội dung quan trọng.
Sử dụng padding và những không gian âm để nhấn mạnh hay để
tách bạch các nội dung văn bản.
Sử dụng các kiểu câu trích dẫn, các dòng nhỏ, khối hình để chia
nhỏ nội dung.
Người dùng muốn được biết tất cả các nội dung của trang web, vì vậy hãy
cung cấp đầy đủ cho họ bằng cách chia nhỏ nội dung và tái tập trung bằng
những cơ chế thị giác khác.
GVHD: TS ngô hữu phúc 9 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile

3. Cung cấp phản hồi (Feedback)
Đây là một yếu tố không chỉ quan trọng đối với web mobile mà còn quan
trọng đối với tất cả các web. Cung cấp feedback cho người dùng trở nên quan
trọng hơn trong web mobile vì bạn không có trình duyệt như trong webite.
Những phản hồi như thay đổi trạng thái khi di chuyển lên đối tượng hoặc
các hình ảnh động thực sự không tồn tại trong các thiết bị mobile cảm ứng.
Các thiết bị mobile chỉ có thể hoạt động khi chúng đã được kích hoạt. Vì vậy
cung cấp những phản hồi rõ ràng ngay khi vùng đối tượng được tương tác, đã
được tương tác hoặc đang ở trạng thái kích hoạt là RẤT QUAN TRỌNG.
Nếu như bạn có một danh sách các đối tượng có thể tương tác, bạn cũng
sẽ trông đợi sự phản hồi bằng hình ảnh trực quan ngay khi bạn chạm/tương
tác và nhận được sự phản hồi từ chúng.
Đây là cách mà thiết bị báo cho bạn biết là bạn đang tương tác với nó. Và
trong hầu hết các thiết bị di động, chúng ta thường chỉ đưa ra một lựa chọn –
PHẢN HỒI BẰNG HÌNH ẢNH TRỰC QUAN.
Dưới đây là một số phản hồi trực quan trong việc giao tiếp với người
dùng:
Sử dụng màu để đánh dấu các khu vực đã được lựa chọn hoặc đang
kích hoạt.
Sử dụng hiệu ứng hiển thị và làm mờ ngay khi người dùng chạm lên
đối tượng này hay đối tượng khác.
Sử dụng đường viền hay tô chuyển gradient trên các nút khi được
chọn.
Sử dụng các nút hay màu chữ khác nhau để biểu thị thay đổi trạng thái.
Sử dụng các dấu mũi tên khi các mục drop-down được chọn.
Sử dụng slide hay các yếu tố làm mờ giữa các màn hình để chỉ định
trạng thái đang được thay đổi.
4. Làm nổi bật thương hiệu
Ngay khi chúng ta muốn thiết kế một website thật ấn tượng nhằm thể hiện
được những kiến thức và kỹ năng thiết kế của mình, một trong những yếu tố

quan trọng nhất của bất kỳ một thiết kế là xây dựng thương hiệu. Đừng bao
giờ quên nó.
Mặc dù không có nhiều khoảng trống trong mobile, bạn nên nhớ đặt logo
công ty vào trong thiết kế của bạn.
Có rất nhiều phong cách thiết kế logo. Tuy nhiên, hai yếu tố quan trọng
trong tạo nên một thương hiệu rõ ràng là LOGO và NHÓM MÀU đại diện
thương hiệu.
Trong thiết kế web mobile, cần đảm bảo hai yếu tố này được thể hiện. Vị
trí logo có thể khác nhau tùy theo các phiên bản màn hình và thậm chí nó có
thể được đặt trong trang chính. Việc làm cho hệ thống màu trở nên có ý
nghĩa, gây ấn tượng cho người dùng là dùng nó xuyên xuốt trong các trang
còn lại.
GVHD: TS ngô hữu phúc 10 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
hêm một điều nhỏ nhưng quan trọng, là các trình duyệt mobile không có
thanh tiêu đề hay thanh URL. Chi tiết nhỏ nhưng quan trọng này cho phép
màn hình trình duyệt lớn trên toàn màn hình để nhắc nhở người dùng đã và
đang ở đâu trong trang web.
Sự vắng mặt của thanh tiêu đề hay thanh URL trên thiết bị mobile làm
cho thương hiệu thiết kế của
bạn trở nên quan trọng hơn vì người dùng ko có được sự tiện dụng để tìm
kiếm và xem họ đang ở đâu.
5. Sự dụng khoảng trắng
Đừng để màn hình nhỏ đánh lừa bạn, bạn vẫn có nhiều khoảng trắng cho
thiết kế của mình. Khoảng trắng là một yếu tố then chốt trong bất kỳ một
thiết kế đẹp. Trong thiết kế mobile, khoảng trắng trở nên quan trọng hơn bởi
vì bạn không có nhiều khoảng không để xử lý.
Để đạt được tính hiệu quả dễ sử dụng và dễ đọc, tất cả các yếu tố như nút,
các yếu tố định vị, icon, nội dung, vvv… cần được thiết kế tách bạch rõ ràng
và được đóng khung thích hợp.

Để mang lại những trải nghiệm tốt hơn cho người dùng không có nghĩa là
bạn phải giới hạn nội dung, ép nó để có được những khoảng trắng trong bố
cục, nó cũng không có nghĩa là bạn phải sử dụng những font chữ lớn để để
đọc, và nó cũng không có nghĩa là nên tránh dùng padding để làm hẹp lại nội
dung.
Các web mobile đòi hỏi những hoạch định nhằm mang lại những trải
nghiệm tốt cho người dùng. Và những khoảng trắng đóng một vai trò lớn
trong việc lên kế hoach tạo những trải nghiệm này.
Dưới đây là một số cách sử dụng khoảng trắng tạo ra một trải nghiệm tốt
cho người dùng:
Sử dụng font nhỏ với những khoảng không xung quanh, ko sử dụng
những font chữ lớn mà không có những khoảng thở cho chúng.
Sử dụng nhiều padding xung quanh cách khối hộp chứa nội dung hay
các icon.
Sử dụng hệ thống lưới rõ ràng với nhiều khoảng trắng giữa các yếu tố
thiết kế nhằm làm rõ những nội dung riêng biệt.
GVHD: TS ngô hữu phúc 11 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Chương II : Phương thức lưu trữ tập tin trên mobile
I. Lưu trữ bên trong hay bên ngoài
Tất cả các thiết bị Android có hai khu vực lưu dữ tập tin : lưu trữ “ bộ
nhớ trong “ và “ bộ nhớ ngoài “ . Những khu vực lưu trữ này đến từ ngày
đầu của Android , khi hầu hết các thiết bị được cũng cấp bộ nhớ trong không
ổn định , cộng với một số phương tiện lưu trữ di động như một thẻ micro
SD. Một số thiết bị phân chia không gian lưu trữ vĩnh viễn thành các phân
vùng "nội bộ" và "bên ngoài", vì vậy ngay cả khi không một phương tiện lưu
trữ di động, luôn có hai không gian lưu trữ và các hành vi API là như nhau
cho dù các lưu trữ bên ngoài có thể tháo rời hay không. Danh sách sau đây
tóm tắt các sự kiện về mỗi không gian lưu trữ.
Lưu trữ bộ nhớ trong Lưu trữ bộ nhớ ngoài

GVHD: TS ngô hữu phúc 12 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Nó luôn có sẵn trong thiết bị Nó không phải luôn có sẵn , bởi vì
người dùng có thể gắn kết lưu trữ bên
ngoài như ổ USB và trong một số
trường hợp loại bỏ nó khỏi thiết bị.
Tập tin được lưu trữ ở đây có thể
truy cập bằng cách mặc định ứng
dụng của bạn
Nó có thể được đọc ở khắp nơi , vì
vậy tập tin được lưu ở đây có thể
được đọc ngoài tầm kiểm soát của bạn
Khi người dùng gỡ bỏ ứng dụng của
bạn , hệ thống loại bỏ tất cả tập tin
của ứng dụng của bạn từ bộ nhớ
trong
Khi người dùng gỡ bỏ ứng dụng của
bạn , hệ thống loại bỏ các tập tin của
ứng dụng của bạn từ đây chỉ khi bạn
lưu chúng trong thư mục từ
getExternalFilesDir()
Lưu trữ nội bộ là tốt nhất khi bạn
muốn chắc chắn rằng không phải
người sử dụng cũng không phải các
ứng dụng khác có thể truy cập các
tập tin của bạn.
Lưu trữ bên ngoài là nơi tốt nhất cho
các tập tin mà không yêu cầu hạn chế
quyền truy cập và cho các tập tin mà
bạn muốn chia sẻ với các ứng dụng

khác hoặc cho phép người dùng truy
cập với máy tính.
II. Quyền được lưu trữ bộ nhớ ngoài
Ghi vào lưu trữ ngoài, bạn phải yêu cầu WRITE_EXTERNAL_STORAGE
trong AndroidManifest.xml của bạn :
<manifest >
<uses-permission android:name
"android.permission.WRITE_EXTERNAL_STORAGE" />

</manifest>
Chú ý: Hiện nay, tất cả các ứng dụng có khả năng đọc lưu trữ bên ngoài
mà không có một giấy phép đặc biệt. Tuy nhiên, điều này sẽ thay đổi trong một
thông cáo trong tương lai. Nếu ứng dụng của bạn cần phải đọc lưu trữ bên ngoài
(nhưng không viết thư cho nó), sau đó bạn sẽ cần khai báo phép
READ_EXTERNAL_STORAGE . Để đảm bảo rằng ứng dụng của bạn tiếp tục
làm việc như mong đợi, bạn nên khai báo sự cho phép này ngay bây giờ, trước
khi thay đổi có hiệu lực.
<manifest >
<uses-permission
android:name="android.permission.READ_EXTERNAL_STORAGE" />

</manifest>
GVHD: TS ngô hữu phúc 13 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Tuy nhiên, nếu ứng dụng của bạn sử dụng phép
WRITE_EXTERNAL_STORAGE , sau đó nó mặc nhiên có quyền đọc các lưu
trữ bên ngoài là tốt.
Bạn không cần bất kỳ điều khoản để lưu các tập tin vào lưu trữ nội
bộ. Ứng dụng của bạn luôn luôn có quyền đọc và viết các tập tin trong thư mục
lưu trữ nội bộ của mình.

III. Lưu trữ một tệp tin trong bộ nhớ trong
Khi lưu một tập tin để lưu trữ nội bộ, bạn có thể có được các thư mục thích
hợp như là một tập tin bằng cách gọi một trong hai phương pháp:
getFilesDir ():Trả về một tập tin đại diện cho một thư mục nội bộ cho ứng
dụng của bạn.
getCacheDir ():Trả về một tập tin đại diện cho một thư mục nội bộ cho
các tập tin bộ nhớ cache tạm thời của ứng dụng của bạn. Hãy chắc chắn để xóa
từng tập tin một khi nó không còn cần thiết và thực hiện một giới hạn kích thước
hợp lý cho số lượng bộ nhớ bạn sử dụng bất cứ lúc nào, chẳng hạn như
1MB. Nếu hệ thống bắt đầu chạy thấp trên lưu trữ, nó có thể xóa các tập tin bộ
nhớ cache của bạn mà không cần cảnh báo.
Để tạo ra một tập tin mới trong một trong các thư mục này, bạn có thể sử
dụng các tập tin () xây dựng, đi qua các tập tin được cung cấp bởi một trong
những phương pháp trên chỉ định thư mục lưu trữ nội bộ của bạn. Ví dụ:
File file = new File(context.getFilesDir(), filename);
Ngoài ra, bạn có thể gọi openFileOutput () để có được một
FileOutputStream mà viết vào một tập tin trong thư mục nội bộ của bạn. Ví dụ,
đây là cách để viết một số văn bản vào một tập tin:
String filename = "myfile";
String string = "Hello world!";
FileOutputStream outputStream;
try {
outputStream = openFileOutput(filename, Context.MODE_PRIVATE);
outputStream.write(string.getBytes());
outputStream.close();
} catch (Exception e) {
e.printStackTrace();
}
Hoặc, nếu bạn cần bộ nhớ cache một số tập tin, bạn nên thay vì sử
dụng createTempFile () . Ví dụ, các phương pháp sau đây sẽ trích tên file từ

GVHD: TS ngô hữu phúc 14 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
một URL và tạo ra một tập tin với tên trong thư mục bộ nhớ cache nội bộ của
ứng dụng của bạn:
public File getTempFile(Context context, String url) {
File file;
try {
String fileName = Uri.parse(url).getLastPathSegment();
file = File.createTempFile(fileName, null, context.getCacheDir());
catch (IOException e) {
// Error while creating file
}
return file;
}
Lưu ý: thư mục lưu trữ nội bộ của ứng dụng của bạn được xác định bởi tên gói
ứng dụng của bạn ở một vị trí đặc biệt của hệ thống tập tin Android. Về mặt kỹ
thuật, ứng dụng khác có thể đọc các tập tin nội bộ của bạn nếu bạn thiết lập chế
độ tập tin để có thể đọc được. Tuy nhiên, các ứng dụng khác cũng sẽ cần phải
biết tên và tập tin gói ứng dụng tên của bạn. Các ứng dụng khác không thể duyệt
các thư mục nội bộ của bạn và không có đọc hoặc viết truy cập trừ khi bạn thiết
lập các tập tin để có thể đọc hoặc ghi. Vì vậy, miễn là bạn sử
dụng MODE_PRIVATE cho các tập tin của bạn trên lưu trữ nội bộ, họ không
bao giờ truy cập vào các ứng dụng khác.
IV. Lưu trữ một tệp tin trong bộ nhớ ngoài
Vì lưu trữ bên ngoài có thể không có, chẳng hạn như khi người dùng đã gắn
kết lưu trữ tới máy tính hoặc đã gỡ bỏ các thẻ SD cung cấp bên ngoài lưu trữ
bạn nên luôn luôn xác minh rằng khối lượng có sẵn trước khi truy cập nó. Bạn
có thể truy vấn trạng thái lưu trữ bên ngoài bằng cách gọi
getExternalStorageState () . Nếu phương thức trả bằng MEDIA_MOUNTED ,
sau đó bạn có thể đọc và viết các tập tin của bạn. Ví dụ, các phương pháp sau

đây rất hữu ích để xác định sự sẵn có lưu trữ:
/* Checks if external storage is available for read and write */
public boolean isExternalStorageWritable() {
String state = Environment.getExternalStorageState();
if (Environment.MEDIA_MOUNTED.equals(state)) {
return true;
}
return false;
}
/* Checks if external storage is available to at least read */
public boolean isExternalStorageReadable() {
String state = Environment.getExternalStorageState();
if (Environment.MEDIA_MOUNTED.equals(state) ||
Environment.MEDIA_MOUNTED_READ_ONLY.equals(state)) {
return true;
}
GVHD: TS ngô hữu phúc 15 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
return false;
}
Mặc dù lưu trữ bên ngoài là sửa đổi bởi người sử dụng và các ứng dụng
khác , có hai loại tập tin mà bạn có thể tiết kiệm ở đây:
Tập tin công cộng
Các tập tin đó phải được tự do có sẵn cho các ứng dụng khác và cho
người sử dụng . Khi người dùng gỡ bỏ ứng dụng của bạn , những tập tin
này nên vẫn còn có sẵn cho người dùng.
Ví dụ , hình ảnh chụp bởi ứng dụng của bạn hoặc các tập tin tải về khác .
Tập tin cá nhân
Các tập tin đúng là thuộc về ứng dụng của bạn và cần được xóa khi người
dùng gỡ bỏ ứng dụng của bạn . Mặc dù những tập tin này về mặt kỹ thuật

có thể truy cập bởi người sử dụng và các ứng dụng khác bởi vì họ đang ở
trên lưu trữ ngoài, họ là những tập tin mà thực tế không cung cấp giá trị
cho người sử dụng bên ngoài ứng dụng của bạn . Khi người dùng gỡ bỏ
ứng dụng của bạn , hệ thống sẽ xóa tất cả các file trong thư mục riêng bên
ngoài của ứng dụng của bạn .
Ví dụ, nguồn lực bổ sung tải về bằng cách ứng dụng của bạn hoặc các tập
tin phương tiện truyền thông tạm thời.
Nếu bạn muốn lưu các tập tin công cộng về lưu trữ bên ngoài , sử dụng
getExternalStoragePublicDirectory ( ) để có được một tập tin đại diện cho các
thư mục thích hợp trên lưu trữ ngoài. Phương pháp này có một đối số quy định
cụ thể các loại tập tin bạn muốn lưu để họ có thể được tổ chức hợp lý với các tập
tin công cộng khác , chẳng hạn như DIRECTORY_MUSIC hoặc
DIRECTORY_PICTURES . Ví dụ :
public File getAlbumStorageDir(String albumName) {
// Get the directory for the user's public pictures directory.
File file = new File(Environment.getExternalStoragePublicDirectory(
Environment.DIRECTORY_PICTURES), albumName);
if (!file.mkdirs()) {
Log.e(LOG_TAG, "Directory not created");
}
return file;
}
Nếu bạn muốn lưu các tập tin được tới ứng dụng của bạn, bạn có thể có
được các thư mục thích hợp bằng cách gọigetExternalFilesDir () và đi qua nó
một tên chỉ ra các loại thư mục bạn muốn. Mỗi thư mục được tạo ra theo cách
này được thêm vào một thư mục cha mà gói gọn tất cả các file lưu trữ bên ngoài
GVHD: TS ngô hữu phúc 16 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
của ứng dụng của bạn, mà hệ thống xóa khi người dùng gỡ bỏ ứng dụng của
bạn.

Ví dụ, đây là một phương pháp bạn có thể sử dụng để tạo ra một thư mục cho
một album ảnh cá nhân:
public File getAlbumStorageDir(Context context, String albumName) {
// Get the directory for the app's private pictures directory.
File file = new File(context.getExternalFilesDir(
Environment.DIRECTORY_PICTURES), albumName);
if (!file.mkdirs()) {
Log.e(LOG_TAG, "Directory not created");
}
return file;
}
Nếu không có tên thư mục được xác định trước phù hợp với tập tin của bạn, thay
vào đó bạn có thể gọigetExternalFilesDir () và vượt qua vô giá trị . Này sẽ trả về
thư mục gốc cho thư mục cá nhân của ứng dụng của bạn trên lưu trữ ngoài.
Hãy nhớ rằng getExternalFilesDir () tạo ra một thư mục trong một thư mục được
xóa khi người dùng gỡ bỏ ứng dụng của bạn. Nếu các tập tin bạn đang tiết kiệm
nên vẫn còn có sẵn sau khi người dùng gỡ bỏ ứng dụng, chẳng hạn như của bạn
khi ứng dụng của bạn là một máy ảnh và người dùng sẽ muốn giữ hình ảnh-bạn
nên dùnggetExternalStoragePublicDirectory () .
Bất kể bạn sử dụng getExternalStoragePublicDirectory () cho các tập tin được
chia sẻ hoặcgetExternalFilesDir () cho tập tin đó là tin tới ứng dụng của bạn,
điều quan trọng là bạn sử dụng tên thư mục được cung cấp bởi các hằng số API
như DIRECTORY_PICTURES . Những tên thư mục đảm bảo rằng các tập tin
được xử lý đúng bởi hệ thống. Ví dụ, tập tin được lưu trong
DIRECTORY_RINGTONES được phân loại theo các phương tiện truyền thông
hệ thống máy quét như nhạc chuông thay vì âm nhạc.
V. Kiểm ra không gian trống
Nếu bạn biết trước thời gian bạn đang tiết kiệm bao nhiêu dữ liệu, bạn có thể
tìm hiểu xem có đất rộng mà không gây ra một IOException bằng cách
gọi getFreeSpace () hoặc getTotalSpace () . Những phương pháp này cung cấp

không gian có sẵn hiện tại và tổng số không gian trong khối lượng lưu trữ, tương
ứng. Thông tin này cũng rất hữu ích để tránh làm đầy dung lượng lưu trữ trên
một ngưỡng nhất định.
Tuy nhiên, hệ thống không đảm bảo rằng bạn có thể viết như nhiều byte như
được chỉ định bởi getFreeSpace () .Nếu số trở lại là một vài MB hơn kích thước
của dữ liệu bạn muốn lưu, hoặc nếu hệ thống tập tin là ít hơn 90% đầy đủ, sau
GVHD: TS ngô hữu phúc 17 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
đó nó có thể là an toàn để tiến hành. Nếu không, bạn có lẽ không nên viết để lưu
trữ.
Lưu ý: Bạn không cần phải kiểm tra số lượng không gian có sẵn trước khi
bạn lưu tập tin của bạn. Thay vào đó bạn có thể thử viết các tập tin ngay lập tức,
sau đó bắt một IOException nếu xảy ra. Bạn có thể cần phải làm điều này nếu
bạn không biết chính xác bao nhiêu không gian bạn cần. Ví dụ, nếu bạn thay đổi
mã hóa của tập tin trước khi bạn lưu nó bằng cách chuyển đổi một hình ảnh
PNG sang JPEG, bạn sẽ không biết kích thước của tập tin trước.
VI. Xóa tập tin
Bạn nên luôn luôn xóa các tập tin mà bạn không còn cần. Cách đơn giản nhất để
xóa một tập tin là có cuộc gọi tham chiếu tập tin mở delete () trên chính nó.
myFile.delete();
Nếu tập tin được lưu trữ trong bộ nhớ, bạn cũng có thể yêu cầu bối cảnh để xác
định vị trí và xóa một tập tin bằng cách gọi DeleteFile () :
myContext.deleteFile(fileName);
Lưu ý: Khi người dùng gỡ bỏ ứng dụng của bạn, hệ thống Android xóa như sau:
• Tất cả các file mà bạn đã lưu vào bộ nhớ trong
• Tất cả các file mà bạn đã lưu trên lưu trữ bên ngoài sử
dụng getExternalFilesDir () .
Tuy nhiên, bạn nên xóa tất cả các tập tin lưu trữ tạo ra với getCacheDir () một
cách thường xuyên và cũng thường xuyên xóa các tập tin khác mà bạn không
còn cần.

GVHD: TS ngô hữu phúc 18 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Chương III : Xây dựng ứng dụng tải game trên nền tảng web
mobile
I. Ứng dụng web
Có 2 cách cơ bản để cung cấp một ứng dụng trên Android : một ứng dụng
phía máy khách (được phát triển bằng cách sử dụng Android SDK và cài đặt
trên thiết bị người dùng trong một APK) hoặc một ứng dụng web (được phát
triển bằng cách sử dụng các tiêu chuẩn web và truy cập thong qua 1 trình duyệt
web được cài đặt trên các thiết bị )
Nếu bạn đã chọn để cung cấp một ứng dụng dựa trên web cho các thiết bị hỗ
trợ Android, bạn có thể yên tâm rằng các trình duyệt web cho Android
(và WebViewkhung) cho phép bạn xác định khung nhìn và phong cách tính
năng mà làm cho các trang web của bạn xuất hiện ở kích thước thích hợp và quy
mô trên tất cả các cấu hình màn hình.
GVHD: TS ngô hữu phúc 19 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Hình 1 minh họa làm thế nào bạn có thể cung cấp quyền truy cập vào các
trang web của bạn từ một trong hai trình duyệt web của bạn hoặc ứng dụng
Android của riêng bạn. Tuy nhiên, bạn không nên phát triển một ứng dụng
Android chỉ đơn giản là một phương tiện để xem trang web của bạn. Thay vào
đó, các trang web bạn nhúng trong ứng dụng Android của bạn nên được thiết kế
đặc biệt cho môi trường đó. Bạn thậm chí có thể định nghĩa một giao diện giữa
ứng dụng Android của bạn và các trang web của bạn cho phép JavaScript trong
các trang web để kêu gọi các API trong ứng dụng cung cấp các API Android
Android của bạn để ứng dụng dựa trên web của bạn.
II. Màn hình hỗ trợ khác nhau trong ứng dụng web
Vì Android có sẵn trên các thiết bị với một loạt các kích cỡ màn hình và mật
độ điểm ảnh, bạn nên giải thích cho những yếu tố trong thiết kế web của bạn để
trang web của bạn luôn luôn xuất hiện ở kích thước thích hợp.

Khi nhắm mục tiêu trang web của bạn cho các thiết bị Android, có hai yếu tố
quan trọng mà bạn nên giải thích cho:
GVHD: TS ngô hữu phúc 20 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Khung nhìn : Khung nhìn là khu vực hình chữ nhật mà cung cấp một khu vực
thể vẽ cho trang web của bạn. Bạn có thể chỉ định một số đặc tính khung nhìn,
chẳng hạn như kích thước của nó và quy mô ban đầu. Quan trọng nhất là quan
điểm rộng cảng, trong đó xác định tổng số điểm ảnh ngang có sẵn từ quan điểm
của trang web của view (số lượng điểm ảnh có sẵn CSS).
Mật độ màn hình : Các WebView lớp và hầu hết các trình duyệt web trên
Android chuyển đổi CSS giá trị điểm ảnh của bạn với các giá trị mật độ điểm
ảnh độc lập, vì vậy trang web của bạn xuất hiện ở cùng một kích thước mà hiểu
được như một màn hình độ trung bình (khoảng 160dpi). Tuy nhiên, nếu đồ họa
là một yếu tố quan trọng của thiết kế web của bạn, bạn nên chú ý tới nhân rộng
xảy ra trên mật độ khác nhau, bởi vì một hình ảnh 300px rộng trên một màn
hình 320dpi sẽ được nhân rộng (sử dụng điểm ảnh vật lý nhiều hơn mỗi CSS
pixel) , có thể sản xuất các đồ tạo tác (làm mờ và pixelation).
a. Xác định thuộc tính Viewport
Khung nhìn là khu vực mà trang web của bạn được rút ra. Mặc dù tổng diện
tích có thể nhìn thấy của khung nhìn phù hợp với kích thước của màn hình khi
zoom tất cả các lối ra, khung nhìn có kích thước điểm ảnh riêng của mình mà
làm cho nó có sẵn cho một trang web. Ví dụ, mặc dù một màn hình điện thoại có
thể có thể có chiều rộng 480 pixel, khung nhìn có thể có chiều rộng 800
pixel. Điều này cho phép một trang web được thiết kế tại 800 điểm ảnh là hoàn
toàn có thể nhìn thấy trên màn hình khi quy mô khung nhìn là 1.0. Hầu hết các
trình duyệt web trên Android (bao gồm cả Chrome) thiết lập các khung nhìn đến
một kích thước lớn theo mặc định (được gọi là "chế độ khung nhìn rộng"
khoảng 980px rộng). Nhiều trình duyệt cũng thu nhỏ càng nhiều càng tốt, theo
mặc định, để hiển thị chiều rộng khung nhìn đầy đủ (được gọi là "chế độ tổng
quan").

Lưu ý: Khi trang của bạn được kết xuất trong WebView , nó không sử dụng
chế độ khung nhìn rộng (trang xuất hiện ở zoom đầy đủ) theo mặc định. Bạn có
thể kích hoạt chế độ khung nhìn rộng với setUseWideViewPort () .
Có thể xác định tính chất của khung nhìn cho trang web của bạn, chẳng hạn
như chiều rộng và mức độ phóng ban đầu, bằng cách sử dụng name="viewport"
<meta > thẻ trong tài liệu của bạn <head> .
Cú pháp sau đây cho thấy tất cả các thuộc tính khung nhìn được hỗ trợ và các
loại giá trị chấp nhận mỗi người:
<meta name="viewport"
content="
height = [pixel_value | "device-height"] ,
width = [pixel_value | "device-width"] ,
initial-scale = float_value ,
minimum-scale = float_value ,
GVHD: TS ngô hữu phúc 21 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
maximum-scale = float_value ,
user-scalable = ["yes" | "no"]
" />
Ví dụ, sau đây <meta> thẻ xác định rằng chiều rộng khung nhìn chính xác
phải phù hợp với chiều rộng các thiết bị màn hình và có khả năng phóng to nên
bị vô hiệu hóa:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
Khi tối ưu hóa trang web của bạn cho các thiết bị di động, bạn thường
phải thiết lập chiều rộng để "thiết bị rộng" vì vậy kích thước phù hợp chính xác
trên tất cả các thiết bị, sau đó sử dụng phương tiện truyền thông truy vấn CSS
linh hoạt thích ứng với bố trí cho phù hợp với kích cỡ màn hình khác nhau.

Lưu ý: Bạn nên vô hiệu hóa sử dụng rộng chỉ khi bạn chắc chắn rằng bố
cục trang web của bạn là linh hoạt và nội dung sẽ phù hợp với chiều rộng của
màn hình nhỏ.
b. Mục tiêu căn chỉnh thiết bị với CSS
Trình duyệt Android và WebView hỗ trợ một tính năng phương tiện truyền
thông CSS cho phép bạn tạo ra phong cách cho màn hình cụ thể mật độ-the -
webkit-thiết bị-pixel, tỷ lệ CSS tính năng phương tiện truyền thông. Giá trị mà
bạn áp dụng cho tính năng này nên là "0,75", "1", hoặc "1.5", để chỉ ra rằng
phong cách là cho các thiết bị với mật độ thấp, mật độ trung bình, hoặc màn
hình mật độ cao, tương ứng.
Ví dụ, bạn có thể tạo kiểu riêng biệt cho mỗi mật độ:
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)"
href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)"
href="mdpi.css" />
Hoặc, xác định phong cách khác nhau trong một kiểu:
#header {
background:url(medium-density-image.png);
}
GVHD: TS ngô hữu phúc 22 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for high-density screens */
#header {
background:url(high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
#header {

background:url(low-density-image.png);
}
}
III. Xây dựng ứng dụng web trong webview
Muốn cung cấp một ứng dụng web (hoặc chỉ là một trang web) như một phần
của một ứng dụng, bạn có thể làm điều đó bằng cách sử dụng WebView . Các
WebView lớp là một phần mở rộng của Android Xem lớp cho phép bạn hiển thị
các trang web như là một phần của bố trí hoạt động của bạn. Nó không bao gồm
bất kỳ tính năng của một trình duyệt web được phát triển đầy đủ, chẳng hạn như
điều khiển chuyển hướng hoặc một thanh địa chỉ. Tất cả những
gì WebViewkhông, theo mặc định, là hiển thị một trang web.
Một kịch bản phổ biến, trong đó sử dụng WebView là hữu ích khi bạn muốn
cung cấp thông tin trong ứng dụng của bạn mà bạn có thể cần phải cập nhật,
chẳng hạn như một thỏa thuận người dùng cuối hoặc một hướng dẫn sử
dụng. Trong ứng dụng Android của bạn, bạn có thể tạo ra một Hoạt động có
chứa một WebView , sau đó sử dụng để hiển thị tài liệu của bạn đó là lưu trữ
trực tuyến.
Một kịch bản khác trong đó WebView có thể giúp là nếu ứng dụng của bạn
cung cấp dữ liệu cho người sử dụng luôn yêu cầu kết nối Internet để lấy dữ liệu,
chẳng hạn như email. Trong trường hợp này, bạn có thể tìm thấy nó dễ dàng hơn
để xây dựng một WebView trong ứng dụng Android của bạn cho thấy một trang
web với tất cả các dữ liệu người dùng, chứ không phải là thực hiện một yêu cầu
mạng, sau đó phân tích các dữ liệu và làm cho nó trong một bố trí
GVHD: TS ngô hữu phúc 23 SVTH: Nguyễn Linh Dương
Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
Android. Thay vào đó, bạn có thể thiết kế một trang web đó là thiết kế riêng cho
các thiết bị Android và sau đó thực hiện một WebView trong ứng dụng Android
của bạn mà tải trang web.
a. Tạo web view cho ứng dụng
Để thêm một WebView để ứng dụng của bạn, chỉ cần bao gồm <WebView>

yếu tố trong bố trí hoạt động của bạn.Ví dụ, đây là một tập tin bố trí trong
đó WebView lấp đầy màn hình:
<? xml version = "1.0" encoding = "utf-8" ?>
<WebView xmlns:android = "
android:id = "@+id/webview"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
/>
Để tải một trang web trong WebView , sử dụng loadUrl () . Ví dụ:
WebView myWebView = ( WebView ) findViewById ( R . id . webview );
myWebView . loadUrl ( "" );
Trước khi điều này sẽ làm việc, tuy nhiên, ứng dụng của bạn phải có
quyền truy cập vào Internet. Để có được truy cập Internet, yêu cầu INTERNET
cho phép trong file manifest của bạn. Ví dụ:
<manifest >
<uses-permission android:name="android.permission.INTERNET" />

</manifest>
b. Sử dụng JavaScript trong WebView
Nếu trang web bạn có kế hoạch để nạp vào của bạn WebView sử dụng
JavaScript, bạn phải kích hoạt JavaScript cho bạn WebView . Một khi
JavaScript được kích hoạt, bạn cũng có thể tạo ra các giao diện giữa các mã ứng
dụng của bạn và mã JavaScript của bạn.
Cho phép JavaScript
JavaScript bị vô hiệu hóa trong một WebView theo mặc định. Bạn có thể
kích hoạt nó thông qua cácWebSettings thuộc của bạn WebView . Bạn có thể
lấy WebSettings với getSettings () , sau đó kích hoạt Javascript
với setJavaScriptEnabled () .
Ví dụ:
GVHD: TS ngô hữu phúc 24 SVTH: Nguyễn Linh Dương

Báo cáo bài tập tốt nghiệp Ứng dụng tải game trên nền tản webmobile
WebView myWebView = ( WebView ) findViewById ( R . id . webview );
WebSettings webSettings = myWebView . getSettings ();
webSettings . setJavaScriptEnabled ( true );
WebSettings cung cấp truy cập đến một loạt các thiết lập khác mà bạn có thể tìm
thấy hữu ích.
c. Hướng lịch sử trang web
Khi bạn WebView ghi đè URL tải, nó sẽ tự động tích lũy một lịch sử của các
trang web đã truy cập. Bạn có thể điều hướng lạc hậu và chuyển tiếp thông qua
lịch sử với GoBack () và goForward () .
Ví Dụ : nút chuyển hướng GoBack () :
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// Check if the key event was the Back button and if there's history
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
myWebView.goBack();
return true;
}
// If it wasn't the Back key or there's no web page history, bubble up
to the default
// system behavior (probably exit the activity)
return super.onKeyDown(keyCode, event);
}
Chương IV : Kết quả
I. Công cụ
- Eclipse : trình biên dịch
- SDK : hệ thống phát triển
GVHD: TS ngô hữu phúc 25 SVTH: Nguyễn Linh Dương