The Ajax Experience

1
The Ajax Experience

• or What I did on my Ajax Vacation

2
Ye Olde Overview

• ZOMG Ajax
• Experience
• Accessibility, Accessibility, Accessibility
• Layout
• CSS
• HTML/XHTML
• Optimization
• Toolkits
• Dojo, jQuery, YUI
• w00t. I made a sweet acronymalmost on accident ?

The Ajax Experience
3
ZOMG Ajax

• What Ajax is not
• AJAX
• Inherently inaccessible
• What Ajax is
• Its all about the User Experience

The Ajax Experience
4
User Experience

• Lol!!!11!1!shift1!

5
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
6
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
7
User Experience

• Remember! Cut it in half
• When making sweet interfaces with totally sweet
  animationstake the animation time you think
  looks nice and cut it in half.
• Why? Long animation times are annoying

The Ajax Experience
8
Accessibility

• w00t

9
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
10
Accessibility

• Three Approaches
• Standards-based Development
• Redundant Interfaces
• Fortified, thorough interfaces
• (Im only gonna talk about this super-briefly)

The Ajax Experience
11
Accessibility Standards-Based Development

• Develop in Layers
• Graceful Degradation
• Or rather, Progressive Enhancement
• i.e. Dont corrupt neighboring layers

The Ajax Experience
12
Accessibility Standards-Based Development

• Unobtrusive Javascript
• Enhances findability / crawlability
• Enhances usability
• KISS and Keep it Clean
• Bad
• lta hrefjavascriptvoid(0) classwhee
  onclickgtBorklt/agt
• lta href classwhee onclickgtBorklt/agt
• Good
• lta hrefbork.html classwhee
  onclickgtBorklt/agt
• Even Better (add events in javascript)
• lta hrefbork.html classwheegtBorklt/agt

The Ajax Experience
13
Accessibility Standards-Based Development

• Drawbacks
• Doesnt solve every accessibility problem
• Perceived Overhead
• Unobtrusive Javascriptstill 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
14
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
15
Accessibility Redundant Interfaces

• Example
• Google/ig
• Drag n Drop Interface (w00t w00t)
• Javascript disabled?
• Poor user, you cant 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
16
Accessibility Redundant Interfaces

• Drawbacks
• Requires development of two (or more) user
  experiences!

The Ajax Experience
17
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
18
Layout

• roflcopter

19
Layout

• Zen of CSS Design (Molly Holzschlag)
• An application is a layer cake
• Presentation
• Behavior
• Document

The Ajax Experience
20
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
21
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
22
Layout The Box Model

• The Box Model

The Ajax Experience
23
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 Microsofts idiocy by declaring your !DOCTYPE
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt
• Hacks and filters are required to correct box
  model issues in other IE versions

The Ajax Experience
24
Layout CSS

• Order in CSS matters
• Browser (user agent)
• User
• Author
• Inline
• Embedded
• Imported
• Linked (external)

The Ajax Experience
25
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
26
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
27
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-specifi
  city-clarified/

The Ajax Experience
28
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
29
Layout KISS

• Floats for Forms
• label float left width 100label span
  display block float left width 12emlabel
  input float left width 20em

The Ajax Experience
30
Layout KISS

• Floats for Forms (Multiple Form Elements)
• label float left width 100label span
  float left width 12em text-alignright

The Ajax Experience
31
Layout CSS Hacks

• Best practice dont hack
• Face it, we hack at PSU
• Use surgical correction

hack1.css
ltlink/gt XHTML
_at_import _at_import _at_import CSS
hack2.css
hack3.css
The Ajax Experience
32
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
33
Optimization

• pwnage

34
Optimization

• The 3 Cs (compliments of Zimbra)
• Combine
• Compress
• Cache

The Ajax Experience
35
Optimization Combine

• Combine
• Minimize the amount of files downloaded by the
  client
• Concatenate JS files
• Concatenate CSS files
• Merge Images
• Icons

The Ajax Experience
36
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
37
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 160000 GMT

The Ajax Experience
38
Toolkits

• leik zomg

39
Toolkits

