Web 2.0 Design Audio Video IM Convergence CSS Pay Per Click - PDF document

Based on: Pressman, “Software Engineering”, chapters 16+ Based on: Norrie and Grossniklaus, “Web Engineering”, ETH Zürich Wikis Aggregators Folksonomy http://www.globis.ethz.ch/education/ Joy of Use User Centered Blogs Participation Six Degrees Usability Pagerank Widgets XFN Social Software FOAF Recommendation Web Engineering Browser Simplicity Sharing Perpetual Beta Collaboration AJAX Videocasting Podcasting Web 2.0 Design Audio Video IM Convergence CSS Pay Per Click Software Engineering UMTS Mobility Affiliation Trust Andreas Zeller • Saarland University Atom Ruby on Rails SVG VC XHTML RSS Economy OpenAPIs Web Standards Semantic SEO Remixability Standardization OpenID The Long Tail REST DataDriven XML Accessibility Microformats Syndication Modularity SOAP 1 What is Web Engineering? Techniques, tools, and methods to support systematic approaches to the development, deployment and maintenance of high-quality Web systems 2 Originally: Static hypertext documents linked together The Web in 1989 – static HTML – Server B Server A Server C 3

Today: Web pages generated by programs, from databases… The Web today – everything is dynamic – Database static Web pages dynamic Web pages 4 The Web tomorrow Wikis Aggregators Folksonomy Joy of Use User Centered Blogs Participation Six Degrees Usability Pagerank Widgets XFN Social Software FOAF Recommendation Browser Simplicity Sharing Perpetual Beta Collaboration AJAX Videocasting Podcasting Web 2.0 Design Audio Web 2.0 Video IM Convergence CSS Pay Per Click UMTS Mobility Affiliation Trust Atom Ruby on Rails SVG VC XHTML RSS Economy OpenAPIs Web Standards Semantic SEO Remixability Standardization OpenID The Long Tail REST DataDriven XML Accessibility Microformats Syndication Modularity SOAP 5 See Pressman, “Software Engineering”, chapter 16 WebApp Attributes • Network-intensive • Concurrent • Unpredictable load • Performance • Availability • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics 6

• Network-intensive • Concurrent • Unpredictable load • Performance • Availability Network-intensive • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • A WebApp resides on a network and serves a diverse community of clients • Includes multi-channel access → separating functionality and presentation Web services Phone access (SOAP, XML) (Voice XML) Mobile browsers (HTML) Desktop browsers WAP browsers (HTML, Flash, …) (WML, CHTML) 7 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Concurrency • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • A large number of users may access the WebApp at one time; patterns of usage among end-users will vary greatly. • Implies designing for concurrency 8 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Unpredictable load • Data driven • Content sensitive www.st.cs.uni-sb.de www.st.cs.uni-sb.de Dashboard Dashboard Oct 27, 2007 - Nov 26, 2007 Oct 27, 2007 - Nov 26, 2007 • Continuous evolution • Immediacy • Security 200 200 • Aesthetics 100 100 • The number of Site Usage Site Usage 1,425 Visits 1,425 65.12% Bounce Rate 65.12% Visits Bounce Rate WebApp users 3,249 3,249 Pageviews 00:02:32 Avg. Time on Site 00:02:32 Pageviews Avg. Time on Site 2.28 Pages/Visit 2.28 70.11% % New Visits 70.11% may vary by Pages/Visit % New Visits Visitors Overview Visitors Overview Map Overlay world Map Overlay world orders of 200 200 magnitude from 100 100 day to day. Visitors Visitors 1,008 1,008 Visits 1 900 Traffic Sources Overview Traffic Sources Overview Content Overview Content Overview Search Engines Search Engines Pages Pages Pageviews Pageviews % Pageviews % Pageviews 588 (41.26%) Direct Traffic / 604 18.59% Direct Traffic 538 (37.75%) Referring Sites /zeller/ 253 7.79% Referring Sites 299 (20.98%) /?lang=en 248 7.63% /dd/ 170 5.23% /edu/einst/c++-uebungen.php 114 3.51% 9

• Network-intensive • Concurrent • Unpredictable load • Performance • Availability Performance • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • If a WebApp user must wait too long, he or she may decide to go elsewhere. • Performance hogs include: • access • server-side processing • client-side formatting and display 10 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Availability • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • Users of popular WebApps often demand access on a “24/7/365” basis. • This is unreasonable. 11 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Data driven • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • Most WebApps use hypermedia to present content to the end-user. Includes text, graphics, audio, and video content • WebApps also enable providing access to e-commerce and financial information Original access via specialized apps only 12

• Network-intensive • Concurrent • Unpredictable load • Performance • Availability Content sensitive • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • The quality and aesthetic nature of content remains an important determinant of the quality of a WebApp. • “It’s the content, stupid!” 13 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Continuous evolution • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • Unlike conventional application software that evolves over a series of planned, chronologically-spaced releases, Web applications evolve continuously. 14 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Immediacy • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • WebApps often exhibit a time to market that can be a matter of days or weeks. 15

• Network-intensive • Concurrent • Unpredictable load • Performance • Availability Security • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • WebApps have to protect sensitive content and provide secure modes of data transmission. • Strong security measures must be implemented throughout the infrastructure and within the WebApp itself. 16 • Network-intensive • Concurrent • Unpredictable load • Performance • Availability Aesthetics • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • When an application has been designed to market or sell products or ideas, aesthetics may have as much to do with success as technical design. 17 • Network-intensive http://www.ingenfeld.de/ • Concurrent • Unpredictable load • Performance • Availability Aesthetics • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics • When an application has been designed to market or sell products or ideas, aesthetics may have as much to do with success as technical design. 18

See Pressman, “Software Engineering”, chapter 16 WebApp Attributes • Network-intensive • Concurrent • Unpredictable load • Performance • Availability • Data driven • Content sensitive • Continuous evolution • Immediacy • Security • Aesthetics 19 Building Design Requirements Web Apps Coding Quality Assurance 20 WebApps are different • Large variety of people involved in development programmers • database experts • designers • content providers • Typically developed for unknown set of users with no training WebApps typically compete for users • Speed of development and evolution 21

WebApp Process • Must accomodate: • Incremental delivery • Frequent changes • Short timeline 22 Incremental Process Planning Modeling Delivery & Construction Feedback Software Increment 23 The Customer Planning Modeling • Defines the business + organizational context for the WebApp • Describes the problem the WebApp is to solve Delivery & Customer Construction Communication Feedback • Gather requirements: user tasks • content • interaction • navigation Software Increment 24

The Plan Planning Planning Modeling • Defines the project plan for the WebApp • Contains task definition and timeline schedule Delivery & (usually weeks) Construction Feedback • Establish milestones that can be verified Software Increment 25 The Model Planning Modeling Modeling • Analysis model: a basis for design Content • interaction • functions • configuration • Design model: Delivery & Construction key WebApp elements Feedback Content • aesthetics • architecture • user interface • navigation Software Increment 26 Construction Planning Modeling • Using Web tools and techniques • Run rapid tests for Delivery & Construction Construction content • architecture • Feedback interface • navigation Software Increment 27