Introduction to Web Engineering

1
 Outline
Introduction to the Course

What is web engineering?

Web applications

The case for web engineering

Categories of web applications

Characteristics of web applications

2
 1. Introduction to the
Course
This course aims:
to introduce the methods and techniques used in

Web-based application development

to develop practical web applications

3
 1.1 Web engineering methods and techniques

This modules includes the following topics:

Product development
Requirement engineering
Web application modeling
Web application architectures
Technologies and tools
Testing web applications
Maintenance
Quality Aspects:
Security

4
1.2 Web application development

User receives file Server sends requested files to

displayed by the browser to
browser be interpreted

Browse
r

User sends Server

request accepts and
processes
Browser interprets user’s
request from
selection and makes request
browser
from appropriate server
5
5
 1.2 Web application development…

• Hyper-text Markup Language (HTML)

• Cascading Style-sheets (CSS)

• Client-side Scripting Language

(JavaScript)

• Serve-side Scripting Language (PHP)

• Database Language (MySQL)

6
 2. Web engineering
• Software engineering is an engineering discipline that is
concerned with all aspects of software production
• Software Engineering is the science and art of building significant
software systems that are:
on time

on budget

with acceptable performance

with correct operation

7
 2. Web engineering…
 Web engineering is the study of the process, used to create high

quality Web-based applications

 Web engineering draws heavily on the principles and

management activities found in software engineering processes

 Web engineering extends Software Engineering to

Web applications

8
 2. Web engineering…
 The application of systematic and quantifiable

approaches to cost-effective analysis, design,

implementation, testing, operation, and maintenance of
high-quality web applications

9
 3. Web applications
WWW has massive and permanent influence on our
lives
Economy, Industry, education, healthcare, entertainment

Why?

 global and permanent

Comfortable and uniform access

10
 3. Web applications…
WWW started as an informational medium

Evolved into application medium

Interactive, data intensive services

Distinguishing factors

How it is used?

Technologies and standards for development

11
 3. Web applications…
A Web application is a system that utilizes W3C

standards & technologies to deliver web-specific

resources to clients (typically) through a browser
Technology + interaction

12
 4.The case for web
engineering
 Application development on the Web remains largely ad hoc

 unplanned, one-time events

 Individual experience

 Little or no documentation for code/design

 Short-term savings lead to long-term problems in operation,

maintenance, usability, etc.

 lack of performance, reliability, user-freindliness and scalability

 Because Web apps are so interdependent, the problem is

compounded

11
43
 4.The case for web engineering…
Root Causes of poor design:

Development as an authoring activity

Development is “easy”

Techniques that should not be used are misapplied

Techniques that should be used are not applied

14
 4.The case for web engineering…
 Top project drawbacks (Cutter, 2000)

 84% - Failure to meet business objectives

 79% - Project schedule delays

 63% - Budget overrun

 53% - Lack of functionality

 Web Engineering’s solution:

 Clearly defined goals & objectives

 Systematic, phased development

 Careful planning

 Iterative & continuous auditing of the

entire process

15
 5. Categories of web applications
Document-centric web

Interactive and transactional web

applications
Workflow-based web applications

Collaborative and social web applications

Portal-oriented web applications

Ubiquitous web applications

16
 5.1 Document-centric web sites
originator to Web applications
Static HTML documents
Manual updates
Pros
Simple, stable, short response times
Cons
High management costs for frequent updates &
large collections
More prone to inconsistent/redundant info
Example: static home pages

17
 5.2 Interactive &
transactional
Not only read-only content but also allow

content modification
Come with the introduction of HTML
forms
Simple interactivity

Dynamic page creation

Web pages and links to other pages

18 generated dynamically based on user input

 5.2 Interactive &
transactional…

Content updates -> Transactions
Database connectivity

Increased complexity

Examples: news sites, booking systems, online

banking

19
 5.3 Workflow-based
applications

Designed to handle business processes across
departments, organizations and enterprises
Automates processes consisting of series of
steps
Business logic defines the structure

High complexity; autonomous entities

Examples: B2B and e-Government

20
 5.4 Collaborative & social web
 Unstructured, cooperative environments

Support shared information workspaces to create, edit and

manage shared information

 Interpersonal communication is paramount

 Classic example: Wikis

 The Social Web

Moving towards communities of interest

Examples: Blogs, facebook, twitter etc.

21
 5.5 Web portals
One specially-designed at a website which brings
information together from diverse sources in a
uniform way
Each information source gets its dedicated area
Specialized portals
Business portals
Marketplace portals
Community portals

23
2
2
 5.6 Ubiquitous web applications
Customized services delivered anywhere via
multiple devices
Still an emerging field

23
 5.7 Categories of Web
Applications (development
history vs complexity)
Ubiquitous

Social Web
Collaborative
Complexity

Workflow
Based
Portal
Transactional
Oriented

Interactive

Doc-Centric

24 oDvt.eCvolleegleopment
 6. Characteristics of Web Applications
How do Web applications differ from
traditional applications?
3 dimensions
Product-based
Usage-based
Development-based

26
2
5
 6.1 Product-based characteristics
Product-related characteristics constitute the

“building blocks” of a Web application

Content:

Document character & multimedia

Quality demands: current,

exact, consistent, reliable

22
76
 6.1 Product-based characteristics…
Navigation Structure (Hypertext):

Non-linearity

Potential problems: Disorientation & cognitive

overload
User interface (Presentation):

Appearance

Self-explanation

27
 6.2 Usage-based characteristics
 Much greater diversity compared to traditional non-

Web applications
Users vary in numbers, cultural

background, devices, h/w, s/w, location etc

 Social Context (Users):

Spontaneity - scalability

Heterogeneous groups

28
 6.2 Usage-based characteristics…
Technical Context (Network & Devices)

Quality-of-Service

Natural Context (Place & Time):

Globality

Availability

29
 6.3 Development-based characteristics
The Development Team:

Multidisciplinary – print publishing,

s/w development, marketing &

computing, art & technology
Technical Infrastructure:

Lack of control on the client side

30
 6.3 Development-based characteristics
Integration:

Internal: with existing legacy systems

External: with Web services

Integration issues: correct interaction, guaranteed

QoS

31
 Summary
Web engineering extends Software Engineering to

Web applications
Why web engineering?

Web applications

Categories and characteristics of web applications

32