desatanizando tecnologías: javascript/ajax
DESCRIPTION
TRANSCRIPT
asdasdasdasdasd
Los Conceptos
• Lenguaje de Scripts
• Multiplataforma
• Se ejecuta en el navegador
• Brendan Eich, Netscape.
• Control dinámico
• SpiderMonkey
John [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
asdasdasdasdasd
La Potencia
• Interfaces – sproutcore
• Pequeños Juegos
• Juegos Complejos
• Editores WYSIWYG
• Manipulación de imágenes – Otro
• Time Machine
John [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
asdasdasdasdasd
¿Qué debemos conocer?
• Javascript puro y duro
• Uso de Frameworks
John [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
asdasdasdasdasd
¿Qué frameworks existen?
• Dojo
• YUI
• GWT(Google Web Toolkit)• Rico
• Ext JS
• Y un largo etc…
John [email protected]
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 [email protected]
