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