Segundo capítulo de “SEO en Lanzarote”

Hoy tenemos una nueva “minientrega” de la serie SEO en Lanzarote donde vemos de forma didáctica como es el estado de las webs más relevantes de la isla. En la primera edición estuvimos revisando a La Voz De Lanzarote y hoy el turno es para la revista de anuncios Estohay.

Tal como ocurrió con La Voz de Lanzarote, la revista estohay tiene un nombre reconocido dentro de la isla y es bastante consultada su edición en papel como la online. Veremos que a pesar de ser un referente en anuncios en Lanzarote, otras webs le ganan terreno en determinados resultados de búsqueda.

Así que vamos a ver algunos aspectos de la web que se podrían mejorar, tales como títulos, descripciones, contenido, etc.

Títulos
El titulo de la página de inicio es muy largo y si a eso le añadimos que en cada página tenemos el título de la home, más el de la página correspondiente, es un título extremadamente largo. Además de mal organizado y sobre optimizado.

Meta Descripciones
Aquí ocurre totalmente lo contrario, la mayoría de descripciones son muy cortas, poco informativas o no existen. Las descripciones son muy importantes tanto para el usuario como para el buscador. Por ejemplo, google le da mucha relevancia a las descripciones.

Meta Keywords
Palabras clave repetidas en muchas de las páginas. Por lo visto, todos las páginas de anuncios tienen las mismas keywords.

Etiquetas de titulo
Ausencia de titulos H1, H2, H3, etc. Los anuncios deberían tener estas etiquetas en sus títulos.

Imágenes
La mayoría de las imágenes de los anuncios no tienen títulos ni descripciones.

Robots Sitemaps
El archivo robots.txt no esta definido y apunta a un sitemap que tampoco está muy claro si funciona.

Peticiones
98 peticiones al servidor, algo aceptable pero se podría mejorar juntando más CSS y javascripts. La página de inicio pesa menos de 1 mega y dependiendo de la conexión del usuario tardará una media de 2-3 segundos en cargar.

Otros aspectos
La maquetación de muchas zonas de la web está hecha con tablas, algo totalmente innecesario. Se puede mejorar la página de error para que no redirija a la página del proveedor de hosting que es HostGator. Organizar el archivo robots.txt para controlar contenido duplicado como las páginas de búsqueda, versiones para imprimir, etc.

Para terminar, veamos algunos términos de búsqueda relevantes relacionados con la temática de la revista estohay y los resultados que arroja google. En la mayoría no aparece en la primera página de resultados y en otros queda eclipsada por portales como Segunda Mano, Mil Anuncios, Tablón de anuncios, etc.

Comprar ordenador Lanzarote segunda mano
Comprar coche Lanzarote segunda mano
Alquiler pisos Lanzarote
Ofertas de empleo Lanzarote

Columnas de texto con CSS3

Hoy vamos a ver una forma sencilla de formatear nuestro texto en columnas con CSS3. Es una forma muy vistosa y da un aspecto de revista o periódico. Es ideal si tenemos una publicación de este tipo.

Esta función CSS es soportada por todos los navegadores, excepto Internet Explorer en versiones anteriores a la 10. Navegadores soportados: Firefox 2 +, Chrome 4 +, Safari 3.1 + y Opera 11.1.

  • Primero vamos a crear un trozo de texto, por ejemplo con esta letra de Soda Stereo y que se dividirá en dos columnas. Y en este primer ejemplo usaremos la propiedad: column-count
  • En el segundo ejemplo usaremos la propiedad: column-width con la cual en vez de número de columnas, especificamos el ancho de cada columna. Vamos a hacerlo con un ancho de 150px.
  • En el tercer ejemplo veremos la propiedad: column-gap que nos sirve para indicar el espacio entre las columnas.
  • Y por último, en el cuarto ejemplo podemos usar la propiedad: column-rule para obtener una línea de división entre las columnas. Tal como usamos la propiedad border

Recuerda hacer click en el botón HTML y CSS para ver el código.

Check out this Pen!

Como podemos ver, es bastante sencillo obtener columnas de texto en los navegadores modernos. Si tenemos problemas con internet explorer podemos usar en nuestros proyectos algo como modernizr para que sea totalmente compatible. Si tienes más ideas para columnas de texto con CSS, compártelo en los comentarios.

El universo Instagram

Instagram es la aplicación de fotografía más popular en los dispositivos móviles. Revolucionó el mercado con sus filtros que dotan a las imágenes de personalidad y algunas veces, belleza. Además su ecosistema es de los que más crece en medio de todas las social apps. Al igual que twitter y facebook, Instagram goza de buena salud con las miles de aplicaciones de terceros. Y aunque después de su compra por parte de facebook y su más reciente bombazo sobre sus políticas de privacidad, sigue siendo el vicio de muchos llamados “instagramers”.

