WEB ENGINEERING

10/09/2022 1
 What is
 Web it?
engineering focuses on the
methodologies, techniques, and tools that
are the foundation of 
Web application development and which
support their design, development,
evolution, and evaluation.
 Web application development has certain
characteristics that make it different from
traditional software, information system, or
computer application development.
10/09/2022 2
 What is
 Web engineering is multidisciplinary and
it?
encompasses contributions from diverse
areas: 
• System Analysis and Design
• Software Engineering
• Hypermedia/hypertext engineering,
• Requirement Engineering
• Human Computer Interaction
• User interface and Information Engineering
• Information indexing and Retrival
• Testing
• Modelling and Simulation,
• Project management, and graphic design and presentation.

10/09/2022 3
 What is
it?
 Web Engineering is the process used to
create high-quality WebApps.

 Web Engineering is not a perfect clone of

software engineering.

 It borrows many of software engineering’s

fundamental concepts and principles.

10/09/2022 4
 What is
it?

10/09/2022 5
 What is
it?
What is Web Engineering?
• Web Engineering is the application of systematic,
disciplined and quantifiable approaches to development,
operation, and maintenance of Web based applications. It
is both a pro-active approach and a growing collection of
theoretical and empirical research in Web application
development.
• Web engineering is basically all about designing and
promoting web based systems.
• “The application of systematic and quantifiable approaches to
cost-effective analysis, design, implementation, testing,
operation, and maintenance of high-quality Web
applications.”

10/09/2022 6
 WEB ARCHITECTURE
Web architecture is the conceptual structure of the World Wide
Web.
1. Client-server model
• Initially, the web consisted of a two-tiered architecture: clients and 
servers.
• Clients and servers shared the tasks and services that the system was
supposed to perform.
• For example, the client may request a service from the server; the
server answers the request by providing the service.
• Retrieving a website using a URL address that directs to a server to
load the site in the client’s browser is an example of the two-layer
model, also known as the client-server model.
• The internet protocol family, which now consists of around 500
different network protocols, is usually used as the basis for the WWW,
but it usually comprises the TCP/TCP/IP reference model.

7
 WEB ARCHITECTURE
1. Client-server model [Continued..]
Three prerequisites must exist in the web architecture for the distributed
application systems to communicate with one another:
• Representation formats with a fixed standard: The most frequently
used formats are HTML and CSS or XML when machines
communicate with one another.
• Protocols for data transfer: HTTP(Hypertext Transfer Protocol)
or HTTPS (Hypertext Transfer Protocol Secure) is used in the web.
Other applications, such as mail servers, use SMTP (Simple Mail
Transfer Protocol) or POP (Post Office Protocol). Determining the
protocols used depends on the application.
• The standard for addressing: This refers to the URL (Uniform
Resource Locator) which is an instance of the more general concept
of URI.

8
 WEB ARCHITECTURE
2. Three Tiered Architecture
• Three-tier models include an application logic between the client and the
server, which handles the data processing and allows a certain degree of
interaction.
• For example, an application server can process data while a database server is
dedicated solely to data storage. In this way, content can be dynamically loaded
and saved.
• The script language javascript is often responsible for the behavior of the client.
• Generally, a distinction is made between server-side and client-side data
processing.
• Dynamic websites are characterized by the fact that content is changed on the
client side without new communication between server and client being
required. Action on the client side is influenced by scripts so that no
asynchronous data transfer is necessary.
• On the server side, modified content is stored via the application server on the
database server. Optionally, this can be a virtual server that emulates a physical
one.

9
 WEB ARCHITECTURE
3. Service-oriented architectures
• Today the web is used for the networking of globally distributed IT structures.
Each IT system can, in turn, consist of subsections whose individual
components are linked to one another via a fixed structure or architecture.
• Think intranet and internal enterprise software. Modern IT and web
applications are much more complex than the client-server model.
• Distributed web services, which are set up as service-oriented architectures
(SOA), offer many functions and modular functional units, which can be
supplemented.
• With SOAs, business processes can be automated by the involved systems
communicating with one another - partly without human intervention - and
performing certain tasks.
• Examples include online banking, e-commerce, e-learning, online
marketplaces, and business intelligence applications. These architectures are
not only much more complex but can also be modularly extended.
• They are known as N-tier architectures and have so far been used primarily in
the business sector.

