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

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ạn

ĐẠ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à CLC đã bên cạnh, ủng hộ, khích lệ và giúp đỡ tôi hoàn thiện đề tài này

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

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

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

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

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

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

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

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

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

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

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 https://play.google.com/store/apps/details?id=com.epi&hl=en

2 http://www.baomoi.com/

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

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)

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

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

- 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 http://www.w3.org/TR/html5/

2 http://www.w3schools.com/css/css3_intro.asp

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

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

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

1 http://weka.wikispaces.com/

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

Để 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 đó

- 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à:

- Ở 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)

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

- Thực hiện tách URL theo kí tự ‘/’ ta được :

o url target : tin-tuc, the-gioi, tu-lieu, nhat-nuoc-nga-2926774.html

cuoc-doi-cua-nguoi-tung-giau-o url sample : tin-tuc, the-gicuoc-doi-cua-nguoi-tung-giau-oi, tu-lieu, cuu-ty-phu-dau-mcuoc-doi-cua-nguoi-tung-giau-o-nga-ducuoc-doi-cua-nguoi-tung-giau-oc-an-xa-2926616.html

cuu-ty-phu-dau-mo-nga-duoc-an- Bước 4: Lần lượt so sánh độ tương đồng của các thành phần con tuc” với

“tin-tuc” , “tu-lieu” với “tu-lieu”, theo thuật toán US Sau đó tính tổng kết quả

Hình 3-1: Ví dụ về một trang mục tiêu và các liên kết có trong trang

3.1.2 Tạo cây cấu trúc cho một trang web

Mục tiêu: Tạo cây cấu trúc DOM từ mã HTML của một trang web Loại bỏ đi những

thành phần phi cấu trúc trong mã HTML

Vai trò: Quyết định tới hiệu năng của quá trình hợp cây DOM

Như chúng ta đã biết, một trang HTML được định nghĩa bởi các thẻ lồng nhau Tương ứng với các thẻ HTML đó, một trang HTML còn có thể được biểu diễn dưới dạng cấu trúc cây DOM ( Document object model) Mỗi một node của cây DOM là một thẻ trong mã HTML Với bài toán nhận diện vùng chứa thông tin chính thì thuật toán so sánh cây cấu trúc sẽ bị hạn chế về tốc độ nếu cây DOM quá lớn Do đó, cần phải loại bỏ các thẻ không cần thiết trong cây cấu trúc Những thẻ thường có chứa nội dung thông tin như <div> hoặc những thể có chứa các thuộc tính về liên kết trong trang như “href”,

“src” sẽ được giữ lại

Để giải quyết bài toán này, thuật toán DSE đã đưa ra cách giải quyết như sau:

Các liên kết tới trang khác

URL của trang mục tiêu

- Bước 1: Tải nội dung mã html của các trang mẫu lấy được từ bước 1

- Bước 2: Phân tích mã html và sinh cây DOM

- Bước 3: Loại bỏ các thành phần không cần thiết trong cây DOM Trong đó các thành phần cần thiết là các thành phần liên quan tới text (các thẻ p, h, i, u), style và các đoạn mã script

Hạn chế: ở bước 3 của cách giải quyết trên có phần loại bỏ các thẻ liên quan đến text

Việc loại bỏ này nhằm mục đích tăng tốc độ so sánh ở bước hợp hai cây cấu trúc trong phần 3.2.3 Tuy nhiên việc loại bỏ này lại gây ra một sự thay đổi với nội dung bài báo

Cụ thể trong cùng một website thì hai trang web chứa hai bài báo thường có cấu trúc DOM tổ chức các thành phần giao diện giống nhau Chúng chỉ khác nhau ở thẻ chứa nội dung chính của bài báo, mà những thẻ này lại bao gồm các thẻ text Do đó, nếu sau khi hợp cây DOM ở bước 3.2.3 diễn ra, thì cây DOM sẽ bị loại bỏ hết các thành phần chứa nội dung chính

Khắc phục: Để khắc phục điểm này, trong bước này tôi đã giữ lại các thẻ text Bước

hợp cây DOM có thể xử lý lâu hơn nhưng bù lại, nội dung chính của bài báo vẫn được giữ nguyên vẹn

