1. Web Engineering
Citra N, MT
SI - UNIKOM

2. Overview Web engineering (WebE) Web engineering (WebE) formulation
the process used to create high quality Web-based applications (WebApps).
As WebApps become increasingly integrated in business strategies (e.g., e-commerce) the need to build reliable, usable, and adaptable systems grows in importance.
Web engineering (WebE) formulation
assesses the underlying need for the WebApp, the features and functions desired by users, and the scope of the development effort.
Web Engineering planning activities.
addresses the things that must be defined to establish a work plan
consider risks,
define a schedule,
establish mechanisms to track the work as the project proceeds.

3. WebApp Attributes Network intensive High concurrency
Unpredictable user loads
Performance (fast delivery)
High availability
Data driven
Content sensitive
Continuous evolution
Immediacy
Security
Aesthetics

4. WebE Application Categories
Informational
read only content provided with simple navigation
Downloads
user downloads information from server
Customizable
user customizes content to specific needs
Interaction
community of users communicate using chat rooms, bulletin boards, or instant messaging
User input
users complete on-line forms to communicate need
Transaction-oriented
user makes request fulfilled by WebApp - places an order

5. WebE Application Categories (2)
Service-oriented
application provides service to user, e.g., helps user determine mortgage payment
Portal
application directs users to other web content or services
Database access
user queries a large database and extracts information
Data warehousing
user queries large collection of databases and extracts information

6. WebApp Enabling Technologies
Component-based development
CORBA,
COM/DCOM,
JavaBeans
Security
encryption,
firewalls, etc.
Internet standards
HTML,
XML,
SGML

7. WebApp Development Process Characteristics
WebApps are often delivered incrementally
Changes occur frequently
Timelines are short

8. WebApp Process Framework
Customer communication
Business analysis - defines business and organizational context for WebApp
Formulation - involves stakeholders in gathering information needed to describe WebApp requirements
Planning
Plan consisting of task definition and timeline for the WebApp increment being developed
Modeling
Rapid analysis and design modeling tasks are adapted to WebApp
Models define the requirements and define the WebApp needed to satisfy them
Construction
WebE tools used to construct WebApp from model
Constructed increment is subjected to rapid tests to ensure errors (i.e., content, architecture, interface, navigation)
Delivery and evaluation
WebApp configured for its operational environment and delivered to end-users
Users evaluate WebApp in their environment and provide feedback to the development team
Increment is modified as required

9. WebE Task Set Customer Communication (Analysis/Formulation)
Identify business stakeholders
Formulate business context
Define key business goals and objectives
Define information and applicative goals
Identify the problem
Gather requirements
WebE Planning
Define development strategy
Assess risks
Define development schedule
Establish metrics for content management and change control

10. WebE Task Set WebE Modeling Refine content classes
Identify content relationships
Refine user tasks
Identify computational functions
Identify database requirements
Refine interface requirements
Design the WebApp architecture
Design the interface
Design the navigational scheme
Design appropriate security and privacy mechanisms
Review the design

11. WebE Task Set WebE Construction WebE Delivery and evaluation
Build or acquire the content and integrate it into WebAPP architecture
Establish navigational capabilities
Implement computational functions
Address configuration issues
Test all WebApp components
Test all WebApp components (content and function)
Test navigation
Test usability
Test security and performance
Test increment for different configurations
WebE Delivery and evaluation
Deliver WebApp increment to representative end-users
Evaluate end-user interaction
Assess lessons-learned and consider all end-user feedback
Make modifications to WebApp increment as required

12. Web Engineering Best Practices
Take time to understand the business needs and product objectives, even if WebApp details are vague.
Describe how users will interact with the WebApp using a scenario-based approach.
Develop a brief project plan.
Spend time modeling what you are going to build.
Review 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 users to debug the WebApp, design comprehensive tests and execute them before releasing the system.

14. WebE Formulation Activities
Identify business need for WebApp
Work with stakeholders to describe WebApp objectives
Develop user profile(s)
Define major features and functions
Develop an integrated statement of scope
Establish requirements gathering activity that leads to development of analysis model

15. Formulation Questions
What is the main motivation (business Need) for the WebApp?
What are the objectives that the WebApp must fulfill?
Who will use the WebApp?
What are the WebApp's informational goals (user's intention for using the content)?
What are the applicative goals (ability to perform tasks within the WebApp) for the WebApp?

16. Requirements Gathering
Goals
Identify content requirements
Identify functional requirements
Define interaction scenarios for each user class
Steps
Ask stakeholders to define user categories and develop descriptions for each
Communicate with stakeholders to define basic WebApp requirements
Analyze information gathered and use information to follow-up with stakeholders
Define use-cases that describe interaction scenarios for each user class

