3/5/2013

Web Engineering

Web Engineering
Introduction and Overview

© Copyright 2013   Ioan Toma & Srdjan Komazec 1

What is the course about?

• Web Engineering
– Requirements collection
– Design
– Development
– Testing

• Web Technologies
– HTML, JSP, AJAX, JASON, JQuery, …

• Project Management
– CVS/SVN/GIT, JUnit …

1
 3/5/2013

Course Goals

• The goals of the course are as follows:

– To be able to analyze and design comprehensive Web application.

– To learn and use some of the languages currently used to manipulate information on
the World Wide Web – i.e. Java and Javascript.

– To learn techniques and evaluation metrics for ensuring the proper operability,
maintenance and security of a web application.

Course Organization

• Course is organized into:

– 15 lectures (Tuesday, 09:15 – 12:00, HS11)

• The lecture(r) :
– Ioan Toma ([email protected])
• Ask for f2f meeting by email

– If any problem arises I will try to move lectures or use someone of my staff to replace
me
– We will try to be interactive

2
 3/5/2013

Course Material

• Books
– Mendes, E., Mosley, N. (2010).
Web Engineering, Springer
– Kappel, G., Proll, B. Reich, S. &
Retschitzegger, W. (2006).
Web Engineering, Wiley & Sons.

• Web site
– http://www.sti-innsbruck.at/teaching/course-schedule/ss-2013/web-engineering-ss-
2013
– Slides will be published online after each lecture

• Mailing list
– https://lists.sti2.at/mailman/listinfo/we2013

What is the course structure?

# Date Title
1 5th March Web Engineering Introduction and Overview

2 12th March Requirements Engineering for Web Applications

3 19th March Web Application Modeling

4 9th April Web Application Architectures

5 16th April Developing Applications with WebML

6 23rd April Testing and Usability of Web Applications

7 30th April Maintenance and Performance of Web Applications 

8 7th May Web Technologies I

9 14th May Web Technologies II

10 21st May Web Application Development Process

11 28th May Project Management for Web Applications

12 4th June Web Application Security

13 11th June Mobile Application Development I

14 18th June Mobile Application Development II

14 25th June Final Exam

3
 3/5/2013

Examination

• Exam grade:

score grade
80 - 100 1
70 – 79.9 2
60 – 69.9 3
50 – 59.9 4
0 – 49.9 5

• Tutorial and Exam have separate grades since this is not an

integrated course

Why do we need Web Engineering?

INTRODUCTION

4
 3/5/2013

Why do we want to learn about WE at all?

September 2010 Cisco estimates based on CAIDA publications, Andrew Odlyzko

What is Web Engineering?

• “The application of systematic and quantifiable approaches to cost-

effective analysis, design, implementation, testing, operation, and
maintenance of high-quality Web applications.” – Kappel et al.

• Extends Software Engineering to Web applications, but with Web-

centric approaches.
– And other relevant contributions from many disciplines

10

5
 3/5/2013

Defining Web Applications

• Unlike traditional software, the Web serves as both development & user
platform.

• A Web application is a system that utilizes W3C standards &

technologies to deliver Web-specific resources to clients (typically)
through a browser.
– Kind of …

• Technology + interaction.
– Web site with no software components?
– Web services?

11

The Case for Web Engineering

• Application development on the Web remains largely ad hoc.

– Spontaneous, 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.

• Because Web apps are so interdependent, the problem is

compounded.

12

6
 3/5/2013

The Case for Web Engineering II

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

• Particularly alarming given…

– Most projects are now Web-based
– More “mission-critical” apps moving to the Web

13

The Case for Web Engineering III

