Web Layout Generation (IC-SCCE 2006)


Published on

Imran Sarwar Bajwa, M. Abbas Choudhary [2006], "Automatic Web Layout Generation using Natural Language Processing Techniques", in 2nd International Conference From Scientific Computing to Computational Engineering, (IC-SCCE 2006) Athens, Greece, pp:334-340

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Layout Generation (IC-SCCE 2006)

  1. 1. 2nd International Conference “From Scientific Computing to Computational Engineering” 2nd IC-SCCE Athens, 5-8 July, 2006 © IC-SCCE AUTOMATIC WEB LAYOUT GENERATION USING NATURAL LANGUAGE PROCESSING TECHNIQUES Imran Sarwar Bajwa, Imran Siddique, M. Abbas Choudhary* Faculty of Computer and Emerging Sciences *Balochistan University of Information technology and Management Sciences, Quetta P.O.BOX- 87300, Quetta Pakistan imransbajwa@yahoo.com, imran@buitms.edu.pk , abbas@buitms.edu.pkKeywords: Web layout, intelligent systems, Human Computer Interaction, Automatic text understanding, Naturallanguage processingAbstract. Web layout designing is a difficult, complex and fuzzy problem to address. The designing of a web layoutexactly according to the user’s requirements is a real tedious issue. Adequate information, cognitive assistance and awell defined computing mechanism is required to design a well-accepted web-layout. To assist the novel users, anautomated system were required which can design required web layout intelligently and satisfy given preferencesand constraints. A web layout is basically the arrangement of the various web contents on a web page and it is highlyintegral and significant component of the structural design of the website. Often the websites from variousperspectives have their peculiar web layouts and designs. The designed system helps to automatically generate someproposed web. User only provides his particular business related requirements in the form of simple English text.The designed system bases on a rule based algorithm which reads the user requirements, understand the scenario,extracts the required information and then at the last automatically designs some sample web layouts. User can usethem with proper adjustments. This automated system can really save the time of the user and web designer for laterweb designing process.1. INTRODUCTIONThere are many fields of software engineering and purposely web designing is one of the important fields which hasabsolutely revolutionized and grasped the way of communication, information interchange and business styles. Todesign a successful and excellent website is real technical task. Web designing field comprises various aspects. Aweb designer has to concentrate on various aspects as the web contents, web technology, web visuals and webeconomics [4]. Web contents related to the actual data, facts and figures which are actually placed on a web page.These web contents provide the building blocks for the complete designing of a building that is typically a website.Web technology provides the actual functionality of a website in the variety of forms, reports, dynamic web contentgeneration and others [1]. The core functionality of a website depends upon the particular web technology that hasbeen comprised for its designing purpose. Web visuals are primarily related to the outlook, shape, looks and feels ofa website. This is the feature which principally attracts the viewers and influences them to surf on that particularwebsite. The web visuals may consist of static images, animated images, audio and video streams for batter and long-lasting impact of the website. In the last, the web economics contributes the economics rectifications where required[3]. The web economics helps the web surfers to perform business transactions through web.The goals and requirements of the user are major persuading parameters that specifically influence the variousaspects of website designing. This type of designing can be named as Requirement Specific Designing (RSD) [3].All the four web features discussed earlier are significant at their own. But a web designer concentrates on variousaspects in various scenarios. As during the design of a personal homepage, web economics considerations are notrequired [8]. On the other hand, a manufacturing company website may not require the highly visual considerations.As the major issue is to present the company’s products and manifest the all provided services by the company in acomprehensive way.A web layout is basically the arrangement of the various web contents on a web page and it is highly integral andsignificant component of the structural design of the website [7]. Often the websites from various perspectives havetheir peculiar web layouts and designs. As business websites use more user forms and reports as compared to
  2. 2. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudharyinformative website which ahs more menus and more graphics [5]. The introductory websites as of educationalinstitutes and universities are more regular and the commercial and showbiz websites rather more irregular andinformal. Showbiz and Personal web pages have more animated pictures, audio and video contents than any otherwebsite. On behalf of this differentiation each website has own set of requirements for design and development.2. PROBLEM STATEMENTDesigning layouts for websites rather commercial or non-commercial is the most effective and important part of webdesigning process. Web designing process is a difficult process due to various factors as developer’s inexperience,poorly defined process and unrealistic design understanding. The un-effective web-layout can be the major cause offailure of a website. A website can be really in-effective and un-efficient if a piece of data required by a user ispresent on a website but user is unable to search his required information from that particular website.3. PROBLEM’S SOLUTIONThe designed system “Automatic Web layout Generation using Natural Language Processing Techniques” helps toautomatically generate some proposed web layouts and forms according to the user’s given requirement andguidelines. User only provides his particular business related requirements in the form of simple English text. Thedesigned system actually bases on a rule based algorithm which reads the user requirements, understand the scenario,extracts the required information and then at the last automatically designs some sample web layouts. User can usethem with proper adjustments. This automated system can really save the time of the user and web designer for laterweb designing process.4. USEFUL WEB DESIGNINGIn early web designing days, websites were small, simple and static. Information was less and websites weretypically specific, hence the design was easy and straightforward. Now a days data as aspects of a website havegrown up to an explosive size due to advancements in technologies and requirements [5]. A website can besuccessful and excellent on the basis of various factors as its usefulness, correctness, usability and its pleasantappearance. More or less all these features are directly related to the structural design of a website. Successful andeffective websites are useful to their users. A website is useful if she occupies the features of utility & usability. • Utility describes the website’s functionality that a user hopefully meets his requirements and needs easily • Usability describes the ability to manipulate the site’s features in order to accomplish a particular goal. • Correctness is also a noteworthy issue. The user should find precise and related information on a particular web page. • Pleasant appearance of a website is main key of success or failure for a particular website. More pleasant the website is healthy chances are there for its success and usefulness.These entire four features ultimately relate to the layout design of a website and more or less constitute toe thesuccess factor of a website. A website may be failed due to its complex and unrealistic design [6]. Unrealistic designmeans that the functions provided by the websites are so confusing that a website is not functionally useful. Usablesites are easy to learn, efficient and help the user to easily and satisfactorily accomplish their task in error freemanner [9 Layout design is difficult due to its vast scope as it involves tangible and intangible factors with such highdegree of vitality and subjectivity.5. RELATED WORKWeb layout generation is not an old field of work. Work from last few years has been started in this really vital area.The major area of interest is visual interface layout [8]. The research in visual interface layout design came intobeing with the advent of new visual applications as web layout and graphical user interface for computerapplications. From so many examples some are UIDE [13], ADDI [14]. Various methods and techniques have beendefined to address the problem of automatic web-layout generation. These interface applications typically provide thedesign process and also support incorporation of domain-specific preferences [3]. These applications provide thehalf functionality as the course of mapping the domain objects and their properties into corresponding visualproperties in the layout design is left for the user. Some applications also tend to use the visual knowledge base tosolve this problem [10].
  3. 3. Imran Sarwar Bajwa, Imran Siddique and M. Abbas ChoudharyThese defined models can assist layout designers in addressing the dynamics of the problem in an efficient manner.The whole related work in this area has been done in the perspective of facilitating the experts. No work has beendone for the novels. A person who is not expert can not use these intimated software applications.6. USED METHODOLOGYThe designed system works in two halves. In first half the user’s given input text is read by the system and afterproper understanding and analysis the necessary information is extracted. This information is further used to draw thesample web layouts. In second half if user also wants to draw the user forms automatically, those can also bedesigned by just providing the information about the forms as how many text boxes are required what are their namesand other properties.6.1. Text UnderstandingThis is the major phase of automatically generating the web layouts. The user writes his requirements andpreferences in simple English text. For example a user gives following preferences to draw a sample web-layout.“Draw level one module on the top width is 760, height is 140 and background image is ‘back.jpg’. In following rowthere is a two level module whose width is 160 and height is 450. In parallel there are two more two level moduleswith width 300 and height is 450. Draw a three level module whose width is 760 and height is 80.”Designed system reads such type of input extracts the information after appropriate analysis. The extractedinformation is as following One_Level_module.height = 760 One_Level _module.width = 140 Two_Level _module.width = 160 Two_Level _module.height = 450 Two_Level _module.width = 300 Two_Level _module.height = 450 Two_Level _module.width = 300 Two_Level _module.height = 450 Three_Level _module.width = 760 Three_Level _module.height = 80The modules are divided into levels or layers. These levels are defined by the user himself.6.2. HTML Code GenerationAfter extracting this type of information the designed system has a vigorous ability of generating related HTML codeon the base of this information. On the behalf of extracted information nested tables technique is used. For thisparticular example following code is generated by the system. <html> <body> <center> <table width=760 border=1> <tr level=1> <! 1st layer > <td width=760 height=140 module=1> Text </td> </tr> <tr level=2 > <! 2nd layer > <table width=760 border=2>
  4. 4. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary <tr level =1> <td width=140 height=450 module=1> Text </td> <td width=300 height=450 module=1> Text </td> <td width=300 height=450 module=1> Text </td> </tr> </table> <tr width=760 height=140> <! 3rd layer > <td> Text</td> </tr> </table> </body> </html> Code -1: Automated HTML generated codeThis HTML generated code is stored in a new file. The designed system is adequately flexible in analyzing the giventext as in the given example the levels and modules are define horizontally (first layer and then its particularmodules) and the analysis was successful. Designed system also has vigorous ability to analyze the text where layersand modules are defined vertically (layers are defined first and then modules are defined with reference of thedefined layers).6.3. Web Layout GenerationAfter compound analysis and generation of HTML code for web-layout the actual web page is generated by writingthe generate code into new file with .html extension. Following is the example of a generated sample web pagelayout. Figure 1.0: Automatically generated sample web-layout from user given preferences7. ARCHITECTURE OF DESIGNED SYSTEMAutomatic web layout generation system using natural language processing techniques is adequately capable ofunderstanding the provided input text [2] and generates the required web-layout according to the providedinformation. The designed system generates the web-layout in five distinct phases: Reading User Preferences,Analyzing User Input, Information Extraction, HTML Code generation and finally producing the actual HTML filecontaining web-layout. The intended system based on the structural design shown in the following figure 2.0. Layout Sample Web layout page
  5. 5. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary Web Layout Generation Creating a new HTML file HTML Code Generation Generating HTML tags to draw tables Information Extraction Extracting HTML tags information Analyzing User Input Text Understanding with syntax Analysis Reading User Preferences User given input text Input in Simple English Figure 2.0: Structure of Automatic Web Layout Generation using Natural Language Processing Techniques7.1 Reading User PreferencesThis is the first phase and it helps to acquire input text preference from the user. User provides his requirements infrom of paragraphs of the text. This module reads the input text in the form characters and generates the words byconcatenating those input characters. This module is the implementation of the lexical phase. Lexicons and tokensare generated in this module.7.2 Analyzing User InputThis phase reads the input provided by the module 1 in from of words or tokens. These words are categorized intovarious classes as verbs, helping verbs, nouns, pronouns, adjectives, prepositions, conjunctions, etc for the variousintentions as understanding and further processing of the text.7.3 Information ExtractionThis phase particularly extracts different objects as the levels and modules of the web-layout and the layouts aredetermined by the <tr> tag and module are represented by <td> tag. Other respective attributes are extracted on thebasses of the input provided by the preceding module.7.4 HTML Code GenerationAfter extracting the information required to draw the particular HTML tags as <table>, <tr>, <td> tags, the actualcode is generated by this phase which actually divides the whole web-page into component boxes and these boxesare further used to add contest like text and images.7.5 Web Layout GenerationThis is the final phase which uses the extracted information from the previous phase to actually generate a newHTML file. The HTML generated code in previous phase is embedded in this file. In response, the output is providedto the user according to his requirements.
  6. 6. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary8. CONCLUSIONThe designed system “Automatic Web Layout Generation using Natural Language Processing Techniques” wasstarted with the aim to not only support the experts and save their time but also provide a very simple interface tonovel users who are not highly skilled in designing HTML pages and are not skillful in using complex web designingsoftware applications. The user provides his requirements and preferences using simple English text and the designedapplication performs the compound analysis of the given text after reading it. Desired HTML code is generated onthe basis of the extracted information. A new HTML file is generated which contains the newly generated weblayout. The used approach is based on a newly designed rule based framework which is highly capable ofunderstanding the user given text and performs the desired task.9. FUTURE WORKThe designed system can be further improved in terms of its functionality as existing design is only capable ofdesigning the web-layout. There are so many other tasks still to perform as adding contents (text, images, etc) in thisweb layout automatically. Furthermore, user forms are more common these days, more work done is required forautomatic generation of these user forms.10. REFERENCES[1] Nikiforos Karamanis and Hisar Maruli Manurung, 2002, Stochastic text structuring using the principle of continuity, Proceedings of the Second International Conference on Natural Language Generation (INLG-2002), Ramapo Mountains, NY[2] Imran S. Bajwa, M. Asif Naeem, Riaz-Ul-Amin, M A. Choudhary, 2006 , Speech Language Processing Interface for Object-Oriented Application Design using a Rule-based Framework, 4th International Conference on Computer Applications 2006 Rangoon, Myanmar[3] A.R. Ahmad, O. Basir, K. Hassanein, “Intelligent Expert System for Decision Support in the Layout Design”, Working Paper, Systems Design Engineering, University of Waterloo, 2004.[4] – Imran Sarwar Bajwa, M. Abbas Choudhary (2006), “Speech Language context understanding using a RuleBased Framework”, International Conference on Intelligent Systems and Knowledge Engineering, Shanghai, China[5] Malaisé Véronique, Zweigenbaum Pierre, Bachimont Bruno, Mining Defining Contexts to Help Structuring Differential Ontologies Terminology, 11:1, 2005[6] Drouin Patrick. "Detection of Domain Specific Terminology Using Corpora Comparison" Proceedings of the Fourth International Conference on Language Resources and Evaluation (LREC), Lisbon, Portugal (2004)[7] Gómez-Pérez Asunción, Fernández-López Mariano, Corcho Oscar, Ontological Engineering: with examples from the areas of Knowledge Management, e-Commerce and the Semantic Web Springer (2004)[8] Khoo Christopher, Chan Syin, Niu Yun, “The Many Facets of the Cause-Effect Relation”, The Semantics of Relationships. Kluwer Academic Press. (2002). p. 51-70[9] A. R. Ahmad, O.Basir, K.Hassanein, “Fuzzy Inferencing in the Web Page Layout Design”, Proc. of the 1st Workshop on Web Services: Modeling, Architec. & Infrastructure, France, pp. 33-41, April 2003[10] E. L. Blair, S. Miller, “An interactive approach to facilities design using microcomputers”, Journal of Computers in Industrial Engineering, Vol. 9, pp. 91-102, 1985[11] A.R. Ahmad, O. Basir, K. Hassanein, “Efficient Placement Heuristics for Ge netic Algorithm based Layout Optimization”, Working Paper, Systems Design Engineering, University of Waterloo, 2003[12] K.A. Dowsland, S. Vaid, W.B. Dowsland, “An algorithm for polygon placement using a bottom-left strategy”, Euro J of Op Res., Vol. 141 (Special issue on cutting and packing), pp. 371-381, 2002[13] Henderson, James Merlo, Paola Petroff, Ivan Schneider, Gerold (2002): "Using syntactic analysis to increase efficiency in visualising text collections". In: Tseng, Shu-Chuan (ed.): Proceedings of the 19th International Conference on Computational Linguistics (COLING 2002). Taipei, Taiwan: 335-341.[14] J. Foley, W. Kim, S. Kovacevic, and K. Murray, “UIDE-An Intelligent User Interface Design Environment”, In J W Sullivan and S.W. Taylor (Eds.), Intelligent User Interface, ACM, NY, 1991
  7. 7. Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary[15] M.G. El-Said, G. Fischer, S.A. Gamael-Din, M. Zaki, “ADDI: A tool for automating the design of visual interfaces”, Computers & Graphics, Vol 21, No. 1, pp. 79-87, 1997[16] S. Kim, H. Alani,W. Hall, P. Lewis, D. Millard, N. Shadbolt, and M. Weal. 2002. Artequakt: Generating tailored biographies with automatically annotated fragments from the web. In Proc. of the Semantic Authoring, Annotation and Knowledge Markup Workshop in the 15th European Conf. on Artificial Intelligence