1

Web Engineering

A presentation byAthul Sai(P3MCA12012)Sreejith S(P3MCA12036)

2

Web ApplicationsWeb Applications

WebApps encompass: complete Web sites

Simple information Web sites Complex e-Commerce of 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.

WebApps encompass: complete Web sites

Simple information Web sites Complex e-Commerce of 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.

3

WebApp Attributes—IWebApp Attributes—I Network intensiveness. A WebApp resides on a network

and must serve the needs of a diverse community of clients.

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.

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.

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.

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.

4

WebApp Attributes—IIWebApp Attributes—II 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.

Content sensitive. The quality and aesthetic 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.

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.

Content sensitive. The quality and aesthetic 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.

5

WebApp Attributes—IIIWebApp Attributes—III 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. Security. In order 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.

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.

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. Security. In order 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.

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.

6

WebApp CategoriesWebApp Categories informational—read-only content is provided with simple navigation and links download—a user downloads information from the appropriate server customizable—the user customizes content to specific needs interaction—communication among a community of users occurs via chatroom,

bulletin boards, or instant messaging user input—forms-based input is the primary mechanism for communicating

need transaction-oriented—the user makes a request (e.g., places an order) that is

fulfilled by the WebApp service-oriented—the application provides a service to the user, e.g., assists the

user in determining a mortgage payment Portal—the application channels the user to other Web content or services

outside the domain of the portal application database access—the user queries a large database and extracts information data warehousing—the user queries a collection of large databases and extracts

information

informational—read-only content is provided with simple navigation and links download—a user downloads information from the appropriate server customizable—the user customizes content to specific needs interaction—communication among a community of users occurs via chatroom,

bulletin boards, or instant messaging user input—forms-based input is the primary mechanism for communicating

need transaction-oriented—the user makes a request (e.g., places an order) that is

fulfilled by the WebApp service-oriented—the application provides a service to the user, e.g., assists the

user in determining a mortgage payment Portal—the application channels the user to other Web content or services

outside the domain of the portal application database access—the user queries a large database and extracts information data warehousing—the user queries a collection of large databases and extracts

information

WebE layersWebE layers

7

8

The WebE ProcessThe WebE Process

Must accommodate: Incremental delivery Frequent changes Short timeline

Therefore, An incremental process model should be used in

virtually all situations An agile process model is appropriate in many

situations

Must accommodate: Incremental delivery Frequent changes Short timeline

Therefore, An incremental process model should be used in

virtually all situations An agile process model is appropriate in many

situations

9

The WebE ProcessThe WebE Process

software increment

Release

refactoring

business analysis formulation

iteration plan

analysis model content iteration function configuration

design model content architecture navigation interface

coding component test

acceptance test customer use

customer evaluation

10

The WebE Process Framework—IThe WebE Process Framework—I Customer communication

Business analysis defines the business/organizational context for the WebApp.

Formulation is a requirements gathering activity involving all stakeholders. The intent is to describe the problem that the WebApp is to solve

Planning The “plan” consists of a task definition and a timeline

schedule for the time period (usually measured in weeks) projected for the development of the WebApp increment.

Customer communication Business analysis defines the business/organizational

context for the WebApp. Formulation is a requirements gathering activity involving

all stakeholders. The intent is to describe the problem that the WebApp is to solve

Planning The “plan” consists of a task definition and a timeline

schedule for the time period (usually measured in weeks) projected for the development of the WebApp increment.

11

The WebE Process Framework—IIThe WebE Process Framework—II Modeling

Analysis model—establishes a basis for design Content Analysis. Interaction Analysis. Functional Analysis. Configuration Analysis.

Design model—represents key WebApp elements Content design Aesthetic design Architectural design Interface design Navigation design Component design

Modeling Analysis model—establishes a basis for design

Content Analysis. Interaction Analysis. Functional Analysis. Configuration Analysis.

Design model—represents key WebApp elements Content design Aesthetic design Architectural design Interface design Navigation design Component design

