Your SlideShare is downloading. ×
0
Ajax
Emakina Academy




                  1
Agenda




Part 1 --09h30-10h30      Part 2 --10h30-11h30   Part 3 --11h30-12h30
Part 1 09h30-10h30        Part 2 10h30-11...
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 actio...
Customer Recruitment




                                                        Convert to
              Reward
         ...
Multi-Channel Approach




          Above the line
            Agency


                              WORLD WIDE WEB
    ...
Competence Center

Internet technologies                  E-business applications
 –   Hosting, Security                  ...
Customers




        11
Emakina in a nutshell

+90 team members and growing
Number 2 Belgium Web Agency
(ranking Inside 2006)
Number 1 Creative Ag...
1.3
The User Experience
Emakina Academy,
September 13




                      13
Experience matters




                     14
The Experience Matters




>
                         15
Evolution of Economic Value



      Unique                                                   Relevant
                   ...
Examples of the Economics



               $5.00 for a Latte
          Coffee costs 49 cents




       $250 for a Birthd...
Evolution of Digital Experience



      Unique                                                                    Relevan...
The Web Doesn’t Cut It

                            Dist ribut ion of scores from 158 Web site reviews conducted by Forres...
How We Got Here




                                           Mainframe                      Desktop                Clien...
A New Solution is Needed – the X Internet




                        Forrester’s Definition:

                        Int...
Forrester’s X-Internet Timeline




    2000         2001         2002   2003   2004   2005   2006     2007   2008   2009 ...
Rich Internet Application Fit



                                               Traditional
                              ...
Rich Internet Applications




                         24
Rich Internet Applications

                                          Web      Desktop   Rich Internet Apps

             ...
Rich Internet Application Results

35% increase in reservations year to year
50% reduction in time entering orders
Reduced...
X Internet




                        Forrester Research:

                        quot;... browser-based applications de...
Summary




         Results
         Results


       Experience
       Experience


Rich Internet Applications
Rich Inte...
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”




           ...
Web 2.0

Web 2.0 is set of buzzwords that point to the eradication of the
classical web model and indicate a more democrat...
The right tool for the right context

Web 2.0 Buzzword              B2C                                      B2B
User gene...
A Brief History


                                                                                                        ...
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...
The new web




Don’t focus on technology,
focus on getting the work done
                                           39
Example of Microsoft Ajax Application



                                  Useful
                                   Usefu...
Key disadvantages of traditional web apps

Poor Interactivity                       Simplistic Interfaces
   Users must wa...
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...
Maslow’s Pyramid on Internet



                  Featured / ranked in
                    Wikipedia
                    T...
Enter Ajax

Ajax aims to deliver:
 – Rich applications in browsers
 – No issues with installation
 – Built on existing inf...
Ajax – The details

Motivation:
 – HTTP never intended to dynamically serve content
 – Pages always reload, but never get ...
Direct Advantages

Better Performance and Efficiency:
    Small amount of data transferred from the server.
    Beneficial...
So why is Ajax so hot—NOW?

Times are changing                         It addresses fundamental needs
   Web2.0 Trend     ...
Is it new?

Not Really
Hidden Frames
IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+
Java
Applets




                    ...
Ajax Applications

Applications that have highest benefit from Ajax:
   Highly interactive, data rich applications

Exampl...
Some examples

Amazon A9 Search Engine
Flickr
Google Labs & Apps
–   Orkut: social network
–   GMail: web based email
–   ...
Before Ajax: Maps




http://www.mapquest.com




                                          51
After Ajax: Maps




               52
Ajax is about

Usability                              User experience
   Ease of use                            Hard to de...
The 8-Hour Rule

Question:
  Can your users work with your application for 8 hours a day without
  getting frustrated?

An...
B2B expectations

Today’s reality                          Tomorrow’s expectations
   Applications are complex            ...
Usability

An analysis of intranet portals found slimmer information
architectures and a renewed emphasis on fresh content...
Web services

Before                               Now
  Previously websites had poorly        Application providers devel...
Presence based services

Presence integration
 – Users can determine the online status of site members quickly by
   sendi...
Collaboration

Solve specific business problems using collaboration tools:
Streamline business process with employees and ...
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 ...
Real-World Business Applications Using Macromedia Flash

                   Dai Nippon Printing Group:
                   ...
