FLEXI-ADAPTOR; AN AUTOMATED WEB CONTENT ADAPTATION FOR MOBILE DEVICES

8/12/2019 FLEXI-ADAPTOR; AN AUTOMATED WEB CONTENT ADAPTATION FOR MOBILE DEVICES

1/15

Flexi-adaptor; An Automated Web Content Adaptation for Mobile

Devices

Rajibul Anam, Chin Kuan Ho and Tek Yong Lim

Faculty of Information Technology, Multimedia University, Persiaran Multimedia, 63100Cyberjaya, Selangor, Malaysia.

[email protected], [email protected], [email protected]

ABSTRACT

KEYWORDS

Content adaptation, mobile browsing, smalldisplay, Flexi-adaptor, mobile web content.

1 INRODUCTION

Last few years, people start using thenetwork ready mobile devices like

handheld computers, PDAs and smart

phones to access the internet. The termmobile device refers to a device

specially designed for synchronous and

asynchronous communication while the

user is on the move [1]. Among themobile devices, the mobile phone and

PDA are the most popular, andcommonly used by the users, and one of

the facilities is accesses the internet [1].These kinds of devices provide good

mobility but very limited computationalcapabilities and display size [2]. Still,many mobile users dont feel easy to

browse the web via mobile devices,

because of small screen, limited

memory, processing speed and slownetwork [2], [3]. Since most of the

existing web contents are originallydesigned for display in the desktop

computers, so the content deliverywithout layout adjustment makes the

contents unsuitable for mobile devices.

Users mobile devices need to scroll thescreen horizontally and vertically to find

the desired content. Moreover, searching

and browsing could be frustratedbecause most of the web site is designed

for the standard desktop display. This

means that most of the web contents arenot suitable for mobile web browsing[4].

Content adaptation refers to

techniques, which automatically adjustthe contents according to the properties

of the handheld devices for better

presentation in to the mobile devices.

656

International Journal of Digital Information and Wireless Communications (IJDIWC) 1(3): 656-670

The Society of Digital Information and Wireless Communications, 2011(ISSN 2225-658X)

Mobile web browsing usually involves a lotof horizontal and vertical scrolling, whichmakes web browsing time-consuming. A

user may be interested in a section of a webpage, which may not fit to the mobile screen

and requires more scrolling in bothdirections. In this paper, we propose toaddress this problem by displaying the block

title and hide the block body contents from alarge web page while maintaining their

semantics, which display only the condensedinformation. The Flexi-adaptor, provides the

block titles and reduce unnecessary

information by allowing its users to see themost relevant blocks of the page. The Flexi-adaptor categorized each object of the web

page as menu, block title and main content.

Assign a weight to each object of the blockby analyzing the object elements. It usesdepth first traversal algorithm to select

blocks, and delivers them to handhelddevices. We conduct a usability test and

result shows that Flexi-adapter is aneffective adaptation system. The proposedsolution improves web content accessibilityand delivers the target contents to the users.


2/15

The conventional way to provide web

contents to support various types of

handheld devices is to create the samecontents but different formats for

different devices. This method is simple

but the chances of making errors arevery high for different handheld devices.To support new handheld devices, all the

previous web contents need to be

reformatted for that handheld device.Sometimes, changes in the main contents

require updating of all handheld contents

format. So, this is not a feasible solution

for large volume of web contents.Since the screen size is limited, the

content adaptation method needs to

apply for various content transformationprocesses including layout changes and

content format reconfiguration [2], [4],

[6]. However, simple content adaptation

solution for changing multiple-columnlayout to a single-column layout for

handheld screens also shows some

disadvantages. Without the semanticanalysis and relationship among the

objects, this kind of adaptation may

cause an awkward organization of a web

page and gives different meaning ofinformation. A tool or mechanism is

needed to provide the users flexible

adapted web contents for mobiledevices.

Web contents are typically composed

of multimedia objects (text, images,audio and video) [6], which are

semantically connected by various

objects in a section. For example, an

image can be illustrated by a section of atext article or a text article can be

abstract by some images. In other words,

these related objects are integrated with

each others which help the readers tounderstand what the section intend to

express. Improper arrangement of these

kinds of objects may lead to themisunderstanding or loss of information

to the users. Therefore, it is very

important for a content adaptation

mechanism to maintain the originalrelationship among the objects during

the adaptation and content delivery

process.Web contents are categorized intothree kinds of objects such as the

navigation bar (main menu), navigation

list (list of anchor texts links to theactual content) and content (details

information) [7]. However, most of the

web pages contain these three types of

objects to represent the information.In this paper, we present a novel

method which adapts web contents for

mobile phones. Our goal is to improveweb content accessibility, deliver the

target information to the users. So the

