biểu diễn trực quan các liên kết web

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

Trương Văn Hưng

BIỂU DIỄN TRỰC QUAN CÁC LIÊN KẾT WEB

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Khoa: Công nghệ thông tin

HÀ NỘI - 2014


ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

Trương Văn Hưng

BIỂU DIỄN TRỰC QUAN CÁC LIÊN KẾT WEB

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Khoa: Công nghệ thông tin

Cán bộ hướng dẫn: PGS.TS Nguyễn Việt Hà

HÀ NỘI - 2014


VIETNAM NATIONAL UNIVERSITY, HANOI
UNIVERSITY OF ENGINEERING AND TECHNOLOGY

Truong Van Hung

A STUDY OF WEB LINKS VISUALIZATION
Major: Information technology

Supervisor: Assoc. Prof. Dr Nguyen Viet Ha

HA NOI - 2014


Lời cảm ơn
Lời đầu tiên, tôi xin bày tỏ lòng biết ơn sâu sắc tới PGS.TS Nguyễn Việt Hà - phó
Hiệu trưởng và ThS. Vũ Quang Dũng - giảng viên khoa CNTT, trường Đại học Công
Nghệ, ĐHQGHN. Các thầy đã tận tình hướng dẫn và chỉ bảo tôi trong suốt quá trình
thực hiện khóa luận cũng như trong suốt những năm học vừa qua.
Tôi xin cảm ơn đến các thầy, cô trong trường Đại học Công Nghệ đã giảng dạy và
truyền đạt cho tôi những kiến thức quý báu, làm nền tảng để tôi hoàn thành khóa luận,
và công việc trong tương lai.
Tôi xin gửi lời cảm ơn tới các anh chị, các bạn sinh viên trong phòng thí nghiệm
Công nghệ phần mềm Toshiba-UET đã hỗ trợ tôi rất nhiều trong suốt quá trình làm khóa
luận, sự hỗ trợ nhiệt tình này đã giúp tôi hoàn thành tốt khóa luận.
Nhân đây, tôi cũng muốn gửi lời cảm ơn chân thành tới các bạn K55CC và K55CCLC đã bên cạnh, ủng hộ, khích lệ và giúp đỡ tôi hoàn thiện đề tài này.
Và cuối cùng, tôi xin gửi lời cảm ơn tới gia đình, người thân và bạn bè – những
người luôn ở bên tôi những lúc khó khăn nhất, luôn động viên tôi, khuyến khích tôi
trong cuộc sống cũng như học tập, công việc.
Tôi xin chân thành cảm ơn!

Hà Nội, ngày 02 tháng 05 năm 2014
Sinh viên

Trương Văn Hưng

i


Lời cam đoan
Tôi xin cam đoan các kết quả đạt được trong khóa luận này do tôi thực hiện dưới
sự hướng dẫn của PGS.TS. Nguyễn Việt Hà.
Tất cả các tham khảo từ những nghiên cứu liên quan đều được nêu nguồn gốc một
cách rõ ràng từ danh mục tài liệu tham khảo trong khóa luận. Khóa luận không sao chép
tài liệu, công trình nghiên cứu của người khác mà không chỉ rõ về mặt tài liệu tham
khảo.
Các kết quả thực nghiệm của khóa luận đều được tiến hành thực nghiệm và thống
kê từ kết quả thực tế.

Sinh viên

Trương Văn Hưng

ii


TÓM TẮT
Tóm tắt Khóa luận tốt nghiệp
Ngày nay, cùng với sự phát triển của mạng Internet, nhu cầu đọc báo trực tuyến cũng
gia tăng nhanh chóng. Bên cạnh sự phong phú về các loại tin tức, người dung cũng gặp phải
những phiền toái với những nội dung thương mại, ví dụ như quảng cáo. Vấn đề này đặt ra bài
toán về sự cần thiết của việc tổng hợp, trích chọn những thông tin chính trong bài báo và hiển
thị các thông tin, nội dung bài báo trực tiếp cho người dung dưới dạng giao diện trực quan.
Hiện nay có rất nhiều ứng dụng tổng hợp tin tức từ nhiều nguồn khác nhau, tuy nhiên các ứng

dụng này vẫn còn một số hạn chế nhất định. Thứ nhất, các ứng dụng này chưa thể hiện được
sự liên kết giữa các bài báo liên quan. Thứ hai, các ứng dụng này chưa phải là một ứng dụng
đa nền tảng, chưa thể đáp ứng nhu cầu đọc báo từ nhiều loại thiết bị khác nhau. Để đáp ứng
nhu cầu thực tế đó khóa luận tốt nghiệp này đề cập tới hệ thống phân tích, trích chọn các liên
kết web trực tiếp và tự động, cung cấp giao diện hiển thị trực quan trên nhiều loại thiết bị
khác nhau, và đồng thời xây dựng thành phần thu thập dữ liệu với mục đích tăng tốc quá trình
xử lý và hiển thị.
Tôi tập trung vào việc giải quyết bài toán trích xuất dữ liệu và các liên kết web từ một
website. Ngoài ra, về mặt giao diện hiển thị, tôi sẽ sử dụng và phát triển các kỹ thuật mới trong
giao diện PageLayout – một thuật toán được phát triển trong giai đoạn trước tại phòng thí
nghiệm Toshiba – UET. Tôi đề xuất giải pháp xử lý các tương tác từ các thiết bị cảm ứng và
xây dựng thuật toán tổ chức lại cây giao diện phù hợp với việc hiển thị các bài báo cũng như
những liên kết web.
Từ khóa: trực quan, trích xuất, trực tiếp, liên kết web.

