Web Engineering

Lecture 01
Instructor: Ms. Mehak Sheikh

1
Introduction to Web Engineering

2
Outline

• Introduction to the Course

• What is web engineering?
• Web applications
• The case for web engineering
• Categories of web applications
• Characteristics of web applications

3
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

4
1.1 Web engineering methods and techniques

This module includes the following topics:

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

5
1.2 Web application development

User receives file 4. Server sends requested files to browser to

displayed by the browser be interpreted

Browser

1. User sends request Server accepts

and processes
request from
Browser interprets user’s
browser
selection and makes request from
appropriate server

6
1.2 Web application development…

• Hyper-text Markup Language (HTML)

• Cascading Style-sheets (CSS)
• Client-side Scripting Language (JavaScript)
• Serve-side Scripting Language (PHP)

7
1.3 Books

• Web Engineering, by Gerti Kappel, Birgit Proll, Siegfried Reich,

Werner Retschitzegger, John Wiley & Sons; ISBN: 3-89864-234-8
• Beginning HTML, XHTML,CSS and JavaScript, by Jon Duckett,
Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.
• Beginning PHP programming, by Matt Doyle, Wrox publishers,
2009, ISBN: 0470413964
• Reference books:
• Learn JavaScript, by Chuck Easttom, Wordware Publishing; 2002,
ISBN 1-55622-856-2
• Beginning PHP and MySQL by W. Jason Gilmore, Apress publisher,
4th edition; 2010, ISBN-13 (electronic): 978-1-4302-3115-8.

8
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
9
 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

10
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

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-friendliness and
scalability
• Because Web apps are so interdependent, the
problem is compounded
13
4. The case for web engineering…

• Root Causes of poor design:

– Development as an authoring activity
– Development is “easy”
– Lack of Technical staff
– Techniques that should be used are not applied

14
4. The case for web engineering…

• Top project drawbacks

– 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 generated
dynamically based on user input

18
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
• 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 vital
• Classic example: Wikis
• The Social Web
– Moving towards communities of interest
– Examples: Blogs, facebook, twitter etc.

21
5.5 Web portals

• One specially-designed website which brings

information together from diverse sources in a
uniform way
• Examples: email, online forums
• Each information source gets its dedicated area
• Specialized portals
– Business portals
– Marketplace portals
– Community portals
22
5.6 Ubiquitous web applications

• Accessed in various contexts, i.e. through

different devices, by users with various
interests, at anytime from anyplace around
the globe
• Examples: Workstation, PC's, PDA's
• 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

Development History
24
6. Characteristics of Web Applications

• How do Web applications differ from

traditional applications?
• 3 dimensions
– Product-based
– Usage-based
– Development-based

25
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

26
6.1 Product-based characteristics…

• Navigation Structure (Hypertext):

– Non-linearity
– Potential problems: Disorientation
• 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):
– scalability
– Heterogeneous groups

28
6.2 Usage-based characteristics…

• Technical Context (Network & Devices)

– Quality-of-Service
• Natural Context (Place & Time):
– Global
– 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 Quality of services (QoS)

31
 Summary
• Web engineering extends Software
Engineering to Web applications
• Why web engineering?
• Web applications
• Categories and characteristics of web
applications

32