users can reach to the target information

from a large web page. To achieve thisgoal, we introduce Flexi-adaptor, an

automated web content adaptation

system for mobile devices. Ouralgorithms maintain the relationship

among the objects from a block, identify

the objects and categorize them into

navigation bar, block title and content.The algorithm adds toggle functionality

to each block title for showing and

hiding the contents of a block. The depthfirst search algorithm selects the objects

and delivers them to the users. The rest

of the paper is organized as follows:Section 2, summarizes the related

research work. Describe the proposed

solution in section 3. Section 4, presents

the case study. Section 5, discusses theresults. Finally, we conclude the paper in

section 6.

2 RELATED WORKS

There are several general purpose

content adaptation systems have beendeveloped like CMo, Xadapter and Web

657




3/15

Clipping. The CMo [8] uses a proxy-

based architecture to adapt web contents

for mobile devices. This system reducesthe information overloading by allowing

its users to see the most relevant

fragment of a web page and navigatebetween other fragments if necessary. Itcaptures the context of a link, applies the

topic boundary detection technique and

uses the context to identify the relevantinformation from the next page with the

help of vector machine.

Web Clipping is one of the methods

that researchers are still working on it.Web Clipping is a technique where the

system extracts and represents some

parts of html document for mobile webbrowsing [9]. An annotation or parser

declares a particular portion of a target

document. The system annotates some

parts of a web page, and it provides theannotation contents to the content

adaptation engine. The Web Clipping

methods modify the html structure andbreak the page into small parts, make

them a new separate page and add title

and header. Sometimes it removes

unnecessary objects from the html. TheWeb Clipping method read the web

page, tags some parts of the page and

regenerates the web page for mobile webbrowsing.

Xadaptor [10] is a content adaptation

system that consists of rule-based andfuzzy logic approach. The rule-based

approach facilitates extensible,

systematic and adaptive content

adaptation process and also integratesadaptation mechanism for various

content types and categories them into

the rule-based approach. Rules are

applied by the user define preferences.The html objects are transformed into

content and pointer objects. Therefore,

the system uses the content parsers toseparate the objects from the html tags.

Moreover, the system reformats the

standard tables from the html objects.

The table reformatting algorithm usesfuzzy logic and rule-based approaches.

This is a semi-automated system. The

users need to assign some parameters toadapt the contents.Some researchers use Vision Based

Page Segmentation (VIPS) algorithm

[3], [4], [5], [8], [11] that manages a webpage structure, find the interesting

objects and restructure a web page in to

blocks. The Web page Tailoring System

follows some rules to select theinteresting blocks [11]. The system

removes unnecessary information,

creates a new title for the block and triesto summarize the block contents

information. The VIPS identifies the

interesting contents, change the format

of the web page and also represent theinformation according to the users

interest. User preferences are used by

Page Segmentation and PatternMatching methods to make the

information interesting for every user.

Researches use Web Clipping, rule-

based and VIPS to identify the objectsand adapt the contents. However, users

still need to scroll the adapted web page

vertically. Sometimes users browse thecontents but fail to reach the target

content because of information

overloading [12]. Still, it is a greatchallenge to achieve satisfactory

precision for web page segmentation,

which is based on html element analysis.

3 PROPOSED SOLUTION

A mobile user first connects to the Flexi-

adaptor using a web browser. The usertypes the url of a web page in the input

box (see Fig. 1). A user can key in a

word if he likes to search any particularinfo in the page which he wants to view

658




4/15

after adaptation. Afterward submit the

request to the Flexi-adaptor, and it

delivers the adapted subpages to theusers. All the delivered contents are fits

in the mobile screen and the users do not

need to scroll the web page. Users usethe next and previous buttons to navigatethe subpages. Fig. 2, illustrates the

framework of the Flexi-adapter. Next

section we explain details about eachcomponents.

Fig. 1.Homepage of the Flexi-adaptor.

Fig. 2.The framework of the Flexi-adaptor.

3.1 Identification of Important Blocks

The Flexi-adaptor first parsers the html

page to an html tree. The root node is the

top element of the html tree. The internalnode means a node with one or more

children [13]. Fig. 3.a, shows the blocks

of the BBC home page and Fig. 3.b,

illustrates the tree presentation of the

block-5. This tree contains all the objectsof the block-5. The root of the tree is

(1), internal node is

(2) andleaf node is (3).

The algorithm identifies the blocks

according to the relationship among theobjects [7]. Since web pages are always

presented in html format, the algorithm

traverses the tree and identifies the

blocks from the tree by analyzing the

html elements.

(a)

(b)

Fig. 3. (a) Original BBC webpage with blocks

and (b) html tree hierarchy presentation of block-

5.

The algorithm removes objects like

