Systematic Design of Web Applications with UML

We propose a systematic design method for Web applications which takes into account the navigation space and the presentational aspects of the application. The method is based on a UML profile for the Web domain. Starting with a use case analysis and a conceptual model of the application, we first provide guidelines for modeling the navigation space. From the navigation space model we can derive, in a subsequent step, a navigational structure model which shows how to navigate through the navigation space using access elements like indexes, guided tours, queries and menus. Finally, a static and dynamic presentation model is constructed. The different models of the design process are represented by using a Web extension of UML. The strength of the presented methodology is that most steps can be performed in a semiautomatic way, thus providing the basis for a systematic mechanism for Web design. INTRODUCTION Web engineering is a new and still evolving discipline. The process of learning how to develop large Web applications has just begun. Web applications are mostly the result of an ad hoc implementation, growing usually from small to large applications that very quickly become difficult to maintain. Some guidelines and tools are beginning to appear that assist developers of Web applications, but these current practices often fail due to inappropriate techniques, processes and methodologies. The objective is to develop a suitable method that allows high-quality Web applications to be produced through the systematic construction of high-quality models. 2 Hennicker and Koch People with different skills are involved in the process of Web systems development, such as authors, layout designers, programmers, multimedia experts and marketing specialists. The role of the user is augmented and makes it more difficult to capture the requirements of the application. The non-linearity of the hyperdocuments as well as the possibility to connect easily to other Web applications increases the complexity and risk of lost in the hyperspace.“ Web engineering has also to take into account aesthetic and cognitive aspects that general software engineering environments do not support (Lowe & Hall, 1999). Moreover, the development process tends to be more fine grained, more incremental and iterative. Maintenance is an even more significant part of the lifecycle of Web applications than in traditional systems since Web technologies and user requirements change continuously. In addition, nonfunctional requirements such as security have to be addressed by a Web development process. If we restrict ourselves to the design steps, the main differences we can observe between design of Web solutions and other software applications are the heterogeneity of the designer group, the hypertext structure of nodes and links, the need for navigational assistance, the inclusion of searching and indexing mechanisms, and the presentation of the multimedia contents and the contents, e.g., for different browsers. Thus, the design is centered around three main aspects of Web systems: the content, the navigational structure and the presentation. Treating these aspects separately during design will payoff in the maintenance phase. In this work we concentrate our attention on the analysis and design workflows of an engineering process based on the Unified Process (Jacobson, Booch & Rumbaugh, 1999) adapted for Web applications. The approach we propose consists of a method and a notation. The notation is a UML profile that defines a set of appropriate stereotypes for the Web by using the UML extension mechanism. The stereotypes are used to indicate the descriptive and restrictive properties that the modeling elements have in comparison to standard UML elements. The method consists of three steps that are performed in an iterative design process. The steps are the conceptual, navigational and presentational design. The artifacts produced as results of the application of the method are models represented by UML diagrams. They are: • a conceptual model for the content, • a navigation space model and a navigational structure model, • a static and a dynamic presentation model. The conceptual model is built by taking into account the functional requirements captured with use cases. Traditional object-oriented techniques are used to construct the conceptual model, such as finding classes, defining inheritance structures and specifying constraints. It is represented by a UML class diagram. Based on this conceptual model, the navigation space model is constructed. It is also represented as a static class diagram showing which objects can be visited through navigation. A set of guidelines is proposed for modeling the navigation space. A detailed specification of (navigation) associations, their multiplicity and role names establish the base for deriving a navigational structure model. In this step, access structures such as indexes, guided tours, queries and menus are incorporated. The navigational structure model defines the structure of nodes and links of the Web application showing how navigation is supported by the access structures. Navigational design is a critical step in the design of Web applications. Even simple applications with a non-deep hierarchical structure become complex very quickly by the 18 more pages are available in the full version of this document, which may be purchased using the "Add to Cart" button on the publisher's webpage: www.igi-global.com/chapter/systematic-design-webapplications-uml/30568