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:

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:

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

El concepto de cache (sin acento, a no confundir con la palabra caché que significa distinción o elegancia) es ampliamente utilizado en todos los campos de la informática. De manera general podríamos definirlo como el proceso en el que un conjunto de datos son duplicados con el fin de reducir el tiempo de acceso a la información original y optimizar el rendimiento de un sistema.

En el terreno web, el cacheo es el proceso de almacenamiento de documentos web (una página html, una imagen, una librería javascript, etc) con el objetivo de reducir el ancho de banda consumido por los visitantes, la carga de los servidores que atienden peticiones web y el retardo de una descarga. Una cache web almacena una copia de los documentos que son devueltos por un servidor y se encarga de atender las peticiones siguientes.

A la hora de definir una web en la que se espera un tráfico elevado cobra especial relevancia establecer una política de cacheo que permita crear un sistema escalable y evitar problemas a la hora de atender las peticiones de nuestros usuarios.

Existen tres tipos de caches que pueden actuar durante el proceso de solicitud de un documento web:

1. Cache de Agente de Usuario (User-Agent): Está presenten en los navegadores web y lógicamente sólo funcionan para un único usuario.
2. Cache Compartida o proxy-cachés directos: Este tipo de cache son utilizados por los proveedores de servicios de Internet y empresas para ahorrar ancho de banda. La comparten todos los usuarios que accedan.
3. Cache pasarela o proxy-cachés inversos: Funcionan como respaldo de un servidor web de forma transparente para los usuarios. Es posible trabajar con varias cache pasarela de manera conjunta para implementar una Content Delivery Network (CDN) (pjem: Akami)

Si planificamos correctamente un Site, la cache nos ayudará a mejorar el tiempo de carga y a gestionar de manera eficiente el ancho de banda de nuestro servidor. El incremento de rendimiento puede ser excepcional y la experiencia de nuestros visitantes mejorará notablemente sin necesidad de invertir ni un sólo euro.

Cómo se gestiona una petición web

Para comprender el proceso de cacheo es indispensable entender qué ocurre durante la carga de una web. El siguiente gráfico muestra como se comunican un navegador y un servidor web durante la solicitud y envío de una página no cacheada:

1. Navegador: Hola!, ¿podrías mandarme el archivo ejemplo.htm?
2. Servidor: Claro, espera un momento que lo busco en mi disco duro.
3. Servidor: Aquí esta!
4. Servidor: Te lo mando chico, cuidado que es un poco pesado 100kb y mi ancho de banda es limitado.
5. Navegador: Muchas gracias ya lo estoy descargando y mostrándoselo al usuario.

Si la página se encuentra cacheada el proceso podría ser similar el siguiente:

1. Navegador: Hola!, ¿podrías mandarme el archivo ejemplo.htm?
2. Servidor: Claro, espera un momento estoy comprobando la fecha de modificación del archivo.
3. Servidor: Aquí está!, y veo que no se ha modificado el fichero desde la última vez que lo solicitaste.
4. Servidor: Estás de suerte, la versión que tienes en tu cache es la última.
5. Navegador: Genial, entonces no hace falta que me la envíes ya estoy mostrando al usuario la página que tengo cacheada.

Qué métodos de cacheo existen.

Existen tres tipos de mecanismos que permiten gestionar el cacheo de un contenido:

1. Mecanismos por Validación (validation): En este mecanismo el servidor comprueba si la respuesta que mantiene cacheada el navegador sigue siendo válida. Existen dos variantes:

2. Mecanismos por Frescura (freshness): Tanto el método Last-Modified como ETag requieren que el navegador se comunique con el servidor para comprobar la versión del fichero. En los mecanismos por frescura en cambio cada repuesta lleva asociada una fecha de caducidad (como un yogurt) y puede ser utilizada sin necesidad de que el servidor compruebe su validez. Existen dos formas de implementar este mecanismo:

3. Mecanismo por Invalidación: Este mecanismo se deriva de otra petición que pasa por la caché. Por ejemplo, si la url asociada con una respuesta cacheada es solicitada más tarde a través de una petición POST, PUT o DELETE, la respuesta que se encontraba cacheada quedará invalidada. Esto es lo que ocurre por ejemplo cuando intenta navegar hacia atrás en su historial tras haber enviado los datos de un formulario.

