copyright © 2006, r.s. pressman & associates, inc. boca raton, florida usa 561-213-6580 web...

Copyright © 2006, R.S. Pressman & Associates, Inc.

Boca Raton, Florida USA •• 561-213-6580 •• www.rspa.com

Web Engineering:Web Engineering:An Agile DisciplineAn Agile Discipline

presented byRoger S. Pressman, Ph.D.

R.S. Pressman & Associates, Inc.

Copyright © 2006, R.S. Pressman & Associates, Inc.Copyright © 2006, R.S. Pressman & Associates, Inc.Boca Raton, Florida USA •• 561-213-6580 •• www.rspa.comBoca Raton, Florida USA •• 561-213-6580 •• www.rspa.com

We’ll talk about …We’ll talk about …

• Web applications (WebApps) and Web applications (WebApps) and WebApp qualityWebApp quality

• A “process” for building WebAppsA “process” for building WebApps

– The role of software engineeringThe role of software engineering

– The need for “agility” and disciplineThe need for “agility” and discipline

• Web engineering methodsWeb engineering methods


Have you ever …Have you ever …• Visited a commercial Web site and …Visited a commercial Web site and …

– Encountered an interface that was poorly designed, Encountered an interface that was poorly designed, impossible to understand, and generally ineffectiveimpossible to understand, and generally ineffective

– Had trouble navigating to the content you neededHad trouble navigating to the content you needed

– Found content that was wrong or outdatedFound content that was wrong or outdated

– Initiated computational functions that didn’t workInitiated computational functions that didn’t work

– Had problems with forms, buttons, pull-downs …Had problems with forms, buttons, pull-downs …

• Exited a Web siteExited a Web site in frustration before you got the in frustration before you got the content you neededcontent you needed


What is a WebApp?What is a WebApp?

• Stated simply, a WebApp is Stated simply, a WebApp is “network-“network-centric” softwarecentric” software

• That means:That means:– It can be developed using some, if not all, of It can be developed using some, if not all, of

the lessons we’ve learned over the past 40 the lessons we’ve learned over the past 40 yearsyears

– If it is developed poorly, it can suffer from If it is developed poorly, it can suffer from most of the problems that have plagued most of the problems that have plagued software over the past 40 yearssoftware over the past 40 years


Attributes of WebAppsAttributes of WebApps

Network-centric.Network-centric. Reside on a network and must serve the Reside on a network and must serve the needs of a diverse community of clients. needs of a diverse community of clients.

Content-driven.Content-driven. Use hypermedia to present text, graphics, Use hypermedia to present text, graphics, audio, and video content to the end-user. audio, and video content to the end-user.

Functionally capable.Functionally capable. Deliver increasing complex Deliver increasing complex functionality.functionality.

Continuous evolution.Continuous evolution. Exhibit changing content, Exhibit changing content, functionality and aesthetics.functionality and aesthetics.


WebApp CharacteristicsWebApp Characteristics

Immediacy.Immediacy. The time to market for a complete WebApp The time to market for a complete WebApp can be a can be a matter of a few weeks or monthsmatter of a few weeks or months..

Security.Security. Strong security measures must be implemented Strong security measures must be implemented throughout the infrastructure that supports a WebApp throughout the infrastructure that supports a WebApp and within the application itself.and within the application itself.

Aesthetics.Aesthetics. An undeniable part of the appeal of a WebApp An undeniable part of the appeal of a WebApp is its look and feel. Aesthetics may have as much to do is its look and feel. Aesthetics may have as much to do with success as technical design. with success as technical design.


Describing WebApp quality …Describing WebApp quality …MaintainabilityMaintainability

FlexibilityFlexibility

TestabilityTestability

PortabilityPortability

ReusabilityReusability

InteroperabilityInteroperability

CorrectnessCorrectness EfficiencyEfficiency

ReliabilityReliability

UsabilityUsability

PRODUCT TRANSITIONPRODUCT TRANSITIONPRODUCT REVISIONPRODUCT REVISION

PRODUCT OPERATIONPRODUCT OPERATION

SecuritySecurity