Veamos como podemos sacar más partido a Instagram con algunas aplicaciones que me he encontrado por la red y que hacen más divertido el uso de esta aplicación de fotitos.

Instamazing
http://www.instamazing.net

Instamazing

Es una aplicación que ubica fotos dependiendo del sitio en que te encuentres. Mediante geolocalización nos muestra las últimas fotos publicadas a nuestro alrededor.

Statigram
http://statigr.am/

Statigram

Si tenemos una gran cuenta, con muchas fotos, muchos seguidores, etc. Statigram te puede venir muy bien para ver unas completísimas estadísticas de tu cuenta.

Instawaves
http://instawaves.com/

Instawaves

En el blog de Jose Frechín me encontré con InstaWaves, una aplicación que identifica lo más popular (trendign topics) en Instagram.

Extragram
http://extragr.am

Extragram

Extragram es una aplicación web que permite ver y mostrar nuestro perfil completo sin estar en la aplicación móvil. Esto era ideal cuando Instagram no tenía perfiles web. Aunque se puede seguir usando si no te gustan los perfiles originales de instagram.

SearchInstagram
http://searchinstagram.com

Es una aplicación para buscar imágenes de forma fácil, mediante cadenas de texto, hashtags, etc.

Si te has quedado con ganas de conocer más apps para Instagram puedes seguir este blog dedicado a ello. Este sitio con 20 apps interesantes o una recopilación de Mashable.

Y si tienes algo que recomendarnos o tu has creado una aplicación, puedes compartirlo en los comentarios ;).

Colores y Valores en RGB, CMYK y Hexadecimal

