Xây dựng ứng dụng thông tin mua bán cho mobile bằng HTML5

LỜI CẢM ƠN
Em xin chân thành cảm ơn trường Đại học Công Nghệ Thông Tin và Truyền
Thông – Đại hoc Thái Nguyên đã tạo điều kiện cho em thực hiện đồ án này.
Em xin gửi lời cảm ơn sâu sắc tới thầy Trần Mạnh Tuấn, KS. Hoàng Tất
Thắng là người trực tiếp hướng dẫn em trong suốt quá trình thực hiện đồ án.
Em xin gửi lời cảm ơn chân thành đến toàn thể các anh chị trong công ty cổ
phần Vinno Việt Nam đã nhiệt tình giúp đỡ, đóng góp những ý kiến bổ ích cho em
trong quá trình thực hiện đồ án.
Cuối cùng, em xin gửi lời cảm ơn đến gia đình và bạn bè vì những tình cảm,
sự ủng hộ và động viên đã dành cho em trong suốt quá trình học tập cũng như
thực hiện đồ án này.
Thái Nguyên, tháng 6 năm 2015
Sinh viên thực hiện

Nguyễn Thị Lệ

1


LỜI CAM ĐOAN
Đồ án tốt nghiệp là sản phẩm tổng hợp toàn bộ các kiến thức mà sinh viên
đã học được trong suốt thời gian học tập tại trường Đại học. Ý thức được điều đó,
với tinh thần nghiêm túc, tự giác cùng sự lao động miệt mài của bản thân và sự
hướng dẫn tận tình của thầy Trần Mạnh Tuấn, KS.Hoàng Tất Thắng đã giúp em đã
hoàn thành xong đồ án tốt nghiệp của mình.
Em xin cam đoan về nội dung đồ án tốt nghiệp với tên đề tài “Xây dựng
ứng dụng thông tin mua bán cho mobile bằng HTML5” không sao chép nội
dung cơ bản từ các đồ án khác, hay các sản phẩm tương tự mà không phải do
em làm ra. Sản phẩm của đồ án là do chính bản thân em nghiên cứu và xây
dựng nên.
Nếu có gì sai em xin chịu mọi hình thức kỉ luật của Trường Đại học Công

Nghệ Thông Tin và Truyền Thông – Đại học Thái Nguyên.

Thái Nguyên, tháng 06 năm 2015
Sinh viên thực hiện

2


MỤC LỤC
DANH MỤC HÌNH ẢNH . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
DANH SÁCH CÁC THUẬT NGỮ VÀ TỪ VIẾT TẮT . . . . . . . . . . . . . . . . . . . . . . . . 5
LỜI MỞ ĐẦU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1. Giới thiệu về HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.1.Ưu, nhược điểm của HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.2. Một số đặc điểm nổi bật của HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.3. Các tính năng mới có trong HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.1.4. Lịch sử hình thành và phát triển HTML

19

1.2. Phương pháp phân tích thiết kế hướng đối tượng. . . . . . . . . . . . . . . . . . . . . . . . 21
1.2.1. Giới thiệu phương pháp phân tích thiết kế hướng đối tượng
1.2.2. Phân tích thiết kế hướng đối tượng với UML.

21

24

CHƯƠNG 2. KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG . . . . . . . . . 33

2.1. Khảo sát hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.1.1. Khảo sát hiện trạng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.1.2. Phân tích bài toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.2. Phân tích thiết kế hệ thống. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.2.1. Xây dựng biểu đồ Use case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.2.2. Phân tích các chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.2.3.Biểu đồ lớp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG NHÀ ĐẤT. . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.1.Ý nghĩa bài toán thông tin mua bán bất động sản . . . . . . . . . . . . . . . . . . . . . . . . 68
3.2. Giao diện trang chủ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
3.3. Giao diện hiển thị danh sách nhà cần bán chức năng tìm mua nhà . . . . . . . 70
3.4. Giao diện hiển thị thông tin chi tiết của một bất động sản . . . . . . . . . . . . . . . 71
3.5. Giao diện hiển thị chức năng liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

3


3.6. Giao diện hiển thị chức năng tìm kiếm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3.7. Giao diện hiển thị chức năng đăng tin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
3.8. Giao diện hiển thị chức năng đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
3.9. Giao diện hiển thị chức năng đăng ký thành viên. . . . . . . . . . . . . . . . . . . . . . . . 76
KẾT LUẬN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
TÀI LIỆU THAM KHẢO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

4


