Archivo por meses: febrero 2012

¿Que es AJAX?

Tengo que reconocer que me costo bastante entender lo que era ajax. Para comenzar ajax es una tecnología, o mas bien un conjunto de lenguajes  no un lenguaje en sí que está compuesto principalmente por html, javascript, DOM y el objeto htttpRequest que vendria siendo un objeto DOM que el el nucleo de Ajax, siendo principalmente Javascript quien maneja la interacción entre estos.

Segun wikipedia:

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

 

Otro punto que me gustaria dejar en claro sobretodo a un principiante es una pregunta que me surgió luego de leer un tutorial: ¿Para usar ajax es necesario mucha programacion?

La respuesta vendria siendo: Si y NO.

No: Pues la mayoria de los efectos que utilizamos en la web con ajax, estan programados o existen multiples lugares de donde se pueden descargar librerias con estos efectos y solo debemos realizar unas configuraciones en codigo para utilizarlos en nuestra web.

Si: En el caso deseásemos inventar o realizar un efecto nuevo o personalizado, obviamente deberemos meter manos, a una librería ya echa o bien empezar una desde cero.

Para la gran mayoría de personas que desea incluir efectos en la web que ya estan diseñados, existen ambientes de desarrollos sobre los cuales se puede trabajar, cabe mencionar que estos ambientes o librerías se encuentran programados o desarrollados con javascript, Estos ambientes nos proveen generalmente el “motor” o “núcleo” básico que le va a permitir a nuestros efectos u animaciones funcionar, ademas estos ambientes incluyen por su parte una serie herramientas que pueden ser gran utilidad siendo mas basicos pero no menos importantes.

Según yo, creo que cada persona debe aprender un grado de ajax que le sea comodo y cubra sus necesidades, pues.. ¿Tiene sentido aprender a contruir un computador desde las tarjetas electronicas hasta la programacion del sistema operativo si lo que deseamos finalmente es usar paint?

Entonces, para las personas que desean trabajarlo solamente para añadirle estilo a una web con efectos ya creados vamos a ver unos ejemplo y después dejare unas referencias muy útiles para una persona que desea conocer hasta las entrañas de ajax.

AJAX Básico

– Primero que todo yo voy a utilizar un servidor local para hacer pruebas que monte con xaamp, pero si lo deseáis lo puedes hacer tu hosting o espacio en la web.

– Segundo para utilizar el efecto vamos a utilizar la libreria jquery, tambien existe la mootools que tambien es buenisima. Una librería para quien esta medio perdido, como ya comente, vendria a ser un conjunto de objetos y funciones ya definidas que permiten el funcionamiento de efectos y la tecnología de ajax, pues el efecto que probaremos los utiliza para funcionar correctamente, en el fondo vendria siendo como un Framework.

Podemos descargar Jquery desde la pagina oficial que es AQUÍ

El efecto que probaremos sera thickbox que es un complemento que sirve para ver una imagen en un modal, se descarga desde AQUÍ

Primero que todo en una estructura de html, incluiremos la libreria de jquery. de la siguiente manera:

< script src="lib/jquery-1.7.2.js" type="text/javascript">< /script >

Ejemplo 1:

Vamos a probar uno de los efectos básico que la librería de Jquery trae incluido:

Explicando el código:

1. Lo primero que se realiza dentro del script es esperar que la jerarquia de objetos DOM se carge  (vale decir: botones, divs, textboxs, tags) para posteriormente realizar lo que deseamos por esa razon es la que siempre se debe incluir la siguiente estructura:

$(document).ready(function(){

// AQUI TODO LO QUE QUERAMOS HACER..

});

2. Luego le añadimo al enlace con el nombre “ocultar” el evento del clic, y dentro de esto le añadimos el comportamiento o accion que deseamos que realice al presionar clic:

$(“#ocultar”).click(function(event){

// AQUI EL COMPORTAMIENTO AL HACER CLIC

});

3. Posteriormente seleccionamos el elemento de la pagina con el nombre “capaefectos” y le aladimos la llamada el metodo “hide” y con el parametro “slow” para que sea de forma pausada:

$(“#capaefectos”).hide(“slow”);

 

Y tenemos el primer comportamiento definido, si miramos el código que sigue, es exactamente lo mismo pero para realizar el efecto inverso, osea para mostrar el contenedor o div que habremos ocultado.

Ejemplo 2:

Aquí vamos a probar a el efecto aviaslider del cual necesitaremos importar la librería nueva.

Explicando el código:

La estructura del html es la misma, como habíamos visto en el ejemplo anterior, se importa la librería de JQuery pero ademas la libreria de thickbox (thickbox.js) y la hoja de estilo de thickbox (thickbox.css):

< script type="text/javascript" src="lib/thickbox.js" >
< link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />

Posteriormente deberemos agregar el enlace que nos va a desplegar el efecto y la imagen, esto lo realizamos mediante una etiqueta < a > especificando la ruta o la imagen que nos va a mostrar al hacer clic href=”imagenes/animales.jpg” y ademas como propiedad especial que nos vincularía la etiqueta < a > con thickbox, debemos añadirle la clase css thickbox (class=”thickbox”):

< a href="imagenes/animales.jpg" title="Imagen" class="thickbox">CLIC < /a >

AJAX Avanzado.

Bien, como fue enunciado anteriormente 😛 puede resultar interesante o necesario sumerguirse en las extrañas de ajax, esto tal ves si necesitamos hacer una modificacion a una libreria determinada, agregar cosas sacarlas o si somos mas creativos y audaces crear nuestro propio efecto.

No pretendiendo reinventar la rueda, me ha resultado sumamente útil y placentero leer un tutorial tan completo como el siguiente, en el cual se explican conceptos básicos hasta técnicas mas avanzadas de como se realizan estos efectos y como manejar correctamente el DOM de la pagina para crear efectos prácticos y bellos.

Manual de AJAX www.rincondeajax.com

 

GoodLuck&Thanks.

Biblioteca de Métodos JavaScript

En esta sección pretendo dejar un conjunto de métodos que sean útiles en la vida de un programador para controlar aspectos triviales de un sistema enfocado mayoritariamente a formularios.

Rut Valido (Chile):