12

The WebE Process Framework—IIIThe WebE Process Framework—III Construction

WebE tools and technology are applied to construct the WebApp that has been modeled

Testing of all design elements

Delivery and Evaluation (Deployment) configure for its operational environment deliver to end-users, and Evaluation feedback is presented to the WebE team the increment is modified as required (the beginning of the next

incremental cycle)

Construction WebE tools and technology are applied to construct the WebApp

that has been modeled Testing of all design elements

Delivery and Evaluation (Deployment) configure for its operational environment deliver to end-users, and Evaluation feedback is presented to the WebE team the increment is modified as required (the beginning of the next

incremental cycle)

13

WebE—Best PracticesWebE—Best Practices Take the time to understand the business needs and product

objectives, even if the details of the WebApp are vague. Describe how users will interact with the WebApp using a

scenario-based approach Develop a project plan, even it its very brief. Spend some time modeling what it is that you’re going to build. Review the models for consistency and quality. Use tools and technology that enable you to construct the

system with as many reusable components as possible. Don’t rely on early users to debug the WebApp—design

comprehensive tests and execute them before releasing the system.

Take the time to understand the business needs and product objectives, even if the details of the WebApp are vague.

Describe how users will interact with the WebApp using a scenario-based approach

Develop a project plan, even it its very brief. Spend some time modeling what it is that you’re going to build. Review the models for consistency and quality. Use tools and technology that enable you to construct the

system with as many reusable components as possible. Don’t rely on early users to debug the WebApp—design

comprehensive tests and execute them before releasing the system.

14

Analysis Modeling for WebApps

15

AnalysisAnalysis Content Analysis. The full spectrum of content to be provided

by the WebApp is identified, including text, graphics and images, video, and audio data. Data modeling can be used to identify and describe each of the data objects.

Interaction Analysis. The manner in which the user interacts with the WebApp is described in detail. Use-cases can be developed to provide detailed descriptions of this interaction.

Functional Analysis. The usage scenarios (use-cases) created as part of interaction analysis define the operations that will be applied to WebApp content and imply other processing functions. All operations and functions are described in detail.

Configuration Analysis. The environment and infrastructure in which the WebApp resides are described in detail.

Content Analysis. The full spectrum of content to be provided by the WebApp is identified, including text, graphics and images, video, and audio data. Data modeling can be used to identify and describe each of the data objects.

Interaction Analysis. The manner in which the user interacts with the WebApp is described in detail. Use-cases can be developed to provide detailed descriptions of this interaction.

Functional Analysis. The usage scenarios (use-cases) created as part of interaction analysis define the operations that will be applied to WebApp content and imply other processing functions. All operations and functions are described in detail.

Configuration Analysis. The environment and infrastructure in which the WebApp resides are described in detail.

16

When Do We Perform Analysis?When Do We Perform Analysis?

In some WebE situations, analysis and design merge. However, an explicit analysis activity occurs when … the WebApp to be built is large and/or complex the number of stakeholders is large the number of Web engineers and other contributors is large the goals and objectives (determined during formulation) for

the WebApp will effect the business’ bottom line the success of the WebApp will have a strong bearing on

the success of the business

In some WebE situations, analysis and design merge. However, an explicit analysis activity occurs when … the WebApp to be built is large and/or complex the number of stakeholders is large the number of Web engineers and other contributors is large the goals and objectives (determined during formulation) for

the WebApp will effect the business’ bottom line the success of the WebApp will have a strong bearing on

the success of the business

17

The User HierarchyThe User Hierarchy

SafeHomeAssured.com user

Figure 18.1 User hierarchy for SafeHomeAssured.com

guest registered user

customer service staff

exist ing customernew customer

18

Use-Case DiagramUse-Case Diagram

Figure 18.2 Use-case diagram for new-customer

new customer

log-in to SafeHomeAssured.com

customize SafeHome

describe home layout

select SafeHome

components

save configuration

purchase configuration

view shopping cart