DANH MỤC HÌNH ẢNH
Hình 1.1: Các lớp phân tích . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Hình 2.1: Biểu đồ Use case tổng quát . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Hình 2.2: Biểu đồ hoạt động chức năng đăng ký . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Hình 2.3: Biểu đồ trình tự chức năng đăng ký . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Hình 2.4: Biểu đồ hoạt động chức năng đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Hình 2.5: Biểu đồ trình tự chức năng đăng nhập của người dùng. . . . . . . . . . . . . . . 40
Hình 2.6: Biểu đồ trình tự chức năng đăng nhập của Admin . . . . . . . . . . . . . . . . . . . 41
Hình 2.7: Biểu đồ hoạt động chức năng xem danh mục bất động sản . . . . . . . . . . 42
Hình 2.8: Biểu đồ trình tự chức năng xem danh mục bất động sản của người dùng
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Hình 2.9: Biểu đồ hoạt động chức năng xem chi tiết tinbất động sản . . . . . . . . . . 43
Hình 2.10: Biểu đồ trình tự chức năng xem chi tiết tin bất động sản của người
dùng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Hình 2.11: Biểu đồ trình tự chức năng xem chi tiết tin bất động sản của admin 44
Hình 2.12: Biểu đồ hoạt động chức năng tìm kiếm bất động sản. . . . . . . . . . . . . . . 45
Hình 2.13: Biểu đồ trình tự chức năng tìm kiếm bất động sản . . . . . . . . . . . . . . . . . 46
Hình 2.14: Biểu đồ hoạt động chức năng liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 2.15: Biểu đồ trình tự chức năng liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 2.16: Biểu đồ hoạt động chức năng đăng tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Hình 2.17: Biểu đồ trình tự chức năng đăng tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Hình 2.18: Biểu đồ hoạt động chức năng duyệt tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Hình 2.19: Biểu đồ trình tự chức năng duyệt tin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Hình 2.20: Biểu đồ hoạt động chức năng xem tin đợi duyệt . . . . . . . . . . . . . . . . . . . 51
Hình 2.21: Biểu đồ trình tự chức năng xem tin đợi duyệt . . . . . . . . . . . . . . . . . . . . . . 51
Hình 2.22: Biểu đồ hoạt động chức năng xóa tin đợi duyệt . . . . . . . . . . . . . . . . . . . . 52
Hình 2.23: Biểu đồ trình tự chức năng xóa tin đợi duyệt. . . . . . . . . . . . . . . . . . . . . . . 52
Hình 2.24: Biểu đồ hoạt động chức năng tạo danh mục . . . . . . . . . . . . . . . . . . . . . . . 53
Hình 2.25: Biểu đồ trình tự chức năng tạo danh mục. . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Hình 2.26: Biểu đồ hoạt động chức năng sửa thông tindanh mục . . . . . . . . . . . . . . 54
Hình 2.27: Biểu đồ trình tự chức năng sửa thông tin danh mục . . . . . . . . . . . . . . . . 55
Hình 2.28: Biểu đồ hoạt động chức năng xóa danh mục . . . . . . . . . . . . . . . . . . . . . . . 55
Hình 2.29: Biểu đồ trình tự chức năng xóa danh mục . . . . . . . . . . . . . . . . . . . . . . . . . 56

Hình 2.30: Biểu đồ hoạt động chức năng tạo tin bất động sản . . . . . . . . . . . . . . . . . . 57
Hình 2.31: Biểu đồ trình tự chức năng tạo tin bất động sản . . . . . . . . . . . . . . . . . . . . 57
5


Hình 2.32: Biểu đồ hoạt động chức năng sửa nội dung tin bất động sản . . . . . . . 58
Hình 2.33: Biểu đồ trình tự chức năng sửa nội dung tin BĐS . . . . . . . . . . . . . . . . . . 58
Hình 2.34: Biểu đồ hoạt động chức năng xóa tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Hình 2.35: Biểu đồ trình tự chức năng xóa tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Hình 2.36: Biểu đồ hoạt động chức năng tạo loại hình bất động sản của admin. 60
Hình 2.37: Biểu đồ trình tự chức năng tạo loại hình bất động sản của admin . . . 61
Hình 2.38: Biểu đồ hoạt động chức sửa thông tin loại hình bất động sản của admin
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Hình 2.39: Biểu đồ trình tự chức năng sửa thông tin loại hình bất động sản . . . . 62
Hình 2.40: Biểu đồ hoạt động chức năng xóa loại hình bất động sản . . . . . . . . . . . 62
Hình 2.41: Biểu đồ trình tự chức năng xóa loại hình bất động sản. . . . . . . . . . . . . . 63
Hình 2.42: Biểu đồ hoạt động chức năng tạo tài khoản của admin. . . . . . . . . . . . . . 64
Hình 2.43: Biểu đồ trình tự chức năng tạo tài khoản của admin . . . . . . . . . . . . . . . . 64
Hình 2.44: Biểu đồ hoạt động chức năng sửa thông tin tài khoản. . . . . . . . . . . . . . . 65
Hình 2.45: Biểu đồ trình tự chức năng sửa thông tin tài khoản của người dùng 65
Hình 2.46: Biểu đồ trình tự chức năng sửa thông tin tài khoản của người dùng 66
Hình 2.47: Biểu đồ trình tự chức năng xóa tài khoản thành viên của admin . . . . 66
Hình 2.48: Biểu đồ trình tự chức năng xóa tài khoản thành viên của admin . . . . 67
Hình 2.49: Biểu đồ lớp của toàn hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Hình 3.1: Giao diện trang chủ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Hình 3.2: Giao diện hiển thị danh sách tìm mua nhà. . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Hình 3.3: Giao diện hiển thị thông tin chi tiết của một bất động sản. . . . . . . . . . . . 71
Hình 3.4: Giao diện trang liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Hình 3.5: Giao diện trang tìm kiếm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Hình 3.6: Giao diện chức năng đăng tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Hình 3.7: Giao diện chức năng đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Hình 3.8: Giao diện chức năng đăng ký thành viên . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

6


DANH SÁCH CÁC THUẬT NGỮ VÀ TỪ VIẾT TẮT

STT

THUẬT NGỮ

MÔ TẢ



HTML

HyperText Markup Language



CSS

Cascading Style Sheets



API

Application Programming Interface



DOM

Document Object Model



SGML

Standard Generalized Markup Language

7


