Web Engineering (Lecture Notes)

IT702 Advanced Web Technologies 29-08-2016
(Jul Nov 2016)
Web Engineering
Basics, Need, Concepts and Trends
Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16
Terminology
Web Application a distributed application that accomplishes a

certain business need based on the technologies of WWW and that
consists of a set of Web-specific resources.
E.g. Websites, blogs, wikis, WhatsApp etc
Web System an infrastructure or system enabling the operation of a

Web application.
E.g. The entire backend support for Websites, including logistics,
security, transactions, failure-safe operation etc..
Dr. Sowmya Kamath S,

Dept of IT, NITK Surathkal 1
(Jul Nov 2016)
Web Applications
WebApps encompass:
complete Web sites
Simple information Web sites
Complex e-Commerce or other sites with embedded functionality and
data retrieval
Complex Web sites that are interoperable with other legacy software
and systems
specialized functionality within Web sites
information processing applications that reside on the Internet or on
an intranet or ExtraNet.
Categories of WebApps

(Jul Nov 2016)
Attributes of WebApps
Concurrency.
A large number of users may access the WebApp at one time; patterns
of usage among end-users will vary greatly.
Unpredictable load.
The number of users of the WebApp may vary by orders of magnitude
from day to day.
Attributes of WebApps (contd.)

Performance.
If a WebApp user must wait too long (for access, for server-side
processing, for client-side formatting and display), he or she may
decide to go elsewhere.
Network intensiveness.
A WebApp resides on a network and must serve the needs of a diverse
community of clients.
Aesthetics.
When an application has been designed to market or sell products or
ideas, aesthetics may have as much to do with success as technical
design.

(Jul Nov 2016)

Availability.
Although expectation of 100 percent availability is unreasonable, users
of popular WebApps often demand access on a 24/7/365 basis.
Data driven.
The primary function of many WebApps is to use hypermedia to
present text, graphics, audio, and video content to the end-user.
Security.
to protect sensitive content and provide secure modes of data
transmission
strong security measures must be implemented throughout the
infrastructure that supports a WebApp and within the application itself

Content sensitive.
The quality and nature of content remains an important determinant of
the quality of a WebApp.
Continuous evolution.
Unlike conventional application software that evolves over a series of
planned, chronologically-spaced releases, Web applications evolve
continuously.
Immediacy.
WebApps often exhibit a time to market that can be a matter of a few
days or weeks.
With modern tools, sophisticated Web pages can be produced in only a few
hours.

(Jul Nov 2016)
Complex Web Systems - Range of Complexity
Complex Web Systems - Characteristics
Todays focus is on large-scale and ubiquitously useable WebApps

Many users, languages, cultures.
Access mechanisms.
User Agents, versions.
Presents large volume of interrelated information (including different

media) and processes.
Appropriate presentation.
Progression through activities finish one thing before starting another.
Intuitive system feedback.

(Jul Nov 2016)
Complex Web Systems Characteristics (contd.)
Growing and increasing complexity

Many product iterations/versions/refinements (calls for Reuse)
Many developers and operators, complex handling of temporal media
(e.g. publishing of company news, earlier versions of Web pages)
Customization, Personalization, Security issues
and a lot more...

E.g. Up-to-date by following trends
Web Application Development - Current Practices

Still Ad-Hoc instead of a disciplined procedure
Copy-and-Paste Paradigm
Lacks rigor, systematic approach

Gap between Design Model and Implementation Model
completed system is often not what the user wants
Short lifecycle of a Web Application -> Maintenance and Evolution
issues -> Reuse issues
Time and cost overruns
Does not meet performance requirements
Lacks scalability and maintainability, hence limited useful life
Resources are wasted

(Jul Nov 2016)
Complex Web Systems- Project Failure Rates
Ref: IEEE Software, www.computer.org/software
Complex Web Systems - Project Failure Rates (contd.)
Ref: IEEE Software, www.computer.org/software