Leverages a Ubiquitous Client…

   414 Million users have the Macromedia Flash Player



    98
               90
        ...
Technical Benefits

Ease of development and deployment
Integrates into legacy environments
Extends existing applications w...
Why Macromedia?


                                              Rich Internet Applications
Client                         ...
RIA Examples In this Section

Example Applications
                                   Yankee Candle
 –   Advent Labs
     ...
Example > Charles Schwab

Challenge
   Charles Schwab executives
   needed an easy to use tool to
   help them see how bud...
Example > Bose Corporation

Challenge
  Help customers visualize an
  entertainment system in their home

Solution
   Macr...
Example > Ambient Automation


Challenge
   Develop a corporate information
   system that consolidates clients
   Great P...
Example > Team Connect

Application
   TeamConnect is a powerful way of
   ensuring a business can take on
   more project...
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
                   ea...
5 qualities of usability

Learnability
   How easy is it for users to accomplish basic tasks the first time they
   encoun...
Fields of Usability




User experience maps user needs to business needs through

    Information architecture       Info...
Usability as a part of UX




                        76
Actual Situation in web usability




Perceptual usability Standards are known

User behaviours have been studied

User un...
Limitations

Limitation of existing client/browser HTML experience
   Experience is less rich than Desktop applications
  ...
Usability & user experience : why?

Of course : satisfaction of users and consumers !!!

Business benefits      investment...
2.2
Business Benefits
Emakina academy




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




                              ...
Ajax main features

On demand request on server without reload
   Request data, validate business rules, store user activi...
Ajax new UI elements

Intelligent fields
    Auto complete / suggest, validation rules, large datas selectors

Editable ar...
Ajax New Interactions patterns

Drag & drop, cursor based selection

Immediate feedback

Keystroke & arrows controls

Auth...
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
  applic...
Identified Issues

Lot of user starts process but gives up during the process
Looks too complicate and too long
Requires 3...
Case Electrabel registration




                           90
Case Electrabel registration




Usability Balance
Usability Balance

 Learnability
 Efficiency
 Memorability
 Errors
 Sat...
Case Electrabel registration


Ajax Solution

   Guides user within all the process
   Simplify the form perception
   Hel...
Atofina navigation

       Ajax improves
performance & personalization




                                93
Atofina Navigation system

Description
  Already in 2002
  International communication company portal
  High level of pers...
Atofina Navigation system




                        95
Atofina Scorecard




Usability Balance
Usability Balance

 Learnability
 Efficiency
 Memorability
 Errors
 Satisfaction

...
Atofina Navigation system

Ajax Solution
   Autoscroll and adapt to screen size
   Cascading menu User Interface elements
...
Electrabel localisator

  Ajax guides user
and improve efficiency




                         98
Electrabel localisator

Description
  2006
  User must localize himself to have access to information related to
  energet...
Electrabel localisator




                    100
Electrabel localisator




Usability Balance
Usability Balance

 Learnability
 Efficiency
 Memorability
 Errors
 Satisfact...
Electrabel localisator

Ajax Solution
   Auto suggest within all belgian localities and CP
   Avoid any mistakes for 1 CP ...
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 ...
Porsche car configurator




                      105
Porsche car configurator




Usability Balance
Usability Balance

 Learnability
 Efficiency
 Memorability
 Errors
 Satisfa...
Porsche car configurator

Ajax Solution
   Better experience than form based configurator
   Real time price calculation
 ...
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 ...
Bet & win : betting process




                         111
Bet & win : betting process




Usability Balance
Usability Balance

 Learnability
 Efficiency
 Memorability
 Errors
 Sati...
Bet & win : betting process

Ajax Solution
   Few clicks to place a bet
   High level of fluidity
   Provides immediate pr...
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...
Netvibes portal experience




                        116
Netvibes portal experience




Usability Balance
Usability Balance

 Learnability
 Efficiency
 Memorability
 Errors
 Satis...
Netvibes portal experience

Ajax Solution
   Personalize without saving
   Rich interaction model : drag & drop
   Easy sw...
Global benefit




                 119
Outcome

Ajax & Business benefits    investment optimization

   Increase sales through higher conversion & aquisition rat...
