bulletproof ajax

Bulletproof

Ajax

progressiveenhancement

Bulletproof

structurepresentationbehaviour

contentHTML

CSSJavaScript

<p>This is the introduction</p><p style="font-weight:bold">This is the introduction</p><p class="intro">This is the introduction</p>.intro { font-weight:bold; }

<a href="help.html">Need help?</a><a href="help.html"onclick="window.open(this.href); return false;">Need help?</a><a href="help.html"class="help">Need help?</a>

link.onclick = function(){ window.open(this.href); return false;};

window.onload = function() {

};

// get links with class help// loop through links

<a href="javascript:...">

<a href="#" onclick= "...">

beware

Ajaxcommunicating with the server without refreshing

the whole page.

framesiframeFlashXMLHttpRequest

communicating with the server without refreshing

the whole page.

XMLHttpRequest

MicrosoftMozillaSafariOpera

IE5

W3C

browser serverXHRopensend

statusresponseText

XMLHttpRequest

speed

thin client

browser serverdata

processingdisplaying

thin client

fat client

browser serverXHRdata

processingdisplaying

fat client

dumbwaiter

XMLHttpRequestusing

progressiveenhancement

Hijax

progressiveenhancement

browser serverdata

processingdisplaying

browser serverXHRdata

processingdisplaying

deceptivelyfat client

navigationsearch

main contentlog on form

shopping cartfooter

{browser server

XHR

navigationsearch

main contentlog on form

shopping cartfooter

browser

implement Ajax at the end

plan for Ajax from the start

paradox?

pattern recognition

log onadd to cart

rate this

add a comment

search results?

MozillaMozillapagination?

documents

applications

design challenges

WTF?what is happening?what just happened?

beyond the browserthe back buttonbookmarking

user testing

AccessibilityJustAin’t

eXciting

“Unless a way can be found to notify screen readers of updated content, Ajax techniques cannot be considered accessible.”

“This Ajax application is usable by screen-reader users some of the time. They aren’t totally shut out, but it isn’t totally easy for them, either.”

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

k thx baiadactio.com

http://flickr.com/photos/chuckbiscuito/161971512/

http://flickr.com/photos/bizzygirl/291918549/http://flickr.com/photos/benchan/150094224/

http://flickr.com/photos/flydown/42047131/

http://flickr.com/photos/rogerjones/121736518/