Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution

Ajax Emakina Academy 1

Agenda Part 1 --09h30-10h30 Part 2 --10h30-11h30 Part 3 --11h30-12h30 Part 1 09h30-10h30 Part 2 10h30-11h30 Part 3 11h30-12h30 Welcome & Introduction Ajax & Usability Conclusions & Summary Welcome & Introduction Ajax & Usability Conclusions & Summary About Emakina Usability B2B Examples About Emakina Usability B2B Examples User Experience Business Aspects Ajax Opportunities User Experience Business Aspects Ajax Opportunities Prehistory of Ajax Selected Cases Next Steps Prehistory of Ajax Selected Cases Next Steps B2B Problems Technical Overview Emakina methodology B2B Problems Technical Overview Emakina methodology Flash vs Ajax Flash vs Ajax 2

1.1 Welcome & Introduction Emakina Academy, September 13 3

Find the common thread 4

The answer 5

1.2 About Emakina Emakina Academy, September 13 6

Emakina Model Consulting Marketing Strategy and planning Tactical actions Marketing studies Multi-channel ROI studies Direct to 1-to-1 Successful E-Commerce Technology Creation E-Business platforms Concept Integration Graphic Design Web development Usability Hosting Content 7

Customer Recruitment Convert to Reward Reward mechanisms Customers mechanisms CUSTOMERS CUSTOMERS Collect S Rich modules Rich modules Games Prospects ES Games EN Communicate Websites Websites AR Promo-sites Offer Promo-sites AW Bannering Recruit Bannering Recruit Company Newsletters Visitors Newsletters Visitors 8

Multi-Channel Approach Above the line Agency WORLD WIDE WEB WORLD WIDE WEB IDEAS IDEAS Integrated communication Integrated communication EMAIL EMAIL RICH COMMUNICATION RICH COMMUNICATION BANNERING BANNERING YOUR AFFILIATE AFFILIATE EMAKINA CUSTOMERS COMPANY SMS, MMS SMS, MMS IVR IVR IDEAS IDEAS Integrated communication Integrated communication SEARCH ENGINE SEARCH ENGINE VIRAL MARKETING VIRAL MARKETING Below the line Agency 9

Competence Center Internet technologies E-business applications – Hosting, Security – Application Server : IBM Websphere Suite, ATG – HTML / DHTML (JavaScript) Dynamo, ColdFusion MX – XML / WML / VXML – CMS : – Flash / Shockwave / VR / 3D 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

Customers 11

Emakina in a nutshell +90 team members and growing Number 2 Belgium Web Agency (ranking Inside 2006) Number 1 Creative Agency (ranking Media Marketing 2006) A unique offering in e-marketing and e-business Integrated competences in Strategy, Creation & Design and IT Development Stable and profitable environment Listed on Alternext (ALEMK) since june 2006 Raised 7.3 Meuros for european expansion Prestigious references 12

1.3 The User Experience Emakina Academy, September 13 13

Experience matters 14

The Experience Matters > 15

Evolution of Economic Value Unique Relevant Stage Stage Competitive to Customer Experiences Experiences Position Needs Deliver Deliver Services Services Make Make Goods Goods Irrelevant Undifferentiated Extract to Customer Extract Competitive Commodities Commodities Needs Position Market pricing Premium pricing 16

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

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) Irrelevant Undifferentiated Presence to Customer Presence Competitive (Flat HTML) (Flat HTML) Needs Position Market pricing Premium pricing 18

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% Passing grade: 25 or higher Comprehensive and precise search 84% 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% Average B2B score: -5.5 Task-specific interact ivit y 59% 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) 19 Source: Forrester Research, Inc.

How We Got Here Mainframe Desktop Client/Server Websites High: High: None: dumb green-screen Interactivity Low: or command-line Drag-and-drop, point-and- Drag-and-drop, point-and- Point-and-click, form fill-in terminals click click User High: resizable Flexibility Medium: resizable Interface None: components, configurable Low: limited customization components, configurable display, local data, custom of page appearance No customization possible display, server-side data shortcuts Medium: real-time High: real-time Power None: only displays data None: only displays data computation, complicated computation coupled with sent by server sent by server information visualization access to server-side data High cost High cost Low cost Low cost Deployment 20 Source: Forrester Research, Inc.

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 21 Source: Forrester Research, Inc.

Forrester’s X-Internet Timeline 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 22 Source: Forrester Research, Inc.

Rich Internet Application Fit Traditional Software UI New classes Executable of applications Internet UI More value from existing applications HTML UI 23 Source: Forrester Research, Inc.

