bulletproof ajax - jeremy keithlink.onclick = function(){window.open(this.href); return false;};...
TRANSCRIPT
![Page 1: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/1.jpg)
Bulletproof
Ajax
![Page 2: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/2.jpg)
progressiveenhancement
Bulletproof
![Page 3: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/3.jpg)
structurepresentationbehaviour
contentHTML
CSSJavaScript
![Page 4: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/4.jpg)
<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; }
![Page 5: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/5.jpg)
<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>
![Page 6: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/6.jpg)
link.onclick = function(){ window.open(this.href); return false;};
window.onload = function() {
};
// get links with class help// loop through links
![Page 7: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/7.jpg)
<a href="javascript:...">
<a href="#" onclick= "...">
beware
![Page 8: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/8.jpg)
Ajaxcommunicating with the server without refreshing
the whole page.
![Page 9: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/9.jpg)
framesiframeFlashXMLHttpRequest
communicating with the server without refreshing
the whole page.
![Page 10: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/10.jpg)
XMLHttpRequest
MicrosoftMozillaSafariOpera
IE5
W3C
![Page 11: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/11.jpg)
browser serverXHRopensend
statusresponseText
XMLHttpRequest
![Page 12: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/12.jpg)
speed
![Page 13: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/13.jpg)
thin client
![Page 14: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/14.jpg)
browser serverdata
processingdisplaying
thin client
![Page 15: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/15.jpg)
fat client
![Page 16: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/16.jpg)
browser serverXHRdata
processingdisplaying
fat client
![Page 17: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/17.jpg)
dumbwaiter
![Page 18: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/18.jpg)
XMLHttpRequestusing
progressiveenhancement
![Page 19: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/19.jpg)
Hijax
progressiveenhancement
![Page 20: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/20.jpg)
browser serverdata
processingdisplaying
![Page 21: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/21.jpg)
browser serverXHRdata
processingdisplaying
deceptivelyfat client
![Page 22: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/22.jpg)
![Page 23: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/23.jpg)
navigationsearch
main contentlog on form
shopping cartfooter
{browser server
![Page 24: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/24.jpg)
XHR
navigationsearch
main contentlog on form
shopping cartfooter
browser
![Page 25: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/25.jpg)
implement Ajax at the end
plan for Ajax from the start
paradox?
![Page 26: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/26.jpg)
pattern recognition
log onadd to cart
rate this
add a comment
search results?
MozillaMozillapagination?
![Page 27: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/27.jpg)
documents
applications
![Page 28: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/28.jpg)
design challenges
![Page 29: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/29.jpg)
WTF?what is happening?what just happened?
![Page 30: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/30.jpg)
beyond the browserthe back buttonbookmarking
![Page 31: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/31.jpg)
user testing
![Page 32: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/32.jpg)
AccessibilityJustAin’t
eXciting
![Page 33: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/33.jpg)
“Unless a way can be found to notify screen readers of updated content, Ajax techniques cannot be considered accessible.”
![Page 34: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/34.jpg)
“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.”
![Page 35: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/35.jpg)
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
![Page 36: Bulletproof Ajax - Jeremy Keithlink.onclick = function(){window.open(this.href); return false;}; window.onload = function() {}; // get links with class help // loop through links](https://reader036.vdocument.in/reader036/viewer/2022071211/60236a2ae1d5b51e5064f6bb/html5/thumbnails/36.jpg)
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/