(Jul Nov 2016)
Problems with Complex Web System Projects
(Source: Epner, M., Cutter Consortium)
WebApp Development vs. Software Development
Web-based systems:
Are often document-oriented containing static or dynamic content
More emphasis on look and feel
content-driven
Need to cater to users with diverse skills and capabilities
typically constrained to a short development time making it difficult to
apply the same levels of formal planning and testing used in software
development.

(Jul Nov 2016)
WebApp Development vs. Software Development (contd.)
Web-based systems:
Differ by means of their access and delivery medium
Have different life spans
Have differing development requirements
Developers are vastly varied in terms of their background, skills, knowledge,
and system understanding.
Web-based systems:
Should be scalable
Have varying performance requirements must be able to cope with
uncertain, random heavy demands on services
Must be secure
Are subject to assorted legal, social, and ethical scrutiny
Traditional vs. Web

In Traditional Projects: In Web Projects:
Quality product at lowest cost Usable product in shortest
10-100 team members time
12-18 month horizon 3-10 team members
$ millions 3-6 month horizon
Requirements-based; structured $ thousands
phases; document-driven Agile methods; prototypes
OO methods Component-based methods;
Rigid processes multimedia; visual
Complex; poor reusability programming
Experienced, professional Ad-hoc processes
developers Standardized; high reusability
Multimedia designers; Web
programmers; marketers

(Jul Nov 2016)
Web Engineering (WebE)
The application of systematic, disciplined, and

quantifiable approaches to the design, production,
deployment, operation, maintenance and evolution of
Web-based software products.
---Gaedke, 2000
Key Knowledge Areas

(Jul Nov 2016)
Overall WebE Development Process

Context
Analysis
Requirement
Analysis
Quality Control & Assurance

Product Process
Project Management
Model Model
Documentation
Project Plan
Web App
Development
Web App Maintenance
WebE Development Process

Context Analysis

(Jul Nov 2016)
WebE Context Analysis

Context
Identify the stake holders and their broader requirements and
experiences.
Identify the corporate requirements in relation to look and feel,
performance, security and governance.
Content
Establish what information needs to be on the web site, how to get this
information and how often this information is changing (immediate,
short term, medium term)
Identify the functions the Web site needs to provide ( immediate, short
term, medium term).
Users - potential users, their characteristics and needs.

Requirement Analysis

(Jul Nov 2016)
WebE Requirements Analysis
Many taxonomies exist to describe requirements, but most divide

them into two groups:
Functional describes the capabilitys purpose

Use-case diagrams, activity diagrams, group specifications, data dictionary, site
view specifications, style guidelines.
Non-functional describes the capabilitys properties

Usabalility modeling, acceptance modeling, .
WebE Requirements Analysis (contd.)

Functional Requirement Types
Data Requirements
How information is stored and managed
Interface Requirements
How the user is going to interact with the application
Navigational Requirements
How the user is going to navigate through the application
Personalization Requirements
How the application will adapt itself according to user or environment
profile
Transactional Requirements
How the application behaves internally
Security Requirements

(Jul Nov 2016)
WebE Requirements Analysis (contd.)

Non-Functional Requirement Types
Content
Quality
Usability, Portability, Scalability
Reliability, Efficiency, Maintainability
System Environment
User Interface
Self-explanatory & intuitive
Evolution
Project Constraints
Requirement analysis An Example
Revision and formalization of the collected requirements, producing in

output a set of semi-formal specifications, typically in terms of:
Group specification
Use-case specification
Data dictionary specification
Site view specification
Style guidelines specification
Ref: WebML Acer Usecase

(Jul Nov 2016)
RA Specification Types.
Group specification
Clustering of users into groups (formally described)
Groups Group Group name: Mar-Com Manager
Hierarchy: Description: Description: marketing and communication personnel inserting,

modifying, and deleting mkt materials.
Profile data: First name, last name, email, office address.
Profile data are provided explicitly by the user.
Corporate Super-group: Corporate.
Sub-groups: None.
Relevant use cases: Login, Add a news item, Modify a news item,
Delete a news item, Add a news category, Modify
Mar-Com Supervisor a news category, Delete a news category, "Modify
manager
profile data".
Objects - read Product and Product News.
mode:
Objects - content Product News.
Admin
mgmt mode:
Formal description of units of interaction with the application by users