2.4
Ajax conception methodology
Emakina Academy




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




                                           ...
Ajax conception methodology




                         Specification &    User Test &
                          Specific...
Inception

            Inception
               Acquire the business knowledge
               Acquire the user knowledge
 ...
Conception

            Conception
              Strategy and user experience definition
              Flow maps definitio...
Specification & implementation

            Specification
               Specification of all user interface interactions ...
User Test & optimization cycle

            User Test & optimization cycle
               User test
               Pre or ...
Ajax conception methodology

Goodyear Tire Online Sales




                              128
Goodyear TOS

Description
  B2B Tyres order application
  Business critical : 20 % of Goodyear Europe sales made through
 ...
Goodyear TOS > Before




                   130
Goodyear TOS > Prototype




                      131
Goodyear TOS > Prototype




                      132
Goodyear TOS > Prototype




                      133
Goodyear TOS > Prototype




                      134
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 ...
What is Ajax?

 A web development technique that allows developers to build rich
 user experiences similar to desktop appl...
Ajax building blocks

Vocabulary
   HTML and CSS:
   Presentation, with standardized style information

Interpreted in DOM...
Ajax building blocks > Dynamic Object Model

The DOM exposes a web page to the JavaScript engine
Tree-structured format
 –...
Ajax building blocks > Asynchronous Data Loading

Two techniques: IFrames, XMLHttpRequest
IFrames (Inline Frames) are an o...
Ajax building blocks > JavaScript

Solid browser-based programming language
Source of pop-up windows, back button hacks, i...
Traditional web vs Ajax application model




                                             Ajax app – client code
Standard...
Classic synchronous vs asynchronous Ajax model




                                            143
Traditional Web Applications: Pages & Actions

                         Unit of work is a page
                         Cl...
Ajax Changes Web Apps: Components & Events

               Unit of work is a component
               Three-Tier Client/Se...
XMLHttpRequest Object: Methods

open(“method”, “URL”)
open(“method”, “URL”, async, username, password)
 – Assigns destinat...
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 ty...
JavaScript Returned

