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

Ajax lightbox para su galería de imágenes

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.

Un emulador de ZX Spectrum en Javascript

Un emulador de ZX Spectrum en Javascript

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 .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 1×1, 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.

Desarrollar y posicionar una tienda web: 1. Elegir la plataforma de e-commerce

Elegir la plataforma de e-commerce

É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

e-commerce

WebDemoDescargar

  • 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

Sistema Para Tiendas En Linea Gratuitos

WebDemoDescargar

  • 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

Sistema Para Carrito de Compras Gratis

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

e-commerce

WebDemoDescargar

  • 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

Programas Para Tiendas En Linea

WebDemoCó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

simpleCart  PayPal

WebDemoCó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

simpleCart  PayPal

WebDemoDescargar

  • 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

simpleCart  PayPal

WebDemoDescargar

  • 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

simpleCart  PayPal

WebDemoDescargar

  • 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

simpleCart  PayPal

WebDemoDescargar 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.

Pérdida de posiciones en Google por el efecto Dewey

Perdida de posiciones en Google

Lo cierto es que no suelo prestar demasiada atención a las fluctuaciones de rakings que se producen en Google a diario, sin embargo desde hace algún tiempo vengo recibiendo en HelloGoogle varias preguntas todas ellas relacionadas con dramáticas pérdidas de posiciones y visitas que no responden a ninguna explicación racional. Este problema generalizado me impulsó a investigar el suceso y pude comprobar que no se trata de un fenómeno aislado y es que muchos webmasters y SEOs vienen alertando desde comienzos de año de este mismo problema.

En muchos de los casos la pérdida de posiciones viene originada por una nueva actualización del algoritmo de ordenación de Google. Al contrario que los últimos cambios que no serán recordados con un nombre determinado, esta última actualización, como si de un huracán se tratase, ha sido bautizada con el nombre de "Dewey". Este nombre se menciona por primera vez en el blog de Matt Cutt´s como palabra clave para hacer referencia a los nuevos cambios que presentaría de manera inminente el algoritmo de ordenación de Google. Esta es la información que apareció al respecto:

Hola a todos, le pedí a un puñado de gente que mirara este asunto y no se apreciaban grandes diferencias en los rankings de los datacenters. El asunto que se trata en este hilo es que no se pueden hacer consultas concretas a Google. Si alguien quiere citar una búsqueda en la que haya grandes diferencias, puede enviarlas a Google por los cauces habituales. Yo voy a elegir un nombre al azar que me resulta particularmente bonito para que pueda localizar los reportes. La palabra elegida es "Dewey". Así que si quiere mencionar una búsqueda en la que piensa que los resultados varían de manera sustancial entre un datacenter y otro, que utilice el formulario de notificación de Spam en http://www.google.com/contact/spamreport.html y que se asegúre de incluir la palabra "Dewey" en el campo "Detalles adicionales". También puede notificar las diferencias de cualquier otra forma: en su blog, en el grupo de ayuda para webmasters de Google, o cualquier otra forma en la que quiera notificar una búsqueda que le parece diferente.

Las normas habituales siguen vigentes, probablemente no se te responda personalmente, pero intentaré que alguien se ocupe de chequear todos los reportes que se envíen. No debería haber mucha diferencia entre los diferentes datacenters, así que tengo curiosidad por averiguar para que queries está viendo la gente diferentes resultados.

Si usted es uno de esos webmasters que ha visto como el trabajo de varios años se iba al garete de un plumazo, le invito a leer este artículo donde intentaré dar una explicación y una solución a este problema con nombre de mujer.

Los efectos de Dewey

Muchos SEOs e internautas han podido sentir en sus propias carnes los efectos de Dewey, tan sólo hicieron falta hacer unas cuantas búsquedas para darse cuenta de que algo extraño ocurría con sus páginas que habían perdido su posicionamiento de un porrazo. Los primeros casos reportados se remontan a mediados de Febrero de 2008 y a falta de una confirmación oficial de Google, que mucho nos tememos no llegará, tendremos que conformarnos con analizar los efectos sufridos por la comunidad web. Usted mismo puede comprobar las posiciones que han cambiado consultando en estas dos IPs: 72.14.207.104 y 64.233.183.104.

1. Muchas webs antiguas han desaparecido de las primeras posiciones

Una de las primeras señales de alarma ocurrió con un buen montón de webs antiguas y de gran calidad y tráfico habían desaparecido de las primeras posiciones para perderse en la página 10 ó 20 de los resultados de búsqueda. Ni que decir tiene que este suceso hizo que muchos webmaster entraran en estado de shock, preguntándose una y otra vez, qué narices habían hecho mal.