10
 WEB ARCHITECTURE
3. Service-oriented architectures [Continued…]
• There are generally two approaches:
• Web Services Description Language (WSDL) and Simple Object
Access Protocol (SOAP): WSDL is a meta-language for describing
network services based on XML, enabling a web service to
interpret and execute specific tasks.
• Representational State Transfer (REST): REST is a similar
approach used to communicate between machines in distributed
systems. It is based on a client-server architecture, but is
characterized above all by its uniform interface making REST easy
to use with different resources or objects. 
11
 Constructing Simulation-Based Web Documents

OOCSMP:
The object oriented continuous system program
(OOCSMP) continuous simulation language was
conceived in 1997 as an object-oriented language. A
compiler (C-OOL) was built for this language that
creates C++ code or Java applets from simulation
models.
Adding interactivity
With this system, users can generate simulation-
based documents and interactive articles,
presentations, and Web courses.

10/09/2022 12
 Constructing Simulation-Based Web Documents

Adding interactivity
 Generating simulation-based documents
 Creating an interactive article for the Web
 Creating an interactive presentation
Current applications, such as Microsoft PowerPoint,
facilitate building visual
 Creating presentations.
a simulation-based Web course
Computer simulations prove useful to enhance
laboratory learning, and they’re commonly used in
educational courses. Thus, students the
simulation models
explore
remotely in a hands-on paradigm.

10/09/2022 13
 What are the
steps?
 Problem is formulated
 Project is planned
 Requirements of the WebApp are analyzed.
 Architectural, navigational and interface
design are conducted.
 The system is implemented using specialized
languages.
 Tested.

10/09/2022 14
 The attributes of Web-Based
Applications
 Network Intensive;Resides on a network(Internet,
Intranet, Extranet) and must serve the needs of a
diverse community of clients.
 Content Driven;Primary function of a WebApp is
to use hypermedia to present text, grphics, audio
and video content to the end-user.
 Continuous Evolution;Unlike convetional
application software, Web Applications
evolve continuously.

10/09/2022 15
 The characteristics of Web-Based
Applications(I)
 Immediacy; Developers must use methods for
planning, analysis, design, implementation and
testing that have been adapted to the compressed
time schedules required for WebApp
development.
 Security; Because WebApps are available via
network access, it is difficult to limit the population of
the end-users who may access the application.
Strong security measures must be implemented
throughout the infrastructure that supports WebApp
like SSL.
10/09/2022 16
 The characteristics of Web-Based
Applications(II)
 Aesthetics; Undeniable part of WebApp is its look
and feel. When an application is designed to market
or sell products aesthetics becomes much more
important.

 General characteristics apply to all WebApps with

different degrees

10/09/2022 17
 Web Application
Quality
 Usability;Understandability,Aesthetic
 Functionality;Searching, Navigation, Browsing
 Reliability;Correct Link, Error Recovery, Input
Validation
 Efficiency;Response Time Performance, Page and
Graphic Generation Speed
 Maintainability;Extensibility

10/09/2022 18
 The technologies

 Component Based Development;Three major

infrastructure standards are available for Web
engineers:CORBA,COM/DCOM, and Java Beans.
 Security;A variety of security measures are
provided by the network infrastructure, encryption
techniques, firewalls and other measures.
 Internet Standards;HTML enables the developer
to provide a series tags that describe the
appearance of objects(text, graphics, audio/video,
forms...).A new standard, XML has been developed.

10/09/2022 19
 Framework For
WebE
Planning
Architectural
Formulation Analysis Design
Content

Design
Navigation
Design
Customer
Page Gen. Production
&
Evulation
Testing Interface
Design

