Examples - Simple (static) Website

The purpose of this system is to express the requirements for Web applications that allow navigation between static hypertext pages. This is a simple example that shows how to express the modularization of the hypertext into pages and the elementary navigation step.

Design considerations and requirements

The system will offer an initial (home) page with an introductory text, a index to a set of pages, and a link to an "Acknowledgement" page. The index will consist of a set of entries, each one composed of a name and a brief description. The Acknowledgement section will contain just text.

Each of the Web pages that can be accessed from the home page will consist of an introductory text, an index to its sections, and a fixed set of sections ("design considerations and requirements", "Solutions", "Discussion and comparison", "Contributors" and "Bibliography and references"). Each of these sections will contain text, and possibly references to external pages.

It will be possible to navigate from the home page to the rest of the pages, and from them back to the home page (inter-page navigation). Within a Web page, it will be possible to navigate from the index of its sections to each one of the these sections, and from them back to the top of the page (intra-page navigation).

No passage of information from the source to the destination page occurs.

UWE models

This example was modelled with UWE Profile - v1.9 defined in the Magic Draw 16.8 CASE tool and is available as mdzip and emf.

UWE specifies Web applications following the separation of concerns, i.e. modelling content, navigation structure and presentation separately. Content elements are specified using a plain UML class diagram, which contains classes, attributes, associations, inheritance relationships, association classes, and further UML model elements. Figure 1 shows the content model of the running example, with the classes defined for Project, Article, Section and Acknowledgement.

Figure 1. The content model of the running example

The hypertext structure is described using a navigation diagram, which consists of a set of nodes and links. UWE distinguishes among different types of nodes, such as navigation class, menu, index and query. Figure 2 shows the navigation model of the running example. It includes several navigation classes as Project, Article, sections such as SectionRequirements, one index (ArticleIndex), one menu (SectionMenu), … Navigation class Project is identified as entry point of the Web application with the tagged value {isHome}.

Figure 2. The navigation structure of the Simple Web Site

Figure 3 shows the presentation model of the running example. UWE uses a class diagram for the representation of presentation models. The container form is selected in order to provide a more intuitive representation of pages.

Figure 3. The presentation model of the Simple Web Site