• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
the_ajax_experience.ppt
 

the_ajax_experience.ppt

on

  • 926 views

 

Statistics

Views

Total Views
926
Views on SlideShare
926
Embed Views
0

Actions

Likes
1
Downloads
18
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

    the_ajax_experience.ppt the_ajax_experience.ppt Presentation Transcript

    • The Ajax Experience or What I did on my Ajax Vacation
    • Ye Olde Overview
      • ZOMG Ajax
      • Experience
      • Accessibility, Accessibility, Accessibility
      • Layout
        • CSS
        • HTML/XHTML
      • Optimization
      • Toolkits
        • Dojo, jQuery, YUI
      • w00t. I made a sweet acronym…almost on accident 
      The Ajax Experience
    • ZOMG Ajax
      • What Ajax is not
        • AJAX
        • Inherently inaccessible
      • What Ajax is
        • Its all about the User Experience
      The Ajax Experience
    • User Experience Lol!!!11!1!shift+1!
    • User Experience
      • Careful with the Ajax & DOM Effects
        • Use them when they are appropriate, not because you can.
          • i.e. If Drag and Drop makes sense somewhere, use it
            • Example: Flickr
      • Watch the click weight
        • Minimizing clicks to get something done is a good thing
      • Minimize the use of “idiot boxes”
      The Ajax Experience
    • User Experience
      • Avoid creating feedback noise/jitter
      • Offer invitations
        • I.e. “Drag blah blah blah here”
        • Or: “Click here to edit”
        • Or: highlight on hover
      • When using transitions, ensure they have purpose
        • If a menu slides down, make sure it slides up
        • If something fades in, fade it out
      The Ajax Experience
    • User Experience
      • Remember! “Cut it in half”
        • When making sweet interfaces with totally sweet animations…take the animation time you think looks nice and cut it in half.
        • Why? Long animation times are annoying
      The Ajax Experience
    • Accessibility w00t
    • Accessibility
      • Accessibility is:
        • “ A general term used to describe the degree to which a system is usable by as many people as possible without modification.” -wikipedia
        • Accessibility is not just enabling screen readers
      The Ajax Experience
    • Accessibility
      • Three Approaches
        • Standards-based Development
        • Redundant Interfaces
        • Fortified, thorough interfaces
          • (I’m only gonna talk about this super-briefly)
      The Ajax Experience
    • Accessibility: Standards-Based Development
      • Develop in “Layers”
      • Graceful Degradation
        • Or rather, Progressive Enhancement
        • i.e. Don’t corrupt neighboring layers
      The Ajax Experience
    • Accessibility: Standards-Based Development
      • Unobtrusive Javascript
        • Enhances findability / crawlability
        • Enhances usability
      • KISS and Keep it Clean
        • Bad :
          • <a href=“javascript:void(0);” class=“whee” onclick=“…”>Bork</a>
          • <a href=“#” class=“whee” onclick=“…”>Bork</a>
        • Good :
          • <a href=“bork.html” class=“whee” onclick=“…”>Bork</a>
        • Even Better (add events in javascript) :
          • <a href=“bork.html” class=“whee”>Bork</a>
      The Ajax Experience
    • Accessibility: Standards-Based Development
      • Drawbacks
        • Doesn’t solve every accessibility problem
        • Perceived Overhead
        • Unobtrusive Javascript…still a bit unfamiliar
          • Be careful not to step on event handlers
          • Avoid the desire to go Javascript heavy just because you can
      The Ajax Experience
    • Accessibility: Redundant Interfaces
      • Definition:
        • Multiple means of input
          • GUI input vs. alphanumeric input
          • Direct movement of objects vs. configuration-based movement
        • Multiple means of manipulation
          • Keyboard vs. Mouse
          • Esc vs. Cancel
          • Drag-drop vs. Form-based
      The Ajax Experience
    • Accessibility: Redundant Interfaces
      • Example
        • Google/ig
          • Drag n’ Drop Interface (w00t w00t)
          • Javascript disabled?
            • Poor user, you can’t use Google/ig
        • myPlymouth
          • Form-based layout customization (bleh)
          • Javascript disabled?
            • So what? You can still customize.
        • Marriage of the two helps the world.
      The Ajax Experience
    • Accessibility: Redundant Interfaces
      • Drawbacks
        • Requires development of two (or more) user experiences!
      The Ajax Experience
    • Accessibility: Fortified, Thorough Interfaces
      • Definition:
        • Libraries and platforms must support all comers
        • Not just the mouse, not just the keyboard
        • Must offer a faithful and complete experience
      • Basically
        • Try to allow interfaces to be manipulated with both the keyboard AND the mouse where possible.
        • Shortcut keys
        • Tab order
        • Etc.
      The Ajax Experience
    • Layout roflcopter
    • Layout
      • Zen of CSS Design (Molly Holzschlag)
        • An application is a layer cake
          • Presentation
          • Behavior
          • Document
      The Ajax Experience
    • Layout: The Box Model
      • Remember!
        • All elements generate a box
          • H1, a, div, span, ul, strong, etc.
        • Block-level elements start on a new line
        • Block-level elements can contain other block level as well as inline elements
        • Inline elements appear within content, with no line. Boxes are laid out along the horizontal axis, and create line boxes
      The Ajax Experience
    • Layout: The Box Model
      • Remember!
        • Every box has a content area
        • Every box can be left in the normal flow
        • Floated
        • Positioned
      The Ajax Experience
    • Layout: The Box Model
      • The Box Model
      The Ajax Experience
    • Layout: The Box Model
      • CSS relies on a consistent box model
        • IE has a proprietary box model
        • IE 6 uses the W3C box model in compliance mode
          • Fix Microsoft’s idiocy by declaring your !DOCTYPE
          • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
        • Hacks and filters are required to correct box model issues in other IE versions
      The Ajax Experience
    • Layout: CSS
      • Order in CSS matters
        • Browser (user agent)
        • User
        • Author
          • Inline
          • Embedded
            • Imported
          • Linked (external)
      The Ajax Experience
    • Layout: CSS
      • Order in CSS matters
        • Inline styles override embedded and linked styles
        • Embedded styles override linked or imported styles
        • Author styled by default override user styles
        • User styles override browser styles
        • Basically, the rule closest to the content overrides other rules
      The Ajax Experience
    • Layout: CSS
      • There is a balance of power between author and user styles
        • !important makes a rule more important
          • P {font-size: 1.0em; !important;}
        • !important rules override normal rules
        • !important rules in user styles override !important rules in author style
        • !important should be used with extreme care in author style sheets
      The Ajax Experience
    • Layout: CSS
      • w00t w00t Specificity!
        • If you are having trouble with style overrides, specificity is the key!
          • Use
            • #content p.warning {color: #ff0000;}
          • Rather than
            • .warning {color: #ff0000;}
        • http://molly.com/2005/10/06/css2-and-css21-specificity-clarified/
      The Ajax Experience
    • Layout: KISS
      • Keep things simple
        • Minimize nesting as much as possible (Remember, everything is a box)
          • Easier to read the code
          • Easier for screen readers
        • Avoid table layouts
          • Easier to read the code
          • Easier for screen readers
      The Ajax Experience
    • Layout: KISS
      • Floats for Forms
        • label {float: left; width: 100%;} label span {display: block; float: left; width: 12em} label input {float: left; width: 20em;}
      The Ajax Experience
    • Layout: KISS
      • Floats for Forms (Multiple Form Elements)
        • label {float: left; width: 100%;} label span {float: left; width: 12em; text-align:right;}
      The Ajax Experience
    • Layout: CSS Hacks
      • Best practice: don’t hack
      • Face it, we hack at PSU
        • Use surgical correction
      The Ajax Experience <link/> XHTML @import @import @import CSS hack1.css hack2.css hack3.css
    • Layout: CSS Organization
      • No right way
        • How I do it:
          • Alphabetical by ‘area’
            • This gets difficult sometimes
        • Other methods
          • Organize by document structure
          • Organize by element
            • !!!! This seems sexy
      The Ajax Experience
    • Optimization pwnage
    • Optimization
      • The 3 C’s (compliments of Zimbra)
        • Combine
        • Compress
        • Cache
      The Ajax Experience
    • Optimization: Combine
      • Combine
        • Minimize the amount of files downloaded by the client
        • Concatenate JS files
        • Concatenate CSS files
        • Merge Images
          • Icons
      The Ajax Experience
    • Optimization: Compress
      • Compress
        • Strip comments and whitespace
          • JSMin
          • ShrinkSafe
        • Gzip your Javascript
          • All of the “A-Grade” browsers support gzipping of JS files
      The Ajax Experience
    • Optimization: Cache
      • Cache
        • Set proper headers for appropriate browser caching to avoid redundant downloads. ( Header Field Definitions )
          • Expires = “Expires” “:” HTTP-date
            • Ex: Expires: Thu, 01 Dec 1994 16:00:00 GMT
      The Ajax Experience
    • Toolkits leik zomg
    • Toolkits
      • Dojo ( http:// dojotoolkit.org )
        • Huge Backing
        • Tons of Widgets/Packages
        • Big API
        • Syntax is a little…clunky
      • YUI
        • Backed/Developed by Yahoo!
        • Great documentation
        • A lot of Widgets available
        • Syntax is a little…clunky
      The Ajax Experience
    • Toolkits
      • jQuery
        • Focus on efficient findability in the DOM
        • Mantra: “Find Stuff and Do Stuff to it”
        • Most active community
        • Chaining == Shorter code
        • Pluggable
      The Ajax Experience
    • Toolkits
      • What we need at PSU
        • DOM Manipulation
          • Usability-Centered Effects
        • XHR (XMLHttpRequest)
        • Behavior Management
      The Ajax Experience
    • Toolkits
      • Current Practice
        • Prototype and Script.aculo.us
          • Prototype for XHR and DOM Manipulation
          • Script.aculo.us for effects
      • Goal
        • jQuery – w00t w00t!
          • All that prototype/script.aculo.us has and more
          • Remember…Plugins!
      The Ajax Experience
    • Toolkits: jQuery Benefits
      • Benefits for switching
        • jQuery is easier and quicker to extend!
          • Examples: jquery-plugins
        • jQuery gives us cleaner code almost immediately
          • Example: PSP
        • Pure Findability!!!!
      The Ajax Experience
    • Toolkits: jQuery Findability
      • jQuery Findability == Frickin’ Awesome
        • CSS1, CSS2, CSS3 support
        • Basic XPath support
        • Custom searching
        • WTF?
          • Ya, even if the browser doesn’t support the above, jQuery does.
      The Ajax Experience
    • Toolkits: jQuery Findability
      • Lets see some jQuery Examples
      The Ajax Experience
    • $(‘#body’)
      • <div id=“body”>
      • <h2>Some Header</h2>
      • <div class=“contents”>
      • <p>…</p>
      • <p>…</p>
      • </div>
      • </div>
      The Ajax Experience
    • $(‘div#body’)
      • <div id=“body”>
      • <h2>Some Header</h2>
      • <div class=“contents”>
      • <p>…</p>
      • <p>…</p>
      • </div>
      • </div>
      The Ajax Experience
    • $(‘div.contents p’)
      • <div id=“body”>
      • <h2>Some Header</h2>
      • <div class=“contents”>
      • <p>…</p>
      • <p>…</p>
      • </div>
      • </div>
      The Ajax Experience
    • $(‘div > div’)
      • <div id=“body”>
      • <h2>Some Header</h2>
      • <div class=“contents”>
      • <p>…</p>
      • <p>…</p>
      • </div>
      • </div>
      The Ajax Experience
    • $(‘div[div]’)
      • <div id=“body”>
      • <h2>Some Header</h2>
      • <div class=“contents”>
      • <p>…</p>
      • <p>…</p>
      • </div>
      • </div>
      The Ajax Experience
    • Toolkits: jQuery Manipulation
      • $(‘a[@target]’).after(‘(Opens in a New Window)’);
      • $(‘#body’).css({ border: ‘1px solid red’, height: ’40px’
      • });
      • $(‘a.thickbox’).each(function(){ var el=$(this); var reg=new RegExp(‘’,’g’); if(reg.exec(el.href())) { el.href(el.href()+’&suppress=1’); } else { el.href(el.href()+’?suppress=1’); }
      • });
      The Ajax Experience
    • Toolkits: jQuery Effects
      • $(‘#menu’).slideDown(‘slow’);
      • $(‘dif’).hide(500,function(){ $(this).show(500);
      • });
      The Ajax Experience
    • Toolkits: jQuery Chaining
      • $(‘div’).hide();
      • $(‘div’).hide().color(‘blue’);
      • $(‘div’).hide().color(‘blue’).slideDown(‘slow’);
      The Ajax Experience
    • Toolkits: jQuery Ajax
      • $(‘#body’).load(‘sample.html’);
      • $.getScript(‘test.js’);
      The Ajax Experience
    • Toolkits: jQuery Plugins
      • Our jQuery Plugin Library is growing!
        • Interface
        • Accordian
        • Cookie
        • DatePicker
        • DOM
        • Form
        • History
        • Tabs
        • Thickbox
        • Home-grown plugins (we have 3)
      The Ajax Experience
    • Toolkits: jQuery
      • How we include jQuery and use it
        • <script src=“{PHP.COMMON_JS}/jquery-latest.pack.js” type=“text/javascript”></script>
        • <script src=“{PHP.COMMON_JS}/jquery-plugins/jquery.SOMEPLUGIN.js” type=“text/javascript”></script>
        • <script src=“{PHP.JS}/behavior.js” type=“text/javascript”></script>
        • <script src=“{PHP.JS}/application.js” type=“text/javascript”></script>
        • <script type=“text/javascript”>
        • $(document).ready(function(){App.behavior();});
        • </script>
      • WTF? $(document).ready(function(){App.behavior();}); ?!?!!
        • When the document is ready, apply the jQuery behaviors
      The Ajax Experience
    • Toolkits: jQuery
      • App.behavior in behavior.js
        • var App.behavior = function(){
        • //do all the jQuery set up here
        • //i.e:
        • $(‘.bork’).click(function(){
        • alert(‘hello’);
        • });
        • $(‘a.funtimes’).toggle(
        • function(){$(this).color(‘blue’);},
        • function(){$(this).color(‘red’);}
        • );
        • };
      The Ajax Experience
    • Toolkits: jQuery
      • Notes:
        • You can use closures OR declared functions
          • Closures are dynamic functions: function(){}
        • Dojo can work with jQuery
        • Prototype cannot (easily) work with jQuery
        • Check these resources:
          • jQuery API: http://jquery.com/api
          • jQuery Plugins: http://jquery.com/plugins
          • jQuery Visual API: http://visualjquery.com
          • My Blog Article  : http://borkweb.com/story/the-ajax-experience-jquery-toolkit
          • These Slides: http:// borkweb.com/downloads/the_ajax_experience.ppt
      The Ajax Experience
    • Conclusion
      • The Ajax Experience was freaking awesome.
      The Ajax Experience *Applause*
    • Credits
      • Special thanks to all the people I stole information from:
        • Conrad Damon (Zimbra)
        • Molly Holzschlag (CSS Zen Garden)
        • Nate Koechley (Yahoo!)
        • John Resig (jQuery)
        • Bill Scott (Yahoo!)
      The Ajax Experience