2. Resultado de búsquedas menos relevantes

Muchos internautas se han quejado de que los resultados de las búsquedas han perdido relevancia, como si Google se hubiera vuelto un poco "torpe" de pronto, mostrando en las primeras posiciones páginas que antes se encontraban perdidas en su índice.

3. Las páginas modernas tardan mucho tiempo en cargar

La primera sensación es pensar que hay algún problema con nuestra conexión a Internet, sin embargo sólo ocurría con las páginas devueltas por Google, con el resto de buscadores las páginas cargaban con total normalidad. Muchos internautas han coincidido que la lentitud de carga sólo ocurría con las webs más modernas.

4. Problemas con la información de la caché

Muchos SEOs han podido comprobar que la información almacenada en la caché de Google no se mostraba de manera correcta.

Qué puedo hacer después de Dewey

Así pues el nuevo algoritmo llamado "Dewey" había originado un verdadero problema a muchos SEOs y desarrolladores webs, que había visto caer el tráfico de sus webs de manera estrepitosa. Muchos negocios webs habían visto caer sus visitas e ingresos hasta en un 75%.

Ahora la única preocupación de los damnificados por "Dewey" es retornar lo antes posible y de manera definitiva a las primeras posiciones de la página de resultados de búsqueda de Google.

Como ocurre con todas las actualizaciones de Google, una vez que se ponen en funcionamiento se comienza a generar un montón de rumores sobre qué elementos de la web benefician ahora el posicionamiento y cuáles lo penalizan. Aún es pronto para saber de manera exacta qué funciona y qué no funciona, en cualquier caso puede tener en cuanta las siguientes recomendaciones:

1. Manténgase fiel a una estrategia de posicionamiento White Hat

Incluso en el caso de que ya viniera siguiendo una estrategia de posicionamiento White Hat antes de perder las posiciones, es importante que se mantenga firme en su propósito. Tenga en cuenta que con independencia de las recomendaciones que pueda oír en foros de expertos, las técnicas de posicionamiento White Hat son el mejor camino para desarrollar y promocionar un website.

2. Seo CopyRight

Aunque aún es pronto para establecer unas directrices exactas de cómo redactar el mejor contenido para Google, sin embargo está fuera de toda discusión que la mejor opción sigue siendo crear un contenido de mucha calidad, original y muy relevante.

3. Consiga enlaces de calidad

Existe una diferencia sustancial entre pagar por publicidad y pagar por enlaces: En primer lugar la publicidad en forma de banners o adwords es una importante herramienta de marketing que puede generar tráfico de calidad. Sin embargo la compra de enlaces, o peor aún, de link farms con la intención de mejorar el pagerank y el posicionamiento es una práctica altamente desaconsejada que puede conllevar serios problemas si no se maneja con cautela.

4. Contenido Multimedia

Las webs mas modernas se caracterizan por ofrecer a sus visitante contenido multimedia: imágenes, vídeos YouTube, etc. Por un lado la información multimedia enriquece un webSite y por el otro permite canalizar visitantes desde otras fuentes como pude ser YouTube u otros portales especializados en vídeo. Es importante que optimice su contenido multimedia para que los buscadores puedan acceder a él e indexarlo.

5. Facilite la sindicación de sus contenidos y fidelice visitantes

No cabe duda que los buscadores son una importante fuente de visitantes. Sin embargo una web cuyo tráfico dependa casi en tu totalidad de los buscadores, esta completamente en manos de los caprichos del destino. Un cambio en el algoritmo de ordenación puede llevarse por delante todo nuestro trabajo de posicionamiento y dejar nuestras visitas a cero. Por este motivo es importante sacar partido a los periodos de mucho tráfico para fidelizar al mayor número de usuarios, de tal manera que la próxima vez no accedan desde Google si no escribiendo la url, a través de su sindicador o desde su carpeta de favoritos..

6. Reporte su problema a Google

Como ya comentamos antes el propio Matt Cutt invita a todos los que hayan sufrido cambios drásticos en el posicionamiento de sus webs a reportarlo a Google a través de los cauces habituales. Para ello detalle su problema en el formulario de notificación de Spam de Google indicando la palabra "Dewey" en el campo de detalles adicionales. No se le asegura nada, pero al menos tiene una puerta donde llamar.

Teorías que intentan explicar las Subidas y Bajadas