Web EngineeringWeb Engineering(WebE)(WebE)

Web engineering proposes an Web engineering proposes an agile,agile, yet yet disciplined, frameworkdisciplined, framework for building industry-quality for building industry-quality WebApps.WebApps.


What is “agile?”What is “agile?”

• The ability to The ability to adapt your approachadapt your approach and your and your methods as conditions changemethods as conditions change

• The ability to The ability to accommodate changeaccommodate change throughout throughout a projecta project

• The ability The ability to deliver satisfying results quicklyto deliver satisfying results quickly, , using an using an incremental approachincremental approach

• The ability The ability to mold the approach (process) to to mold the approach (process) to the people,the people, notnot the people to the process the people to the process


What is “disciplined?”What is “disciplined?”

• Here’s what it is Here’s what it is notnot … …

– The SEI CMM or CMMIThe SEI CMM or CMMI

– ISO 9001ISO 9001

– US DoD Mil Std 498 or similar software US DoD Mil Std 498 or similar software engineering standardsengineering standards


What is “disciplined?”What is “disciplined?”• Here’s what it is …Here’s what it is …

– An adaptable, incremental approachAn adaptable, incremental approach• Tuned for (very) short duration projectsTuned for (very) short duration projects

• Characterized to manage continuous changeCharacterized to manage continuous change

• Populated by a set of “framework activities”Populated by a set of “framework activities”

– Implemented by “self-organizing” teamsImplemented by “self-organizing” teams• That define their own internal rolesThat define their own internal roles

• That select an development approach that is best for themThat select an development approach that is best for them

• That include stakeholders as well as technologistsThat include stakeholders as well as technologists

• That organize the work to meet the delivery requirementsThat organize the work to meet the delivery requirements


What is a framework?What is a framework?

• It must answer the following “common-sense” It must answer the following “common-sense” questions:questions:

– What does our customer want?What does our customer want?

– How will we organize to help the customer get what How will we organize to help the customer get what he wants?he wants?

– How do we represent the solution How do we represent the solution beforebefore we build it? we build it?

– How do we build and test the solution?How do we build and test the solution?

– How do we provide the solution to our customer?How do we provide the solution to our customer?


What is a “framework?”What is a “framework?”planningplanning

modelingmodeling

constructionconstructiondeploymentdeployment

communicationcommunication

start

increment

Umbrellaactivities


CommunicationCommunication

planning

modeling

constructiondeployment

communication

start

increment

Umbrellaactivities

• The entry point for the process…The entry point for the process…– FormulationFormulation = ask and answer a set of fundamental = ask and answer a set of fundamental

questions about the WebApp and its business contextquestions about the WebApp and its business context

– ElicitationElicitation = gather requirements that will serve as the = gather requirements that will serve as the basis for all activities that follow, and basis for all activities that follow, and

– NegotiationNegotiation = negotiate needs against the realities of time, = negotiate needs against the realities of time, resources, and technology.resources, and technology.


FormulationFormulation

• Addresses two questions:Addresses two questions:– What is the business motivation for the What is the business motivation for the

WebApp?WebApp?– Who will use the WebApp?Who will use the WebApp?

• Defines two categories of “goals”Defines two categories of “goals”

– Informational goalsInformational goals——identify specific content identify specific content and/or information for the end userand/or information for the end user

– Applicative goalsApplicative goals——identify the tasks that can identify the tasks that can be performed within the WebAppbe performed within the WebApp


ElicitationElicitation

• Gather requirementsGather requirements … recognizing that they … recognizing that they will change with timewill change with time

• Understand who will be using the WebAppUnderstand who will be using the WebApp … … and how their view may differ from othersand how their view may differ from others

• Consider specific business and technical Consider specific business and technical constraints and performance issuesconstraints and performance issues

• Create usage scenariosCreate usage scenarios (e.g., use-cases) (e.g., use-cases)


NegotiationNegotiation

Recognize that it’s not a competition.Recognize that it’s not a competition. Both will have to Both will have to compromise = “win - win.”compromise = “win - win.”

