Ajax, flash & rich internet applications  harnessing the technological background of the web 2.0 revolution
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Ajax, flash & rich internet applications harnessing the technological background of the web 2.0 revolution

  • 5,263 views
Uploaded on

Ajax, flash & rich internet applications harnessing the technological background of the web 2.0 revolution

Ajax, flash & rich internet applications harnessing the technological background of the web 2.0 revolution

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,263
On Slideshare
5,263
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sieu thi dien may Viet Long - www.vietlongplaza.com.vn Ajax Emakina Academy 1
  • 2. AgendaPart 1 --09h30-10h30Part 1 09h30-10h30 Part 2 --10h30-11h30 Part 2 10h30-11h30 Part 3 --11h30-12h30 Part 3 11h30-12h30 Welcome & Introduction Welcome & Introduction Ajax & Usability Ajax & Usability Conclusions & Summary Conclusions & Summary About Emakina About Emakina Usability Usability B2B Examples B2B Examples User Experience User Experience Business Aspects Business Aspects Ajax Opportunities Ajax Opportunities Prehistory of Ajax Prehistory of Ajax Selected Cases Selected Cases Next Steps Next Steps B2B Problems B2B Problems Technical Overview Technical Overview Emakina methodology Emakina methodology Flash vs Ajax Flash vs Ajax 2
  • 3. 1.1Welcome & IntroductionEmakina Academy,September 13 3
  • 4. Find the common thread 4
  • 5. The answer 5
  • 6. 1.2About EmakinaEmakina Academy,September 13 6
  • 7. Emakina ModelConsulting MarketingStrategy and planning Tactical actionsMarketing studies Multi-channelROI studies Direct to 1-to-1 SuccessfulTechnology E-Commerce CreationE-Business platforms ConceptIntegration Graphic DesignWeb development UsabilityHosting Content 7
  • 8. Customer Recruitment Reward Reward Convert to mechanisms mechanisms CustomersCUSTOMERSCUSTOMERS Collect S Rich modules Rich modules Games Prospects ES Games EN Websites Websites Communicate AR Promo-sites Promo-sites Offer AW Bannering Bannering Recruit RecruitCompany Newsletters Newsletters Visitors Visitors 8
  • 9. Multi-Channel Approach Above the line Agency WORLD WIDE WEB WORLD WIDE WEB IDEAS IDEAS EMAIL Integrated communication Integrated communication EMAIL RICH COMMUNICATION RICH COMMUNICATION BANNERING BANNERING YOUR AFFILIATE AFFILIATE EMAKINA CUSTOMERSCOMPANY SMS, MMS SMS, MMS IVR IVR IDEAS IDEAS SEARCH ENGINE Integrated communication Integrated communication SEARCH ENGINE VIRAL MARKETING VIRAL MARKETING Below the line Agency 9
  • 10. Competence CenterInternet technologies E-business applications – Hosting, Security – Application Server : – HTML / DHTML (JavaScript) IBM Websphere Suite, ATG – XML / WML / VXML Dynamo, ColdFusion MX – Flash / Shockwave / VR / 3D – CMS : emagiC, Tridion R5 – ColdFusion MX – Portal : – Real / WMA / QuickTime SAP Portal, IBM Portal Server – SOAP, Web Services – NetIQ Webtrends Reporting – MS SQL Server / Oracle 9i Center, ... – JAVA / JSP / J2EE – MS ASP / COM (Visual Basic) – ASP.NET / .Net – PHP – SAP (BAPI / Business connector) – C, C++, C# 10
  • 11. Customers 11
  • 12. Emakina in a nutshell+90 team members and growingNumber 2 Belgium Web Agency(ranking Inside 2006)Number 1 Creative Agency(ranking Media Marketing 2006)A unique offering in e-marketing and e-businessIntegrated competences in Strategy,Creation & Design and IT DevelopmentStable and profitable environmentListed on Alternext (ALEMK) since june 2006Raised 7.3 Meuros for european expansionPrestigious references 12
  • 13. 1.3The User ExperienceEmakina Academy,September 13 13
  • 14. Experience matters 14
  • 15. The Experience Matters> 15
  • 16. Evolution of Economic Value Unique Relevant Stage Stage Competitive to Customer Experiences Experiences Position Needs Deliver Deliver Services Services Make Make Goods GoodsUndifferentiated Irrelevant Extract Extract to Customer Competitive Commodities Commodities Position Needs Market pricing Premium pricing 16
  • 17. Examples of the Economics $5.00 for a Latte Coffee costs 49 cents $250 for a Birthday Party Evolution of the Birthday Experience $2,500 for a laptop computer “Think Different” 17
  • 18. Evolution of Digital Experience Unique Relevant Experiences Experiences Competitive to Customer (RIAs) (RIAs) Position Needs Features Features (Web Apps) (Web Apps) Function Function (Perl Script) (Perl Script)Undifferentiated Irrelevant Presence Presence to Customer Competitive (Flat HTML) (Flat HTML) Position Needs Market pricing Premium pricing 18
  • 19. The Web Doesn’t Cut It Dist ribut ion of scores from 158 Web site reviews conducted by Forrester, Dec. 1999 to May 2001 Sites are scored from -50 (low) to 50 (high) 35 Number 25 of sites Top score: 23 in each 15 range of scores 5 -50 -30 -25 -20 -15 -10 -5 0 5 10 15 20 25 50 Commonly failed tests Failure rate Guided search 87% Comprehensive and precise search 84% Passing grade: 25 or higher Act ive personalizat ion 80% Average score overall: -3.5 Proact ive customer service 75% Accessibilit y 70% Average B2C score: -2.2 Efficient page layout 66% Task-specific interact ivit y 59% Average B2B score: -5.5 Site reliability 55% Sites are graded on 25 test s; each test is Essent ial content available 54% scored on a scale from -2 (crit ical failure) Consistent navigat ion 48% to 2 (exemplary pass) 19Source: Forrester Research, Inc.
  • 20. How We Got Here Mainframe Desktop Client/Server Websites None: dumb green-screen High: High: Interactivity Low: or command-line Drag-and-drop, point-and- Drag-and-drop, point-and- terminals Point-and-click, form fill-in click click User High: resizable Flexibility Medium: resizable Interface None: components, configurable display, local data, custom components, configurable Low: limited customization of page appearance No customization possible display, server-side data shortcuts Medium: real-time High: real-time Power None: only displays data computation, complicated computation coupled with None: only displays data sent by server sent by server information visualization access to server-side data Deployment Low cost High cost High cost Low cost 20Source: Forrester Research, Inc.
  • 21. A New Solution is Needed – the X Internet Forrester’s Definition: Intelligent apps that execute code near the user to create rich, engaging user experiences on the Net 21Source: Forrester Research, Inc.
  • 22. Forrester’s X-Internet Timeline 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 22Source: Forrester Research, Inc.
  • 23. Rich Internet Application Fit Traditional Software UI New classes Executable of applications Internet UI More value from existing applications HTML UI 23Source: Forrester Research, Inc.
  • 24. Rich Internet Applications 24
  • 25. Rich Internet Applications Web Desktop Rich Internet AppsInstant Deployment √ √Cross-platform √ √Progressive download √ √Magazine-like layout √ √Multimedia √ √Standards-based: XML, SOAP, J2EE √ √Interactive UI – validation, formatting √ √Fast response times (no page refresh) √ √Drag and Drop √ √Scalable √ √Works online √ √Traditional n-tier development model √ √Easy to add communications features √ 25
  • 26. Rich Internet Application Results35% increase in reservations year to year50% reduction in time entering ordersReduced page load time by 50%More than doubled the average number of bookings per session75% of first-time site visitors returnedGreater than a five-fold return on initial pilot project investment 26
  • 27. X Internet Forrester Research: "... browser-based applications deliver sub par user experiences ... Executable Internet Technology will help companies return responsiveness and productivity to Net-based apps." 27Source: Forrester Research, Inc.
  • 28. Summary Results Results Experience ExperienceRich Internet ApplicationsRich Internet Applications 28
  • 29. 1.4Prehistory of AjaxEmakina Academy 29
  • 30. Human natureAbraham Maslow:“If the only tool you know is a hammer,every problem looks like a nail” 30
  • 31. Web 2.0Web 2.0 is set of buzzwords that point to the eradication of theclassical web model and indicate a more democratic andcollaborative web experience 31
  • 32. The right tool for the right contextWeb 2.0 Buzzword B2C B2BUser generated content Works only for top brands (eg. Apple); Brand risk as it quickly becomes others require moderation comparison platformCollaboration Strengthens the brand experience Brand risk for user2user Okay for assistant2customerWeb as platform Positive Less dependency on plugins but requiresApplications within browser large installed baseUsability Key success factor Key success factor when applied methodologicallyLook and feel Key appeal factor Requires discretion Valuable service before brandingPerpetual beta Acceptable if limited outages Unacceptable no compromise on (see Yahoo experience) continuityCommunities Requires moderation C2C communities not allowed Potential branded B2C academiesSlim Ajax applications Mostly positive Requires large installed baseLightweight DHTML (consider non-Ajax backup)User feedback Positive as it gives valuable feedback Positive if applied systematically andContribution to roadmap discretelyPersonalization Key success factor Key success factor when relevant (see Amazon)Customization Requires good features Seldom used 32 (see Google homepage) (see myYahoo)
  • 33. A Brief History FF 2 SVGJava Applet E4X ECMAScript XSL-T Mozilla 1.0 NS 2.0B3 JavaScript Flash 3 WSDL FF 1.0 CSS DOM 1 XHTML SVG Flash 996 98 05 06 97 99 00 01 02 03 04 XSL-T 2 IE 3 IE 4 IE 5 IE 6 XForms IFrames DOM XML It Works! DOM 3 CSS XSL-T RDF JScript XMLHTTP Browser Wars The Web Depression Web 2.0 33
  • 34. In the beginning, there was DOS 34
  • 35. Then…Windows 35
  • 36. Windows UI Matures… 36
  • 37. The Future…Maybe? 37
  • 38. History repeats itself, over the Web Watching grass grow, watching paint dry, filling in forms, … 38
  • 39. The new webDon’t focus on technology,focus on getting the work done 39
  • 40. Example of Microsoft Ajax Application Useful Useful functions functions Integrated Integrated coexisting coexisting applications with applications with Contextual Contextual added value added value actions actionsApplication Application like likebehaviour behaviour Application Application Interactivity Interactivity like like without full without full behaviour behaviour page reload page reload Rating Rating system system 40
  • 41. Key disadvantages of traditional web appsPoor Interactivity Simplistic Interfaces Users must wait for full page The requirement for full page reloads after each interaction with postback whenever the user the server. interface has to be changedSlow & Unresponsive imposes hefty limitations on the Classic web applications transfer degree of sophistication of web the complete form data to the user interfaces. Rich and smooth server, which in turn renders and interfaces with on-demand update sends back the full HTML markup could only be implemented using of the page to the browser. Lots of host technologies bandwidth is consumed and the Wasted Resources performance is significantly Powerful PCs, sitting 99% idle hindered. while sophisticated servers arePoor User Experience compiling multi-dimensional DB We’re 2006, yet most web forms queries AND writing <tr><td>… at look like coming from 1996 the same time 41
  • 42. The rise of the new web“The Web as we know it is changingprobably more than it has since thefirst graphic showed up… The idea ofthe webpage itself is nearing itsuseful end. With the way Ajax allowsyou to build nearly statelessapplications that happen to be webaccessible, everything changes.”Jesse James GarrettFebruary 15, 2005 42
  • 43. Maslow’s Pyramid on Internet Featured / ranked in Wikipedia Technorati Slashdot / Digg Fulfilment Actualization Show your Expertise Blogs Communities Esteem needs Forums Social Networks Status, recognition Social bookmarking Groupware Knowledge sharing Love, Belonging, Social needs Anti-Virus Integration, network, circle of friends Hoax Groups Support Forums Technical help Safety and Security needsMessenging Truth, protection, integrity, …Information / SearchOnline Web AppsPublishing Physiological needs: Act, communicate, interact, exchange, … 43
  • 44. Enter AjaxAjax aims to deliver: – Rich applications in browsers – No issues with installation – Built on existing infrastructure: (TCP/IP, SSL, HTTP, XML…)Concept & Mechanics – Acronym stands for “Asynchronous JavaScript + XML”. – The core idea behind Ajax is to make the communication with the server asynchronous, so that data is transferred and processed in the background. – As a result the user can continue working on the other parts of the page without interruption. – In an Ajax-enabled application only the relevant page elements are updated, only when this is necessary. Ajax is a new development technique, not language, Ajax is a new development technique, not language, blurring the line between web-based and desktop applications blurring the line between web-based and desktop applications delivering rich, highly responsive and interactive interfaces delivering rich, highly responsive and interactive interfaces 44
  • 45. Ajax – The detailsMotivation: – HTTP never intended to dynamically serve content – Pages always reload, but never get updated – Users wait for the entire page to load even if a single piece of data is needed – Single request/response restrictions: no middle ground between “this page” and “next page”Describes a simple development pattern – Asynchronously request data from the server – Process the Result – Update the Page – Technology has been around for many yearsVery good for improving form interactionsUsually insufficient by itself for building applications Ajax is a tool (pattern) of many for building rich experiences Ajax is a tool (pattern) of many for building rich experiences 45
  • 46. Direct AdvantagesBetter Performance and Efficiency: Small amount of data transferred from the server. Beneficial for data-intensive applications as well as for low- bandwidth networks.More Responsive Interfaces: The improved performance give the feeling that updates are happening instantly. Ajax web applications appear to behave much like their desktop counterparts.Reduced or Eliminated "Waiting" Time: Only the relevant page elements are updates, with the rest of the page remaining unchanged. This decreases the idle waiting time.Increased Usability: Users can work with the rest of the page while data is being transferred in the background. 46
  • 47. So why is Ajax so hot—NOW?Times are changing It addresses fundamental needs Web2.0 Trend Increase Usability of Web It has a name Applications Recent Google applications have Demand for richer applications is sparked people’s imagination: growing without Flash Google gmail, Google suggests, Save Bandwidth Google Maps Download only data you need Browser Consolidation Faster interfaces (sometimes) Open Standards & Toolkits People are thinking of building Broadband means we can - and APPLICATIONS…not just site want to - do moreThe Tipping Point:The Tipping Point:All of this has made rich internet apps reach its tipping pointAll of this has made rich internet apps reach its tipping pointwhere adoption spreads rapidly and dramaticallywhere adoption spreads rapidly and dramatically 47
  • 48. Is it new?Not ReallyHidden FramesIE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+JavaApplets 48
  • 49. Ajax ApplicationsApplications that have highest benefit from Ajax: Highly interactive, data rich applicationsExamples: Google Spreadsheet: Data visualization – visualizing large datasets Google Maps: Scroll, pan, zoom… all without Flash Data input & validation: it’s possible to validate the data the user enters, while they are entering it. They can then receive feedback (using the server’s intelligence) without the page being posted back. 49
  • 50. Some examplesAmazon A9 Search EngineFlickrGoogle Labs & Apps– Orkut: social network– GMail: web based email– Google Maps– Google Spreadsheets– Google Suggests– Google Toolkit Demo > School rosterDemos– Drag & drop shop: http://demo.script.aculo.us/shop– Forms http://openrico.org/rico/demos.page?demo=rico_Ajax_complex 50
  • 51. Before Ajax: Mapshttp://www.mapquest.com 51
  • 52. After Ajax: Maps 52
  • 53. Ajax is aboutUsability User experience Ease of use Hard to describe Ability to get things done faster Users just get it Measurable Examples Easier to learn – iPod High performance – Google Maps Competitive advantage 53
  • 54. The 8-Hour RuleQuestion: Can your users work with your application for 8 hours a day without getting frustrated?Answer: Traditional web applications fail this rule miserablySolution: Ajax to the rescue 54
  • 55. B2B expectationsToday’s reality Tomorrow’s expectations Applications are complex Applications should become and require a manual to use straightforward; manuals is for advanced features Applications are slow and people Like Amazon, precompile results frequently wait 10-20s for a where possible, use advanced process to finish or a page to load caching techniques and Ajax Forms are just a sequential dump Well structured dynamic forms, of input fields mandatory and optional blocks Fonts are small to compensate for Drill down on details long numbers and long lists Error handling is like “there is an Shift from error reporting to error, please verify your data” proactive handling and solving Telephone numbers are hard to Online contact, messaging, find assistance is on stand-by Business applications and tools should deliver dashboards Business applications and tools should deliver dashboards providing quick access to key data leading to informed decision making providing quick access to key data leading to informed decision making 55
  • 56. UsabilityAn analysis of intranet portals found slimmer informationarchitectures and a renewed emphasis on fresh content and usefulapplications KISS modelThe initial objective/mantra“We need a website”has been replaced by“We need a user friendly and usable website”Arrival of usability groups: – SAP Design Guild – Jakob Nielsen – Governmental guidelines –…Specialized skills – Usability experts ≠ development skills 56
  • 57. Web servicesBefore Now Previously websites had poorly Application providers develop integrated applications (HTML documented web services scrubbing, interface Sites can query web services and redevelopment, poor CSS support, present information a la carte …) Web Services are W3C endorsed Users often bypassed portal to less vendor dependency bookmark service directly (deeplinks) 57
  • 58. Presence based servicesPresence integration – Users can determine the online status of site members quickly by sending e-mail or an instant message, adding the member to a contact list, and viewing current free/busy status.Examples – Show which users are online, and start an instant messaging conversation with them 58
  • 59. CollaborationSolve specific business problems using collaboration tools:Streamline business process with employees and partnersProvide users with contextual collaborationCommunication tools as part of their day by day projectsReduce the pain associated with a proliferation of toolsMerging tools into single environmentBenefit from increasingly rich collaboration platformsProvide tools and let users find an application that helps them intheir normal business process evolution, not revolutionEmbedded collaboration capabilitiesMore built-in support (teamwork, …)Product/platform vendor competitionStrive to push proprietary standards vs open standards makesinteroperability not yet today’s reality 59
  • 60. 1.5FlashEmakina Academy 60
  • 61. Macromedia FlashDispelling the myths – “Flash is an animation tool” – “Flash is for games and web intros, not for business applications” – “Only graphic designers can use Flash” – “ActionScript is not a real programming language” – “ActionScript is convoluted and hard to maintain” – “Flash will not fit into an MVC J2EE architecture” 61
  • 62. Real-World Business Applications Using Macromedia Flash Dai Nippon Printing Group: www.dnpribbons.com/tools_and_resources/ribbon_runner/ Breckenridge Communications CommCenter: http://commcenter.breckcomm.com Code Alloy – Shopping Client: http://www.codealloy.com/shoppingclient_download.htm Nike Golf: http://www.nike.com/nikegolf/ More case studies can be found in the Macromedia Showcase at www.macromedia.comDNP, printer supplies University of North Carolina, Medical log Brocade, sales performance 62
  • 63. Leverages a Ubiquitous Client… 414 Million users have the Macromedia Flash Player 98 90 76 63 63 53 38Macromedia Java Acrobat Windows Macromedia Real Player QuickTimeFlash Player Reader Media Player Shockwave Player Player 63
  • 64. Technical BenefitsEase of development and deploymentIntegrates into legacy environmentsExtends existing applications without re-workFits into current development processSupports a broad range of platforms and devicesCuts QA time for cross-platform support 64
  • 65. Why Macromedia? Rich Internet ApplicationsClient Flash Player client is aSide Browser Browser standard browser plug-in Flash Client Flash Remoting provides an optimized connection between theInternet .html .swf .cfm .xml Flash client and the ApplicationServer ServerSide Web Server Web Server Flash Communication Server seems the best choice for Flash Remoting streaming videos Application Server Application ServerDatabase &Integration DB DB 65
  • 66. RIA Examples In this SectionExample Applications Yankee Candle – Advent Labs Youth Hostel Association of – Trio Motors Australia – Pet Market – Jeremy Allaire Presentation GMAC Real EstateSubaru Primal Quest Ambient AutomationCharles Schwab Grand Chiropractic Health CareNew York Stock Exchange Team ConnectBose 66
  • 67. Example > Charles SchwabChallenge Charles Schwab executives needed an easy to use tool to help them see how budget is being allocated across market campaignsSolution Macromedia FlashBenefit These new tools help Schwab make more efficient use of their marketing budgets. 67
  • 68. Example > Bose CorporationChallenge Help customers visualize an entertainment system in their homeSolution Macromedia Flash MXBenefit Developed an online guide that both supports and educates the customer throughout the buying process with interactive, instant and relevant product information delivered in a visually engaging way. 68
  • 69. Example > Ambient AutomationChallenge Develop a corporate information system that consolidates clients Great Plains accounting, Goldmine contact management, and t help desk databases into one advanced user interfaceSolution Macromedia Flash MXBenefit 50% overall reduction in time and 60% reduction in errors for entering and processing orders. 69
  • 70. Example > Team ConnectApplication TeamConnect is a powerful way of ensuring a business can take on more projects and yet be able to deliver additional results more reliably and profitably than competitors.Challenge Create a project planning and scheduling applicationSolution Macromedia Flash MX Macromedia Flash Communication Server MX Macromedia JRun 4 70
  • 71. 2.1Ajax & usabilityEmakina academy 71
  • 72. Short introduction about Usability 72
  • 73. Introduction What is usability?It’s the quality measuring how User Interface is easy to use, easy to learn & provides a positive feedback to user 73
  • 74. 5 qualities of usabilityLearnability How easy is it for users to accomplish basic tasks the first time they encounter the design?Efficiency Once users have learned the design, how quickly can they perform tasks?Memorability When users return to the design after a period of not using it, how easily can they reestablish proficiency?Errors How many errors do users make, how severe are these errors, and how easily can they recover from the errors?Satisfaction How pleasant is it to use the design?Source : J.Nielsen 74
  • 75. Fields of UsabilityUser experience maps user needs to business needs through Information architecture Information design Functional design Interaction design Graphical design 75
  • 76. Usability as a part of UX 76
  • 77. Actual Situation in web usabilityPerceptual usability Standards are knownUser behaviours have been studiedUser understands Client / browser interaction 77
  • 78. LimitationsLimitation of existing client/browser HTML experience Experience is less rich than Desktop applications Form based experience : Limited User Interface element vocabulary no intelligent fields , autocomplete, specialized selectors Difficult to handle large amount of datas Wysywyg capabilities are poor Interaction capabilities are poor No keystroke controls, no selections, poor arrow control Poor selection, no drag & drop control You need to refresh the page to get/post new datas Business rules must be server side 78
  • 79. Usability & user experience : why?Of course : satisfaction of users and consumers !!!Business benefits investment optimization Higher acquisition, conversion rates optimize sales and advertising investments Increase efficiency & productivity (time per task) reduce human cost More usable than competitors be ahead of competition Product experience user centric business & identity Reduce training & support 79
  • 80. 2.2Business BenefitsEmakina academy 80
  • 81. How can Ajax improve usability and user experience toincrease your business benefits? 81
  • 82. Ajax main featuresOn demand request on server without reload Request data, validate business rules, store user activity without reloading pageSmoothness & speed Fewer reload more immersive experienceHigher level of interactions and controls User experience can be similar 99% to a desktop application browser as a platform User know very well this interaction environment!User interface is object oriented & controlled by events DOM + JavaScript event model propose a rich Object oriented user interface 82
  • 83. Ajax new UI elementsIntelligent fields Auto complete / suggest, validation rules, large datas selectorsEditable areas Click and edit text fields, wysywig area, auto SaveAdvanced UI elements Widgets, overlayer, floating window, floating pannels, cascading menus, sortable datagridsAnd a lot more still to create … 83
  • 84. Ajax New Interactions patternsDrag & drop, cursor based selectionImmediate feedbackKeystroke & arrows controlsAuthoring experience vs fill a form 84
  • 85. 2.3Selected CasesEmakina academy 85
  • 86. Let’s see Ajax in action Emakina Cases 86
  • 87. Electrabel registration process Ajax improves acquisition 87
  • 88. Case Electrabel registrationDescription 2006 Allow Electrabel’s visitors to register to self service online applications Potential audience : 4,5 millions consumersBusiness objectives : Decrease administrative cost through online services usage Electronic billing Online Administrative service 88
  • 89. Identified IssuesLot of user starts process but gives up during the processLooks too complicate and too longRequires 3 steps and lot of business rulesRequires complex information input : billing information, highlysecured password policy,High level of security 89
  • 90. Case Electrabel registration 90
  • 91. Case Electrabel registrationUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 91
  • 92. Case Electrabel registrationAjax Solution Guides user within all the process Simplify the form perception Help user to input complex forms Ensure quality of data acquisitionBusiness benefits Increase conversion rate increase usage of online applications 92
  • 93. Atofina navigation Ajax improvesperformance & personalization 93
  • 94. Atofina Navigation systemDescription Already in 2002 International communication company portal High level of personalization required Large amount of data IBM Portal serverBusiness objectives : Increase employee self appropriation of the tool Increase visibility of all content available Increase speed to find information 94
  • 95. Atofina Navigation system 95
  • 96. Atofina ScorecardUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 96
  • 97. Atofina Navigation systemAjax Solution Autoscroll and adapt to screen size Cascading menu User Interface elements Drag & drop interaction, expand collapse Light code : objects are generated client side (no html code is downloaded) DOM based and integrated in IBM portal serverBusiness benefits Increase employees satisfaction Save employees time to find information 97
  • 98. Electrabel localisator Ajax guides userand improve efficiency 98
  • 99. Electrabel localisatorDescription 2006 User must localize himself to have access to information related to energetic market liberalization Require user locality (high level of precision) Require a large amount of choices and data Require efficiency because highly intrusive questionBusiness objectives : Make it as efficient as possible 99
  • 100. Electrabel localisator 100
  • 101. Electrabel localisatorUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 101
  • 102. Electrabel localisatorAjax Solution Auto suggest within all belgian localities and CP Avoid any mistakes for 1 CP n LocalitiesBusiness benefits Very fast and efficient process Reusable UI component for all Forms 102
  • 103. Porsche car configuratorAjax provides an immersive experience 103
  • 104. Electrabel localisatorDescription 2000 User configures his model in the huge choice of options Show price as i select option Linked to real options databaseBusiness objectives : Make it as simple as possible Make it ludic and create an emotion associated with the product identity 104
  • 105. Porsche car configurator 105
  • 106. Porsche car configuratorUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 106
  • 107. Porsche car configuratorAjax Solution Better experience than form based configurator Real time price calculation Large amount of options possible Highly maintainableBusiness benefits High impact on consumer Efficiency to configure a car and get a price in a complex pricing model product 107
  • 108. Non Emakina cases 108
  • 109. Bet & WinAjax improves conversion 109
  • 110. Bet & win : betting processDescription Process to place a bet on a bookmaker website Audience : gambler, compulsive gamblerBusiness objectives : Increase the number of bets placed by visitors Increase amounts of each bets Place a bet as fast as possible 110
  • 111. Bet & win : betting process 111
  • 112. Bet & win : betting processUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 112
  • 113. Bet & win : betting processAjax Solution Few clicks to place a bet High level of fluidity Provides immediate preview of the potential gainBusiness benefits Increase conversion rate Exploit the compulsive behaviors of gambler 113
  • 114. Netvibes.comAjax reinvents the portal experience 114
  • 115. Netvibes portal experienceDescription A new generation of portal providing a new experience Web2.0 projectBusiness objectives : Be ahead of competition with a total new experience Propose an experience as new as possible Propose an extremely fluid experience 115
  • 116. Netvibes portal experience 116
  • 117. Netvibes portal experienceUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 117
  • 118. Netvibes portal experienceAjax Solution Personalize without saving Rich interaction model : drag & drop Easy switch between view & edit Side panel Widget based user interfaceBusiness benefits Self explanatory 3’000’000 register user in less than 1 year ! Rich product identity 118
  • 119. Global benefit 119
  • 120. OutcomeAjax & Business benefits investment optimization Increase sales through higher conversion & aquisition rates Increase productivity and reduce human cost More usable than competitors be ahead of competition Product experience user centric business & identity Reduce training & support 120
  • 121. 2.4Ajax conception methodologyEmakina Academy 121
  • 122. What is the project methodologyto implement an Ajax based user interface? 122
  • 123. Ajax conception methodology Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 123
  • 124. Inception Inception Acquire the business knowledge Acquire the user knowledge persona, user interview, interview with consumer related services Define the business objectives Deliverable Mission statement document Requirements document Sectorial benchmark Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 124
  • 125. Conception Conception Strategy and user experience definition Flow maps definition: – Sitemap, functionnal flows, use case, user interaction diagrams Wireframe definition – General interface wireframe – Screen wireframe – Animated screen flow wireframe – Widget and reusable UI element definition – Clickable prototypes Graphical design Moodboards, strategic screen, widget design Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 125
  • 126. Specification & implementation Specification Specification of all user interface interactions & behaviours Specification of all web services logic Implementation HTML slicing Client side development Javascript & Ajax development Development of a reusable custom library Usage of Ajax framework or javascript library Integration with data sources & test Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 126
  • 127. User Test & optimization cycle User Test & optimization cycle User test Pre or post release usability user test Live observation session with real user of predefined scenarios Optimization cycle Integration of web metrics / KPI (conversion rate, CTR, error rate, time to perform) Observation of web metrics Definition of candidate improvement Implementation and release of 1 improvement Observation of improvement Conclusion Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 127
  • 128. Ajax conception methodologyGoodyear Tire Online Sales 128
  • 129. Goodyear TOSDescription B2B Tyres order application Business critical : 20 % of Goodyear Europe sales made through TOS interfaceBusiness objectives : Propose a user experience similar to phone order Be ahead of competition Drive more consumer to online platform Efficiency, Fluidity Use Asynchronous process to handle long response time of SAP 129
  • 130. Goodyear TOS > Before 130
  • 131. Goodyear TOS > Prototype 131
  • 132. Goodyear TOS > Prototype 132
  • 133. Goodyear TOS > Prototype 133
  • 134. Goodyear TOS > Prototype 134
  • 135. 2.4Technical OverviewEmakina academy 135
  • 136. Ajax DefinedAsynchronous Javascript and XML – Term coined by Jesse James Garrett – www.adaptivepath.comAjax is not a new technology Mr. Ajax – Google calls their technique: Javascript – Also known as XMLHTTP technique – In use since at least 1997A bundle of techniques – XML data interchange only – Passing Javascript methods to client – DHTML widgets – XML & XSLTsCore techniques are centered around asynchronouscommunication to the server without a page refresh 136
  • 137. What is Ajax? A web development technique that allows developers to build rich user experiences similar to desktop applications in a web browser.JavaScript Ajax XHR CSS XHTML XML 137
  • 138. Ajax building blocksVocabulary HTML and CSS: Presentation, with standardized style informationInterpreted in DOM Document Object Model (DOM) Dynamic display of and interaction with the HTML pageManipulated by a Scripting language Javascript: Client-side code controls actions (controller pattern)Interaction with server XMLHttpRequest object: Asynchronously retrieves data from web server 138
  • 139. Ajax building blocks > Dynamic Object ModelThe DOM exposes a web page to the JavaScript engineTree-structured format – DOM structure well defined byWorld-Wide Web Consortium (W3C) – Each DOM element is a nodeDOM can be read, and also updated (change, insert)Programming recommendations: – Use of “id” attribute to make finding elements easy – CSS styles applied using node’s className attribute: – Use of XHTML 139
  • 140. Ajax building blocks > Asynchronous Data LoadingTwo techniques: IFrames, XMLHttpRequestIFrames (Inline Frames) are an old technique given new life withAjax – Invisible frame, in line with other HTML – IFrame owns the processingXMLHttpRequest: DOM extensions allowing asynchronous callsIssue with both: browser compatibilityDeveloper owns implementation, testing burden…Or we implement using a toolkit and make it someone else’sproblem 140
  • 141. Ajax building blocks > JavaScriptSolid browser-based programming languageSource of pop-up windows, back button hacks, image rolloversNot Java, but from the same familyJava-like syntaxLoosely-typed variables, dynamically interpretedFunctions are objectsCan be involved from outside a classCan use OOP-like style, but not required 141
  • 142. Traditional web vs Ajax application modelStandard web Ajax app – client codeapp—many web delivered at login,pages, each requests processedrefreshing the on client or serverscreen. without apparentlyConversational interrupting workflowstate on server 142
  • 143. Classic synchronous vs asynchronous Ajax model 143
  • 144. Traditional Web Applications: Pages & Actions Unit of work is a page Client code concerned with validation Submits sent to actions Actions perform work and then forward to next page Page refresh for each submit Action Action Enter ActionPick An Item Validation Review Cart Validation Validation Enter Billing Persistence Enter Data Persistence Shipping Persistence Enter Data ‘Add To Cart’ Enter Data Submit Submit Forwarding Forwarding Submit Forwarding Error Page ‘Can’t Order 500’ 144
  • 145. Ajax Changes Web Apps: Components & Events Unit of work is a component Three-Tier Client/Server Model Client code has validation, flow, layout, data interchange No submit buttons—save buttons Only parts of pages are updated at a timeOrder EntryOrder Entry Components Components Item List (DIV) Events/Actions Shopping Shopping Validation Item List Item List CartShopping Cart (DIV) Component Cart Component Component Component Persistence Ajax Event HandlersShipping Form (DIV) GUI Creation Shipping Shipping Billing Billing Billing Form (DIV) Component Component Component Component ErrorViewer ErrorViewer (DIV) (DIV) 145
  • 146. XMLHttpRequest Object: Methodsopen(“method”, “URL”)open(“method”, “URL”, async, username, password) – Assigns destination URL, method, etc.send(content) – Sends request including postable string or DOM object dataabort() – Terminates current requestgetAllResponseHeaders() – Returns headers (labels + values) as a stringgetResponseHeader(“header”) – Returns value of a given headersetRequestHeader(“label”,”value”) – Sets Request Headers before sending 146
  • 147. Case > Google Suggests Wow..I didn’t know soccerteams did webprogramming.. 147
  • 148. How It WorksFires roughly every keystroke – Uses a timer to determine when to send a request to the server – If you type at “typical” user typing speed—every keystroke – If you type at “programmer” typing speed—every few keystrokesCreates a hidden DIV that is shown when you start typingDIV is populated with return results from serverText field is set to include the next word from the server list andeverything to the right of the cursor position is highlighted – If you hit the right arrow, it assumes you want that text and positions you at the end of the text fieldResults cached; if you backspace, server is not called againHas a timer adjustment to increase or slow down server calls – Slow dialup sessions hit server fewer times – Fast broadband hits a lot 148
  • 149. JavaScript ReturnedsendRPCDone( frameElement, "the k", new Array("the killers", "theknot", "the killers lyrics", "the keg", "the kills", "the kinks", "the killersband", "the kite runner", "the king and i", "the killers hot fuss"), newArray("5,980,000 results", "5,050,000 results", "339,000 results","1,580,000 results", "10,800,000 results", "1,350,000 results","876,000 results", "204,000 results", "25,100,000 results", "388,000results"), new Array("")); 149
  • 150. 2.5Building AjaxEmakina Academy 150
  • 151. What is needed to build Ajax applications? In some ways, Ajax development is more challenging than traditional web development. – Many more moving parts more granular events – JavaScript & DOM – CrossBrowser Issues Tools & frameworks needed to make things easier But in the end: More challenging More challenging More rewarding More rewarding More added value More added valuefor your customers for your customers More differentiation towards competition More differentiation towards competition 151
  • 152. Ajax Toolkits & FrameworksFrameworks Examples There are many proposed Ajax.Net libraries/frameworks Backbase Survey of Ajax/JavaScript Bitkraft (.NET) Libraries: Django http://wiki.osafoundation.org/bin/vi ew/Projects/AjaxLibraries DOJO DWR (Java) Microsoft Atlas MochiKit Prototype Rico SAjax Sarissa (XML/XSL) Script.aculo.us 152
  • 153. Ajax FrameworksPure JavaScript Framework – Infrastructure Provides basic piping & portable browser abstractions Content up to developer Typical Functionality: – Wrapper around XMLHttpRequest – XML manipulation & interrogation – DOM manipulations based on responses from XMLHttpRequest – Application Framework Includes basic Infrastruture functionalityServer-Side Framework – HTML/JavaScript Generation Server provides complete HTML/JS code generation and browser  server coordination Browser-side coding is for customization – Remote Invocation JavaScript calls routed directly to server-side functions (Java Methods) and returned back to Javascript callback handlers 153
  • 154. Pick a Framework… any Frameworkwww.Ajaxpatterns.org Server-Side (Multi Language) – Cross-Platform Asynchronous Interface Toolkit (5/05)Pure JavaScript – SAjax (3/05) – DOJO (9/04) – Javascript Object Notation (JSON) & – Prototype (2001) JSON-RPC – Open Rico (5/05) – Javascript Remote Scripting (2000) – Qooxdoo (5/05) Server-Side (Java)Pure JavaScript Infrastructural – Echo2 (3/05) – AjaxJS (5/05) – Direct Web Remoting (DWR) (2005)] – HTMLHttpRequest (2001) – ThinkCAP Minerva (04/2005) – Interactive Website Framework (5/05) Server-Side (Lisp) – LibXMLHttpRequest (6/03) – CL-Ajax – RSLite – Sack (5/05) Server-Side (.NET) – Sarissa (2/03) – Ajax.NET (305) – XHConn (4/05) Server-Side (PHP) – AjaxAC (4/05) – JPSpan – XAjax Server-Side (Ruby) – Ruby-On-Rails (3/05) 154
  • 155. A New Way of Building ApplicationsAjax Applications Are: 3-tier client/server apps – Browser ↔ App Server ↔ Data Source Event driven – User clicks, user drags, user changes data Graphics Intensive – Visual Effects, Rich Visual Controls Are Data Oriented – Users are manipulating and entering data Are Complex – Pages hold many more controls and data than page-oriented applications – Multiple Master-Detail Relationships in one page 155
  • 156. 3.1B2B Ajax ExamplesAn Emakina Review 156
  • 157. Project Collaboration > Basecamp Basecamp is a unique project collaboration tool. Projects dont fail from a lack of charts, graphs, or reports, they fail from a lack of communication and collaboration. Basecamp makes it simple to communicate and collaborate on projects. 157 Visit site
  • 158. Group Chat for Business > CampFire Campfire is a web-based group chat tool that lets you set up password-protected chat rooms in just seconds. Invite a client, colleague, or vendor to chat, collaborate, and make decisions. Set up a room on your intranet for internal communications. 158 Visit site
  • 159. Collaborative Writing > Writely • Put your words into Writely quickly and easily. • Keep them online and edit them from anywhere. • Get them back out just as easily. 159 Visit site
  • 160. Online Writing > ZohoWriter • Online tool to create documents, edit them your way, and share with anyone... 160 Visit site
  • 161. Group Spreadsheets > Google • Choose who can access your spreadsheets. • Share documents instantly. • Edit with others in real time. • Multiple people can edit or view your spreadsheet at the same time as you - their names will appear in an on- screen chat window. 161 Visit site
  • 162. 3.2Ajax OpportunitiesEmakina Academy 162
  • 163. User Interfaces Evolve Beyond the Web Internet users are expecting more The HTML page model was too limiting for applications Business are seeing increased ROI with improved user experiences “The web today is not good enough to pull money out of pockets.” Historical Web Development Problems -- Forrester Research Other “Despite advances…the browser DB Integration cannot deliver experiences that are as Automation responsive and interactive as those of client-based applications.” Cross-device Cross- -- Jupiter Media PersonalizationDevelopment timeBetter interfaces This was correct 3 years ago, This was correct 3 years ago, but today it has been solved but today it has been solved 163
  • 164. In the Face of Enormous Opportunity…. Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT Apps Global 3,500 executives…expect eCommerce revenues to comprise 20% of Global 3,500 executives…expect eCommerce revenues to comprise 20% of their revenues five years from now. their revenues five years from now. --Forrester Research --Forrester Research 164
  • 165. In the Face of Enormous Opportunity…. Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT AppsA better online customer experience can actually drive profitability…improvingA better online customer experience can actually drive profitability…improving margins by 25 percent. margins by 25 percent. –AMR Research –AMR Research 165
  • 166. …Web Applications Used to Disappoint Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT Apps E-commerce sites lose almost half of their potential sales because users E-commerce sites lose almost half of their potential sales because users cannot use the site. cannot use the site. --Jakob Nielsen --Jakob Nielsen 166
  • 167. …Web Applications Used to Disappoint Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT AppsTo compensate for hard-to-use apps, firms pony up for additional training...andTo compensate for hard-to-use apps, firms pony up for additional training...and application redesign [that] can approach the $1 million mark. application redesign [that] can approach the $1 million mark. --Forrester Research --Forrester Research 167
  • 168. Ajax Saves MoneyHourly Labor Rate XTime Saved per Transaction XNumber of Transactions per year A hell of a lot of Money Saved 168
  • 169. Sample CalculationsAssumptions: Assumptions: – Hosted web app, high speed or – Remote employee using dial-up LAN – Hourly Labor Rate: $20 – Hourly Labor Rate: $20 – Seconds Saved per Transaction: – Seconds Saved per Transaction: 36 Seconds 199.01 Seconds – Number of Transactions per year: – Number of Transactions per year: 50,000 50,000Savings: Savings: – $10,000 – $55,281 – 500 Person Hours – 2,764 Person Hours 169
  • 170. Bottom LineLow Cost of Web Apps (Web 1.0)+Usability of Desktop ApplicationsWeb 2.0 Ajax Applications 170
  • 171. Benefits Measurable Harder to measure Steps to complete a task Familiar user interface Time spent waiting for data to be Improved application transmitted responsiveness Time spent completing a particular task User experience Bandwidth consumed for the entire taskEasily 80% Typically 50% Average 66% Data transfer Transmission time Process completion time 171
  • 172. 3.3Ajax FutureEmakina Academy 172
  • 173. The Future of AjaxMoving past the hype:Making cool apps that are actually beneficial to the user!Moving forward with the Ajax “technique” – Usability – Desktop on the Web / “WebOS”We will see more integration with – Flash – Scaling Vector Graphics (SVG) – XForms – XHTML 2 / HTML 5 173
  • 174. Top 10 Reasons Why Ajax is here to stay1. Usability and User Experience Are King2. Benefits of Regular Web Applications3. Cross Browser and Cross Platform4. Open Standards Based5. Server Technology Agnostic6. Web 2.07. Adoption Is Strong with Industry Leaders8. Low Incremental Cost9. Plays Nicely with Flex and Flash10. XAML, XUL, XForms... Not Yet. 174
  • 175. Usability and User Experience Are King1. Usability and User Experience Are King Developers and designers are beginning to realize not only the2. Benefits of Regular Web Applications large role user-experience plays in market success, but how it3. Low Incremental Cost4. Cross Browser and affects the cost of ownership. Cross Platform5. Open Standards Based The success of Ajax-based applications such as Google Maps over6. Server Technology Agnostic more traditional alternatives like MapQuest show that success can7. Web 2.08. Adoption Is Strong come to products that provide better user experience. with Industry Leaders Ajax is playing a leading role in making Web applications usable. It9. Plays Nicely with Flex and Flash allows pages to request small bits of information from the server10.XAML, XUL, XForms... instead of whole pages. This incremental updating of pages Not Yet. eliminates the page refresh problem and slow response that have plagued Web applications since their inception. People have learned they need decent user interfaces and are willing to invest in it. The bottom line here is that if users can get things done faster theres value in that whether the application is an internal intranet application, or a public Web service 175
  • 176. Benefits of Regular Web Applications1. Usability and User Experience Are King Ajax is the face of todays Web applications—and Web applications2. Benefits of Regular Web Applications enjoy certain benefits over desktop-based ones.3. Low Incremental Cost4. Cross Browser and Cross Platform These include a lower cost of deployment, easier support,5. Open Standards Based shorter development times, and no installation; these are just6. Server Technology Agnostic some of the benefits that have caused businesses and consumers7. Web 2.08. Adoption Is Strong to adopt Web-based applications since the late 90s. with Industry Leaders9. Plays Nicely with Flex Ajax will only help Web applications get better and achieve more for and Flash10.XAML, XUL, end users. XForms... Not Yet. 176
  • 177. Incremental Skills, Tools and Technologies Upgrade1. Usability and User Experience Are King Because Ajax is based on de facto standards that have been2. Benefits of Regular Web Applications around for several years, many developers have at least been3. Low Incremental Cost4. Cross Browser and exposed to the technologies required to build Ajax applications. Cross Platform5. Open Standards Based This means its not huge learning curve for development teams to6. Server Technology Agnostic shift from vanilla HTML and form-based applications to rich Ajax7. Web 2.08. Adoption Is Strong style applications. with Industry Leaders9. Plays Nicely with Flex It also means that development teams working on Web applications and Flash10.XAML, XUL, can incrementally upgrade their user interfaces to Ajax; it XForms... Not Yet. doesnt require a wholesale upgrade and re-write of their Web applications. Given the large investments that have been made in deploying browser-based applications since the late 90s, its very appealing to be able to leverage existing systems and improve the user experience. 177
  • 178. Cross Browser and Cross Platform1. Usability and User Experience Are King IE and Mozilla-based FireFox have the lions share of the market2. Benefits of Regular Web Applications and are arguably the easiest browsers on which to build Ajax Web3. Low Incremental Cost4. Cross Browser and applications, but now its possible to build Ajax-based rich Internet Cross Platform5. Open Standards applications that work on most modern Web browsers. Based6. Server Technology Agnostic This is an important reason why Ajax has become so popular.7. Web 2.08. Adoption Is Strong Although many developers were aware this was possibly years ago with Industry Leaders9. Plays Nicely with Flex with Internet Explorer, it was overlooked because of the vendor and Flash10.XAML, XUL, lock-in factor. Thanks, Mozilla and FireFox. XForms... Not Yet. 178
  • 179. Open Standards Based1. Usability and User Experience Are King Ajax is based on open standards supported by many browsers and2. Benefits of Regular Web Applications platforms; this means theres no fear of vendor lock-in.3. Low Incremental Cost4. Cross Browser and Cross Platform Most of the technologies that make up Ajax have been used5. Open Standards Based extensively for years. These arent hot, new, untested technologies6. Server Technology Agnostic that will only work most of the time.7. Web 2.08. Adoption Is Strong Browsers are a trusted application platform for most users and with Industry Leaders9. Plays Nicely with Flex enterprises now; this wasnt the case five years ago. and Flash10.XAML, XUL, XForms... One of the turning points for Ajax was the Mozilla 1.0 release that Not Yet. FireFox is based on and supported the XML HTTP Request Object. This allowed the same asynchronous data transfer that had been possible in IE for years. That support and FireFoxs rapid adoption really helped people understand that cross-browser rich Internet applications were possible 179
  • 180. Server Technology Agnostic1. Usability and User Experience Are King Much like how Ajax is browser independent, its also perfectly2. Benefits of Regular Web Applications compatible with any standard Web server and server-side3. Low Incremental Cost4. Cross Browser and language. PHP, ASP. ASP.Net, Perl, JSP, Cold Fusion, and so Cross Platform5. Open Standards forth—take your pick and start building. Based6. Server Technology Agnostic This has helped move Ajax along because all Web developers can7. Web 2.08. Adoption Is Strong use and talk about a common presentation layer. with Industry Leaders9. Plays Nicely with Flex and Flash10.XAML, XUL, XForms... Not Yet. 180
  • 181. Web 2.01. Usability and User Experience Are King Love it or hate it. The Web 2.0 movement is in full swing and2. Benefits of Regular Web Applications turning the heads of programmers, VCs, marketers, and end users3. Low Incremental Cost4. Cross Browser and alike. Cross Platform5. Open Standards Based This is definitely helping Ajax adoption for the time being; when the6. Server Technology Agnostic hype eventually dies down, it will be interesting to see what7. Web 2.08. Adoption Is Strong happens. with Industry Leaders9. Plays Nicely with Flex Ajax interfaces are a key component of many Web 2.0 applications and Flash10.XAML, XUL, from BackPack to Google Maps. XForms... Not Yet. Likely the hype will help accelerate the adoption of Ajax and the usability benefits will keep it around. One of the key principles of Web 2.0 is using the Web as a platform for application development, instead of merely Web pages. Highly usable and interactive user interfaces are a key part of any application platform. 181
  • 182. Adoption Is Strong with Industry Leaders1. Usability and User Experience Are King Widespread adoption of Ajax by industry leaders proves market2. Benefits of Regular Web Applications acceptance and validity of this technology group. Everybody is3. Low Incremental Cost4. Cross Browser and jumping on the bandwagon, including Google, Yahoo, Amazon, and Cross Platform5. Open Standards Microsoft (to name a few). It was really Google Maps that captured Based6. Server Technology the attention of Web developers. When people began to investigate Agnostic7. Web 2.0 how Google was able to deliver such an incredible user experience8. Adoption Is Strong with Industry Leaders in the browser without any plug-ins, they found Ajax under the9. Plays Nicely with Flex and Flash hood.10.XAML, XUL, XForms... Not Yet. Of course, its not enough for Google to do something for Ajax to make the leap to mainstream enterprise. But, if you look at the customer list of Ajax development companies such as eBusiness Applications (www.ebusinessapps.com) or Tibco (http://www.tibco.com), youll see Fortune 500 enterprises including major financial institutions, government agencies, airlines, and other major industries adopting Ajax and they were doing so before the term "Ajax" was coined 182
  • 183. Plays Nicely with Flex and Flash1. Usability and User Experience Are King Much of the development community is locked in a heated debate2. Benefits of Regular Web Applications of Flash vs. Ajax.3. Low Incremental Cost4. Cross Browser and Cross Platform There are definitely advantages and disadvantages to both5. Open Standards Based technologies in different situations, but theres also a lot of synergy6. Server Technology Agnostic and opportunity for them to work together.7. Web 2.08. Adoption Is Strong Many developers and vendors have realized this and have with Industry Leaders9. Plays Nicely with Flex implemented some really great software using both Ajax and Flash and Flash10.XAML, XUL, in harmony. Macromedia is also keen to see these technologies XForms... Not Yet. work together 183
  • 184. Next-Gen RIA Technologies for the Web Arent Here Yet1. Usability and User Experience Are King It would be great to build applications today in XUL, but because its not2. Benefits of Regular supported by 90% of the browsers out there, its not considered a practical Web Applications3. Low Incremental Cost solution for most purposes (yet). However, Ajax programmers should keep4. Cross Browser and an eye on technologies such as XAML and XUL. There is no doubt these Cross Platform technologies would make it easier to develop rich Internet applications, but5. Open Standards Based they are in conflict with each other and dont have the same market6. Server Technology penetration or momentum yet. Agnostic7. Web 2.0 Many developers and technology companies are trying better technologies8. Adoption Is Strong with Industry Leaders for RIA all the time. The fact of the matter is that Ajax is here today and9. Plays Nicely with Flex working, its cross-browser and cross-platform, and both users and and Flash developers like what it can do.10.XAML, XUL, XForms... High profile Ajax applications like Google Maps have emerged as clear Not Yet. leaders in their field (who uses MapQuest anymore?). Likewise, leading Fortune 500 enterprises are using Ajax and are even contributing tools back to the community. In general, the industry has agreed on the underlying Ajax technologies and is using them. Renewed emphasis on rich Internet applications and a key advancement in browser technologies has made Ajax not simply a new tool in the developers toolkit, but a phenomenon that is changing the way Web applications are written. Nobody can say for sure with what or when it will be replaced as the preferred platform for rich Internet applications, but many factors support a sustained Ajax presence over the next couple years. 184
  • 185. 3.4Ajax Next StepsEmakina Academy 185
  • 186. Nothing new beneath the sunThese projects demonstrate that Ajax is not only technically sound,but also practical for real-world applications. This isn’t anothertechnology that only works in a laboratory. We’ve only scratchedthe surface of the rich interaction and responsiveness that Ajaxapplications can provide. Ajax is an important development for Webapplications, and its importance is only going to grow.Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticatedGoogle Maps.At Emakina, we have a long experience with all of the fundamentalsthat contribute to Ajax and have used it in various projects. It’s onlyrecently that the combination became familiar 186
  • 187. Moving forwardThe biggest challenges in creating Ajax applications are nottechnical. The core Ajax technologies are mature, stable, and wellunderstood. Instead, the challenges are for the designers of theseapplications: to forget what we think we know about the limitationsof the Web, and begin to imagine a wider, richer range ofpossibilities.The biggest challenge is… YOUDo you already have the creativity, the insight to see what mattersfor your users and customers?At Emakina we can assist you with any step of the proces 187
  • 188. Building Rich Web ApplicationsThere is more to building rich applications than Ajax – Put "Engineering" into your client – Flesh out the intended scenarios and application flow – Avoid (or minimize) breaking the Web ModelInvest wisely… – Invest smartly and dont lose sight of your customer – Its your customer, not the technology you apply, that matters – But if you let your customer profit, you will profit as well – All time that the customer can save while interacting with your tasks, services, … can be invested into human2human contactIt’s going to be fun 188
  • 189. Typical Emakina project Business Case Business Case Requirements Requirements Development Development User Testing User Testing Consulting Consulting Prototyping Prototyping Coaching Coaching Optimization OptimizationIdeas Ideas Wireframes Wireframes Team assistance Team assistance Match end result vs Match end result vsConcepts Concepts Proof of concept Proof of concept Problem solving Problem solving expectations expectationsObjectives Objectives Architecture Architecture Knowledge transfer Knowledge transfer Human feedback Human feedbackPriorities Priorities Feasibility Feasibility Documentation Documentation Usability finetuning Usability finetuning 189
  • 190. Is Ajax ready for Prime Time?They are… are you?They are… are you? 190