WEB

ENGINEERING
Part II
Discussed Last Session:

What is Web Engineering?

Web System Team.
• Graphic Designers (look and feel)
• People with library science background
Database designers (optimum way to store the
information that is to be accessed through the
web system)
• programmers (develop the code)
• network security experts (security aspects)
• computer experts (hardware architecture based
on performance requirements)
• Web architects (overall architecture for the Web
system that shows how individual parts are put
together to create the web system), and;
• people who has the knowledge to plan a web
development project and manage it
The primary causes of Web-systems failures are
a flawed design and development process, and
poor management of development efforts.
The way we address these concerns is critical to
realizing the Web’s full potential.
The American Heritage® Dictionary of the
English Language, (Third Edition) defines
engineering as:
The application of scientific and mathematical
principles to practical ends such as the design,
manufacture, and operation of efficient and
economical structures, machines, processes,
and systems.
The researchers who first proposed the need for an
Engineering approach for developing large complex
web systems defined Web Engineering as follows.

Web Engineering deals with the establishment

and use of sound scientific, engineering and
management principles, disciplined and
systematic approaches to the successful
development, deployment and maintenance of high
quality Web-based systems and applications.
 Do we need an Engineering
Approach to developing large
complex Web Systems?
Development of large-scale software in the early
70s:
Lack of suitable process models and
application architectures gave rise to a software
crisis.
Web Engineering is very similar to Software
Engineering?!
There are many similarities between Software
Engineering and Web Engineering; but we also
have to acknowledge the differences.
The two key attributes of Web systems that distinguish their
development from traditional software development are:
• growth of requirements
• continual change of information content.
scalable and maintainable: These features can’t be added
later.
What knowledge constitute Web
Engineering?
Web System Development Maturity Model
WEB SYSTEM DESIGN
Building and deploying a Web system is a multi-step
process, in which many steps influence one another
and are iterative.
•Most Web systems are bound to continuously evolve
and change, to meet the changing/growing needs of
the organization.
•Development requires knowledge and expertise from
many different disciplines.
We need a sound process for building Web
systems that:
• Assists us in capturing the changing requirements and
managing the complexity of the development process,
• Assists in the integration of the know-how from various
disciplines,
• Facilitates the communication among various members
involved in the development process – the development
team, stakeholders and end-users -, and
• Supports the continuous evolution and maintenance and
management of the content.
•Deployment of Web systems in their intended
operational environment.
•One can develop a technically best Web site, but if
it is not properly used for various reasons, it is a
major failure.

•Web system have a front end and a back end.

•Front end is for the public to access
information about the organization.
•Back end is for employees of the organization
to manage and up-date the information in the
Web system.
• Web information or electronic-business (e-business)
system in an organization causes a paradigm shift and
can significantly impact on the work and the way various
business processes are carried out.
•Internal users of the system must be retrained to
enhance their understanding and use of Web and
web-related technologies and to successfully cope
with the transition.
•Other factors, including reengineering of business
processes, organizational policy, changes to recruitment
and human resources policies in an organization also
contribute to successful deployment and use of the Web
systems.
 Seven Essential Steps for Successful Web System
Development

1. Understanding the overall function and operational

environment of the systems including the
corporate/business objectives and requirements and clearly
identifying the stakeholders.

2. Identifying and specifying both technical and non-

technical requirements of the stakeholders and the
overall system.

3. Developing an appropriate architecture for the Web-

based system that meets those requirements.
 Seven Essential Steps for Successful Web System
Development (…cont.)

4. Satisfactorily addressing the non-technical issues, such

as revised/updated business processes, organizational and
management policies, human resources development, and
legal, cultural and social aspects.

5. Identifying sub-projects or sub-processes to implement

the architecture.

6. Developing and implementing the sub-projects.

7. Incorporating appropriate and effective mechanisms to

manage the evolution and change/maintenance.
.
WEB PROJECT PLANNING
AND MANAGEMENT
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Context Analysis

The first essential step in developing a Web system

is context analysis.

• Understand the major objectives and corporate

requirements of the system, gather information
about the operational/application environment and
identify the stakeholders.
• Based on these needs, decide on both the
technical and non-technical requirements
• Broader requirements (such as what the
system should do), and,
• Specific requirements (such as security,
access control and performance).
Within the broader context:

• Developers have to understand the specific needs associated

with scalability, maintainability, availability and
performance of the system.

Example:

• If the information content and the functions of the system are

going to evolve considerably: It must be scalable.

• If the information on the Web site changes frequently: Must

facilitate easy maintainability of information.

• If it is critical to ensure very high availability and catering for

very high peak or uncertain demand: Web site to run on
multiple servers with load balancing and other performance
enhancement mechanisms.
The features such as design for scalability,
maintainability and performance need to be built
into the initial system architecture, as it is
impossible or very hard to add these features if
the initial architecture does not support it.
Example:

An E-business Web site that gives product information.

Information about a product (color, price and availability)
may appear on many different pages and this information
can change frequently.

If this Web site was designed as static HTML (hypertext

mark-up language) pages, then every time the product
information changes one has to change each and every
page that contains this information.

If the information about a product is stored in a central

database and the various web pages that contain this
information is dynamically created by extracting the relevant
information from this database, then we only need to
change information in one place to keep the Web site
current.
Context Analysis:

• Identify the broader requirements such as purpose of

the Web site as well as specific requirements such as
maintainability, scalability, performance, quality control
mechanism for information that will be placed on the
Web site and security.

• Provides us with sufficient information to decide on the

broader architecture or Product Model of the system.
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Product Model

• Shows how various components are linked

together to meet those requirements.
• Should include the overall
1. physical system architecture (the network and
the various servers - web servers, application
servers, database servers, etc),
2. application architecture (a map of the various
information modules and the functions
available) and the
3. software architecture (various software and
database modules required to implement the
application architecture).
Appropriate system architecture is very
important especially if performance and
security of the Web system are critical
factors.
Example:

Web site for 1998 Olympic Winter Games in Nagano,

Japan meeting the performance requirement was a
critical factor.

Hence, a network and server architecture that includes

redundant hardware, load balancing, Web server
acceleration, and efficient management of dynamic
data was designed and implemented.

If the performance and security is not a critical issue,

one can use a standard server architecture connected
to the Internet, without the need for special design
effort.
The application architecture, also called as product
model, shows a map of various information and
functional modules.

Examples of functional modules are a login page,

shopping trolley, etc. that will capture user input and
process it.
Application architecture of the ABC Internet College
Personalized Tutoring system
Software Architecture
 Means of Fulfilling the Requirements

Requirement Means of Fulfillment

Corporate look and feel that Create pages using templates

can be changed
Ensure information Information should be stored in a single place (in
consistency a database or an XML
file) without duplication of information.
Need for information update Provide a back-end system to edit information in
and maintenance data repository

Ability to easily add new Navigation links need to be dynamically

pages generated
Decentralized administration Provide a multiuser login system to access back-
end. Needs a user management system, and
ability to assign specific functions and data sets
to content managers
Quality control mechanism for Web robot module and metadata standard for
information Web pages.
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Process Model

The implementation of the system based on the product model,

calls for a set of activities, which include a detailed analysis of
requirements, design, testing and deployment. We also need to
carry out a set of activities to address the non-technical issues
identified in context analysis.

A process model specifies a set of sub-projects or sub-processes

that need to be carried out to develop and implement the overall
system.

Example: the development of the front-end web site

and the back-end web site can be considered as two sub projects.
This enables parallel development reducing the over all
development time.
In a large, complex Web application development, the persons
who develop the content generally come from journalism,
library science, marketing or public relations background.

The people who develop the screen layout come from a visual
arts and graphic design background. The software developers
come from computing, software and IT background.

Thus it is important to make sure that the various

processes enable these three groups to work and
communicate effectively.
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Sub Project Planning

The next phase is to develop a project plan for each of the sub
projects identified in the process model. Project plans should list
the tasks that need to be done, a timeline and the resource
requirements. Based on the project plan, development activities
can take place.

Know the following:

1] tasks required to carry out; 2] people with what type of skills
are required to carry out these tasks; and, 3] the time estimates.

Often the development of front-end Web site and the back-end

web site are done as two sub projects. The coupling of the front-
end web site and the back-end web site will be via the data
repository. In order to properly plan the development of these
Web sites one should know how to develop Web sites.
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Web Site Development

Most Web site development consists of designing the web

site and constructing the web site to deliver the content
and the required functionality.

