Hello Google, su primera posición en Internet » Javascript

AJAX Accesible para Google: Posicionar contenido en Ajax

Ignacio Gorostiza — Tue, 16 Jun 2009 09:33:11 +0000

Recientemente me preguntaron si Google indexaba contenidos en Ajax. La respuesta es: depende.

Como ya sabrá Ajax es una técnica que abre la posibilidad de realizar una petición XMLHTTP al servidor y recibir un documento html/xml de respuesta de manera asíncrona, es decir, sin necesidad de recargar la página. Ajax en principio no tiene ninguna contraindicación de cara al posicionamiento en Google, en realidad el problema no se encuentra en el Ajax, si no en la accesibilidad de los documentos que queramos que sean indexados.

En el siguiente ejemplo los contenidos se cargan de manera asíncrona, pero Google no sería capaz de indexarlos. ¿Por qué? El problema radica en los enlaces, o mejor dicho, en la ausencia de enlaces. Fíjese en el código del menú principal:

Home


News


Interviews


External

La utilización de Ajax no debe entrar en conflicto con la correcta navegación por los diferentes contenidos relevantes de un Site. En el ejemplo anterior, el acceso a los contenidos se implementa en javascript y esto impide que el bot de Google pueda acceder e indexar estos contenidos. El siguiente código muestra la funcionalidad que controla el acceso a los contenidos:

sections.click(function(){

 		

//show the loading bar
  		
 		showLoading();  	
	//load selected section
  		switch(this.id){ 
 			case "home":
  				content.slideUp();  
				content.load("sections.html #section_home", hideLoading);
  				content.slideDown();
  				break;
		...

Nota: El código del ejemplo está implementado con el framework Jquery. ¿No lo conoce?...¿Y a qué está esperando?

Si aplica un simulador de Bot a la url del ejemplo podría hacerse una idea aproximada de cómo visualiza Google esta página. Como puede comprobar los contenidos dinámicos no son accesibles.

¿Cómo podemos conseguir que Ajax sea accesible por Google ?

Podemos considerar que Google visualiza una página de manera similar a como lo haría un navegador con javascript deshabilitado. Por tanto si queremos dar visibilidad al buscador, cada contenido debe ser accesible a través de un link html natural. Le he preparado un pequeño ejemplo funcional de Ajax accesible. Fíjese el aspecto que presenta ahora el código del menú principal:

MIKE



HOUSE


BOB


SPIDER

A continuación podemos modificar el comportamiento de un link utilizando javascript no obstructivo. Esta técnica permite acceder al DOM de la página y asignar una funcionalidad determinada, como puede ser el acceso asíncrono a contenidos, a cualquier enlace del documento. De esta manera presentaríamos un documento html con enlaces naturales a Google, y una página RIA a nuestros visitantes:

sections.click(function(e){ var my_anchor = $(this).attr("href"); showLoading(); content.slideUp("slow", function(){ content.load(my_anchor, hideLoading); } ); content.slideDown(); return(false); });

Si aplicamos el simulador de Bot a este ejemplo, podemos comprobar que ahora Google accedería sin problema a todos los contenidos.

Le animo a descargarse el código de ejemplo, destriparlo, analizarlo, mejorarlo y aplicarlo libremente en sus desarrollos. Estoy seguro que Google se lo agradecerá.

Por último tenga presente siempre las siguientes consideraciones a la hora de desarrollar una funcionalidad Ajax:

Cuide la arquitectura interna de su Site y cree una estructura de enlaces lógica.
Cada contenido de su site debe ser accesible por un enlace de texto estático.
Si el acceso a los contenidos se realiza a través de JavaScript, frames, DHTML, Flash, o su acceso está restringido por id de sesión o Cookies, es muy posible que Google encuentre problemas para encontrarlos e indexarlos.
El javascript no obstructivo le permite crear funcionalidades RIA sin repercutir en la accesibilidad de la web.
Puede recurrir a navegadores textuales para comprobar como visualizará Google su página.

Artículos relacionados:

Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página

Ignacio Gorostiza — Fri, 13 Feb 2009 15:24:38 +0000

Recientemente tuve la oportunidad de ver un desarrollo en jquery llamado Sexy Curls que simula el paso de una hoja. Lo cierto es que me pareció un efecto muy interesante pero también muy desaprovechado. La librería se limitaba a mostrar por debajo una imagen que "simulaba" representar el código fuente de una página.

Así que ni corto ni perezoso me puse manos a la obra para completar el efecto y he desarrollado Real Ajax Sexy Curl, que añade a la librería el encanto de mostrar por debajo el código fuente real de la página.

Una imagen vale más que mil palabras, así que, ¿por qué no echa un vistazo al ejemplo que he preparado? (Por ahora sólo compatible con firefox )

Como funciona

Ajax Sexy Curl es una funcionalidad basada el el framework Jquery, para su desarrollo he utilizado dos librerías open source:

Sexy Curl escrita por Elliott Kember (http://twitter.com/elliottkember)
Ajax Code Display escrita por Christian Heilmann (http://wait-till-i.com)

La primera - Sexy Curl - simula un efecto de pasar página, para ello escala una imagen Png con transparencias. Como ya comenté antes, la librería original se limitaba a descubir una imagen que simulaba ser el código fuente de la página.

Ajax Code Display es una librería Ajax que muestra el código fuente de una página formateado. Es una librería bastante interesante que admite diferentes parámetros de personalización, Le animo a que visite su página y le eche un vistazo.

El resto ha sido una tarea bastante simple para compatibilizar ambas librerías y ajustar la funcionalidad a los objetivos iniciales del proyecto. Creo que el resultado es realmente espectacular, ¿No le parece?

Cómo incluirlo en mi web

Ajax Sexy Curl puede aplicarse a cualquier web de manera extremadamente sencilla.

1. Incluya las librerías y estilos en la cabecera de la página head:

2. Por último, incluya en la primera línea del body el siguiente código html:

Nada más, el código javascript no intrusivo se encargará del resto.

Opciones de personalización

A través de los estilos puede personalizar algunos aspectos de la funcionalidad:

    var defaults = {      

  directory: 'turn',      // Directorio en el que nos encontramos
      
  side: 'left',           // Si lo cambia a "right" la doblez se mostrará a la derecha      

  turnImage: 'fold.png',  // Imagen para mostrar la doblez      

  maxHeight: 400,         // Altura máxima

  startingWidth: 80,     // Altura y anchura inicial    

  startingHeight: 80,    // 
      
  autoCurl: false         // Si lo ponemos a "true" la transición se inicia con un mouseover

Por otro lado el código es Open Source con lo que podemos estudiarlo, modificarlo y ampliarlo libremente para que se ajuste perfectamente a nuestras necesidades.

Código fuente

Puede descargarse el código fuente de la librería y utilizarlo libremente en su Site, eso sí, tenga en cuenta las siguientes indicaciones:

Este pluging se ofree bajo una licencia MIT , esto significa que puede hacer prácticamente lo que le apetezca con él:

Puede copiarlo, modificarlo, mezclarlo, publicarlo, distribuirlo, sub-licenliarlo y/o venderlo.
Además el autor de la librería original y yo mismo, le permitimos imprimirla en una hoja de papel, doblarla y hacerse un sombrero.
Eso sí, si mantiene los créditos de los autores, le estaremos muy agradecidos.

La funcionalidad funciona correctamente en Firefox y ~~a partir de IE7~~ (Próximamente). Nada más, espero que este efecto le haya gustado tanto como a mi.

Artículos relacionados:

Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario

Ignacio Gorostiza — Sat, 29 Nov 2008 09:02:50 +0000

Tal vez haya necesitado en alguna ocasión enviar datos de una página a otra y se ha visto forzado a enviarlos de manera visible en la URL en forma de querystring. Como sabrá la forma de enviar información de manera no visible en la URL es utilizar el método POST pero para ello es necesario recurrir a un formulario. En el siguiente artículo veremos una técnica que nos permite enviar datos por POST sin necesidad de trabajar con un formulario, o al menos, sin la necesidad de manejar un formulario de manera directa.

El Método POST

La especificación de HTML sitúa la diferencia entre los métodos GET y POST en la forma en la que los datos son enviados: En el caso de GET los datos son incluídos en la URL, mientras que cuando se utiliza el método Post los datos de un formulario se envían a la página destino inmersos dentro del cuerpo de la petición HTTP.

Además la especificación recomienza utilizar el método GET solamente cuando el procesamiento del formulario es idempotente (El envío de los datos no va a generar un cambio en ningún elemento del sistema salvo en el monitor del usuario), y utilizar el método POST para el resto de casos. Un ejemplo de formulario idempotente podría ser el de una búsqueda, ya que tan sólo genera una página de resultados y no implica ningún cambio de estado en BBDD.

Sin embargo hay casos en los que estamos obligados a utilizar el método POST:

Si los datos a enviar contienen carácteres que no pueden codificarse en ASCII.
Si el tamaño de los datos a enviar es muy grande. Puede encontrar un documento de Microsoft que habla sobre esta limitación INFO: Maximum URL Length Is 2,083 Characters in Internet Explorer (Q208427) .
En el caso de que no queramos hacer visible a los usuarios de manera directa cómo se envían los datos.

Puede encontrar toda la información que necesite sobre los métodos GET y POST en la siguiente página http://www.cs.tut.fi/~jkorpela/forms/methods.html

Un ejemplo práctico

Para exponer de forma clara y sencilla esta técnica he pensado que lo mejor es preparar el siguiente ejemplo.

El código javascript es extremadamente sencillo, en primer lugar accedemos directamente a los servicios del DOM para crear un formulario con un campo de tipo hidden. Existen muchas formas de hacer esto, en este ejemplo hemos optado por utilizar la función createElement para crear los nodos y la función appenchild para añadirlos al árbol del documento:

var form = document.createElement("form"); // crear un form with(form) { setAttribute("name", "myform"); //nombre del form setAttribute("action", ""); // action por defecto setAttribute("method", "post"); // method POST } var input = document.createElement("input"); // Crea un elemento input with(input) { setAttribute("name", "theInput"); //nombre del input setAttribute("type", "hidden"); // tipo hidden setAttribute("value", ""); // valor por defecto }

form.appendChild(input); // añade el input al formulario document.getElementsByTagName("body")[0].appendChild(form); // añade el formulario al documento

El paso siguiente y último (no le engañe cuando dije que iba a ser sencillo) es esperar a la carga de la pagina para recorrer el DOM del documento e identificar los links cuyo name sea "post". En este caso recuperaremos el valor del title y se enviará por POST a través del formulario a la página referenciada en el href.

 
    window.onload=function(){

    var my_links = document.getElementsByTagName("a");

    for (var a = 0; a < my_links.length; a++) {

    if (my_links[a].name=="post") my_links[a].onclick = function() {

  document.myform.action=this.href;

  document.myform.theInput.value=this.title;

  document.myform.submit();

  return false;}

}

}

Aquellos links en los que queramos enviar algún tipo de información por POST deberán incluir los siguientes atributos:

name="post"
title=""
href=""

Valga el siguiente código de ejemplo:

Pulsa aquí Para hacer POST. También puedes pulsar aquí para hacer otro POST. Esto es un Esto es un link normal.

Artículos relacionados:

Cómo mejorar los formularios HTML con Xhtml, Css y Javascript

Ignacio Gorostiza — Wed, 19 Nov 2008 09:53:33 +0000

Los formularios son sin duda la forma de interacción más directa con el usuario que puede existir en un Site. El estándar HTML ofrece una serie de componentes nativos que pueden ser ampliados utilizando css y/o javascript. A continuación le muestro una serie de recursos imprescindibles para mejorar la experiencia del usuario y crear formularios interactios, accesibles y muy atractivos. Si conoce algún otro recurso que no haya incluido y quiere compartirlo en hellogoogle.com no dude en comentármelo:

Botones mejorados

Radio Buttons y Checboxes

Mejorar el elemento Input

Combo box mejorados

Elemento de formulario: Input Text + Combo Box

Menús de pestañas

Menú de pestañas con css

Maquetación de elementos de formulario con CSS

Formularios accesibles

Herramientas para crear formularios

Frameworks

Artículos relacionados:

Ajax zoomy: Un Ajax lightbox para su galería de imágenes

Ignacio Gorostiza — Mon, 03 Nov 2008 16:07:19 +0000

Ver demo.

Descargar código.

Podemos encontrar infinidad de librerias para crear en nuestras webs el conocido efecto lightbox que viene a ser la versión 2.0 de los antiguos pop-ups. Me gustaría destacar Zoomy.js que es una librería basada en Prototype y Scriptaculous, desarrollada por Filippo Buratti que permite crear de manera sencilla y rápida una galería de imágenes tipo lightbox. Tiene la particularidad de que a pesar de ser un código realmente ligero (menos de 5kb) las imagenes se presentan de manera muy elegante y los pop-ups pueden ser arrastrados libremente por la pantalla.

Tomando este código como base, he añadido dos nuevas funcionalidades que creo pueden serle de mucha utilidad a la hora de desarrollar su propia galería:

Contenido AJax: Ahora es posible mostrar en la ventana lightbox texto ó html.
Definir estilos css de la venta lightbox: Es posible definir en el atributo rel los estilos css (altura, anchura, etc) de la ventana lightbox.
Nota: A la hora de definir los estilos es necesario seguir la nomenclatura que establece prototype a la hora de utilizar la función setStyle, por ejemplo:

rel="width:'400px',height:'400px',color:'#fff'"

El resto de funcionalidades de Zoomy se mantienen intactas, puede ver los cambios introducidos comparando la librería original con la librería ampliada en HelloGoogle.com. Además la nueva librería no sufre ningún incremento de peso (A penas medio kb).

He preparado una demo donde puede comprobar online el funcionamiento de la librería con todas sus funcionalidades.

Como siempre, puede descargarse el código completo de la librería y utilizarlo libremente en sus desarrollos. Recuerde que el código es open-source y está protegido por una Licencia MIT.

Ya no tiene excusa para incluir en su web una verdera galería de imágenes 2.0.

Artículos relacionados:

Un emulador de ZX Spectrum en Javascript

Ignacio Gorostiza — Wed, 29 Oct 2008 11:07:52 +0000

El único límite es la imaginación, esto es lo que ha debido pensar Matt Westcott al desarrollar un emulador de ZX Spectrum íntegramente en Javascript.

Antes de comentar cómo lo ha conseguido, le invito a que lo pruebe, como verá puede ejecutar algunos juegos, entre ellos el clásico del genial programador español Paco Menéndez, Sir Fred.

¿Sorprendido? Gran parte del secreto, sobre todo en cuanto a lo que la parte gráfica corresponde, reside en las nuevas posibilidades que abre HTML 5 ya soportado por algunos navegadores modernos. Si quiere profundizar un poco más en cómo se ha podido desarrollar una idea como ésta en un lenguaje tan limitado, a priori, como javascript, a continuación le muestro los puntos clave del desarrollo:

Un emulador no es otra cosa que una emulación de un hardware por software. Es decir, traducir la lógica de un circuito integrado en líneas de código.
El núcleo o core del emulador ha sido tomado prestado del proyecto Fuse que implementa una emulación de la micro ZX80 en el lenguaje C. La sintaxis de C y Javascript es bastante parecida por lo que el trabajo de conversión es relativamente automático.
Según nos cuenta el propio autor el principal problema lo encontró a la hora de implementar en javascript (que sólo maneja tipos integer) aquellos trozos de código que utilizaban funciones C de bajo nivel para implementar operaciones binarias para emular registros y realizar conversiones entre valores de 8 y 16 bits.
La interfaz gráfica del Spectrum se ha emulado en Firefox, Opera y Safari utilizando el elemento Canvas de Javascript.que permite dibujar dinámicamente bitmaps por código. Para el navegador Internet Explore, ya que no soporta Canvas, se ha recurrido a ExplorerCanvas.
Si ya ha probado el emulador, habrá comprobado que el consumo de recursos es muy alto y el rendimiento bastante mejorable. Uno de los principales temas a mejorar es la forma en la que se dibuja cada píxel. Ahora mismo es necesario dibujar un rectángulo de 1x1, pero en un futuro el autor tiene previsto sacar provecho de la interfaz de HTML 5 putImageData. Este cambio posiblemente permita hacer correr el emulador en tiempo real en un hardware modesto.

Por último comentarle que si sus padres (o los reyes magos) en vez de un Spectrum le trajeron un MSX está de suerte porque también existe un emulador para MSX en javascript. Espero que con este ejemplo haya sacado conclusiones que pueda poner en práctica en futuros proyectos.

Artículos relacionados:

Javascript no intrusivo, un ejemplo mágico.

Ignacio Gorostiza — Fri, 26 Sep 2008 08:35:49 +0000

Navegando por Internet he encontrado un curioso ejemplo de javascript no intrusivo que por su sencillez y espectacularidad me gustaría compartir con ustedes. Creo que antes de comenzar con ninguna explicación lo mejor será que lo prueben:

Para ello vaya a su navegador favorito (google) y accedan a la sección de búsqueda de imágenes.
Realicen la búsqueda que prefieran, por ejemplo "hellogoogle" y pulse en buscar para ver todos los resultados.
Una vez llegado a este punto copie la siguiente linea de código y péguela en su navegador (Como si se tratara de la dirección de una web):
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);
Pulse enter...¿Sorprendido?

Aunque a pesar de su sencillez es un efecto muy espectacular, no se trata de ningún truco de prestidigitación. La explicación hay que buscarla en el javascript no intrusivo, si analizamos el código para ver cómo se consigue este efecto puede sacar algunas conclusiones interesantes:

En primer lugar hay que tener presente que el código javascript se ejecuta después haber cargado una página web en el navegador. En nuestro caso era la página de resultados de una búsqueda de imágenes.
Cuando un navegador web carga una página crea una estructura de objetos en memoria denominada DOM (Document Object Model). Esta modelo de objetos puede ser consultado e incluso modificado a través de un lenguaje de scripting como javascript.
Por ejemplo en el array document.images se almacena una referencia a cada imagen del documento: DI=document.images //Array con las imagenes del DOM
Podemos determinar fácilmente la longitud de este Array con el atributo length para poder recorrerlo con un bucle for: DIL=DI.length for(i=0; i-DIL; i++) { ... }
Los atributos de cada una de las imágenes de la página puede ser modificado con javascript accediendo al DOM: DIS=DI[ i ].style; // Obtenemos una referencia al atributo style
Así podemos modificar el atributo position que por defecto es block a absolute . Un elemento con posicionamiento absolute puede ser posicionado en cualquier coordinada de la página a través de los atributos top y left: DIS.position='absolute'; //Modificamos el posicionamiento a absolute DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; //Actualizamos el atributo left DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++} /Actualizamos el atributo top
Por último se crea de un temporizador con la función setInterval que ejecuta cada 5 milisegundos la función A que es la que realiza el movimiento de las imágenes modificando sus atributos top y left: setInterval('A()',5); void(0);
nota: Aunque no tiene relación directa con el javascript no intrusivo la función que realiza el movimiento de las imágenes es una función helicoidal. Variando los parámetros de la función podemos conseguir que las imágenes describan otros parábolas: javascript:R=0; x1=.01; y1=.005; x2=.025; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300;y5=200;DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

La utilidad del javascript no intrusivo no se limitan a este tipo de ejemplos curiosos, si no que es una herramienta de gran importancia a la hora de realizar webs accedibles que no dependan de que el navegador del visitante soporte o no javascript. Esto lo veremos sin duda en próximos artículos.

Fuente de la noticia original: This is freaking insane.

Nota: Este artículo ha sido indexado por Google en 4 minutos, nunca dejarás de sorprenderme baby.

Artículos relacionados:

Google Heat Maps: Añada color en sus mapas de Google

Ignacio Gorostiza — Sun, 12 Aug 2007 16:44:06 +0000

Hacía tiempo que venía observando webs 2.0 ( pejm: http://www.trulia.com/home_prices/ ) que utilizaban Heat Maps para mostrar de una manera muy sencilla y clara información geográfica. Cuando revisé el Api de Google para ver cómo se podía conseguir este efecto, me llamó la atención que no estaba soportado de manera nativa y que era necesario realizarlo de una manera más o menos artesanal.

El código

En la siguiente página he preparado un ejemplo donde he destacado algunos países europeos con colores elegidos al azar.

Cómo se crea una silueta

Para mostrar líneas y polígonos en los mapas se utiliza VML (Vector Markup Language), recuerde incluir el VML namespace al comienzo de su documento: xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> La clase GPolygon del API de Google Maps ofrece funciones para dibujar polígonos en el mapa. Para nuestro ejemplo he creado la función createPolygon que permite dibujar una silueta vectorial en el mapa pasando tres parámetos:

pts_map: Codificación de las coordenadas de los puntos que conforman el polígono.
lvls_map: Codificación de los niveles que conforman el polígono.
num: Valor entre 1 y 6, cada valor tiene un color para la silueta.

Cómo obtener los valores de la silueta

A fecha de hoy no conozco ninguna herramienta que permita obtener de manera automática estos valores por lo que es necesario recurrir a un método un tanto artesanal:

Acceda a la sección Mis Mapas en http://maps.google.es/ y haga click en la opción Crear un mapa nuevo.
Ahora viene el trabajo más tedioso, en la zona superior del mapa encontrará un icono para dibujar formas, selecciónelo y comience a pintar los puntos que delimitan la región sobre la que quiere trabajar. Recuerde que cuanto mayor sea el zoom, mejor será la calidad del Heat Map.
Cuando haya terminado haga doble click y elija un nombre para guardar el polígono.
En la esquina superior derecha encontrará la opción Enlazar a esta página, copie esta url en su navegador.
En la nueva página, busque dentro del código HTML el nombre que le dio a su polígono hasta encontrar una cadena similar a esta: name:"Forma 1",description:"",polylines:[{id:"0",points:"ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@",levels:"BBBBB"
Por tanto la codificación de las coordenadas de nuestro polígono sería: [{id:"0",points:"ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@ y la codificación de los niveles: BBBBB
El código javascript correspondiente sería: createPolygon("ol|oFxbaS~df@h`]rqNmfg@qxp@o_d@a~Cren@","BBBBB",5)

Algunas observaciones

Debe tener en cuenta que los Heat Maps consumen bastante resursos de su sistema, un mapa con muchos polígonos o con formas muy complejas pueden sobrecargar el navagador y hacer la página inmanejable. Puede personalizar el estilo de sus Heats Maps con algunos parámetros como el color, la opacidad, el borde, el relleno, etc. Para ello utilice la función fromEncoded(color?, weight?, opacity?, points, zoomFactor, levels, numLevels) Puede descargarse el código de ejemplo y utilizarlo líbremente en sus aplicaciones. Por último recuerde que para poder utilizar el API de Google Maps en sus aplicaciones es necesario que solicite su Key en la sección sign up for an API key. Powered by HelloGoogle.com

Artículos relacionados:

Ajax Lightbox: Una ventana emergente 2.0 en su página web

Ignacio Gorostiza — Mon, 14 May 2007 21:35:22 +0000

Durante el desarrollo de mi último proyecto he tenido la suerte de conocer un fantástico efecto 2.0 desarrollado por Lokesh Dhakar. Se trata de un efecto Lightbox que permite mostrar espectaculares pop-ups con imágenes y grupos de imágenes. Las características del código original no eran suficientes para el proyecto en el que trabajaba, así que tuve que ampliarlo para que fuera capaz de mostrar pop-ups que cargaran dinámicamente de un fichero. De este modo nació el que he bautizado como Ajax LightBox, espero que les sea de tanta utilidad como a mi.

Qué es Ajax Lightbox

Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente “Contenido, Presentación y Comportamiento. Comentar también que un script no intrusivo permite cumplir con el punto de verificación 6.3 de las normas de accesibilidad WCAG (prioridad 1, necesario para nivel A):

"Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page."

Como puede observar en el siguiente ejemplo, usted puede visualizar tres tipos diferentes de ventanas:

Contenido dinámico extraido vía Ajax de un fichero.
Imágenes individuales.
Grupos de imágenes.

Si conoce algo de javascript y css puede personalizar el efecto para ajustarlo a sus necesidades:

Ha sido testeado en las últimas versiones de los navegadores más extendidos: IE/FireFox/Opera.

Cómo utilizarlo

1. Configuración

Ajax Lightbox utiliza dos librerías opensource: Prototype y Scriptaculous. Por tanto debe incluirlas en la cabecera de su página:

Puede modificar la librería lightbox.js para configurar algunos parámetros del efecto:
fileLoadingImage: Imagen de carga
overlayOpacity: Nivel de transparencia de la capa
overlayvar animate: Activa/Desactiva rescalable animations
resizeSpeed: Controla la velocidad de rescalado de la imagen (1 = muy lento y 10 = muy rápido)
borderSize: Grosor del borde
Incluya también la hoja de estilos lightbox.css añada los estilos a la hoja de estilos actual de su Site. Puede modificar los estilos para cambiar las características del efecto (Colores, tamaños, etc).

Es importante que compruebe dentro de la hoja de estilos que las imágenes están siendo referenciadas a las ubicaciones correctas.

2. Activación

Añada un atributo rel="lightbox_text" a cualquier enlace que apunte a una página web para activar el efecto:

Ver nota
Añada un atributo rel="lightbox" a cualquier enlace a una imagen en el que quiera activar el efecto. Puede incluir un atributo title si quiere visualizar un caption en la ventana:

imagen #1
Si quiere agrupar un conjunta de imágenes, incluya un nombre de grupo dentro de unos corchetes en el atributo rel:

imagen #1 imagen #2 imagen #3

Descárgueselo

El código se ofrece bajo la licencia Creative Commons, esto significa que puede utilizarlo y modificarlo libremente en sus aplicaciones. Solamente debe mantener los créditos tal y como están, para reconocer la labor de sus autores.

Espero que este efecto le sea de tanta utilidad como a mi, y que a partir de ahora pueda sorprender a sus visitantes con este Ajax Lightbox 2.0.

Ajax Lightbox v1.0

Artículos relacionados:

Selector combo dinámico en Ajax: localidades y provincias de España

Ignacio Gorostiza — Tue, 13 Feb 2007 22:00:12 +0000

En diversos proyectos he tenido la necesidad de trabajar con un formulario en el que uno de los campos es un selector de provincias y localidades de España. Tal vez usted también haya tenido esta misma necesidad durante el desarrollo de un proyecto.

En un enfoque tradicional sería necesario cargar en memoria todas las provincias y localidades, o dividir el proceso en dos fases: en la primera el usuario elegiría su provincia para luego seleccionar su localidad en un segundo paso. Un ejemplo de este enfoque tradicional es la web de páginas amarillas. Observe que el tiempo de carga de la página es considerablemente elevado.

Las nuevas técnicas de desarrollo web 2.0 nos ofrecen ahora la posibilidad de resolver este tipo de funcionalidades de una manera mucho más elegante y eficiente.

Ejemplo de combo dinámico en Ajax

En un enfoque 2.0 he desarrollado este ejemplo en el que puede ver un formulario que permite al usuario seleccionar su localidad de manera muy rápida y eficiente. Ajax nos permite trabajar con un documento XML de más de 2Mb que contiene todas las localidades de España, cargando en memoria únicamente la información que necesitemos en cada momento.

En el siguiente esquema se explica el funcionamiento de la aplicación Ajax:

Esta funcionalidad consta de los siguientes archivos:

default.php: página incial dónde se generan dinámicamente el combo de provincias a partir del XML general.
xml_data_provider.php: recorre el XML general y devuelve otro XML que contiene sólo las localidades de la provincia escogida.
AjaxCode.js: funcionalidad Ajax que lee el XML con las localidades elegidas y crea dinámicamente el combo de localidades.
provinciasypoblaciones.xml: Archivo XML que contiene todas las localidades y provincias de España.

Esta misma funcionalidad puede utilizarla para manejar cualquier XML de gran tamaño que de otra forma se mostraría inmanejable y ralentizaría mucho el tiempo de carga de su Site: fichas de clientes, un catalogo de productos, etc.

El tiempo de carga de una página y el consiguiente tiempo de espera de un usuario es uno de los factores más importantes en el rendimiento de una web. Tal y como se desprende del estudio sobre usabilidad realizado por Peter Sevcik en Julio de 2002, el tiempo de carga de una página no debe dilatarse más de 10 segundos para mantener el nivel de satisfación del usuario dentro de los límites óptimos. A partir de este límite el usuario empieza a percibir que la página está tardando en cargar y cuando se rebasa los 40 segundos la fustración y pérdida de interes del usuario por la página aumenta de manera muy acusada.

El código.

En el siguiente archivo zip dispone de todos los ficheros y recursos que conforman la aplicación. Siéntase libre de utilizarlo en su página web. Si le resultó de utilidad o encontró cualquier problema le agradecería mucho conocer su feedback.

Artículos relacionados: