International audienceNowadays Internet contents can be reached from a vast set of different devices. We can cite mobile devices (mobile phones, PDAs, smartphones) and more recently TV sets through browser-embedding Set-Top Boxes (STB). The diverse characteristics that define these devices (input, output, processing power, available bandwidth, . . . ) force content providers to keep as many versions as the number of targeted devices. In this paper, we present the research projects that try to address the content adaptaption

Ates, Mikaël

Fayolle, Jacques

Gravier, Christophe

Lardon, Jérémy

HAL-UJM

Overview of Web Content AdaptationJe´re´my Lardon, Mikae¨l Ates, Christophe Gravier, Jacques FayolleTo cite this version:Je´re´my Lardon, Mikae¨l Ates, Christophe Gravier, Jacques Fayolle. Overview of Web ContentAdaptation. Institute for Systems and Technologies of Information, Control and Communi-cation. 10th International Conference on Entreprise Information Systems - ICEIS 2008, Jun2008, Barcelone, Spain. pp.384-387, 2008. <ujm-00319697>HAL Id: ujm-00319697https://hal-ujm.archives-ouvertes.fr/ujm-00319697Submitted on 9 Sep 2008HAL is a multi-disciplinary open accessarchive for the deposit and dissemination of sci-entific research documents, whether they are pub-lished or not. The documents may come fromteaching and research institutions in France orabroad, or from public or private research centers.L’archive ouverte pluridisciplinaire HAL, estdestine´e au de´poˆt et a` la diffusion de documentsscientifiques de niveau recherche, publie´s ou non,e´manant des e´tablissements d’enseignement et derecherche franc¸ais ou e´trangers, des laboratoirespublics ou prive´s.OVERVIEW OF WEB CONTENT ADAPTATIONJe´re´my Lardon, Mikae¨l Ates, Christophe Gravier, Jacques FayolleDIOM Laboratory, ISTASE, University Jean Monnet, rue du Dr P. Michelon, Saint-Etienne, France{jeremy.lardon, mickael.ates, christophe.gravier, jacques.fayolle}@univ-st-etienne.frKeywords: HCI, web content adaptation, limited browsing devices.Abstract: Nowadays Internet contents can be reached from a vast set of different devices. We can cite mobile devices(mobile phones, PDAs, smartphones) and more recently TV sets through browser-embedding Set-Top Boxes(STB). The diverse characteristics that define these devices (input, output, processing power, available band-width, . . . ) force content providers to keep as many versions as the number of targeted devices. In this paper,we present the research projects that try to address the content adaptaption.1 INTRODUCTIONNumerous devices allow the user to browse the Inter-net these days. Nevertheless the resources found onthe Web are designed for personal computers. Tak-ing into account all their characteristics : screen size,resolution, mouse and keyboard, software installed(flash, video players, . . . ), it clearly appears that mo-bile devices as well as browser-embedded Set-TopBoxes offer less capabilities in terms of input, output,processing power, or bandwidth. That’s the reasonwhy solutions must be found to unite internet con-tents with the limitations of such devices, henceforthreferred as limited devices.This paper lists previously imagined solutions tosolve the above problem above. As a side note andin order to remain brief and revelant, we have madethe choice to focus on the last decade and to cite onepublication per research project.In order to structure our presentation, we relyon the Model-Driven Engineering (Gerber et al.,2002). As figure 1 shows, there are two paths toadapt an user interface (UI) to a new device: di-rect code to code transformation (or transcoding) orre-engineering which passes through three steps :reverse-engineering, model to model transformationand forward-engineering. The main difference be-tween these two approachs is that the former tries toaddress the transformation in a higher level of abstrac-tion, while the later takes the web page code as sup-port of the transformation.Figure 1: Re-engineering versus transcoding.Thus our paper is organized as follows: Sec-tion 2 presents the publications using the reverse-engineering process. Section 3 deals with the projectsin which adaptation techniques are directly used onthe code. Finally section 4 concludes.2 RE-ENGINEERING OF USERINTERFACESIn this section, we summarize what is, to ourknowledge, the major research on UI re-engineeringin general and the hard point that is reverse-engineering.2.1 OminiIn (Buttler et al., 2001), the authors present the Ominisystem that aims to extract objects of interest fromweb pages. The Omini object extraction process isdivided in three phases. The first is the preparationof the web document: retrieval of the page, transfor-mation to a well-formed web document, and conver-tion to a tag tree representation. Afterwards objectsof interest are located in the page. This phase hastwo steps: the object-rich subtree extraction and theobject separator extraction. Finally, objects of inter-est are extracted thanks to the result of the previousphase.The main concern of this paper is the identifica-tion of object separators. In this goal, five heuristicsare compared with their combinaitions. As a conse-quence, the combinaition of the five heuristics showsthe best results on the cached pages from 50 differentweb sites.2.2 MORE(Gaeremynck et al., 2003) focus on discovering themodels behind web forms. The main challenge theyaddress is to discover the relationship between stringsand widgets. These relations are mutually exclusiveas they assume that each entity (string or interactor)plays a unique role, for example a string can’t at thesame time a caption and a hint for a interactor.The starting point of the study is a collection offacts extracted from the web page: description of theentities (“S1 is a string” or “I2 is an iteractor”), rela-tionships between those entities (“S1 is a caption forI2” or “S1 is a hint for I2”), . . . . Facts are then ma-nipulated through a forward chain rule system. Threetypes of rules are defined : deduction rules to producenew facts from selected facts, exclusion rules to deter-mine if two facts are mutually exclusive and the scor-ing rules to order facts depending on the properties ofthe interactors involved.The model recovery algorithm can be summed upas follows. As long as there remains unprocessedfacts, facts are created thanks to the deduction rules.Resulting facts that, when combined, have less chanceto create future conflicts (or exclusions) are selected.The second selection amongst them is based on thescoring rules to get the larger set of compatible facts.Only the finally selected facts expand the set. The re-mainder of the created facts that do not pass the twoselections are discarded and the loop continues.The result is a list of relations between strings andinteractors which then can be used to split a form.2.3 Web RevEngeWeb RevEnge (Paganelli and Paterno`, 2003) was de-velopped to automatically extract the task modelsfrom a web application, i.e. multiple web pages.In order to do so, they begin to compute each page.The DOM of the page is parsed to find links, interac-tion objects (such as <input> tags), their groupings(forms, radio button groups), and finally frames. Asthe task models are represented in ConcurTasksTrees(Paterno`, 2000), task model representations of eachpage are graphs with a root element and link nodes toother pages.To build the task model of the whole web appli-cation, the process uses the home page as its startingpoint. All links being represented in the task model,one replaces the internal links (in the same site) withthe task models of the targeted pages.2.4 WARE and WANDAEven though presented in the same publication (Luccaand Penta, 2005), WARE and WANDA are web appli-cation reverse-engineering tools that were developpedindependently. The former adresses the static analysisof web applications. The latter intervenes upstreamby extracting information from the php files.WARE implements a two-step process. Revelantinformation is retrieved from the static code (mainlyHTML) by extractors. Then abstractors take the pre-vious result as input and abstract them. The final out-put is a UML representation of the web application.WANDA does the same work but on dynamicdata instead of static data. Dynamic information iscollected during web application executions and be-comes the support of the extraction that creates UMLdiagrams.Bringing them together permits us to identifygroups of equivalent dynamically built pages if thereare enough execution runs.2.5 ReversiXML and TransformiXMLReversiXML and TransformiXML (Bouillon et al.,2005) are respectively a tool to reverse-engineer webpages and a tool to transform abstract representationsfrom one context of use to another.For this purpose, Bouillon and al. takes Cameleonframework (Calvary et al., 2003) as reference forthe development process. In order to express anyabstraction level of the UI, they rely on UsiXML(http://www.usixml.org).About the reverse-engineering part, the derivationfrom code source to any abstraction level is donethanks to derivation rules, functions interpreted atdesign- and run-time. The output of this first stageis an UsiXML file that represents the graph of the UIin the selected abstraction level.The transformation takes place at any level of ab-straction. As UsiXML has an underlying graph struc-ture, the model transformation system is equivalent toa graph transformation system based on the theory ofgraph grammars.3 TRANSCODINGIn constrast to the re-engineering, transcoding di-rectly manipulates the code of the UI. So we put themon the same level and ordered them chronologically.3.1 Top Gun WingmanThis research project (Fox et al., 1998) was motivatedby the use of 3Com PalmPilot as a web browsing de-vice. However the browser used on the PalmPilot is asplit web browser, i.e. that it needs a dedicated serverto run, in addition to the software on the device. Theserver side, that operates as a proxy lets workers dothe adaptation, which is splited into 4 processes:• image processing• HTML processing• aggregation to build contents from one or moresites on a topic• zip processor to list the archive contents in HTML3.2 DigestorDigestor (Bickmore et al., 1999) aims at filtering andautomatically re-authoring web pages to display onsmall screen devices. We focus on the re-authoringuse of this project. The implementation of Digestortakes place between the client and the server, in aproxy server. To perform the transformations onpages, Bickmore and Schilit rely on fifteen techniquesgrouped in three groups:1. Outlining: displays only section headers as linksthat point to new pages displaying the texts underthe headers,2. First sentence elision: uses the same techniquebut the first sentences of each block become linksto the rest of the block,3. Indexed segmentation: segments the page intosub-pages containing a given number of items,4. Table transformation: splits a page between re-gions, such as sidebars, headers and footers,5. Image reduction or elision: reduces or sup-presses images from the page, replaces imageswith a reduced image or the ALT text pointing tothe original image.Given these techniques, the question of whichtechniques to use and in what order remains. The re-sponse to this question is a heuristic planner whichexplores all possibilities and gives them a score es-timated from the screen area required to display thenew page. The process is recursive until the docu-ment version is judged good enough or there is nocandidate. In this case the best estimated version isreturned.3.3 Power Browser(Buyukkokten et al., 2000) also take advantage of aproxy architecture. In addition to transforming thepages, Power Browser manages the navigation. That’swhy it is more drastic than the previous proxy-basedsolution about the re-authoring.Indeed all images are replaced by their ALT prop-erty value. In the same way all white spaces are col-lapsed to save screen space. Tables and lists are re-formatted in text block.In the other hand the navigation is made easierby the use of shortcuts and of tree control to displaylinks.3.4 Web page structure detectionThe approach exposed in (Chen et al., 2003) proposesto facilitate navigation and reading on small screendevices. To do so, a thumbnail is available when theuser first requests a page. In the tumbnail, each se-mantic block is colored and makes possible the choiceof what part of the web page the user wants to see indetail.This approach allows the page to be split intoblocks. The block identification part of the processparses the DOM tree to find:1. high-level content blocks such as <center> tags,header, footer, and left/right side bars,2. explicit separators: <hr> tags, rows in a table(<tr>), <div>, any tag with border properties,3. implicit separators by using pattern recognitionand clustering on tag names and properties.4 CONCLUSIONAs we saw in this paper, web UI adaptation comesin two flavours: transcoding and re-engineering.While the former can be considered as more basic,by acting directly on the code, transcoding techniquesare easier to implement.On the contrary, the later relies on higher levels ofabstraction. A practical case, in which re-engineeringis more suitable, is the adaptation of a page with a<select> list (without a multiple attribut) to a device,on which only the <input type=“radio“> tag is sup-ported. Both tags denote a list with one selectableoption, but staying at a concrete level doesn’t permitto know that the underlying interaction object is thesame for both tags. Nevertheless the main drawbackof the re-engineering is its cost.Therefore both approaches are complementary:fast low level modifications through transcoding andcostly more abstract transformations thanks to re-engineering.What result would the combination of both ap-proaches give? We plan to explore the possibility tobring them together in our future work in order to an-swer this question.REFERENCESBickmore, T. W., Girgensohn, A., and Sullivan, J. W.(1999). Web page filtering and re-authoring for mo-bile users. Computer Journal, 42(6):534–46.Bouillon, L., Limbourg, Q., Vanderdonckt, J., and Mi-chotte, B. (2005). Reverse engineering of web pagesbased on derivations and transformations. In WebCongress, 2005. LA-WEB 2005. Third Latin Ameri-can.Buttler, D., Liu, L., and Pu, C. (2001). A fully automatedobject extraction system for the world wide web. InProceedings of the 2001 International Conference onDistrubuted Computing Systems (ICDCS’01), pages361–370, Phoenix, Arizona.Buyukkokten, O., Garcia-Molina, H., Paepcke, A., andWinograd, T. (2000). Power browser: efficient webbrowsing for pdas. In CHI ’00: Proceedings of theSIGCHI conference on Human factors in computingsystems, pages 430–437, New York, NY, USA. ACM.Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., Bouil-lon, L., and Vanderdonckt, J. (2003). A unifying ref-erence framework for multi-target user interfaces. In-teracting With Computers Vol. 15/3, pages 289–308.Chen, Y., Ma, W.-Y., and Zhang, H.-J. (2003). Detectingweb page structure for adaptive viewing on small formfactor devices. In WWW ’03: Proceedings of the 12thinternational conference on World Wide Web, pages225–233, New York, NY, USA. ACM.Fox, A., Goldberg, I., Gribble, S. D., and Lee, D. C. (1998).Experience with top gun wingman: A proxy-basedgraphical web browser for the 3com palmpilot. In Pro-ceedings of Middleware ’98, Lake District, England,September 1998.Gaeremynck, Y., Bergman, L. D., and Lau, T. (2003). Morefor less: model recovery from visual interfaces formulti-device application design. In IUI ’03: Proceed-ings of the 8th international conference on Intelligentuser interfaces, pages 69–76, New York, NY, USA.ACM.Gerber, A., Lawley, M., Raymond, K., Steel, J., and Wood,A. (2002). Transformation: The missing link of mda.In ICGT ’02: Proceedings of the First InternationalConference on Graph Transformation, pages 90–105,London, UK. Springer-Verlag.Lucca, G. A. D. and Penta, M. D. (2005). Integrating staticand dynamic analysis to improve the comprehensionof existing web applications. In WSE ’05: Proceed-ings of the Seventh IEEE International Symposium onWeb Site Evolution, pages 87–94, Washington, DC,USA. IEEE Computer Society.Paganelli, L. and Paterno`, F. (2003). A unifying referenceframework for multi-target user interfaces. Interna-tional Journal of Software Engineering and Knowl-edge Engineering, World Scientific Publishing 13(2),pages 169–189.Paterno`, F. (2000). Model-based design of interactive appli-cations. Intelligence, 11(4):26–38.

Overview of Web Content Adaptation

https://hal-ujm.archives-ouvertes.fr/ujm-00319697

Overview of Web Content Adaptation

Abstract

Similar works

Full text

Available Versions

HAL-UJM