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:

<li id="home">Home</li>
<li id="news">News</li>
<li id="interviews">Interviews</li>
<li id="external">External</li>





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:

<li><a href="mike-tyson/default.htm">MIKE</a></li>
<li><a href="house/default.htm">HOUSE</a></li>
<li><a href="bob-marley/default.htm">BOB</a></li>
<li><a href="spiderman/default.htm">SPIDER</a></li>

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:

1. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
2. Ajax Lightbox: Una ventana emergente 2.0 en su página web
3. Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página

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:

<script type="text/javascript" src="jquery1.3min.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript" src="turn.js"></script>
<script type="text/javascript" src="ajaxcodedisplay.js"></script>
<link rel="stylesheet" href="turn.css">

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

<div id="target"><a href="#" class="codeexample" ></a></div>


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:

1. Ajax Lightbox: Una ventana emergente 2.0 en su página web
2. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
3. AJAX Accesible para Google: Posicionar contenido en Ajax

Un cambio de marca puede implicar un cambio de dominio que nos sumergirá en un océano de dudas y temores sobre la repercusión que tendrá este cambio sobre las visitas a nuestra web. Si echamos un ojo al método oficial que recomienda google en estos casos, o incluso el método no oficial de Matt Cutts, comprobaremos que el número 301 parece ser la solución a todos nuestros males.

He de reconocer que yo mismo he tenido que pasar por la experiencia de cambiar el nombre de dominio de mi web y les puedo asegurar que si no queremos acabar al borde de un ataque de nervios es muy recomendable tener muy claro cuándo abordar este proyecto, cómo abordarlo y sobre todo tener claro cuánto tiempo puede llevarnos volver a tener nuestro número habitual de visitantes. En este artículo les mostraré de manera sencilla la mejor estrategia para que este vía crucis sea lo más corto posible.

1. Consideraciones iniciales a tener en cuenta

El Pagerank se asocia a un domino de manera global y a cada una de las páginas que conforman el site de manera particular.

Antes de comenzar es importante identificar qué páginas su Site son las que reciben el mayor número de visitas y realizar su redireccionamiento de manera especialmente minuciosa. Tenga en cuenta que por norma general el 20% de las páginas de un Site generan el 80% de las visitas del mismo:

• Identifique qué paginas se encuentran indexadas por Google:
  • (En Google) site:www.miweb.com
• Identifique qué páginas están siendo enlazadas desde los Sites más relevantes:
  • (En Google, sólo muestra una lista aleatoria de enlaces) site:www.miweb.com
  • (En Yahoo) http://siteexplorer.search.yahoo.com/
  • (En MSN) linkdomain:www.miweb.com
  • También puede recurrir a su sistema de gestión de estadísticas o a múltiples herramientas online que hay a su disposición para conocer los backlinks de una web (pejm: Link Popularity Analysis, LinkPopularity.com)
• Consulte sus estadísticas para identificar qué páginas reciben el mayor número de visitas.

Tenga presente que la transferencia de pagerank no es inmediata.

El pagerank real y el pagerank visible en la barra de google no coinciden en número ni se actualizan el mismo tiempo.

Tan importante como no perder pagerank, es no perder presencia en buscadores, ni backlinks.

2. Cómo funciona una redirección 301

La comunicación entre un agente (un navegador, Google, etc) y un servidor web se realiza a través de peticiones y respuestas HTTP. Cuando un agente solicita un recurso que ya no se encuentra en la url solicitada, el servidor responde con una cabecera http de redirección 301:

• La primera línea de la cabecera se llama línea de estado y define la versión del protocolo, el código de respuesta y una frase explicativa.
• La segunda línea se denomina location y se utiliza para redirigir al receptor a la url donde se ubica realmente su solicitud.

Por ejemplo, cuando un visitante accede a nuestra web antigua el funcionamiento de una redirección 301 es el siguiente:

• Un visitante solicita al servidor una url del antiguo dominio realizando la siguiente solicitud http:
  • GET /index.php http/1.1

Host: www.olddomain.com
• El servidor le devuelve un código de estado 301.
  • 301 Moved Permanently

Location: http://www.newdomain.com/index.php
• El navegador al recibir el código 301 sabe que debe redirigir al usuario a la nueva url..

En el caso de que sea la araña de Google la que accede a nuestra antigua web, el funcionamiento de la redirección es similar:

• Googlebot solicita al servidor una url del antiguo dominio realizando la siguiente solicitud http:
  • GET /index.php http/1.1

Host: www.olddomain.com
• El servidor le devuelve un código de estado 301.
  • 301 Moved Permanently

Location: http://www.newdomain.com/index.php
• GoogleBot al recibir el código 301 sabe que la url del documento ha cambiado y que debe actualizar sus índices.

Nota: Puede ver todos los detalles sobre la naturaleza de las cabeceras http en la definición del protocolo HTTP/1.1.

También puede conocer como reacciona GoogleBot en función del código de respuesta que encuentre.

3. Cómo se implementa una redirección

