2.2. WebWeb EngineeringEngineering FundamentalsFundamentals
1. IntroductionIntroduction
2. RequirementsRequirements AnalysisAnalysis
3. WebWeb ModelingModeling
4. WebWeb ArchitecturesArchitectures
5. WebWeb AccessibilityAccessibility
SWE 444: Internet & Web Application Development 2.1 ResourcesResources
BookBook
Kappel, G., Proll, B. Reich, S. & Retschitzegger, W. (2006). Web Engineering, 1st ed. Hoboken, NJ: Wiley & Sons. ISBN: 04700-1554-3.
OnlineOnline materialmaterial
INFSCI 2955: Web Engineering Department of Information Science and Telecommunications, University of Pittsburgh Website: http://www.sis.pitt.edu/~jgrady/
SWE 444: Internet & Web Application Development 2.2 2.12.1 IntroductionIntroduction toto WebWeb EngineeringEngineering WhatWhat isis WebWeb Engineering?Engineering?
““TheThe applicationapplication ofof systematicsystematic andand quantifiablequantifiable approachesapproaches toto costcost--effectiveeffective analysis,analysis, design,design, implementation,implementation, testing,testing, operation,operation, andand maintenancemaintenance ofof highhigh--qualityquality WebWeb applications.applications.”” –– KappelKappel etet al.al.
ExtendsExtends SoftwareSoftware EngineeringEngineering toto WebWeb applications,applications, butbut withwith WebWeb--centriccentric approaches.approaches.
SWE 444: Internet & Web Application Development 2.4 DefiningDefining WebWeb ApplicationsApplications
AA WebWeb applicationapplication isis aa systemsystem thatthat utilizesutilizes W3CW3C standardsstandards && technologiestechnologies toto deliverdeliver WebWeb--specificspecific resourcesresources toto clientsclients (typically)(typically) throughthrough aa browser.browser.
A strict definition that ensures software and UI aspects of the Web are examined carefully
TechnologyTechnology ++ interaction.interaction.
Web site with no software components? Web services?
SWE 444: Internet & Web Application Development 2.5 TheThe CaseCase forfor WebWeb EngineeringEngineering
ApplicationApplication developmentdevelopment onon thethe WebWeb remainsremains largelylargely adad hochoc..
Spontaneous, one-time events Individual experience Little or no documentation for code/design
ShortShort--termterm savingssavings leadlead toto longlong--termterm problemsproblems inin operation,operation, maintenance,maintenance, usability,usability, etc.etc.
BecauseBecause WebWeb appsapps areare soso interdependent,interdependent, thethe problemproblem isis compounded.compounded.
SWE 444: Internet & Web Application Development 2.6 TheThe CaseCase forfor WebWeb EngineeringEngineering (cont.)(cont.)
RootRoot CausesCauses ofof poorpoor designdesign
Development as an authoring activity Development is “easy” Techniques that should not be used are misapplied. Techniques that should be used are not.
ParticularlyParticularly alarmingalarming givengiven……
Most projects are now Web-based More “mission-critical” apps moving to the Web
SWE 444: Internet & Web Application Development 2.7 TheThe CaseCase forfor WebWeb EngineeringEngineering (cont.)(cont.)
Top project pitfalls (Cutter, 2000)
84% - Failure to meet business objectives 79% - Project schedule delays 63% - Budget overrun 53% - Lack of functionality
Web Engineering’s solution:
Clearly defined goals & objectives Systematic, phased development Careful planning Iterative & continuous auditing of the entire process
SWE 444: Internet & Web Application Development 2.8 CategoriesCategories ofof WebWeb ApplicationsApplications
Ubiquitous Semantic Web
Social Web Collaborative
Workflow Based Portal Transactional Oriented Complexity Interactive
Doc-Centric
Development History
SWE 444: Internet & Web Application Development 2.9 DocumentDocument--CentricCentric WebWeb sitessites
Precursors to Web applications
Static HTML documents
Manual updates
Pros
Simple, stable, short response times
Cons
High management costs for frequent updates & large collections More prone to inconsistent/redundant info
Example: static home pages
SWE 444: Internet & Web Application Development 2.10 InteractiveInteractive && TransactionalTransactional
Come with the introduction of CGI and HTML forms
Simple interactivity
Dynamic page creation
Web pages and links to other pages generated dynamically based on user input
Content updates -> Transactions
Decentralized Database connectivity Increased complexity
Examples: news sites, booking systems, online banking
SWE 444: Internet & Web Application Development 2.11 WorkflowWorkflow--BasedBased ApplicationsApplications
DesignedDesigned toto handlehandle businessbusiness processesprocesses acrossacross departments,departments, organizationsorganizations && enterprisesenterprises
BusinessBusiness logiclogic definesdefines thethe structurestructure
TheThe rolerole ofof WebWeb servicesservices
Interoperability Loosely-coupled Standards-based
Examples:Examples: B2BB2B && ee--GovernmentGovernment
HighHigh complexity;complexity; autonomousautonomous entitiesentities
SWE 444: Internet & Web Application Development 2.12 CollaborativeCollaborative && SocialSocial WebWeb Unstructured,Unstructured, cooperativecooperative environmentsenvironments Support shared information workspaces to create, edit and manage shared information
InterpersonalInterpersonal communicationcommunication isis paramountparamount
ClassicClassic example:example: WikisWikis
TheThe SocialSocial WebWeb Anonymity traditionally characterized WWW Moving towards communities of interest Examples: Blogs, collaborative filtering systems, social bookmarking (e.g., del.icio.us) Integration with other forms of web applications (e..g, NetFlix)
SWE 444: Internet & Web Application Development 2.13 PortalPortal--OrientedOriented
SingleSingle pointspoints--ofof--entryentry toto heterogenousheterogenous informationinformation
Yahoo!, AOL.com, portal.kfupm.edu.sa
SpecializedSpecialized portalsportals
Business portals (e.g., employee intranet) Marketplace portals (horizontal & vertical) Community portals (targeted groups)
SWE 444: Internet & Web Application Development 2.14 UbiquitousUbiquitous
CustomizedCustomized servicesservices delivereddelivered anywhereanywhere viavia multiplemultiple devicesdevices
HCIHCI isis criticalcritical
Limitations of devices (screen size, bandwidth?) Context of use
StillStill anan emergingemerging field;field; mostmost devicesdevices havehave singlesingle focus:focus:
Personalization Location-aware Multi-platform delivery
SWE 444: Internet & Web Application Development 2.15 SemanticSemantic WebWeb
BernersBerners--Lee:Lee: InformationInformation onon thethe WebWeb shouldshould bebe readablereadable toto machines,machines, asas wellwell asas humans.humans.
UsingUsing metadatametadata andand ontologiesontologies toto facilitatefacilitate knowledgeknowledge managementmanagement acrossacross thethe WWW.WWW.
ContentContent syndicationsyndication (RSS,(RSS, Atom)Atom) promotespromotes rere-- useuse ofof knowledgeknowledge
IsIs thethe SemanticSemantic WebWeb eveneven possible?possible?
SWE 444: Internet & Web Application Development 2.16 CharacteristicsCharacteristics ofof WebWeb AppsApps
HowHow dodo WebWeb applicationsapplications differdiffer fromfrom traditionaltraditional applications?applications?
Or,Or, anotheranother way,way, whatwhat SoftwareSoftware EngineeringEngineering methodsmethods && techniquestechniques cancan bebe adaptedadapted toto WebWeb Engineering?Engineering?
33 dimensionsdimensions ofof thethe ISO/IECISO/IEC 91269126--11 standardstandard
Product Usage Development
SWE 444: Internet & Web Application Development 2.17 CharacteristicsCharacteristics -- ProductProduct
Product-related characteristics constitute the “building blocks” of a Web application
Content
Document character & multimedia (# of dimensions?) Quality demands: current, exact, consistent, reliable
Navigation Structure (Hypertext)
Non-linearity Potential problems: Disorientation & cognitive overload
User interface (Presentation)
Aesthetics Self-explanation
SWE 444: Internet & Web Application Development 2.18 CharacteristicsCharacteristics -- UsageUsage
Much greater diversity compared to traditional non-Web applications Users vary in numbers, cultural background, devices, h/w, s/w, location etc
Social Context (Users) Spontaneity - scalability Heterogeneous groups
Technical Context (Network & Devices) Quality-of-Service Multi-platform delivery
Natural Context (Place & Time) Globality Availability
SWE 444: Internet & Web Application Development 2.19 CharacteristicsCharacteristics -- DevelopmentDevelopment
The Development Team
Multidisciplinary – print publishing, s/w devt, marketing & computing, art & technology Community (including Open Source)
Technical Infrastructure Lack of control on the client side Immaturity
Process Flexibility Parallelism
Integration Internal – with existing legacy systems External – with Web services Integration issues: correct interaction, guaranteed QoS
SWE 444: Internet & Web Application Development 2.20 2.22.2 RequirementsRequirements EngineeringEngineering OverviewOverview
IntroductionIntroduction toto RequirementsRequirements EngineeringEngineering
FundamentalsFundamentals
SpecificsSpecifics inin WebWeb EngineeringEngineering
PrinciplesPrinciples
AdaptingAdapting traditionaltraditional RequirementsRequirements EngineeringEngineering toto WebWeb applicationsapplications
SWE 444: Internet & Web Application Development 2.22 IntroductionIntroduction
Requirements Engineering (RE) – the principles, methods, & tools for eliciting, describing, validating, and managing project goals and needs.
Given the complexity of Web apps, RE is a critical initial stage, but often poorly executed.
What are the consequences?
Inadequate software architectures “Unforeseen” problems ¾ Budget overruns ¾ Production delays ¾ “That’s not what I asked for” Low user acceptance
SWE 444: Internet & Web Application Development 2.23 WhyWhy DefineDefine Requirements?Requirements?
TheThe authorsauthors buildbuild theirtheir case:case:
Bell & Thayer (1976) – Requirements don’t define themselves. Boehm (1981) – Removal of mistakes post hoc is up to 200 times more costly. The Standish Group (1994) – 30% of project fail before completion & almost half do not meet customer requirements ¾ Unclear objectives, unrealistic schedules & expectations, poor user participation
SWE 444: Internet & Web Application Development 2.24 FundamentalsFundamentals ofof RERE -- 11
IdentifyIdentify andand involveinvolve (if(if possible)possible) thethe stakeholdersstakeholders
Those that directly influence the requirements Customers, users, developers
WhatWhat areare theirtheir expectations?expectations?
May be misaligned or in conflict. May be too narrowly focused or unrealistic.
Already,Already, oneone cancan seesee RERE asas moremore ofof anan artart thanthan aa science.science.
SWE 444: Internet & Web Application Development 2.25 FundamentalsFundamentals ofof RERE -- 22
IEEEIEEE 601.12601.12 definitiondefinition ofof requirement:requirement:
1) Solves a user’s problem 2) Must be met or possessed by the system to satisfy a formal agreement 3) Documented representation of conditions in 1 and 2
KeysKeys toto requirementrequirement definition:definition:
Negotiation Scenario-based discovery Clear definition of context and constraints
SWE 444: Internet & Web Application Development 2.26 FundamentalsFundamentals ofof RERE -- 33
Objectives, objectives, objectives
Advertising Customer service Business transactions
Audience, audience, audience
The designer is not the audience Audience segmentation User interviews and testing
What about the Competition?
Other web sites Other forms of advertising and transactions
SWE 444: Internet & Web Application Development 2.27 Example:Example: SISSIS WebsiteWebsite
SWE 444: Internet & Web Application Development 2.28 SummarySummary -- RERE ActivitiesActivities
Elicitation & Negotiation
Management Documentation
Validation & Verification
SWE 444: Internet & Web Application Development 2.29 SpecificsSpecifics inin WebWeb EngineeringEngineering
IsIs RERE forfor thethe WebWeb reallyreally thatthat differentdifferent thanthan RERE forfor conventionalconventional software?software?
SomeSome wouldwould argueargue ““nono””,, butbut manymany aspectsaspects ofof WebWeb applicationsapplications suggestsuggest otherwiseotherwise
1010 distinguishingdistinguishing characteristicscharacteristics
Multidisciplinary Unavailability of stakeholders Rapidly changing requirements & constraints
SWE 444: Internet & Web Application Development 2.30 SpecificsSpecifics inin WebWeb EngineeringEngineering -- 22
1010 distinguishingdistinguishing characteristicscharacteristics (cont.)(cont.)
Unpredictable operational environment Integration of legacy systems ¾ Constrained by existing system ¾ Constrained by $$$ Quality aspects User interface quality Content quality Developer inexperience Firm delivery dates
SWE 444: Internet & Web Application Development 2.31 PrinciplesPrinciples forfor RERE
Inspired by the win-win spiral model (Boehm, 1996)
Source: http://www.stsc.hill.af.mil/Crosstalk/2001/12/boehm3.gif
SWE 444: Internet & Web Application Development 2.32 PrinciplesPrinciples forfor RERE -- 22
UnderstandingUnderstanding thethe systemsystem contextcontext
Web apps are always a component of a larger entity Why do we need the system? How will people use it?
InvolvingInvolving thethe stakeholdersstakeholders
Get all groups involved. Balance – one group’s gain should not come at the expense of another. Repeat the process of identifying, understanding and negotiating.
SWE 444: Internet & Web Application Development 2.33 PrinciplesPrinciples forfor RERE -- 33
IterativelyIteratively definedefine requirementsrequirements Requirements need to be consistent with other system aspects (UI, content, test cases) Start with key requirements at a high level; basis for: ¾ Feasible architectures ¾ Key system use cases ¾ Initial plans for the project As the project progresses, requirements can become more concrete.
SWE 444: Internet & Web Application Development 2.34 PrinciplesPrinciples forfor RERE -- 44
FocusingFocusing onon thethe SystemSystem ArchitectureArchitecture
The “solution space” – existing technologies & legacy systems – defines the “problem space.” The architecture must be considered in the elicitation stage. Refine requirements and architecture iteratively with increasing level of detail.
SWE 444: Internet & Web Application Development 2.35 PrinciplesPrinciples forfor RERE -- 55
RiskRisk OrientationOrientation
Risk management is at the heart of the analysis process. What are the greatest risks? ¾ Integration issues w/ legacy systems ¾ Expected vs. actual system quality ¾ Inexperience of developers How to mitigate risks? ¾ Prototyping (avoid IKIWISI) ¾ Show changes to customer iteratively ¾ Integrate existing systems sooner than later
SWE 444: Internet & Web Application Development 2.36 AdaptingAdapting RERE toto WebWeb ApplicationsApplications
ThereThere isnisn’’tt oneone singlesingle ““rightright wayway”” toto RERE amongamong thethe manymany methods,methods, techniques,techniques, tools,tools, etc.etc. available.available.
ForFor youryour WebWeb applicationapplication project,project, askask thethe followingfollowing questions:questions:
What are the critical requirements? How should requirements be documented? What tools should be use, if any?
SWE 444: Internet & Web Application Development 2.37 AdaptingAdapting –– RequirementRequirement TypesTypes
TaxonomiesTaxonomies (e.g.(e.g. IEEEIEEE 830)830) existexist thatthat describedescribe functionalfunctional andand nonnon--functionalfunctional requirements.requirements.
Functional – describes the capability’s purpose (e.g., the ability to transfer money between user accounts.) Non-functional – describes the capability’s properties (e.g., the system can handle 1,000 concurrent users)
SWE 444: Internet & Web Application Development 2.38 AdaptingAdapting –– RequirementRequirement TypesTypes
NonNon--functionalfunctional requirementrequirement typestypes
Content Quality (6 Types) ¾ Functionality ¾ Reliability ¾ Usability ¾ Efficiency ¾ Maintainability ¾ Portability
SWE 444: Internet & Web Application Development 2.39 AdaptingAdapting –– RequirementRequirement TypesTypes
NonNon--functionalfunctional requirementrequirement typestypes (continued)(continued)
System Environment User Interface ¾ Self-explanatory & intuitive ¾ Usage-centered design Evolution Project Constraints
SWE 444: Internet & Web Application Development 2.40 AdaptingAdapting –– DocumentationDocumentation
44 categoriescategories ofof notationnotation Stories – Plain-language scenarios; understandable to non-technical persons. Itemized Requirements – Plain-language lists of requirements Formatted Requirements – Accurately-defined, but allow for plain-language descriptions ¾ Ex. Use case scenarios in UML Formal Specifications – Expressed in formal syntax & semantics; rarely used in Web applications.
SWE 444: Internet & Web Application Development 2.41 AdaptingAdapting –– DocumentationDocumentation
So,So, whatwhat’’ss bestbest forfor aa WebWeb developmentdevelopment project?project?
Low to medium accuracy is suitable for Web apps; formal specifications very rarely required. Keep elicitation and management of requirements low. Scalability is (most likely) important. Formatted requirements (i.e. use cases) are heavily used.
SWE 444: Internet & Web Application Development 2.42 AdaptingAdapting –– ToolsTools
RequirementsRequirements ElicitationElicitation
EasyWinWin (the author’s software) Book: Getting to Yes: Negotiating an Agreement Without Giving in by Fisher, Ury, Patton (1994)
RequirementsRequirements ValidationValidation
Online feedback (Web surveys)
RequirementsRequirements ManagementManagement
Database system – traceability, versioning
SWE 444: Internet & Web Application Development 2.43 ChallengesChallenges withwith StakeholdersStakeholders
McConnellMcConnell (1996)(1996)
Users don’t know what they want. Lack of commitment. Ever-expanding requirements. Communication delays. Users don’t take part in reviews. Users don’t understand the technology. Users don’t understand the process.
SWE 444: Internet & Web Application Development 2.44 ChallengesChallenges withwith DevelopersDevelopers
UsersUsers andand engineers/developersengineers/developers speakspeak differentdifferent ““languageslanguages””..
TheThe tendencytendency toto ““shoeshoe--hornhorn”” thethe requirementsrequirements intointo anan existingexisting modelmodel
Saves time for developers, but results may not meet user’s needs.
EngineersEngineers && developersdevelopers areare alsoalso askedasked toto dodo RE,RE, butbut sometimessometimes lacklack peoplepeople skillsskills andand domaindomain knowledgeknowledge
SWE 444: Internet & Web Application Development 2.45 2.32.3 ModelingModeling WebWeb ApplicationApplication SummarySummary –– WebWeb EngineeringEngineering
Requirements Analysis
Maintenance Design
Testing Implementation
SWE 444: Internet & Web Application Development 2.47 WhyWhy CreateCreate Models?Models?
DefineDefine anan abstractabstract viewview ofof aa realreal--worldworld entityentity
Finding & discovering objects/concepts in a domain Assigning responsibilities to objects
ToolTool ofof thoughtthought
Reduce complexity Document design decisions
MeansMeans ofof communicationcommunication
SWE 444: Internet & Web Application Development 2.48 WebWeb ModelingModeling
ModelingModeling staticstatic && dynamicdynamic aspectsaspects ofof content,content, hypertext,hypertext, andand presentation.presentation.
WeWe focusfocus onon objectobject--orientedoriented analysisanalysis && designdesign Analysis: Finding & discovering objects/ concepts in a domain Design: Defining software objects & how they interact to fulfill requirements.
KeyKey skill:skill: AssigningAssigning responsibilitiesresponsibilities toto objectsobjects
SWE 444: Internet & Web Application Development 2.49 AssigningAssigning ResponsibilitiesResponsibilities
ResponsibilitiesResponsibilities areare obligationsobligations oror specificspecific behaviorsbehaviors relatedrelated toto itsits role.role.
WhatWhat doesdoes anan objectobject dodo??
Doing something itself Pass actions (messages) to other objects Controlling & coordinating the activities in other objects
WhatWhat doesdoes anan objectobject knowknow??
Private, encapsulated data Its related objects Items it can derive or calculate
SWE 444: Internet & Web Application Development 2.50 SoftwareSoftware ApplicationApplication ModelingModeling
Levels
User interface
Application Logic
Phases Structure Analysis Design Implementation
Behavior
Aspects
Levels – the “how” & “what” of an application
Aspects – objects, attributes, and relationships; function & processes
Phases – Development cycle
SWE 444: Internet & Web Application Development 2.51 UnifiedUnified ModelingModeling LanguageLanguage (UML)(UML)
““TheThe UnifiedUnified ModelingModeling LanguageLanguage isis aa visualvisual languagelanguage forfor specifyingspecifying andand documentingdocumenting thethe artifactsartifacts ofof systems.systems.”” [OMG03a][OMG03a]
LanguageLanguage ofof choicechoice (and(and ISOISO standard)standard) forfor diagrammingdiagramming notationnotation inin OOOO development.development.
Structural – Class diagrams Behavioral – Use Case diagrams, State machine diagrams
SWE 444: Internet & Web Application Development 2.52 WebWeb ApplicationApplication ModelingModeling
Levels Presentation Hypertext Customization Content
Phases Structure Analysis Design Implementation
Behavior
Aspects
Levels – Information, node/link structure, UI & page layout separate.
Aspects – Same as Software Applications
Phases – Approach depends upon type of application
Customization – Context information
SWE 444: Internet & Web Application Development 2.53 WebWeb ApplicationApplication ModelingModeling
ForFor WebWeb--centriccentric modeling,modeling, wewe willwill employemploy thethe UMLUML WebWeb EngineeringEngineering (UWE)(UWE) notation.notation.
http://www.pst.ifi.lmu.de/projekte/uwe/ Relies on Object Management Group (OMG) standards – (i.e., UML-compliant) Comprehensive modeling tool Supports semi-automatic generation of code
SWE 444: Internet & Web Application Development 2.54 RequirementsRequirements ModelingModeling
ServesServes asas aa bridgebridge betweenbetween RequirementsRequirements && DesignDesign phasesphases
UsesUses casescases –– functionalfunctional requirementsrequirements writtenwritten asas aa collectioncollection ofof relatedrelated successsuccess && failurefailure scenarios.scenarios.
Scenario – a sequence of actions & interactions between actors and a system.
PreferredPreferred meansmeans ofof modelingmodeling requirementsrequirements
Written descriptions are easy to understand Emphasize the users goals and perspective
SWE 444: Internet & Web Application Development 2.55 UseUse CasesCases
DefiningDefining validvalid useuse cases:cases:
The Boss Test – measurable value The EBP Test – one person, one place, one time The Size Test – more than one step
WhichWhich isis aa validvalid useuse case?case?
Negotiate a Supplier Contract Handle Returns Log In Move Piece on Game Board
SWE 444: Internet & Web Application Development 2.56 UseUse CasesCases
CriticalCritical componentscomponents
Use Case Name – starts with a verb Level – “user-goal” or “subfunction” Primary Actor – the user whose goal is fulfilled Stakeholders & Interests – Who cares, and what do they want? Preconditions – What must be true at the start Success Guarantee – defines the successful completion of the use case for all stakeholders
SWE 444: Internet & Web Application Development 2.57 UseUse CaseCase –– ExampleExample 11
Use Case 1: Create User
Scope: University or business network
Level: user goal
Primary Actor: user (system administrator)
Stakeholders and Interests: System Administrator: Wants control over users’ access to system resources. New User: Wants access to system resources for communication, business, and research. Organization: Wants security and controlled access of organization resources, data, intellectual property; wants employees/students to have appropriate system access to fulfill the goals of the organization.
Preconditions: User is identified, authenticated, and has opened administration tool
Success Guarantee: New user account is created and saved. Username and password grant the new user access to network.
SWE 444: Internet & Web Application Development 2.58 UseUse CaseCase –– ExampleExample 11 [cont.][cont.]
MainMain SuccessSuccess ScenarioScenario::
1. System requests input for username & password 2. User enters username & password 3. System requests other identifiable user information (ex. real name, SSN#, address) 4. User enters other identifiable user information 5. System verifies username & password 6. System stores new user information 7. System displays success message 8. System presents user options
SWE 444: Internet & Web Application Development 2.59 UseUse CaseCase GuidelinesGuidelines
UseUse shortsshorts sentencessentences
DeleteDelete ““noisenoise”” wordswords
NO : “The System authenticates…” YES: “System authenticates…”
AvoidAvoid technologytechnology--specificspecific termsterms (initially,(initially, atat least)least)
NO : “Cashier swipes Product ID across scanner.” YES: “Cashier enters Product ID.”
SWE 444: Internet & Web Application Development 2.60 UseUse CaseCase DiagramsDiagrams
ProvideProvide aa graphicalgraphical overviewoverview ofof aa systemsystem’’ss useuse cases,cases, itsits externalexternal actors,actors, andand theirtheir relationshipsrelationships
UseUse casecase diagramsdiagrams areare NOTNOT requirements!requirements!
CanCan bebe usedused forfor functionalfunctional && hypertexthypertext requirementsrequirements
Same model (UWE/authors’ approach) Use “<
SWE 444: Internet & Web Application Development 2.61 UseUse CaseCase DiagramDiagram -- ExampleExample
ConferenceConference PaperPaper SubmissionSubmission SystemSystem
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.62 ContentContent ModelingModeling
PurposePurpose:: ToTo modelmodel thethe informationinformation requirementsrequirements ofof aa WebWeb applicationapplication
Diagramming the structural (i.e., information objects) & behavioral aspects of the information. NOT concerned with navigation.
PrimaryPrimary ModelsModels
Class diagrams – enough for static applications. State machine diagrams – captures dynamic aspects
SWE 444: Internet & Web Application Development 2.63 ClassClass DiagramDiagram –– ExampleExample 11
ConferenceConference PaperPaper SubmissionSubmission SystemSystem
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.64 ClassClass DiagramsDiagrams
NotationsNotations
Class Name
Multiplicity Attributes
Operations
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.65 ClassClass DiagramsDiagrams
NotationsNotations (continued)(continued)
Composition Derived Attribute Value
Invariant
Source: Web Engineering – Kappel et al. SWE 444: Internet & Web Application Development 2.66 ClassClass DiagramDiagram –– ExampleExample 22
OnlineOnline LibraryLibrary ApplicationApplication
Source: Web Engineering – Kappel et al. SWE 444: Internet & Web Application Development 2.67 StateState MachineMachine DiagramsDiagrams
ForFor dynamicdynamic WebWeb applications,applications, theythey depictdepict importantimportant statesstates andand eventsevents ofof objects,objects, andand howhow objectsobjects behavebehave inin responseresponse toto anan eventevent ((transitionstransitions))
ShowShow thethe lifelife--cyclecycle ofof anan object.object.
UsedUsed onlyonly forfor statestate--dependentdependent objectsobjects
ForFor purepure UMLUML modeling,modeling, cancan bebe veryvery usefuluseful forfor hypertexthypertext modelsmodels (next(next section).section).
SWE 444: Internet & Web Application Development 2.68 StateState MachineMachine DiagramDiagram -- ExampleExample
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.69 HypertextHypertext ModelingModeling
PurposePurpose:: ToTo modelmodel thethe navigationnavigation pathspaths availableavailable toto users.users.
ArtifactsArtifacts
Hypertext Structure Model – navigating among classes Access Model – UML-compliant site map
FocusesFocuses onon thethe structurestructure ofof thethe hypertexthypertext && accessaccess elements.elements.
UseUse ““<
SWE 444: Internet & Web Application Development 2.70 HypertextHypertext StructureStructure ModelModel
ConferenceConference PaperPaper SubmissionSubmission SystemSystem
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.71 LinkLink ClassificationClassification TypesTypes
UWEUWE Navigation vs. Process vs. External
HDMHDM Structural vs. Perspective vs. Application
WebMLWebML Contextual vs. Non-contextual Intra-page vs. Inter-page
OOOO--HH I, T, R, X, S-links
SWE 444: Internet & Web Application Development 2.72 AccessAccess ModelModel
HypertextHypertext structurestructure modelsmodels describedescribe navigationnavigation,, butbut notnot orientationorientation..
AccessAccess modelsmodels describedescribe bothboth throughthrough NavigationNavigation patternspatterns,, usedused toto consistentlyconsistently describedescribe conventionalconventional elements.elements.
<
SWE 444: Internet & Web Application Development 2.73 AccessAccess ModelModel -- ExampleExample
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.74 PresentationPresentation ModelingModeling
PurposePurpose:: ToTo modelmodel thethe looklook && feelfeel ofof thethe WebWeb applicationapplication atat thethe pagepage level.level.
TheThe designdesign shouldshould aimaim forfor simplicitysimplicity andand selfself-- explanationexplanation..
DescribesDescribes presentationpresentation structure:structure:
Composition & design of each page Identify recurring elements (headers/footers)
DescribesDescribes presentationpresentation behavior:behavior:
Elements => Events
SWE 444: Internet & Web Application Development 2.75 LevelsLevels ofof PresentationPresentation ModelsModels
PresentationPresentation PagePage –– ““rootroot”” element;element; equivalentequivalent toto aa pagepage container.container.
PresentationPresentation UnitUnit A fragment of the page logically defined by grouping related elements. Represents a hypertext model node
PresentationPresentation ElementElement A unit’s (node’s) informational components Text, images, buttons, fields
SWE 444: Internet & Web Application Development 2.76 CompositionComposition ModelModel -- ExampleExample
PaperPaper andand AuthorAuthor PagePage TemplatesTemplates
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.77 SequenceSequence DiagramsDiagrams
PurposePurpose:: DepictsDepicts sequentialsequential interactionsinteractions (i.e.,(i.e., thethe flowflow ofof logic)logic) betweenbetween objectsobjects inin anan applicationapplication overover time.time.
What messages, what order, & to whom. Ex.: Object A calls method of Object B Ex.: Object B passes method call from Object A to Object C.
Result:Result: DynamicDynamic systemsystem interactionsinteractions diagrammeddiagrammed inin aa ““fencefence”” format.format.
SWE 444: Internet & Web Application Development 2.78 SequenceSequence DiagramDiagram -- NotationNotation
Object Instance
Lifeline
Focus of Control
Synchronous Message
Destroy Object
Source: Wikipedia – Sequence Diagram
SWE 444: Internet & Web Application Development 2.79 SequenceSequence DiagramDiagram –– ExampleExample 11
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.80 SequenceSequence DiagramDiagram –– ExampleExample 22
Source: Web Engineering – Kappel et al.
SWE 444: Internet & Web Application Development 2.81 ModelingModeling MethodsMethods
WeWe’’veve primarilyprimarily discusseddiscussed ObjectObject--OrientedOriented ModelingModeling (e.g.,(e.g., UML),UML), butbut therethere areare otherother methodologies:methodologies:
Data-Oriented (Hera, WebML) Hypertext-Oriented (HDM) Software-Oriented (WAE)
ChoosingChoosing aa methodmethod dependsdepends onon systemsystem purpose,purpose, focus,focus, andand requirementsrequirements
SWE 444: Internet & Web Application Development 2.82 2.42.4 WebWeb ArchitecturesArchitectures OverviewOverview
ArchitectureArchitecture defineddefined
DevelopingDeveloping architecturesarchitectures
TypesTypes ofof architecturesarchitectures
GenericGeneric WebWeb ArchitectureArchitecture
LayeredLayered--aspectaspect architecturesarchitectures
DataData--aspectaspect architecturesarchitectures
SWE 444: Internet & Web Application Development 2.84 ArchitectureArchitecture DefinedDefined
DefineDefine ““softwaresoftware architecturearchitecture””
http://www.sei.cmu.edu/architecture/definitions.html “Software architecture is the set of design decisions which, if made incorrectly, may cause your project to be cancelled.” – Eoin Woods
AuthorsAuthors focusfocus onon 55 keykey attributesattributes ofof softwaresoftware architecturesarchitectures
Structure, Elements, Relationships Analysis => Implementation Multiple viewpoints (conceptual, runtime, process & implementation) Understandable Framework for flexibility
SWE 444: Internet & Web Application Development 2.85 DevelopingDeveloping ArchitecturesArchitectures
InfluencesInfluences onon ArchitecturesArchitectures
Functional Requirements •Clients •Users •Other Stakeholders
Architecture Experience with •Existing Architecture •Patterns •Project Management •Other?
SWE 444: Internet & Web Application Development 2.86 DevelopingDeveloping ArchitecturesArchitectures
InfluencesInfluences onon ArchitecturesArchitectures (continued)(continued)
Quality considerations with •Performance •Scalability •Reusability •Other? Architecture Technical Aspects •Operating System •Middleware •Legacy Systems •Other? SWE 444: Internet & Web Application Development 2.87 Client/ServerClient/Server (2(2--Layer)Layer)
Client Client
Server
Web/App Server Services
Database Dynamic HTML Static HTML
SWE 444: Internet & Web Application Development 2.88 NN--LayerLayer ArchitecturesArchitectures Client
Firewall
Proxy
Presentation Layer Web Server
Business Layer Application Server Backend (Business Logic, Connectors, (Legacy Application, Personalization, Data Access) Enterprise Info System)
Data Layer DBMS B2B
SWE 444: Internet & Web Application Development 2.89 WhyWhy anan NN--LayerLayer Architecture?Architecture?
SeparatingSeparating servicesservices inin businessbusiness layerlayer promotespromotes rere--useuse differentdifferent applicationsapplications
Loose-coupling – changes reduce impact on overall system. More maintainable (in terms of code) More extensible (modular)
TradeTrade--offsoffs
Needless complexity More points of failure
SWE 444: Internet & Web Application Development 2.90 MoreMore onon ProxiesProxies
OriginallyOriginally forfor cachingcaching datadata
CanCan alsoalso serverserver otherother roles:roles:
Link Proxy ¾ Persistent URL’s – maps the URL the client sees to the actual URL. ¾ AJAX – allows data from a 2nd server to be accessed via a client script. History Proxy ¾ HTTP is stateless - navigation history cannot be shared across multiple websites. ¾ Multiple companies can access a server-side cookie (e.g. DoubleClick)
SWE 444: Internet & Web Application Development 2.91 IntegrationIntegration ArchitecturesArchitectures
EnterpriseEnterprise ApplicationApplication IntegrationIntegration (EAI)(EAI)
WebWeb ServicesServices
Portals/Portals/PortletsPortlets
Challenges/PitfallsChallenges/Pitfalls
Cannot separate logic & data in legacy systems Incompatible schemes Poor documentation Measuring performance/scalability
SWE 444: Internet & Web Application Development 2.92 DataData--AspectAspect ArchitecturesArchitectures
Data can be grouped into either of 3 architectural categories: Application 1. Structured data of the kind stored in DBs 2. Documents of the kind stored in document management systems Driver Manager 3. Multimedia data of the kind stored in media servers
Structured data (JDBC/ODBC) Driver Accessed either directly via a web extension (for 2-tier) or over app server (for n-tier). Since DB technology are highly mature, Database they are easy to integrate Easy to implement ¾ APIs are available to access DBs (e.g., JDBC, ODBC)
SWE 444: Internet & Web Application Development 2.93 DataData--AspectAspect ArchitecturesArchitectures
WebWeb DocumentDocument ManagementManagement
SWE 444: Internet & Web Application Development 2.94 DataData--AspectAspect ArchitecturesArchitectures
WebWeb MultimediaMultimedia Management:Management: PointPoint--toto--pointpoint
SWE 444: Internet & Web Application Development 2.95 2.52.5 WebWeb AccessibilityAccessibility OverviewOverview
TheThe CaseCase forfor UsabilityUsability
DefiningDefining WebWeb UsabilityUsability
GeneralGeneral DesignDesign GuidelinesGuidelines
UsabilityUsability EngineeringEngineering
WebWeb AccessibilityAccessibility inin DepthDepth
SWE 444: Internet & Web Application Development 2.97 WhyWhy isis UsabilityUsability Important?Important?
““MissionMission criticalcritical”” WebWeb applicationsapplications
PoorPoor designdesign leadsleads toto lostlost time,time, productivityproductivity
YourYour websitewebsite speaksspeaks forfor youryour organizationorganization
Customers have choices Easy come, easy go
DiverseDiverse contextscontexts
Proliferation of web-enabled devices Increasing adoption by special needs groups – ex. seniors
SWE 444: Internet & Web Application Development 2.98 TopTop 77 GripesGripes
Contact information – address or phone number is buried
Search function is not visible or unclear as to functionality
No easy way to get back to critical points
Pages that should load fast don’t (e.g. Main page or key link page)
Slow page loads are not incremental
“What’s new” is old
Back button requires a repost of data
SWE 444: Internet & Web Application Development 2.99 Example:Example: SISSIS WebsiteWebsite
SWE 444: Internet & Web Application Development 2.100 UsabilityUsability DefinedDefined
ISO/IECISO/IEC standardstandard definitiondefinition (1998):(1998):
“[T]he extent to which a product can be used by specified users within a specified usage context to achieve specified goals effectively, efficiently, and satisfactorily.”
UsabilityUsability engineeringengineering isis anan ongoing,ongoing, butbut criticalcritical processprocess
Define user and task models Iteratively test and reevaluate User-based vs. expert methods
SWE 444: Internet & Web Application Development 2.101 DefiningDefining UsabilityUsability inin WebWeb AppsApps
TraditionalTraditional softwaresoftware usabilityusability specificsspecifics dodo notnot necessarilynecessarily carrycarry overover toto thethe Web:Web:
People use your application immediately. No manual or trainers No salespeople
HowHow toto categorizecategorize users?users?
First-time or returning? Expert or novice? Broadband or dial-up? Desktop or mobile?
SWE 444: Internet & Web Application Development 2.102 HumanHuman InformationInformation ProcessingProcessing
HumanHuman cognitioncognition placesplaces aa criticalcritical rolerole inin useruser interfaceinterface design.design.
Perception ¾ Positioning, grouping, arranging ¾ Perceiving shapes and relationships Memory ¾ Limitations of working memory ¾ Chunking, 7 + 2 (Miller) Attention ¾ Focusing on one aspect ¾ Movement, color schemes
SWE 444: Internet & Web Application Development 2.103 GeneralGeneral DesignDesign GuidelinesGuidelines
DesignDesign guidelinesguidelines representrepresent bestbest practicespractices
OKOK forfor ““generalgeneral”” usersusers
Normal cognitive ability Normal audiovisual abilities
SomeSome guidelinesguidelines maymay bebe inappropriateinappropriate forfor audienceaudience membersmembers withwith specialspecial needs.needs.
Ex. Navigation elements for schizophrenics
MoreMore rigorousrigorous usabilityusability engineeringengineering techniquestechniques shouldshould bebe employedemployed (later(later inin lecture.)lecture.)
SWE 444: Internet & Web Application Development 2.104 GuidelinesGuidelines –– ResponseResponse TimesTimes
As response times increase, user satisfaction decreases Anything greater than 3 seconds, and the user becomes aware she’s waiting After 10 seconds, user gives up
Optimize, or minimize graphics
Consider breaking up large pages.
- use “width” & “height” attributes
Don’t forget your dial-up audience! Home page size should be < 50Kb Provide warnings (MPG – 2.5Mb)
http://www.websiteoptimization.com/services/analyze/wso.php
SWE 444: Internet & Web Application Development 2.105 GuidelinesGuidelines –– EfficiencyEfficiency
MinimizeMinimize distancedistance betweenbetween clickableclickable elementselements (while(while keepingkeeping effectiveeffective sizing)sizing)
AvoidAvoid frequentfrequent changeschanges betweenbetween micemice andand keyboardskeyboards
TabTab--friendlyfriendly forfor texttext--basedbased browsersbrowsers
MinimizeMinimize clicksclicks toto accomplishaccomplish taskstasks (rule(rule ofof thumb:thumb: nono moremore thanthan 44 clicks)clicks)
NotNot soso good:good: http://http://www.brown.eduwww.brown.edu
SWE 444: Internet & Web Application Development 2.106 GuidelinesGuidelines –– ColorsColors
Colors have different meaning depending on your audience
Cultural differences Domain-specific meanings Warm vs. cool colors
Minimize the number of colors
Avoid extreme hues, highly saturated colors
How does your site look on a CRT? LCD?
Supplement colors with other visual aids for those with limited color vision.
SWE 444: Internet & Web Application Development 2.107 GuidelinesGuidelines –– TextText LayoutLayout
ScreenScreen vs.vs. PaperPaper
ConsiderConsider differentdifferent windowwindow sizessizes
Avoid multiple columns Avoid fixed width
ReadabilityReadability
Sans-serif for screen, serif for print Avoid patterns, low-contrast background Short paragraphs
AllowAllow forfor useruser--selectedselected fontfont--sizessizes
SWE 444: Internet & Web Application Development 2.108 GuidelinesGuidelines –– PagePage StructureStructure
DisplayDisplay considerationsconsiderations
UseUse relativerelative positioningpositioning overover absolute.absolute.
VerticalVertical scrollingscrolling isis fine;fine; horizontalhorizontal scrollingscrolling isis NOT.NOT.
ImportantImportant elementselements shouldshould ALWAYSALWAYS bebe visible.visible.
MakeMake pagepage printprint--friendlyfriendly oror provideprovide alternativealternative stylestyle andand printprint button.button.
NotNot--soso--good:good: http//http//www.arngren.netwww.arngren.net
SWE 444: Internet & Web Application Development 2.109 GuidelinesGuidelines –– NavigationNavigation
ProvideProvide youryour useruser withwith aa mentalmental modelmodel ofof thethe sitesite ASAP.ASAP.
Intuitive navigation elements Site map Breadcrumbs
PulldownPulldown menus?menus?
Pros: Efficient use of space Cons: Key information is hidden
NotNot--soso--good:good: BrownBrown Univ.Univ. (circa(circa 2005)2005)
SWE 444: Internet & Web Application Development 2.110 GuidelinesGuidelines –– MulticulturalMulticultural
LocationLocation isis typicallytypically notnot aa constraintconstraint onon thethe Web.Web.
““LowestLowest commoncommon denominatordenominator”” applies:applies:
Avoid over-expressive colors Symbols Language Information representation (date/time formats)
PresentPresent formform elementselements consistentlyconsistently
SelfSelf--selection?selection?
SWE 444: Internet & Web Application Development 2.111 GuidelinesGuidelines –– EstablishingEstablishing TrustTrust
LoyaltyLoyalty isis fleeting,fleeting, butbut instillinginstilling confidenceconfidence duringduring aa transactiontransaction isis highlyhighly criticalcritical
WaysWays toto buildbuild trust:trust:
About us Easy-to-access Contact Information Interaction mechanisms (FAQ, chat rooms) Security & privacy policies Exchange and warranty policies Customer relations management
SWE 444: Internet & Web Application Development 2.112 GuidelinesGuidelines –– AnimationsAnimations && IconsIcons
Remember human attention – animations are typically distracting
Draw attention to an important function Explain something
Iconography should be used to support navigation understanding
Map to commonly-known metaphors Use redundant text and “alt” text! Not appropriate for (some) cognitive-impaired users
Not-so-good: http://www.globalaigs.org/
SWE 444: Internet & Web Application Development 2.113 GuidelinesGuidelines –– ConsistencyConsistency
ConsistencyConsistency keepskeeps learninglearning toto aa minimum;minimum; usersusers dondon’’tt wantwant toto havehave toto think!think!
IdentityIdentity cancan bebe setset byby consistentconsistent componentscomponents
Header: home, logo, navigation, search, help Footer: author, modification, contact
ConsistentConsistent designdesign helpshelps usersusers avoidavoid gettinggetting lost,lost, especiallyespecially whenwhen jumpingjumping toto differentdifferent subsub--unitsunits ofof anan organization.organization.
SWE 444: Internet & Web Application Development 2.114 UsabilityUsability EngineeringEngineering
ConsistsConsists ofof 44 phasesphases thatthat areare essentiallyessentially parallelparallel toto thethe WebWeb EngineeringEngineering processprocess
Requirements Analysis Design Implementation Operation
SWE 444: Internet & Web Application Development 2.115 UserUser--CenteredCentered vs.vs. UsageUsage--CenteredCentered
Phase Focal Points User-Centered Usage-Centered
(Traditional) (Web) Requirements Meetings, interviews, Competitive analysis; focus groups Task analysis & models Design & User requirements Models Implementation Direct user participation Inspection & remote testing Operation Training, evaluation of Log file analysis;analysis; server help-desk logs stats; user feedback analysis
SWE 444: Internet & Web Application Development 2.116 RequirementsRequirements AnalysisAnalysis
SystemsSystems AnalystAnalyst && UsabilityUsability ExpertExpert taketake thethe lead:lead:
Competitive Analysis Define qualitative/quantitative goals ¾ Information, Entertainment, Exchange (Siegel) ¾ Make them concrete and testable! User-centered: build user profiles Usage-centered ¾ Task analysis ¾ Ease-of-use or Ease-of-learning?
SWE 444: Internet & Web Application Development 2.117 InteractionInteraction andand DesignDesign
Initially,Initially, thethe InterfaceInterface DesignerDesigner buildsbuilds aa conceptualconceptual modelmodel
Based on core use cases Shows the basic structure
GettingGetting feedbackfeedback fromfrom potentialpotential usersusers
Storyboards & Paper Mock-ups Card-sorting (Navigation)
UsabilityUsability expertexpert providesprovides inputinput afterafter thisthis firstfirst round.round.
SWE 444: Internet & Web Application Development 2.118 InteractionInteraction andand DesignDesign
Designer and coders can then elaborate on the details
Additional user testing:
Prototypes – exhibit some functionality Usability Tests – real context, real tasks.
Remote usability testing
Sample of representative users Client-Logging software Web-cams if possible Better external validity & lower costs(?)
SWE 444: Internet & Web Application Development 2.119 CodingCoding andand PostPost--DeploymentDeployment
UsabilityUsability ExpertExpert assumesassumes thethe rolerole ofof thethe QualityQuality AssuranceAssurance manager.manager.
Consistency? Observed guidelines & standards? Adhered to (current) requirements?
BringBring samesame usersusers backback inin forfor testing,testing, ifif possible.possible.
Document,Document, document,document, document!document!
SWE 444: Internet & Web Application Development 2.120 MoreMore onon WebWeb AccessibilityAccessibility
People with disabilities are adopting the Web in greater numbers.
Tim Berners-Lee stressed universal access to the Web as essential.
20% of the world’s population have disabilities in at least one of the senses.
Key take-aways:
Designing for special needs doesn’t necessarily require reinventing your application. Doing so can also help “general” users
SWE 444: Internet & Web Application Development 2.121 WebWeb AccessibilityAccessibility InitiativeInitiative (WAI)(WAI)
WebWeb ContentContent AccessibilityAccessibility GuidelinesGuidelines 1.01.0 (WCAG,(WCAG, 1999)1999) publishedpublished byby thethe W3CW3C’’ss WAIWAI
33 PrioritiesPriorities
1) Must 2) Should 3) May
DefinesDefines GroupsGroups
WCAGWCAG 2.0?2.0?
SWE 444: Internet & Web Application Development 2.122 SpecialSpecial NeedsNeeds GroupsGroups
WAIWAI identifiesidentifies thethe followingfollowing specialspecial needsneeds groups:groups:
Visual Hearing Physical (Motor) Speech Cognitive Age-related
SWE 444: Internet & Web Application Development 2.123 VisualVisual ConsiderationsConsiderations
High-contrast color schemes
Large font sizes; ability to change fonts
Use alt attributes!
Avoid frames
Access key attributes, and rapid tabbing
Many software packages for text-to-speech Some integrate with browsers OK Firefox plug-in: FireVox
Good example: http://www.afb.org
SWE 444: Internet & Web Application Development 2.124 AuralAural ConsiderationsConsiderations
CaptioningCaptioning audioaudio andand videovideo
Synchronized Multimedia Integration (SMIL) Good QuickTime, RealAudio Support W3C standard
ComplementComplement texttext withwith simplesimple imagesimages
Clear,Clear, simplesimple languagelanguage
SWE 444: Internet & Web Application Development 2.125 PhysicalPhysical (Motor)(Motor) ConsiderationsConsiderations
MayMay requirerequire specializedspecialized hardwarehardware
Mice Keyboards Voice Recognition
AvoidAvoid elementselements thatthat requirerequire timetime--dependentdependent responsesresponses oror preciseprecise mousemouse movements.movements.
AccessAccess keykey attributesattributes
ConsistentConsistent tabtab orderingordering inin forms.forms.
SWE 444: Internet & Web Application Development 2.126 CognitiveCognitive ConsiderationsConsiderations
MostMost neglectedneglected ofof thethe groupsgroups
Little research in terms of Web usability “Reinvent the wheel” mentality
TypicallyTypically havehave troubletrouble dealingdealing withwith abstractionsabstractions –– keepkeep thingsthings concreteconcrete
StillStill aa relativelyrelatively newnew researchresearch fieldfield
Approaches may vary. No distracting elements Emphasis on consistent navigation High-contrast; large font sizes
SWE 444: Internet & Web Application Development 2.127 HelpfulHelpful ToolsTools && ResourcesResources
DevelopmentDevelopment
Firefox Developer Toolbar (http://chrispederick.com/work/web-developer/)
TestingTesting
http://webxact.watchfire.com (Bobby) http://www.webaim.org (WAVE tool)
SectionSection 508508 ofof thethe RehabilitationRehabilitation ActAct
http://www.section508.gov
SWE 444: Internet & Web Application Development 2.128