10/09/2022 20
 Formulation(I
)
 Allows the customer and developer to establish
a Goals and Objectives for the construction of
WebApp.
 Identifies the scope of the development effort.
 Questions at the beginning of the formulation
step;
1. What is the main motivation for the WebApp?
2. Why is the WebApp is needed?
3. Who will use the WebApp?

10/09/2022 21
 Formulation(II
 )
Example;Manufacturer of home Security System
decided to establish e-commerce Web Site.
 Answer1: Site will allow customers to purchase
compenents for home/bussiness security.
Answer2: Eliminate retailer cost. Increases sales %25


percent.
Answer3: Homeowners and Owner of small bussiness.


 These answers imply specific goals. Two categories

of goals;
 Informational Goals: Provides content information.
 Applicative Goals: Ability to perform some task like selling
and buying.

10/09/2022 22
 Analysi
 Technical activity sthat identifies data,functional
requirement for the WebApp.
 Four types of anaylsis exists for WebE.
 Content Analysis; Content to be provided is identified.
Content includes text,graphics,image,video and audio
data.
Interaction Analysis;The manner in which the user


interacts with the WebApp is described in detail.

Functional Analysis;All operations and functions are


described.(Search...)
Configuration Analysis;The environment and


infrastructure in which WebApp resides are described

in detail.

10/09/2022 23
 Design

 Problem : Must establish a design that solves the

immediate bussiness problem while at the same
time defining application architecture that has the
ability to evolve rapidly over time.

 Three design types focuses;

 Architectural Design
 Navigation Design
 Interface Design

10/09/2022 24
 Architectural
Design
 Focuses on the
 Definition of hypermedia structure
 Design patterns

Constructive
 templates

10/09/2022 25
 HyperMedia
 Structures(I)
Depends on goals established, the content
to be presented, the users who will visit.
 Linear Structures;Predictable sequence of
interactions. •Tutorial presentation in
which pages of information
along with related graphics
are generally presented one
by one.

•Product order entry

sequence in which specific
infromation must be entered
in specific order.

10/09/2022 26
 HyperMedia
2. Structures(II)
Grid Structures;Applied when content orginized
categorically in two or more dimensions.

• E-commerce site sells golf

club.Horizontal dimension of
of grid represents the type of
club(woods,irons...).Vertical
dimension represents
offerings provided by various
golf club manifacturers.

• Architecture is useful when

the content is regular.

10/09/2022 27
 HyperMedia
3. Structures(III)
Hierarchical Structures;Allows rapid navigation.
But it can lead to confusion for user.

10/09/2022 28
 HyperMedia
4. Structures(IV)
Networked Structures;Similar to object-oriented
architecture. Each component(web page) is
connected to every other component.Has navigation
flexibility but can be confusing to user.

10/09/2022 29
 Navigation Design(I)
 Designer must define navigation pathways that
enable a user to access WebApp content.
 WebApp have different roles : Visitor, registered,
privileged.
 Each of these roles associated with different levels
of content access.
 SNU(Semantic Navigation Unit) : for each user
role’s goal is created.
 WoN(Way of Navigating) : Set of navigational sub-
structures which describe SNU.
WoN
 represents the best navigation path to achieve
goal.

10/09/2022 30
 Navigation Design(II)

 Mechanics of each navigation link must be

identified for appropriate content:
 Text-based links, icons, buttons, switches...
 In addition to mechanics, the designer should
establish navigation convention.
 Icons and graphical links should look “clickable”
Color should indicate the navigation link for text-


based navigation.

10/09/2022 31
 Interface Design
 The user interface is “First Impression”
 Poorly designed interface will disappoint the
potential user.
 Server errors causes to users to leave sites.
 Do not force the user to read much text.

 Avoid “under construction” signs.

Users
 prefer not to scroll.
Navigation
 menus and headbars should be
available on all pages.
Navigation
 options (link to other contents) should
be clear.

10/09/2022 32
 Testing(I)
 The content model for the WebApp is reviewed to uncover errors