Map out a strategy.Map out a strategy. Decide what you’d like to achieve; what the Decide what you’d like to achieve; what the other party wants to achieve, and how you’ll go about making other party wants to achieve, and how you’ll go about making both happen.both happen.

Listen actively.Listen actively. You’ll gain knowledge that will help you to better You’ll gain knowledge that will help you to better negotiate your position.negotiate your position.

Focus on the other party’s interests.Focus on the other party’s interests. Don’t take hard positions if Don’t take hard positions if you want to avoid conflict.you want to avoid conflict.

Be creative.Be creative. Don’t be afraid to think “out of the box” if you’re at an Don’t be afraid to think “out of the box” if you’re at an impasse.impasse.

Be ready to commit.Be ready to commit. Once an agreement has been reached, Once an agreement has been reached, don’t waffle, commit to it and move on.don’t waffle, commit to it and move on.


PlanningPlanning

planning

modeling


communication

start

increment

Umbrellaactivities

• Adapting to the problem …Adapting to the problem …– Is the information we developed during Is the information we developed during communicationcommunication

sufficient?sufficient?

– How many How many “increments”“increments” will be built and what are they? will be built and what are they?

– How do we How do we organize our teamorganize our team??

– What What technical taskstechnical tasks will be performed? will be performed?

– What What work productswork products will be produced? will be produced?

– How will we How will we assess quality and manage changeassess quality and manage change? ?

– What is our What is our scheduleschedule??


ModelingModeling

planning

modeling


communication

start

increment

Umbrellaactivities

• Representing the problem and its solution …Representing the problem and its solution …– We model the We model the problem (requirements)problem (requirements) and its and its solution (design)solution (design) so so

that we can:that we can:• Assess the completeness of the requirementsAssess the completeness of the requirements

• Determine whether the design will solve the problemDetermine whether the design will solve the problem

• Consider alternative formulations of the problem and its solutionConsider alternative formulations of the problem and its solution

• Understand the impact of change Understand the impact of change

– Models are Models are nevernever perfect perfect - they are work products that are - they are work products that are produced to manage complexityproduced to manage complexity


Modeling: Modeling: Analyzing the ProblemAnalyzing the Problem

Content Analysis.Content Analysis. The full spectrum of content to be provided The full spectrum of content to be provided by the WebApp is identified. by the WebApp is identified.

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

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

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


Modeling: Do we always Modeling: Do we always create an analysis model?create an analysis model?

The answer depends on the following factors…

• the the size and complexitysize and complexity of WebApp increment of WebApp increment• the the number of stakeholdersnumber of stakeholders • the the size of the WebE teamsize of the WebE team• the the difficulty of communicationdifficulty of communication between all team between all team membersmembers• the degree to which the the degree to which the organization’s successorganization’s success is is directly dependent on the success of the WebAppdirectly dependent on the success of the WebApp


Modeling: What does an Modeling: What does an analysis model look like?analysis model look like?

Models can be created using UML …


Modeling: The Design PyramidModeling: The Design Pyramid

Interfacedesign

Aesthetic design

Content design

Navigation design

Architecture design

Component design

user

technology

Functional design


Modeling: Design tasksModeling: Design tasks• Interface designInterface design — describes the structure and — describes the structure and

organization of the user interface. It includes organization of the user interface. It includes – a representation of screen layouta representation of screen layout– a definition of the modes of interaction, anda definition of the modes of interaction, and– a description of navigation mechanismsa description of navigation mechanisms

• Aesthetic designAesthetic design — also called — also called graphic designgraphic design,, describes the “look and feel” of the WebApp. It describes the “look and feel” of the WebApp. It includes includes

– color schemescolor schemes– geometric layoutgeometric layout– text sizetext size– font and placementfont and placement– the use of graphics and related aesthetic decisions the use of graphics and related aesthetic decisions


• Content designContent design — defines the layout, — defines the layout, structure and outline for all content structure and outline for all content that is presented as part of the that is presented as part of the WebApp. It establishes WebApp. It establishes

– The information (content) architectureThe information (content) architecture– the nature of each content object within the the nature of each content object within the

