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 [email protected], [email protected] , [email protected] Keywords: Web layout, intelligent systems, Human Computer Interaction, Automatic text understanding, Natural language processing Abstract. Web layout designing is a difficult, complex and fuzzy problem to address. The designing of a web layout exactly according to the user’s requirements is a real tedious issue. Adequate information, cognitive assistance and a well defined computing mechanism is required to design a well-accepted web-layout. To assist the novel users, an automated system were required which can design required web layout intelligently and satisfy given preferences and constraints. A web layout is basically the arrangement of the various web contents on a web page and it is highly integral and significant component of the structural design of the website. Often the websites from various perspectives have their peculiar web layouts and designs. The designed system helps to automatically generate some proposed 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 use them with proper adjustments. This automated system can really save the time of the user and web designer for later web designing process. 1. INTRODUCTION There are many fields of software engineering and purposely web designing is one of the important fields which has absolutely revolutionized and grasped the way of communication, information interchange and business styles. To design a successful and excellent website is real technical task. Web designing field comprises various aspects. A web designer has to concentrate on various aspects as the web contents, web technology, web visuals and web economics [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 content generation and others [1]. The core functionality of a website depends upon the particular web technology that has been comprised for its designing purpose. Web visuals are primarily related to the outlook, shape, looks and feels of a website. This is the feature which principally attracts the viewers and influences them to surf on that particular website. The web visuals may consist of static images, animated images, audio and video streams for batter and longlasting 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 various aspects 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 various aspects in various scenarios. As during the design of a personal homepage, web economics considerations are not required [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 a comprehensive way. A web layout is basically the arrangement of the various web contents on a web page and it is highly integral and significant component of the structural design of the website [7]. Often the websites from various perspectives have their peculiar web layouts and designs. As business websites use more user forms and reports as compared to
Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
informative website which ahs more menus and more graphics [5]. The introductory websites as of educational institutes and universities are more regular and the commercial and showbiz websites rather more irregular and informal. Showbiz and Personal web pages have more animated pictures, audio and video contents than any other website. On behalf of this differentiation each website has own set of requirements for design and development. 2. PROBLEM STATEMENT Designing layouts for websites rather commercial or non-commercial is the most effective and important part of web designing 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 of failure of a website. A website can be really in-effective and un-efficient if a piece of data required by a user is present on a website but user is unable to search his required information from that particular website. 3. PROBLEM’S SOLUTION The designed system “Automatic Web layout Generation using Natural Language Processing Techniques” helps to automatically generate some proposed web layouts and forms according to the user’s given requirement and guidelines. User only provides his particular business related requirements in the form of simple English text. The designed 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 use them with proper adjustments. This automated system can really save the time of the user and web designer for later web designing process. 4. USEFUL WEB DESIGNING In early web designing days, websites were small, simple and static. Information was less and websites were typically specific, hence the design was easy and straightforward. Now a days data as aspects of a website have grown up to an explosive size due to advancements in technologies and requirements [5]. A website can be successful and excellent on the basis of various factors as its usefulness, correctness, usability and its pleasant appearance. More or less all these features are directly related to the structural design of a website. Successful and effective 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 the success factor of a website. A website may be failed due to its complex and unrealistic design [6]. Unrealistic design means that the functions provided by the websites are so confusing that a website is not functionally useful. Usable sites are easy to learn, efficient and help the user to easily and satisfactorily accomplish their task in error free manner [9 Layout design is difficult due to its vast scope as it involves tangible and intangible factors with such high degree of vitality and subjectivity. 5. RELATED WORK Web 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 into being with the advent of new visual applications as web layout and graphical user interface for computer applications. From so many examples some are UIDE [13], ADDI [14]. Various methods and techniques have been defined to address the problem of automatic web-layout generation. These interface applications typically provide the design process and also support incorporation of domain-specific preferences [3]. These applications provide the half functionality as the course of mapping the domain objects and their properties into corresponding visual properties in the layout design is left for the user. Some applications also tend to use the visual knowledge base to solve this problem [10].
Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
These 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 been done for the novels. A person who is not expert can not use these intimated software applications. 6. USED METHODOLOGY The designed system works in two halves. In first half the user’s given input text is read by the system and after proper understanding and analysis the necessary information is extracted. This information is further used to draw the sample web layouts. In second half if user also wants to draw the user forms automatically, those can also be designed by just providing the information about the forms as how many text boxes are required what are their names and other properties. 6.1. Text Understanding This is the major phase of automatically generating the web layouts. The user writes his requirements and preferences 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 row there is a two level module whose width is 160 and height is 450. In parallel there are two more two level modules with 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 extracted information 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 = 80 The modules are divided into levels or layers. These levels are defined by the user himself. 6.2. HTML Code Generation After extracting this type of information the designed system has a vigorous ability of generating related HTML code on the base of this information. On the behalf of extracted information nested tables technique is used. For this particular example following code is generated by the system.
Text
Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
Text
Text
Text
Text
Code -1: Automated HTML generated code This HTML generated code is stored in a new file. The designed system is adequately flexible in analyzing the given text as in the given example the levels and modules are define horizontally (first layer and then its particular modules) and the analysis was successful. Designed system also has vigorous ability to analyze the text where layers and modules are defined vertically (layers are defined first and then modules are defined with reference of the defined layers). 6.3. Web Layout Generation After compound analysis and generation of HTML code for web-layout the actual web page is generated by writing the generate code into new file with .html extension. Following is the example of a generated sample web page layout.
Figure 1.0: Automatically generated sample web-layout from user given preferences 7. ARCHITECTURE OF DESIGNED SYSTEM Automatic web layout generation system using natural language processing techniques is adequately capable of understanding the provided input text [2] and generates the required web-layout according to the provided information. 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 file containing web-layout. The intended system based on the structural design shown in the following figure 2.0.
Layout
Sample Web layout page
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 Input
User given input text in Simple English
Figure 2.0: Structure of Automatic Web Layout Generation using Natural Language Processing Techniques 7.1 Reading User Preferences This is the first phase and it helps to acquire input text preference from the user. User provides his requirements in from of paragraphs of the text. This module reads the input text in the form characters and generates the words by concatenating those input characters. This module is the implementation of the lexical phase. Lexicons and tokens are generated in this module. 7.2 Analyzing User Input This phase reads the input provided by the module 1 in from of words or tokens. These words are categorized into various classes as verbs, helping verbs, nouns, pronouns, adjectives, prepositions, conjunctions, etc for the various intentions as understanding and further processing of the text. 7.3 Information Extraction This phase particularly extracts different objects as the levels and modules of the web-layout and the layouts are determined by the
tag and module are represented by
tag. Other respective attributes are extracted on the basses of the input provided by the preceding module. 7.4 HTML Code Generation After extracting the information required to draw the particular HTML tags as
,
,
tags, the actual code is generated by this phase which actually divides the whole web-page into component boxes and these boxes are further used to add contest like text and images. 7.5 Web Layout Generation This is the final phase which uses the extracted information from the previous phase to actually generate a new HTML file. The HTML generated code in previous phase is embedded in this file. In response, the output is provided to the user according to his requirements.
Imran Sarwar Bajwa, Imran Siddique and M. Abbas Choudhary
8. CONCLUSION The designed system “Automatic Web Layout Generation using Natural Language Processing Techniques” was started with the aim to not only support the experts and save their time but also provide a very simple interface to novel users who are not highly skilled in designing HTML pages and are not skillful in using complex web designing software applications. The user provides his requirements and preferences using simple English text and the designed application performs the compound analysis of the given text after reading it. Desired HTML code is generated on the basis of the extracted information. A new HTML file is generated which contains the newly generated web layout. The used approach is based on a newly designed rule based framework which is highly capable of understanding the user given text and performs the desired task. 9. FUTURE WORK The designed system can be further improved in terms of its functionality as existing design is only capable of designing the web-layout. There are so many other tasks still to perform as adding contents (text, images, etc) in this web layout automatically. Furthermore, user forms are more common these days, more work done is required for automatic 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 Rule Based 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
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