Rich Internet Applications 24

Rich Internet Applications Web Desktop Rich Internet Apps √ √ Instant 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

Rich Internet Application Results 35% increase in reservations year to year 50% reduction in time entering orders Reduced page load time by 50% More than doubled the average number of bookings per session 75% of first-time site visitors returned Greater than a five-fold return on initial pilot project investment 26

X Internet Forrester Research: quot;... browser-based applications deliver sub par user experiences ... Executable Internet Technology will help companies return responsiveness and productivity to Net-based apps.quot; 27 Source: Forrester Research, Inc.

Summary Results Results Experience Experience Rich Internet Applications Rich Internet Applications 28

1.4 Prehistory of Ajax Emakina Academy 29

Human nature Abraham Maslow: “If the only tool you know is a hammer, every problem looks like a nail” 30

Web 2.0 Web 2.0 is set of buzzwords that point to the eradication of the classical web model and indicate a more democratic and collaborative web experience 31

The right tool for the right context Web 2.0 Buzzword B2C B2B User generated content Works only for top brands (eg. Apple); Brand risk as it quickly becomes others require moderation comparison platform Collaboration Strengthens the brand experience Brand risk for user2user Okay for assistant2customer Web as platform Positive Less dependency on plugins but requires Applications within browser large installed base Usability Key success factor Key success factor when applied methodologically Look and feel Key appeal factor Requires discretion Valuable service before branding Perpetual beta Acceptable if limited outages Unacceptable no compromise on (see Yahoo experience) continuity Communities Requires moderation C2C communities not allowed Potential branded B2C academies Slim Ajax applications Mostly positive Requires large installed base Lightweight DHTML (consider non-Ajax backup) User feedback Positive as it gives valuable feedback Positive if applied systematically and Contribution to roadmap discretely Personalization Key success factor Key success factor when relevant (see Amazon) Customization Requires good features Seldom used 32 (see Google homepage) (see myYahoo)

A Brief History FF 2 SVG Java Applet E4X XSL-T ECMAScript Mozilla 1.0 NS 2.0B3 JavaScript WSDL FF 1.0 Flash 3 Flash 9 SVG CSS DOM 1 XHTML 96 06 98 05 97 99 00 01 02 03 04 XSL-T 2 IE 3 XForms IE 6 IE 4 IE 5 IFrames It Works! DOM XML DOM 3 CSS XSL-T RDF JScript XMLHTTP Browser Wars The Web Depression Web 2.0 33

In the beginning, there was DOS 34

Then…Windows 35

Windows UI Matures… 36

The Future…Maybe? 37

History repeats itself, over the Web Watching grass grow, watching paint dry, filling in forms, … 38

The new web Don’t focus on technology, focus on getting the work done 39

Example of Microsoft Ajax Application Useful Useful functions functions Integrated Integrated coexisting coexisting applications with applications with Contextual Contextual added value added value actions actions Application Application like like behaviour behaviour Application Application Interactivity like Interactivity like without full behaviour without full behaviour page reload page reload Rating Rating system system 40

Key disadvantages of traditional web apps Poor 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 changed imposes hefty limitations on the Slow & Unresponsive degree of sophistication of web Classic web applications transfer user interfaces. Rich and smooth the complete form data to the interfaces with on-demand update server, which in turn renders and could only be implemented using sends back the full HTML markup host technologies of the page to the browser. Lots of bandwidth is consumed and the Wasted Resources performance is significantly Powerful PCs, sitting 99% idle hindered. while sophisticated servers are compiling multi-dimensional DB Poor User Experience queries AND writing <tr><td>… at We’re 2006, yet most web forms the same time look like coming from 1996 41

The rise of the new web “The Web as we know it is changing probably more than it has since the first graphic showed up… The idea of the webpage itself is nearing its useful end. With the way Ajax allows you to build nearly stateless applications that happen to be web accessible, everything changes.” Jesse James Garrett February 15, 2005 42

Maslow’s Pyramid on Internet Featured / ranked in Wikipedia Technorati Fulfilment Slashdot / Digg Show your Expertise Actualization Blogs Communities Esteem needs Forums Status, recognition Social Networks 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 needs Messenging Truth, protection, integrity, … Information / Search Online Web Apps Physiological needs: Publishing Act, communicate, interact, exchange, … 43

Enter Ajax Ajax 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

Ajax – The details Motivation: – 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 years Very good for improving form interactions Usually 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

Direct Advantages Better 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 quot;Waitingquot; 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

