Como posicionar un blog de Blogger Blogspot

Como posicionar un blog de Blogger Blogspot

La estrategia para posicionar un blog no es muy diferente a la que podríamos utilizar en cualquier otro tipo de web: optimización de los títulos, estructura interna de los documentos, backlinks, seocopyrighting, etc. Sin embargo los pasos y las técnicas a seguir pueden variar en función de la plataforma de gestión de blogs que utilicemos Blogger, WordPress, Community Server, cada sistema tiene sus propias características, limitaciones e implicaciones técnicas.

En el siguiente artículo veremos cómo puede optimizar su blog sobre Blogger para posicionar sus mejores posts en Google e incrementar el tráfico proveniente de buscadores de manera rápida y sencilla.

1. Conozca la naturaleza de Blogger

Lo primero que debe saber es que Blogger es un servicio gratuito de Google, desde este momento sabe que Google conoce absolutamente todo sobre su blog. Esto puede ser bueno y malo, según se mire.

Contrariamente a lo que se puede pensar, Google no otorga ningún tipo de privilegio a los blogs alojados en Blogger.

Blogger nos permite crear un blog de manera gratuita.

Presenta un interfaz muy sencillo que permite montar en pocos minutos un blog totalmente operativo sin necesidad de tener ningún conocimiento de html, programación o blogging. Por otro lado permite cierta flexibilidad a la hora de codificar html directamente.

Ofrece funcionalidades como configuración online, un editor wysiwyg para escribir los artículos, gestión de recursos por FTP, Site Feeds, etc.

Blogger puede personalizarse con plantillas prediseñadas para cambiar el aspecto del blog, y también tenemos acceso a los estilos CSS para modificar a nuestro antojo el diseño.

Permite la integración de herramientas de terceros para incluir funcionalidades extras (widgets) como nuevos sistemas de comentarios, track-backs, contadores de visitas, sindicación RSS para otras plataformas, etc.

2. Elija un nombre acertado para su blog

Blogger ofrece a sus usuarios la libertad de elegir un nombre de subdominio (siempre que el nombre esté libre) en el que alojar su blog.

<nombe de su blog>.blogspot.com

Puede elegir dos formatos de dominio (o mejor dicho subdominio) para su blog:

  1. http://<nombre de su blog>.blogspot.com
  2. http://www.<nombre de su blog>.blogspot.com

Aunque no tiene una relación directa con el posicionamiento, la elección de un nombre para su blog es realmente importante y debe acometerlo teniendo en cuenta los mismos aspectos que valoraría a la hora de elegir un nombre de dominio.

  • No elija el nombre de su blog en función de los keywords más relevantes relacionados con sus búsquedas. Escape como de la peste de nombres del tipo: los-mejores-bares-de-copas-de-madrid.blogspot.com
  • Busque lo sencillo, lo corto, lo intuitivo y lo original, pejm: copeando.blogspot.com
  • Recuerde que el nombre de su blog no beneficia su posicionamiento para búsquedas competitivas pero puede perjudicar su imagen.

3. Optimice los títulos y urls de sus artículos

Tanto el título general del blog, como cada uno de los títulos particulares de los artículos tienen mucha importancia en el proceso de posicionamiento del blog.

El título del blog debe pensarse bien para que refleje de manera concreta, inequívoca y escueta el cometido principal del blog.

Cada post debe identificarse de manera única con un título que lo describa, además debe intentar incluir de manera natural los keywords más relevantes con las bus quedas que puedan realizar nuestros visitantes.

Existen herramientas para conocer estos keywords:

Por defecto Blogger muestra el título del blog antes del título de cada Post:

  • <Titulo del blog>: <Título del post>

Si elegimos un título demasiado largo para nuestro blog, los títulos de los posts pueden verse relegados a un segundo lugar.

Recuerde que cuanto más a la izquierda se encuentra una palabra en el título, mayor fuerza de posicionamiento logra.

Por este motivo es recomendable cambiar esta estructura, mostrando en primer lugar el título del post, para ello:

  1. En el panel de control de Blogger, acuda a la pestaña Diseño y elija la opción Edición HTML.
  2. Busca el código correspondiente a los títulos:

    <title><data:blog.pageTitle/></title>
  3. Sustituya ese código por el siguiente::
    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> - <data:blog.title/></title> <b:else/> <title>
    <data:blog.pageTitle/></title> </b:if>