Early Web development activities were mainly focused on

development of content, its presentation and navigation.

Now, with the growing number of Web based business

applications, there is a need to provide customized
information to users and also to get various information
from the users and process them.
Experts have developed and refined a two-stage
approach to web site development; designing the
web site and construction of the web site (Figure 5).

This approach decouples the creative design phase

often done by Graphic designers from construction
phase which is often done by software developers. As
often, content developers and software developers
come from different backgrounds, this de-coupling is
very advantageous.
Figure 5:Two-stage approach to Design and
Construction of Web Sites
Web Site Design

The web site design process starts with a detailed analysis of

requirements and development of appropriate specification.

A prototype is constructed from the design which usually

contains a set of sample pages that can be used for
evaluating the screen layout and navigation among different
pages. Based on the feedback, either the design or the
specifications can get changed.

One can iterate through this process until stakeholders are

happy with the screen layout and the navigation structure.

The creative part of this process is the design. Figure 6 shows

various inputs to the design process and the typical outcomes
from this process.
Figure 6: Web Site Design Process
Once we develop a structure for organizing the
information, we have to decide on navigation
mechanisms that need to be provided to access this
content. Access to information can be provided by
hyperlinks or search facility.
Based on the information structure, we need to
develop sample Web pages to display each type of
information.

Example: If the application is a product catalogue, we

need to develop the Homepage and a sample page for
each product type. These sample pages will act as
templates for creating other product pages which will be
done by application software in response to a user request
when web site is operational.

We can use tools such as Dreamweaver or any CMS for

developing these sample pages and the prototype Web
site.

By developing a prototype web site based on sample

pages we can test the proposed navigation mechanisms
for its ease of use and other features.
If new content needs to be developed, it is better to come
up with guidelines to assist the content development
process as part of the design process.

If content is drawn from a legacy system we need to develop a

process to convert the legacy information to the required
structure and format.

The output of the design process and the original

specifications that were developed at the start of the Web
site development process will form the input to the next
stage – the web site construction process.
Web Site Construction

Now, almost every Web server provides a suitable interface to

communicate and to make use of external software modules.
Common Gateway Interface (CGI) was one of the early
standards that was adopted for communication between the
web server and the external software modules.

Today, there are various implementations of this concept in the

form of Application Program Interfaces (API) such as ISAPI
used by the Microsoft IIS Web server.
Except for simple systems that are based on HTML
pages, every other system makes use of external
software modules to provide the interactivity and
customization of information provided to the user.

A simple example is processing the information a user

submits via a form. These software modules specifically
developed for these applications are known as
application software.
Use of application software enables us to develop
maintainable and scalable Web sites, in addition to
making the Web site interactive.

The basic principle of building a maintainable web site is

not to store data that is going to change with time at
multiple locations.
We can further enhance the maintainability by developing a
back-end Web site that will enable authorized people (based on
a user ID and a password) to make these changes through a set
of forms.

This type of approach will enable us to have a decentralized

maintenance approach where different people can have
responsibility for maintaining different information on the Web
Site.
To facilitate scalability, a Web system needs to be built
using a component- based architecture and the
navigational links and buttons need to be dynamically
created.

Use of component-based architecture enables us to

easily add new functions or information modules, by
simply adding these functions as new components.
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Web Site Maintenance

Once the Web site is developed and commissioned, we enter

then into the maintenance phase. There are three major
types of maintenance:

• Content maintenance
• Software maintenance, and
• Hardware and network maintenance.

The decision on how the content will be maintained is taken

at the context analysis stage. Thus what is required at the
maintenance phase is to implement the appropriate content
maintenance procedures.
The software maintenance can be sub-divided into four
categories: corrective, preventive, perfective and adaptive
maintenance.

Often, when the system is in operation, various bugs in

software can surface. Thus we need to implement a set of
procedures to correct these bugs and document the
changes that were made. This is known as corrective
maintenance.

Also, we invariably come across errors or omissions in

software, especially in the business logic before a problem
occurs. Rectifying these is preventive maintenance.

Though the system may be functioning flawlessly, we may

come up with a better way to implement a function, and the
process of carrying out this modification is known as
perfective maintenance.
Also, from time to time, the requirements can change
marginally such as how the commission or tax is calculated.
Thus we need to carry out adaptive maintenance to adapt the
system for new business rules.