JavaScript and CSS from the tree. These

objects are not important to represent thecontents for mobile web browsing [1].

To identify the blocks, use the depth first

search algorithm to traverse the tree and

remove the objects like , to simplify the tree [1]. The blocks are

identified by the structure functionality

[2]. Fig. 3.a, illustrates the homepage ofBBC, block 1 is the menu, block-2 is

the top news, block- 4,5,7,8,10,11 are

the relevant interesting blocks. Block- 6

659




5/15

and 9 contain some related links and

block-3 is an advertising block.

Fig. 4. Algorithm for identifying the important

blocks.

Fig. 4, illustrates the algorithm foridentifying the important blocks. The

input is the html tree T(refer to line 2),

output tree Tcontains only the importantblocks (refer to line 4), v and w is the

node of the tree and structure

functionality [2] is the set of html tags,

which helps to trace the blocks. Thealgorithm traverses the tree and searches

for the structure functionality (refer to

line 8). If it matches, then it keeps theinternal nodes and leaf nodes, if it does

not match, then removes the internal

nodes and leaf nodes from the tree. This

algorithm keeps only the importantblocks in the tree and removes other

unnecessary blocks.

3.2 Identification of Type Specific

Objects of a Block

We categorized the type specific objects

as navigation bar (menu), block heading

(block title) and main content (list ofanchor texts links to the actual content

and details information) [7], [14]. Fig. 5,

shows the algorithm that searches for theobjects in the html tree and sends it tothe categorize assignments. Fig. 6,

illustrates the categorize assignment

algorithm which tag the Menu Object,Block Title Object and Main Contents

from the html tree.

Fig. 5.Algorithm to identifying the object from

blocks.

The search keyword option provides

the users specific target information afteradaptation. If the user keys in any prefer

data (see Fig. 1) in the search field, the

algorithm starts searching the keywordfrom the root to leaf node of the tree.

Fig. 6, (refer to lines 7-9) algorithm

shows, if it finds any text object matches

with the user preferred keyword, then

tag the object as match, remove thematched node from the tree, add a new

left child node to the root of the tree and

assign the matched node to the new leftchild node.

There are some html elements that are

used to format the title [2] of the blockswhich contains the condensed

1.Input:

2. Tis a Tree;

3.Output:

4. Tcontains important blocks;

5.Start

6. Visit(T,v)

7. Perform visit of the node v;

8. Ifvmatches with structure

functionalityThen

9. Ifvis an internal node

Then

10. Forall child wof vDo

11. Visit(T,w);

12. Ifwdoes not match with

structure functionality

Then

13. Remove all thechildren of w;

14. Else

15. Remove all the children of

v;

16.End

1.Input:

2. Tis the Tree;

3.Output:

4. Tis the Tree with tagged

node;

5. Start

6. Traverse(T,v)

7. Perform visit of the node

v;

8. AssignmentOfCategory(v);

9. Preprocessing(v);

10.AssignmentOfWeight(v);

11. Ifvis an internal node

Then

12. For all child wof vdo

13. Traverse(T,w);

14. End

660




6/15

information. The algorithm searches the

title objects inside the html tree and tag

as heading. Fig. 6, (refer to line 10-11),illustrates the algorithm which searches

the block title objects and tag the

matched object as heading.Most of the web pages use hyperlinkswhich navigate to the main content or

another portal. This algorithm tags the

object according to the Hyperlinks textlengths. There are two kinds of

Hyperlinks such as Menu (navigation

bar) and Content (navigation list)

Hyperlink [7]. Navigation of a web siteis achieved by a collection of links (text /

images / flash / java applets) which is the

website navigation menu or the websitenavigation bar. The navigation menu or

bar is usually placed vertically at the left,

right or horizontally near the top of a

web page. Fig. 6, (refer to lines 12-16)algorithm shows it searches for the

navigation object, if found then checks

the text length of the object. First, tag theobject as the menu, if the text length is

less than 13 [7]. Second, if the text

length is more than 13, then tag the

object as content.Text and multimedia contents are

used to deliver the information which is

considered as main content. Fig. 6, (referto lines 17-18) algorithm shows it

searches for the text contents. If it finds

any text object, then tag the object ascontent. Fig. 6, (refer to lines 19-20)

algorithm shows it searches for the

images, if the image width is less than

21 pixels then dont tag the imagebecause, less than 21 pixels either use as

a symbol of navigation or fill the blank

space in the web page. When the image

width is more than 21 pixels, tag theobject as the content because it is

considered as main content.

Fig. 6. Algorithm for identification of type

specific objects of a block.

3.3 Pre-Processing of Blocks

Some html elements are used to format

the title and for decoration [10] purposes

