Web Directions East08 presentation sildes Presentation by Jeremy Keith

1. designing
for interaction
Ajax
with

2. Ajax

4. Communicating with the
server without refreshing
the whole page.

5. speed

7. frames

8. frames
iframe

9. frames
iframe
Flash

10. frames
iframe
Flash
XMLHttpRequest

11. XMLHttpRequest

12. Microsoft
XMLHttpRequest

13. Microsoft IE5
XMLHttpRequest

14. Microsoft IE5
Mozilla Safari Opera
XMLHttpRequest

15. Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest

16. asynchronous

17. asynchronous

18. asynchronous

19. asynchronous
XMLHttpRequest

21. thin client
browser « » server

22. thin client
browser « » server
storage

23. thin client
browser « » server
storage
processing

24. thin client
browser « » server
display storage
processing

26. rich client
browser server

27. rich client
browser « »XHR« » server

28. rich client
browser « »XHR« » server
storage

29. rich client
browser « »XHR« » server
display storage

30. rich client
browser « »XHR« » server
display storage
processing

32. progressive
enhancement

33. content

34. structure
content

35. presentation
structure
content

36. behaviour
presentation
structure
content

37. behaviour
presentation
structure HTML
content

38. behaviour
presentation CSS
structure HTML
content

39. behaviour JavaScript
presentation CSS
structure HTML
content

40. behaviour
presentation CSS
structure HTML
content

41. behaviour
presentation
structure HTML
content

42. progressive
enhancement

43. progressive
enhancement
XMLHttpRequest

44. Hijax

45. browser server

46. browser server
storage

47. browser server
storage
processing

48. browser server
display storage
processing

49. browser « »XHR« » server
display storage
processing

50. deceptively
rich client
browser « »XHR« » server
display storage
processing

52. browser server

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

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

55. paradox?

56. paradox?
plan for Ajax from the start

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

58. pattern recognition

59. pattern recognition
sign up

60. pattern recognition
sign up
add to cart

61. pattern recognition
sign up
rate this add to cart

62. pattern recognition
sign upadd a comment
rate this add to cart

63. pattern recognition
sign upadd a comment
rate this add to cart
search results?

64. pattern recognition
sign upadd a comment
rate this add to cart
search results?
pagination?

65. feedback

66. feedback
what is happening?

67. feedback
what is happening?
what just happened?

69. conventions

70. conventions
status indicators

71. conventions
status indicators
yellow fade

72. conventions
status indicators
yellow fade
drag’n’drop

73. beyond the browser

74. beyond the browser
the back button

75. beyond the browser
the back button
bookmarking

76. user testing

77. adactio.com
http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/ferricide/501816333/
http://flickr.com/photos/mollyeh11/13664426/
http://flickr.com/photos/chuckbiscuito/161971512/

78. thank you
adactio.com
http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/ferricide/501816333/
http://flickr.com/photos/mollyeh11/13664426/
http://flickr.com/photos/chuckbiscuito/161971512/