De esta manera conseguiremos que los títulos sigan el patrón idóneo para los buscadores: “Título del artículo – Nombre del blog”.

Para profundizar en la lectura sobre optimización de títulos, le recomiendo la lectura del siguiente artículo de HelloGoogle sobre cómo optimizar los títulos de una página web.

4. Cuide la Meta-información en cada post

Aunque la relevancia de la meta información de cara al posicionamiento de una página es bastante discutible, no debe pasarla por alto. Durante el proceso de búsqueda Google utiliza el contenido del meta Description para mostrar la descripción del contenido de una página en su página de resultados de búsquedas SERP.

Incluir en Blogger un Meta tag específico para cada artículo es un poco engorroso pues es necesario modificar plantilla general e incluir la meta-información cada vez que escribamos un artículo

  • En la pestaña Diseño vaya a la opción Edición HTML:
  • Justo debajo del código correspondiente a los títulos añada:
    <!-- Metatags de la página principal -->
    <b:if cond='data:blog.pageType == "index"'>
    <meta content='<keywords para la home del blog>' name='keywords'/>
    <meta content='<descripción para la home del blog>' name='description'/> </b:if>

    <!-- Metatags de cada página de etiquetas -->
    <b:if cond='"<url del artículo 1> " == data:blog.url'>
    <meta content='<keywords para el artículo 1 >' name='keywords'/>
    <meta content='<descripción para el artículo 1 >' name='description'/> </b:if>

    <b:if cond='"<url del artículo 2 > " == data:blog.url'>
    <meta content='<keywords para el artículo 2 >' name='keywords'/>
    <meta content='<descripción para el artículo 2 >' name='description'/> </b:if>


    ….

5. Optimice las imágenes para los buscadores

Los motores de búsqueda ignoran las imágenes de una web a menos que incluyan una información textual en los atributos Alt y Title. En este caso no sólo no las ignoran si no que su información es tomada con especial relevancia a la hora de indexar y posicionar la página.

Nota: Mientras que el atributo Alt debe incluirse siempre para describir las imagenes la utilización del atributo Title queda a la elección del usuario. Sin embargo debe saber que la inclusión de este último es necesaria para cumplir los estándares que dicta el W3C. El comportamiento de ambos atributos es diferente en función del navegador. El atributo Alt se utiliza en caso de que no pueda mostrarse la imagen, y Title se muestra como información adicional al posar el cursor sobre ella.

La información asociada a las imagenes debe describirlas de manera precisa y escueta. Si queremos incluir una descripción más extensa podemos recurrir al atributo longdesc.

En Blogger podemos optimizar las imagenes que contenga nuestra plantilla incluyendo su descripción en el atributo alt. Esto lo podemos hacer añadiendo el atributo title en el código html de la plantilla:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block' title='<título de la imagen>' />

Cuando añadimos imágenes a nuestros artículos no se incluye ninguna descripción por defecto por lo que es conveniente editar posteriormente el html del artículo e incluirla de manera manual:

<img src=»http://…» style=…» border=»0″ alt=»<Descripción de la imagen>» id=»…» title=»<Información adicional de la imagen>» longdesc=»<Descripción larga de la imagen>» />

6. Utilice tags de cabecera y tags semánticos.

Los tags de cabecera <H1>…<H6> permiten jerarquizar visualmente la información de una página. Los motores de búsqueda interpretan estos tags otorgando a este contenido mayor relevancia

Blogger muestra por defecto el título del post dentro de un tag H1.

El editor wysiwyg de blogger no permite utilizar los tags de cabecera en nuestras entradas, por este motivo es necesario acceder al código html e incluirlos manualmente.

Se denominan tag semánticos a las etiquetas html que imprimen un significado al texto que contienen. Estos tags tienen importancia en el posicionamiento pues los buscadores los reconocen y valoran positivamente su contenido.

Los principales tags semánticos son: <strong> <em> <code> <kbd> <dfn> <acronym> <address>

De nuevo vuelve a ser imposible utilizar los tags semánticos desde el editor wysiwyg por lo que debemos recurrir al editor html para incluirlos manualmente.

Los tags semánticos deben aplicarse con mucha moderación para resaltar exclusivamente la información más relevante del documento. La utilización abusiva de estos tags dificulta la lectura por parte de los usuarios y puede conllevar una penalización.

7. Optimice los enlaces en sus post