to make the content more attractive tousers. For mobile readers, these

additional aesthetics elements may not

necessary. Therefore, it is better to

remove these elements.

Fig. 7, (refer to line 7) shows thealgorithm computes Iscreen which

controls the multimedia contents

physical dimension. The algorithm (referto line 9) first removes the html

decoration elements and changes the

background color of the object. Then, itedits the multimedia contents dimension

1. Input:

2. vis the node of the tree;

3. Output:

4. vwith tagged value;

5. Start

6. AssignmentOfCategory(v)

7. Ifsearch keywordmatcheswith vandpreferenceenable

Then

8. Assign vp= match;

9. Create new left childof

the root and shift v to the

new left child;

10 If title object matches with

vThen

11. Assign vp= heading;

12. Ifhyperlink objectmatches

with vThen

13. Iftext lengthis less than

13 Then

14. Assign vp= menu;

15. Iftext lengthis equal or

more than 13 Then

16. Assign vp= content;

17. Iftext objectmatches with v

Then


19. Ifmultimedia objectmatches

with vdata and multimedia

object pixels> 21 Then


21. End

661




7/15

properties. If the multimedia contents

dimension is more than theIscreen(refer

to lines 10 - 20), the algorithm reducesthe original dimension of the multimedia

contents, so it can fit the mobile screen.

Fig. 7.Algorithm to Pre-process each object

by removing decorative.

3.4 Assignment of Weight to Each

Object in a Block

The algorithm assigns weight to each

object according to the text length andmultimedia objects dimension. The

depth first traversal algorithm uses theobjects weight to deliver limited

contents to every subpage. The system

uses text and multimedia objects tocompute the weight assignment. It

searches all the objects in the html tree,

if it finds any text object; then the

algorithm count the text length and

transfers it to pixels and assigned as theweight of the object. Fig. 9, (refer to

lines 7-8), shows the algorithm convert

text lengths to pixels, where vw is thetotal number of the pixels, 10 is theheight of a character, and 30 is the

threshold, vw = (30+10 number of text

character); [11].

Fig. 8.Algorithm of assignment of weight to

individual content unit.

Then the algorithm searches for themultimedia objects. If it finds any

multimedia object, checks the properties

of the multimedia object. If the objectsdimension is provided, it extracts the

information for the weight; otherwise the

system checks the metadata of the

multimedia object to get the dimension.Fig. 9, (refer to lines 9-10) shows the

algorithm where height of the image is

the height of the multimedia content andwidth of the image is the weight of themultimedia content, and vwis the weight

of the multimedia object.

3.5 Organizing Block Contents Using

Toggle Functionality to the Block Title

1. Input:

2. vis the node of the Tree;

3. Output:

4. vwith modified HTML

elements;

5.Start

6. Preprocessing(v)

7. Iscreen =( DeviceWidth /

DeviceHeight) 200;

8. Ifvis decoration or

highlight element Then

9. Remove the element from v

and change the backgroundcolor properties;

10. Ifvis multimedia element

and multimedia height, width

more than IscreenThen

11. MaxHeight= Iscreen;

12. MaxWidth= Iscreen;

13. Ratio= height/ width;

14. If height> MaxHeightThen

15. newheight= MaxHeight;

16. newwidth= height/ Ratio;

17. Elseif width> MaxWidth

Then

18. newwidth= MaxWidth;

19. newheight= width Ratio;

20. update vwith the new width

and height;

21.End

1.Input:


3.Output:

4. vwith weight value;

5.Start

6. AssingWeight(v)

7. Ifvis text object Then

8. Assign weight to vw= vw+(30 + 10 number of text

character);

9. Ifvis image object and

image height, width more

than 20pixels Then

10. Assign weight to vw= vw+

(height of the image width

of the image);

11.End

662




8/15

The block title contains the condensed

information of the body (information

content objects). So the user canunderstand the content of the body by

looking at the block title object. The

Flexi-adaptor first searches the tagheading objects and content objects.Second, it adds a navigation object to the

block title (heading objects) and hides

the block body. Fig. 9.a, illustrates theCNN homepage. This page contains the

block title and block body. Fig. 9.b,

shows after adding the toggle

functionality to the block title, extra plussymbol adds to the block title as the

navigation and block body gets hidden.

If the user clicks the block title plussymbol, the block body gets visible in

the browser.

Fig. 9. (a) CNN homepage contains block title

and block body with information, (b) adapted

CNN homepage contains block title with

navigation and block bodies are hidden, (c)

adapted CNN homepage after clicking the block

title navigation. The block body appears to the

screen.

Fig. 10.Algorithm for organizing block contents

using toggle block title.

Fig. 9.c, illustrates the block heading

with the minus symbol and the blockbody appears. Fig.10, shows the