So why is Ajax so hot—NOW? Times are changing It addresses fundamental needs Web2.0 Trend Increase Usability of Web Applications It has a name Demand for richer applications is Recent Google applications have growing without Flash sparked people’s imagination: 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 more The Tipping Point: The Tipping Point: All of this has made rich internet apps reach its tipping point All of this has made rich internet apps reach its tipping point where adoption spreads rapidly and dramatically where adoption spreads rapidly and dramatically 47

Is it new? Not Really Hidden Frames IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+ Java Applets 48

Ajax Applications Applications that have highest benefit from Ajax: Highly interactive, data rich applications Examples: 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

Some examples Amazon A9 Search Engine Flickr Google Labs & Apps – Orkut: social network – GMail: web based email – Google Maps – Google Spreadsheets – Google Suggests – Google Toolkit Demo > School roster Demos – Drag & drop shop: http://demo.script.aculo.us/shop – Forms http://openrico.org/rico/demos.page?demo=rico_Ajax_complex 50

Before Ajax: Maps http://www.mapquest.com 51

After Ajax: Maps 52

Ajax is about Usability User experience Ease of use Hard to describe Ability to get things done faster Users just get it Measurable Examples – iPod Easier to learn – Google Maps High performance Competitive advantage 53

The 8-Hour Rule Question: Can your users work with your application for 8 hours a day without getting frustrated? Answer: Traditional web applications fail this rule miserably Solution: Ajax to the rescue 54

B2B expectations Today’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

Usability An analysis of intranet portals found slimmer information architectures and a renewed emphasis on fresh content and useful applications KISS model The 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

Web services Before 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

Presence based services Presence 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

Collaboration Solve specific business problems using collaboration tools: Streamline business process with employees and partners Provide users with contextual collaboration Communication tools as part of their day by day projects Reduce the pain associated with a proliferation of tools Merging tools into single environment Benefit from increasingly rich collaboration platforms Provide tools and let users find an application that helps them in their normal business process evolution, not revolution Embedded collaboration capabilities More built-in support (teamwork, …) Product/platform vendor competition Strive to push proprietary standards vs open standards makes interoperability not yet today’s reality 59

1.5 Flash Emakina Academy 60

Macromedia Flash Dispelling 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

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.com DNP, printer supplies University of North Carolina, Medical log Brocade, sales performance 62

Leverages a Ubiquitous Client… 414 Million users have the Macromedia Flash Player 98 90 76 63 63 53 38 Macromedia Java Acrobat Windows Macromedia Real Player QuickTime Flash Player Reader Media Player Shockwave Player Player 63

Technical Benefits Ease of development and deployment Integrates into legacy environments Extends existing applications without re-work Fits into current development process Supports a broad range of platforms and devices Cuts QA time for cross-platform support 64

Why Macromedia? Rich Internet Applications Client Flash Player client is a Side Browser Browser standard browser plug-in Flash Client Flash Remoting provides an optimized connection between the .swf .html Internet Flash client and the Application .xml .cfm Server Server Web Server Side Web Server Flash Communication Server seems the best choice for Flash Remoting streaming videos Application Server Application Server Database & Integration DB DB 65

RIA Examples In this Section Example Applications Yankee Candle – Advent Labs Youth Hostel Association of – Trio Motors Australia – Pet Market GMAC Real Estate – Jeremy Allaire Presentation Ambient Automation Subaru Primal Quest Grand Chiropractic Health Care Charles Schwab Team Connect New York Stock Exchange Bose 66

Example > Charles Schwab Challenge Charles Schwab executives needed an easy to use tool to help them see how budget is being allocated across market campaigns Solution Macromedia Flash Benefit These new tools help Schwab make more efficient use of their marketing budgets. 67

Example > Bose Corporation Challenge Help customers visualize an entertainment system in their home Solution Macromedia Flash MX Benefit 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

Example > Ambient Automation Challenge Develop a corporate information system that consolidates clients Great Plains accounting, Goldmine contact management, and t help desk databases into one advanced user interface Solution Macromedia Flash MX Benefit 50% overall reduction in time and 60% reduction in errors for entering and processing orders. 69

Example > Team Connect Application 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 application Solution Macromedia Flash MX Macromedia Flash Communication Server MX Macromedia JRun 4 70

2.1 Ajax & usability Emakina academy 71

Short introduction about Usability 72

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

5 qualities of usability Learnability 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

Fields of Usability User experience maps user needs to business needs through Information architecture Information design Functional design Interaction design Graphical design 75

Usability as a part of UX 76

Actual Situation in web usability Perceptual usability Standards are known User behaviours have been studied User understands Client / browser interaction 77