of a given group (e.g., thru tables or UML diagrams)
1. Use cases list for a user (use case diagram)
Add a news Login Add a news

item category
Modify a news Modify a news

item category
Remove a Remove a
news item news category
Mar-Com Manager

(Jul Nov 2016)
2. Single use case specification (table or activity diagram)
User Application Server Database
Initial Request Send Form
Input Credentials Accept Credentials Verify Credentials
Select Home Page Elaborate Page
Default Home Page List

Index of Home Pages
Serve Request
Receive Home Page
2. Single use case specification (table or activity diagram)

Title Login of user belonging to multiple groups
Purpose To express how users with more than one role access the functions
of the applications.
Pre-condition A user that belongs to multiple groups is registered. For each group,
the site view serving the requirements of the group members is
defined.
Post-condition The user successfully logs into the application and accesses the site
view corresponding to one of his groups.
Workflow The following steps must be performed:

1.The user receives an input form asking for username and password;
2.The user inputs his credentials;
3.If the credentials are correct, the user is authenticated, the list of
groups the user belongs to is determined, and the list of names and
URLs of the home pages of the site view of such groups is displayed
to user;
4.The user chooses one entry from the list, and enters into the
selected site view.

(Jul Nov 2016)
Data dictionary specification
List of the main information objects identified during data requirements

collection
Each entry can be specified by:
Name
Synonyms NewsItem
Description Piece of news
Sample instances A corporate or product piece of news
Properties TravelMate 610 launched, 20th June 01
Relationships Title, Body, Image, Date,
NewsToProduct
Components
None
Super-concept
None
Sub-concepts
Highlighted news
Sitemap specification
IN: list of user groups, list of use cases, data dictionary

OUT: list of needed site maps, specified by:
Name
Description
Target User Groups
Implemented use cases
Site view map: a table illustrating the different areas that compose the
site view. Each area is specified by:
Area Name
Area Description
Accessed/Managed Objects
Priority level

(Jul Nov 2016)
Site View News Content Management

Description Includes the pages through which the Mar-Com Managers will access content management
functions, for inserting or updating content about news categories and news items.
1.2.d Site view specification example

User Groups Mar-Com Managers Site Map specification
Use Cases Login, Add a news category, Edit a news category, Remove a news category, Add a
news item, Edit a news item, Remove a news item.
Site View Map
Area Name Area Description Objects Priority
News Content In the default page, the user accesses the list of countries NewsCategory High
Management for which he is content manager and selects a country to NewsItem
administer. In the News Category page, the user accesses
the list of news categories for the selected country. Here,
the user can perform content management functions over
news categories, according to the use cases Add a news
category, Edit a news category, Remove a news
category. Otherwise, he can select one category, and
access the list of the available news items in the selected
category.
In the News page, the user can perform content
management functions over a selected news item
according to the use cases Add a news item, Edit a news
item, Remove a news item.
25-Aug-16
V. Style guidelines specification
Rules for the presentation of pages:

Specification of standard page grids: rows, columns and cells
arrangement
Content positioning specification: banners, logo, menus positioning
Graphical guidelines: rules for graphic items like fonts, colors, borders
and margins
Device-specific and browser-specific guidelines
Example: Mock-ups: sample representations of a few typical

application pages (for a specific device and rendition language)

(Jul Nov 2016)
Style guidelines specification
800 px
Page Area
1st Column 2nd Column
Main Menu Area
Main Content Area
Foot Area
150 px

Modeling/Design

(Jul Nov 2016)
Why Create Models?
Define an abstract view of a real-world entity

Finding & discovering objects/concepts in a domain
Assigning responsibilities to objects
Tool of thought
Reduce complexity
Document design decisions
Means of communication
The Role of Model in the Development

Models as sketch
For communicating ideas and alternatives
No significant thoughts into practicality/implementation.
degree of model-drivenness
Models as blueprint
All design decisions (maybe of a particular area) are laid out
Essence: Completeness programming should be pretty
straightforward
Issue of reverse engineering
Models as program
Applications are automatically generated.
Essence: models become the source code