17. Defining User Categories
What is the user's overall objective when using the WebApp?
What is the user's background and sophistication relative to the content and functionality of the WebApp?
What generic WebApp characteristics does the user like or dislike?

18. Stakeholder Communication Options
Traditional focus groups
trained moderator meets with group of representative end-users
Electronic focus groups
on-line version of traditional focus group
Iterative surveys
series of focused surveys sent to representative end-users (often web-based or )
Exploratory surveys
web-based survey tied to WebApps having user similar to the expected users of the proposed WebApp
Scenario-building
selected end-users asked to create informal use-cases that describe specific WebApp interactions

19. Developing Use-Cases
Use-cases provide detail necessary to create an effective analysis model
Use-cases help the developer understand how users perceive their interaction with the WebApp
Use-cases help to compartmentalize WebE work
Use-cases provide important guidance to those testing the WebApp

20. WebE Analysis Types Content analysis Interaction analysis
content provided by WebApp is identified (data modeling techniques may be helpful)
Interaction analysis
use-cases can be developed to describe user interaction with WebApp
Functional analysis
usage scenarios used to define operations and functions applied to the WebApp content
Configuration analysis
WebApp environmental infrastructure is described in detail

21. Planning WebE Projects
Estimate project cost
Evaluate risks
Define finely granulated schedule for first increment and coarser schedule for subsequent increments

22. WebE Team Members Content developers and providers Web publisher
focus on generation and/or collection of WebApp content
Web publisher
liaison between technical staff who engineers WebApp and non-technical content developers and providers
Web engineer
involved with WebApp requirements elicitation, analysis modeling, architectural design, navigational design, interface design, implementation, and testing
Business domain experts
focus on the specific business problems to be address by the WebApp
Support specialist
responsible for continuing WebApp maintenance and support
Administrator (Web master)
responsible for daily operation of WebApp
* SEPA 6th ed, Roger S. Pressman

23. Conditions Favoring Analysis Modeling
Large or complex WebApp to be built
Large number of stakeholders
Large number of Web engineers and other contributors
WebApp goals and objectives will affect business bottom line
WebApp success will have strong bearing on success of company

24. WebApp Requirements Analysis Tasks
Formulation
Identify goal and objectives for WebApp
Define categories of users and create user hierarchy
Requirements Gathering
Communication between WebE team and stakeholders intensifies
Content and functional requirements are listed
Interaction scenarios (use-cases) are developed
Analysis modeling
Content model
Interaction model
Functional model
Configuration model

25. Use-Case Package Evaluation Criteria
Comprehensible
all stakeholders understand purpose of functional package
Cohesive
all packages addresses closely related functions
Loosely coupled
high function or class collaboration inside package, minimal collaboration outside package
Hierarchically shallow
number of levels within use-case hierarchy minimized to all for easy navigation and easy understanding by end-users

26. WebE Analysis Types Content analysis Interaction analysis
content provided by WebApp is identified (data modeling techniques may be helpful)
Interaction analysis
use-cases can be developed to describe user interaction with WebApp
Functional analysis
usage scenarios used to define operations and functions applied to the WebApp content
Configuration analysis
WebApp environmental infrastructure is described in detail

27. WebApp Analysis Model Structural elements Dynamic elements
identify classes and content objects required to create a WebApp that meets stakeholders needs
Dynamic elements
describe how structural elements interact with one another and how they interact with end-users

28. Content Model
Structural elements that represent WebApp content requirements
WebApp content objects – text, graphics, photographs, video images, audio
Includes all analysis classes - user visible entities created or manipulated as end-users interact with WebApp
Analysis classes defined by class diagrams showing attributes, operations, and class collaborations
Content model is derived from careful examination of WebApp use-cases
Entity-relationship diagrams may be part of the content model

29. Interaction Model Use-cases Sequence diagrams State diagrams
dominant element of WebApp interaction models
Sequence diagrams
provide representation of manner in which user actions collaborate with analysis classes
State diagrams
indicates information required to move users between states and represents behavioral information, can also depict potential navigation pathways
User interface prototype
layout of content presentation, interaction mechanisms, and overall aesthetic of user interface

30. Functional Model User observable behavior delivered to end-users
Operations contained in analysis classes to implement class behaviors
UML activity diagrams used to model both

31. Configuration Model
May be a list of server-side and client-side attributes for the WebApp
UML deployment diagrams can be used for complex configuration architectures

32. Relationship-Navigation Analysis (RNA)
Stakeholder analysis
identifies user categories and establishes stakeholder hierarchy
Element analysis
identifies content objects and functional elements of interest to end-users
Relationship analysis
describes relationships among WebApp elements
Navigation analysis
examines how users access elements or groups of elements
Evaluation analysis
considers pragmatic issues (e.g. cost/benefit) associated with implementing each relationship

