Flexi-Adaptor An Automated Web Content Adaptation For Mobile Devices

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)
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, 63100 Cyberjaya, Selangor, Malaysia. rajibul.anam08@mmu.edu.my, ckho@mmu.edu.my, tylim@mmu.edu.my
ABSTRACT
Mobile web browsing usually involves a lot of horizontal and vertical scrolling, which makes web browsing time-consuming. A user may be interested in a section of a web page, which may not fit to the mobile screen and requires more scrolling in both directions. In this paper, we propose to address this problem by displaying the block title and hide the block body contents from a large web page while maintaining their semantics, which display only the condensed information. The Flexi-adaptor, provides the block titles and reduce unnecessary information by allowing its users to see the most relevant blocks of the page. The Flexiadaptor categorized each object of the web page as menu, block title and main content. Assign a weight to each object of the block by analyzing the object elements. It uses depth first traversal algorithm to select blocks, and delivers them to handheld devices. We conduct a usability test and result shows that Flexi-adapter is an effective adaptation system. The proposed solution improves web content accessibility and delivers the target contents to the users.
KEYWORDS
Content adaptation, mobile browsing, small display, Flexi-adaptor, mobile web content.
1 INRODUCTION Last few years, people start using the network ready mobile devices like handheld computers, PDAs and smart
phones to access the internet. The term mobile device refers to a device specially designed for synchronous and asynchronous communication while the user is on the move [1]. Among the mobile devices, the mobile phone and PDA are the most popular, and commonly used by the users, and one of the facilities is accesses the internet [1]. These kinds of devices provide good mobility but very limited computational capabilities 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 slow network [2], [3]. Since most of the existing web contents are originally designed for display in the desktop computers, so the content delivery without layout adjustment makes the contents unsuitable for mobile devices. Users mobile devices need to scroll the screen horizontally and vertically to find the desired content. Moreover, searching and browsing could be frustrated because most of the web site is designed for the standard desktop display. This means that most of the web contents are not suitable for mobile web browsing [4]. Content adaptation refers to techniques, which automatically adjust the 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)
The conventional way to provide web contents to support various types of handheld devices is to create the same contents but different formats for different devices. This method is simple but the chances of making errors are very 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 transformation processes including layout changes and content format reconfiguration [2], [4], [6]. However, simple content adaptation solution for changing multiple-column layout to a single-column layout for handheld screens also shows some disadvantages. Without the semantic analysis and relationship among the objects, this kind of adaptation may cause an awkward organization of a web page and gives different meaning of information. A tool or mechanism is needed to provide the users flexible adapted web contents for mobile devices. 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 a text 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 to understand what the section intend to express. Improper arrangement of these kinds of objects may lead to the misunderstanding or loss of information
to the users. Therefore, it is very important for a content adaptation mechanism to maintain the original relationship among the objects during the adaptation and content delivery process. Web contents are categorized into three kinds of objects such as the navigation bar (main menu), navigation list (list of anchor texts links to the actual 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 improve web 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 this goal, we introduce Flexi-adaptor, an automated web content adaptation system for mobile devices. Our algorithms 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 depth first 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 the results. Finally, we conclude the paper in section 6. 2 RELATED WORKS There are several general purpose content adaptation systems have been developed like CMo, Xadapter and Web 657
Clipping. The CMo [8] uses a proxybased architecture to adapt web contents for mobile devices. This system reduces the information overloading by allowing its users to see the most relevant fragment of a web page and navigate between other fragments if necessary. It captures the context of a link, applies the topic boundary detection technique and uses the context to identify the relevant information 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 web browsing [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 the annotation contents to the content adaptation engine. The Web Clipping methods modify the html structure and break the page into small parts, make them a new separate page and add title and header. Sometimes it removes unnecessary objects from the html. The Web Clipping method read the web page, tags some parts of the page and regenerates the web page for mobile web browsing. Xadaptor [10] is a content adaptation system that consists of rule-based and fuzzy logic approach. The rule-based approach facilitates extensible, systematic and adaptive content adaptation process and also integrates adaptation 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 to separate the objects from the html tags.
Moreover, the system reformats the standard tables from the html objects. The table reformatting algorithm uses fuzzy logic and rule-based approaches. This is a semi-automated system. The users need to assign some parameters to adapt the contents. Some researchers use Vision Based Page Segmentation (VIPS) algorithm [3], [4], [5], [8], [11] that manages a web page structure, find the interesting objects and restructure a web page in to blocks. The Web page Tailoring System follows some rules to select the interesting blocks [11]. The system removes unnecessary information, creates a new title for the block and tries to summarize the block contents information. The VIPS identifies the interesting contents, change the format of the web page and also represent the information according to the users interest. User preferences are used by Page Segmentation and Pattern Matching methods to make the information interesting for every user. Researches use Web Clipping, rulebased and VIPS to identify the objects and adapt the contents. However, users still need to scroll the adapted web page vertically. Sometimes users browse the contents but fail to reach the target content because of information overloading [12]. Still, it is a great challenge 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 Flexiadaptor using a web browser. The user types 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 particular info in the page which he wants to view 658
after adaptation. Afterward submit the request to the Flexi-adaptor, and it delivers the adapted subpages to the users. All the delivered contents are fits in the mobile screen and the users do not need to scroll the web page. Users use the next and previous buttons to navigate the subpages. Fig. 2, illustrates the framework of the Flexi-adapter. Next section we explain details about each components.
traverses the tree and identifies the blocks from the tree by analyzing the html elements.
(a)
Fig. 1. Homepage of the Flexi-adaptor.
(b)
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 internal node 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 objects of the block-5. The root of the tree is <div> (1), internal node is <p> (2) and leaf node is <img> (3). The algorithm identifies the blocks according to the relationship among the objects [7]. Since web pages are always presented in html format, the algorithm
Fig. 3. (a) Original BBC webpage with blocks and (b) html tree hierarchy presentation of block5.
The algorithm removes objects like JavaScript and CSS from the tree. These objects are not important to represent the contents for mobile web browsing [1]. To identify the blocks, use the depth first search algorithm to traverse the tree and remove the objects like <script>, <style> to simplify the tree [1]. The blocks are identified by the structure functionality [2]. Fig. 3.a, illustrates the homepage of BBC, 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
and 9 contain some related links and block-3 is an advertising block.

1. Input: 2. T is a Tree; 3. Output: 4. T contains important blocks; 5. Start 6. Visit(T,v) 7. Perform visit of the node v; 8. If v matches with structure functionality Then 9. If v is an internal node Then 10. For all child w of v Do 11. Visit(T,w); 12. If w does not match with structure functionality Then 13. Remove all the children of w; 14. Else 15. Remove all the children of v; 16.End Fig. 4. Algorithm for identifying the important blocks.
We categorized the type specific objects as navigation bar (menu), block heading (block title) and main content (list of anchor texts links to the actual content and details information) [7], [14]. Fig. 5, shows the algorithm that searches for the objects in the html tree and sends it to the categorize assignments. Fig. 6, illustrates the categorize assignment algorithm which tag the Menu Object, Block Title Object and Main Contents from the html tree.
1.Input: 2. T is the Tree; 3.Output: 4. T is 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. If v is an internal node Then 12. For all child w of v do 13. Traverse(T,w); 14. End Fig. 5. Algorithm to identifying the object from blocks.
Fig. 4, illustrates the algorithm for identifying the important blocks. The input is the html tree T (refer to line 2), output tree T contains only the important blocks (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. The algorithm traverses the tree and searches for the structure functionality (refer to line 8). If it matches, then it keeps the internal 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 important blocks in the tree and removes other unnecessary blocks. 3.2 Identification of Type Specific Objects of a Block
The search keyword option provides the users specific target information after adaptation. If the user keys in any prefer data (see Fig. 1) in the search field, the algorithm starts searching the keyword from 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 the matched node from the tree, add a new left child node to the root of the tree and assign the matched node to the new left child node. There are some html elements that are used to format the title [2] of the blocks which contains the condensed 660
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 hyperlinks which navigate to the main content or another portal. This algorithm tags the object according to the Hyperlinks text lengths. There are two kinds of Hyperlinks such as Menu (navigation bar) and Content (navigation list) Hyperlink [7]. Navigation of a web site is achieved by a collection of links (text / images / flash / java applets) which is the website navigation menu or the website navigation 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 the object 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, (refer to lines 17-18) algorithm shows it searches for the text contents. If it finds any text object, then tag the object as content. 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 image because, 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 the object as the content because it is considered as main content.
1. 2. 3. 4. 5. 6. 7.
Input: v is the node of the tree; Output: v with tagged value; Start AssignmentOfCategory (v) If search keyword matches with v and preference enable Then 8. Assign vp = match; 9. Create new left child of the root and shift v to the new left child; 10 If title object matches with v Then 11. Assign vp = heading; 12. If hyperlink object matches with v Then 13. If text length is less than 13 Then 14. Assign vp = menu; 15. If text length is equal or more than 13 Then 16. Assign vp = content; 17. If text object matches with v Then 18. Assign vp = content; 19. If multimedia object matches with v data and multimedia object pixels > 21 Then 20. Assign vp = content; 21. End 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 to users. 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 the algorithm computes Iscreen which controls the multimedia contents physical dimension. The algorithm (refer to line 9) first removes the html decoration elements and changes the background color of the object. Then, it edits the multimedia contents dimension 661
properties. If the multimedia contents dimension is more than the Iscreen (refer to lines 10 - 20), the algorithm reduces the original dimension of the multimedia contents, so it can fit the mobile screen.
1. Input: 2. v is the node of the Tree; 3. Output: 4. v with modified HTML elements; 5. Start 6. Preprocessing(v) 7. Iscreen =( DeviceWidth / DeviceHeight) 200; 8. If v is decoration or highlight element Then 9. Remove the element from v and change the background color properties; 10. If v is multimedia element and multimedia height, width more than Iscreen Then 11. MaxHeight = Iscreen; 12. MaxWidth = Iscreen; 13. Ratio = height / width; 14. If height > MaxHeight Then 15. newheight = MaxHeight; 16. newwidth = height / Ratio; 17. Elseif width > MaxWidth Then 18. newwidth = MaxWidth; 19. newheight = width Ratio; 20. update v with the new width and height; 21.End Fig. 7. Algorithm to Pre-process each object by removing decorative.
if it finds any text object; then the algorithm count the text length and transfers it to pixels and assigned as the weight of the object. Fig. 9, (refer to lines 7-8), shows the algorithm convert text lengths to pixels, where vw is the total number of the pixels, 10 is the height of a character, and 30 is the threshold, vw = (30+10 number of text character); [11].
1. Input: 2. v is the node of the Tree; 3. Output: 4. v with weight value; 5. Start 6. AssingWeight(v) 7. If v is text object Then 8. Assign weight to vw = vw + (30 + 10 number of text character); 9. If v is 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 Fig. 8. Algorithm of assignment of weight to individual content unit.
3.4 Assignment of Weight to Each Object in a Block The algorithm assigns weight to each object according to the text length and multimedia objects dimension. The depth first traversal algorithm uses the objects weight to deliver limited contents to every subpage. The system uses text and multimedia objects to compute the weight assignment. It searches all the objects in the html tree,
Then the algorithm searches for the multimedia objects. If it finds any multimedia object, checks the properties of the multimedia object. If the objects dimension 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 and width of the image is the weight of the multimedia content, and vw is the weight of the multimedia object. 3.5 Organizing Block Contents Using Toggle Functionality to the Block Title 662
The block title contains the condensed information of the body (information content objects). So the user can understand the content of the body by looking at the block title object. The Flexi-adaptor first searches the tag heading 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 the CNN homepage. This page contains the block title and block body. Fig. 9.b, shows after adding the toggle functionality to the block title, extra plus symbol adds to the block title as the navigation and block body gets hidden. If the user clicks the block title plus symbol, the block body gets visible in the browser.
(c) 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.
1. 2. 3. 4. 5. 6. 7.
Input: v is the node of the Tree; Output: v with toggle object value; Start BlockToggle(v) If title object matches with v Then 8. Assign vt = enable toggle object; 9. If v has child node w Then 10. If all node w has information content object Then 11. Assign vt = all node wi and hide information content object; 12. If toogle the heading object Then 13. Display the hidden information content object; 14.End
(a)
Fig. 10. Algorithm for organizing block contents using toggle block title.
(b)
Fig. 9.c, illustrates the block heading with the minus symbol and the block body appears. Fig.10, shows the algorithm (refer to lines 7-8), if found any title object, then assign the toggle object to the block title. Afterwards
663
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 the weight capacity of the objects. The total weight of the objects may not be more than the mobile screen size of each subpage. 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 weight must be smaller or equal to the C capacity. When the weight become more than the capacity C, then the process stops. The algorithm delivers the contents in a subpage. The next and previous values use to direct next and previous subpages. If the next is true (refer to line 12), then the algorithm traverse the unvisited nodes of the tree, tag the nodes as visited and add the objects in the subpage (refer to lines 1320). If the previous is true (refer to line 21), 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 depth first traversal algorithm creates subpages from the tree.
1. Input: 2. v is the node of the Tree; 3. t is the tagged info of the individual object unit; 4. contents is the tree individual content unit; 5. w is the weight of the individual object unit; 6. next is the next button; 7. previous is the previous button; 8. Output: 9. subpage is HTML page contains individual content units; 10.Start 11.dfs(v) 12.If next = TRUE Then 13. If weight + wi C Then 14. v = visited; 15. If ti matches with user preferences Then 16. subpage = subpage append contentsi ; 17. weight = weight + wi ; 18. For each child x of parent v 19. If x is unvisited Then 20. dfs(x); 21.Elseif previous = TRUE Then 22. If weight + wi C Then 23. v = unvisited; 24. If ti matches with user preferences Then 25. subpage = subpage append contentsi ; 26. weight = weight + wi ; 27. For each parent v of child x 28. If v is visited Then 29. dfs(v); 30.End Fig. 11. Depth first traversal algorithm for selecting blocks.
3.7 Context Identification after Navigating to another Page Navigating to another page is very important to get the full information of the context. The context of a link is the content 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 664
main content. The Flexi-adaptor adapts the new page and identifies the important blocks from the new page. It searches the related content Mediators to try to mend Ivory Coast in the new page and selects those contents for the adapted page. Fig. 12.b, illustrates the first subpage after adapting the new page and Fig. 12.c, shows the subpage containing the rest of the context related to 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 tag them as match if the text data matches with the navigated text. This algorithm also searches for the multimedia contents (refer to lines 9-10) and tag the multimedia contents as match if the multimedia contents metadata matches with the navigation text.
(c)
Fig. 12. (a) The adapted CNN page by Webadaptor 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. 1. Input: 2. v is the node of the tree; 3. Output: 4. v with matched value node of the tree ; 5. Start 6. NavigationContext Identification (v) 7. If navigation text matches with v(text) Then 8. Assign vm = match; 9. If navigation text matches with v(multimedia metadata) Then 10. Assign vm = match; 11.End Fig. 14. Algorithm for content identification after navigating to another page.
(a)
4 EXPERIMENTAL STUDY This section presents an experimental comparison study of the Flexi-adaptor and Skweezer. Both systems are created to adapt web content for mobile devices. To conduct the test, we provide iPhone (emulator) to twenty test subjects. All the test subjects were undergraduate students from the Faculty of Information Technology in Multimedia University. The average of the test subjects age was 665
(b)
22.25 years. We conducted the test in a controlled laboratory. The test subjects were instructed to open the home page of the Flex-adaptor and performed some tasks. In the same way, the subjects were instructed to open the home page of the Skweezer from the mobile browser and performed some tasks in the laboratory. The main objective of this study is to find the differences of scrolling the web page, 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 memorization are 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, the first 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 to learnability. Fig. 15, shows the usability questionnaires. Table 2, shows the usability study result. Each cell in the table represents the number of users who selects the interval score (1 to 5) of the two systems. Based on the interval score results, it is observed that the users preferred the Flexi-adaptor than Skweezer [18]. Both systems provide adapted versions of the web pages. However, most of the users manage to locate the required information.
Table 1. List of the web pages for the experiment 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 Flexiadaptor 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 ease of 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. Fig. 15. User study questionnaire.
Table 2. Usability study result (here A refers to Flexi-adaptor and B refers to Skweezer). 1 2 3 4 5 Question A B A B A B A B A 1 Score 2 1 0 0 10 2 4 1 12 0 2 1 12 0 4 5 14 0 0
B 1 6
666
3 4 5 Average Score
24 28 20 3.65
18 32 5 3.25
24 20 15 3.25
21 24 0 2.9
21 32 20 3.75
24 20 0 2.85
27 28 10 3.45
12 16 0 2.35
9 44 30 4.15
24 24 10 3.25
5 RESULTS AND DISCUSSION A mobile user first opens a general web browser and connects to the Flexiadaptor.
has [+] navigation symbol and the bodies of the block contents are hidden. If the user toggle the navigation, the body of the block contents appears in the screen 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 potential implementation issues and other considerations. 5.1 Framework Comparison There are many significant differences between our proposed system and other existing 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 Webpage Tailoring System [5] is a complete framework to adapt contents for mobile devices. This system consists of three components. It uses the mechanism that can determine which blocks of a web page should be retained by user preferences and arrange the blocks. The CMo [8] framework builds on three components. It captures the context of the link, applies topic-boundary detection technique and uses the context to identify relevant information in the next page by using vector machine. The Flexi-adaptor framework consists of six components.
(a)
(b)
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 and multimedia contents are modified to suit in to the mobile screen. The block title
667
Table 3, illustrates the comparison of the components of frameworks. Other frameworks do not hide and display block contents dynamically. In our
proposed system, rearrange the block titles using the toggle functionalities by displaying and hiding the body contents of the block.
Table 3. Comparison of the components of frameworks. Components Used (1) Xadaptor System Yes (2) CMo System Yes (3) Web Page Tailoring System Yes (4) Flexiadaptor Yes Comments
User preferences
Representation of html page as Tree
Yes
Yes
Yes
Yes
Block identification Object identification
Yes Yes
Yes No
Yes No
Yes Yes
Modification object elements
Yes
No
No
Yes
Toggle the contents for display and hiding
No
No
No
Yes
Use mechanism to select the target contents for display
No
Yes
Yes
Yes
System 1 and 3 uses predefined user preferences from database but system 2 and 4 uses dynamic preferences from the users. System 1 use structure tree, system 2 use frame tree, system 3 use DOM tree and system 4 uses simple html tree. System 1- 4 identify the blocks by html tags. System 1and 4 identify the objects by html tags. Some embedded and navigation objects are not important for mobile readers. 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. System 4 toggles the block title for 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. 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 complexity comparison of the algorithms. Our proposed blocks identification algorithm complexity is O(n) because Fig. 4, line 10, uses an iterative loop and recursive function. The FindBlocks [8] algorithm line 3 and 14 uses iterative loops and the complexity is O(n). Second, proposed
objects identification algorithm's complexity is O(n+e) because Fig. 5, line 12, uses the iterative loop and recursive function. However, the FindContext [8] algorithm line 6 and 10 use nested iterative loop. So the complexity becomes O(n2). Third, Fig. 7, the object elements modification 668
algorithm complexity is O(n) and subpage navigation algorithm [19] line 4 complexity is O(n). Fourth, Fig. 8, the contents height and width calculation algorithm complexity is O(n) and subpage navigation algorithm [19] line 5 complexity is O(n). We can see that overall complexity of our proposed algorithm is same compared to other algorithms. However, proposed object identification algorithms complexity is less than the FindContext [8] algorithm.
Table 4. Comparison the complexity of the algorithm. Algorithm Time Time Complexity Complexity of Proposed of Other System Systems Blocks O(n) O(n) [8] Identification Algorithm Objects O(n+e) O(n2) [8] Identification Algorithm Object O(n) O(n) [19] Elements Modification Algorithm Contents O(n) O(n) [19] Height and Width Calculation Algorithm
of contents. The Xadaptor and proposed system adapt the multimedia and text contents. The Xadaptor and Web Page Tailoring System display all the contents in a single column page but our proposed system delivers all the condensed 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 tree and identify the semantic blocks. Each object of a block gets tag and assigns weight. The pre-processor modify the contents. The toggle block title algorithm uses to hide and show the body contents. The depth first traversal algorithm selects the tag contents. The system 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) Hamed Ahmadi, Jun Kong, Efficient Web Browsing on Small Screens, International Conference on Advanced Visual Interfaces, pp. 23-30, (2008) Xiangye Xiao, Qiong luo, Dan Hong, Hongbo Fu, Xing xie and Wei-Ying Ma, Browsing on Small Displays by Transforming Web Pages into Hierarchically
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. Our system shows only the block title and hides the body of the block. So, all the condensed information displays in the screen. The Web Page Tailoring System, users can zoom in which part of the page he wants to read. The multimedia content sometime gets oversized from the mobile screen because The Web Page Tailoring System doesnt adapt all kinds
2.
3.
669
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
Structured Subpages, ACM Transactions on the Web, vol. 3, no. 1, Article. 4, (2009) Eunshil Lee, Jinbeom Kang, Joongmin Choi, Jaeyoung Yang, Topic-SpecificWeb Content Adaptation to Mobile Devices, International Conference on Web Intelligence, pp. 845-848, (2006) Yung-Wei Kao, Tzu-Han Kao, Chi-Yang Tsai, Shyan-Ming Yuan, A personal Web page tailoring toolkit for mobile devices, Computer Standards & Interfaces, vol 31, Issue 2, pp. 437-453, (2009) 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) Eunshil Lee, Jinbeom Kang, Joongmin Choi, Jaeyoung Yang, Topic-SpecificWeb Content Adaptation to Mobile Devices, International Conference on Web Intelligence, pp. 845-848, (2006) 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) 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) 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) 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. 620625, (2007) Kaijian Xu, Daqing Zhang, Manli Zhu, Tao Gu, Context-Aware Content Filtering & Presentation for Pervasive & Mobile Information Systems, International Conference on Ambient MEdia and Systems and Workshops, Article. 20, (2008) Rong Pan, Huiqin Wei, Shan Wang, Chenguang Luo, Auto-adaptation of Web
14.
15. 16.
17.
18. 19.
Content: Model and Algorithm, IET 2nd International Conference on Wireless, Mobile and Multimedia Networks, pp. 507511, (2008) Jinlin Chen, Baoyao Zhou, Jin Shi, Function-Based Object Model Towards Website Adaptation, International World Wide Web Conference, pp. 587-596, (2001) Jakob Nielsen, "Usability Inspection Methods", CHI95 Mosaic of Creativity, pp. 377-378, (1995) 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) George Buchanan, Gary Marsden, Michael Pazzani.: Improving Mobile Internet Usability. Tenth International World Wide Web Conference, Hong Kong, ACM Press, pp. 673-680, (2001) Skweezer, http://www.skweezer.com 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

Flexi-Adaptor An Automated Web Content Adaptation For Mobile Devices

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flexi-Adaptor An Automated Web Content Adaptation For Mobile Devices

Uploaded by

Copyright:

Available Formats

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)

Flexi-adaptor; An Automated Web Content Adaptation for Mobile Devices

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

and 9 contain some related links and block-3 is an advertising block.

Representation of html page as Tree

Block identification Object identification

Modification object elements

Toggle the contents for display and hiding

Use mechanism to select the target contents for display

You might also like