It is useful to break the software maintenance activities into

these four categories, as this will enable us to prioritize the
activities.
We also need to periodically maintain the hardware and
the network, and fix the failures as and when they
surface.
 Context
Analysis

Quality Control & Assurance

Product Process
Model Model

Project Management

Documentation
Sub Project Plans

Web Site / Environment

Development

Web Site / Environment

Maintenance

Figure 2: Development Process for Web Systems

Project Management, Documentation
and, Quality Control and Assurance

These functions are spread throughout the lifecycle of the

system.

There are well-established methodologies and

techniques to perform these tasks. Proven techniques
used in systems engineering can be used with minor
changes for development of large and complex web sites.
PROSPECTS OF WEB ENGINEERING

As we improve our ability to build Web systems, the

systems we need to build are likely to get more
complex.

The quality requirements and features of these systems

may also change, with more emphasis on performance,
correctness and availability of Web systems, as we will
increasingly dependent on Web systems in a number of
critical applications, where the consequences and
impact of errors and failures could be serious.
Further, as systems become larger, a large team of people
with different types and levels of skills would be required,
necessitating distributed collaborative development.

As we try to exploit some of the yet unrealized potentials of

the Internet and Web, there will be many new challenges
and problems, and hopefully new approaches and
directions would be developed to meet the challenges and
solve the problems we may face on our mission to build a
better cyberspace for us.
Like the Web, which is dynamic and open, Web
engineering needs to evolve rapidly, adapting to the
changes and responding to the newer needs.

Successfully convincing developers of Web applications

about the need for and the benefits of Web engineering
approaches, which if implemented thoughtfully, will go a
long way to reduce the complexity and lead to
successful development.
Web Engineering
Tools
Web Engineering Tools

Web Servers
 APACHE: http://www.apache.org
Microsoft IIS: http://www.microsoft.com

Image Maps
MapEdit: http://www.boutell.com/mapedit/
MapThis:
http://www.abdn.ac.uk/tools/ibmpc/mapthis/
Web Engineering Tools
Menu/Button/Effects
• Magic Buttons: http://www.pagetutor.com/
• JavaScript Maker: http://www.byte-sizesoftware.com/jsc.htm
• Applet Glide Navigation Pro:
http://www.usingit.com/products/java/applet/agnpro/index.
html
• Apycom Menu Applets: http://www.apycom.com/apmenu/

Java Tools
• Javalyzer Java Disassembler:
http://www.bold.net.au/~ianduff/
Web Engineering Tools
Graphics
• Ulead JavaRazor interactive graphics:
http://www.ulead.com/jr/runme.htm
• CrossArtist dynamic digital content:
http://www.crossartist.com/
• ConeGen VRML2 cone generator:
http://www.stack.nl/~vincentn/ConeGen/index.html

StyleSheet Tools
• xStyle: http: http://www.greenmojo.com/
• CSS Style Generator: http://www.10002.org/Download
Web Engineering Tools
CGI Tools
 CGI Programming Tools:
http://www.cgiexpert.com/
CGI Mail Form generator:
http://www.lss.com.au/lss/windows/mf/mf
_ins.htm
Visual Perl Editor:
http://www.xarka.com/vpe.html
Web Engineering Tools
Scripting Tools
• Nathan Leveck's HTML Parser: http://nl-html-
parser.sourceforge.net/
• PHP - Hypertext Preprocessor:
http://www.php.net/
• PHP Introduction:
http://www.zend.com/zend/art/intro.php
• COLDFUSION ColdFusion Server - ColdFusion
Studio: http://www.allaire.com
• Microsoft Active Server Pages:
http://csbs.utsa.edu/users/gjeffery2/doit/
Web Engineering Tools
E-Commerce Tools
• Gamma GenCat: http://www.gamma-
burst.com/gencat/index.html
• Auto Search Submitter: http://download.snoop.dk/freew.html
• Gate Keeper Security: http://www.pagetutor.com/

Miscellaneous
• AnalogX CGISearch search authoring:
http://www.analogx.com/
• Hot Potatoes multiple choice question writer:
http://web.uvic.ca/hrd/halfbaked/
• http://www.winfiles.com
• http://www.download.com
• http://www.cookiecentral.com