Lo cierto es que aún se están produciendo bailes en las posiciones de las webs para búsquedas de términos muy competitivos. Mientras que la mayoría de los SEOs todavía se preguntan en qué quedará todo esto, surgen diferentes teorías que intentan dar una explicación racional al fenómeno "Dewey". En primer lugar están las que puntan a que se trata de un intento de Google por recalibrar Adsense, también hay expertos que sugieren que Google ha puesto en práctica algunas funcionalidades que son parte de la tecnología que conformará su nueva estrategia global. En cualquier caso aún es muy pronto para saber a ciencia cierta que sorpresas nos deparará Google en los próximos años.

Lo que es indudable es que el modelo de negocio de Google es la venta de anuncios patrocinados así que no espere que le eche una mano en su negocio on-line. Si usted perdió de un plumazo todo el posicionamiento de su web, significa que alguien también subió de un porrazo sus posiciones, es como la rueda de la vida que nunca deja de girar.

Por último es importante que no se deje llevar por la desesperación cuando sufra una perdida drástica de posiciones. Si venía realizando un trabajo de posicionamiento serio y bien fundado, manténgase fiel a él y confíe en que pronto recuperará la normalidad. Google no se mueve por impulsos, todos sus cambios responden a una estudiada estrategia de desarrollo y siempre se ha mantenido fiel a su filosofía de dejar en manos de la comunidad web el bastón de mando. Esto no creo que cambie nunca.

¿Es mi Web moderna? Calcule la edad de su web

Web age quiz

¿Se ha preguntado alguna vez si su web se ha hecho mayor, si ha llegado el momento de hacerle un pequeño o gran re-styling? No cabe duda que de la misma forma que una web antigua es una pésima tarjeta de visita para su empresa en Internet, una web moderna, fresca, y eficiente, refuerza de manera importante cualquier acción que su empresa necesite realizar.

Si necesita saber si ha llegado el momento de invertir su dinero en una nueva web, le invito a que realice este sencillo test en el que se le presentarán una serie de preguntas concretas sobre su página web actual. Marque sólo aquellas respuestas que se ajustan a su web actual, si no entiende la pregunta déjela sin marcar

Al final del test se le presentará la edad estimada de su web. Las preguntas se generan de manera aleatoria y puede realizar el test varias veces y comparar resultados

¿Está dispuesto a enfrentarse a la realidad?

>>>Comenzar Quizz!

Posicionar una web en Flash: Cómo indexa Google los contenidos Flash

Como posicionar una pagina en flash

Si algo hemos aprendido gracias a Hellogoogle es que cuando se plantea el desarrollo de un sitio web, se tiene que poner una especial atención al posicionamiento de las páginas de dicho sitio. Pero cuando nos enfrentamos a un desarrollo web con tecnología Flash podemos encontrarnos con una serie de dificultades añadidas a la hora de conseguirlo.

Recuerdo que hace años, cuando empezaba en este mundillo de los proyectos web, más de un cliente acudía a nosotros con una fijación casi obsesiva por tener la web de su negocio desarrollada en Flash:

– Es que he visto que a un amigo le han hecho una web en Flash, super-chula, con unas animaciones… y unos efectos… y tiene hasta música!!!

– Ya, ya. Pero ten en cuenta que no es oro todo lo que reluce y que tener una web en Flash tiene sus pros pero también bastantes contras (… y bla bla bla). Yo te recomendaría que en vez de… (y te interrumpían)

– Bua! No me importa, lo que quiero es que cuando la gente entre en mi página lo que vea les deje con la boca abierta!

– Pero…

– Que te calles Karmele! Yo pago, yo sé lo que quiero.

Y al cabo de unos meses, recibes una llamada:

– ¿Pero qué le pasa a nuestra web? Si en los buscadores no aparece cuando intento buscar nuestros productos!!

– Es que la web está desarrollada en Flash y sus contenidos no los indexan los buscadores… Ya lo comentamos, ¿recuerdas?

– Sí, bueno, pero qué podemos hacer ahora?

– Los contenidos principales tendremos que "sacarlos" de Flash.

Es decir: nuevo desarrollo y un nuevo desembolso.

Históricamente, Flash ha sido entendido como la posibilidad de hacer "algo bonito y espectacular", pero que a la hora de la verdad, nos encontrábamos con una tecnología que los buscadores no podían interpretar.

Flash y Google: Matrimonio de conveniencia

Pero Google se puso las pilas y desde hace ya unos años, está indexando contenidos desarrollados en Flash, aunque con resultados no demasiado acertados.

Para que podáis haceros una idea, los términos indexados con mayor relevancia y que dan título y descripción a una web en la página de resultados son en su mayoría "Loading" y "Cargando… %".

Echemos un vistazo a los resultados que ofrece esta búsqueda:
http://www.google.es/search?q=cargando+filetype%3Aswf