Limitations Limitation 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

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

2.2 Business Benefits Emakina academy 80

How can Ajax improve usability and user experience to increase your business benefits? 81

Ajax main features On demand request on server without reload Request data, validate business rules, store user activity without reloading page Smoothness & speed Fewer reload more immersive experience Higher 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

Ajax new UI elements Intelligent fields Auto complete / suggest, validation rules, large datas selectors Editable areas Click and edit text fields, wysywig area, auto Save Advanced UI elements Widgets, overlayer, floating window, floating pannels, cascading menus, sortable datagrids And a lot more still to create … 83

Ajax New Interactions patterns Drag & drop, cursor based selection Immediate feedback Keystroke & arrows controls Authoring experience vs fill a form 84

2.3 Selected Cases Emakina academy 85

Let’s see Ajax in action Emakina Cases 86

Electrabel registration process Ajax improves acquisition 87

Case Electrabel registration Description 2006 Allow Electrabel’s visitors to register to self service online applications Potential audience : 4,5 millions consumers Business objectives : Decrease administrative cost through online services usage Electronic billing Online Administrative service 88

Identified Issues Lot of user starts process but gives up during the process Looks too complicate and too long Requires 3 steps and lot of business rules Requires complex information input : billing information, highly secured password policy, High level of security 89

Case Electrabel registration 90

Case Electrabel registration Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 91

Case Electrabel registration Ajax Solution Guides user within all the process Simplify the form perception Help user to input complex forms Ensure quality of data acquisition Business benefits Increase conversion rate increase usage of online applications 92

Atofina navigation Ajax improves performance & personalization 93

Atofina Navigation system Description Already in 2002 International communication company portal High level of personalization required Large amount of data IBM Portal server Business objectives : Increase employee self appropriation of the tool Increase visibility of all content available Increase speed to find information 94

Atofina Navigation system 95

Atofina Scorecard Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 96

Atofina Navigation system Ajax 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 server Business benefits Increase employees satisfaction Save employees time to find information 97

Electrabel localisator Ajax guides user and improve efficiency 98

Electrabel localisator Description 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 question Business objectives : Make it as efficient as possible 99

Electrabel localisator 100

Electrabel localisator Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 101

Electrabel localisator Ajax Solution Auto suggest within all belgian localities and CP Avoid any mistakes for 1 CP n Localities Business benefits Very fast and efficient process Reusable UI component for all Forms 102

Porsche car configurator Ajax provides an immersive experience 103

Electrabel localisator Description 2000 User configures his model in the huge choice of options Show price as i select option Linked to real options database Business objectives : Make it as simple as possible Make it ludic and create an emotion associated with the product identity 104

Porsche car configurator 105

Porsche car configurator Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 106

Porsche car configurator Ajax Solution Better experience than form based configurator Real time price calculation Large amount of options possible Highly maintainable Business benefits High impact on consumer Efficiency to configure a car and get a price in a complex pricing model product 107

Non Emakina cases 108

Bet & Win Ajax improves conversion 109

Bet & win : betting process Description Process to place a bet on a bookmaker website Audience : gambler, compulsive gambler Business objectives : Increase the number of bets placed by visitors Increase amounts of each bets Place a bet as fast as possible 110

Bet & win : betting process 111

Bet & win : betting process Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 112

Bet & win : betting process Ajax Solution Few clicks to place a bet High level of fluidity Provides immediate preview of the potential gain Business benefits Increase conversion rate Exploit the compulsive behaviors of gambler 113

Netvibes.com Ajax reinvents the portal experience 114

Netvibes portal experience Description A new generation of portal providing a new experience Web2.0 project Business objectives : Be ahead of competition with a total new experience Propose an experience as new as possible Propose an extremely fluid experience 115

Netvibes portal experience 116

Netvibes portal experience Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 117

Netvibes portal experience Ajax Solution Personalize without saving Rich interaction model : drag & drop Easy switch between view & edit Side panel Widget based user interface Business benefits Self explanatory 3’000’000 register user in less than 1 year ! Rich product identity 118

Global benefit 119

Outcome Ajax & 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

2.4 Ajax conception methodology Emakina Academy 121

What is the project methodology to implement an Ajax based user interface? 122

Ajax conception methodology Specification & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 123

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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 124

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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 125

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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 126

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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 127

Ajax conception methodology Goodyear Tire Online Sales 128

Goodyear TOS Description B2B Tyres order application Business critical : 20 % of Goodyear Europe sales made through TOS interface Business 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

Goodyear TOS > Before 130

Goodyear TOS > Prototype 131