LỜI MỞ ĐẦU
Trong thời kì mà công nghệ số phát triển với tốc độ chóng mặt như
hiện nay, điện thoại thông minh hay còn gọi là Smartphone thực sự đã mang
đến một cuốc cách mạng cho các thiết bị di động. Sự tiến bộ vượt bậc của
công nghệ đã làm thay đổi hoàn toàn thói quen cũng như hành vi của con
người. Thiết bị di động đã đang và sẽ trở thành phương tiện giao tiếp và làm
việc chủ yếu của con người. Và phần cốt lõi để tạo ra sức hấp dẫn từ chiếc
Smartphone chính là hệ điều hành và các ứng dụng mà chúng đang chạy.
Hiện tại, các ứng dụng dành cho thiết bị di động đang bị phân mảnh rất lớn
do các hãng công nghệ lớn cạnh tranh, ganh đua nhau tạo ra các nền tảng hệ điều
hành di động của riêng mình: IOS, Android, Window Phone, BlackBerry,
webOS,… Vì vậy, việc xây dựng các ứng dụng trên di động là cần thiết và là
hướng đi mới trong tương lai.

Trong đề tài này em muốn giới thiệu về ngôn ngữ HTML5, lý thuyết phân
tích thiết kế hệ thống hướng đối tượng và xây dựng một chương trình phần mềm
ứng dụng thông tin mua bán nhà đất cho mobile chạy trên nền tảng Android.
Với mục tiêu của đồ án là xây dựng ứng dụng thông tin mua bán cho mobile
bằng HTML5. Đồ án được chia thành 3 chương với các nội dung cơ bản sau:
Chương 1. Cơ sở lý thuyết
Chương này tập chung nghiên cứu các kiến thức tổng quan về:
 Giới thiệu HTML5
 Tổng quan về phân tích thiết kế hệ thống theo hướng đối tượng
Chương 2. Khảo sát và phân tích thiết kế hệ thống
Chương này chủ yếu trình bày về:
 Khảo sát về nhu cầu cần một ứng dụng di động đơn giản, dễ sử dụng để
tra cứu thông tin bất động sản.

8


 Trình bày các chức năng của ứng dụng và phân tích các chức năng theo
hướng đối tượng
Chương 3. Xây dựng ứng dụng thông tin mua bán nhà đất bằng HTML5
Chương này trình bày về demo ứng dụng thông tin mua bán bất động sản
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1. Giới thiệu về HTML5
1.1.1.Ưu, nhược điểm của HTML5
a. Ưu điểm:
- Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước
đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ
trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ.
- Tính tiện dụng: HTML5 đặt người dùng lên hàng đầu nên cú pháp của

HTML5 khá thoải mái, thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần
nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do
CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng
trong các phiên bản HTML trước đây.
- Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các
khai báo đơn giản hơn và một API mạnh mẽ.
Vd: khai báo DOCTYPE:
HTML4:Transitional//EN”
/>HTML5:<!DOCTYPE html>
So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa
mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.
-Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các

9


ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết
bị và nền tảng khác nhau
- Điểm đặc trưng đầu tiền của một ngôn ngữ đánh dấu là các thẻ. Và HTML5
bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung(article, aside, title…) đến
các thẻ hỗ trợ tương tác và multimedia ( video, audio…).
Thẻ <form> của HTML5 cũng được xem là 1 cải tiến lớn. Giờ đây với form
2.0, tất cả các chức năng mà bạn cần (định dạng, validate data,…) đã được xây
dựng trực tiếp vào trong HTML.
+ <article> thẻ này định nghĩa một bài viết hoặc bình luận của người dùng.
Nó độc lập với content của website.
+ <aside> thẻ này đánh dấu nội dung bên cạnh của trang hiện tại.Ví dụ như
một slidebar.
+ <header><footer> hai thẻ này giúp bạn không cần định nghĩa id cho tiêu đề

và cuối trang.
+ <nav> thẻ này định nghĩa phần menu điều hướng cho website.
+ <section> đây là một thẻ quan trọng, nó giúp bạn xác định các thành phần
khác nhau trong website. Bạn có thể gộp chung các div cùng nội dung vào trong
thẻ này để dễ dàng quản lý.
+ <audio>, <video> hai thẻ này giúp bạn hiển thị một đoạn phim hoặc một
bài hát trên website đơn giản hơn rất nhiều.
+ <embed> thẻ này xác định một container các plugin tương tác với ứng
dụng bên ngoài.
+ <canvas> thẻ thú vị này cho phép bạn vẽ đồ họa mà không cần phải qua bất
kì đoạn mã hỗ trợ nào (chủ yếu là javascript).
 HTML5 bao gồm một tập các API hấp dẫn. Vài API thú vị có thể kể đến
như:
+ Canvas
+ Geolocation
10


+ WebSocket
+ Web Storage
+ WebWorkers
+…
b. Nhược điểm
Cùng với nhiều tính năng hấp dẫn, bên cạnh đó HTML5 củng vẫn còn nhiều
thiếu sót, gây khó khăn cho người sử dụng chúng:
- Có rất ít các trình duyệt web hỗ trợ HTML5: Việc HTML5 ra đời tạo nên
một sự đổi mới cho công nghệ website, nhưng việc hỗ trợ công nghệ HTML5 để
có thể hiển thị tốt cho người sử dụng thì vẫn còn rất ít, chỉ có các trình duyệt thông
dụng như Google Chorme, Firefox... và mới update nên có thể hỗ trợ tốt HTML5,
các trình duyệt còn lại vẫn theo phương thức cũ nên việc ứng dụng toàn bộ công