Y este mismo año, Google a través de su Webmaster Central Blog, anuncia a bombo y platillo que, ¡ahora sí!, que ya tienen un algoritmo mejorado para la indexación de Flash.

Lo que vienen a decirnos es lo siguiente:

  • Google tiene un algoritmo mejorado que explora los archivos Flash "como si fuera un usuario", pinchando los botones que encuentra en su camino y recordando todo el contenido textual que va apareciendo.
  • Es capaz de indexar estos términos encontrados y detecta los links (incluso identifica su anchor text). No es capaz de extraer el texto de imágenes.
  • Lo más positivo que tiene esta mejora, es precísamente eso, que es una mejora del algoritmo. Y por tanto, no requiere ninguna acción por parte del desarrollador.

En principio, puede pensarse, ¡vaya maravilla! Sin embargo, cuando se analiza más a fondo se advierten una serie de limitaciones:

  • No se establece ninguna relevancia para los términos encontrados. Simplemente se tiene en cuenta el orden en el que aparecen en el propio Flash. De ahí, el ejemplo que se comentaba más arriba acerca de las webs cuyo título acaba apareciendo como "Cargando…".
  • La indexación no funcionará si el Flash se carga en la página mediante javascript (utilizando librerías como SWFObject). Hay que tener en cuenta que ésta es la opción más extendida para evitar que en Internet Explorer aparezca el dichoso recuadro "Haga clic para activar y usar este control". Aunque parece que Google "está trabajando en ello" y está buscando la manera de que funcione con SWFObject.
  • Si se carga un archivo XML desde el Flash (algo más que habitual en proyectos que impliquen, por ejemplo, localización de los contenidos), se indexará este archivo por separado, y no como parte del Flash. Y si en la página de resultados aparece un XML, que en definitiva no será más que un montón de texto sin formato, pues como que no tendrá la misma gracia que si apareciese nuestra web tal cual es.
  • Igualmente, cuando tenemos archivos Flash que cargan otros archivos Flash "secundarios", se indexará cada archivo por separado.

Digamos que para simples animaciones tipo "Intro" en las que se vea aparecer el nombre de nuestro negocio y se pueda pinchar sobre él para acceder a los contenidos de nuestra web, tendremos algo que hacer. Aunque, por el momento, para proyectos más complejos, quedan demasiados flecos sueltos… (¡Lástima!)

En este artículo vamos a tratar de comprobar con ejemplos prácticos hasta qué punto han mejorado y si realmente han dado un paso adelante (one step ahead) o no. Se tratará de unas prácticas con las que iremos componiendo unas pautas a seguir a la hora de posicionar una web que utilice Flash.

Ejemplo práctico 1

Para empezar, veamos un primer ejemplo. Se trata de una simple página HTML que tiene embebida una película Flash con texto plano y links. Los contenidos se cargan tanto de manera estática como dinámica a través de ActionScript. También podremos comprobar si las opciones para incluir Título y Descripción en Flash (a partir de la versión 8 de Flash) valen para algo.

Demo: Ejemplo Indexar Flash 1

Ver código fuente

Vamos a esperar a que Google indexe la página y en breve comentaremos los resultados.

Resultados del ejemplo práctico 1:

Cómo posicionar una pagina en flash, resultados del ejercicio 1

Después de 2 semanas de espera ya tenemos el ejemplo1 indexado, lo que nos permite sacar nuestras primeras conclusiones:

  1. Se indexa por un lado la página que muestra el Flash y por otro el propio archivo Flash. El contenido indexado no se asocia a la url del html. Es decir, que tendremos que asignar contenidos alternativos en la propia página, si queremos que el buscador sea capaz de encontrar "fuera" del archivo Flash los mismos términos que puede encontrar "dentro" él.
  2. La opción para asociar un Título y Descripción desde las Propiedades del documento Flash, no aporta nada.
  3. Tanto los contenidos en cajas de Texto estático como los contenidos en cajas de Texto dinámico, se indexan perfectamente. Aplica a cualquier texto introducido por programación (ActionScript) en el propio archivo Flash, no a los contenidos que se carguen, por ejemplo, desde archivos XML externos.
  4. En cuanto a los links, resultados dispares. Por un lado, muy bien, ya que para un link colocado en un botón mediante la instrucción getURL() el buscador entiende perfectamente ese link, e incluso indexa la página a la que enlaza. Por otro lado, si la url del link viene indicada en una variable, el link se pierde.

    Otro problema lo tenemos en el anchor text, ya que el único caso en que lo está reconociendo es cuando tenemos un link directamente sobre alguna palabra de una caja de texto. En el caso de botones nos podemos olvidar del anchor text.

  5. Otra cuestión muy a tener en cuenta es el de utilizar las denominadas fuentes del dispositivo, ya que en caso contrario los términos que indexa google dejan de ser correctos. Se muestran los tags html que dan forma y estilo a cada contenido.