2.4 Technical Overview Emakina academy 135

Ajax Defined Asynchronous Javascript and XML – Term coined by Jesse James Garrett – www.adaptivepath.com Ajax is not a new technology Mr. Ajax – Google calls their technique: Javascript – Also known as XMLHTTP technique – In use since at least 1997 A bundle of techniques – XML data interchange only – Passing Javascript methods to client – DHTML widgets – XML & XSLTs Core techniques are centered around asynchronous communication to the server without a page refresh 136

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

Ajax building blocks Vocabulary HTML and CSS: Presentation, with standardized style information Interpreted in DOM Document Object Model (DOM) Dynamic display of and interaction with the HTML page Manipulated by a Scripting language Javascript: Client-side code controls actions (controller pattern) Interaction with server XMLHttpRequest object: Asynchronously retrieves data from web server 138

Ajax building blocks > Dynamic Object Model The DOM exposes a web page to the JavaScript engine Tree-structured format – DOM structure well defined byWorld-Wide Web Consortium (W3C) – Each DOM element is a node DOM 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

Ajax building blocks > Asynchronous Data Loading Two techniques: IFrames, XMLHttpRequest IFrames (Inline Frames) are an old technique given new life with Ajax – Invisible frame, in line with other HTML – IFrame owns the processing XMLHttpRequest: DOM extensions allowing asynchronous calls Issue with both: browser compatibility Developer owns implementation, testing burden… Or we implement using a toolkit and make it someone else’s problem 140

Ajax building blocks > JavaScript Solid browser-based programming language Source of pop-up windows, back button hacks, image rollovers Not Java, but from the same family Java-like syntax Loosely-typed variables, dynamically interpreted Functions are objects Can be involved from outside a class Can use OOP-like style, but not required 141

Traditional web vs Ajax application model Ajax app – client code Standard web delivered at login, app—many web requests processed pages, each on client or server refreshing the without apparently screen. interrupting workflow Conversational state on server 142

Classic synchronous vs asynchronous Ajax model 143

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 Enter Action Action Action Review Cart Enter Billing Pick An Item Validation Validation Validation Shipping Enter Data Enter Data Persistence Persistence Persistence ‘Add To Cart’ Enter Data Submit Submit Forwarding Forwarding Forwarding Submit Error Page ‘Can’t Order 500’ 144

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 time Order Entry Order Entry Components Components Item List (DIV) Events/Actions Shopping Shopping Item List Item List Cart Validation Cart Component Shopping Cart (DIV) Component Component Component Persistence Ajax Event Handlers Shipping Form (DIV) GUI Creation Shipping Billing Shipping Billing Component Component Billing Form (DIV) Component Component ErrorViewer ErrorViewer (DIV) (DIV) 145

XMLHttpRequest Object: Methods open(“method”, “URL”) open(“method”, “URL”, async, username, password) – Assigns destination URL, method, etc. send(content) – Sends request including postable string or DOM object data abort() – Terminates current request getAllResponseHeaders() – Returns headers (labels + values) as a string getResponseHeader(“header”) – Returns value of a given header setRequestHeader(“label”,”value”) – Sets Request Headers before sending 146

Case > Google Suggests Wow..I didn’t know soccer teams did web programming.. 147

How It Works Fires 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 keystrokes Creates a hidden DIV that is shown when you start typing DIV is populated with return results from server Text field is set to include the next word from the server list and everything 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 field Results cached; if you backspace, server is not called again Has a timer adjustment to increase or slow down server calls – Slow dialup sessions hit server fewer times – Fast broadband hits a lot 148

JavaScript Returned sendRPCDone( frameElement, quot;the kquot;, new Array(quot;the killersquot;, quot;the knotquot;, quot;the killers lyricsquot;, quot;the kegquot;, quot;the killsquot;, quot;the kinksquot;, quot;the killers bandquot;, quot;the kite runnerquot;, quot;the king and iquot;, quot;the killers hot fussquot;), new Array(quot;5,980,000 resultsquot;, quot;5,050,000 resultsquot;, quot;339,000 resultsquot;, quot;1,580,000 resultsquot;, quot;10,800,000 resultsquot;, quot;1,350,000 resultsquot;, quot;876,000 resultsquot;, quot;204,000 resultsquot;, quot;25,100,000 resultsquot;, quot;388,000 resultsquot;), new Array(quot;quot;)); 149

2.5 Building Ajax Emakina Academy 150

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 rewarding More rewarding More added value More challenging More added value for your customers More differentiation towards competition for your customers More differentiation towards competition 151