Para facilitar la labor de los buscadores y optimizar nuestro posicionamiento, el anchor text o texto del enlace debe comprender una frase coherente y relacionada con la página o recurso al que hace referencia

Es recomendable que relacione sus artículos con enlaces para facilitar la navegación interna de sus visitantes. De esta manera conseguirá incrementar el número de páginas por visitante.

8. Genere un Google SiteMap para Blogger

Un SiteMap de Google cumple dos cometidos:

  • Nos permite indicar a Google en tiempo real qué páginas componen nuestro blog, cuándo se ha producido una modificación y en qué momento tenemos un artículo nuevo.
  • Además nos ofrece estadísticas de nuestro blog y un informe de posibles errores.

Incluir un SiteMap es muy sencillo en Blogger:

  1. Acceda a la web Google sitemap y valídese con una cuenta válida de Google (Gmail, Blogger, etc).
  2. Indique la url de su blog:
  3. Selecciona “Añadir una etiqueta META” para verificar su Blog.
  4. Copie el código que le aparecerá y vaya al panel de control de blogger. Acceda al código HTML de la plantilla de su Blog y péguelo justo después del tag <head>.
  5. Vuelva a la página de Google SiteMaps para verificar la propiedad de su blog.
  6. Vaya a la pestaña “Sitemaps”, pulse en el enlace “Añadir un Sitemap” y seleccione“Añadir un Sitemap web general” .Escriba en el campo de texto la url de su archivo xml de sindicación: http://<nombredelblog>.blogspot.com/atom.xml

9. Elija una plantilla XHTML + CSS2

Además de elegir una plantilla bonita es muy importante que sea amigable con buscadores:

  • Un documento XHTML válido nos indica que no contiene errores en su estructura y por tanto los motores de búsqueda no encontrarán ningún tipo de problema a la hora de indexarlo.
  • En una maqueta desarrollada en base a CSS2 el diseño es independiente del contenido y el código html necesario para presentar la información está minimizado.

Puede encontrar una gran cantidad de recursos con plantillas para personalizar su blog:

10. Consiga y genere links de calidad.

Los blogs son un imán para los links. Existen multitud de blogs de temática similar a la nuestra deseando hacerse eco de nuestras noticias.

La naturaleza de los blogs abre un amplio abanico de posibilidades a la hora de lograr enlaces:

  • Escriba Información relevante y artículos de calidad. En realidad es lo único que necesita para conseguir enlaces, la comunidad arde en deseos de hacerse eco de todo aquello que merezca realmente la pena.
  • Busque la originalidad y diferenciarse del resto. Un contenido exclusivo se aportará visitantes exclusivos.
  • Participe en foros de debate y otros blogs relacionados con el suyo e incluya la url en la firma. No debe confundir esto con hacer SPAM.
  • Intercambie enlaces con otros sitios interesados y relacionados con su temática.
  • Incluya un blogroll: una lista de links hacia otros blogs de interés que se ubica generalmente en la home.
  • Invente un Meme, un artículo en el que se presenta un cuestionario o se inicia una conversación y se invita a varios bloggers a responderlo en su propio blog.
  • Puede ofrecer promociones, sorteos y regalos para los blogs que nos enlacen.
  • Blogger invitado e intercambio de posts: Invitar a un bloggero a escribir en nuestra web de manera puntual o periódica.
  • Escriba Reviews: Desde algunos blogs nos brindan la posibilidad de conseguir un enlace si realizamos una review (

    ¿Qué opinión tienes del blog?, ¿qué es lo que más te gusta o disgusta?… ) de su blog en uno de nuestros artículos. Podemos encontrar un ejemplo en el blog de Dogguie.

Por último recuerde que siempre puede recurrir al grupo de ayuda de blogger para resolver todas sus dudas.

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

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

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

El Método POST

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

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

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

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

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

Un ejemplo práctico

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

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

var form = document.createElement("form"); // crear un form
with(form) {
setAttribute("name", "myform"); //nombre del form
setAttribute("action", ""); // action por defecto
setAttribute("method", "post"); // method POST }

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

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

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


window.onload=function(){
var my_links = document.getElementsByTagName("a");
for (var a = 0; a < my_links.length; a++) {
if (my_links[a].name=="post") my_links[a].onclick = function() {
document.myform.action=this.href;
document.myform.theInput.value=this.title;
document.myform.submit();
return false;}
}
}

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

  • name=»post»
  • title="<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>.

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!

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.