nghệ HTML5 vào quá trình thiết kế như thiết kế website asp là một điều mạo
hiểm, có thể sẽ ứng dụng rộng rãi trong tương lai nhưng với thời điểm hiện tại vẫn
còn nhiều khó khăn.
- Sự mới mẻ trong câu lệnh: Do mới phát triển và ra đời không lâu nên vẫn
còn rất nhiều người lập trình chưa thông thuộc các công lệnh mới nên việc chuyển
đổi giữa công nghệ cũ sang công nghệ HTML5 mới sẽ mất khá nhiều thời
gian và công sức.
1.1.2. Một số đặc điểm nổi bật của HTML5
HTML5 mang lại cho người dùng trải nghiệm lướt Web hoàn toàn mới,
nhanh hơn, ổn định hơn và bảo mật hơn. HTML5 sẽ giúp các nội dung trên Web
hoạt động tốt hơn mà không cần phụ thuộc vào bất kì một ứng dụng phụ trợ nào
khác. Bên cạnh đó, HTML5 có khả năng hỗ trợ API (Application Programming
Interface) và DOM (Document Object Model) sẽ cho phép dễ dàng mở rộng, giúp
các nhà phát triển tự do sang tạo trong việc tạo ra các ứng dụng thân thiện và hữu
ích hơn.

11


Hơn nữa, với HTML5 mọi thiết bị từ máy tính cá nhân đến các thiết bị di
động sẽ có thể dễ dàng tiếp cận nội dung, chỉ cần duy nhất một điều kiện là trình
duyệt đang dùng phải hỗ trợ HTML5. Và hiện nay, hầu hết các trình duyệt phổ
biến đều hỗ trợ mạnh mẽ HTML5, từ trình duyệt web: Firefox, Chrome, Opera,
Internet Explorer đến các trình duyệt trên iOS, Android,…
Với HTML5, các nhà phát triển chỉ cần xây dựng ứng dụng 1 lần, nó có thể
hoạt động tốt trên tất cả các thiết bị, không như Flash hoặc Silverlight đòi hỏi phải
cài đặt plugin để có thể hiển thị nội dung.
Sau đây là một số tính năng nổi trội của HTML5 mà trong quá trình tìm
hiểu tôi đã đúc kết được.
1.1.2.1. Hỗ trợ thay thế Flash

Flash lâu nay vẫn chiếm phần lớn nội dung trên Web nhưng hiện nay nó đã
và đang dần bị thay thế bởi HTML5.
Tồn tại quãng thời gian khá dài, Flash có những hạn chế rất lớn mà các
giới phát triển đã chỉ ra được, đó là sự bất ổn định, làm thiết bị hoạt động nóng
hơn và hao pin hơn, phải yêu cầu cài đặt plugin để hoạt động. Và Flash không
phải là tối ưu cho các thiết bị di động khi vấn đề về Pin luôn là mối quan tâm
lớn của người dùng.
Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ ràng, Flash sẽ không
bao giờ xuất hiện trên các thiết bị di động của Apple, và cũng đưa ra sự ủng hộ
tuyệt đối vào HTML5. Quan điểm này thể hiện rõ ràng đến nỗi Steve Jobs đã viết
một bức thư và đăng trên trang chủ của Apple và xóa tan những mong muốn đưa
Flash lên iOS của người dùng.
Thời gian trước, Google đã phát triển công cụ Google Swiffy cho phép người
dùng chuyển đổi nội dung từ Flash sang HTML5, Adobe mua lại Nitobi – công ty
12


sang lập bộ khung lập trình ứng dụng Phonegap và Phonegap Build cho phép lập
trình viên phát triển ứng dụng nền tảng cross-flatform trên di động với HTML5 và
Javascript. Bên cạnh đó, bản thân Adobe cũng cho ra đời công cụ mang tên
Wallaby cho phép chuyển nội dung từ Flash sang HTML5.
Và mới đây, chính Adobe đã tuyên bố sẽ ngừng phát triển Flash trên các thiết
bị di động mà thay vào đó là tập trung phát triển HTML5. Với giới công nghệ, đây
có thể là một bước ngoặt quan trọng. Adobe cho biết họ vẫn sẽ tải lên các bản sửa
lỗi, nhưng sẽ không phát triển Flash trên các thiết bị di động nữa, và Flash Player
11.1 sẽ là phiên bản nâng cấp cuối cùng. Adobe cũng có thông báo: “Hiện tại
HTML5 đã được triển khai rộng rãi trên nhiều nền tảng khác nhau, nó sẽ trở thành
giải pháp tốt nhất cho việc phát triển nội dung trên trình duyệt của thiết bị di
động”.
Hiện nay, nhiều trang web và dịch vụ lớn đã chuyển sang dùng HTML5, có

thể kể ra tiêu biểu trong số đó là Youtube, Nokia Máp,…Ngoài ra, rất nhiều game
được xây dựng bằng HTMl5 đã xuất hiện, trong đó có các games nối tiếng như
Angry Bird, Fieldrunners…
Như vậy với HTML5, người dùng Web sẽ có được một trải nghiệm hoàn toàn
mới, có thể thoải mái xem video, chơi games trên trình duyệt với mọi thiết bị mà
không cần quan tâm đến các thành phần bổ sung cần phải cài thêm. Với các thiết
bị di động như Smartphone, Tablet, người dùng sẽ không cần phải lo lắng về hiệu
năng cũng như thời lương sử dụng Pin nữa, vì HTML5 đã tối ưu hóa những lo ngại
đó.
1.1.2.2. Tính năng bảo mật
Mỗi trình duyệt có một plug-in riêng được lập ra với những tiêu chuẩn khác
nhau, được đưa ra vào thời điểm khác nhau và kiểu bảo mật cũng khác nhau.
Thông thường, một số phiên bản plug-in có tính bảo mật hơn so với loại khác.
13