Javascript no intrusivo, un ejemplo mágico.

Javascript no intrusivo, un ejemplo mágico.

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.

10 RAZONES para NO contratar los servicios de un SEO

Seo Guru

1. En primer lugar, NO contrate los servicios de un SEO mientras no sea capaz de responder usted mismo a estas preguntas:

  • ¿Por qué quiero mejorar el posicionamiento de mi web?
  • ¿Cómo se posiciona una web en Google?
  • ¿Cuanto tiempo requiere una campaña de posicionamiento?
  • ¿Cuanto dinero me puede costar y hasta cuando tendré que seguir pagando?
  • ¿A dónde ira destinado mi dinero?
  • ¿Cuanto tiempo se mantienen las posiciones alcanzadas?
  • ¿Qué beneficios me aportará posicionar mi web?

2. En segundo lugar, ANTES de contratar los servicios de un seo solicite que le den una respuesta clara a las siguientes preguntas:

  • ¿Podrían mostrarme ejemplos de su trabajo anterior y el grado de satisfacción de sus clientes?
  • ¿Conocen y siguen las directrices de Google para Webmasters?
  • ¿Ofrecen algún servicio de marketing online que complemente el posicionamiento orgánico?
  • ¿Qué tipo de resultados puedo esperar en cuanto a incremento de tráfico y ventas, y en cuánto tiempo?
  • ¿Cómo se mide el éxito de su trabajo?
  • ¿Cuánta experiencia tienen en el sector relacionado con mi empresa?
  • ¿Han trabajado antes en el país y ciudad de mi empresa?
  • ¿Cuál es su experiencia en la optimización de webs internacionales?
  • ¿Cuáles son las técnicas de optimización que utilizan?
  • ¿Cuántos años de experiencia tienen en este negocio?
  • ¿Cómo nos comunicaríamos durante y después del desarrollo?
  • ¿Sabré en todo momento de todos los cambios aplicados a mi web los motivos por los que se hicieron?
  • ¿Cúal es la forma de pago?

3. El trabajo necesario para realizar una campaña de posicionamiento en buscadores que incremente de manera relevante el tráfico de clientes potenciales supone necesariamente dinero en ocasiones MUCHO DINERO. Es necesario analizar su web, analizar a la competencia y tomar una serie de acciones tanto a nivel orgánico en su web, como de e-marketing.

4. Una campaña de posicionamiento en buscadores requiere de un trabajo CONTINUO durante TODA LA VIDA de una web. Si su intención era alcanzar unas buenas posiciones y olvidarse de todo, siento haberle defraudado.

5. El posicionamiento de la web no debe realizarse por una ÚNICA PERSONA, todos los participantes webmasters, editores, desarrolladores deben participar.

6. El posicionamiento de una web no tiene SECRETOS, en Internet encontrará toda la información que puede necesitar. El SEO no suele ser una persona con un perfil técnico destacado en desarrollo web.

7. El posicionamiento de una web no es un producto que pueda venderse en UN PAQUETE, no es un servicio que pueda comprarse durante un més y luego prescindir de él. Si recurre a un SEO quedará ATADO a él durante el resto de la vida de la web.

8. Posicionar una web en ocasiones puede requerir DESARROLLARLA de nuevo desde 0. En este caso no necesita de un SEO, si no de una empresa de desarrollo web.

9. Conseguir un buen posicionamiento NO conllevará siempre un incremento del TRÁFICO, ni aumenta necesariamente las VENTAS on-line ni las conversiones a CLIENTES.

10. Un SEO barato, sólo puede recurrir a trucos (que pueden conllevar una penalización) para posicionar mi web:

  • Alta automática en directorios y buscadores falsos, spyware o scumware.
  • Ofrece un posicionamiento long-tail: frases con palabras clave extrañas y largas, poco competitivas y fácilmente posicionables.
  • Incluye enlaces en webs de otros clientes o en páginas puerta cuya temática no tiene relación alguna..
  • Creación de páginas puerta donde se repiten indiscriminadamente palabras clave.
  • Creación de dominios sombra que redirigen a los usuarios hacia una página alternativa mediante redireccionamientos engañosos. Además estos dominios suelen ser contratados al nombre del SEO teniendo control absoluto de ellos en un futuro.

Y sobre todo recuerde que nadie puede GARANTIZARLE una posición en Google.