Introduction to Web Engineering

Lecture 1

1
Content
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:

Web application development approaches
◦ Process models
◦ Web project management
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 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

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
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.

7
 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

8
 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

9
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

10
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

11
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

12
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

13
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

14
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

15
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

16
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

17
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- ready made
pages stored on server
18
5.2 Interactive & transactional
Not only read-only content but also allow
content modification
With introduction of CGI(common
Gateway Interface) interactive web
application emerged.
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 19
5.2 Interactive & transactional…
Content updates -> Transactions
◦ Database connectivity
◦ Increased complexity
Examples: news sites, booking systems, online
banking

20
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

21
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
◦ Unrecognizability traditionally characterized
WWW
◦ Moving towards communities of interest
◦ Examples: Blogs, facebook, twitter etc.

22
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
5.6 Ubiquitous web applications
Customized services delivered
anywhere via multiple devices
Still an emerging field

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

Collaborative Social Web

Complexity

Workflow
Based
Portal
Transactional
Oriented

Interactive

Doc-Centric

Development History
25
6. Characteristics of Web Applications
How do Web applications differ from
traditional applications?
3 dimensions
◦ Product-based
◦ Usage-based
◦ Development-based

26
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

27
6.1 Product-based characteristics…
Navigation Structure (Hypertext):
◦ Non-linearity
◦ Potential problems: Disorientation &
cognitive overload
User interface (Presentation):
◦ Appearance
◦ Self-explanation

28
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

29
6.2 Usage-based characteristics…
Technical Context (Network & Devices)
◦ Quality-of-Service
Natural Context (Place & Time):
◦ Globality
◦ Availability

30
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

31
6.3 Development-based characteristics
Integration:
◦ Internal: with existing legacy systems
◦ External: with Web services
◦ Integration issues: correct interaction,
guaranteed QoS

32
Summary
Web engineering extends Software
Engineering to Web applications
Why web engineering?
Web applications
Categories and characteristics of web
applications

33
References
LectureSlides by Kappel et al.
Chapter 1, Kappel, G., Proll, B. Reich, S.
& Retschitzegger, W. (2006). Web
Engineering, 1st ed. Hoboken, NJ: Wiley
& Sons
• UNESCO ICTLIP Module 6. Lesson 1
Slides

34