Ajax – web 2.0 con jquery para profesionales 2da Ed

AJAX es una técnica de programación Web fundamental para cualquier sitio moderno que ofrece mayor dinamismo y menores esperas para el usuario. Sitios Web como Google Mail, Facebook y Yahoo! están desarrollados utilizando sus procedimientos. Esta obra aborda el uso de JavaScript, de la poderosa librería jQuery y de las nuevas técnicas de trabajo que incluyen el uso de XML, JSON y Patrones de Diseño.

Todos nos habíamos acostumbrado a las limitaciones del HTML y el protocolo HTTP, entre ellas, la más notable, la eterna espera entre una página y la siguiente. Asimismo, el usuario de Internet terminó por aceptarlo como algo imposible de superar. Hasta los chistes decían que WWW en realidad significaba Wait, Wait, Wait (esperar, esperar, esperar). Y de golpe, alguien nos abrió el panorama y nos mostró un nuevo paradigma.

Con este libro, conocimientos básicos de HTML, CSS y una plataforma de servidor, el lector aprenderá todas las técnicas básicas y avanzadas para crear sitios Web profesionales y modernos, con optimización para buscadores. El lector puede acceder a una certificación que avale los conocimientos adquiridos mediante un examen en línea.

Sepa Cómo Usar

• Los nuevos conceptos de Web 2.0.
• El objeto XMLHttpRequest.
• JSON y DOM.
• Las librerías jQuery, Prototype y Script.aculo.us, controles ricos (como calendarios y deslizadores), optimización para Google de contenido AJAX.ios.

Cree

• Sitios que actualizan parcialmente la información.
• Un formulario rico y un lector de noticias RSS.
• Aplicaciones para escritorio y para móviles.

CONTENIDO

C01. Web 2.0. La nueva Web

La nueva Web……………………………………………………………………1

Qué es la Web 2.0……………………………………………………..1

Historia……………………………………………………………………..2

Qué no es la Web 2.0……………………………………3

Web 1.0……………………………………………………………………3

En ejemplos…………………………………………………………..5

Rich Internet Applications……………………………………6

Qué son………………………………………………………………………………6

Características…………………………………………………………….8

Tipos de aplicación………………………………………..10

Ventajas………………………………………………………………………………12

Desventajas……………………………………………………………………13

Capacidad de uso…………………………………………..13

El botón “Atrás” del navegador…………….13

Segunda Guerra de los browsers…………13

Indexación de buscadores……………………….14

Favoritos o marcadores………………………………14

Manejo de errores…………………………………………….15

Complejidad de desarrollo……………………….16

Plataformas disponibles……………………………………….16

AJAX…………………………………………………………………………..16

Adobe Flash…………………………………………………………17

Adobe Flex…………………………………………………………….18

OpenLaszlo…………………………………………………………..20

Microsoft Silverlight……………………………………….20

Java FX……………………………………………………………………..21

El sentido de la Web………………………………………………….22

La Web semántica……………………………………………………22

Microformats………………………………………………………………….23

Web mashups………………………………………………………………24

Web services y API………………………………………………….25

Red social………………………………………………………………………………26

Etiquetado……………………………………………………………………….26

Modelos…………………………………………………………………………….27

Blogs y derivados…………………………………………….27

Wikis…………………………………………………………………………..27

Comunidades……………………………………………………..28

Redes sociales……………………………………………………29

Interoperabilidad…………………………………………………………29

LinkBack………………………………………………………………….29

Redes de favoritos…………………………………………29

Gadgets y Widgets…………………………………………30

Estándares…………………………………………………………………………..30

El nuevo modelo de trabajo………………………………30

XHTML……………………………………………………………………..30

CSS…………………………………………………………………………….31

HTML 5 ……………………………………………………………………..32

JavaScript………………………………………………………………32

XML…………………………………………………………………………….32

Separación en capas………………………………………………..33

C02. Comenzando con AJAX Herramientas……………………………………………………………………..37

Entorno de trabajo……………………………………………………37

Adobe Dreamweaver……………………………………..37

Microsoft Expression Web……………………….37

Aptana Studio……………………………………………………..38

NetBeans………………………………………………………………..41

Visual Studio…………………………………………………………43

Navegadores y utilitarios……………………………………..47

Internet Explorer………………………………………………..47

Firefox……………………………………………………………………….49

Opera…………………………………………………………………………51

Google Chrome………………………………………………….52

Safari…………………………………………………………………………..52

Servidor Web………………………………………………………………..53

Aptana Development Server……………………53

Internet Information Server……………………….54

Apache……………………………………………………………………..54

http Proxies……………………………………………………….55

El objeto XMLhttp……………………………………………………….56