Ajax Toolkits & Frameworks Frameworks Examples There are many proposed Ajax.Net libraries/frameworks Backbase Survey of Ajax/JavaScript Bitkraft (.NET) Libraries: Django http://wiki.osafoundation.org/bin/vi DOJO ew/Projects/AjaxLibraries DWR (Java) Microsoft Atlas MochiKit Prototype Rico SAjax Sarissa (XML/XSL) Script.aculo.us 152

Ajax Frameworks Pure 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 functionality Server-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

Pick a Framework… any Framework www.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 Server-Side (.NET) – Sack (5/05) – Ajax.NET (305) – Sarissa (2/03) Server-Side (PHP) – XHConn (4/05) – AjaxAC (4/05) – JPSpan – XAjax Server-Side (Ruby) – Ruby-On-Rails (3/05) 154

A New Way of Building Applications Ajax 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

3.1 B2B Ajax Examples An Emakina Review 156

Project Collaboration > Basecamp Basecamp is a unique project collaboration tool. Projects don't 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

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

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

Online Writing > ZohoWriter • Online tool to create documents, edit them your way, and share with anyone... 160 Visit site

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

3.2 Ajax Opportunities Emakina Academy 162

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 -- Forrester Research Problems Other “Despite advances…the browser DB Integration cannot deliver experiences that are as responsive and interactive as those of Automation client-based applications.” Cross-device Cross- -- Jupiter Media Personalization Development time This was correct 3 years ago, This was correct 3 years ago, Better interfaces but today it has been solved but today it has been solved 163

In the Face of Enormous Opportunity…. Internet Extranet Intranet Internet Extranet Intranet Interactive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Enterprise Department Partner Apps Partner Apps Sites Apps 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

In the Face of Enormous Opportunity…. Internet Extranet Intranet Internet Extranet Intranet Interactive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Enterprise Department Partner Apps Partner Apps Sites Apps Apps IT Apps IT Apps Sites Apps Apps IT Apps IT Apps A better online customer experience can actually drive profitability…improving A better online customer experience can actually drive profitability…improving margins by 25 percent. margins by 25 percent. –AMR Research –AMR Research 165

…Web Applications Used to Disappoint Internet Extranet Intranet Internet Extranet Intranet Interactive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Enterprise Department Partner Apps Partner Apps Sites Apps 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

…Web Applications Used to Disappoint Internet Extranet Intranet Internet Extranet Intranet Interactive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Enterprise Department Partner Apps Partner Apps Sites Apps Apps IT Apps IT Apps Sites Apps Apps IT Apps IT Apps To compensate for hard-to-use apps, firms pony up for additional training...and To 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

Ajax Saves Money Hourly Labor Rate X Time Saved per Transaction X Number of Transactions per year A hell of a lot of Money Saved 168

Sample Calculations Assumptions: 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,000 Savings: Savings: – $10,000 – $55,281 – 500 Person Hours – 2,764 Person Hours 169

Bottom Line Low Cost of Web Apps (Web 1.0) + Usability of Desktop Applications Web 2.0 Ajax Applications 170

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 User experience particular task Bandwidth consumed for the entire task Easily 80% Typically 50% Average 66% Data transfer Transmission time Process completion time 171

3.3 Ajax Future Emakina Academy 172

The Future of Ajax Moving 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

Top 10 Reasons Why Ajax is here to stay 1. Usability and User Experience Are King 2. Benefits of Regular Web Applications 3. Cross Browser and Cross Platform 4. Open Standards Based 5. Server Technology Agnostic 6. Web 2.0 7. Adoption Is Strong with Industry Leaders 8. Low Incremental Cost 9. Plays Nicely with Flex and Flash 10. XAML, XUL, XForms... Not Yet. 174

Usability and User Experience Are King 1. Usability and User Developers and designers are beginning to realize not only the Experience Are King 2. Benefits of Regular large role user-experience plays in market success, but how it Web Applications 3. Low Incremental Cost affects the cost of ownership. 4. Cross Browser and Cross Platform The success of Ajax-based applications such as Google Maps over 5. Open Standards Based more traditional alternatives like MapQuest show that success can 6. Server Technology Agnostic come to products that provide better user experience. 7. Web 2.0 8. Adoption Is Strong with Industry Leaders Ajax is playing a leading role in making Web applications usable. It 9. Plays Nicely with Flex allows pages to request small bits of information from the server and Flash 10.XAML, XUL, instead of whole pages. This incremental updating of pages XForms... 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 there's value in that whether the application is an internal intranet application, or a public Web service 175

