TOPLAXThe right approach to Ajax

Xavier Badosa

• Not only D2D navigation (“hypertext”: document to document)

• But also web applications (RIA: micro-updating)

A richer World Wide Web

• Not only D2D navigation (“hypertext”: document to document)

• But also web applications (RIA: micro-updating)

A richer World Wide Web

AJAX or Ajax

• A sexy name for XMLHttpRequest()

• Not only D2D navigation (“hypertext”: document to document)

• But also web applications (RIA: micro-updating)

A richer World Wide Web

AJAX or Ajax

• A sexy name for XMLHttpRequest()

• Better usability (interactivity, speed, location, etc.)

• Not only D2D navigation (“hypertext”: document to document)

• But also web applications (RIA: micro-updating)

A richer World Wide Web

AJAX or Ajax

• A sexy name for XMLHttpRequest()

• Better usability (interactivity, speed, location, etc.)

But...

URI?

• Reference, links, bookmarks...

• History, Back...

URI?

• Reference, links, bookmarks...

• History, Back...

Solutions

• Append an anchor to the current location (#) (for example, Really Simply History (RSH) framework)

• Use Ajax mainly in middle pages (exclude entry and result pages)

J is for Javascript...

J is for Javascript... A is not for accessible...

The Accessibility Problem

J is for Javascript... A is not for accessible...

The Accessibility Problem

The classic solution

• Progressive enhancement

• Graceful degradation

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

The Accessibility Problem

The classic solution

• Progressive enhancement

• Graceful degradation

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

Jeremy Keith’s Pun:

The Accessibility Problem

The classic solution

• Progressive enhancement

• Graceful degradation

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

Jeremy Keith’s Pun: “Hijax”

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

XHTML

JS CSS

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

XHTML

JS CSSCSS

XHTML

JS

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

XHTML

JS CSSCSS

XHTML

JS

AJAX

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

XHTML

JS CSSCSS

XHTML

JS

AJAXToplayered

J is for Javascript... A is not for accessible...

XHTMLeXtensible Hypertext Markup Language

JSJavaScript

CSSCascading Style Sheet

XHTML

JS CSSCSS

XHTML

JS

AJAXToplayered

Or...

AJAXToplayered

TOPLAX

AJAXToplayered

TOPLAXFrom cleanser to medicine

AJAXToplayered

TOPLAXFrom cleanser to medicine

Thank you

Xavier Badosa