Khi số lượng plug-in gia tăng, chúng làm tăng độ phức tạp trong kiểm tra các lỗi
an ninh.
Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML5 sẽ
bỏ đi được những khuyết điểm có trong các plug-in trước đó. Những khuyết
điểm có thể bị lợi dụng để thiết lập mã độc.
1.1.2.3.Đơn giản hóa việc phát triển web
Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải thích
ngắn gọn về sự thay đổi này: “Tôi thực sự thích HTML5 vì nó cho phép tôi làm
việc trong một môi trường thích hợp, trình duyệt kiết hợp với Javascipt, DOM
mà không phải bật đi bật lại Flash. Nó vừa là một ngôn ngữ lại vừa là một công
cụ, không khác biết lắm so với các plug-in khác”.
HTML5 cung cấp một ngôn ngữ lập trình JavaScript, một kiểu dữ liệu
(XML hoặc DOM) và một phần nguyên tắc thiết lập (CSS) để kết nối văn bản,
audio, video và đồ họa.

1.1.3. Các tính năng mới có trong HTML5
1.1.3.1. HTML5 hỗ trợ các phần tử định nghĩa mới
Ta có thể liệt kê các phần tử định nghĩa mới trong HTML5 và các chức
năng của chúng trong bảng sau đây.
<header (tiêu đề)>

trang)>

Định nghĩa 1 tiêu đề cho 1 số phần tử của trang web, có thể
là toàn bộ trang, 1 phần tử <article>, hay <section>
Giống như phần tử <header>, nó định nghĩa một chân trang
cho 1 số phần của 1 trang.

14

hướng)>

<article (bài viết)>

Chứa các lien kết chuyển hướng ban đầu trên 1 trang web,
chỉ nên dùng cho các khối chuyển hướng, nhóm các liên kết
lớn.
Định nghĩa một mục độc lập trên trang có thể dùng riêng
cho nó, như mục tin tức, bài viết trên blog, hoặc nhận xét.
Đại diện cho 1 phần của một tài liệu hoặc ứng dụng, chẳng

<section (phần)>

hạn như 1 chương hoặc 1 phần của 1 bài viết hoặc hướng
dẫn.

<aside (nhận xét)>
hgroup

Đánh dấu 1 thanh phụ hoặc 1 số nội dung khác có phần tách
rời với nội dung xung quanh nó. Ví dụ các khối quảng cáo.
Bọc 1 tiêu đề và 1 phụ đề. Ví dụ trong trường hợp, 1 trang,
1 phần có nhiều hơn 1 tiêu đề ( có 1 tiêu đề, 1 phụ đề ).

Bảng 1: Các phần tử định nghĩa mới trong HTML5.

15


1.1.3.2. HTML5 hỗ trợ đồ họa tương tác với phần tử <canvas>
Chuẩn Web cũ tải hình ảnh bằng cách tải file GIF hay JPG. Chuẩn Web mới
có thể xây dựng hình ảnh trên Canvas. Một loạt thư viện đồ họa đẹp được đưa
ra, giúp cho đồ họa của Website trở nên tương tác hơn.
Phần tử <canvas> định nghĩa chiều rộng, chiều cao, và mã định danh (ID)
duy nhất cho đối tượng. Sau đó khi trang Web đã hoàn tất dựng hình, lập trình
viên sử dụng một loạt các JavaScript API để thực sự vẽ các đối tượng trên
khung nền ảnh (canvas). Những API này cho phép vẽ hình dạng và các đường
kẻ, phết màu, độ mờ đục và các gradient (độ dốc), tạo văn bản, chuyển đổi các
đối tượng khung nền ảnh, và thể hiện hình ảnh động. Các API cũng cho phép
phần tử <canvas> tương tác và đáp ứng với đầu vào của người dùng như các sự
kiện click chuột và các sự kiện bàn phím, tạo điều kiện thuận lợi cho việc sản
xuất các trò chơi và các ứng dụng Web trên khung nền ảnh.
1.1.3.3. HTML5 cho phép các ứng dụng lưu trữ cục bộ với local storage

Các nhà phát triên Web có truyền thống sử dụng các cookie để lưu trữ
thông tin trên máy cục bộ của khách truy cập, cho phép một trang Web đọc
lại thông tin này tại một điểm sau đó mà không mất nhiều thời gian tải lại.
Trong khi các cookie rất có ích để lưu trữ dữ liệu cơ bản, thì chúng lại bị
hạn chế bởi thực tế các trình duyệt Web thường không cần thiết giữ lại hơn
20 cookie cho mỗi máy chủ hoặc nhiều hơn 4KB dữ liệu cho mỗi cookie.
Ngoài ra, chúng được gửi đến máy chủ Web với mọi yêu cầu HTTP, gây ra
lãng phí tài nguyên.
HTML5 cũng cấp một giải pháp cho các vấn đề này bằng các Local Storage
API (API lưu trữ cục bộ). Nó cho phép các nhà phát triển lưu trữ thông tin trên
máy của khách truy cập. Ngoài ra, thông tin có thể truy cập ở bất kỳ điểm nào
16


(ngay cả sau khi trang đã được đưa ra) và không được tải tự động với mỗi yêu
cầu HTTP, điều nay giúp ngăn cản các trang Web khỏi bị các trang Web khác
đọc hay thay đổi dữ liệu đã lưu.
Hầu hết các trình duyệt lưu trữ các trang Web trong bộ nhớ nhanh cục bộ,
cho phép xem chúng ngay cả khi người dùng không nối mạng. Việc này hoạt
động tốt với các trang tĩnh, nhưng nó không có sẵn cho nội dung động thường
dựa vào cơ sở dữ liệu như Gmail, Facebook, Twitter. HTML5 cung cấp sự hỗ
trợ cho các ứng dụng không nối mạng, ở đây trình duyệt tải tất cả các tệp cần
thiết để sử dụng ứng dụng không cần nối mạng, khi đó trình duyệt có thể cho
phép các thay đổi bất kỳ được thực hiện trong quá trình được tải lên máy chủ
khi chúng kết nối lại vào mạng Internet.
1.1.3.4. HTML5 hỗ trợ phát <audio> và <video>
HTML5 bao gồm cả sự hỗ trợ cho 2 phần tử mới, <audio> và <video>, cho
phép các nhà phát triển Web bao gồm các nội dung đa phương tiện mà không cần
người dùng cài đặt các trình cắm thêm của trình duyệt. Một số trình duyệt như
Firefox, Google Chrome đã bắt đầu hỗ trợ các phần tử mới này và cung cấp các

