Web Engineering Citra N, MT SI - UNIKOM

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.

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

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

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

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

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

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

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

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

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

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.

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

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?

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

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?

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 e-mail) 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

WebApp Design Goals Simplicity Consistency Identity Robustness Navigability Visual appeal Compatibility

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

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

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

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

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

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

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).

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.)

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

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

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)

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

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

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

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

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

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

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

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?