Explaining Ajax

55
Ajax clear :left Jeremy Keith

description

 

Transcript of Explaining Ajax

Page 1: Explaining Ajax

Ajaxclear:left

Jeremy Keith

Page 2: Explaining Ajax

wordbuzz

Αἴας

Page 3: Explaining Ajax

wordbuzz 2 . 0

APIs

RSS

folksonomyopen data

participationlong tail

mashupsAjax

Page 4: Explaining Ajax

Sapir–Whorf hypothesis

word

Page 5: Explaining Ajax

“It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.”

Page 6: Explaining Ajax

technology trigger

peak of inflated expectations

trough of disillusionment

slope of enlightenment

plateau of productivity

Page 7: Explaining Ajax

“The name is shorthand for Asynchronous JavaScript + XML”

Page 8: Explaining Ajax

AsynchronousJavaScriptAndXML HTML

JSON

Page 9: Explaining Ajax

AsynchronousJavaScriptAndXML DHTML

DOM Scripting

Page 10: Explaining Ajax

Asynchronous

“Not at the same time”JavaScriptAndXML

Page 11: Explaining Ajax

Asynchronous

Page 12: Explaining Ajax

Asynchronous

Page 13: Explaining Ajax

speed

Page 14: Explaining Ajax

“If the traditional web was letter writing, Ajax is instant messaging.”

Page 15: Explaining Ajax

“Ajax is like roller skates for the Web.”

Page 16: Explaining Ajax

“Ajax is a way of communicating with the server without refreshing the whole page.”

Page 17: Explaining Ajax

framesiframeFlashXMLHttpRequest

Page 18: Explaining Ajax

XMLHttpRequest

MicrosoftMozillaSafariOpera

IE5

W3C

Page 19: Explaining Ajax

Ajaxin action

Page 20: Explaining Ajax
Page 21: Explaining Ajax
Page 22: Explaining Ajax
Page 23: Explaining Ajax
Page 24: Explaining Ajax
Page 25: Explaining Ajax

documents

applications

Page 26: Explaining Ajax

browser serverdata

processing

thin client

displaying

Page 27: Explaining Ajax

browser serverXHRdata

processing

fat client

displaying

Page 28: Explaining Ajax
Page 29: Explaining Ajax
Page 30: Explaining Ajax

dumbwaiter

Page 31: Explaining Ajax

Hijax

progressiveenhancement

Page 32: Explaining Ajax

XMLHttpRequestusing

progressiveenhancement

Page 33: Explaining Ajax

structurepresentationbehaviour

contentHTML

CSSJavaScript

Page 34: Explaining Ajax

browser serverdata

processingdisplaying

Page 35: Explaining Ajax

browser serverXHRdata

processing

deceptivelyfat client

displaying

Page 37: Explaining Ajax
Page 38: Explaining Ajax

navigationsearch

main contentlog on form

shopping cartfooter

{browser server

Page 39: Explaining Ajax

XHR

navigationsearch

main contentlog on form

shopping cartfooter

browser

Page 40: Explaining Ajax

implement Ajax at the end

plan for Ajax from the start

paradox?

Page 41: Explaining Ajax

pattern recognition

log onadd to cart

rate this

add a comment

search results?

MozillaMozillapagination?

Page 42: Explaining Ajax

<a href="javascript:...">

<a href="#" onclick= "...">

beware

Page 43: Explaining Ajax

design challenges

Page 44: Explaining Ajax

“Don’t be too proud of this technological terror you have created.”

Page 45: Explaining Ajax

what’s happening?

Page 46: Explaining Ajax

what just happened?

Page 47: Explaining Ajax

beyond the browserthe back buttonbookmarking

Page 48: Explaining Ajax

user testing

Page 49: Explaining Ajax

AccessibilityJustAin’t

eXciting

Page 50: Explaining Ajax

“It must still be accessible. It must be usable. If not, it is a cool useless piece of rubbish for some or many people.”

Page 51: Explaining Ajax
Page 52: Explaining Ajax

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

Page 53: Explaining Ajax

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

Page 54: Explaining Ajax

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