• Top project pitfalls (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

14

7
 3/5/2013

The Case for Web Engineering IV

• Web Technologies pose new restriction to software development

– HTTP
– URL
– HTML

• HTTP is stateless
– Unless you use tricks

• Web is based on the pull mechanism

– Unless you use tricks

• Why can not we change this? Tricks are not good!

– It’s a trade off…

15

Categories of Web Applications

Ubiquitous Semantic
Web
Social Web
Collaborative
Complexity

Workflow
Based Portal
Transactional
Oriented
Interactive

Doc-Centric

Development History

16

8
 3/5/2013

Document-Centric Web sites

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

17

Interactive & Transactional

• The Common Gateway Interface

– http://hoohoo.ncsa.uiuc.edu/cgi/interface.html

• Simple interactivity

• Dynamic page creation

• Content updates -> Transactions

– Decentralized
– Database connectivity
– Increased complexity

18

9
 3/5/2013

Workflow-Based Applications

• Designed to handle business processes across departments,

organizations & enterprises

• Business logic defines the structure

• The role of Web services

– Interoperability
– Loosely-coupled
– Standards-based

• Examples: B2B & e-Government

• High complexity; autonomous entities

19

Collaborative & Social Web

• Unstructured, cooperative environments

• Interpersonal communication is paramount

• Classic example: Wikis

• The Social Web

– Anonymity traditionally characterized WWW
– Moving towards communities of interest
– Examples: Blogs, collaborative filtering systems, social bookmarking (e.g., del.icio.us)
– Integration with other forms of web applications (e..g, NetFlix)

20

10
 3/5/2013

Portal-Oriented

• Single points-of-entry to heterogeneous information

– Yahoo!, AOL.com, my.pitt.edu

• Specialized portals
– Business portals (e.g., employee intranet)
– Marketplace portals (horizontal & vertical)
– Community portals (targeted groups)

21

Ubiquitous

• Customized services delivered anywhere via multiple devices

• HCI is critical
– Limitations of devices (screen size, bandwidth?)
– Context of use

• Still an emerging field; most devices have single focus:

– Personalization
– Location-aware
– Multi-platform delivery

22

11
 3/5/2013

Semantic Web

• Berners-Lee: Information on the Web should be readable to machines,

as well as humans.

• Using metadata and ontologies to facilitate knowledge management

across the WWW.

• Content syndication (RSS, Atom) promotes re-use of knowledge

• Is the Semantic Web even possible?

• Authors devote a chapter to the Semantic Web, but we will not focus on
it in this course.

23

Semantic Web

Serious Problems in
• information finding,
• information extracting,
• information representing,
• information interpreting and
• and information maintaining.

Static
WWW Semantic Web
URI, HTML, HTTP RDF, RDF(S), OWL

24

12
 3/5/2013

Semantic Web

• “An extension of the current Web in which information is

given well-defined meaning, better enabling computers
and people to work in cooperation.”
• Sir Tim Berners-Lee et al., Scientific American, 2001:
tinyurl.com/i59p
• “…allowing the Web to reach its full potential…” with far-
reaching consequences
• “The next generation of the Web”

25

Semantic Web

• Web Data Annotation

– connecting (syntactic) Web objects, like text chunks, images, …
to their semantic notion (e.g., this image is about Innsbruck,
Dieter Fensel is a professor)
• Data Linking on the Web (Web of Data)
– global networking of knowledge through URI, RDF, and SPARQL
(e.g., connecting my calendar with my rss feeds, my pictures, ...)
• Data Integration over the Web
– Seamless integration of data based on different conceptual
models (e.g., integrating data coming from my two favorite book
sellers)

26

13
 3/5/2013

Characteristics of Web Apps

• How do Web applications differ from traditional applications?

• Or, another way, what Software Engineering methods & techniques can
be adapted to Web Engineering?

• 3 dimensions of the ISO/IEC 9126-1 standard (Software engineering —

Product quality)
– Product
– Usage
– Development

• To this we can add a 4th dimension peculiar on the web, need for
continuous and fast evolution!

27

Characteristics - Product

• The “building blocks” of a Web application

• Content
– Document character & multimedia (# of dimensions?)
– Quality demands

• Navigation Structure (Hypertext)

– Non-linearity
– Disorientation & cognitive overload

• User interface (Presentation)

– Aesthetics
– Self-explanation

28

14
 3/5/2013

Characteristics - Usage

• Much greater diversity compared to traditional non-Web applications

• Social Context (Users)

– Spontaneity
– Heterogeneous groups

• Technical Context (Network & Devices)

– Quality-of-Service
– Multi-platform delivery

• Natural Context (Place & Time)

– Globality
– Availability

29

Characteristics - Development

• The Development Team

– Multidisciplinary
– Community (including Open Source)

• Technical Infrastructure
– Lack of control on the client side
– Immaturity

• Process
– Flexibility
– Parallelism

• Integration
– Internal
– External

30

15
 3/5/2013

The 4th Dimension: Evolution

• All the above mentioned dimension are governed by the evolution

principle
– Continuous change
– Competitive pressure
– Fast pace

• Software Engineering: evolution is planned in a constant number of

release version

• Web Engineering: evolution is continuous

– Nowadays this is becoming true also for SE… it’s a loop, when a discipline overlaps its
ancestor, the ancestor learn something back!

31

Key Knowledge Areas

Software
Hypermedia
Engineering

•Process • Design & Structure

•Design Information Space
•Implementation Web • Navigation
•Test • Visualization
Engineering
•Operation • Usability
•Maintenance • Collaboration

Network Information
Engineering © 1997-2005 Dr. Martin Gaedke
Systems

•Physical Layer •Data Design, ER,...

•Internet Layer Others... •RDBMS
•Transport Layer •Query Languages
•Performance •Strg.Devices: FS,...

32

16
 3/5/2013

Standardization I

Proprietary
HTML • De facto standards
extensions • Often initially appealing (cf
PDF and Java? PowerPoint, PDF)
• May emerge as PNG
W3C
standards HTML
• Produces W3C Z39.50
Recommendations on Java?
Web protocols ISO
• Managed approach to • Produces ISO Standards
developments • Can be slow moving and
• Protocols initially bureaucratic
developed by • Produce robust standards
W3C members
• Decisions made by W3C, IETF
influenced by member and • Produces Internet
public review Drafts on Internet protocols
• Bottom-up approach to developments
PNG • Protocols developed by
HTML
interested individuals HTTP
• "Rough consensus and working URN
HTTP code"

33

Standardization II

• Standards are important, especially for national initiatives and other

large-scale services
– More easy to integrate different projects if they adopt standards

• Proprietary solutions are often tempting because:

– They are available
– They are often well-marketed and well-supported
– They may become standardized

• Solutions based on standards may not be properly supported by

applications

34

17
 3/5/2013

That’s almost all for day…

WRAP-UP

35

Things to keep in mind

(or summary)

• Web Engineering is not about HTML and JavaScript

– Like Software Engineering is not about C or Java!

• It aims at systematic development of Web applications according to a

specific methodology

• Web Engineering is not just Software Engineering for the Web

• Web Engineering asks for multidisciplinary approach

• Standards are important in Web like in all the other engineering fields

36

18
 3/5/2013

Bibliography

• Mandatory reading
– Mendes, E., Mosley, N. (2010). Web Engineering, Springer 1st Chapter
– Kappel, G., Proll, B. Reich, S. & Retschitzegger, W. (2006). Web Engineering, Wiley &
Sons. 1st Chapter

• Wiki and Web references

– Web engineering http://en.wikipedia.org/wiki/Web_engineering

37

Next Lecture

# Date Title
1 5th March Web Engineering Introduction and Overview

2 12th March Requirements Engineering for Web Applications

3 19th March Web Application Modeling

4 9th April Web Application Architectures

5 16th April Developing Applications with WebML

6 23rd April Testing and Usability of Web Applications

7 30th April Maintenance and Performance of Web Applications 

8 7th May Web Technologies I

9 14th May Web Technologies II

10 21st May Web Application Development Process

11 28th May Project Management for Web Applications

12 4th June Web Application Security

13 11th June Mobile Application Development I

14 18th June Mobile Application Development II

14 25th June Final Exam

38

19
 3/5/2013

Questions?

39

20