asdasdasdasdasd

Javascript / AJAX

Desatanizando Tecnologías

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Los Conceptos

• Lenguaje de Scripts

• Multiplataforma

• Se ejecuta en el navegador

• Brendan Eich, Netscape.

• Control dinámico

• SpiderMonkey

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Los Conceptos - AJAX

• Modelo de desarrollo Web

• XML – Javascript – CSS(no es necesario)

• Arquitectura cliente-servidor

• Actualizar sin recargar la página

• Mejora la experiencia del usuario

• Aplicaciones más rápidas

• No compite con Javascript!!!!!John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Un lenguaje subestimado

• Validar formularios

• Mostrar alertas y confirmaciones

• Fastidiar al usuario con Pop Ups

• Vínculos de forma innecesaria

• Texto parpadeante

• Texto en movimiento– Barra de estado( Afortunadamente solo IE )

– Barra de tituloJohn Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Un lenguaje maldecido

“Javascript no asesina los sitios Web, los desarrolladores que lo usan mal son los

que asesinan los sitios Web ”Jeremy Keith

Perdón por la traducción Jeremy

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

La Potencia

• Interfaces – sproutcore

• Pequeños Juegos

• Juegos Complejos

• Editores WYSIWYG

• Manipulación de imágenes – Otro

• Time Machine

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Usar o no usar, esa es la cuestión!

• Definir muy bien la función del Script

• Sobrecarga del sitio con efectos visuales

• El usuario en realidad lo va a usar???

• Es en realidad necesario ese Pop Up??

• El motor de búsqueda, un visitante mas de mi sitio Web

• Es realmente usable???

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¡Ohhh Dios, Qué difícil es Javascript!

• Señor desarrollador, Javascript no es Difícil

• Existen muchas herramientas en la red para facilitar su uso.

• Foros y Comunidades enteras

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

La Guerra de Navegadores

• Firefox vs Opera

• Opera vs Safari• Firefox vs WebKit

• Internet Explorer vs El resto del mundo

• Jscript y Javascript??

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

El CrossBrowsing

• Desarrollo de aplicaciones y sitios Web que no pierden funcionalidad ni diseño entre navegadores

• Seguimiento de estándares• Los Hacks

<!--[if IE]>

<link href="css/ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

El Estándar

• Sabias que….Javascript tiene un Estándar???

• ECMA – ECMAScript basado en JS• ISO 16262

• ActionScript

• Super W3C, el superhéroe de la Web!!!

• DOM(Document Object Model)

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Separación por Capas

Contenido Presentación Comportamiento

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Ventajas de la Separación

• Buena arquitectura

• Sitios Web más livianos

• Actualizaciónes más rápidas y eficientes

• Menor sacrificio en un rediseño

• Accesibilidad

• Portabilidad

• Si falla una el resto deben seguir funcionando

• Diseño independiente del dispositivoJohn Acostajohnjaiverac@gmail.com

asdasdasdasdasd

La capa de comportamiento

• Manipulación dinámica del los elementos del sitio

• Actualización constante sin refrescar la página

• Estadísticas

• Interfaces que mejoren la usabilidad

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

El Problema

• Sitios Web que regalan código basura

• El copy – paste

• Dependencias de la capa de comportamiento

• “Debes tener Javascript activado para acceder a este sitio”

• Visitantes discapacitados en una Web para navegadores gráficos

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

La Solución

Javascript no Obstructivo

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Javascript no Obstructivo

• Código invisible

• Capa de Comportamiento

• No interrumpir el comportamiento del navegador

• No interrumpir el comportamiento del usuario

• Mejora Progresiva

• Degradación Elegante

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Mejora Progresiva - Pasos

• Contenido usable y accesible

• Diseño usable, accesible y semántico

• El sitio debe funcionar normalmente sin la capa de comportamiento

• Mejoramiento de acciones mediante Javascript / AJAX

• Soporte en el servidor en el caso de una falla

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué debemos tener en cuenta?

• Accesibilidad desde cualquier navegador• Navegadores en modo texto• Un lector de pantalla como JAWS• Accesible para los motores de búsqueda• El peso del sitio• No perder la navegabilidad• No abusar de la capa de comportamiento• Dejar que el hipertexto cumpla su trabajo

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué debemos conocer?

• Javascript puro y duro

• Uso de Frameworks

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Frameworks

• No es necesario tener grandes conocimientos

• Diseñados para que sean entendidos por diseñadores y demás especialistas

• Acceso mediante selectores CSS$( “.miclase” )

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué frameworks existen?

• JQuery by John Resig

• Escriba menos, haga más

• http://jquery.com• http://docs.jquery.com/Main_Page

• http://docs.jquery.com/Downloading_jQuery

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué frameworks existen?

• Mootools by Valerio Proietti

• Un compacto Framework de Javascript

• http://mootools.net• http://docs.mootools.net

• http://mootools.net/download• http://demos.mootools.net

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué frameworks existen?

• Prototype by Sam Stephenson

• http://prototypejs.org/• http://prototypejs.org/learn• http://www.prototypejs.org/download

• http://www.prototypejs.org/api

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué frameworks existen?

• MyJS by John Acosta

• Muy Pronto en SourceForge.net• Soporte para selectores CSS3• Animaciones

• Javascript no Obstructivo

• Interfaz Orientada a Objetos

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

¿Qué frameworks existen?

• Dojo

• YUI

• GWT(Google Web Toolkit)• Rico

• Ext JS

• Y un largo etc…

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Donde encontrar documentación

• http://onlinetools.org/articles/unobtrusivejavascript/• http://www.freeziq.com/2008/07/14/the-top-30-free-ajax-javascript-code-for-web-designers.html• http://olgacarreras.blogspot.com/

• http://docs.jquery.com/Tutorials:jQuery_For_Designers

• http://jseros.wordpress.com/2008/07/16/cuando-usar-y-no-usar-ajax/

John Acostajohnjaiverac@gmail.com

asdasdasdasdasd

Muchas Gracias!!

John Acostajohnjaiverac@gmail.com