Hình 3-2: Ví dụ tạo cây cấu trúc từ mã HTML

3.1.3 Hợp cây cấu trúc của hai trang web

Mục tiêu: loại bỏ các thành phần không cần thiết như quảng cáo, menu điều hướng

Vai trò: là thành phần chính của thuật toán Dựa trên ý tưởng loại bỏ các thành phần

trùng nhau giữa hai cây cấu trúc để giữ lại nội dung chính của trang HTML

Phương pháp:

Ý tưởng của thuật toán so sánh cây cấu trúc là duyệt hai cây theo thứ tự độ sâu

“depth-first” Thuật toán lặp đi lặp lại bước so sánh từ đỉnh tới các lá giữa hai cây Những cây con có chung cấu trúc sẽ được loại bỏ ra khỏi cây Cuối cùng những thành phần còn lại của cây chính là thông tin cần thiết cho bài toán lớn

Giải thuật gồm các bước như sau :

- Duyệt qua từng đỉnh của hai cây theo thứ tự độ sâu “depth-first”

- Với mỗi cặp đỉnh lấy ra từ hai cây, ta so sánh theo hai tiêu chí :

o So sánh các đỉnh con của hai đỉnh

o So sánh tên thẻ HTML và các thuộc tính của thẻ đó

Dưới đây là thuật toán dưới dạng giả mã :

chạy từ (đỉnh w : 0 -> m) //với m là số con của t

chạy từ (đỉnh v : 0 -> n) { //với n là số con của s

Trả về kết quả = 1;

} ngược lại trả về kết quả = 0;

} ngược lại {

Nếu(đỉnh s và đỉnh t đều không có con) thì trả về kết quả = 1;

ngược lại trả về kết quả = 0;

} }

}

Trong đó :

- Hai đỉnh i và j là giống nhau khi :

o Đỉnh_i và đỉnh_j có tên thẻ là giống nhau

o Các giá trị thuộc tính của đỉnh_i và đỉnh_j là như nhau

Hình 3-3: Ví dụ về hợp cây cấu trúc giữa hai trang

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

Mục tiêu: Trích xuất từng thành phần chi tiết của bài báo Trong đó bao gồm: tiêu đề,

ảnh và nội dung text

Vai trò: Là thành phần chính của thuật toán (không có trong thuật toán DSE ban đầu),

có vai trò tăng cường tính chi tiết trong việc trích xuất nội dung chính

Sau khi áp dụng thuật toán DSE ta nhận được cây DOM được loại bỏ đi các thành phần không cần thiết Như vậy thuật toán DSE mới chỉ nhận dạng được vùng chứa nội

dung chính,để lấy được các thành phần của bài báo như tiêu đề, nội dung text, nội dung ảnh, bước tiếp theo cần nhận dạng tiêu đề bài báo, nội dung của bài báo thông qua phân tích cây DOM

Hiện nay, phương pháp nhận dạng tiêu đề, nội dung text và nội dung ảnh thường

sử dụng bộ lọc dựa trên các phương pháp tiếp cận theo kinh nghiệm

Một số đặc điểm nhận dạng nội dung bài báo theo kinh nghiệm:

Để trích xuất các thành phần của một bài báo, cần phải có một số bộ lọc và một số tập luật về định nghĩa cấu trúc các thành phần của các trang báo [11]

Theo đặc tả của HTML thì các thẻ định nghĩa cấu trúc trang HTML bao gồm:

- Các thẻ block như: div, span

- Các thẻ danh sách như: ul, li

Tiêu đề bài báo : thông thường tiêu đề của một bài báo thường được để trong thẻ

<h1> Qua phân tích 20 trang báo thì tỉ lệ tiêu đề được đặt trong thẻ h1 là 90%

Nội dung bài báo :

- Một bài báo thường có rất nhiều đoạn văn nhỏ Mỗi một đoạn văn thường được lưu trong thẻ <p> Do đó tập trung tìm kiếm vào vùng nào có nhiều thẻ

<p> sẽ tìm ra được nội dung của bài báo