nút điều khiển phát lại của trình duyệt chuẩn. Điều này đã và sẽ dần được thay thế
cho các nền tảng Adobe Flash, hay định dạng tệp Flash Video (.flv).
1.1.3.5. HTML5 cải tiến biểu mẫu Web
Bên cạnh những nút điều khiển biều mẫu đã có: button, checkbox, file, hidden,
image, password, reset, radio, submit, text,…HTML5 đã cải tiến và thêm vào các
nút biểu mẫu hữu ích thiết thực như:
 Color (màu)
 Date (ngày)

17


 Datetime (ngày giờ)
 Datetiem-local (ngày giờ địa phương)
 Email (thư điện tử)
 Month (tháng)
 Number (số)
 Range (phạm vi)
 Search (tìm kiếm)
 Tel (điện thoại)
 Time (thời gian)
 url (địa chỉ)
 week (tuần)
Điều này đã giúp ích rất nhiều cho các nhà phát triển web khi không còn phải
sử dụng thư viện JavaScript bên ngoài để cung cấp các thành phần giao diện người
dùng (UI), hoặc sử dụng một khung công tác phát triển thay thế khác như Adobe
Flex, để tạo ra các kiểu nút điều khiển tinh vi này.
1.1.3.6. HTML5 hỗ trợ khả năng truy cập tới hệ thống file system
HTML5 cung cấp các hàm APIs hết sức mạnh mẽ để tương tác với dữ liệu
kiểu nhị phân và hệ thống file system của người sử dụng. Các hàm này cho phép

các ứng dụng web có khả năng làm những việc như đọc các files dữ liệu một cách
đồng bộ hoặc không đồng bộ, tạo ra các dữ liệu nhị phân một cách tùy ý, viết các
files, cho phép thực hiện xử lý trên file khi kéo thả nó từ desktop vào trong trình
18


duyệt và tải lên dữ liệu kiểu nhị phân bằng cách sử dụng XMLHttpRequest2.
Ví dụ minh họa như các hàm File APIs này có thể sử dụng để tạo ra 1 hình
ảnh thu nhỏ dành cho việc xem trước của các bức ảnh khi chúng đang được gửi tới
sever, hay cho phép 1 ứng dụng lưu lại trong 1 file mà file này được sử dụng để
tham chiếu tới khi người dùng sử dụng ứng dụng trong trạng thái offline. Hay hơn
thế, bằng cách sử dụng Web Audio API thì ứng dụng có thể đọc đượ các file .mp3
và hiển thị 1 cách trực quan bản nhạc khi nó đang được chạy, thêm vào đó, người
dùng có thể sử dụng các điều kiện logic từ phía client để kiểm tra lại dạng
mimetype của dữ liệu được tải lên xem có tương ứng với đuôi mở rộng của file hay
giới hạn kích thước của dữ liệu được tải lên.
1.1.3.7. HTML5 tăng tốc hiệu năng xử lý với Web Worker và Application Cache
“Web” và “offline” là 2 từ mà rất nhiều người dùng nhận thấy chúng không
bao giờ song hành cùng nhau. Tuy nhiên trong HTML5 thì mọi chuyện lại khác,
trang Web vẫn có thể hoạt động ngay cả khi chúng không được kết nối trực tuyến.
Người dùng có thể tải về các files dữ liệu rất lớn (hơn 1GB) để sau đó có thể duyệt
xem 1 cách offline.
Application Cache mang lại cho ứng dụng 3 lợi ích:
 Duyệt xem ngay cả khi offline
 Tăng tốc hiệu năng xử lý bởi các nguồn tài nguyên được Cache lại do đó sẽ
được nạp nhanh hơn
 Giảm tải cho máy chủ - trình duyệt sẽ chỉ tải về các nguồn tài nguyên được
cập nhật hay được thay đổi từ phía máy chủ
Một Web Worker (các trình làm việc trên nền Web) là một mã javascript mà
có thể chạy thực thi trong nền web, hay thực thi một cách độc lập với các mã khác

19


mà không hề gây ảnh hưởng tới hiệu năng xử lý của trang page. Người dùng vẫn
có thể tương tác với trang page như nhấn chuột, lựa chọn, cuộn trang hay gõ văn
bản,…
1.1.3.8. HTML5 hỗ trợ định vị người dùng
HTML5 có một API định vị địa lý cho phép một ứng dụng Web xác định vị
trí địa lý hiện tại của người dùng, giả sử thiết bị mà ứng dụng đang nhắm tới cung
cấp các tính năng để tìm kiếm các thông tin như vậy (ví dụ, GPS trên điện thoại di
động). Nếu người dùng không có một thiết bị hỗ trợ tính năng này (chẳng hạn như
một chiếc điện thoại thông minh iPhone hoặc Android 2.0) , thì người dùng có thể
sử dụng Firefox và tải về một trình cắm thêm để cho phép thiết lập vị trí của họ
bằng tay.
1.1.3.9.HTML5 hỗ trợ khả năng cộng tác và giao tiếp thời gian thực
Các tính năng trong HTML5 được chia làm 2 nhóm: một là nhóm các tính
năng dùng để thúc đẩy các ứng dụng web đạt thế cân bằng với các ứng dụng nền
desktop, hai là nhóm các tính năng đem tới cho các ứng dụng web những lợi thế
vượt lên trên cả các ứng dụng desktop truyền thống. khả năng cộng tác theo thời
gian thực là dạng tính năng điển hình thuộc nhóm 2, nó đem tới lợi thế cự kỳ to lớn
cho các ứng dụng web.
WebSockets và WebRTC có thể thực sự làm thay đổi các trò chơi games
trong sự giao tiếp theo thời gian thực bởi nó khiến việc lập trình phát triển dễ dàng
hơn và nâng cao trải nghiệm của người dùng.
WebSockets là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server
bằng cách sử dụng một TCP socket để tạo một kết nối hiệu quả và ít tốn kém. Mặc
dù được thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có
thể đưa chúng vào bất kì loại ứng dụng nào.