(Jul Nov 2016)
Model - Code Interplay
Code only Code Roundtrip Model-centric /

Model only
Visualization Engineering Model-driven
Model Model Model Model
Code Code Code Code
"Models as Code"
Model-Driven ...
Systematic development on basis of models
Models become the first hand artifacts in the software development cycle
Key concepts
abstraction from implementation detail
systematic transformations
Related Terminology
Model Driven [Software] Engineering (MDE),
Model Driven [Software] Development (MDD/MDSD),
Model Driven Architecture (MDA)
Model Driven Web Engineering (MDWE)

(Jul Nov 2016)
Model Driven Architecture (MDA)

defined and developed by the Object Management Group (OMG)
(March 2001)
MDA is:
open, vendor-neutral approach to interoperability using OMG's
modeling specifications:
Unified Modeling Language (UML), Meta-Object Facility (MOF) and
Common Warehouse Model (CWM)
Main ideas:
Addresses the complete system development life cycle
Separate specification from implementation
Specify a system that is independent of a platform
Transform a platform-independent (PIM) system specification into a
specific platform (PSM)
Code generation
Developing WebApps in the MDA
Platform Independent Model (PIM)

PIM represents business Platform
functionality and behavior without Independent
Model
technology details
Platform Specific Model (PSM)
Platform
Applies a standard mapping to Specific
Model
create or generate a PSM from the
PIM
Code Model Code
Model
Create or generate the code for
each PSM.

(Jul Nov 2016)
Content Structure Model

Relation
Class name
Class attributes
Composition
Class operations
Invariant
Derived attribute
Content Behavior Model

Initial State
Condition
Final State

(Jul Nov 2016)
Navigation Structure Model
Navigation Access Model
25-Aug-16

(Jul Nov 2016)
Presentation Structure Model
Presentation Behavior Model

(Jul Nov 2016)

Implementation
Implementation Approaches
Model View Controller (MVC)
Model
responds to state queries
exposes application functionality
notifies views of changes
View
renders the models
requests updates from models
sends user interaction to controller
allows controller to select view
Controller
defines application behavior
maps user actions to model updates
selects view for response (one for each functionality)

(Jul Nov 2016)
Model-View-Controller
Adaptation of MVC for the Web

stateless connection between the client and the server
notification of view changes
re-querying the server to discover modification of applications state
Client/Server (2-Layer)
Client
Client
Server
Web/App Server Services
Database Dynamic HTML

Static HTML

(Jul Nov 2016)
Client/Server (2-Layer)
N-Layer Architectures
Client
Firewall
Proxy
Presentation Layer
Web Server
Business Layer
Application Server Backend
(Business Logic, Connectors,
(Legacy Application,
Personalization, Data Access)
Enterprise Info System)
Data Layer
DBMS B2B

(Jul Nov 2016)
N-Layer Architectures

Testing and Deployment

(Jul Nov 2016)
Testing and Usability
Testing
Checking the conformance of the application versus its design
requirements
Oriented to functional aspects
Usability
Design and verifying the conformance of the application versus its user
ability and capability of interaction
Oriented to non-functional aspects
Testing and Usability are orthogonal aspects

In some cases they slightly overlap!
Testing Phases
Link Testing
Finding broken links

Can be automated through a spider
Doesnt work for pages with no incoming links.
Finding orphan pages
Orphans are pages with no links back to the navigation structure.
Users get frustrated and leave.
Capturing statistics
Depth & breadth of navigation.
Distance between two related pages.
# of links.
Load times.

(Jul Nov 2016)
Testing Phases
Browser Testing
Browsers vary by:

Manufacturer
Version
Operating system
Device
Configuration (stylesheets, JavaScript on/off)
W3C Standard compliance
Important questions to ask:
How is state managed?
Can a (dynamic) web page be bookmarked?
Can users open multiple windows?
What happens when cookies and/or scripting is turned off?
Testing Phases
Security Testing
A systematic test scheme is strongly encouraged.
Testing for correctness is not sufficient

