• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AJAX in the Real World
 

AJAX in the Real World

on

  • 359 views

 

Statistics

Views

Total Views
359
Views on SlideShare
359
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AJAX in the Real World AJAX in the Real World Presentation Transcript

    • AJAX in the Real World Presented by Edwin Aoki AJAX Experience West July 25, 2007
    • Rich Web Applications - Then 1997 2002
    • Common Headaches with AJAX Performance Accessibility Image courtesy W3C: http://www.w3.org/WAI/guid-tech.html
    • Websuite - 2007
    • Video browse was invisible to search engines
    • Two different versions - high and low fidelity beta.webmail.aol.com “ classic” mail
    • A Better Solution: Progressive Enhancement
      • Separating Content, Styles, and Behaviors
        • Back to the core principles of HTML
    • Principles of Progressive Enhancement (PE) XHTML Semantic Markup Microformats Structured Content CSS Styled Simple View Javascript CSS Flash Complex View
    • Include text along with images and Flash
      • <div id=&quot;summer-movies&quot;>
      • <embed src=&quot;summer-movies-header.swf&quot; width=&quot;756&quot; height=&quot;119&quot; />
      • <h1>100 days of Summer Movies</h1>
      • <h2>Film Geek Madness, Served Fresh Daily</h2>
      • <ul>
      • <li><a href=&quot;/blog/&quot;>Summer Movies Blog</a></li>
      • <li><a href=&quot;/pics-quizes/&quot;>Pics and Quizzes</a></li>
      • <li><a href=&quot;/release-list/&quot;>Release List</a></li>
      • <li><a href=&quot;/weekly-smackdown/&quot;>Weekly Smackdown</a></li>
      • </ul>
      • </div>
      • <script>
      • function flace(id,w,h){
      • var o = document.getElementById(id);
      • o.style.width = w+'px';
      • o.style.height = h+'px';
      • o.style.overflow = 'hidden';
      • }
      • flace(&quot;summer-movies&quot;, 756, 119&quot;);
      • </script>
    • Basic/HTML View
      • Shown in non-JS/disabled JS cases
      • Shown in non-CSS/disabled CSS cases
    • Simple Styled View
      • CSS Supported and Enabled
      • No Javascript
      • Accessible, printable
      • Viewable on simple mobile devices
    • Complex/Interactive View
      • CSS Supported and Enabled
      • JS Supported and Enabled
        • Provides animation, interaction, and advanced functionality
        • Creates or destroys HTML elements as needed using DOM manipulation
    • Moviefone Unscripted
      • http://movies.aol.com/unscripted
    • Using Iframes and AJAX to hide content
    • Caching and Connection Management
      • Caching
        • Use a CDN
          • Dojo users can use the version on our CDN
        • Use proper headers
          • Expires and max-age are redundant
          • Use in conjunction with
      • Connection Management
        • CNAME domains to increase the number of allowable simultaneous connections
    • Content on Demand (CoD) Demo
      • http://dev.aol.com/presentations/COD/content-on-demand.html
    • Server Side Page Assembly in MyAOL http://my.aol.com/…./horoscope/horoscope.css http://my.aol.com/…../horoscope/horoscope.js
    • Building out the Toolset for AJAX apps
      • Identity Management
      • Data Storage
        • Preferences
        • Large data blobs
      • Connectivity and Data Transfer
      • Security
      • Metrics and Measurement
      Open Authentication XDrive, Gdata, S3 Web AIM
    • AJAX Everywhere
      • Widget/Module Environments
        • Mac OS X
        • Vista
        • MyAOL, Netvibes, iGoogle, PageFlakes
      • Game Consoles
        • Wii (Opera)
      • Mobile
        • Opera Mobile and Opera Mini
        • Symbian S60
        • Pocket IE
          • Blackjack
          • Motorola Q
          • T-Mobile DASH
      Image Courtesy of Apple
    • TinyBuddy Sample - Safari Edition
      • Run it from http://x.aim.com/ ty
      • Source code: http://x.aim.com/ty_source
      • Built entirely using public APIs
        • Web IM API
        • Open Authentication
    • Thank You
      • Edwin Aoki
      •  [email_address]
      • View our APIs at http://dev.aol.com/
      • Questions?
      A special thank you to David Artz, Carson Evans, Owais Malik, James Burke, David McCormick, and all of the web technologists at AOL for data, demos, and images used in this presentation