provide purchase data

recall saved configuration

peruse descriptive content

complete SafeHome order

customization functionality

e-commerce functionality

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

19

The Content ModelThe Content Model Content objects are extracted from use-cases

examine the scenario description for direct and indirect references to content

Attributes of each content object are identified The relationships among content objects and/or the

hierarchy of content maintained by a WebApp Relationships—entity-relationship diagram or UML Hierarchy—data tree or UML

Content objects are extracted from use-cases examine the scenario description for direct and

indirect references to content Attributes of each content object are identified The relationships among content objects and/or the

hierarchy of content maintained by a WebApp Relationships—entity-relationship diagram or UML Hierarchy—data tree or UML

20

Data TreeData Tree

Figure 18.3 Data tree for a SafeHome component

component

partNumber

partName

partType

description

price

MarketingDescription

Photograph

TechDescription

Schematic

Video

WholesalePrice

RetailPrice

21

Analysis ClassesAnalysis Classes

Analysis classes are derived by examining each use-case

A grammatical parse is used to identify candidate classes

A UML class diagram is developed for each analysis class

Analysis classes are derived by examining each use-case

A grammatical parse is used to identify candidate classes

A UML class diagram is developed for each analysis class

22

Analysis Class ExampleAnalysis Class Example

Figure 18.4 Analysis classes for use-case: select SafeHome components

BillOfMaterials

identifier priceTotal

addEntry() deleteEntry() editEntry() name() save() computePrice()

ProductComponent

partNumber partName partType description price

createNewItem() getDescription() getTechSpec

BoMItem

quantity price

addtoList() deletefromList()

Sensor Camera ControlPanel SoftFeature

1

*

1

*

23

The Interaction ModelThe Interaction Model

Composed of four elements: use-cases sequence diagrams state diagrams a user interface prototype

Each of these is an important UML notation

Composed of four elements: use-cases sequence diagrams state diagrams a user interface prototype

Each of these is an important UML notation

24

Sequence DiagramSequence Diagram

Figure 18.5 Sequence diagram for use-case: select SafeHome components

new customer

:Room :FloorPlan

describes

room*places room in f loor plan

:Product Component

selects product component*

:Billof Materials

add to BoM

FloorPlan Repository

save f loor plan conf iguration

save bill of materials

BoM Repository

25

State DiagramState Diagram

Figure 18.6 Partial state diagram for new customer interaction

new customer

Validating user

system status=“input ready” display msg = “enter userid” display msg =“enter pswd”

entry/ log-in requested do: run user validation exit/set user access switch

select “log-in”

userid validated

password validated

Selecting user action

system status=“link ready” display: navigation choices”

entry/ validated user do: link as required exit/user action selected

select other functions

select customization functionality

select e-commerce (purchase) functionality

Customizing

system status=“input ready” display: basic instructions

entry/validated user do: process user selection exit/ customization terminated

select descriptivecontent

room being defined

Defining room

system status=“input ready” display: room def. window

entry/ room def. selected do: run room queries do: store room variables exit/room completed

select descriptivecontent

Building floor plan

system status=“input ready” display: floor plan window

entry/ floor plan selected do: insert room in place do: store floor plan variables exit/room insertion completed

select descriptivecontent

select enter room in floor plan

Saving floor plan

system status=“input ready” display: storage indicator

entry/ floor plan save selected do: store floor plan exit/save completed

select save floor plan

room insertion completed

next selection

customization complete

all roomsdefined

26

The Functional ModelThe Functional Model

The functional model addresses two processing elements of the WebApp user observable functionality that is delivered by

the WebApp to end-users the operations contained within analysis classes

that implement behaviors associated with the class.

An activity diagram can be used to represent processing flow

The functional model addresses two processing elements of the WebApp user observable functionality that is delivered by

the WebApp to end-users the operations contained within analysis classes

that implement behaviors associated with the class.

An activity diagram can be used to represent processing flow

27

Activity DiagramActivity Diagram