iii


ABSTRACT
There are plenty kinds of news on Internet that make web pages becoming one of biggest
source of information extraction and data mining such as news collective application. However,
the web page consists of many cluttered part that can make a decrease in perfomance of
information retrieval applications. Therefore, to resolve that problem, we need a method to
identify and extract main content from a web page. There is a number of appication have been
introduced to collect news, but those application do not provide any kind of visualization
method of web pages. Based on the fact of demand, my thesis is deal with a system which can
analysis and extract main content from web pages directly and dinamically, provide a new
visualization user interface and also building a crawler service to improve performance of
system.
In my thesis, I will concentrate in problem of main content extraction and building a

visualization UI of web links. In addition, my system is aim to build an adaptive user interface
by using PageLayout UI which was developed in previous phase of Toshiba-UET laboratory.
My work differ with old PageLayout in following ways: the new UI improves user experience
by providing new method to hanlder touch interaction of user, present web link in visualization
UI and adding restucture tree UI algorithm.
Keywords: extract, web links, visualization, directly.

iv


Mục lục
Danh sách hình vẽ........................................................................................................ viii
Danh sách bảng .............................................................................................................. ix
Danh mục các kí hiệu, chữ viết tắt ..................................................................................x
Chương 1. MỞ ĐẦU .......................................................................................................1
Chương 2. CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ .....................................................3
2.1. Cơ sở lý thuyết......................................................................................................3
2.1.1. Thuật toán Data rich-section extraction ................................................................... 3
2.1.2. Định lý phân lớp Bayes............................................................................................ 4
2.1.3. Dàn trang sử dụng thuật toán Node Partition........................................................... 4

2.2. Cơ sở công nghệ ...................................................................................................6
2.2.1. HTML5 và CSS3 ..................................................................................................... 6
2.2.2. Document object model ........................................................................................... 6
2.2.3. JavaScript và Ajax ................................................................................................... 6
2.2.4. Metro UI CSS .......................................................................................................... 7
2.2.5. QuoJS ....................................................................................................................... 7
2.2.6. Java Servlet .............................................................................................................. 8
2.2.7. Công cụ phân lớp Weka ........................................................................................... 9

Chương 3. PHƯƠNG PHÁP GIẢI QUYẾT .................................................................10
3.1. Phương pháp trích xuất dữ liệu từ một trang html .............................................10
3.1.1. Lấy tập các trang mẫu dựa trên đánh giá độ tương đồng giữa các URL ............... 11
3.1.2. Tạo cây cấu trúc cho một trang web ...................................................................... 13
3.1.3. Hợp cây cấu trúc của hai trang web ....................................................................... 14
3.1.4. Trích xuất nội dung chính của bài báo và các bài báo liên quan ........................... 16
3.1.5. Phân loại tự động nội dung bài báo. ...................................................................... 18

3.2. Kĩ thuật biểu diễn trực quan các liên kết web ....................................................19
3.2.1. Phương pháp đánh độ ưu tiên của các khối ........................................................... 20
3.2.2. Hiển thị các bài báo liên quan ................................................................................ 21
3.2.3. Các chức năng phóng to, thu nhỏ một khối ........................................................... 22

v


3.2.4. Chức năng xóa một khối hoặc nhiều khối ............................................................. 22
3.2.5. Tô màu cho các khối ứng với chuyên mục của bài báo. ........................................ 23

3.3. Phương pháp tổ chức cây giao diện ....................................................................23
3.3.1. Tạo mảng chứa các lá từ cây giao diện .................................................................. 24
3.3.2. Nhóm màu đối với màu được ưu tiên .................................................................... 25
3.3.3. Nhóm màu đối với các màu còn lại. ...................................................................... 28

Chương 4. KIẾN TRÚC HỆ THỐNG...........................................................................29
4.1. Mô hình tổng quan của hệ thống ........................................................................30
4.2. Thiết kế chi tiết phía máy chủ ............................................................................32
4.2.1. Thiết kế lớp ............................................................................................................ 32
4.2.2. Module giao tiếp .................................................................................................... 34
4.2.3. Module trích xuất dữ liệu trực tiếp ........................................................................ 35

4.2.4. Module thu thập dữ liệu tự động............................................................................ 36

4.3. Thiết kế chi tiết phía máy khách.........................................................................37
4.3.1. Thiết kế module/lớp ............................................................................................... 38
4.3.2. Module lắng nghe các sự kiện tương tác ............................................................... 40
4.3.3. Hiển thị các tin liên quan ....................................................................................... 42
4.3.4. Menu các chuyên mục bài báo ............................................................................... 42

Chương 5. THỰC NGHIỆM .........................................................................................43
5.1. Môi trường thực nghiệm .....................................................................................43
5.1.1. Cấu hình máy chủ .................................................................................................. 43
5.1.2. Cấu hình máy khách............................................................................................... 43
5.1.3. Công cụ phần mềm ................................................................................................ 44
5.1.4. Các thư viện được sử dụng .................................................................................... 44

5.2. Phương pháp thực nghiệm ..................................................................................45
5.2.1. Kiểm tra độ chính xác của thuật toán trích xuất .................................................... 45
5.2.2. Kiểm tra tốc độ ...................................................................................................... 45