algorithm (refer to lines 7-8), if found

any title object, then assign the toggleobject to the block title. Afterwards

1.Input:


3.Output:

4. vwith toggle object value;

5.Start

6. BlockToggle(v)

7. Iftitle object matches with

vThen

8. Assign vt= enable toggle

object;

9. Ifvhas child node w Then10. If all node whas

information content object

Then

11. Assign vt= all node wi

and hide information

content object;

12. Iftoogle the heading object

Then

13. Display the hidden

information content object;

14.End

(a)

(b)

(c)

663




9/15

searches for the block body contents

(refer to lines 9-11) and hide them from

display. The hidden block body appears(refer to lines 12-13) in the screen if the

user clicks the header navigation

symbol.

3.6 Depth First Traversal Algorithm

for Selecting Blocks to Display on

Mobile Devices

The depth first traversal algorithm

selects the tag objects from the tree and

generates subpages according to theweight capacity of the objects. The total

weight of the objects may not be more

than the mobile screen size of eachsubpage.

Fig. 11, illustrates, subpage generator

scheme from the html tree. Let contentsi

is the html tree object, wi is the weight,and ti is the tag info of the object

assigned by ith item, C is the capacity

base on the screen mobile dimension(height width). The depth first

traversal algorithm selects the objects

and the weightmust be smaller or equal

to the C capacity. When the weightbecome more than the capacity C, then

the process stops. The algorithm delivers

the contents in a subpage. The next andprevious values use to direct next and

previous subpages. If the next is true

(refer to line 12), then the algorithmtraverse the unvisited nodes of the tree,

tag the nodes as visited and add the

objects in the subpage (refer to lines 13-

20). If the previous is true (refer to line21), the algorithm traverses the visited

nodes of the tree, tag the nodes as

unvisited and add the objects in the

subpage (refer to lines 22-29). The depthfirst traversal algorithm creates subpages

from the tree.

Fig. 11. Depth first traversal algorithm for

selecting blocks.

3.7 Context Identification after

Navigating to another Page

Navigating to another page is veryimportant to get the full information of

the context. The context of a link is thecontent around the link which maintains

the same topic [2]. Fig. 12.a, shows the

adapted front page of the CNN website.Suppose user selects the Mediators to

try to mend Ivory Coast link to read the

1. Input:

2.vis the node of the Tree;

3. tis the tagged info of the

individual object unit;

4.contents is the tree

individual content unit;

5.wis the weight of theindividual object unit;

6.nextis the next button;

7.previousis the previous

button;

8. Output:

9.subpageis HTML page contains

individual content units;

10.Start

11.dfs(v)

12.Ifnext = TRUE Then

13. Ifweight+ wi C Then

14. v= visited;

15. Ifti matches with user

preferencesThen

16. subpage= subpageappend

contentsi ;

17. weight= weight+ wi ;

18. Foreach child xof parent v

19. Ifxis unvisited Then

20. dfs(x);

21.Elseifprevious = TRUE Then

22. Ifweight+ wi C Then

23. v= unvisited;

24. Ifti matches with user

preferencesThen

25. subpage= subpageappend

contentsi ;26. weight= weight + wi ;

27. Foreach parent vof child x

28. Ifvis visited Then

29. dfs(v);

30.End

664




10/15

main content. The Flexi-adaptor adapts

the new page and identifies the

important blocks from the new page. Itsearches the related content Mediators

to try to mend Ivory Coast in the new

page and selects those contents for theadapted page. Fig. 12.b, illustrates thefirst subpage after adapting the new page

and Fig. 12.c, shows the subpage

containing the rest of the context relatedto Mediators to try to mend Ivory

Coast. Fig. 13, (refer to lines 7-8)

shows that the algorithm searches all the

text information in the html tree and tagthem as match if the text data matches

with the navigated text. This algorithm

also searches for the multimediacontents (refer to lines 9-10) and tag the

multimedia contents as match if the

multimedia contents metadata matches

with the navigation text.

Fig. 12. (a) The adapted CNN page by Web-

adaptor on handheld device with navigation to

another page, (b) The first sub page of adapted

version of the navigated page, (c) the second sub

page of the adapted page.

Fig. 14. Algorithm for content identification

after navigating to another page.

4 EXPERIMENTAL STUDY

This section presents an experimental

comparison study of the Flexi-adaptor

and Skweezer. Both systems are createdto adapt web content for mobile devices.

To conduct the test, we provide iPhone

(emulator) to twenty test subjects. All

the test subjects were undergraduatestudents from the Faculty of Information

Technology in Multimedia University.

The average of the test subjects age was

(c)

(b)

(a)

1. Input:

2. vis the node of the tree;

3. Output:

4. vwith matched value node of

the tree ;

5. Start

6. NavigationContext

Identification (v)

7. Ifnavigation textmatches

with v(text)Then

8. Assign vm= match;

9. Ifnavigation textmatches

with v(multimedia metadata)

Then10. Assign vm= match;

11.End

665




11/15

22.25 years. We conducted the test in a

controlled laboratory. The test subjects

were instructed to open the home pageof the Flex-adaptor and performed some

tasks. In the same way, the subjects were

instructed to open the home page of theSkweezer from the mobile browser andperformed some tasks in the laboratory.

The main objective of this study is to

find the differences of scrolling the webpage, content layout and users

satisfaction of both systems.

4.1 Usability Study

The main purpose of Flexi-adaptor is to

enhance users browsing experiences.We have conducted the usability

evaluation to validate the design goal of

Flexi-adaptor. The usability involves

learnability, efficiency, memorability,error hindering and satisfaction of the

users [15]. For mobile web content

adaptation, learning and memorizationare not major concern [16], efficiency

and satisfaction are the major concerns

[17]. We select seven web sites (refer to

Table. 1). All the pages contain tables,CSS and javacsript. The users were

asked to perform some tasks using the

Flexi-adaptor and Skweezer separately,including browsing web pages and

locating target information on the iPhone

(emulator). After performing these tasks,the users were asked to complete two

separate usability questionnaires

regarding two systems efficiency and

satisfaction. In the questionnaire, thefirst two questions were related to the

users satisfaction. The third question

was concerned to content layout. The

fourth question was related to usability,

and the last question was related tolearnability. Fig. 15, shows the usability

questionnaires. Table 2, shows the

usability study result. Each cell in thetable represents the number of users whoselects the interval score (1 to 5) of the

two systems.

Based on the interval score results, it isobserved that the users preferred the

Flexi-adaptor than Skweezer [18]. Both

systems provide adapted versions of the

web pages. However, most of the usersmanage to locate the required

information.

Table 1.List of the web pages for the

experiment

Fig. 15.User study questionnaire.

Table 2.Usability study result (here A refers to Flexi-adaptor and B refers to Skweezer).

Question

1 2 3 4 5

A B A B A B A B A B

Score1 1 0 2 1 0 1 0 5 0 1

2 0 10 4 12 2 12 4 14 0 6

Index Web page URL

1 www.onlineclasses.org

2 www.bbc.co.uk

3 www.un.org

4 www.nasa.gov

5 www.unicef.org

6 edition.cnn.com

7 www.ibm.com

Please specify your opinion about the Flexi-

adaptor and Skweezer of web page regarding

the following perspectives (5 is the highest,

and 1 is the lowest).

1. Overall, I am satisfied with the easeof completing the tasks in this

scenario.

2. It helps me be more productive.3. The display format is consistent.4. It requires minimal scrolling.5. It is easy to learn to use it.

666




12/15

3 24 18 24 21 21 24 27 12 9 24

4 28 32 20 24 32 20 28 16 44 24

5 20 5 15 0 20 0 10 0 30 10

Average Score 3.65 3.25 3.25 2.9 3.75 2.85 3.45 2.35 4.15 3.25

5 RESULTS AND DISCUSSION

A mobile user first opens a general web

browser and connects to the Flexi-adaptor.

Fig. 16.(a) BBC web page desktop version and

(b) adapted BBC web page for the mobile.

Fig.16.a, illustrates the desktop

version of CNN web page and Fig. 16.b,shows the CNN adapted web page after

adapting by the Flexi-adaptor. The

background color, font size andmultimedia contents are modified to suit

in to the mobile screen. The block title

has [+] navigation symbol and thebodies of the block contents are hidden.

If the user toggle the navigation, the

body of the block contents appears in thescreen and the block title navigation

symbol changes to [-]. If the user does

not find the target contents, then the user

can navigate to next or previous pages.Next part of this paper we compare our

proposed method with other existing

methods; discuss potentialimplementation issues and other

considerations.

5.1 Framework Comparison

There are many significant differences

between our proposed system and otherexisting content adaptation frameworks.

The Xadaptor [10] framework builds on

five components and it is a rule-based

adaptive content adaptation system;fuzzy logic is used to model the

adaptation quality and control the

adaptation decision. The WebpageTailoring System [5] is a complete

framework to adapt contents for mobile

devices. This system consists of threecomponents. It uses the mechanism that

can determine which blocks of a web

page should be retained by user

preferences and arrange the blocks. TheCMo [8] framework builds on three

components. It captures the context ofthe link, applies topic-boundarydetection technique and uses the context

to identify relevant information in the

next page by using vector machine. The

Flexi-adaptor framework consists of sixcomponents.