Origen………………………………………………………………………………….56

Modo de uso………………………………………………………………….58

Instanciación………………………………………………………………….58

En Internet Explorer……………………………………….58

En otros navegadores……………………………………59

Patrón Factory……………………………………………………59

Métodos más utilizados……………………………………….61

open…………………………………………………………………………….61

send…………………………………………………………………………….62

abort…………………………………………………………………………..62

Propiedades……………………………………………………………………63

readyState………………………………………………………………63

status…………………………………………………………………………63

statusText………………………………………………………………65

responseText……………………………………………………….65

responseXML……………………………………………………….65

onreadystatechange……………………………………….66

Otros métodos………………………………………………………………67

setRequestHeader…………………………………………..67

getResponseHeader……………………………………..67

getAllResponseHeaders………………………………67

Métodos y propiedades no estándar……….68

Primer Proyecto AJAX…………………………………………….70

Hola AJAX…………………………………………………………………………70

Parámetros GET…………………………………………………………73

Parámetros POST……………………………………………………..74

Reemplazando contenido………………………………….76

C03. JavaScript avanzado Técnicas avanzadas………………………………………………….81

Try-Catch………………………………………………………………………….81

Generando errores…………………………………………..82

For in……………………………………………………………………………………..83

Manejo de funciones………………………………………………84

Parámetros opcionales………………………………..84

Sobrecarga de parámetros por tipo…85

Parámetros como variables……………………..85

Parámetros múltiples……………………………………..87

Programación orientada a objetos………………87

Objeto Object……………………………………………………..87

Recorriendo el objeto……………………………………88

Creando clases………………………………………………….89

Constructores……………………………………………………..89

Prototipado…………………………………………………………..90

Herencia…………………………………………………………………90

Buenas prácticas……………………………………………………….91

Nomenclatura……………………………………………………..91

Documentación………………………………………………….92

JSON…………………………………………………………………………………………..94

Qué es………………………………………………………………………………….94

Sintaxis………………………………………………………………………………94

Ventajas………………………………………………………………………………96

JSON con funciones………………………………………………..97

Usos……………………………………………………………………………………..97

Librerías para otros lenguajes…………………………98

PHP…………………………………………………………………………….99

.NET…………………………………………………………………………….99

Java…………………………………………………………………………….100

Document Object Model……………………………………….100

Qué es………………………………………………………………………………….100

Estructura…………………………………………………………………………100

Objetos………………………………………………………………………………..100

Métodos y propiedades……………………………………….102

Documento DOM………………………………………………102

Atributos de los nodos………………………………….102

Métodos de los nodos………………………………….103

Ejemplo……………………………………………………………………104

Propiedades útiles en XHTML…………………………105

this………………………………………………………………………………..106

disabled……………………………………………………………………106

Estilos CSS…………………………………………………………..106

Ejemplos…………………………………………………………………………….106

Efecto rollover……………………………………………………..106

Creando una tabla dinámica……………………107

Model View Controller…………………………………………….111

Qué es………………………………………………………………………………….111

Estructura…………………………………………………………………………111

Técnicas…………………………………………………………………………….113

index.html (Vista)………………………………………………113

index.js (Controlador)……………………………………114

modelo.js (Modelo)…………………………………………114

ajax.js (Modelo)………………………………………………….114

C04. jQuery

jQuery, el más usado………………………………………………..117

Destronando al rey……………………………………………………117

Comenzando con jQuery……………………………………..118

Utilizando una red de contenidos……….118

Microsoft AJAX CDN……………………………………..119

Google AJAX Libraries API……………………….119

Fundamentos de la librería……………………….120

Convirtiendo objetos a jQuery………………..124

Restringiendo la búsqueda……………………….125

Métodos de jQuery……………………………………………………125

Encadenamiento de funciones………………125

Funciones de HTML……………………………………….126

Funciones de CSS…………………………………………..130

Funciones de formulario…………………………….132

Funciones de eventos………………………………….133

Capturando DOM Ready…………………………….140

Funciones de Efectos……………………………………140

Funciones de AJAX…………………………………………144

Otras Funciones………………………………………………..149

jQuery Plugins………………………………………………………………152

jQuery UI……………………………………………………………………………….153

Instalación de jQuery UI………………………………154

Definición de Temas……………………………………….157

C05. Primeros proyectos AJAX

Creando un sitio estático……………………………………..159

Aviso de cargando…………………………………………..165

Aplicando efectos…………………………………………….168

Lector RSS…………………………………………………………………………169

Actualizando periódicamente………………….175

Proxy PHP………………………………………………………………………177

C06. Formulario de registro AJAX

Objetivo……………………………………………………………………………………179

