WDE08 Designing for interaction with Ajax
-
Upload
satoshi-kikuchi -
Category
Technology
-
view
1.754 -
download
0
description
Transcript of WDE08 Designing for interaction with Ajax
![Page 1: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/1.jpg)
Ajaxdesigningfor interaction
with
![Page 2: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/2.jpg)
Ajax
![Page 3: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/3.jpg)
![Page 4: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/4.jpg)
Communicating with the server without refreshing the whole page.
![Page 5: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/5.jpg)
speed
![Page 6: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/6.jpg)
![Page 7: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/7.jpg)
frames
![Page 8: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/8.jpg)
framesiframe
![Page 9: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/9.jpg)
framesiframeFlash
![Page 10: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/10.jpg)
framesiframeFlashXMLHttpRequest
![Page 11: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/11.jpg)
XMLHttpRequest
![Page 12: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/12.jpg)
XMLHttpRequest
Microsoft
![Page 13: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/13.jpg)
XMLHttpRequest
Microsoft IE5
![Page 14: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/14.jpg)
XMLHttpRequest
Microsoft IE5Mozilla Safari Opera
![Page 15: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/15.jpg)
XMLHttpRequest
Microsoft IE5Mozilla
W3CSafari Opera
![Page 16: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/16.jpg)
asynchronous
![Page 17: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/17.jpg)
asynchronous
![Page 18: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/18.jpg)
asynchronous
![Page 19: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/19.jpg)
asynchronous
XMLHttpRequest
![Page 20: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/20.jpg)
![Page 21: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/21.jpg)
browser server« »
thin client
![Page 22: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/22.jpg)
browser server« »
thin client
storage
![Page 23: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/23.jpg)
browser server« »
thin client
processingstorage
![Page 24: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/24.jpg)
browser server« »
thin client
processingstoragedisplay
![Page 25: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/25.jpg)
![Page 26: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/26.jpg)
browser server
rich client
![Page 27: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/27.jpg)
browser server
rich client
« »XHR« »
![Page 28: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/28.jpg)
browser server
rich client
storage« »XHR« »
![Page 29: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/29.jpg)
browser server
rich client
storagedisplay« »XHR« »
![Page 30: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/30.jpg)
browser server
rich client
processingstoragedisplay
« »XHR« »
![Page 31: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/31.jpg)
![Page 32: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/32.jpg)
progressive enhancement
![Page 33: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/33.jpg)
content
![Page 34: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/34.jpg)
contentstructure
![Page 35: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/35.jpg)
contentstructurepresentation
![Page 36: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/36.jpg)
contentstructurepresentationbehaviour
![Page 37: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/37.jpg)
contentstructurepresentationbehaviour
HTML
![Page 38: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/38.jpg)
contentstructurepresentationbehaviour
HTMLCSS
![Page 39: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/39.jpg)
contentstructurepresentationbehaviour
HTMLCSS
JavaScript
![Page 40: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/40.jpg)
contentstructurepresentationbehaviour
HTMLCSS
![Page 41: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/41.jpg)
contentstructurepresentationbehaviour
HTML
![Page 42: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/42.jpg)
progressive enhancement
![Page 43: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/43.jpg)
progressive enhancement
XMLHttpRequest
![Page 44: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/44.jpg)
Hijax
![Page 45: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/45.jpg)
browser server
![Page 46: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/46.jpg)
browser serverstorage
![Page 47: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/47.jpg)
browser server
processingstorage
![Page 48: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/48.jpg)
browser server
processingstoragedisplay
![Page 49: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/49.jpg)
browser server
processingstoragedisplay
« »XHR« »
![Page 50: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/50.jpg)
browser server
deceptivelyrich client
processingstoragedisplay
« »XHR« »
![Page 51: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/51.jpg)
![Page 52: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/52.jpg)
browser server
![Page 53: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/53.jpg)
navigationsearch
main contentlog on form
shopping cartfooter
{browser
![Page 54: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/54.jpg)
XHR
navigationsearch
main contentlog on form
shopping cartfooter
browser
![Page 55: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/55.jpg)
paradox?
![Page 56: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/56.jpg)
plan for Ajax from the start
paradox?
![Page 57: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/57.jpg)
implement Ajax at the end
plan for Ajax from the start
paradox?
![Page 58: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/58.jpg)
pattern recognition
MozillaMozilla
![Page 59: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/59.jpg)
pattern recognition
sign up
MozillaMozilla
![Page 60: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/60.jpg)
pattern recognition
sign up
add to cart
MozillaMozilla
![Page 61: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/61.jpg)
pattern recognition
sign up
add to cartrate this
MozillaMozilla
![Page 62: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/62.jpg)
pattern recognition
sign up
add to cartrate thisadd a comment
MozillaMozilla
![Page 63: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/63.jpg)
pattern recognition
sign up
add to cartrate thisadd a comment
search results?
MozillaMozilla
![Page 64: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/64.jpg)
pattern recognition
sign up
add to cartrate thisadd a comment
search results?
MozillaMozillapagination?
![Page 65: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/65.jpg)
feedback
![Page 66: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/66.jpg)
what is happening?
feedback
![Page 67: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/67.jpg)
what just happened?what is happening?
feedback
![Page 68: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/68.jpg)
![Page 69: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/69.jpg)
conventions
![Page 70: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/70.jpg)
conventions
status indicators
![Page 71: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/71.jpg)
conventions
status indicatorsyellow fade
![Page 72: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/72.jpg)
conventions
status indicatorsyellow fade
drag’n’drop
![Page 73: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/73.jpg)
beyond the browser
![Page 74: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/74.jpg)
beyond the browser
the back button
![Page 75: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/75.jpg)
beyond the browser
the back buttonbookmarking
![Page 76: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/76.jpg)
user testing
![Page 77: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/77.jpg)
adactio.com
http://flickr.com/photos/chuckbiscuito/161971512/
http://flickr.com/photos/ferricide/501816333/http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/mollyeh11/13664426/
![Page 78: WDE08 Designing for interaction with Ajax](https://reader034.fdocuments.net/reader034/viewer/2022052620/555617d2d8b42ae0238b4f12/html5/thumbnails/78.jpg)
thank youadactio.com
http://flickr.com/photos/chuckbiscuito/161971512/
http://flickr.com/photos/ferricide/501816333/http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/mollyeh11/13664426/