Además tenga en cuenta que existen una serie de reglas que también aplican al cacheo de contenidos y deben tenerse en cuenta:

• Bajo determinadas circunstancias, como por ejemplo, cuando un equipo se desconecta de la red, la cache puede servir páginas sin consultar con el servidor de origen.
• Un documento nunca se cachea si la cabecera del documento indica de manera explicita que no es cachee.
• Si se utiliza un protocolo seguro ((HTTPS) la página nunca será cacheada.

Cómo evitar el cacheo de nuestros contenidos

En ocasiones el cacheo de contenidos puede interferir con el correcto funcionamiento de la web y por tanto debemos evitarlo. El funcionamiento de la cache se puede controlar con las siguientes directivas:

• Cache-control: max-age - Especifica el número máximos de segundos en los que el contenido sera considerado como fresco
• Cache-control: s-maxage - Similar a la directiva max-age, pero aplicable solo para caches compartidas (pejm: un proxy).
• Cache-control: public - indica que la versión cacheada puede ser guardada por proxies y otros servidores intermedios para que todo el mundo tenga acceso a ella..
• Cache-control: private - indica que el archivo no es el mismo para usuarios diferentes. De esta manera el archivo puede ser cacheado por el navegador del usuario pero no debe ser cacheado por proxies intermedios.
• Cache-control: no-cache - Significa que el archivo no debe ser cacheado, esto puede ser necesario en casos en los que una misma url pueda devolver diferentes contenidos.
• Cache-control: no-store - Indica al navegador que sólo guarde el documento el tiempo necesario para mostrarlo. Le recomiendo la lectura del siguiente artículo dónde se alerta sobre el peligro de utilizar la directiva no-store en situaciones no adecuadas.
• Cache-control: must-revalidate - Indica a la cache que deben hacer caso a cualquier directiva de cacheo que le indiquemos. Tenga en cuenta que la especificación HTTP permite a las caches atender de manera automática a las peticiones bajo determinadas circustancias. ¨La directiva must-revalidete obliga a la cache a seguir nuestras directivas de manera estricta. La forma de utilizarla es la siguiente:

  <meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">

• Cache-control: proxy-revalidate - Similar a must-revalidate pero sólo aplicable a proxy caches.

Como ve no existe una única forma que indicar que una página no sea cacheada por un navegador. Generalmente se utiliza la siguiente cabecera:

<meta http-equiv="Cache-Control" content="max-age=0, no-cache, no-store, private">
<meta http-equiv="Pragma" content="nocache">

La directiva Pragma tiene el mismo significado que Cache-control: no-cache y se suele incluir para asegurarnos la compatibilidad con versiones anteriores a HTTP/1.0. ( Debe tener en cuenta que alguna de estas directivas sólo funcionan con las navegadores modernos.)

En lugar de utilizar el tag meta también puede crear las cabeceras HTTP para sus documentos con cualquier lenguajes de scripting de servidor: PHP, ASP, .NET, etc. Recuerde que cualquier directivas de cacheo deben incluirse al principio del documento, incluso antes del tag html. Aquí le muestro algunos códigos de ejemplo:

php:

header("Cache-Control:...");
header("Pragma:...");

Cold Fusion

ASP

<% Response.CacheControl="..." %>

ASP. net

Tipo de páginas en función de su cacheabilidad

Una web puede ofrecer tres tipos de contenidos en función de su cacheabilidad.

1. Contenidos estáticos: Son aquellos contenidos que ya existen físicamente en el servidor, tienen un tamaño fijo y una fecha determinada. Una página html, una imagen o un documento pdf son ejemplos de contenidos estáticos. Este tipo de contenidos son firmes candidatos a ser cacheados.
   
2. Contenidos dinámicos: Son contenidos que se crean en el momento en el que se solicitan accediendo, por ejemplo, a una base de datos. Este tipo de páginas son independientes del perfil del usuario que las visita y por tanto son potencialmente cacheables.
3. Contenidos personalizados: Este tipo de contenidos se crean a medida en base a las características de la petición y pueden ser diferentes en función de quién, cuándo, o cómo es solicitada. Por este motivo este tipo de contenidos no son buenos candidatos a ser cacheados, aunque como veremos más adelante hay técnicas que permiten cachearlos de manera parcial o total. El área privada de la web de un banco, o un carrito de la compra son dos ejemplos de páginas personalizadas.

Es muy importante que entendamos qué contenidos pueden y deben cachearse y cuales no. Si no gestionamos eficientemente el cacheo corremos el riesgo de servir a nuestros usuarios un contenido que no está actualizado o por otro lado saturar nuestro servidor con peticiones innecesarias.

Estrategias de cacheo

Para optimizar la eficiencia del cacheo de contenidos tanto en el navegador como en los servidores proxy existen una serie de estrategias que podemos tener en cuenta:

1. Evite utilizar Query String

Utilizar Friendly URLs en lugar de query strings facilita el cacheo de los contenidos. Algunos navegadores y muchos proxies cache no cachean contidos que lleven una query string en la URL.

Recuerde que puede utilizar mod_rewrite en Apache Web Server para implementar friendly urls.

2. Organice eficientemente sus contenidos

Puede organizar sus contenidos en cacheables y no cacheables, ubicándolos en diferentes rutas dentro del servidor.

Por ejemplo es una práctica habitual ubicar los contenidos no cacheables de una web en /cgi-bin/ y configurar el servidor para que informe a los navegadores con las cabeceras HTTP necesarias de que este contenido no sea cacheado.

3. Envíe la cabecera Last-Modified

Incluya en sus documentos la información Last-Modified. De esta manera los navegadores podrán hacer peticiones condicionales del tipo if-Modified-Since (IMS) para que el servidor le entregue el contenido sólo en el caso de que su cache haya caducado.

Para las páginas estáticas no existen ningún problema ya que existen físicamente el el servidor y tienen un time stamp asociado, pero en el caso una página dinámica donde el contenido no existe fisicamente, es la propia aplicación la que debe preguntar si el contenido ha cambiado.

Una gestión eficiente de las solicitudes condicionales tiene una repercusión muy positiva en el ahorro de ancho de banda del servidor web.

Estratégias de cacheo para páginas personalizadas

Aquellas contenidos que se deben mostrar de manera personalizada para cada usuario también pueden ser objeto de cacheo si tenemos en cuenta las siguientes consideraciones:

1. Evite incluir fragmentos dependientes de la sesión HTTP del usuario

Cuando un documento web se crea dinámicamente en el servidor web, evite que alguno de los elementos que componen la página dependa de la sesión HTTP del usuario. De esta manera conseguirá optimizar el cacheo de cada elemento y se podrá integrar más fácilmente en sistemas externos como Akamai que proporcionan gran escalabilidad.

2.Gestione eficiente la información en Cookies en el navegador

Las cookies permiten almacenar de manera local la información personalizable de casa usuario de tal manera que el resto de contenidos de la página pueden ser objeto de cacheo.

Por ejemplo, si queremos mostrar un mensaje de bienvenida personalizado podríamos almacenar este mensaje un una cookie local de tal manera que el resto del contenido pudiera cachearse.

3. Muestre el perfil del usuario en la URL

Podemos recurrir a técnicas de URL rewriting para mostrar en la url elementos que indiquen el país o el tipo de usuario. Por ejemplo:

http://www.hellogoogle.com/es/home-user/welcome/

Luego por técnicas de url rewriting podrían convertirse en una url dinámica del tipo:

http://www.hellogoogle.com/welcome/?country=es&usertype=home-user

Como ya vimos este tipo de friendly urls pueden ser cacheadas por los navegadores de los usuarios.

4. Gestione de manera independiente la información personalizada

Técnicas como AJAX o Adobe Flex nos permiten mostrar al usuario información personalizada mediante peticiones GET o POST una vez cargada la página. Esto nos abre la posibilidad de cachear el documento html sin que ello interfiera con la información que se muestra de manera personalizada a cada usuario.

5. Utilice la cabecera ETAG para gestionar el cacheo de contenidos dinámicos

Como ya vimos anteriormente ETAG (Entity Tag) es un sistema que permite identificar a un contenido de manera unívoca, Los servidores Web pueden realizar validaciones de contenido basándose en esta información al igual que hacen con la información Last-Modified.

Obtener un ETAG a partir del contenido dinámico es sencillo y pemite minimizar el tiempo de respuesta en las revalidaciones de estos contenidos.

Dentro del ciclo de vida de la petición dentro del servidor, tras la generación del contenido, la aplicación puede obtener una hash MD5. La MD5 sería el ETAG que representa a esa petición. Si es igual a la ETAG enviada por el navegador, se indica al usuario final que el contenido no ha cambiado para que la cargue de su cache local (HTTP/1.x 304)::

var contenido = response.buffer
var path = request.header("PATH")
var ETAG = funcion-MD5 (path, contenido) //Obtenemos el ETAG de la petición
var request-ETAG = request.header("if-none-match") //Obtenemos el ETAG del navegador
Si ETAG = request-ETAG Entonces //Comparamos ambos ETAG
response.status = 304 //Si son iguales el contenido no ha variado.
response.buffer = ''
return
Si No
response.addheader("ETAG", ETAG)
Fin Si

Utilizar ETAG junto con las directrices de Cache Cache-Control o Expires, permite ahorrar peticiones innecesarias y ancho de banda de nuestro servidor.

La cache universal: la solución a todos nuestros males

Como hemos podido ver en este artículo de hellogoogle.com la gestión eficiente de la cache es fundamental en el desarrollo y mantenimiento de un Site. Si puliéramos trabajar con una cache nuestra vida sería mucho más sencilla: Por ejemplo, no  haría falta pedir cita con el  médico, éste quedaría cacheado tras la primera visita del día y cada ciudadano tendríamos un médico en cache a nuestra disposición las 24h del día. Tampoco tendríamos que hacer cola en el autobús o en el cine: una vez que hubiera accedido el primer usuario el resto tendría un autobús y un cine cacheado al instante.

Me temo que aún queda mucho tiempo para que la ciencia ponga a nuestra disposición un mundo cacheado en el que todos los seres humanos podamos vivir en paz sin necesidad de competir por un puesto de trabajo, una mujer o un trozo de pastel de chocolate. Mientras tanto seguiremos enfrentándonos a la cruda realidad de un mundo con recursos limitados, guerras, muerte y enfermedad.

¿Quien sabe?, después de todo quiza no sea tan malo tener que esperar un ratito en la cola del dentista, yo al menos, no tengo ninguna prisa.

Artículos relacionados:

1. Tutorial sobre Google Analytics: 3. Etiquetado o Tagging en campañas de Marketing
2. Tutorial sobre Google Analytics: 4. Objetivos, Conversiones, Ruta de redireccionamiento y Funnels
3. Tutorial sobre Google Analytics: 2. La interfaz de Google Analytics

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:

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

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.

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

• name="post"
• title="<valor que queremos enviar>"
• href="<url a la que se enviará la información>"

Valga el siguiente código de ejemplo:

<a href="ejemplo_post.php" name="post" title="Este valor se enviará por post" >Pulsa aquí</a> Para hacer POST.
También puedes <a href="ejemplo_post.php" name="post" title="Este valor también se envía por post" >pulsar aquí</a> para hacer otro POST.
Esto es un <a href="ejemplo_post.php">Esto es un link normal</a>.

Artículos relacionados:

1. Cómo mejorar los formularios HTML con Xhtml, Css y Javascript
2. Ajax zoomy: Un Ajax lightbox para su galería de imágenes
3. Tutorial sobre Google Analytics: 1. Información básica, configuración e instalación

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

• Cómo Incluir un icono en los botones
• Cómo mejorar los botones con css
• Como cambiar el estilo a los botones tipo File con css y javascript
• Cómo hacer un hover "sexy" con css.

Radio Buttons y Checboxes

• Cómo cambiar el aspecto a los checkbox y radio buttons
• Elemento de formulario: Select Area + Checkbox

Mejorar el elemento Input

• Cómo cambiar el aspecto de los elementos input
• Campos input autocompletables con Ajax

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

• Diseño del layout de un formulario con css
• Diseño de forumularios con sss
• Formularios semánticos horizontales
• Diseño de formularios
• Formularios funcionales y bonitos
• Cómo maquetar formularios con css y sin tablas.
• Aplicar estilo a los formularios con CSS
• Aplicar estilo a los campos de formulario

Formularios accesibles

• Formularios crossbrowser en xhtml + css
• Formularios accesibles con css
• Plantillas con CSS para formularioss accesibles
• Formularios accesibles y bonitos
• Cómo mostrar una ayuda sin recurrir a Popups
• Mostrar y ocultar campos no obligatorios de manera accesible

Herramientas para crear formularios

• Icebrrg - Herramienta para construir formularios, encuestas e invitaciones
• Wufoo - Otra herramienta para construir formularios, encuestas e invitaciones
• JotForm - Herramienta online WYSIWYG para crear formularios
• Ccessify - Herramienta para construir formularios basados en CSS

Frameworks

• Dijit- Framework javascript basado en Dojo realmente flexible y potente..
• Framework Jx - Librería JavaScript basada en MooTools para crear interfaces gráficos..

Artículos relacionados:

1. Un emulador de ZX Spectrum en Javascript
2. Javascript no intrusivo, un ejemplo mágico.
3. Cómo enviar información, datos o parámetros con el método POST sin utilizar formulario

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

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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:

1. Cómo mejorar los formularios HTML con Xhtml, Css y Javascript
2. Javascript no intrusivo, un ejemplo mágico.
3. Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página

Éste es el primero de una serie de artículos en los que expondré de manera clara y sencilla todos aquellos puntos que considero clave para implantar, configurar, desarrollar, optimizar y sacar el máximo rendimiento a una tienda on-line.

Una tienda online además además ser una herramienta de monetización, puede y debe ser una importante herramienta de promoción en los buscadores pues permite ofertar a todos nuestros clientes potenciales nuestro catálogo de productos a través de Google.

Como posiblemente ya haya supuesto, hoy en día no es habitual ni práctico acometer un desarrollo de e-commerce desde cero. Existen infinidad de herramientas open-source que nos permiten montar una tienda on-line en poco tiempo y, además, de manera gratuita. Tanto en el caso de que usted mismo se encargue de la implantación de la tienda como en el caso de que haya decidido subcontratar su desarrollo, antes de decidirse por una u otra plataforma es recomendable que conocer los pros y contras de cada uno de ellas.

Lo más importante a la hora de posicionar la tienda es que la plataforma sea Search Engine Friendly es decir: que trabaje con urls amigables, plantillas en base a xhtml y css, imágenes con información textual alternativa, estructura interna de enlaces robusta, etc. Tenga presente que hay otros muchos aspectos que debe tener encuenta como la facilidad de instalación, las opciones de configuración, los sistemas se pago, idiomas y culturas soportadas, documentación y soporte, etc.

A continuación podrá conocer las característica de las principales plataformas de e-commerce open-source:

PrestaShop, la tienda 2.0

Web - Demo - Descargar

• Ofrece múltiples funcionalidades propias de Web 2.0 como Ajax, Xhtml, css, etc.
• Menús y navegación muy accesible.
• Es muy sencillo incorporar nuevos módulos para ampliar la plataforma de pago, de envío, encuestas, etc…
• Funcionamiento y manejo de las plantillas similar Joomla y a WordPress.
• Es multilenguaje, permite definir productos físicos como virtuales (descargas), también podemos cambiarle los temas, y añadir nuestros propios módulos.
• Los pagos se tramitan de manera segura directamente con tu banco pudiendo seleccionar entre los siguientes sistemas de pago: Authorize.net, Tarjeta de Crédito, Contra Reembolso, iPayment, Cheque/Transferencia Bancaria, NOCHEX, PayPal, 2CheckOut, PSiGate, SECPay, Visa Mastercard.
• La instalación y configuración es bastante sencilla, pero la parte de administración puede llegar a ser un poco confusa.

OpenCart, una solución completa para su negocio online

Web - Demo - Descargar

• Es un carrito de la compra open source implementado en PHP.
• A pesar de ser un sistema bastante reciente cuenta ya con el soporte de una comunidad importante.
• Ofrece una interfaz intuitiva y fácil de utilizar.
• Optimizado para buscadores.
• Es Multilenguaje.
• Ofrece Múltiples sistemas de cobro como paypal, Money Order, etc...
• Gestión y envío de newsletters.
• Ofrece diversos reportes.
• Una característica muy interesante es que los clientes pueden escribir su opinión sobre los productos.

VirtueMart, una tienda para Mambo y Joomla

Web - Demo - Descargar

• VirtueMart es una solución de E-Commerce Open Source que se integra con los gestores de contenido Joomla y Mambo.
• Desarrollada integramente en PHP/MySQL.
• Es fácil de instalar, configurar y mantener.(Se instala como componente de Joomla)
• Puede ser utilizado sólo como un catálogo y desactivar las funciones de tienda en línea.
• Los productos pueden asignarse a múltiples categorías.
• Productos y Categorías ilimitadas
• Posibilidad de vender productos descargables (Mp3, Películas, Videos, etc…)
• Permite aplicar descuentos por productos
• Gestión de inventario.
• Permite administrar tarifas de envios.
• Ofrece múltiples sistemas de pago: 2Checkout, PayPal (IPN), Payflow Pro, Authorize.net(AIM), eCheck, etc.

Magento, una solución e-commerce Flexible y Potente

Web - Demo - Descargar

• Solución open-source desarrollado en PHP 5 y MySQL.
• Es muy flexible y permite múltiples configuraciones.
• Cuenta con el soporte de una gran comunidad de usuarios y por tanto dispone de mucha documentación y recursos.
• Arquitectura escalar, puede ampliarse fácilmente con aplicaciones de terceros.
• Optimizado para buscadores incluyendo friendly URLs.
• Diseño completamente configurable a través de plantillas.
• Solución Enfocada al Marketing.
• Gestión de roles y usuarios.
• Ofrece Web Services API para integrarse con aplicaciones third-party.
• Permite definir reglas para aplicar los impuestos.
• Multilenguaje
• Incorpora un gestor de contenido CMS.
• El sistema es muy amigable tanto en la parte front como en la administración.
• Adaptado a telefonía móvil (Mobile Commerce).

CubeCart, la elección de más de un millón de usuarios

Web - Demo - Descargar

• Es una solución muy popular.
• La versión V3 es gratuita aunque es necesario incluir un copyright en el pie de la página.
• La versión de pago V4 incluye funcionalidades extra.
• Existe una gran colección de plugins con nuevas funcionalidades.
• Incluye un gran número de formas de pago y envío.
• Existe mucha documentación y foros de debate.

AgoraCart, una solución al alcance de todos

Web - Demo - Descargar

• Es un carrito de la compra muy popular desarrollado en Perl/MySQL.
• Dispone de un gestor de css para cambiar el aspecto de la tienda fácilmente.
• Gran número de opciones para configurar los productos.
• Gestión de impuestos.
• Ofrece multitud de sustemas de envío y pago.
• Permite configurar desde la plantilla base de la tienda como un complejo diseño visual
• Permite modificaciones programáticas.

Zen Cart, la tienda más sencilla de instalar y configurar

Web - Demo - Descargar

• Es un carrito de la compra open source, gratuito, muy amigable.
• Está desarrollado por un grupo de propietarios de tiendas, programadores y diseñadores.
• Orientado al vendedor y al comprador, no al desarrollador.
• Gestión de descuentos y cupones.
• Es muy sencillo de instalar
• Múltiples ventas y descuentos
• Sistema de templates XHTML
• Incluye un administrador de banners.
• Múltiples opciones de pago y envio.
• Manejo de boletines

OsCommerce, la plataforma más popular

Web - Demo - Descargar

• Este fue uno de los primeros sistemas para tiendas Open Source (nace en el año 2000), esta desarrollando en PHP y bases de datos MySQL.
• Incluye un gran número de funcionalidades
• Es muy sencillo de instalar y configurar.
• Está respaldado por una gran comunidad de usuarios.
• Soporta múltiples accesos concurrentes.
• Ofrece a los usuarios la posibilidad de imprimir sus facturas y pedidos.
• Permite realizar copias de seguridad de las bases de datos.
• El principal problema es que las plantillas están basadas en tablas.

Digistore, una evolución de OsCommerce

Web - Demo - Descargar

• Es una tienda open source basada en el motor de osCommerce.
• Incluye mejoras tanto en la administración como en el interfaz público.
• Se configura y administra como un CMS, por lo que no requiere de conocimientos de html ni programación.
• Permite diferentes formas de pago: 2checkout, Paystation, DPS, Paypal, Authorize.net

StoreSprite, sencillo y funcional

Web - Demo - Descargar

• Carrito de la compra desarrollado en PHP/MySQL.
• La versión gratuita nos obliga a incluir una nota legal en algún lugar de la página.
• Ofrece un gran número de opciones como cálculo de impuestos, cálculo automático de envíos, valoración de clientes, y reviews de los productos.
• Tiene la ventaja de ser muy fácil de instalar y configurar.

Fat.Free.Cart, tan sencillo como copiar y pegar

Web - Demo - Código

• FatFreeCart es la versión gratuita del sistema E-junkie.
• Se puede integrar en tu sitio web o blog.
• Tienda copy-paste: No requiere ningún registro, simplemente es necesario copiar en nuestra web el código que nos proporcionan..
• Trabaja con dos formas de pago: Paypal y Google Checkout
• Soporta diversas clases de productos, envíos y tarifas de impuestos.

SimpleCart, su tienda en 5 minutos

Web - Demo - Código

• Es un carrito de la compra realmente ligero (10,5kb) , sencillo y flexible.
• Es el sistema idóneo cuando sólo queremos poner a la venta un pequeño catálogo de productos de manera rápida.
• Está integramente implementado en javascript.
• Los pagos se gestionan con Paypal.
• Utiliza cookies para gestionar la persistencia de los elementos del carrito.
• No utiliza ningún tipo de bases de datos.
• Su instalación y configuración es realmente sencilla, simplemente es necesario tener un conocimiento básico de html.
• Es posible ampliar el sistema para que utilice bases de datos y ofrezca funcionalidades extra.

DashCommerce, una tienda OpenSource en ASP .NET

Web - Demo - Descargar

• Es una tienda Open Source desarrollada en ASP.NET
• Es una solución bastante flexible y robusta.
• Cuenta con el respaldo y soporte de una comunidad open source / .NET
• Incluye todas las funcionalidades que pueden pedírsele a una solución e-commerce: Catálogo de productos, carrito de la compra, gestión de pedidos,múltiples formas de pago, etc.
• Puede ver todas sus características en la siguiente tabla.

FreeWay, la solución perfecta para vender entradas

Web - Demo - Descargar

• Plataforma de e-commerce Open Source.
• Permite la integración con Joomla.
• Múltiples funcionalidades como la configuración por descuentos.
• Es una solución perfecta a la hora de vender entradas para eventos, servicios y suscripciones.

Oxid, la solución para B2C y B2B

Web - Demo - Descargar

• Solución idónea para B2C y B2B.
• Optimizado para buscadores: Friendly urls, titulos descriptivos, tags semánticos, etc.
• Ofrece varias herramientas de marketing integradas.
• Administración sencilla y amigable.
• Existen varias versiones, las más completas son de pago.

WordPress e-Commerce Plugin, una tienda para su blog

Web - Demo - Descargar V3.6.8

• Es una solución robusta y contrastada..
• Se instala como un plugin de WordPress.
• Redes Sociales: los productos pueden se importados en FaceBook MarketPlace y Google Base.
• Puede configurarse el aspecto en base a css y templates.
• Funcionalidad share this, para compartir los contenidos en redes sociales y bookmarks.
• Integrado con Google Checkout, Paypal, Authorize.net, Payment Express, y otras formas de pago seguro.
• Cuenta con el respaldo y soporte de una gran comunidad.

Artículos relacionados:

1. Comparativa de Foros Open Source: Qué foro elegir
2. Cómo elegir un nombre de dominio: 25 consejos
3. Ajax zoomy: Un Ajax lightbox para su galería de imágenes

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:

1. Un emulador de ZX Spectrum en Javascript
2. Cómo mejorar los formularios HTML con Xhtml, Css y Javascript
3. Ajax zoomy: Un Ajax lightbox para su galería de imágenes