COURSE: WEB SYSTEM
ENGINEERING
02. Modeling Web Applications
Anca Ion
Introduction
• Models represent a solid starting point for the implementation of a
Web application taking into account static and dynamic aspects of the
content, hypertext, and presentation levels of a Web application.
• While the content model of a Web application which aims at capturing
underlying information
and application logic is similar to the
corresponding model of a non-Web application, the need to consider
the hypertext is particular to Web applications.
• The hypertext model represents all kinds of navigation possibilities
based on the content. The presentation model maps hypertext
structures to pages and their links thus represent the graphical user
interface.
• The inclusion of context information, such as user, time, location, and
device used, and the adaptation of the Web application which is
“derived” from this information, has gained increasing attention in
modeling efforts. This is undoubtedly a consequence of ubiquitous
Web applications thathave become increasingly popular.
Fundamentals
• Modeling is aimed at providing a specification of a system
to be built in a degree of detail sufficient for that system’s
implementation.
• The result of a modeling process are models representing
the relevant aspects of the system in a simplified and –
ideally – comprehensible manner.
Modeling Specifics in Web
Engineering
• The tools of the trade in Web application modeling are
basically not new, however, methods to model traditional
applications are not expressive enough for specific
characteristics of Web applications .
• For example, traditional modeling languages (such as
UML) do not provide appropriate concepts for the
specification of hyperlinks.
• This was the reason why special modeling approaches for
Web applications have been developed during the past
few years, which allow to address a Web application in
the three dimensions introduced above, i.e., levels,
aspects, and phases.
Levels
• The three levels are:
• content,
i.e., the information and application logics
underneath the Web application,
• hypertext, i.e., the structuring of the content into nodes
and links between these nodes, and
• the presentation, i.e., the user interface or page layout.
• Most methods which are used to model Web applications
follow this separation into three levels
Content Modeling
• The information provided by a Web application is one of
the most important factors for the success of that
application, not least due to the origins of the Web as an
information medium.
• Modeling the content in the sense of pure data modeling
is normally sufficient for static Web applications.
• Complex Web applications additionally require the
modeling of behavioral aspects.
Content Modeling-Objectives
• Content modeling is aimed at transferring the information
and functional requirements determined by requirements
engineering to a model.
• The hypertext character of a Web application and the
requirements of its presentation will not be considered in
this effort.
• Content modeling produces a model that comprises both
the structural aspects of the content, e.g., in the form of a
class diagram, and, depending on the type of Web
application, the behavioral aspects, e.g., in the form of
state and interaction diagrams.
Content Modeling-Concepts
• Next figure shows a very simplified UML class diagram for the reviewing
•
•
•
•
system example.
The diagram models a conference to be held on a number of topics, and
users who can sign in to the conference and submit their papers. A paper
is subject to a review by three reviewers.
Notice the invariant attached to the class “Paper”: it ensures that authors
won’t be able to review their own papers. This class diagram will later
serve as the basis to model the hypertext and the presentation for the
example application.
In addition to the class diagram, next Figure shows a state machine
diagram used to model the various states of a paper in the reviewing
system. It shows that a submitted paper will be assigned to three
reviewers for review after the submission deadline has expired. If a preset threshold value is reached, the paper is accepted; otherwise, it is
rejected.
In both cases the authors are notified via e-mail about the outcome of the
review. Finally, an accepted paper will be printed once the final version
has been submitted.
Class diagram for the reviewing system.
State machine diagram for the states of a paper.
Hypertext Modeling
• The objective of hypertext modeling – also known as navigation
modeling – is to specify the navigability through the content of a Web
application, i.e., the navigation paths available to the users.
• Hypertext modeling generates a two-fold result: First, it produces the
hypertext structure model, also known as navigation structure model
which defines the structure of the hypertext, i.e., which classes of the
content model can be visited by navigation. Second, it refines the
hypertext structure model by access elements in the form of an
access model.
• Hypertext modeling focuses on the structural aspects of the hypertext
and the access elements.
• The navigational behavior of a Web application is normally not
represented explicitly, because it provides very little additional
information for the developer.
Hypertext Modeling
• In contrast to the content level, for which ER diagrams or class
diagrams are used, specialized notations are often employed to
model the hypertext structure.
• Hypertext structure modeling is based on the concepts of
hypertext, i.e., on nodes (also called pages or documents) and
links between these nodes.
• In the reviewing system example hypertext views are required
for the following user roles:
• author, reviewer, and PC chair. Next figure
shows the
hypertext structure model for the PC chair’s view. A PC chair
can view all submitted papers. In addition, the PC chair can
access the list of accepted or rejected papers, and the reviewer
profiles. Links are modeled by directed associations with the
stereotype navigation link.
Hypertext Modeling
• Based
on the functional requirements of Web
applications, the modeling method defines the following
types of links:
• Navigation links are used to navigate between nodes, e.g., links
between papers and their authors.
• Process links point to the start node of a process, e.g., to the
beginning of the review submission.
• External links point to a node not directly belonging to the
application, e.g., to the formatting guidelines established by the
publisher of the conference proceedings, which are not directly
stored in the reviewing system.
Hypertext structure model of the PC’s view
on the reviewing system.
Presentation Modeling
• Similar to traditional Software Engineering, presentation
modeling deals with the user interface and thus with the
look and feel of a Web application.
• In contrast to traditional applications, the central element
of the presentation in Web applications is the page as a
visualization unit.
• Presentation modeling is aimed at designing the structure
and behavior of the user interface to ensure that
interaction with the Web application is simple and selfexplanatory.
Presentation Concepts
• Model elements are described on three hierarchical
levels:
• A presentation page describes a page presented to the
user as a visualization unit. It can be composed of
different presentation units.
• A presentation unit serves to group related user interface
elements, representing a logical fragment of the page. It
presents a node stemming from the hypertext model.
• A presentation element is the basic building block of the
presentation model. Presentation elements represent a
node’s set of information and can include text, images,
audio, etc.
Presentation pages of the reviewing system.
Modeling Methods
• Methods available for Web application modeling are
normally based on traditional methods, such as ER, or
they enhance an object-oriented modeling language, e.g.,
UML.
• More recent methods usually build on the strengths of
earlier methods.
Data-oriented methods
• Originate from the field of database systems; they are
mainly based on the ER model enhanced by specific
concepts for modeling on the hypertext level.
• The primary focus of these methods is the modeling of
database-driven Web applications.
• Examples of data-oriented methods include the
Relationship Management Methodology (RMM) (Isakowitz
et al. 1998), Hera (Houben et al. 2004) and the Web
Modeling Language (WebML) (Ceri et al. 2003, Brambilla
et al. 2005).
Hypertext-oriented methods
• Center on the hypertext character of Web applications;
they emerged mainly from the field of hypertext systems
(Lowe and Hall 1999).
• Representatives of this group are the Hypertext Design
Model (HDM) (Garzotto et al. 1995), which has been
extended into W2000 (Baresi et al. 2001), and HDM-lite
(Fraternali and Paolini 1998), or the Web Site Design
Method (WSDM) (De Troyer and Decruyenaere 2000,
Plessers et al. 2005).
Object-oriented methods
• Are based on either OMT (for the very early methods) or
UML.
• UML is the preferred notation when a standard language
for modeling is selected.
• This category includes the Object-Oriented Hypermedia
Design Method (OOHDM) (Schwabe and Rossi 1998),
UML-based Web Engineering (UWE) (Koch and Kraus
2002, Koch and Kraus 2003), Object-Oriented Web
Solutions (OOWS) (Pastor et al. 2005) and the ObjectOriented Hypermedia (OO-H) method (Gomez and
Cachero 2003).
Software-oriented methods
• Look at Web applications mainly from the perspective of
traditional software development, using techniques that
strongly follow classical Software Engineering.
• Good examples for this category are Web Application
Extension (WAE), or WAE2, its enhanced version
(Conallen 2003).
Tool Support
• Due to short development cycles and the complexity of
Web applications, it is recommended to use tools that
support not only the modeling itself, but also and
particularly automatic code generation and model
consistency check.
• Examples for this type of tools:
• WebRatio, Site Development Studio, VisualWADE, and
the OpenUWE Suite as.
Bibliografie
Wieland Schwinger, Nora Koch, Modeling Web
Applications,
Web Engineering- The Discipline of
Systematic Development of Web Applications, 2006.
2. Gustavo Rossi , Oscar Pastor, Daniel Schwabe , Luis Olsina,
Web Engineering: Modelling and Implementing Web
Applications,2008.
3. Example- Music portal :
http://uwe.pst.ifi.lmu.de/exampleMusicPortal.html
1.