(a)

(b)

667




13/15

Table 3, illustrates the comparison of

the components of frameworks. Other

frameworks do not hide and displayblock contents dynamically. In our

proposed system, rearrange the block

titles using the toggle functionalities by

displaying and hiding the body contentsof the block.

Table 3.Comparison of the components of frameworks.

Components

Used

(1)

Xadaptor

System

(2)

CMo

System

(3) Web

Page

Tailoring

System

(4)

Flexi-

adaptor

Comments

User preferences Yes Yes Yes Yes System 1 and 3 uses predefined

user preferences from database

but system 2 and 4 uses dynamic

preferences from the users.

Representation of

html page as Tree

Yes Yes Yes Yes System 1 use structure tree,

system 2 use frame tree, system

3 use DOM tree and system 4

uses simple html tree.

Block

identification

Yes Yes Yes Yes System 1- 4 identify the blocks

by html tags.

Object

identification

Yes No No Yes System 1and 4 identify the

objects by html tags. Some

embedded and navigation

objects are not important for

mobile readers.

Modification

object elements

Yes No No Yes System 1 modifies the objects

according to the user database,

but system 4 modifies the

objects from the instant data.

Which helps the contents to fit

in the mobile screen.

Toggle thecontents for

display and hiding

No No No Yes System 4 toggles the block titlefor showing and hiding the body

of the block. This component

hides the body of all the blocks,

which makes the page very

small and shows only the

condensed information.

Use mechanism to

select the target

contents for

display

No Yes Yes Yes System 2 delivers the related

information. System 3 delivers

information according to the tag

pattern matching, and system 4

delivers exact information.

Table 4, illustrates the time complexitycomparison of the algorithms. Our

proposed blocks identification algorithm

complexity is O(n) because Fig. 4, line

10, uses an iterative loop and recursivefunction. The FindBlocks [8] algorithm

line 3 and 14 uses iterative loops and the

complexity is O(n). Second, proposed

objects identification algorithm'scomplexity is O(n+e) because Fig. 5,

line 12, uses the iterative loop and

recursive function. However, the

FindContext [8] algorithm line 6 and 10use nested iterative loop. So the

complexity becomes O(n2). Third, Fig.

7, the object elements modification

668




14/15

algorithm complexity is O(n) and

subpage navigation algorithm [19] line 4

complexity is O(n). Fourth, Fig. 8, thecontents height and width calculation

algorithm complexity is O(n) and

subpage navigation algorithm [19] line 5complexity is O(n). We can see thatoverall complexity of our proposed

algorithm is same compared to other

algorithms. However, proposed objectidentification algorithms complexity is

less than the FindContext [8] algorithm.

Table 4.Comparison the complexity of the

algorithm.

Algorithm Time

Complexity

of ProposedSystem

Time

Complexity

of OtherSystems

Blocks

Identification

Algorithm

O(n) O(n)[8]

Objects

Identification

Algorithm

O(n+e) O(n ) [8]

Object

Elements

Modification

Algorithm

O(n) O(n)[19]

Contents

Height andWidth

Calculation

Algorithm

O(n) O(n)[19]

5.2 Visualization Comparison

The Web Page Tailoring System and

Xadaptor deliver the contents according

to the user preference. However, there

are differences in the visual outlook. Oursystem shows only the block title and

hides the body of the block. So, all thecondensed information displays in thescreen. The Web Page Tailoring System,

users can zoom in which part of the page

he wants to read. The multimediacontent sometime gets oversized from

the mobile screen because The Web Page

Tailoring System doesnt adaptall kinds

of contents. The Xadaptor and proposed

system adapt the multimedia and text

contents. The Xadaptor and Web PageTailoring System display all the contents

in a single column page but our

proposed system delivers all thecondensed contents in subpages.

6 CONCLUSION

In this paper, we proposed a new method

for browsing of a large web page on a

mobile device. The Flexi-adaptor

convert's a web page into an html treeand identify the semantic blocks. Each

object of a block gets tag and assigns

weight. The pre-processor modify thecontents. The toggle block title

algorithm uses to hide and show the

body contents. The depth first traversal

algorithm selects the tag contents. Thesystem generates subpages for the

mobile devices. Our approach enables a

new browsing experience to the users.The block title will appear in the screen

which carries the most significant

information. The cases study shows that

the Flexi-adapter is an effective system.A new browsing method overcomes the

limitation of a mobile screen and makes

them truly useful for information access.

REFERENCES

1. Alexander Blekas, John Garofalakis,Vasilios Stefanis, Use of RSS feeds for

Content Adaptation in Mobile Web

Browsing, International cross-disciplinary

workshop on Web accessibility (W4A), pp.

79-85, (2006)

