Web Engineering
An introduction
Module Leader: Md. Minhaj Hosen
Motivation
The World Wide Web is omnipresent!
Why?
global and permanent availability
comfortable and uniform access
anyone can produce and publish contents
Examples
Search Engine
Information
Announcement
Computation
Mixed
Basic paradigms
Hypertext + Internet
Hypertext: textual documents together with the ability to interconnect
documents by links between them as part of the document contents
HTML: HyperText Markup Language
HTTP: HyperText Transfer Protocol
Conceptual Architecture
History of the Web
1969: ARPA (Advanced Research Projects Agency)
First small network: Stanford Research Institute, UCLA, UC Santa, Barbara, Univ. of
Utah
TCP (Transmission Control Protocol)
IP (Internet Protocol)
1972: Telnet protocol
1973: SMTP (Simple Mail Transfer Protocol)
1973: FTP (File Transfer Protocol)
1989: T. Berners-Lee et al.: Word Wide Web (WWW)
1994: W3C (World Wide Web Consortium)
1996: HTTP (HyperText Transfer Protocol)
Protocol Stack
World Wide Web Consortium (W3C)
international consortium where member organizations, a full-time staff, and
the public work together to develop Web standards
http://www.w3.org
W3C's mission:
to lead the World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web.
Web Application
A Web Application is a software system based on technologies and standards of
the World Wide Web Consortium (W3C) that provides Web specific resources such
as content and services through a user interface, the Web browser.
[Kappel et al. 2004]
Categories of Web Applications
Categories of Web Applications (1/5)
Categories of Web Applications:
document-
centered
Informational
read-only content is provided with simple navigation and links
Download
a user downloads information from the appropriate server (ftp-server)
Customizable
the user customizes content to specific needs
examples:
static HTML-pages, „home pages“
web radio
simple presentations of companies/products
Categories of Web Applications:
Interactive
content of a website is dynamically generated as response to a user request
form-based input is the primary mechanism for communication between
client and server
usage of HTML-forms and Common Gateway Interface (CGI) techniques
radio button, string input, choice lists
examples:
dynamic HTML pages
public transport schedules
search engines
Categories of Web Applications:
transaction-
oriented
complex interactions
read and write actions
usage of transaction management of database systems
efficient and consistent data management
structured data and queries
examples:
online banking
e-shopping
reservation systems
Categories of Web Applications:
workflow-
based
support business processes („workflows“) within resp. between different
enterprises or private users
an application provides a complex service to the user, e.g. assists the user in
determining the mortgage payment
prerequisite: structured flow of activities
examples:
Business-to-Business (B2B) Integration Frameworks
E-Government
patient workflows in health care systems
Categories of Web Applications
Categories of Web Applications:
Collaborative
support cooperation in case of unstructured flow of activities and high degree
of communication
„groupware“
examples:
support of shared information- and workspaces
Wiki, http://c2.com/cgi/wiki
BSCW, http://bscw.gmd.de
chat rooms
e-Learning platforms
Categories of Web Applications:
portal-
oriented
the application channels the user to other Web content or services outside
the domain of the portal application
„single point of access“
examples:
Community portals
dedicated user groups
customer profiles
enterprise portals
Intranet, extranet
Categories of Web Applications:
ubiquitous
personalized services at every time at every location
multi-platform delivery (PC, PDA, mobile phone)
context-dependent information
examples:
display of today‘s menu on end-user devices while entering a restaurant
Categories of Web Applications:
semantic web
information available on the web
adequate for human understanding and
adequate for automatic manipulation
„knowledge management“
derivation of new knowledge
re-use of knowledge
based on ontology's
examples:
Web 2.0
social software: wiki, Flickr, del.icio.us
Google
Categories of Web Applications
Characteristics of Web Applications
Characteristics of Web Applications
Characteristics of Web Applications:
Content Product
“content is king” in web applications • Presentatio
n
document-centered and multi-media • Hypertext
text, tables, graphics, animation, audio, video • Content
main objective of web applications is to communicate content
high usability demands
high quality demands
actuality, preciseness, correctness, reliability, size
e-shopping: information about price, availability of products
quality is critical factor for acceptance of web applications
Characteristics of Web Applications:
Product
Hypertext • Presentatio
non-linearity n
• Hypertext
main distinction to traditional software systems
• Content
systematic reading (“browsing, query, guided tour”)
navigation in information space depends on interest and previous knowledge of
user
great challenge for web application authors
risks
disorientation: loss of sense of locality and direction
cognitive overload for users
Characteristics of Web Applications:
Presentation Product
aesthetics • Presentatio
n
look and feel • Hypertext
depending on current fashion • Content
self-explanatory
intuitive use without reading any documentation
uniform application logics
Characteristics of Web Applications
Characteristics of Web Applications:
spontaneity
users come and go ..
unknown number of users
scalability important issue
multiculturality
anonymous type of user
limited knowledge about previous knowledge, handicaps, preferences of users
desired adaptation of content and presentation
Characteristics of Web Applications:
quality of service
unknown network characteristics (e.g., bandwidth, reliability)
multi platform delivery
different types of devices (PC, tablet, mobile phone)
different versions of browsers
different degree of functionality, performance, display size, …
Characteristics of Web Applications:
place and time of access
globality
internationalization of web applications
regional, cultural, linguistic differences have to be taken into account
demands on security
prevent access to private or confidential data
availability
instant delivery mechanism (also in case of partial realizations)
permanent (24/7)
time-dependent services
Characteristics of Web Applications:
multi disciplinary
mixture of
print publishing and software development
marketing and computer science
art and technology
IT-experts, hypertext experts, UI designer, domain experts, …
young average age of developers
“technology freak”, “nerd”
community development
open source
open content
Characteristics of Web Applications:
inhomogeneity
two essential components
Web server (under control of developer)
Web browser (out of control of developer)
immaturity
“buggy” components due to time-to-market pressure
continuous evolution of base technology
Characteristics of Web Applications:
flexibility
changing requirements
changing context
requires agile, light-weight processes
parallelism
of development of parts of web applications
of development steps
Characteristics of Web Applications:
internal integration
add web access to legacy systems
external integration
of content and services of external web applications (“web services”)
similarity to integration of heterogeneous database systems, but
high autonomy of sources w.r.t. to availability and change
few detailed information about sources
heterogeneity on different levels (data, schema, data model)
Characteristics of Web Applications
Characteristics of Web Applications:
continuous change
permanent evolution
changing requirements and contexts
change of characteristics product, use, or development
competitive pressure
time-to-market
necessity of web presence
leads to shorter product life cycles
leads to shorter development cycles
fast pace
“either you are fast or irrelevant”
Support for Web Application
Development
Model-based Development
Support for Web Application
Development
Model-based Development
Quality of Web Applications
• Kinds of quality properties
• External qualities are visible to the user
• Internal qualities are visible to / concerning
the developer
Model-based Development
Quality of Web Applications
external
qualities
correctness:
a web application is functionally correct if it behaves according to the
specification of the application
reliability:
the probability that the software will operate as expected
occurring software errors are not serious
robustness:
software behaves reasonably even in circumstances that were not anticipated in
the requirements specification
Quality of Web Applications
external
qualities
actuality:
actuality of content must be guaranteed
user-friendliness:
easy to use by human (novice / experts)
efficiency:
economical handling of resources (time, storage space)
security:
system is protected from unauthorized access
Quality of Web Applications
internal
qualities
portability:
a web application is portable if it can run in different environments
interoperability:
refers to the ability of the web application to coexist and cooperate with other
systems
maintainability:
ability to modify a web application after it has been deployed
correct errors
extend the web application
Quality of Web Applications
Compromise
Choose/design your own
solution
Development of Web Applications:
today’s
approach
ad-hoc development
based on knowledge, experiences and practices of individual developers
reuse of existing applications by “copy&paste” approach
insufficient documentation of design decisions
isolated activity: no “design for change”
missing methodical approach
Reasons for Quality Deficiencies
document-centered view
development of web applications seen as editorial activity: “ (textual) web pages,
links and use of graphics”
misconception that web applications are simple
due to availability of tools like HTML-editors and form generators
no use of know-how of relevant disciplines
no use of software engineering know-how
no use of hypermedia or HCI (Human Computer Interaction) know-how
Web Crisis
• comparable to software crisis at the end of the 60’ies
• lead to origin of “software engineering” discipline
• “web engineering” is needed!
1. Web Engineering (WE)
Web Engineering (WE) applies sound scientific,
engineering, and management principles and
disciplined and systematic approaches to the
successful development, deployment, and
maintenance of high-quality Web-based systems
and applications.
1.1 Web engineering methods and
techniques
This modules includes the following topics:
Web application development approaches
Process models (RUP, XP etc.)
Web application development activities
Requirement engineering
Web application modeling
Web application architectures
Technologies and tools
Testing web applications
Maintenance
48
1.2 Web application development
Computers in 1950’s
massive devices
low processing power
no networking
Advanced Research Projects Agency (ARPA)- 1958
ARPANet:
Lawrence Roberts publishes overall plan for ARPAnet -1966
ARPA funded a research project to connect computers -1968
first connection -1969
49
1.2 Web application development…
The Internet is a network of interconnected
networks
Evenif part of its infrastructure was destroyed,
data could flow through the remaining
networks
1.2 Web application development
51
1.2 Web application development…
• World-wide-web (WWW)
a system of interlinked hypertext documents that are accessed via
the Internet with a browser
one can view web pages that may contain text, images, videos, and
other multimedia and navigate between them via hyperlinks
52
1.2 Web application development…
5. User receives file displayed by 4. Server sends requested files to browser to
the browser be interpreted
Browser
1. User sends request 3. Server accepts
and processes
request from
2. Browser interprets user’s
browser
selection and makes request from
appropriate server
53
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)
54
2. Web engineering
• Software Engineering is the science and art of building significant software
systems that are:
on time
on budget
with acceptable performance
with correct operation
55
2. Web engineering…
Web engineering is the process used to create high quality Web-based
applications (WebApps)
Web engineering draws heavily on the principles and management activities
found in software engineering processes
Web engineering extends Software Engineering to Web applications
56
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”
57
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
58
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
59
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
Web site with no software components (such as static HTML pages)?
60