sendRPCDone( frameElement, quot;the kquot;, new Array(quot;the killersquot;, quot;the
knotquot;, quot...
2.5
Building Ajax
Emakina Academy




                  150
What is needed to build Ajax
                                                         applications?

         In some ways...
Ajax Toolkits & Frameworks

Frameworks                                Examples
   There are many proposed                 ...
Ajax Frameworks

Pure JavaScript Framework
 – Infrastructure
        Provides basic piping & portable browser abstractions...
Pick a Framework… any Framework

www.Ajaxpatterns.org                         Server-Side (Multi Language)
               ...
A New Way of Building Applications

Ajax Applications Are:

   3-tier client/server apps
    – Browser ↔ App Server ↔ Data...
3.1
B2B Ajax Examples
An Emakina Review




                    156
Project Collaboration > Basecamp




            Basecamp is a unique project
            collaboration tool. Projects
   ...
Group Chat for Business > CampFire




        Campfire is a web-based group
        chat tool that lets you set up
      ...
Collaborative Writing > Writely




 • Put your words into Writely
   quickly and easily.
 • Keep them online and edit the...
Online Writing > ZohoWriter




    • Online tool to create
      documents, edit them
      your way, and share with
    ...
Group Spreadsheets > Google




      • Choose who can access your
        spreadsheets.
      • Share documents instantly...
3.2
Ajax Opportunities
Emakina Academy




                     162
User Interfaces Evolve Beyond the Web

                    Internet users are expecting more
                    The HTML ...
In the Face of Enormous Opportunity….




                Internet                   Extranet                   Intranet
 ...
In the Face of Enormous Opportunity….




                Internet                   Extranet                   Intranet
 ...
…Web Applications Used to Disappoint




                Internet                   Extranet                   Intranet
  ...
…Web Applications Used to Disappoint




                Internet                      Extranet                   Intranet...
Ajax Saves Money


Hourly Labor Rate
   X
Time Saved per Transaction
   X
Number of Transactions per year

  A hell of a l...
Sample Calculations

Assumptions:                            Assumptions:
 –   Hosted web app, high speed or       –   Rem...
Bottom Line


Low Cost of Web Apps (Web 1.0)
+
Usability of Desktop Applications

Web 2.0 Ajax Applications




          ...
Benefits

 Measurable                                Harder to measure
    Steps to complete a task                  Famil...
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 t...
Top 10 Reasons Why Ajax is here to stay

1. Usability and User Experience Are King
2. Benefits of Regular Web Applications...
Usability and User Experience Are King

1. Usability and User
                            Developers and designers are beg...
Benefits of Regular Web Applications

1. Usability and User
                            Ajax is the face of today's Web ap...
Incremental Skills, Tools and Technologies Upgrade

1. Usability and User
                            Because Ajax is base...
Cross Browser and Cross Platform

1. Usability and User
                            IE and Mozilla-based FireFox have the ...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revol...
Upcoming SlideShare
Loading in...5
×

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

20,369

Published on

Tired of static and slow-loading websites ? With the new AJAX framework, you can build more flexible, dynamic interfaces that boldly go where no web-based application has gone before. In this Academy, our strategic cell will show how AJAX can improve the user's experience and, ultimately, the ROI of your Internet business.

Published in: Business, Technology
2 Comments
15 Likes
Statistics
Notes
  • hello, guys , I have got 6% coupon code ALLCDKEY52653 at allcdkey to buy diablo 3 cdkey, just want you know it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Presentation yang agak panjang lebar, tetapi amat berguna dan berfaedah untuk dibaca. Saya berminat untuk embed ke dalam website saya, iaitu www.ringtonesz.org/ dan www.lyrics-search.org/

    Ahmad Said.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
20,369
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1,041
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

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

  1. 1. Ajax Emakina Academy 1
  2. 2. 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
  3. 3. 1.1 Welcome & Introduction Emakina Academy, September 13 3
  4. 4. Find the common thread 4
  5. 5. The answer 5
  6. 6. 1.2 About Emakina Emakina Academy, September 13 6
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Customers 11
  12. 12. 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
  13. 13. 1.3 The User Experience Emakina Academy, September 13 13
  14. 14. Experience matters 14
  15. 15. The Experience Matters > 15
  16. 16. 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
  17. 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. 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) Irrelevant Undifferentiated Presence to Customer Presence Competitive (Flat HTML) (Flat HTML) Needs Position Market pricing Premium pricing 18
  19. 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% 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.
  20. 20. 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.
  21. 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 21 Source: Forrester Research, Inc.
  22. 22. Forrester’s X-Internet Timeline 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 22 Source: Forrester Research, Inc.
  23. 23. 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.
  24. 24. Rich Internet Applications 24
  25. 25. 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
  26. 26. 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
  27. 27. 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.
  28. 28. Summary Results Results Experience Experience Rich Internet Applications Rich Internet Applications 28
  29. 29. 1.4 Prehistory of Ajax Emakina Academy 29
  30. 30. Human nature Abraham Maslow: “If the only tool you know is a hammer, every problem looks like a nail” 30
  31. 31. 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
  32. 32. 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)
  33. 33. 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
  34. 34. In the beginning, there was DOS 34
  35. 35. Then…Windows 35
  36. 36. Windows UI Matures… 36
  37. 37. The Future…Maybe? 37
  38. 38. History repeats itself, over the Web Watching grass grow, watching paint dry, filling in forms, … 38
  39. 39. The new web Don’t focus on technology, focus on getting the work done 39
  40. 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 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. Is it new? Not Really Hidden Frames IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+ Java Applets 48
  49. 49. 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
  50. 50. 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
  51. 51. Before Ajax: Maps http://www.mapquest.com 51
  52. 52. After Ajax: Maps 52
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 1.5 Flash Emakina Academy 60
  61. 61. 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
  62. 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.com DNP, printer supplies University of North Carolina, Medical log Brocade, sales performance 62
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 2.1 Ajax & usability Emakina academy 71
  72. 72. Short introduction about Usability 72
  73. 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. 74. 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
  75. 75. Fields of Usability User experience maps user needs to business needs through Information architecture Information design Functional design Interaction design Graphical design 75
  76. 76. Usability as a part of UX 76
  77. 77. Actual Situation in web usability Perceptual usability Standards are known User behaviours have been studied User understands Client / browser interaction 77
  78. 78. 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
  79. 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. 80. 2.2 Business Benefits Emakina academy 80
  81. 81. How can Ajax improve usability and user experience to increase your business benefits? 81
  82. 82. 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
  83. 83. 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
  84. 84. Ajax New Interactions patterns Drag & drop, cursor based selection Immediate feedback Keystroke & arrows controls Authoring experience vs fill a form 84
  85. 85. 2.3 Selected Cases Emakina academy 85
  86. 86. Let’s see Ajax in action Emakina Cases 86
  87. 87. Electrabel registration process Ajax improves acquisition 87
  88. 88. 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
  89. 89. 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
  90. 90. Case Electrabel registration 90
  91. 91. Case Electrabel registration Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 91
  92. 92. 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
  93. 93. Atofina navigation Ajax improves performance & personalization 93
  94. 94. 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
  95. 95. Atofina Navigation system 95
  96. 96. Atofina Scorecard Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 96
  97. 97. 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
  98. 98. Electrabel localisator Ajax guides user and improve efficiency 98
  99. 99. 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
  100. 100. Electrabel localisator 100
  101. 101. Electrabel localisator Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 101
  102. 102. 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
  103. 103. Porsche car configurator Ajax provides an immersive experience 103
  104. 104. 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
  105. 105. Porsche car configurator 105
  106. 106. Porsche car configurator Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 106
  107. 107. 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
  108. 108. Non Emakina cases 108
  109. 109. Bet & Win Ajax improves conversion 109
  110. 110. 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
  111. 111. Bet & win : betting process 111
  112. 112. Bet & win : betting process Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 112
  113. 113. 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
  114. 114. Netvibes.com Ajax reinvents the portal experience 114
  115. 115. 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
  116. 116. Netvibes portal experience 116
  117. 117. Netvibes portal experience Usability Balance Usability Balance Learnability Efficiency Memorability Errors Satisfaction 117
  118. 118. 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
  119. 119. Global benefit 119
  120. 120. 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
  121. 121. 2.4 Ajax conception methodology Emakina Academy 121
  122. 122. What is the project methodology to implement an Ajax based user interface? 122
  123. 123. Ajax conception methodology Specification & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 123
  124. 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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 124
  125. 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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 125
  126. 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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 126
  127. 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 & User Test & Specification & User Test & Inception Conception Inception Conception implementation optimization implementation optimization 127
  128. 128. Ajax conception methodology Goodyear Tire Online Sales 128
  129. 129. 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
  130. 130. Goodyear TOS > Before 130
  131. 131. Goodyear TOS > Prototype 131
  132. 132. Goodyear TOS > Prototype 132
  133. 133. Goodyear TOS > Prototype 133
  134. 134. Goodyear TOS > Prototype 134
  135. 135. 2.4 Technical Overview Emakina academy 135
  136. 136. 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
  137. 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. 138. 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
  139. 139. 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
  140. 140. 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
  141. 141. 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
  142. 142. 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
  143. 143. Classic synchronous vs asynchronous Ajax model 143
  144. 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 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
  145. 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 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
  146. 146. 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
  147. 147. Case > Google Suggests Wow..I didn’t know soccer teams did web programming.. 147
  148. 148. 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
  149. 149. 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
  150. 150. 2.5 Building Ajax Emakina Academy 150
  151. 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 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
  152. 152. 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
  153. 153. 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
  154. 154. 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
  155. 155. 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
  156. 156. 3.1 B2B Ajax Examples An Emakina Review 156
  157. 157. 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
  158. 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. 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. 160. Online Writing > ZohoWriter • Online tool to create documents, edit them your way, and share with anyone... 160 Visit site
  161. 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. 162. 3.2 Ajax Opportunities Emakina Academy 162
  163. 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 -- 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
  164. 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 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. 165. 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
  166. 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 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. 167. …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
  168. 168. 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
  169. 169. 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
  170. 170. Bottom Line Low Cost of Web Apps (Web 1.0) + Usability of Desktop Applications Web 2.0 Ajax Applications 170
  171. 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 User experience particular task Bandwidth consumed for the entire task Easily 80% Typically 50% Average 66% Data transfer Transmission time Process completion time 171
  172. 172. 3.3 Ajax Future Emakina Academy 172
  173. 173. 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
  174. 174. 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
  175. 175. 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
  176. 176. 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
  177. 177. 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
  178. 178. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×