No existe una única forma de realizar redirecciones, por un lado podemos asignar redirecciones HTTP configurando nuestro servidor web, también podemos incluir en la página a redireccionar scripting de servidor (PHP, ASP, Perl, etc), incluso podemos realizar redirecciones con scripting de cliente (JavaScrpt, Meta Refresh, etc), aunque estas últimas están totalmente desaconsejadas en este caso ya que no son transparentes para los visitantes y su utilización puede conllevar penalizaciones en el posicionamiento del Site.

La elección de un método u otro la debe de tomar usted en función de sus necesidades, vamos a ver unos cuántos ejemplos de implementación:

I. Realizar la redirección en los archivos de configuración del servidor

Para poder indicar la redirección en los archivos de configuración debe de tener acceso al archivo httpd.conf de su servidor Apache. A continuación le muestro a modo de ejemplo el código necesario para redireccionar todas las urls de olddomain.com a newdomain.com:

RewriteEngine On

RewriteCond %{HTTP_HOST} !^olddomain\.com [NC]

RewriteRule (.*) http://newdomain.com/$1 [R=301,L]

1. Habilita el módulo mod_rewrite module.
2. La segunda línea chequea el nombre del dominio en la cabecera de la petición HTTP. El parámetro NC indica que la comprobación no debe ser sensible a mayúsculas.
3. La tercera línea realiza la redirección 301 a la url correcta. El parámetro "R" establece el código de respuesta y el parámetro "L" indica que una vez hecha la redirección se ignore cualquier otra regla que pueda aparecer en el fichero.

II. Redirección de directorios y ficheros con .htaccess

La forma más sencilla de redireccionar una página estática a una dirección es a través de la directiva de redirección de Apache. La redirección debe indicarse dentro un un archivo .htaccess ubicado en el raíz o en el directorio sobre el que se quiera aplicar. Tenga en cuenta que la redirección se aplicará también a todos los directorios que cuelguen de este.

Por ejemplo si quisiéremos redirigir todas las páginas que cuelguen de la carpeta /catálogo debería incluir en este directorio un archivo

.htacces con la siguiente información:

Redirect 301 /catalogo http://newdomain.com/catalogo

También es posible establecer redirecciones con expresiones regulares y RedirectMatch. Por ejemplo podríamos redirigir los archivos .gif de oldomaian.com a sus homónimos en .jpg de newdoamin.com con la siguiente expresión:

RedirectMatch 301 (.*)\.gif$ http://www.newdomain.com$1.jpg

III. Redirección en código de servidor

Otra forma de establecer una redirección es indicarla de manera programática con código servidor, la sintaxis varía en función del lenguaje:

• PHP
  
  
  <? header("HTTP/1.1 301 Moved Permanently", TRUE, 301);
  
  @header("Location: http://newdomain.com/");

  ?>


• ColdFusion
  
  <CFHEADER statuscode="301" statustext="Moved Permanently">

<CFHEADER name="Location" value="http://newdomain.com/">
• Perl
  
  #!/usr/bin/perl -w

use strict;

print "Status: 301 Moved Permanently\r\n", "Location: http://newdomain.com/\r\n\r\n";

exit;
• ASP
  
  <% Response.Buffer = TRUE;

Response.Status = "301 Moved Permanently"

Response.AddHeader "Location", "http://www.newdomain.com/"

Response.End %>
• ASP .NET
  
  <script runat="server">

private void Page_Load(object sender, System.EventArgs e)

{

Response.Status = "301 Moved Permanently";

Response.AddHeader("Location","http://www.newdomain.com/");

}</script>
• JSP
  
  <%
response.setStatus(301);

response.setHeader( "Location", "http://www.newdomain.com/" );

response.setHeader( "Connection", "close" );
%>
• Ruby on Rails
  
  def old_action

headers["Status"] = "301 Moved Permanently"

redirect_to "http://www.newdomain.com/"

end
  

IV. Redirecciones en IIS

Si su servidor web es un IIS puede seguir las siguientes indicaciones para hacer una redirección 301:

• En la consola Internet Services Manager haga click en el archivo o directorio que quiere redireccionar.
• Seleccione la opción “redirection to a URL – Redirigir a una URL".
• Escriba la dirección a la que quiere redireccionar.
• Marque “The exact url entered above – la url introducida abajo” y “A permanent redirection for this resource – Redirección permanente para este recurso”
• Haga click en ‘Apply – Aplicar’.

4. Estrategia de redireccionamiento a seguir

La estrategia a seguir es relativamente sencilla: cada url del antiguo dominio se debe redireccionar a la url correspondiente del nuevo dominio:

• Cuanto más sencillas sean las redirecciones aplicadas mejor.
• Antes de redireccionar todo el dominio redireccione un archivo para asegurarse que entiende el proceso y que todo funciona correctamente.
• Si tiene acceso como Root a su servidor realice la redirección en el archivo de configuración del servidor.
• Si la estructura de directorios se mantiene idéntica en el nuevo dominio con una sóla regla es suficiente.
• En el caso de que la estructura de directorios varíe es necesario crear una regla para cada caso. Si existe un número elevado de páginas el trabajo puede volverse bastante tedioso por lo que es importante hacerlo con cuidado para evitar errores.
• Si a parte del nombre de dominio, tiene previsto realizar un cambio de diseño, es recomendable aplicar el rediseño en una segunda fase para evitar desorientar a sus visitantes.
• Una vez finalizada la redirección es importante crear un Google Sitemap con las URLs de su nuevo Site para indicar a Google de manera explicita que los contenidos están ahora disponibles en su nuevo Site .