Benefits of Regular Web Applications 1. Usability and User Ajax is the face of today's Web applications—and Web applications Experience Are King 2. Benefits of Regular enjoy certain benefits over desktop-based ones. Web Applications 3. Low Incremental Cost These include a lower cost of deployment, easier support, 4. Cross Browser and Cross Platform shorter development times, and no installation; these are just 5. Open Standards Based some of the benefits that have caused businesses and consumers 6. Server Technology Agnostic to adopt Web-based applications since the late 90s. 7. Web 2.0 8. Adoption Is Strong with Industry Leaders Ajax will only help Web applications get better and achieve more for 9. Plays Nicely with Flex and Flash end users. 10.XAML, XUL, XForms... Not Yet. 176

Incremental Skills, Tools and Technologies Upgrade 1. Usability and User Because Ajax is based on de facto standards that have been Experience Are King 2. Benefits of Regular around for several years, many developers have at least been Web Applications 3. Low Incremental Cost exposed to the technologies required to build Ajax applications. 4. Cross Browser and Cross Platform This means it's not huge learning curve for development teams to 5. Open Standards Based shift from vanilla HTML and form-based applications to rich Ajax 6. Server Technology Agnostic style applications. 7. Web 2.0 8. Adoption Is Strong with Industry Leaders It also means that development teams working on Web applications 9. Plays Nicely with Flex and Flash can incrementally upgrade their user interfaces to Ajax; it 10.XAML, XUL, XForms... doesn't require a wholesale upgrade and re-write of their Web Not Yet. applications. Given the large investments that have been made in deploying browser-based applications since the late 90s, it's very appealing to be able to leverage existing systems and improve the user experience. 177

Cross Browser and Cross Platform 1. Usability and User IE and Mozilla-based FireFox have the lion's share of the market Experience Are King 2. Benefits of Regular and are arguably the easiest browsers on which to build Ajax Web Web Applications 3. Low Incremental Cost applications, but now it's possible to build Ajax-based rich Internet 4. Cross Browser and Cross Platform applications that work on most modern Web browsers. 5. Open Standards Based This is an important reason why Ajax has become so popular. 6. Server Technology Agnostic 7. Web 2.0 Although many developers were aware this was possibly years ago 8. Adoption Is Strong with Industry Leaders with Internet Explorer, it was overlooked because of the vendor 9. Plays Nicely with Flex and Flash lock-in factor. Thanks, Mozilla and FireFox. 10.XAML, XUL, XForms... Not Yet. 178

Open Standards Based 1. Usability and User Ajax is based on open standards supported by many browsers and Experience Are King 2. Benefits of Regular platforms; this means there's no fear of vendor lock-in. Web Applications 3. Low Incremental Cost Most of the technologies that make up Ajax have been used 4. Cross Browser and Cross Platform extensively for years. These aren't hot, new, untested technologies 5. Open Standards Based that will only work most of the time. 6. Server Technology Agnostic 7. Web 2.0 Browsers are a trusted application platform for most users and 8. Adoption Is Strong with Industry Leaders enterprises now; this wasn't the case five years ago. 9. Plays Nicely with Flex and Flash One of the turning points for Ajax was the Mozilla 1.0 release that 10.XAML, XUL, XForms... FireFox is based on and supported the XML HTTP Request Object. Not Yet. This allowed the same asynchronous data transfer that had been possible in IE for years. That support and FireFox's rapid adoption really helped people understand that cross-browser rich Internet applications were possible 179

Server Technology Agnostic 1. Usability and User Much like how Ajax is browser independent, it's also perfectly Experience Are King 2. Benefits of Regular compatible with any standard Web server and server-side Web Applications 3. Low Incremental Cost language. PHP, ASP. ASP.Net, Perl, JSP, Cold Fusion, and so 4. Cross Browser and Cross Platform forth—take your pick and start building. 5. Open Standards Based This has helped move Ajax along because all Web developers can 6. Server Technology Agnostic use and talk about a common presentation layer. 7. Web 2.0 8. Adoption Is Strong with Industry Leaders 9. Plays Nicely with Flex and Flash 10.XAML, XUL, XForms... Not Yet. 180

Web 2.0 1. Usability and User Love it or hate it. The Web 2.0 movement is in full swing and Experience Are King 2. Benefits of Regular turning the heads of programmers, VCs, marketers, and end users Web Applications 3. Low Incremental Cost alike. 4. Cross Browser and Cross Platform This is definitely helping Ajax adoption for the time being; when the 5. Open Standards Based hype eventually dies down, it will be interesting to see what 6. Server Technology Agnostic happens. 7. Web 2.0 8. Adoption Is Strong with Industry Leaders Ajax interfaces are a key component of many Web 2.0 applications 9. Plays Nicely with Flex and Flash from BackPack to Google Maps. 10.XAML, XUL, XForms... Likely the hype will help accelerate the adoption of Ajax and the Not Yet. 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