5.3. Thiết kế cơ cở dữ liệu .........................................................................................46
5.4. . Kết quả thực nghiệm.........................................................................................47

vi


5.4.1. . Tốc độ trích xuất tự động ..................................................................................... 47
5.4.2. . Kiểm tra độ chính xác của thuật toán .................................................................. 47
5.4.3. Kiểm tra thời gian phản hồi ................................................................................... 47
5.4.4. Một số hình ảnh của chương trình thực nghiệm .................................................... 49

Chương 6. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ..................................................51
Tài liệu tham khảo .........................................................................................................52

vii


Danh sách hình vẽ
Hình 2-1: Mô hình hoạt động của thuật toán dàn trang...................................................5
Hình 2-2: Các loại tương tác cảm ứng mà QuoJS hỗ trợ. ...............................................8
Hình 3-1: Ví dụ về một trang mục tiêu và các liên kết có trong trang. .........................13
Hình 3-2: Ví dụ tạo cây cấu trúc từ mã HTML .............................................................14
Hình 3-3: Ví dụ về hợp cây cấu trúc giữa hai trang. .....................................................16
Hình 3-4: Ví dụ về một thẻ chứa nội dung chính. .........................................................18
Hình 3-5: Mô tả giao diện trực quan sử dụng giao diện PageLayout ...........................20
Hình 3-6: Ví dụ về thứ tự ưu tiên trong thuật toán dàn trang. .......................................21
Hình 3-7: Mô tả việc hiển thị các bài báo liên quan......................................................22
Hình 3-8: Mô tả chức năng xóa một khối......................................................................23
Hình 3-9: Ví dụ về việc chuyển từ lá của cây nhị phân sang mảng. .............................25
Hình 3-10: Ví dụ về thuật toán nhóm màu. ...................................................................28
Hình 4-1: Biểu đồ ca sử dụng của hệ thống. .................................................................29
Hình 4-2: Mô hình kiến trúc tổng quan của hệ thống ...................................................30
Hình 4-3: Mô hình hoạt động của hệ thống...................................................................31
Hình 4-4: Biểu đồ lớp phía máy chủ .............................................................................32
Hình 4-5: Biểu đồ tuần tự của module giao tiếp ...........................................................35
Hình 4-6: Biểu đồ tuần tự của module trích xuất ..........................................................36
Hình 4-7: Biểu đồ tuần tự của module thu thập dữ liệu ................................................37
Hình 4-8: Biểu đồ lớp phía client ..................................................................................38
Hình 4-9: Biểu đồ tuần tự của chức năng phóng to / thu nhỏ .......................................41
Hình 4-10: Chức năng lấy dữ liệu .................................................................................41
Hình 4-11: Chức năng sắp xếp các khối màu theo từng chuyên mục ...........................42

Hình 5-1: Cấu trúc cơ sở dữ liệu của hệ thống. .............................................................46
Hình 5-2: Giao diện chính của chương trình .................................................................49
Hình 5-3: Giao diện đọc tin chi tiết của chương trình. ..................................................50

viii


Danh sách bảng
Bảng 3-1: Bảng các phân lớp dữ liệu ............................................................................19
Bảng 3-2: Một số kí hiệu rút gọn...................................................................................25
Bảng 4-1: Bảng mô tả các ca sử dụng của hệ thống ......................................................29
Bảng 4-2: Bảng mô tả các lớp phía máy chủ.................................................................32
Bảng 4-3: Bảng mô tả các sự kiện tương tác của người dùng .......................................40
Bảng 5-1: Cấu hình máy chủ. ........................................................................................43
Bảng 5-2: Cấu hình máy khách. ....................................................................................43
Bảng 5-3: Công cụ phần mềm được sử dụng ................................................................44
Bảng 5-4: Các thư viện được sử dụng ...........................................................................44
Bảng 5-5: Mô tả các bảng trong cơ sở dữ liệu ..............................................................46
Bảng 5-6: Hiệu năng của hệ thống. ...............................................................................47
Bảng 5-7: Tỉ lệ trích xuất thành công giữa hai phương pháp. .......................................47
Bảng 5-8: Thời gian phản hồi của các tương tác ...........................................................47

ix


Danh mục các kí hiệu, chữ viết tắt
STT

Từ viết tắt

Thuật ngữ gốc

1

Web

World Wide Web

2

URL

Uniform resource locator

3

DSE

Data rich-section extraction

4

US

5

HTML

6

CSS

Cascading style sheets

7

DOM

Document object model

8

CSDL

Cơ sở dữ liệu

URL similarity
Hyper text markup language

x


Chương 1. MỞ ĐẦU
Ngày nay, cùng với sự phát triển như vũ bão của công nghệ thông tin thì hình thức
báo điện tử cũng ngày càng phổ biến. Báo điện tử [1] có tác dụng và tiện ích hơn hẳn
các loại hình báo chí truyền thống, dung lượng thông tin rất lớn, tương tác thông tin
nhanh, phát hành không bị trở ngại về không gian, thời gian, biên giới quốc gia. Với
những lợi ích hơn hẳn so với báo chí truyền thống, báo điện tử đã, đang và sẽ ngày càng
phát triển để đáp ứng nhu cầu của đông đảo bạn đọc.
Sự phát triển của báo chí điện tử cũng là một động lực thúc đẩy hoạt động thương