• Dojo (http//dojotoolkit.org)
• Huge Backing
• Tons of Widgets/Packages
• Big API
• Syntax is a littleclunky
• YUI
• Backed/Developed by Yahoo!
• Great documentation
• A lot of Widgets available
• Syntax is a littleclunky

The Ajax Experience
40
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
41
Toolkits

• What we need at PSU
• DOM Manipulation
• Usability-Centered Effects
• XHR (XMLHttpRequest)
• Behavior Management

The Ajax Experience
42
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
• RememberPlugins!

The Ajax Experience
43
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
44
Toolkits jQuery Findability

• jQuery Findability Frickin Awesome
• CSS1, CSS2, CSS3 support
• Basic XPath support
• Custom searching
• WTF?
• Ya, even if the browser doesnt support the
  above, jQuery does.

The Ajax Experience
45
Toolkits jQuery Findability

• Lets see some jQuery Examples

The Ajax Experience
46
(body)

• ltdiv idbodygt
• lth2gtSome Headerlt/h2gt
• ltdiv classcontentsgt
• ltpgtlt/pgt
• ltpgtlt/pgt
• lt/divgt
• lt/divgt

The Ajax Experience
47
(divbody)

• ltdiv idbodygt
• lth2gtSome Headerlt/h2gt
• ltdiv classcontentsgt
• ltpgtlt/pgt
• ltpgtlt/pgt
• lt/divgt
• lt/divgt

The Ajax Experience
48
(div.contents p)

• ltdiv idbodygt
• lth2gtSome Headerlt/h2gt
• ltdiv classcontentsgt
• ltpgtlt/pgt
• ltpgtlt/pgt
• lt/divgt
• lt/divgt

The Ajax Experience
49
(div gt div)

• ltdiv idbodygt
• lth2gtSome Headerlt/h2gt
• ltdiv classcontentsgt
• ltpgtlt/pgt
• ltpgtlt/pgt
• lt/divgt
• lt/divgt

The Ajax Experience
50
(divdiv)

• ltdiv idbodygt
• lth2gtSome Headerlt/h2gt
• ltdiv classcontentsgt
• ltpgtlt/pgt
• ltpgtlt/pgt
• lt/divgt
• lt/divgt

The Ajax Experience
51
Toolkits jQuery Manipulation

• (a_at_target).after((Opens in a New
  Window))
• (body).css( border 1px solid red,
  height 40px
• )
• (a.thickbox).each(function() var
  el(this) var regnew RegExp(\\?,g)
  if(reg.exec(el.href()))
  el.href(el.href()suppress1) else
  el.href(el.href()?suppress1)
• )

The Ajax Experience
52
Toolkits jQuery Effects

• (menu).slideDown(slow)
• (dif).hide(500,function()
  (this).show(500)
• )

The Ajax Experience
53
Toolkits jQuery Chaining

• (div).hide()
• (div).hide().color(blue)
• (div).hide().color(blue).slideDown(slow)
  

The Ajax Experience
54
Toolkits jQuery Ajax

• (body).load(sample.html)
• .getScript(test.js)

The Ajax Experience
55
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
56
Toolkits jQuery

• How we include jQuery and use it
• ltscript srcPHP.COMMON_JS/jquery-latest.pack.js
  typetext/javascriptgtlt/scriptgt
• ltscript srcPHP.COMMON_JS/jquery-plugins/jquery
  .SOMEPLUGIN.js typetext/javascriptgtlt/scriptgt
• ltscript srcPHP.JS/behavior.js
  typetext/javascriptgtlt/scriptgt
• ltscript srcPHP.JS/application.js
  typetext/javascriptgtlt/scriptgt
• ltscript typetext/javascriptgt
• (document).ready(function()App.behavior())
• lt/scriptgt
• WTF? (document).ready(function()App.behavior()
  ) ?!?!!
• When the document is ready, apply the jQuery
  behaviors

The Ajax Experience
57
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
58
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-aj
  ax-experience-jquery-toolkit
• These Slides http//borkweb.com/downloads/the_aja
  x_experience.ppt

The Ajax Experience
59
Conclusion

• The Ajax Experience was freaking awesome.

Applause
The Ajax Experience
60
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