- Thông thường nội dung bài báo cũng chứa rất nhiều hình ảnh Số hình ảnh trong một thẻ HTML càng nhiều thì thẻ đó có khả năng cao là thẻ chứa nội dung chính của bài báo

Phương pháp trích xuất:

Phương pháp trích xuất nội dung chính được đề xuất như sau :

- Bước 1: duyệt cây DOM theo thứ tự depth-fisrt Với mỗi đỉnh của cây, ta kiểm tra xem độ dài text mà đỉnh đó chứa là bao nhiêu Từ đó tìm ra đỉnh chứa nhiều chữ nhất Tạm gọi đó là Largest Node (LN)

- Bước 2: Kiểm các đỉnh bên cạnh (sibling node) của LN, đếm số đỉnh chứa thẻ chứa nội dung text như <p>, <i>, <b>, <h> hoặc chúng chứa thẻ <img>

- Bước 3: Tìm ra đỉnh có chứa nhiều thẻ chứa text nhất và có độ dài text lớn nhất Thẻ đó chính là thẻ chứa nội dung chính của bài báo Ta gọi thẻ đó là contentNode

Phương pháp trích xuất tiêu đề bài báo : khi đã có được thẻ contentNode, ta tìm thẻ <h1> gần nhất so với thẻ contentNode Thẻ đó chính là tiêu đề của bài báo

Phương pháp trích xuất ảnh đại diện : ta chọn ra những thẻ <img> nằm gần với thẻ contentNode theo khoảng cách cây DOM Sau đó chọn ra ảnh có độ phân giải cao nhất

và chọn ảnh đó làm ảnh đại diện của bài báo

Phương pháp trích xuất các bài báo liên quan: ta chọn ra những thẻ <a> có khoảng cách cây DOM tới thẻ contentNode là ba bậc

Hình 3-4: Ví dụ về một thẻ chứa nội dung chính

3.1.5 Phân loại tự động nội dung bài báo

Để đáp ứng nhu cầu hiển thị trực quan các liên kết trong một bài báo, việc phân loại bài báo thuộc chuyên mục nào là rất quan trọng Với các nhãn chuyên mục được gắn với từng bài báo, người dùng có thể dễ dàng nhận ra các thông tin mà họ mong muốn Để thực hiện công việc này tôi sử dụng module phân lớp trong hệ thống phân lớp

tự động [12] đã được phát triển trong giai đoạn trước tại phòng thí nghiệm UET Module sử dụng công cụ Weka và định lý Bayes để phân loại bài báo vào các chuyên mục nhất định

3.2 Kĩ thuật biểu diễn trực quan các liên kết web

Trong phần này, tôi sử dụng lại giao diện PageLayout [13], hệ thống này đã được phát triển tại phòng thí nghiệm Toshiba-UET Tuy nhiên, nó vẫn còn một số hạn chế về mặt tương tác người dùng Để phù hợp với việc biểu diễn giao diện trực quan, tôi đã thêm một số tính năng như:

- Hiển thị vắn tắt các bài báo liên quan với bài báo đang đọc, xử lý tương tác người dùng trên các thiết bị cảm ứng

- Ngoài ra tôi còn gán thêm nhãn màu cho từng khối hiển thị trong giao diện PageLayout, mỗi một màu sắc đại diện cho một chuyên mục riêng

Hình 3-5: Mô tả giao diện trực quan sử dụng giao diện PageLayout

3.2.1 Phương pháp đánh độ ưu tiên của các khối

Để đảm bảo thứ tự theo dõi cho người dùng, cách khối đã được hiển thị được đánh

độ ưu tiên thứ tự Theo thuật toán Adaptive PageLayout [4] Trật tự theo dõi hợp lý cho người dùng là từ trên xuống dưới, từ trái sang phải Do đó, thứ tự ưu tiên cũng tuân theo quy luật trên Quá trình đánh độ ưu tiên này được thực hiện tương tự thuật toán Bubble sort, hai khối cạnh nhau sẽ được so sánh tọa độ của đỉnh góc trên bên trái và đổi thứ tự

ưu tiên một cách phù hợp sao cho khối sau luôn nằm phía bên phải hoặc và bên dưới của khối trước nó