mại điện tử khi tạo ra một môi trường mới cho ngành công nghiệp quảng cáo phát huy
những phương cách quảng bá thông tin thương mại muôn hình vạn trạng. Tuy nhiện,
những thông tin thương mại đó làm người dùng cảm thấy phiền phức khi đọc báo. Để
giải quyết vấn đề đó, hiện nay có rất nhiều ứng dụng có khả năng thu thập dữ liệu tự
động từ các trang báo điện tử, sau đó tổng hợp lại các bài báo thành một trang tin. Ví dụ
như ứng dụng “Báo mới” 1 2 là một trang thu thập thông tin tổng hợp từ 60 nguồn khác
nhau, ứng dụng này trích xuất nội dung của các bài báo từ các nguồn và tổng hợp lại
thành một trang tin. Những ứng dụng này đã có thể loại bỏ những nội dung quảng cáo,
tuy nhiên trang tin mới lại bị chèn thêm một số quảng cáo nhất định. Hơn nữa, những
trang tin này thường không biểu diễn diễn sự liên kết giữa các bài báo thu thập được.
Điều này là một hạn chế rất lớn bởi vì người đọc thường có xu hướng tìm kiếm thông
tin liên quan tới bài báo đang đọc.
Trong khóa luận này, tôi đề xuất một phương pháp mới để biểu diễn trực quan các
liên kết của những bài báo trong cùng một website. Để xác định rõ về bài toán biểu diễn
trực quan các liên kết web, cần xem xét tới những đặc điểm của dữ liệu sẽ được biểu
diễn. Để biểu diễn các liên kết web, tôi tập trung vào dữ liệu về báo điện tử, với các liên
kết web là sự liên kết giữa các bài báo trong cùng một website. Hiện nay, dữ liệu về báo
điện tử rất đa dạng, mỗi một trang báo lại có cấu trúc HTML khác nhau, như vậy đòi
hỏi phải có một thuật toán nhận dạng và có thể trích xuất “trực tiếp” vùng chứa nội dung
chính của trang html đại diện cho bài báo. Mặt khác, thuật toán này còn phải tìm ra các
liên kết web đại diện cho các bài báo liên quan tới bài báo gốc. Từ đó, chúng ta có tập
dữ liệu để biểu diễn trực quan. Sau khi có dữ liệu, cần có một phương pháp để biểu diễn
dữ liệu đó sao cho người dùng có thể nhìn thấy sự liên kết giữa các bài báo một cách

1
2

/> />
1

trực quan nhất. Ngoài ra, giao diện biểu diễn trực quan cần phải hỗ trợ đa nền tảng, cung
cấp phương pháp tương tác mới cho người dùng.
Với những phân tích ở trên, trong khóa luận này tôi đề xuất giải pháp xây dựng hệ
thống với hai tình năng chính như sau:
-

-

Thứ nhất, hệ thống có khả năng trích xuất nội dung bài báo và các bài báo
liên kết từ một trang. Khác với những ứng dụng sẵn có hiện nay, hệ thống mà
tôi đề xuất có khả năng trích xuất trực tiếp nội dung bài báo mà người dùng
yêu cầu.
Thứ hai, hệ thống cung cấp giao diện biểu diễn trực quan nội dung và các liên
kết web trích xuất được. Trong đó giao diện được cung cấp phương pháp
tương tác mới cho người dùng.

Trong các phần tiếp theo của khóa luận, tôi sẽ trình bày cụ thể từng thuật toán, kĩ
thuật cũng như các phương pháp để xây dựng một hệ thống hoàn thiện.
Các phần tiếp theo của khóa luận sẽ được cấu trúc như sau:
Chương 2 - Cơ sở lý thuyết: Giới thiệu những công nghệ, cơ sở lý thuyết được áp
dùng trong chương trình này.
Chương 3 - Trình bày về thuật toán trích xuất dữ liệu và phương pháp xây dựng
giao diện trực quan.
Chương 4 - Kiến trúc và các thành phần của hệ thống: giới thiệu chương trình thực
nghiệm, mô tả kiến trúc, thành phần, phương pháp triển khai thực nghiệm.
Chương 5 - Thực nghiệm: Kết quả, đánh giá quá trình thực nghiệm.
Chương 6 - Kết luận: Tóm lược những kết quả của Khoá luận, những đạt được và
hạn chế, triển vọng và hướng phát triển trong tương lai.

2