33. Relationship Analysis
Purpose is to position element within the WebApp and establish element relationships
Web engineers should seek answers to questions about each element (content object or function)
It is possible to develop a relationship taxonomy and categorize each relationship using a fixed criteria

34. Navigation Analysis
Web engineers consider requirements that dictate how each type of user will navigate from one content object to another
Navigation mechanics are defined as part of design
Web engineers and stakeholders must determine navigation requirements

35. Web Quality Requirements
Usability
Functionality
Reliability
Efficiency
Maintainability
Security
Availability
Scalability
Time-to-market

36. Web Quality Attributes Visible to End-Users
Time (volatility of content)
Structural (content cohesiveness and working links)
Content (matches user expectations)
Accuracy and consistency
Response time and latency
Performance

37. Assessing Web Quality
Can the scope and depth of the web content be determined to ensure that it meets user needs?
Can background and authority of content's authors be easily identified?
Is possible to determine content currency and date of last update?
Is content location stable (e.g., URL stays the same)?
Is the content credible?
Is the content unique?
Is the content valuable to users?
Is the content well organized and easily accessible?

38. WebApp Design Goals Simplicity Consistency Identity Robustness
Navigability
Visual appeal
Compatibility

39. Web Engineering Design Activities
Interface design
describes structure and organization of the user interface (screen layout, interaction modes, and navigation mechanisms)
Aesthetic design
look and feel of WebApp (graphic design)
Content design
defines layout, structure, and outline for all WebApp content and content object relationships
Navigation design
navigational flow between content objects
Architectural design
hypermedia structure of WebApp
Component design
develops processing logic required to implement the WebApp functional components

40. End-User Interface Concerns
Where am I?
Interface should indicate which WebApp is running
Interface should indicate user's location in content hierarchy
What can I do now?
Interface helps user understand current options (live link and relevant content)
Where have I been and where am I going?
Provide user with map showing paths through the WebApp

41. User Interface Design Principles
Anticipation - interface designed to anticipate the user' s next move
Communication - interface shows status of any user initiated activity
Consistency - navigation and controls are same throughout WebApp
Controlled autonomy - designer allows user to feel in control of WebApp
Efficiency - WebApp optimizes user's work efficiency, not the designer's
Flexibility - support specific tasks as well as allow browsing
Focus - interface and content should remain focused on user tasks
Fitt's Law - time to hit a target using a pointing device is a function of the distance traveled and the size of the target

42. User Interface Design Principles
Human interface objects - use WebApp tool libraries
Latency reduction - provide feedback to user when delays are necessary, multi-task when possible to avoid long waiting periods
Learnability - interface is easy to learn and easy to retain over time
Metaphors - interfaces based on metaphors familiar to user are easy to learn and easier to use
Maintain work product integrity - don't allow user work products to be lost when errors occurs (e.g., save often)
Readability - content is easy to read by young and old
Track state - when appropriate track state of user interaction to allow user to logoff and return later
Visible navigation - provide illusion that user remains in same place and work is brought to them

43. Pragmatic WebApp Interface Guidelines
Minor server errors are likely to cause user to leave WebApp and look for an alternative site
Reading speed on monitor is about 25% slower than for hardcopy
Avoid "under construction" signs
Users prefer not having to scroll to read content
Navigation menus and headers should be designed consistently and be available on all pages available to the user
Do not rely on browser functions to assist in navigation
Aesthetics should never take precedence over application functionality
Navigation should be obvious to causal users

44. Interface Control Mechanisms
Navigation menus
Graphic icons (buttons, switches, etc.)
Graphic images (used to implement links)

45. Interface Workflow Tasks
Review and refine analysis information.
Develop rough sketch of WebApp interface layout.
Map user objectives into specific interface actions.
Define set of user tasks associated with each action.
Storyboard screen images for each interface action.
Refine interface layouts and storyboards using input from aesthetic design.
Identify user interface objects required to implement user interface.
Develop procedural representation of user's interaction with the interface.
Develop a behavioral representation of user's interaction with the interface.
Describe interface layout for each state.
Review and refine the interface model (focus on usability).

46. Aesthetic Design Layout issues Graphic design issues
Use white space generously
Emphasize content
Organize elements from top-left to bottom-right
Group navigation, content, and function geographically within page
Avoid temptation to use scroll bars
Take differing resolutions and browser window sizes into account during design
Graphic design issues
Layout
Color schemes
Text fonts, sizes, and styles
Use of multimedia elements (audio, video, animation, etc.)