2. Hamed Ahmadi, Jun Kong, Efficient WebBrowsing on Small Screens, International

Conference on Advanced Visual Interfaces,

pp. 23-30, (2008)

3. Xiangye Xiao, Qiong luo, Dan Hong,Hongbo Fu, Xing xie and Wei-Ying Ma,

Browsing on Small Displays by

Transforming Web Pages into Hierarchically

669




15/15

Structured Subpages, ACM Transactions

on the Web, vol. 3, no. 1, Article. 4, (2009)

4. Eunshil Lee, Jinbeom Kang, Joongmin Choi,Jaeyoung Yang, Topic-SpecificWeb

Content Adaptation to Mobile Devices,

International Conference on Web

Intelligence, pp. 845-848, (2006)

5. Yung-Wei Kao, Tzu-Han Kao, Chi-YangTsai, Shyan-Ming Yuan, A personal Web

page tailoring toolkit for mobile devices,

Computer Standards & Interfaces, vol 31,

Issue 2, pp. 437-453, (2009)

6. Stephen J.H. Yang, Jia Zhang, Rick C.S.Chen, and Norman W.Y. Shao, A Unit of

InformationBased Content Adaptation

Method for Improving Web Content

Accessibility in the Mobile Internet, ETRI

Journal, vol. 29, No. 6, pp. 794-807, (2007)

7. Eunshil Lee, Jinbeom Kang, Joongmin Choi,Jaeyoung Yang, Topic-SpecificWeb

Content Adaptation to Mobile Devices,International Conference on Web

Intelligence, pp. 845-848, (2006)

8. Yevgen Borodin, Jalal Mahmud, I.V.Ramakrishnan, Context Browsing with

Mobiles - When Less is More, International

conference on Mobile systems, applications

and services, pp. 3-15, (2007)

9. Masahiro Horia, Kouichi Ono, Mari Abe,Teruo Koyanagi, Generating

transformational annotation for web

document adaptation: tool support and

empirical evaluation, Journal of Web

Semantics, vol. 2, no. 1, pp. 118, (2004)10. Jiang He, Tong Gao, Wei Hao, I-Ling Yen,

and Farokh Bastani, A Flexible Content

Adaptation System Using a Rule-Based

Approach, IEEE Transactions on

Knowledge and Data Engineering, vol. 19,

no. 1, pp. 127-140, (2007)

11. Eunshil Lee, Jinbeom Kang, Jeahyun Park,Joongmin Choi, Jaeyoung Yang,

ScalableWeb News Adaptation To Mobile

Devices Using Visual Block Segmentation

for Ubiquitous Media Services,

International Conference on Multimedia and

Ubiquitous Engineering(MUE'07), pp. 620-625, (2007)

12. Kaijian Xu, Daqing Zhang, Manli Zhu, TaoGu, Context-Aware Content Filtering &

Presentation for Pervasive & Mobile

Information Systems, International

Conference on Ambient MEdia and Systems

and Workshops, Article. 20, (2008)

13. Rong Pan, Huiqin Wei, Shan Wang,Chenguang Luo, Auto-adaptation of Web

Content: Model and Algorithm, IET 2nd

International Conference on Wireless,

Mobile and Multimedia Networks, pp. 507-

511, (2008)

14. Jinlin Chen, Baoyao Zhou, Jin Shi,Function-Based Object Model Towards

Website Adaptation, International World

Wide Web Conference, pp. 587-596, (2001)

15. Jakob Nielsen, "Usability InspectionMethods", CHI95 Mosaic of Creativity, pp.

377-378, (1995)

16. Kjeldskov,J., GRAHAM, C., Pedell, S.,Davies, J., Vetere, F., Howard, S. and

Balbo.: Evaluating the Usability of a Mobile

Guide: a Comparison of Four Different

Approaches. Journal of Behaviour and

Information Technology, vol. 24, no. 1, pp.

51-65, (2005)

17. George Buchanan, Gary Marsden, MichaelPazzani.: Improving Mobile Internet

Usability. Tenth International World WideWeb Conference, Hong Kong, ACM Press,

pp. 673-680, (2001)

18. Skweezer, http://www.skweezer.com19. Aditya Gupta, Anuj Kumar, Mayank,

V.N.Tripathi, S.Tapaswi, "Mobile Web:

Web Manipulation for Small Displays using

Multi-level Hierarchy Page Segmentation",

International Conference on Mobile

Technology, Application & Systems , pp.

599-606, (2007)

670



Date post:	03-Jun-2018
Category:	Documents
Upload:	ijdiwc
View:	224 times
Download:	0 times

FLEXI-ADAPTOR; AN AUTOMATED WEB CONTENT ADAPTATION FOR MOBILE DEVICES

Documents