architecturearchitecture– the relationships between content objects the relationships between content objects

Hierarchichal Structure Network Structure Linear Structure Matrix Structure

Modeling: Design tasksModeling: Design tasks



• Navigation designNavigation design — represents the — represents the navigational flow between content navigational flow between content objects and for all WebApp functions. It objects and for all WebApp functions. It addresses:addresses:

– Techniques that map relationships between Techniques that map relationships between content objects into navigation pathwayscontent objects into navigation pathways

– techniques that translate work flow into techniques that translate work flow into WebApp navigation pathsWebApp navigation paths

– mechanisms that allow users to travel mechanisms that allow users to travel within the information structure and within the information structure and understand where she is at any given timeunderstand where she is at any given time



• Functional designFunctional design — identifies the — identifies the overall behavior and functionality overall behavior and functionality which is supported by the WebApp – which is supported by the WebApp – including:including:

– workflow supportworkflow support– content and interface adaptation and/or content and interface adaptation and/or

customizationcustomization– order entryorder entry– database processesdatabase processes– computational functionscomputational functions– other data processing activitiesother data processing activities


Modeling: Design tasksModeling: Design tasks• Architecture designArchitecture design — — identifies the overall identifies the overall

hypermedia structure for the WebApp hypermedia structure for the WebApp

– Conceptual architecture designConceptual architecture design identifies the identifies the overall structure for conceptual design of the overall structure for conceptual design of the WebAppWebApp

– Technical architecture designTechnical architecture design identifies the identifies the technical components and the interactions technical components and the interactions between the components that are required to between the components that are required to construct the WebApp construct the WebApp

• Component designComponent design — develops the detailed — develops the detailed processing logic required to define functional processing logic required to define functional components that implement a complete set of components that implement a complete set of WebApp functions WebApp functions


Modeling: Design GoalsModeling: Design Goals

• SimplicitySimplicity

• ConsistencyConsistency

• IdentityIdentity

• RobustnessRobustness

• NavigabilityNavigability

• Visual appealVisual appeal

• CompatibilityCompatibility

For examples of Web sites that compare good For examples of Web sites that compare good and bad designs, see the following:and bad designs, see the following:http://www.webpagesthatsuck.com/http://www.baddesigns.com/http://kerlins.net/bobbi/technology/webdesign/http://www.coolhomepages.com/cda/10commandments/http://www.4webmarketing.biz/webdesign/poorwebdesign.htmhttp://www.sundaysoftware.com/good-badsites.htm


Modeling: Modeling: Design PatternsDesign Patterns

A A design patterndesign pattern is a is a named nugget of named nugget of insightinsight which conveys the essence of a which conveys the essence of a proven solutionproven solution to a to a recurring problemrecurring problem within a within a certain contentcertain content amidst amidst competing competing concerns. concerns.

Brad AppletonBrad Appleton


Design Patterns: Design Patterns: WebApp ContextWebApp Context

• Information architecture patternsInformation architecture patterns

• Navigation patternsNavigation patterns

• Interaction patternsInteraction patterns

• Presentation patternsPresentation patterns

• Functional patternsFunctional patterns


Design patterns:Design patterns:RepositoriesRepositoriesWeb Design Patterns by Martijn van Welie , http://www.welie.com/patterns/

Improving Web Information Systems with Navigational Patternshttp://www8.org/w8-papers/5b-hypertext-media/improving/improving.html

Hypermedia Design Patterns Repository , http://www.designpattern.lu.unisi.ch/

IAWiki , http://iawiki.net/WebsitePatterns

IBM Patterns for e-Business, http://www-128.ibm.com/developerworks/patterns/

Patterns for Personal Web Sites http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html

Designing Interfaces: Patterns for Effective Interaction Designhttp://designinginterfaces.com/

WebPatterns, http://webpatterns.org/


Design patterns:Design patterns:RepositoriesRepositoriesThe Interaction Design Patterns Page, http://www.visi.com/~snowfall/InteractionPatterns.html

InteractionPatterns by TomErickson http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html

Improving Web Information Systems with Navigational Patterns http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html

