1. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Web Engineering: An Agile Discipline presented by Roger S. Pressman, Ph.D. R.S. Pressman & Associates, Inc.

2. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com We’ll talk about … Web applications (WebApps) and WebApp qualityWeb applications (WebApps) and WebApp quality A “process” for building WebAppsA “process” for building WebApps –The role of software engineering –The need for “agility” and discipline Web engineering methodsWeb engineering methods

3. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Have you ever … Visited a commercial Web site and …Visited a commercial Web site and … –Encountered an interface that was poorly designed, impossible to understand, and generally ineffective –Had trouble navigating to the content you needed –Found content that was wrong or outdated –Initiated computational functions that didn’t work –Had problems with forms, buttons, pull-downs … Exited a Web site in frustration before you got the content you neededExited a Web site in frustration before you got the content you needed

4. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com What is a WebApp? Stated simply, a WebApp is “network- centric” softwareStated simply, a WebApp is “network- centric” software That means:That means: –It can be developed using some, if not all, of the lessons we’ve learned over the past 40 years –If it is developed poorly, it can suffer from most of the problems that have plagued software over the past 40 years

5. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Attributes of WebApps Network-centric. Reside on a network and must serve the needs of a diverse community of clients. Content-driven. Use hypermedia to present text, graphics, audio, and video content to the end-user. Functionally capable. Deliver increasing complex functionality. Continuous evolution. Exhibit changing content, functionality and aesthetics.

6. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com WebApp Characteristics Immediacy. The time to market for a complete WebApp can be a matter of a few weeks or months. Security. Strong security measures must be implemented throughout the infrastructure that supports a WebApp and within the application itself. Aesthetics. An undeniable part of the appeal of a WebApp is its look and feel. Aesthetics may have as much to do with success as technical design.

7. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Describing WebApp quality … Maintainability Flexibility Testability Portability Reusability Interoperability Correctness Efficiency Reliability Usability PRODUCT TRANSITION PRODUCT REVISION PRODUCT OPERATION Security

8. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Web Engineering (WebE) Web engineering proposes an agile, yet disciplined, framework for building industry-quality WebApps.

9. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com What is “agile?” The ability to adapt your approach and your methods as conditions changeThe ability to adapt your approach and your methods as conditions change The ability to accommodate change throughout a projectThe ability to accommodate change throughout a project The ability to deliver satisfying results quickly, using an incremental approachThe ability to deliver satisfying results quickly, using an incremental approach The ability to mold the approach (process) to the people, not the people to the processThe ability to mold the approach (process) to the people, not the people to the process

10. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com What is “disciplined?” Here’s what it is not …Here’s what it is not … –The SEI CMM or CMMI –ISO 9001 –US DoD Mil Std 498 or similar software engineering standards

11. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com What is “disciplined?” Here’s what it is …Here’s what it is … –An 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” 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

12. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com What is a framework? It must answer the following “common-sense” questions:It must answer the following “common-sense” questions: –What does our customer want? –How will we organize to help the customer get what he wants? –How do we represent the solution before we build it? –How do we build and test the solution? –How do we provide the solution to our customer?

13. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com What is a “framework?” planningmodeling construction deployment communication start increment Umbrella activities

14. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Communication planning modeling construction deployment communication start increment Umbrella activities The entry point for the process…The entry point for the process… –Formulation = ask and answer a set of fundamental questions about the WebApp and its business context –Elicitation = gather requirements that will serve as the basis for all activities that follow, and –Negotiation = negotiate needs against the realities of time, resources, and technology.

15. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Formulation Addresses two questions:Addresses two questions: –What is the business motivation for the WebApp? –Who will use the WebApp? Defines two categories of “goals”Defines two categories of “goals” –Informational goals—identify specific content and/or information for the end user –Applicative goals—identify the tasks that can be performed within the WebApp

16. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Elicitation Gather requirements … recognizing that they will change with timeGather requirements … recognizing that they will change with time Understand who will be using the WebApp … and how their view may differ from othersUnderstand who will be using the WebApp … and how their view may differ from others Consider specific business and technical constraints and performance issuesConsider specific business and technical constraints and performance issues Create usage scenarios (e.g., use-cases)Create usage scenarios (e.g., use-cases)

17. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Negotiation Recognize that it’s not a competition. Both will have to compromise = “win - win.” Map out a strategy. Decide what you’d like to achieve; what the other party wants to achieve, and how you’ll go about making both happen. Listen actively. You’ll gain knowledge that will help you to better negotiate your position. Focus on the other party’s interests. Don’t take hard positions if you want to avoid conflict. Be creative. Don’t be afraid to think “out of the box” if you’re at an impasse. Be ready to commit. Once an agreement has been reached, don’t waffle, commit to it and move on.

18. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Planning planning modeling construction deployment communication start increment Umbrella activities Adapting to the problem …Adapting to the problem … –Is the information we developed during communication sufficient? –How many “increments” will be built and what are they? –How do we organize our team? –What technical tasks will be performed? –What work products will be produced? –How will we assess quality and manage change? –What is our schedule?

19. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling planning modeling construction deployment communication start increment Umbrella activities Representing the problem and its solution …Representing the problem and its solution … –We model the problem (requirements) and its solution (design) so 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 changeUnderstand the impact of change –Models are never perfect - they are work products that are produced to manage complexity

20. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Analyzing the Problem Content Analysis. The full spectrum of content to be provided by the WebApp is identified. 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. Configuration Analysis. The environment and infrastructure in which the WebApp resides are described in detail.

21. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Do we always create an analysis model? The answer depends on the following factors… the size and complexity of WebApp increment the size and complexity of WebApp increment the number of stakeholders the number of stakeholders the size of the WebE team the size of the WebE team the difficulty of communication between all team members the difficulty of communication between all team members the degree to which the organization’s success is directly dependent on the success of the WebApp the degree to which the organization’s success is directly dependent on the success of the WebApp

22. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: What does an analysis model look like? Models can be created using UML …

23. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: The Design Pyramid

24. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Design tasks Interface design — describes the structure and organization of the user interface. It includesInterface design — describes the structure and organization of the user interface. It includes –a representation of screen layout –a definition of the modes of interaction, and –a description of navigation mechanisms Aesthetic design — also called graphic design, describes the “look and feel” of the WebApp. It includesAesthetic design — also called graphic design, describes the “look and feel” of the WebApp. It includes –color schemes –geometric layout –text size –font and placement –the use of graphics and related aesthetic decisions

25. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Content design — defines the layout, structure and outline for all content that is presented as part of the WebApp. It establishesContent design — defines the layout, structure and outline for all content that is presented as part of the WebApp. It establishes –The information (content) architecture –the nature of each content object within the architecture –the relationships between content objects Modeling: Design tasks

26. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Design tasks Navigation design — represents the navigational flow between content objects and for all WebApp functions. It addresses:Navigation design — represents the navigational flow between content objects and for all WebApp functions. It addresses: –Techniques that map relationships between content objects into navigation pathways –techniques that translate work flow into WebApp navigation paths –mechanisms that allow users to travel within the information structure and understand where she is at any given time

27. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Design tasks Functional design — identifies the overall behavior and functionality which is supported by the WebApp – including:Functional design — identifies the overall behavior and functionality which is supported by the WebApp – including: –workflow support –content and interface adaptation and/or customization –order entry –database processes –computational functions –other data processing activities

28. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Design tasks Architecture design — identifies the overall hypermedia structure for the WebAppArchitecture design — identifies the overall hypermedia structure for the WebApp –Conceptual architecture design identifies the overall structure for conceptual design of the WebApp –Technical architecture design identifies the technical components and the interactions between the components that are required to construct the WebApp Component design — develops the detailed processing logic required to define functional components that implement a complete set of WebApp functionsComponent design — develops the detailed processing logic required to define functional components that implement a complete set of WebApp functions

29. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Design Goals SimplicitySimplicity ConsistencyConsistency IdentityIdentity RobustnessRobustness NavigabilityNavigability Visual appealVisual appeal CompatibilityCompatibility For examples of Web sites that compare good 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/10comma ndments/ http://www.coolhomepages.com/cda/10comma ndments/ http://www.4webmarketing.biz/webdesign/poor webdesign.htm http://www.4webmarketing.biz/webdesign/poor webdesign.htm http://www.sundaysoftware.com/good- badsites.htm http://www.sundaysoftware.com/good- badsites.htm

30. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Modeling: Design Patterns A design pattern is a named nugget of insight which conveys the essence of a proven solution to a recurring problem within a certain content amidst competing concerns. Brad Appleton

31. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Design Patterns: WebApp Context Information architecture patternsInformation architecture patterns Navigation patternsNavigation patterns Interaction patternsInteraction patterns Presentation patternsPresentation patterns Functional patternsFunctional patterns

32. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Design patterns: Repositories Web Design Patterns by Martijn van Welie, http://www.welie.com/patterns/ http://www.welie.com/patterns/ Improving Web Information Systems with Navigational Patterns http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html Hypermedia Design Patterns Repository, http://www.designpattern.lu.unisi.ch/ http://www.designpattern.lu.unisi.ch/ IAWiki, http://iawiki.net/WebsitePatterns http://iawiki.net/WebsitePatterns IBM Patterns for e-Business, http://www- 128.ibm.com/developerworks/patterns/ 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 Design http://designinginterfaces.com/ WebPatterns, http://webpatterns.org/ http://webpatterns.org/

33. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Design patterns: Repositories The Interaction Design Patterns Page, http://www.visi.com/~snowfall/InteractionPatterns.html 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

34. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Construction Coding — the application of technology and tools to implement the designCoding — the application of technology and tools to implement the design Testing — validation and verification of the webApp that is builtTesting — validation and verification of the webApp that is built planning modeling construction deployment communication start increment Umbrella activities

35. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Testing WebApps 1.The content model for the WebApp is reviewed to uncover errors. Similar in many respects to copy-editing for a written document. 2.The design model for the WebApp is reviewed to uncover navigation errors. User scenarios drive the review process. 3.Selected processing components and Web pages are “unit tested.” Each Web page encapsulates content, navigation links and processing elements (forms, scripts, applets). 4.The architecture is constructed and integration tests are conducted. The strategy for integration testing depends on the architecture that has been chosen. planning modeling Construction (Testing) deployment communication start increment Umbrella activities

36. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Testing WebApps 5.The assembled WebApp is tested for overall functionality and content delivery. Focuses on user visible actions and user recognizable outputs. 6.The WebApp is implemented in a variety of different environmental configurations and is tested for compatibility with each configuration. 7. The WebApp is tested by a controlled and monitored population of end-users. A population of users that encompasses every possible user role is chosen. planning modeling Construction (Testing) deployment communication start increment Umbrella activities

37. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Deployment Deliver a WebApp increment in order to:Deliver a WebApp increment in order to: –provide functionality to one or more user categories –gain feedback from end users to determine whether requirements for the increment have been met –establish a base for modification that will invariably occur as a consequence of deployment planning modeling Construction deployment communication start increment Umbrella activities

38. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com WebE Resources There are hundreds of excellent web-based resources for WebE. A good starting place: http://www.rspa.com/spi/index.html A new book on Web Engineering: Pressman, R. and D. Lowe, Web Engineering: A Practitioner’s Approach, McGraw-Hill, to be published, 2008. This presentation may be downloaded from: http://www.rspa.com/download/Brazil2006.ppt

39. Copyright © 2006, R.S. Pressman & Associates, Inc. Boca Raton, Florida USA 561-213-6580 www.rspa.com Web Engineering “ Those who forget the past are doomed to repeat it …” (George Santayana)