Aunque parezca algo tonto, seguro que en más de una ocasión has necesitado saber el valor hexadecimal (#ffffff) de un color que está en RGB / CMYK o al revés. Si trabajas con diseño web o gráfico sabes lo que digo.

En muchas ocasiones, con  la experiencia nos basta para saber los valores de algunos colores en cada formato, pero al ser cientos de colores, la mayoría de nosotros  no podemos memorizarlos y hacer cálculos matemáticos sería perder tiempo valioso. Así que veremos unas cuantas herramientas que nos ayudaran en esta tarea.

La primera y para mi la más rápida y efectiva es usar PhotoShop, The Gimp, Corel Draw, Illustrator u otro software de edición gráfica. Estos programas vienen con una opción de paleta de colores en la que podrás ver los colores con sus respectivos valores en HEX, RGB además de CMYK e incluso PANTONES.

Photoshop paleta de color

Gimp Color select

Si no disponemos de alguno de estos programas, podemos instalar alguna extensión para Chrome como por ejemplo:

RGB to Hex

RGB to HEX Chrome

Chroma

Chroma Chrome

Color Creator

Color Creator Chome

Y si además queremos crear paletas de colores, estas dos extensiones nos pueden servir.

Palette Creator

Palette Creator

Color Sphere

Color Sphere

¿Ya has verificado tu sitio web en Pinterest?

Hace ya un par de meses que los chicos de Pinterest lanzaron una nueva funcionalidad para verificar el sitio web de un perfil. Ya sabes, ponemos un enlace web en nuestro perfil pero los visitantes no saben si es o no es nuestro sitio web verdadero. Así que para verificar nuestra web en Pinterest solo hay que seguir estos sencillos pasos:

  1. Ingresa en tu cuenta de Pinterest y ve a la zona de configuración.
  2. En el apartado donde has puesto tu página web, habrá un botón justo a la derecha que pone “Verificar sitio Web”
  3. Sigue los pasos que te indica. Tendrás que bajar un archivo HTML que te proporciona el sistema y lo tendrás que subir a la raiz de tu servidor web. Esto lo puedes hacer por FTP o por medios de algún cargador de archivos de tu servidor o página web.
  4.  Una vez has subido el archivo, vuelve a tu configuración personal y verás como te aparece un mensaje de estado de verificación correcta.

Pinterest sitio verificado

Si has seguido estos sencillos pasos, ya tendrás tu web verificada en tu perfil. Así da un aspecto más profesional y los visitantes sabrán que es un perfil real. Si eres una marca o comercio, es ideal para que tus clientes o fans sepan que es el perfil oficial.

Perfil verificado pinterest

¿Para qué sirve PhoneGap?

Respondiendo rápidamente a esta pregunta, PhoneGap es un framework de código abierto que nos permite convertir nuestros proyectos HTML5 – CSS3 – JS en aplicaciones que se ejecutan en diferentes dispositivos móviles como iOS, Android, Blackberry, entre otros. Nuestra aplicación se empaqueta de forma que se puede instalar en el dispositivo móvil.

El resultado es como un hibrido entre una aplicación nativa y una aplicación web que podemos distribuir en tiendas tipo Appstore o Google Play.

Si has creado una aplicación web desde cero o con un framework como jQuery Mobile o Lungo JS puedes usar PhoneGap para empaquetar tu proyecto y distribuirlo.

PhoneGap nació del iPhoneDevCamp en 2008, donde fue creado porque habían pocos desarrolladores de Objective-C en comparación con los desarrolladores web. El reto consistía en elaborar un marco que permitiera a los desarrolladores web usar HTML, CSS y JavaScript para aplicaciones que pudieran tomar la funcionalidad nativa del dispositivo móvil, como la cámara, almacenamiento y características de geolocalización. Inicialmente fue diseñado para funcionar con el iPhone. Pero en los últimos años, PhoneGap ha ido creciendo y es compatible hoy en día con Android, Blackberry, Symbian, webOS, Windows Phone, Bada, entre otros.

Más información sobre en la web oficial de PhoneGap y en la wikipedia.

Nuevos tipos de Galería en WordPress

Si tienes instalado JetPack en tu WordPress podrás tener ahora tres tipos de galería para mostrar tus imagenes.

Los tipos de galería disponibles son:

RECTANGULAR
Muestra tu galería de imágenes en bloques al estilo Pinterest. Imágenes en diferentes tamaños pero alineadas.

SQUARE
Esta galería es similar a la que ya había por defecto en WordPress pero muestra las imágenes mas organizadas.

CIRCLE
Las imágenes de nuestra galería se muestran de forma circular. Un efecto diferente para complementar.

Para tener estos nuevos tipos de galería debemos, en primer lugar, activar el módulo “Tiled Galleries” en nuestro cuadro de mandos de Jetpack. A continuación, ir a Ajustes → Medios en el menú de administración, y a continuación seleccionar la casilla “Display all your gallery pictures in a cool mosaic”. La elección de esta opción hace que este diseño por defecto se habilite para todas las galerías de tu blog, incluidas las que se han insertado previamente.

Ejemplo:

Más ayuda e información en:
Sitio oficial de JetPack
Ayuda de WordPress

Versión móvil de nuestro sitio web con jQuery Mobile

El uso de los dispositivos móviles como medios principales de acceso a Internet es evidente. La cuota de mercado es dominante y si tenemos un sitio web debemos intentar adaptarlo para que sea navegable y usable desde cualquier dispositivo ya sea móvil, tablet, pc, etc.

Por norma general ya tenemos el trabajo de diseño hecho para resoluciones grandes como puede ser un monitor o una televisión de muchas pulgadas. Pero en los más pequeños debemos tener más cuidado. Podemos optar por un diseño responsive o hacer una versión móvil que conviva con nuestra web original.

Hoy vamos a ver como usar jQuery Mobile para poner en marcha esa otra versión de nuestra web para que sea usable en smartphones y tablets ya que es compatible con multiples plataformas.

Lo primero que necesitamos es tener las librerias jQuery y jQuery Mobile y usar nuestro editor de texto favorito para darle forma a nuestro proyecto.

Si eres un usuario avanzado podrás empezar un diseño propio y original en base a los requerimientos de tu aplicación, pero si no tienes muchos conocimientos, quieres probar o no perder mucho tiempo con el trabajo, jQuery nos da la solución de interfaces ya pre-diseñadas que podemos usar como si fuera un “rompecabezas” e ir adaptando nuestro proyecto al gusto. Además tiene el ya conocido Theme Roller donde puedes modificar fuentes, tamaños, colores, etc. para hacer un poco más personalizado el “theme”. El theme roller nos genera un CSS listo para usar con los estilos que le hemos marcado.

Nuestra cabecera HTML tendría un resultado de este tipo, listo para empezar a maquetar.

<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

</head>

Con esto ya podemos generar un HTML básico que muestre información por ejemplo del feed rss de nuestro blog o contenido estático. Además de tomar datos externos para hacer algo más interactivo, como por ejemplo bases de datos o un xml.

Para terminar puedes ver un escaparate de sitios hechos con jQuery Mobile y tener una idea aproximada de lo que puedes hacer. http://www.jqmgallery.com

Objetivos de nuevo año

Como suele ocurrir todos los años por estas fechas hacemos promesas y nos marcamos objetivos para el año. Todas esas cosas que no hemos hecho el año anterior y que queremos hacer ahora. Conseguirlo o no ya depende de cada uno. Pero normalmente esos objetivos se van perdiendo con el paso de los meses.

Por mi parte intentaré no marcarme objetivos “complicados” que normalmente no cumplo por falta de tiempo y dejadez. Lo que si quiero hacer es darle un giro radical a este blog e intentar publicar al menos tres post a la semana. Marcarme el objetivo de un post diario, lo veo complicado pero no imposible.

Así que a finales de este 2013 revisaremos este post y veremos si he logrado cumplir el objetivo o por el contrario tendré que darme contra una pared!