wde08 designing for interaction with ajax

78
Ajax designing for interaction with

Upload: satoshi-kikuchi

Post on 15-May-2015

1.753 views

Category:

Technology


0 download

DESCRIPTION

Web Directions East08 presentation sildes Presentation by Jeremy Keith

TRANSCRIPT

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