Bulletproof
Ajax

a prueba de balas
incremento
progresivo

comportamiento JavaScript
presentación CSS
estructura HTML
contenido

<p>
This is the introduction
</p>
<p style=\"font-weight:bold\">
This is the introduction
</p>
<p class=\"intro\">
This is the introduction
</p>
.intro { font-weight:bold; }

<a href=\"help.html\">
Ayudar?
</a>
<a href=\"help.html\"
on click=\"window.open
(this.href); return false\">
Ayudar?
</a>
<a href=\"help.html\"
class=\"help\">
Ayudar?
</a>

window.onload = function(){
// get links with class help
// loop through each one
link.onclick = function() {
window.open(this.href);
return false;
};
};

atención
<a href=\"javascript:...\">
<a href=\"#\" onclick=\"...\">

communicating with the
server without refreshing
the whole page.
Ajax

communicating with the
server without refreshing
frames the whole page.
iframe
Flash
XMLHttpRequest

Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest

send responseText
open status
navegador « »XHR« » servidor
XMLHttpRequest

velocidad

cliente ligero

cliente ligero
navegador « » servidor
visualización datos
procesamiento

cliente pesado

cliente pesado
navegador « »XHR« » servidor
visualización datos
procesamiento

montacargas

incremento
progresivo
XMLHttpRequest

incremento
progresivo
Hijax

cliente ligero
navegador « » servidor
visualización datos
procesamiento

navegador « »XHR« » servidor
visualización datos
procesamiento

{
navigation
search
main content
navegador servidor on form
log
shopping cart
footer

navigation
search
main content
navegador XHR log on form
shopping cart
footer

paradoja?
plan for Ajax from the start
implement Ajax at the end

reconocimiento de
patrones
log on add a comment
rate this add to cart
search results?
pagination?

documentos
aplicaciones

desafíos de diseño

WTF?
what is happening?
what just happened?

beyond the browser
the back button
bookmarking

ruebas de usuario

gracias
adactio.com
http://flickr.com/photos/flydown/42047131/
http://flickr.com/photos/bizzygirl/291918549/
http://flickr.com/photos/benchan/150094224/
http://flickr.com/photos/rogerjones/121736518/
http://flickr.com/photos/chuckbiscuito/161971512/