-Check grammatical mistakes, errors in content, errors in graphical
representation.
 The design model for the WebApp is reviewed to uncover navigation
error
-Use cases allow to exercise each usage scenario.
-These nonexecutable tests help uncover navigation errors.
 Selected processing components and Web pages are unit tested
-The smallest testable unit is generally a Web Page.
-Unlike conventional unit testing which focus on algorithmic detail, page-
level
testing is done by processing content.

 The architecture is constructed and integration test is made

-Thread based testing can be used to integrate the set of Web pages.
-Regression testing is applied to ensure that no side effects occur.
-Cluster testing integrates a set of collaborating pages.

10/09/2022 33
 Testing(II)
5. The assembled WebApp is tested for overall functionality.
-Like conventional validation, test focuses on user-visible actions and
user-recognizable output from system.
-To assist validation test, the tester should hold use-cases

6. The WebApp is implemented in a variety of different configuration

and is tested for compatibility.
-A cross-reference matrix that defines all probable operating systems,
browsers, hardware platforms and communication protocols is created.
-With each possible configuration tests are conducted.

7. The WebApp is tested by monitored population of end-users.

-The WebApp is exercised by the chosen users and the results of their
interaction with the system are evulated for all errros.

10/09/2022 34
 Management Issues
 Web Engineering is a complicated activity.
 Many people are involved often working in
parallel
 In order to avaoid failure
 Planning must occur
 Risks must be considered

A
 schedule must be established and tracked

 Controls must be defined

10/09/2022 35
 The WebE Team(I)
 Content developer and provider
 Generation and collection of content
 Marketing or sales staff may provide product information and
graphical images
 Media producers may provide video and audio
 Graphic designers may provide layout design and aesthetic
content.
 Web publisher
 Must understand the both content and WebApp technology
including HTML, XML, XHTML, database functionality, scripts
and general Web-Site navigation.

10/09/2022 36
 The WebE Team(II)
 Web engineer
 May have range of activities : architectural, navigational,
interface design, implementation, testing
Understanding
 of component technologies, client/server
architectures,HTML/XML and database technologies.
Working
 knowledge of multimedi-concepts, hardware-software
platforms,network security.
 Support specialist
 Responsible for corrections, adaptations and enhancement to
th site, updates to content, implementation of new procedures
and forms.

10/09/2022 37
 The WebE Team(III)
 Administrator
 Development and implementation of policies for operations.
 Implementation of security procedures and access rights.
 Measurement and analysis of Web-site traffic.

Coordination with support specialists.



10/09/2022 38
 Project
Management(I)
 Process and project metrics, project planning,
risk analysis and management, scheduling
and tracking.
 In theory most of these activities can be
applied to WebE projects.
 But in practice, the WebE approach is
considerably different.

10/09/2022 39
 Project Management(II)
 First; Most of the WebApps are outsourced to
vendors.
 How is the capabilities of vendor determined?
How does one know whether a price quote is


reasonable.
 Second; No WebE metrics have been
published in the literature.
 Estimation is purely based on past experience
with similar projects.
Although this estimation is useful,is open to


error.
10/09/2022 40
 References

• Pressman, Roger S (1998). "Can Internet Applications be

Engineered?". IEEE Software. 15 (5): 104–110. doi:
10.1109/ms.1998.714869.
• Roger S Pressman, "What a Tangled Web we Weave," IEEE
Software, Jan/Feb 2001, Vol. 18, No.1, pp 18-21.
• Gerti Kappel, Birgit Proll, Seiegfried, and Werner Retschitzegger,
"An Introduction to Web Engineering," in Web Engineering, Gerti
Kappel, et al. (eds.) John Wiley and Sons, Heidelberg, Germany,
2003.
• Deshpande, Yogesh; Hansen, Steve (2001). "Web Engineering:
Creating Discipline among Disciplines". IEEE Multimedia. 8 (1):
81–86. doi:10.1109/93.917974.
10/09/2022 41