Chương 2. CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
2.1. Cơ sở lý thuyết
2.1.1. Thuật toán Data rich-section extraction
Thuật toán Data rich-section extraction from html pages (viết tắt là DSE) [2] được
viết bởi hai tác giả Jiying Wang và Fred Lochovsky vào năm 2002. Dưới đây là mô tả
chi tiết về giải thuật DSE.
Mục đích của thuật toán : Từ một trang web ban đầu, thuật toán DSE sẽ phân tích cấu
trúc của một webpage, sau đó tìm ra phần layout chứa thông tin chính (rich section). Áp
dụng thuật toán DSE như là một bước tiền xử lý để giải quyết bài toán trích xuất thông
tin trong một webpage. Sau khi có layout chứa thông tin chính thì có thể dễ dàng trích
xuất được thông tin cần thiết.
Ý tưởng của thuật toán : Từ một trang ban đầu, hay còn gọi là trang mục tiêu, ta đi tìm
những trang tương tự như trang mục tiêu. Bằng cách tìm những liên kết tới các trang
khác và sử dụng thuật toán URL đồng dạng, chúng ta có thể tìm ra những trang mẫu
(sample pages) để so sánh với trang mục tiêu. Khi so sánh cấu trúc giữa trang mẫu và
trang mục tiêu, chúng ta có thể tìm ra những thành phần giống nhau giữa hai trang, đó
là những thành phần không cần thiết. Do đó chúng ta sẽ xóa bỏ những thành phần đó ra
khỏi trang mục tiêu. Những thành phần còn lại trong trang mục tiêu chính là thành phần
chính ta cần trích xuất.
Các bước chính của thuật toán :
Thuật toán DSE bao gồm ba bước chính :
- Đầu tiên, thuật toán tìm ra một tập hợp các trang như trang mẫu mà có cấu trúc
hiển thị tương tự với các trang mục tiêu. Dựa vào liên kết đi của trang mục tiêu, chúng
ta có một tập nguồn cho các trang mẫu. Từ tập nguồn này, phân tích URL của từng trang
trong tập nguồn đó và tìm ra các trang mẫu.
- Thứ hai, các trang HTML được phân tích và được chuyển sang dạng cây cấu trúc
DOM, với dạng cây này các trang có thể được phân tích và thao tác dễ dàng.

- Thứ ba, cây cấu trúc của trang mục tiêu được so sánh với cây cấu trúc của trang
mẫu để xác dịnh phần chung. Các nút xuất hiện trong cấu trúc chung của hai trang được
xác định và loại bỏ, phần còn lại là các cây con chứa dữ liệu cần thiết (rich-section).

3


2.1.2. Định lý phân lớp Bayes
Định lý Bayes [3] cho phép tính xác suất xảy ra của một sự kiện ngẫu nhiên A khi
biết sự kiện liên quan B đã xảy ra. Xác suất này được ký hiệu là P(A|B), và đọc là "xác
suất của A nếu có B". Đại lượng này được gọi xác suất có điều kiện hay xác suất hậu
nghiệm vì nó được rút ra từ giá trị được cho của B hoặc phụ thuộc vào giá trị đó.
Theo định lí Bayes, xác suất xảy ra A khi biết B sẽ phụ thuộc vào 3 yếu tố
-

Xác suất xảy ra A của riêng nó, không quan tâm đến B. Kí hiệu là P(A) và đọc
là xác suất của A. Đây được gọi là xác suất biên duyên hay xác suất tiên nghiệm,
nó là "tiên nghiệm" theo nghĩa rằng nó không quan tâm đến bất kỳ thông tin

-

-

nào về B.
Xác suất xảy ra B của riêng nó, không quan tâm đến A. Kí hiệu là P(B) và đọc
là "xác suất của B". Đại lượng này còn gọi là hằng số chuẩn hóa (normalising
constant), vì nó luôn giống nhau, không phụ thuộc vào sự kiện A đang muốn
biết.
Xác suất xảy ra B khi biết A xảy ra. Kí hiệu là P(B|A) và đọc là "xác suất của
B nếu có A". Đại lượng này gọi là khả năng (likelihood) xảy ra B khi biết A đã

xảy ra. Chú ý không nhầm lẫn giữa khả năng xảy ra A khi biết B và xác suất
xảy ra A khi biết B.
Khi biết ba đại lượng này, xác suất của A khi biết B cho bởi công thức:

P(A|B) = P(A).

P(B|A)
P(B)

Định lý Bayes được đánh giá là một trong những thuật toán đạt kết quả cao khi áp
dụng vào kỹ thuật phân lớp dựa trên bộ dữ liệu học có sẵn.
2.1.3. Dàn trang sử dụng thuật toán Node Partition
Trong khóa luận này, tôi có phát triển tiếp hệ thống giao diện PageLayout [4] đã
được phát triển trước đó tại phòng thí nghiệm Toshiba-UET để hiển thị giao diện cho
chương trình. Trong đó, giao diện PageLayout sử dụng thuật toán Node partition để dàn
trang linh động. Một số chức năng bổ sung vào giao diện PageLayout cần phải tuân thủ
các luật của thuật toán dàn trang linh động. Do đó trong phần này, tôi sẽ nêu tóm tắt về
thuật toán Node Partition [5] và thuật toán dàn trang linh động [6].
Thuật toán Node partition nhằm xây dựng được cấu trúc màn hình từ tập các dữ
liệu ảnh cho trước, cùng hàm đánh giá khả năng sử dụng diện tích của mỗi cấu trúc cây.

4


Đồng thời thuật toán đảm bảo hiển thị ảnh trong mối tương quan tỉ lệ diện tích bằng
cách sử dụng tương quan tỉ lệ giữa 2 khối ngang hàng.
Thuật toán dàn trang linh động là thuật toán được cải tiến từ thuật toán Node
partition của C.Brian Atkins , được Xinxiao Li cùng đồng nghiệp của mình đưa ra nhằm
giải quyết vấn đề về độ phức tạp cũng như độ ưu tiên theo thứ tự còn hạn chế của thuật

