WDE08 Designing for interaction with Ajax

78
Ajax designing for interaction with

description

Web Directions East08 presentation sildes Presentation by Jeremy Keith

Transcript of WDE08 Designing for interaction with Ajax

Page 1: WDE08 Designing for interaction with Ajax

Ajaxdesigningfor interaction

with

Page 2: WDE08 Designing for interaction with Ajax

Ajax

Page 3: WDE08 Designing for interaction with Ajax
Page 4: WDE08 Designing for interaction with Ajax

Communicating with the server without refreshing the whole page.

Page 5: WDE08 Designing for interaction with Ajax

speed

Page 6: WDE08 Designing for interaction with Ajax
Page 7: WDE08 Designing for interaction with Ajax

frames

Page 8: WDE08 Designing for interaction with Ajax

framesiframe

Page 9: WDE08 Designing for interaction with Ajax

framesiframeFlash

Page 10: WDE08 Designing for interaction with Ajax

framesiframeFlashXMLHttpRequest

Page 11: WDE08 Designing for interaction with Ajax

XMLHttpRequest

Page 12: WDE08 Designing for interaction with Ajax

XMLHttpRequest

Microsoft

Page 13: WDE08 Designing for interaction with Ajax

XMLHttpRequest

Microsoft IE5

Page 14: WDE08 Designing for interaction with Ajax

XMLHttpRequest

Microsoft IE5Mozilla Safari Opera

Page 15: WDE08 Designing for interaction with Ajax

XMLHttpRequest

Microsoft IE5Mozilla

W3CSafari Opera

Page 16: WDE08 Designing for interaction with Ajax

asynchronous

Page 17: WDE08 Designing for interaction with Ajax

asynchronous

Page 18: WDE08 Designing for interaction with Ajax

asynchronous

Page 19: WDE08 Designing for interaction with Ajax

asynchronous

XMLHttpRequest

Page 20: WDE08 Designing for interaction with Ajax
Page 21: WDE08 Designing for interaction with Ajax

browser server« »

thin client

Page 22: WDE08 Designing for interaction with Ajax

browser server« »

thin client

storage

Page 23: WDE08 Designing for interaction with Ajax

browser server« »

thin client

processingstorage

Page 24: WDE08 Designing for interaction with Ajax

browser server« »

thin client

processingstoragedisplay

Page 25: WDE08 Designing for interaction with Ajax
Page 26: WDE08 Designing for interaction with Ajax

browser server

rich client

Page 27: WDE08 Designing for interaction with Ajax

browser server

rich client

« »XHR« »

Page 28: WDE08 Designing for interaction with Ajax

browser server

rich client

storage« »XHR« »

Page 29: WDE08 Designing for interaction with Ajax

browser server

rich client

storagedisplay« »XHR« »

Page 30: WDE08 Designing for interaction with Ajax

browser server

rich client

processingstoragedisplay

« »XHR« »

Page 31: WDE08 Designing for interaction with Ajax
Page 32: WDE08 Designing for interaction with Ajax

progressive enhancement

Page 33: WDE08 Designing for interaction with Ajax

content

Page 34: WDE08 Designing for interaction with Ajax

contentstructure

Page 35: WDE08 Designing for interaction with Ajax

contentstructurepresentation

Page 36: WDE08 Designing for interaction with Ajax

contentstructurepresentationbehaviour

Page 37: WDE08 Designing for interaction with Ajax

contentstructurepresentationbehaviour

HTML

Page 38: WDE08 Designing for interaction with Ajax

contentstructurepresentationbehaviour

HTMLCSS

Page 39: WDE08 Designing for interaction with Ajax

contentstructurepresentationbehaviour

HTMLCSS

JavaScript

Page 40: WDE08 Designing for interaction with Ajax

contentstructurepresentationbehaviour

HTMLCSS

Page 41: WDE08 Designing for interaction with Ajax

contentstructurepresentationbehaviour

HTML

Page 42: WDE08 Designing for interaction with Ajax

progressive enhancement

Page 43: WDE08 Designing for interaction with Ajax

progressive enhancement

XMLHttpRequest

Page 44: WDE08 Designing for interaction with Ajax

Hijax

Page 45: WDE08 Designing for interaction with Ajax

browser server

Page 46: WDE08 Designing for interaction with Ajax

browser serverstorage

Page 47: WDE08 Designing for interaction with Ajax

browser server

processingstorage

Page 48: WDE08 Designing for interaction with Ajax

browser server

processingstoragedisplay

Page 49: WDE08 Designing for interaction with Ajax

browser server

processingstoragedisplay

« »XHR« »

Page 50: WDE08 Designing for interaction with Ajax

browser server

deceptivelyrich client

processingstoragedisplay

« »XHR« »

Page 51: WDE08 Designing for interaction with Ajax
Page 52: WDE08 Designing for interaction with Ajax

browser server

Page 53: WDE08 Designing for interaction with Ajax

navigationsearch

main contentlog on form

shopping cartfooter

{browser

Page 54: WDE08 Designing for interaction with Ajax

XHR

navigationsearch

main contentlog on form

shopping cartfooter

browser

Page 55: WDE08 Designing for interaction with Ajax

paradox?

Page 56: WDE08 Designing for interaction with Ajax

plan for Ajax from the start

paradox?

Page 57: WDE08 Designing for interaction with Ajax

implement Ajax at the end

plan for Ajax from the start

paradox?

Page 58: WDE08 Designing for interaction with Ajax

pattern recognition

MozillaMozilla

Page 59: WDE08 Designing for interaction with Ajax

pattern recognition

sign up

MozillaMozilla

Page 60: WDE08 Designing for interaction with Ajax

pattern recognition

sign up

add to cart

MozillaMozilla

Page 61: WDE08 Designing for interaction with Ajax

pattern recognition

sign up

add to cartrate this

MozillaMozilla

Page 62: WDE08 Designing for interaction with Ajax

pattern recognition

sign up

add to cartrate thisadd a comment

MozillaMozilla

Page 63: WDE08 Designing for interaction with Ajax

pattern recognition

sign up

add to cartrate thisadd a comment

search results?

MozillaMozilla

Page 64: WDE08 Designing for interaction with Ajax

pattern recognition

sign up

add to cartrate thisadd a comment

search results?

MozillaMozillapagination?

Page 65: WDE08 Designing for interaction with Ajax

feedback

Page 66: WDE08 Designing for interaction with Ajax

what is happening?

feedback

Page 67: WDE08 Designing for interaction with Ajax

what just happened?what is happening?

feedback

Page 68: WDE08 Designing for interaction with Ajax
Page 69: WDE08 Designing for interaction with Ajax

conventions

Page 70: WDE08 Designing for interaction with Ajax

conventions

status indicators

Page 71: WDE08 Designing for interaction with Ajax

conventions

status indicatorsyellow fade

Page 72: WDE08 Designing for interaction with Ajax

conventions

status indicatorsyellow fade

drag’n’drop

Page 73: WDE08 Designing for interaction with Ajax

beyond the browser

Page 74: WDE08 Designing for interaction with Ajax

beyond the browser

the back button

Page 75: WDE08 Designing for interaction with Ajax

beyond the browser

the back buttonbookmarking

Page 76: WDE08 Designing for interaction with Ajax

user testing