Arquitectura……………………………………………………………………179

Tablas………………………………………………………………………………….180

Creando el formulario………………………………………………182

HTML……………………………………………………………………………………182

Autocompletar………………………………………………………………….185

Qué es………………………………………………………………………………….185

Cuándo aplicarlo…………………………………………………………186

Autocompletar local………………………………………………..187

Opcionales…………………………………………………………….193

Autocompletar remoto…………………………………………..194

BD.php…………………………………………………………..196

Buscador de localidades…………………………….199

Categorías con niveles en cascada…………..202

Completar países……………………………………………………….203

Problemas con la codificación………………205

Completar provincias…………………………………………….207

Controles ricos………………………………………………………………..213

Slider……………………………………………………………………………………..213

Script.aculo.us slider……………………………………..216

Atributos opcionales……………………………………..219

Implementando Nivel Educativo…………..220

DatePicker……………………………………………………………………….224

Yahoo UI…………………………………………………………………………….224

Calendar………………………………………………………………….227

Funciones avanzadas……………………………………231

NumericTextBox…………………………………………………………232

NumericUpDown………………………………………………232

SortableList……………………………………………………………………..234

Consultando los cursos………………………………234

RichTextBox……………………………………………………………………238

Validación activa……………………………………………………………240

Enviando el formulario…………………………………………….241

Mostrando una alerta……………………………………243

Migrando a jQuery……………………………………………………….244

C07. Patrones de diseño para RIA Qué son………….245

Los patrones como ley…………………………………………246

Patrones GoF………………………………………………………………..246

Su uso en AJAX…………………………………………………………..247

Patrones generales……………………………………………………..248

Factory………………………………………………………………………………..249

Abstract Factory………………………………………………..250

Observer…………………………………………………………………………….251

Command…………………………………………………………………………253

Memento…………………………………………………………………………..255

Value Object……………………………………………………………………256

Patrones exclusivos de RIA………………………………..257

Guesstimate……………………………………………………………………257

On-Demand JavaScript ………………………………………..259

Código dinámico con JSON……………………259

Código dinámico con XHTML ……………….. 260

Cargador de scripts ………………………………………. 262

Cross Domain Proxy……………………………………………….. 263

Heartbeat…………………………………………………………………………..263

Unique URL……………………………………………………………………..265

Generar URL bajo demanda……………………266

Generar URL en forma automática……..266

Periodic Refresh…………………………………………………………267

MultiStage Download…………………………………… 271

Predictive Fetch………………………………………………..272

Prefetch cliente………………………………………………….274

Prefetch servidor………………………………………………275

Local Cache……………………………………………………………………276

Submission Throttling…………………………………………….276

Implementación………………………………………………….277

Peticiones que se sobreescriben…………278

Técnicas Comet………………………………………………..279

JSON con Relleno…………………………………………..281

C08. AJAX avanzado Técnicas………………………………………………………………………………..283

Historial………………………………………………………………………………283

Pasos por seguir………………………………………………284

Métodos………………………………………………………………….285

Ejemplo……………………………………………………………………285

Almacenando en el cliente…………………………288

Cambio de URL………………………………………………….288

Datos a futuro……………………………………………………..288

Datos masivos……………………………………………………290

Peticiones que se sobreescriben…………278

Técnicas Comet………………………………………………..279

JSON con Relleno…………………………………………..281

C08. AJAX avanzado

Técnicas………………………………………………………………………………..283

Historial………………………………………………………………………………283

Pasos por seguir………………………………………………284

Métodos………………………………………………………………….285

Ejemplo……………………………………………………………………285

Almacenando en el cliente…………………………288

Cambio de URL………………………………………………….288

Datos a futuro……………………………………………………..288

Datos masivos……………………………………………………290

No esperemos las imágenes…………………………….290

Reproducir sonido……………………………………………………292

Comprimiendo y ocultando el código……………………. 292

Dojo ShrinkSafe ……………………………………………….. 295

Javascript Chaos Engine ……………………………. 296

Compilar la lógica de negocios …………………………… 301

Comprimiendo el XHTML …………………………………… 302

Pruebas unitarias ………………………………………………………. 305

xUnit ………………………………………………………………………….. 306

Aplicaciones desconectadas ………………………….. 309

Adobe AIR ………………………………………………………………………. 310

Google Gears ……………………………………………………………….. 312

Ejemplo ……………………………………………………………………………… 314

AJAX para Buscadores …………………………………………..315

La solución …………………………………………………………………….. 315

Arquitectura …………………………………………………………………… 316

Página Principal ……………………………………………….. 317

Entregando fotografías ………………………………………… 318

Generación manual ………………………………………… 318

Generación dinámica