Bulletproof
Ajax
Bulletproof
progressive
enhancement
behaviour   JavaScript
presentation CSS
structureHTML

content
<p>
This is the introduction
</p>
<p style=quot;font-weight:boldquot;>
This is the introduction
</p>
<p class=quot;introqu...
<a href=quot;help.htmlquot;>
Need help?
</a>
<a href=quot;help.htmlquot;
onclick=quot;window.open
(this.href); return fals...
window.onload = function() {
 // get links with class help
 // loop through links
 link.onclick = function(){
  window.ope...
beware
<a href=quot;javascript:...quot;>

<a href=quot;#quot; onclick= quot;...quot;>
communicating with the
server without refreshing
         the whole page.




Ajax
communicating with the
  server without refreshing
frames     the whole page.

iframe
Flash
XMLHttpRequest
Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest
send       responseText
open             status
browser   XHR    server


XMLHttpRequest
speed
thin client
thin client
browser           server
displaying          data
              processing
fat client
fat client
browser    XHR   server
displaying         data
processing
dumb
waiter
progressive
enhancement
using
XMLHttpRequest
progressive
enhancement
  Hijax
browser          server
displaying         data
             processing
deceptively
fat client
browser    XHR    server
displaying          data
              processing
{
               navigation
                   search
             main content
browser   server on form
              log...
navigation
                       search
                 main content
browser   XHR     log on form
                shopp...
paradox?
plan for Ajax from the start
implement Ajax at the end
pattern recognition
         add a comment
log on
            add to cart
rate this
      search results?
        pagination?
documents

 applications
design challenges
WTF?
what is happening?
what just happened?
beyond the browser
  the back button
   bookmarking
user testing
Accessibility
 Just
 Ain’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
tota...
“The power of the
Web is in its
universality.
Access by
everyone
regardless of
disability is an
essential aspect.”
k thx bai
           adactio.com
http://flickr.com/photos/flydown/42047131/
http://flickr.com/photos/bizzygirl/291918549/
...
Bulletproof Ajax
Upcoming SlideShare
Loading in...5
×

Bulletproof Ajax

1,312

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,312
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bulletproof Ajax

  1. 1. Bulletproof Ajax
  2. 2. Bulletproof progressive enhancement
  3. 3. behaviour JavaScript presentation CSS structureHTML content
  4. 4. <p> This is the introduction </p> <p style=quot;font-weight:boldquot;> This is the introduction </p> <p class=quot;introquot;> This is the introduction </p> .intro { font-weight:bold; }
  5. 5. <a href=quot;help.htmlquot;> Need help? </a> <a href=quot;help.htmlquot; onclick=quot;window.open (this.href); return false;quot;> Need help? </a> <a href=quot;help.htmlquot; class=quot;helpquot;> Need help? </a>
  6. 6. window.onload = function() { // get links with class help // loop through links link.onclick = function(){ window.open(this.href); return false; }; };
  7. 7. beware <a href=quot;javascript:...quot;> <a href=quot;#quot; onclick= quot;...quot;>
  8. 8. communicating with the server without refreshing the whole page. Ajax
  9. 9. communicating with the server without refreshing frames the whole page. iframe Flash XMLHttpRequest
  10. 10. Microsoft IE5 Mozilla Safari Opera W3C XMLHttpRequest
  11. 11. send responseText open status browser XHR server XMLHttpRequest
  12. 12. speed
  13. 13. thin client
  14. 14. thin client browser server displaying data processing
  15. 15. fat client
  16. 16. fat client browser XHR server displaying data processing
  17. 17. dumb waiter
  18. 18. progressive enhancement using XMLHttpRequest
  19. 19. progressive enhancement Hijax
  20. 20. browser server displaying data processing
  21. 21. deceptively fat client browser XHR server displaying data processing
  22. 22. { navigation search main content browser server on form log shopping cart footer
  23. 23. navigation search main content browser XHR log on form shopping cart footer
  24. 24. paradox? plan for Ajax from the start implement Ajax at the end
  25. 25. pattern recognition add a comment log on add to cart rate this search results? pagination?
  26. 26. documents applications
  27. 27. design challenges
  28. 28. WTF? what is happening? what just happened?
  29. 29. beyond the browser the back button bookmarking
  30. 30. user testing
  31. 31. Accessibility Just Ain’t eXciting
  32. 32. “Unless a way can be found to notify screen readers of updated content, Ajax techniques cannot be considered accessible.”
  33. 33. “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.”
  34. 34. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
  35. 35. k thx bai adactio.com http://flickr.com/photos/flydown/42047131/ http://flickr.com/photos/bizzygirl/291918549/ http://flickr.com/photos/benchan/150094224/ http://flickr.com/photos/rogerjones/121736518/ http://flickr.com/photos/chuckbiscuito/161971512/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×