An HTML 2.0 Pattern Language http://www.anamorph.com/docs/patterns/default.html

Common Ground - A Pattern Language for HCI Design

http://www.mit.edu/~jtidwell/interaction_patterns.html

Indexing Pattern Language

http://www.cs.brown.edu/~rms/InformationStructures/Indexing/Overview.html


ConstructionConstruction

• CodingCoding — the application of technology — the application of technology and tools to implement the designand tools to implement the design

• TestingTesting — validation and verification of — validation and verification of the webApp that is builtthe webApp that is built

planning

modeling


communication

start

increment

Umbrellaactivities


Testing WebAppsTesting WebApps

1.1. The The content model for the WebApp is reviewedcontent model for the WebApp is reviewed to uncover to uncover errors. Similar in many respects to copy-editing for a written errors. Similar in many respects to copy-editing for a written document. document.

2.2. The The design model for the WebApp is revieweddesign model for the WebApp is reviewed to uncover to uncover navigation errors. User scenarios drive the review process. navigation errors. User scenarios drive the review process.

3.3. Selected Selected processing components and Web pages are “unit processing components and Web pages are “unit tested.”tested.” Each Web page encapsulates content, navigation Each Web page encapsulates content, navigation links and processing elements (forms, scripts, applets). links and processing elements (forms, scripts, applets).

4.4. The The architecture is constructed and integration tests are architecture is constructed and integration tests are conducted.conducted. The strategy for integration testing depends on The strategy for integration testing depends on the architecture that has been chosen.the architecture that has been chosen.

planning

modeling

Construction(Testing)

deployment

communication

start

increment

Umbrellaactivities


Testing WebAppsTesting WebApps

5.5. The The assembled WebApp is tested for overall functionality and assembled WebApp is tested for overall functionality and content delivery.content delivery. Focuses on user visible actions and user Focuses on user visible actions and user recognizable outputs.recognizable outputs.

6.6. The The WebApp is implemented in a variety of different WebApp is implemented in a variety of different environmental configurationsenvironmental configurations and is tested for compatibility and is tested for compatibility with each configuration. with each configuration.

7. 7. The The WebApp is tested by a controlled and monitored WebApp is tested by a controlled and monitored population of end-users.population of end-users. A population of users that A population of users that encompasses every possible user role is chosen. encompasses every possible user role is chosen.

planning

modeling

Construction(Testing)

deployment

communication

start

increment

Umbrellaactivities


DeploymentDeployment

• Deliver a WebApp increment in order to:Deliver a WebApp increment in order to:

– provide functionalityprovide functionality to one or more user categories to one or more user categories

– gain feedbackgain feedback from end users to determine whether from end users to determine whether requirements for the increment have been metrequirements for the increment have been met

– establish a base for modificationestablish a base for modification that will invariably that will invariably occur as a consequence of deploymentoccur as a consequence of deployment

planning

modeling

Constructiondeployment

communication

start

increment

Umbrellaactivities


WebE ResourcesWebE Resources

There are hundreds of excellent web-based There are hundreds of excellent web-based resources for WebE. A good starting place:resources for WebE. A good starting place:

http://www.rspa.com/spi/index.htmlhttp://www.rspa.com/spi/index.html

A new book on Web Engineering:A new book on Web Engineering:

Pressman, R. and D. Lowe, Pressman, R. and D. Lowe, Web Engineering: A Web Engineering: A Practitioner’s Approach,Practitioner’s Approach, McGraw-Hill, to be McGraw-Hill, to be published, 2008.published, 2008.

This presentation may be downloaded from: This presentation may be downloaded from: http://www.rspa.com/download/Brazil2006.ppthttp://www.rspa.com/download/Brazil2006.ppt


Web EngineeringWeb Engineering

“ “ Those who forget the past are doomed to Those who forget the past are doomed to repeat it …” repeat it …” (George Santayana)(George Santayana)

copyright © 2006, r.s. pressman & associates, inc. boca raton, florida usa 561-213-6580 web...

Documents

pressman associates

boca raton

florida usa

complete webapp

neededfound content

video content

webapp qualitya process

projectthe ability