20

Dữ liệu truyền tải thông qua giao thức HTTP chứa nhiều dữ liệu không cần
thiết trong phần header. Một header request/response của HTTP có kích thước
khoảng 871 byte, trong khi với WebSocket, kích thước này chỉ là 2 byte (sau khi
đã kết nối).
Vậy giả sử trong một ứng dụng game có thể tới 10,000 người chơi đăng nhập
cùng lúc, và mỗi giây họ sẽ gửi/nhận dữ liệu từ server. Hãy so sánh lượng dữ liệu
header mà giao thức HTTP và WebSocket trong mỗi giây:
 HTTP: 871 x 10,000 = 8,710,000 bytes = 69,680,000 bits per second (66
Mbps)
 WebSocket: 2 x 10,000 = 20,000 bytes = 160,000 bits per second (0.153
Kbps)
Chỉ riêng phần header thôi cũng đã chiếm một phần lưu lượng đáng kể với
giao thức HTTP truyền thống.
WebRTC đem đến khả năng hỗ trợ cho video và audio trong hội thảo trực
tuyến hay trong truyền phát video trực tuyến.

21


1.1.3.10. HTML5 hỗ trợ tiếp nhận các sự kiện events được gửi từ máy chủ
HTML5 Server-Sent Events cho phép một trang page tiếp nhận các cập nhật
liên tục, tức thời từ phía máy chủ, bất cứ khi nào có 1 sự kiện event mới xảy ra trên
máy chủ thì 1 thông báo sẽ được gửi tới client. Để thực sự hiểu về Server-Sent
Events, thì trước hết phải hiểu rõ về giới hạn mà công nghệ AJAX đi trước bị hạn
chế:
 Kiểm soát vòng Polling là 1 kĩ thuật cổ điển được sử dụng bởi hầu hết đa số
các ứng dụng AJAX. Ý tưởng cốt yếu là ứng dụng sẽ gọi lặp đi lặp lại tới
máy chủ để thu nhận về dữ liệu. Điều này tương tự với giao thức HTTP, xét

cho cùng thì việc nhận về dữ liệu cũng quay quanh 1 định dạng
request/response (yêu cầu/ hồi đáp). Client tạo ra 1 yêu cầu request và chờ
đợi máy chủ hồi đáp và trả về dữ liệu. Vấn đề rắc rối lớn gặp phải ở đây là
với những kiểm soát vòng polling rất lớn sẽ tạo ra chi phí phụ cho giao thức
HTTP rất lớn.
 Kiểm soát vòng long polling trong thời gian kéo dài trong khi máy chủ chưa
sẵn sàng trả về dữ liệu thì nó sẽ giữ yêu cầu này cho tới khi dữ liệu được
sẵn sàng trả về. Do vậy, kĩ thuật này thường được trích dẫn như 1 việc làm
treo phương thức GET. Khi dữ liệu đã được sẵn sàng thì máy chủ sẽ hồi đáp
trả về và đóng kết nối, quá trình xử lý này sẽ được lặp đi lặp lại.
Theo cách khác thì Server-Sent Events (SSEs) được thiết kế để mang lại hiệu
quả tốt hơn. Khi giao tiếp bằng SSEs, thì máy chủ có thể đẩy dữ liệu về client bất
cứ khi nào nó muốn mà không cần phải tạo ra 1 yêu cầu request. Hay hiểu theo
cách khác, thì các cập nhật ở máy chủ có thể được truyền phát 1 cách liên tục, tự
động, tức thời tới client. SSEs chỉ mở ra 1 kênh giao tiếp 1 chiều giữa máy chủ và
client. Điểm khác biệt chính giữa SSEs và long-polling là SSEs được kiểm soát
22