toán Node Ppartition, Xinxiao Li cùng đồng nghiệp của mình đưa ra phương pháp giải
quyết bằng cách sử dụng template – các mẫu layout có sẵn, cho các layout màn hình đơn
giản với 4 block trở xuống và áp dụng thuật toán Node partition với số lượng các block
lớn hơn. Bên cạnh đó tác giả của bài báo cũng đưa ra được cách đánh giá một layout
màn hình dựa trên thứ tự sắp xếp đặt trong mối tương quan với khả năng sử dụng tối ưu
diện tích màn hình. Với thuật toán này, hiệu năng của việc xây dựng layout được cải
thiện, đồng thời đánh giá được layout trên cả 2 phương diện là diện tích sử dụng và thứ
tự sắp xếp nhằm thỏa mãn tốt hơn yêu cầu hiển thị.

Hình 2-1: Mô hình hoạt động của thuật toán dàn trang
5


2.2. Cơ sở công nghệ
Bên cạnh những cơ sở mang tính lý thuyết thì xu hướng công nghệ cần được tận
dụng một cách tối đa để tăng hiệu quả hoạt động của hệ thống. Nhằm đảm bảo hệ thống
có thể hoạt động trên nhiều hệ điều hanh khác nhau, tôi chọn những công nghệ sau để
triển khai hệ thống:
-

Công nghệ web HTML5 để hiển thị giao diện trực quan.
Công nghệ Java Servlet để xử lý yêu cầu phía server.

2.2.1. HTML5 và CSS3
HTML5 1 là phiên bản thứ 5, mới nhất của chuẩn HTML, ngôn ngữ cấu trúc và
trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong
tương lai không xa [7].
HTML5 có nhiều tính năng mới hỗ trợ việc đưa vào và quản lý các nội dung đa
phương tiện và đồ họa, không còn phụ thuộc vào các plugin và API. Ngoài ra, HTML5
cũng hỗ trợ công nghệ WebGL dùng trong dựng hình đồ họa trên trình duyệt Web.

Cùng với HTML5 là thế hệ tiếp theo của CSS (Cascading Style Sheets) – CSS3 2.
CSS là những đặc tả hiển thị hỗ trợ cho trình duyệt Web trong việc trình bày một trang
HTML. CSS3 là phiên bản mới nhất của CSS, được chia thành các module để có thể
phát triển và đặc tả độc lập. CSS3 đưa vào nhiều thuộc tính và bộ chọn (selector) mới
hỗ trợ xây dựng các trang web với nội dung phong phú, hiệu ứng, giao diện người dùng
tốt hơn và vẫn đảm bảo yêu cầu mã tương đối nhẹ.
2.2.2. Document object model
W3C Document Object Model (viết tắt là DOM) [8] là một nền tảng và giao diện
ngôn ngữ độc lập cho phép chương trình và các đoạn mã script truy xuất động và cập
nhật nội dung, cấu trúc và phong cách của tài liệu HTML. Tài liệu có thể được tiếp tục
xử lý và kết quả của việc xử lý có thể được kết hợp trở lại vào trang hiển thị.
2.2.3. JavaScript và Ajax
JavaScript là ngôn ngữ kịch bản cho nền web, được biên dịch ở trình duyệt sau
khi trang web đã được tải. Do thực hiện hoàn toàn tại máy khách, JavaScript giúp tăng
tốc độ xử lý, phản hồi nhanh, giảm đáng kể băng thông mạng. Ngoài ra, JavaScript

1
2

/> />
6


không yêu cầu cài đặt thêm plugin để có thể sử dụng. Các thư viện hỗ trợ cho việc lập
trình JavaScript rất đa dạng và phong phú, trong đó phải kể đến thư viện Jquery:
Jquery 1 là một javascript framework, dành cho việc tập trung vào xử lý sự kiện. JQuery
gíúp tối ưu cho việc lập trình JavaScript, cho mã nguồn ngắn hơn, đơn giản dễ hiểu, ít
lỗi hơn và dễ debug hơn .
Ajax là thuật ngữ viết tắt của “Asynchronous Javascript and XML” (JavaScript và
XML không đồng bộ) là một nhóm các công nghệ phát triển web được sử dụng để tạo

các ứng dụng web động. Ajax thông qua JavaScript để cung cấp một công nghệ phía
client-script để gọi ngầm một lệnh chạy nền cho phía server thực hiện và nhận thông tin
trả về, cập nhật thông tin của trang nhanh do không cần phải tải lại cả trang. Ajax đem
lại cho người dùng khả năng tương tác cao với nhiều phần riêng lẻ, giảm thiểu dữ liệu
trao đổi một cách không cần thiết. Ajax được sử dụng kết hợp với các ngôn ngữ và công
nghệ khác như HTML, CSS, cấu trúc DOM thông qua JavaScript, XML hay JSON
trong việc truyền tải dữ liệu để xây dựng được website có tính tương tác cao.

2

2.2.4. Metro UI CSS
Metro UI CSS 3 là một thư viện CSS3 mã nguồn mở, được phát triển dựa trên các
tham chiếu của Microsoft về giao diện metro. Các tham chiếu này bao gồm: các định
nghĩa style cơ bản, template về kích thước các khối metro và các định nghĩa về layout
của giao diện metro. Ngoài ra, Metro UI CSS còn được thiết kế theo phong cách
“responsive design” giúp giao diện hiển thị có thể hiển thị tốt trên các loại thiết bị với
kích thước màn hình khác nhau.
2.2.5. QuoJS
QuoJS 4 là một thư viện mini javascript theo hướng modun hóa, nhỏ gọn và hướng
đối tượng. QuoJS giúp đơn giản hóa việc duyệt HTML document, xử lý sự kiện, và xử
lý tương tác bằng Ajax nhằm tăng tính hiệu quả trong phát triển web trên mobile. Nó
cho phép người phát triển có thể tạo ra những dòng code có tính hiệu quả cao, linh động
và hoạt động được trên nhiều trình duyệt khác nhau. QuoJS cũng cung cấp tài liệu cụ
thể và những API giúp người lập trình có thể sử dụng dễ dàng các tính năng mà nó cung
cấp.