Is confidential data inadvertently exposed?
What happens if we input incomplete data?
What happens if we inject malicious code?
SSL-encrypted pages
Is our SSL certificate working?
What happens if I try to access a protected page/site in a non-secure way (i.e.,
http://)?

(Jul Nov 2016)
Testing Phases
Load Testing
Does the system meet required response times and throughput?
Load profile - expected access types, visits per day, transaction types,
transactions per session, etc.
determine the range of values for response times and throughput

(upper and lower limits)
Evaluate the results to look for bottlenecks and potential problems to

support future scalability.
Testing Phases
Stress Testing
How does the system behave under abnormal/extreme conditions?

If the system meets the target responses times and throughputs
If the system responds with an appropriate error message. (i.e. graceful
degradation)
If the system crashes (it should NOT!)
How quickly the system recovers to normal operation.

(Jul Nov 2016)
Testing Phases
Continuous Testing
Simulates usage over a long period of time
Testing for errors that pop up because resources arent released by an

operation.
Unreleased database connections
Other memory leaks
Typically, running the operation a few times doesnt produce an error,

hence the need for continuous testing.
Usability
ISO/IEC standard definition (1998):

[T]he extent to which a product can be used by specified users within
a specified usage context to achieve specified goals effectively,
efficiently, and satisfactorily.
Specific focus on response times, efficiency, consistency in text layout,

navigation, colors, page structure, page elements, readability..
Web Content Accessibility Guidelines 2.0 (WCAG, 2008) published

by the W3Cs WAI (Conformance Levels - A, AA, AAA)
https://www.w3.org/TR/WCAG20/
https://www.w3.org/WAI/WCAG20/quickref/

(Jul Nov 2016)
Further reading
Murugesan,S and A.Ginige, A. "Web Engineering: Introduction and
Perspectives, Idea Group Publishing, 2005.
http://www.idea-group.com/downloads/excerpts/01%20Suh.pdf
M.J. Escalona and N. Koch, Requirements Engineering for Web Applications

- A Comparative Study, JWE Vol.2, N. 3
http://www.rintonpress.com/xjwe1/jwe-2-3/193-212.pdf
Web Engineering, IEEE MultiMedia, Jan.Mar. 2001 (Part 1) and AprilJune

2001 (Part 2).
http://csdl2.computer.org/persagen/DLPublication.jsp?pubtype=m&acron
ym=mu
Usability Engineering, IEEE Software, JanuaryFebruary 2001.
Web Engineering, Cutter IT Journal, 14(7), July 2001.


Web Engineering (Lecture Notes)

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Engineering (Lecture Notes)

Transféré par

Droits d'auteur :

Formats disponibles

IT702 Advanced Web Technologies 29-08-2016

(Jul Nov 2016)

Basics, Need, Concepts and Trends

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Web Application a distributed application that accomplishes a

Web System an infrastructure or system enabling the operation of a

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Attributes of WebApps (contd.)

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Attributes of WebApps (contd.)

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Attributes of WebApps (contd.)

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Complex Web Systems - Range of Complexity

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Complex Web Systems - Characteristics

Todays focus is on large-scale and ubiquitously useable WebApps

Presents large volume of interrelated information (including different

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Complex Web Systems Characteristics (contd.)

Growing and increasing complexity

and a lot more...

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Web Application Development - Current Practices

Lacks rigor, systematic approach

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Complex Web Systems- Project Failure Rates

Ref: IEEE Software, www.computer.org/software

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Complex Web Systems - Project Failure Rates (contd.)

Ref: IEEE Software, www.computer.org/software

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Problems with Complex Web System Projects

(Source: Epner, M., Cutter Consortium)

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

WebApp Development vs. Software Development

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

WebApp Development vs. Software Development (contd.)

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Traditional vs. Web

Dr. Sowmya Kamath S,

Web Engineering (WebE)

The application of systematic, disciplined, and

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Key Knowledge Areas

Dr. Sowmya Kamath S, Dept of IT, NITK Surathkal 25-Aug-16

Dr. Sowmya Kamath S,

Overall WebE Development Process

Quality Control & Assurance

Web App Maintenance

WebE Development Process

Dr. Sowmya Kamath S,