5. Consideraciones finales

Si la redirección se ha hecho con éxito no se debe experimentar ninguna pérdida de visitas:

• Los backlinks existentes deben redirigir ahora a las páginas en el nuevo dominio.
• Los resultados de las búsquedas en Google todavía mostraran el antiguo dominio pero el usuario será redirigido al nuevo Site.

Si hemos dado de alta correctamente el Site Map para el nuevo dominio en 2 o 3 semanas deberemos ver como se actualiza el índice de Google para mostrar los resultados con el nuevo nombre de dominio.

El PageRank público mostrado en la barra de Google puede tardar varios meses en actualizarse con el valor original del antiguo dominio. Esto no debe obsesionarnos pues no tiene una repercusión negativa en el posicionamiento.

Mantenga los Google Site Maps del Site antiguo y nuevo, y revise de manera periódica los errores de indexación(crawl errors) para asegurarse que las redirecciones están funcionando correctamente y que no existen errores del tipo 404 (Documento no encontrado).

En el blog oficial de Google se recomienda mantener el contenido del antiguo Site durante al menos 180 días una vez hecha la redirección. Si no queremos perder los backlinks deberemos mantener el antiguo contenido de manera indefinida o solicitar uno a uno a todos los Sites implicados que actualicen sus enlaces para apuntar a la nueva dirección.

Las redirecciones deben ser tratadas con especial cuidado, tenga en cuenta que algunos webmasters las han utilizado para intentar modificar de manera fraudulenta los rankings de Google en su propio beneficio, puede leer más acerca de esta práctica en el artículo 302 page Hijack.

6. Google WebMaster Tools: Herramienta para el Cambio de Dirección

Ahora también puede indicar a Google de manera explícita que ha cambiado la dirección de su Site. Para ello utilice la herramienta “Cambio de Dirección” que encontrará en su panel de control de Google Webmaster Tools. Esto facilitará y agilizará la actualización del indice de su web en Google.

Debe tener en cuenta que la utilización de esta herramienta debe complementarse con todo lo dicho anteiormente:

• Configure su nueva web.
• Redirija el tráfico desde el sitio antiguo al nuevo.
• Incluya su nueva web en las Herramientas para webmasters de Google.
• Indique la URL del dominio nuevo.

Tras reportar a Google el cambio de dirección, debe consultar periódicamente su panel de control de Google Webmaster Tools para comprobar si se ha rastreado e indexado correctamente su nueva web.

Artículos relacionados:

1. Cómo elegir un nombre de dominio: 25 consejos
2. Anatomía de un Dominio: posicionar un dominio en Google
3. Cómo posicionar un nombre en Google

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.

  <ul class="zoomyx">
<li><a href="(url del contenido AJAX)" style="background-image: url(url de la imagen)" title="Rubix Cube">Rubix Cube</a></li></ul>

• Definir estilos css de la venta lightbox: Es posible definir en el atributo rel los estilos css (altura, anchura, etc) de la ventana lightbox.

  <ul class="zoomyx">
<li><a href="(url del contenido AJAX)" rel="(estilos css)' style="background-image: url(url de la imágen)" title="Rubix Cube">Rubix Cube</a></li></ul>

  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:

1. Ajax Lightbox: Una ventana emergente 2.0 en su página web
2. AJAX Accesible para Google: Posicionar contenido en Ajax
3. Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página

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

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

   <script type="text/javascript" xsrc="js/prototype.js" mce_src="js/prototype.js"></script>
<script type="text/javascript" xsrc="js/scriptaculous.js?load=effects" mce_src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" xsrc="js/lightbox.js" mce_src="js/lightbox.js"></script>


   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

2. 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).
   

   <link rel="stylesheet" xhref="css/lightbox.css" mce_href="css/lightbox.css" type="text/css" media="screen" />

   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

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

   <a xhref="nota.htm" mce_href="nota.htm" rel="lightbox_text" >Ver nota</a>

2. 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:
   

   <a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox" title="Los recursos de HelloGoogle son la pera">imagen #1</a>

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

   <a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox[mi_grupo]">imagen #1</a>
<a xhref="images/image-2.jpg" mce_href="images/image-2.jpg" rel="lightbox[mi_grupo]">imagen #2</a>
<a xhref="images/image-3.jpg" mce_href="images/image-3.jpg" rel="lightbox[mi_grupo]">imagen #3</a>

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:

1. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
2. Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página
3. AJAX Accesible para Google: Posicionar contenido en Ajax

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:

1. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
2. AJAX Accesible para Google: Posicionar contenido en Ajax
3. Ajax Lightbox: Una ventana emergente 2.0 en su página web