1

/> />3
/>4

/>2

7


QuoJS là một thư viện độc lập, nó có thể hoạt động mà không cần bất kì thư viện
nào của bên thứ ba. QuoJS đặc biệt phù hợp với việc phát triển web cho các thiết bị di
động. Trong khi các thư viện javascript bình thường có kích thước khá lớn, do đó không
hoạt động tốt trên các thiết bị di động thì kích thước thư viện QuoJS là khá nhỏ, chỉ có
15KB nên nó có thể hoạt động tốt trên các môi trường có phần cứng yếu.
Điểm nổi bật nhất của QuoJS chính là khả năng hỗ trợ xử lý rất nhiều kiểu sự kiện
tương tác cảm ứng trên các thiết bị di động. Ví dụ như : ấn và giữ, xoay, gõ bằng 1 ngón
tay, gõ bằng hai ngón tay, kéo và thả,..

Hình 2-2: Các loại tương tác cảm ứng mà QuoJS hỗ trợ.
2.2.6. Java Servlet
Servlet [9] là một công nghệ dựa trên nền tảng Java. Servlet hỗ trợ xây dựng và
mở rộng Web Server bằng cách cung cấp một nền tảng độc lập và công cụ hỗ trợ. Ngoài
ra, Servlet còn có thể sử dụng hầu hết các giao diện lập trình ứng dụng của Java APIs.
Servlet có thể duy trì trạng thái thông qua các giao dịch của máy chủ bằng việc sử dụng
cookie, session hay URL rewriting.

8


2.2.7. Công cụ phân lớp Weka
Weka 1 là một bộ các công cụ viết bằng java, được phát triển bởi trường đại học
WAIKATO của NewZealand và được phát hành dựa trên giấy phép GNU. Weka bao
gồm một tập các công cụ tiền xử lý dữ liệu và các phương pháp thí nghiệm đánh giá.
Ngoài ra Weka còn bao gồm các thuật toán phân tích dự đoán dữ liệu [10].

Weka bao gồm các tính năng sau:
-

Cung cấp giao diện trực quan hóa dữ liệu.
Bao gồm nhiều công cụ đa dạng cho phép xử lý, phân tích và đánh giá dữ liệu
dựa trên các giải thuật học. Ví dụ như thuật toán Naive Bayes được tích hợp

-

1

vào Weka để sử dụng cho việc phân lớp dữ liệu.
Cho phép so sánh kết quả xử lý, phân tích của các giải thuật khác nhau.

/>
9


Chương 3. PHƯƠNG PHÁP GIẢI QUYẾT
Để giải quyết được vấn đề đặt ra, cần phải xác định được các bài toán cần phải giải
quyết khi xây dựng hệ thống. Trước tiên, chúng ta cần xác định đầu vào và đầu ra của
bài toán.
Đầu vào:
-

Một URL bất kì, URL đó có thể là đường dẫn của trang chủ của trang báo
trực tuyến hoặc có thể là một bài báo chi tiết trong trang báo trực tuyến.
Cử chỉ, tương tác từ phía người dùng.

Đầu ra:

-

Giao diện hiển thị trực quan bao gồm nhiều khối, trong đó mỗi khối chứa nội
dung bài báo liên quan tới URL nhập vào.
Sau khi người dùng tương tác với giao diện trực quan, nội dung hoặc kích
thước của các khối hiển thị sẽ thay đổi.

Để giải quyết bài toán lớn, tôi chia chương này làm ba phần như sau:
-

-

Phần 1: Bài toán trích xuất dữ liệu và các liên kết web từ một trang html. Cụ
thể dữ liệu ở đây là nội dung của một bài báo. Các liên kết web là các bài báo
liên quan tới bài báo mà người dùng yêu cầu.
Phần 2: Kĩ thuật biểu diễn trực quan nội dung chính và các liên kết web trích
xuất được ở phần 1.
Phần 3: Phương pháp tổ chức cây giao diện.

3.1. Phương pháp trích xuất dữ liệu từ một trang html
Mục đích: trích xuất và phân tích dữ liệu dùng cho việc biểu diễn trực quan.
Vai trò: dùng để trích xuất nội dung chính của một bài báo và phân tích các liên kết web
có trong bài báo đó.
Phương pháp:
Trong phần này, tôi xin cải tiến thuật toán DSE [2] để trích xuất những thông tin
cần thiết trong một trang web. Tôi chia thuật toán DSE ra làm bốn bước như sau:
-

Bước 1: Lấy tập các trang mẫu dựa trên đánh giá độ tương đồng giữa các
URL.

Bước 2: Tạo cây cấu trúc cho trang báo gốc và các trang mẫu.
Bước 3: Hợp cây cấu trúc của trang gốc và trang mẫu.
Bước 4: Trích xuất nội dung của bài báo và các link liên quan.

Khác với thuật toán DSE ban đầu, tôi đã thay đổi một số điểm để thuật toán DSE
hoạt động hiệu quả hơn đối với bài toán mà tôi đang giải quyết. Các thay đổi đó là:
10


-

Ở bước 1: Tăng sự chính xác của việc tính toán độ tương đồng giữa hai URL.
Ở bước 2: Thay đổi trong việc tạo cây DOM trong từng trang web để phù hợp
với cấu trúc web của các trang báo.
Thêm bước 4 để trích xuất từng thành phần nhỏ của bài báo.

Cụ thể về những thay đổi này, tôi sẽ nêu rõ ở phần dưới đây.
3.1.1. Lấy tập các trang mẫu dựa trên đánh giá độ tương đồng giữa các URL
Mục tiêu: mục tiêu của chúng ta là tìm ra các trang mẫu tốt để có thể so sánh cấu trúc
web với trang mục tiêu.
Vai trò: là bước tiền đề cho việc hợp cây cấu trúc giữa hai trang web.
Phương pháp:
Dựa vào cơ sở các trang web trong cùng một website thì thường có cấu trúc tổ
chức hoặc bố cục trang giống nhau. Chúng ta cần tìm những trang mẫu có cấu trúc
Document Object Model (DOM) [8] giống với trang mục tiêu ban đầu. Thông thường
thì trong một webpage thì sẽ có những liên kết đi tới những trang khác (outgoing link).
Dựa vào việc phân tích cấu trúc URL của các outgoing link, ta có thể tìm ra các URL
có cấu trúc DOM tương tự với trang mục tiêu ban đầu.
Để giúp ích cho việc phân tích cấu trúc URL, chúng ta có thể đánh giá độ tương
đồng của hai URL dựa trên công thức URL Similarity (US) như sau :

𝑈𝑆(𝑖, 𝑗) = 𝑎 ∗

𝑝𝑟𝑒 (𝑖, 𝑗)
𝑝𝑟𝑒(𝑖, 𝑗)
+𝑏∗
𝑙𝑒𝑛(𝑖)
𝑙𝑒𝑛(𝑗)

Trong đó :
-

a và b là các hằng số chuẩn hóa, với 0 < a,b < 1 và a + b = 1.
pre(i,j) là số kí tự tiền tố trùng nhau giữa hai URL i và j.
Len(i) là độ dài của URL i , len (j) là độ dài của URL(j).

Hạn chế: Với công thức US ở trên, chúng ta có thể tính độ tương đồng của 2
URL khá chính xác. Tuy nhiên, công thức này vẫn còn những hạn chế nhất định. Cụ
thể là trong trường hợp nếu như số kí tự prefix giống nhau của hai URL càng thấp thì
theo công thức tính điểm US, hai trang html ứng với hai URL đó có độ tương đồng
thấp. Nhưng thực tế thì một số URL có thể rơi vào trường hợp nêu ở trên nhưng tỉ lệ
giống nhau của hai trang html ứng với hai URL lại cao (Ví dụ 1 ở phía dưới sẽ làm rõ
nhược điểm này).

11


Cải tiến: dựa trên công thức US của thuật toán trên, tôi đã thay đổi thức tính độ
tương đồng giữa hai URL như sau :
-

-

So sánh domain của hai URL.
Thông thường một URL của một trang báo được ngăn cách các mục bởi dấu
“/” để phân biệt các mục tin hoặc ngày tháng của bài báo. Ta tách các xâu
nằm giữa dấu “/” và được các thành phần con của URL.
So sánh lần lượt các thành phần con của URL theo thuật toán US.
Tính tổng điểm so sánh của các thành phần con. Chọn ra URL có điểm cao
nhất để làm URL mẫu theo công thức sau :
𝑈𝑆(𝑠𝑢𝑏(𝑘)𝑖 , 𝑠𝑢𝑏(𝑘)𝑗
𝑆𝑀(𝑖, 𝑗) = ∑
𝑛
𝑘

Trong đó :
-

subi là thành phần con thứ k của i , subj là thành phần con thứ k của j.
Nếu i có số thành phần con lớn hơn thì n = số thành phần con của i. Ngược
lại nếu j có số thành phần con lớn hơn thì n = số thành phần con của j.

Như vậy về mặt ý tưởng, công thức cải tiến SM tính độ tương đồng của từng thành
phần con tương ứng có trong hai URL. Như vậy, chúng ta có thể tránh được trường hợp
hạn chế mà công thức US đã gặp phải ở trên.
Ví dụ 1: phân tích và so sánh URL :
Các bước thực hiện :
 Bước 1: Thông thường một trang báo sẽ có những out-going link tới các trang
khác. Từ những out-going link ta có một tập nguồn cho các trang mẫu.
 Bước 2: So sánh domain của url target với từng url trong tập mẫu. Nếu khác domain
thì URL mẫu sẽ bị loại.

 Bước 3: Loại bỏ domain và tách các thành phần con của URL. Ta xét hai URL
dưới đây.
- : url của target page.
- : url của sample page.
- Thực hiện tách URL theo kí tự ‘/’ ta được :
o url target : tin-tuc, the-gioi, tu-lieu, cuoc-doi-cua-nguoi-tung-giaunhat-nuoc-nga-2926774.html
o url sample : tin-tuc, the-gioi, tu-lieu, cuu-ty-phu-dau-mo-nga-duoc-anxa-2926616.html.

12