Amedia 2007 Europe, London june 7th-8th

1. Bulletproof
Ajax

2. Bulletproof
progressive
enhancement

3. behaviour JavaScript
presentation CSS
structureHTML
content

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. <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. window.onload = function() {
// get links with class help
// loop through links
link.onclick = function(){
window.open(this.href);
return false;
};
};

7. beware
<a href=quot;javascript:...quot;>
<a href=quot;#quot; onclick= quot;...quot;>

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

9. communicating with the
server without refreshing
frames the whole page.
iframe
Flash
XMLHttpRequest

10. Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest

11. send responseText
open status
browser XHR server
XMLHttpRequest

12. speed

13. thin client

14. thin client
browser server
displaying data
processing

15. fat client

16. fat client
browser XHR server
displaying data
processing

17. dumb
waiter

18. progressive
enhancement
using
XMLHttpRequest

19. progressive
enhancement
Hijax

20. browser server
displaying data
processing

21. deceptively
fat client
browser XHR server
displaying data
processing

23. {
navigation
search
main content
browser server on form
log
shopping cart
footer

24. navigation
search
main content
browser XHR log on form
shopping cart
footer

25. paradox?
plan for Ajax from the start
implement Ajax at the end

26. pattern recognition
add a comment
log on
add to cart
rate this
search results?
pagination?

27. documents
applications

28. design challenges

29. WTF?
what is happening?
what just happened?

30. beyond the browser
the back button
bookmarking

31. user testing

32. Accessibility
Just
Ain’t
eXciting

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

34. “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.”

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

36. 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/