Adoption Is Strong with Industry Leaders 1. Usability and User Widespread adoption of Ajax by industry leaders proves market Experience Are King 2. Benefits of Regular acceptance and validity of this technology group. Everybody is Web Applications 3. Low Incremental Cost jumping on the bandwagon, including Google, Yahoo, Amazon, and 4. Cross Browser and Cross Platform Microsoft (to name a few). It was really Google Maps that captured 5. Open Standards Based the attention of Web developers. When people began to investigate 6. Server Technology Agnostic how Google was able to deliver such an incredible user experience 7. Web 2.0 8. Adoption Is Strong in the browser without any plug-ins, they found Ajax under the with Industry Leaders 9. Plays Nicely with Flex hood. and Flash 10.XAML, XUL, Of course, it's not enough for Google to do something for Ajax to XForms... Not Yet. 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), you'll 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 quot;Ajaxquot; was coined 182

Plays Nicely with Flex and Flash 1. Usability and User Much of the development community is locked in a heated debate Experience Are King 2. Benefits of Regular of Flash vs. Ajax. Web Applications 3. Low Incremental Cost There are definitely advantages and disadvantages to both 4. Cross Browser and Cross Platform technologies in different situations, but there's also a lot of synergy 5. Open Standards Based and opportunity for them to work together. 6. Server Technology Agnostic 7. Web 2.0 Many developers and vendors have realized this and have 8. Adoption Is Strong with Industry Leaders implemented some really great software using both Ajax and Flash 9. Plays Nicely with Flex and Flash in harmony. Macromedia is also keen to see these technologies 10.XAML, XUL, XForms... work together Not Yet. 183

Next-Gen RIA Technologies for the Web Aren't Here Yet It would be great to build applications today in XUL, but because it's not 1. Usability and User Experience Are King supported by 90% of the browsers out there, it's not considered a practical 2. Benefits of Regular solution for most purposes (yet). However, Ajax programmers should keep Web Applications 3. Low Incremental Cost an eye on technologies such as XAML and XUL. There is no doubt these 4. Cross Browser and technologies would make it easier to develop rich Internet applications, but Cross Platform 5. Open Standards they are in conflict with each other and don't have the same market Based penetration or momentum yet. 6. Server Technology Agnostic Many developers and technology companies are trying better technologies 7. Web 2.0 for RIA all the time. The fact of the matter is that Ajax is here today and 8. Adoption Is Strong with Industry Leaders working, it's cross-browser and cross-platform, and both users and 9. Plays Nicely with Flex developers like what it can do. and Flash 10.XAML, XUL, High profile Ajax applications like Google Maps have emerged as clear XForms... 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 developer's 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

3.4 Ajax Next Steps Emakina Academy 185

Nothing new beneath the sun These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. We’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, 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 sophisticated Google Maps. At Emakina, we have a long experience with all of the fundamentals that contribute to Ajax and have used it in various projects. It’s only recently that the combination became familiar 186

Moving forward The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities. The biggest challenge is… YOU Do you already have the creativity, the insight to see what matters for your users and customers? At Emakina we can assist you with any step of the proces 187

Building Rich Web Applications There is more to building rich applications than Ajax – Put quot;Engineeringquot; into your client – Flesh out the intended scenarios and application flow – Avoid (or minimize) breaking the Web Model Invest wisely… – Invest smartly and don't 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 contact It’s going to be fun 188

Typical Emakina project Business Case Requirements Development User Testing Business Case Requirements Development User Testing Consulting Prototyping Coaching Optimization Consulting Prototyping Coaching Optimization Ideas Wireframes Team assistance Match end result vs Ideas Wireframes Team assistance Match end result vs Concepts Proof of concept Problem solving expectations Concepts Proof of concept Problem solving expectations Objectives Architecture Knowledge transfer Human feedback Objectives Architecture Knowledge transfer Human feedback Priorities Feasibility Documentation Usability finetuning Priorities Feasibility Documentation Usability finetuning 189

Is Ajax ready for Prime Time? They are… are you? They are… are you? 190

http://www.slideshare.net	34
http://localhost	1
http://ssdb.secretdevelopment.com	1

Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution

by Emakina on May 16, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 36

Statistics

Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution — Presentation Transcript