trực tiếp từ trình duyệt và người dùng chỉ đơn giản là lắng nghe các thông điệp mà
thôi.
Sở dĩ đi tìm hiểu sâu về HTML5 là vì nó là công nghệ chủ chốt trên nền web
trong tương lai và hơn nữa, HTML5 chính là công nghệ chủ chốt trong việc xây
dựng ứng dụng dựa trên nền tảng framework Phonegap để có thể biên dịch qua
cloud và chạy trên nhiều nền tảng di động khác nhau. Ngoài ra các công nghệ khác
như CSS3, Javascript và Jquery Mobile cũng rất cần thiết. Nhưng do khuôn khổ
không cho phép của khóa luận, tôi sẽ chỉ giới thiệu Jquery Mobile trong việc tìm
hiểu mã nguồn mở Phonegap ở phần tiếp theo.
1.1.4. Lịch sử hình thành và phát triển HTML
HTML là viết tắt của cụm từ HyperText Markup Language (Ngôn ngữ đánh

dấu siêu văn bản), và đây là ngôn ngữ chính được sử dụng cho việc thiết kế các
website.Việc hình thành HTML có mối quan hệ mật thiết với sự phát triển của
Internet.Ngày nay, HTML rất được khuyên dùng bởi sự xuất hiện của một chuẩn
mới, thực tế là một phiên bản cao hơn của ngôn ngữ này như là một sự phát triển
tất yếu- HTML5.
Tim Berners-Lee là cha đẻ của HTML.Năm 1989, ông nghiên cứu ra ngôn
ngữ HTML như là một giao thức truyền đạt thông tin giữa giới khoa học với nhau
và thành công của nó vẫn còn cho đến ngày nay. Tim đầu tiên tạo ra 20 thẻ trong
HTML, lấy ý tưởng từ ngôn ngữ SGML, nhưng điều kì diệu đáng kinh ngạc là ở
chỗ 13 trong số 20 thẻ đó vẫn còn được hiển thị trong HTML4.
a. HTML1
HTML 1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ
để cho phép tạo ra một trang web đơn giản. Phiên bản đầu tiên này được tung ra
vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này mới thực sự được ứng
dụng. Năm 1993 các chuẩn HTML trở thành nền tảng của Mosaic- Trình duyệt đầu
23


tiên của Internet.
b. HTML 2
Nhiều công ty lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu
văn bản , nhưng cuối cùng thì các chuẩn HTML cũng được phổ biến rộng rãi. Bởi
vì không có một tổ chức nào đứng ra hỗ trợ cho sự phát triển ngôn ngữ HTML ,
mọi thứ bị ngừng trệ. Vào tháng 7 năm 1994, HTML 2 được phát hành.HTML 2 là
phiên bản cải tiến của HTML.Phiên bản lần này được tạo ra bởi sự nỗ lực rất lớn
của những người yêu thích HTML trên khắp thế giới.Những người này đã đảm
nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi trên thế giới
cho phiên bản mới này.Trước tình hình này, cũng trong cùng năm 1994, Tập Đoàn
Tài Chính World Wide Web được thành lập với người đứng đầu là Tim BernersLee. Năm 1995, thẻ mới là thẻ “bgcolor”(màu nền) hay thẻ “font face”(font chữ?)
được đưa vào ứng dụng. Chúng tôi đưa ra những ví dụ về các thẻ này nhằm nhấn

mạnh trình độ đã đạt tới của chuẩn HTML vào thời điểm hiện tại…chúng ta có thể
nói rằng sự khác biệt giữa phiên bản đầu tiên và phiên bản năm 1995 là rất lớn.
c. HTML 3
W3C chấp nhận những phiên bản cải tiến của HTML với các thẻ mới và các
chức năng mới.Dave Ragget đã mua về một phiên bản thú vị với rất nhiều thẻ
HTML hấp dẫn và phiên bản này đã được cải tiến rất hay.Nhưng vì nó làm chậm
đường truyền của các trình duyệt nên phiên bản này đã bị bỏ đi. Phiên bản HTML
3.2 là phiên bản mạnh nhất của sê-ri này và trước khi được tung ra, nó GIỚI
THIỆU VỀ HTML5 Trang 5 được duyệt bởi W3C và bởi các
nhà cung cấp trình duyệt là Netscape và Microsoft.
d. HTML 4
Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước tiến
triển quan trọng trong những phiên bản cũ. HTML4 có những công cụ có giá trị

24


mang lại thêm nhiều đất sáng tạo cho dân thiết kế web: CSS. Ban đầu CSS cũng
không được coi là quan trọng lắm, nhưng đến nay người ta đánh giá nó cũng quan
trọng không kém gì bản thân HTML. Một sự kiện quan trọng nữa là sự phát triển
của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và trình duyệt
Internet Explorer được người sử dụng yêu thích hơn , làm lu mờ Netscape. Vào
tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C và tương lai trở nên sáng
lạn hơn. HTML có một “đối thủ” gọi là XHTML (Extensible HyperText Markup
Language, tạm dịch: ngôn ngữ đánh dấu siêu văn bản mở rộng) từ năm 1998 đến
nay cuộc chiến vẫn diễn ra ác liệt.
e. HTML5
Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng
phong có vẻ nghiêng về HTML (so với XHTML). Bản HTML5 có nhiều thẻ
nhưng cũng có nhiều vấn đề và rất khó để quả quyết một cách chắc chắn bởi vì

mọi việc còn có thể khác hẳn vào ngày mai. Một thực tế chắc chắn đó là: Bởi vì
phiên bản lần này được nghiên cứu bởi các tập đoàn và các chuyên viên thiết kế,
nên kết quả chỉ có thể là bước nhảy vọt đầy ấn tượng trong dòng chảy của sự phát
triển Web, Internet và thiết kế. Trong chuẩn mới thực sự hoàn chỉnh của HTML,
một nhân tố vô cùng quan trọng sẽ đóng góp vào vai trò ảnh hưởng của HTML5,
đó là: CSS3.
1.2. Phương pháp phân tích thiết kế hướng đối tượng
1.2.1. Giới thiệu phương pháp phân tích thiết kế hướng đối tượng
1.2.1.1. Ý tưởng
Ý tưởng cơ bản của việc tiếp cận hướng đối tượng là phát triển một hệ
thống bao gồm các đối tượng độc lập tương đối với nhau. Mỗi đối tượng bao hàm
trong nó cả dữ liệu và các xử lý tiến hành trên các dữ liệu này được gọi là bao gói
thông tin. Ví dụ khi đã xây dựng một số đối tượng căn bản trong thế giới máy tính

25