Figure 18.7 Activity diagram for computePrice() operation

init ialize totalCost

invokecalcShippingCost

get price and quantity

components remain on BoMList

invoke determineDiscount

discount <= 0

discount>0 totalCost= totalCost - discount

taxTotal=totalCost x taxrate

no components remain on BoMList

lineCost = price x quantity

add lineCost to totalCost

priceTotal = totalCost + taxTotal + shippingCost

returns: shippingCost

returns: discount

28

The Configuration ModelThe Configuration Model Server-side

Server hardware and operating system environment must be specified

Interoperability considerations on the server-side must be considered

Appropriate interfaces, communication protocols and related collaborative information must be specified

Client-side Browser configuration issues must be identified Testing requirements should be defined

Server-side Server hardware and operating system environment

must be specified Interoperability considerations on the server-side must

be considered Appropriate interfaces, communication protocols and

related collaborative information must be specified Client-side

Browser configuration issues must be identified Testing requirements should be defined

29

Relationship-Navigation AnalysisRelationship-Navigation Analysis Relationship-navigation analysis (RNA) identifies relationships

among the elements uncovered as part of the creation of the analysis model

Steps: Stakeholder analysis—identifies the various user categories and

establishes an appropriate stakeholder hierarchy Element analysis—identifies the content objects and functional

elements that are of interest to end users Relationship analysis—describes the relationships that exist among

the WebApp elements Navigation analysis—examines how users might access individual

elements or groups of elements Evaluation analysis—considers pragmatic issues (e.g., cost/benefit)

associated with implementing the relationships defined earlier

Relationship-navigation analysis (RNA) identifies relationships among the elements uncovered as part of the creation of the analysis model

Steps: Stakeholder analysis—identifies the various user categories and

establishes an appropriate stakeholder hierarchy Element analysis—identifies the content objects and functional

elements that are of interest to end users Relationship analysis—describes the relationships that exist among

the WebApp elements Navigation analysis—examines how users might access individual

elements or groups of elements Evaluation analysis—considers pragmatic issues (e.g., cost/benefit)

associated with implementing the relationships defined earlier

30

Navigation Analysis-INavigation Analysis-I Should certain elements be easier to reach (require fewer

navigation steps) than others? What is the priority for presentation?

Should certain elements be emphasized to force users to navigate in their direction?

How should navigation errors be handled? Should navigation to related groups of elements be given

priority over navigation to a specific element. Should navigation be accomplished via links, via search-based

access, or by some other means? Should certain elements be presented to users based on the

context of previous navigation actions? Should a navigation log be maintained for users?

Should certain elements be easier to reach (require fewer navigation steps) than others? What is the priority for presentation?

Should certain elements be emphasized to force users to navigate in their direction?

How should navigation errors be handled? Should navigation to related groups of elements be given

priority over navigation to a specific element. Should navigation be accomplished via links, via search-based

access, or by some other means? Should certain elements be presented to users based on the

context of previous navigation actions? Should a navigation log be maintained for users?

31

Navigation Analysis-IINavigation Analysis-II Should a full navigation map or menu (as opposed to a single

“back” link or directed pointer) be available at every point in a user’s interaction?

Should navigation design be driven by the most commonly expected user behaviors or by the perceived importance of the defined WebApp elements?

Can a user “store” his previous navigation through the WebApp to expedite future usage?

For which user category should optimal navigation be designed?

How should links external to the WebApp be handled? overlaying the existing browser window? as a new browser window? as a separate frame?

Should a full navigation map or menu (as opposed to a single “back” link or directed pointer) be available at every point in a user’s interaction?

Should navigation design be driven by the most commonly expected user behaviors or by the perceived importance of the defined WebApp elements?

Can a user “store” his previous navigation through the WebApp to expedite future usage?

For which user category should optimal navigation be designed?

How should links external to the WebApp be handled? overlaying the existing browser window? as a new browser window? as a separate frame?

THANK YOU THANK YOU

32