47. Content Design
Representations for content objects and their relationships (Web engineers)
Analysis content objects modeled by UML associations and aggregations
Representation of information within specific content objects (content authors)
As content objects are designed they are "chunked" to form pages (based in user needs and content relationships)
Aesthetic design may be applied to get the proper look and feel for the information

48. Content Object Browsing Primitives
Sequential - used for linear content
Conditional - allows user to choose between alternative content objects and allows return to current position
Nested - allows branching to other content objects, but demands return to object where branching occurred
Iterative - occurs when user goes through content object repeatedly with each iteration defining new state conditions and use of different links

49. Technical Elements for Web-Based Design
Design principles and methods (high modularity, low coupling, information hiding, stepwise refinement, OO design methods)
Golden rules (design heuristics for hypermedia applications)
Design Patterns (can be applied to WebApp functional elements, documents, graphics, and general aesthetics)
Templates (provide reusable skeletal frameworks for any design pattern or document used within the WebApp)

50. Architecture Design Content architecture WebApp architecture
focuses on the manner in which content objects are structured for presentation and navigation
WebApp architecture
addresses the manner in which the application is structured to manage user interaction, handle internal processing tasks, effect navigation, and present content (may be influenced by the nature of the development environment)
Architectural design is often conducted in parallel with user interface design

51. Content Architectural Structures
Linear structures
text and graphics presented in fixed sequential order
Grid structures
useful when WebApp content must be organized in two or more ways or dimensions
Hierarchical structures
not always traversed in strict depth-first manner, branches are often inter-linked
Networked or "pure" web structure
every node is connected to every other node
Composite structures
combine one or more of these structues

52. Model-View-Controller (MVC) Architecture
Three layer architecture that decouples interface from both navigation and application behavior
Model object - contains all application specific content and processing logic
View - contains all interface specific functions enabling presentation of content and processing logic
Controller - manages access to the model and the views and coordinates flow of data between them
In WebApps, the view is updated by the controller using data from the model based on user input

53. Navigation Design
Identify the semantics of navigation for different users based on the perceived roles (i.e., visitor, registered customer, or privileged user) and the goals associated with their roles.
Define the mechanics (syntax) of achieving navigation

54. Navigation Syntax Individual navigation link Horizontal navigation bar
text-based links, icon, buttons, switches, and geographical metaphors
Horizontal navigation bar
lists 4 to 7 major content or functional categories in a bar with appropriate links
Vertical navigation column (two strategies)
Lists major content or functional categories
Lists every major content object in WebApp
Tabs
variation of navigation bar or columns
Site map
provides all inclusive table of contents to all content objects and functionality contained in the WebApp

55. WebE Design Patterns Architectural patterns
assist in the design of content and WebApp architecture
Component construction patterns
recommended methods for combining WebApp components
Navigation patterns
assist in design of navigation semantic units (NSU) navigation links, and overall navigation flow of WebApp
Cycle (user is returned to previously visited node)
Web ring (implements a grand cycle that links entire hypertext into a tour of a subject)
Contour (occurs when cycles are interconnected, allowing navigation across paths defined by cycles)
Counterpoint (hypertext commentary used to interrupt content narrative to provide additional information or insight)
Mirrorworld (content is presented using several threads, each with its own perspective or point of view)
Sieve (user guided through a series of decisions to direct user to specific content indexed by the decisions)
Neighborhood (uniform navigation is provided to user regardless of position within the WebApp)
Presentation patterns
assists in presentation of content to user via the interface
Behavior/user interaction patterns
assist in the design of user-machine interaction

56. Object-Oriented Hypermedia Design Method (OOHDM)
Conceptual design
Creates representation of subsystems, classes, and relationships that define WebApp application domain
UML class and collaboration diagrams may be used
Navigational design
Identifies navigational objects derived from conceptual design classes
UML use-cases, state diagrams, and sequence diagrams may be used
Abstract interface design
Specifies interface objects visible to users during WebApp interaction
Abstract data view (ADV) - formal model (similar to UML state diagram) used to represent relationship between interface object and navigation object and the behavioral characteristics of the interface objects
Implementation - classes, navigation, and interface are characterized in a manner that allows them to be implemented in a specific computing environment

57. Use WebApp Design Metrics
Is the WebApp interface usable?
Are the aesthetics of the WebApp pleasing to the user and appropriate for the information domain?
Is the content designed to impart the most information for the least amount of effort?
Is navigation efficient and straightforward?
Has the WebApp architecture been designed to accommodate special goals and objectives of users, content structure, functionality, and effective navigation flow?
Are the WebApp components designed to reduce procedural complexity and enhance correctness, reliability, and performance?