Je ne sais design...

martes, 17 de febrero de 2015

Introducir meta tags en nuestro blog (I) Metadescription

Después de explicaros en este post que son las etiquetas o meta tags, vamos a ver como incluirlas en nuestro blog como parte de nuestro posicionamiento interno.

Lo primero de todo, y lo más visible en los buscadores, vamos a introducir la etiqueta meta description en nuestro blog a través de Blogger. Para ello tenemos que ir, dentro del panel de control de Blogger, a Configuración->Preferencias para motores de búsqueda y editar la descripción, a continuación os cuelgo una imagen con este blog de ejemplo.

Si lo que deseamos es introducirla en cualquier otro blog o web que no forme parte de Blogger también es sencillo. Realizaré un post explicando los fundamentos del código HTML, que es el lenguaje en el que están formadas la mayoría de páginas web, pero mientras os diré que debemos utilizar la siguiente línea de código para añadir nuestra metadescription, y que estará dentro del encabezado de nuestra web (es decir, entre los términos <head> y </head>)

<META NAME="description" CONTENT="lo que queramos decir de nuestra página">

Veis? Fácil y sencillo! Con esto mejoraremos el rastreo de nuestra página web respecto a los buscadores y mejorar a corto y medio plazo nuestro posicionamiento.

lunes, 16 de febrero de 2015

Posicionando tu blog (V) Posicionamiento interno Parte 2

Después de hablaros sobre los resultados obtenidos durante el posicionamiento durante estas dos semanas, vamos a seguir hablando de las acciones de posicionamiento interno en blogs que podemos realizar, aquí tenéis la primera parte, continuamos con la parte más compleja.

Utilización correcta de etiquetas meta

Las etiquetas meta, más conocidas como meta tags, son utilizadas para añadir información sobre la página y son utilizadas por los buscadores de forma que influyen en el posicionamiento web, ya que el buscador cruza la información meta con el criterio de búsqueda de los "clientes" y arroja los resultados pertinentes en la tabla de búsquedas.

Explicado así parece que posicionarse en la web es tan sencillo como añadir etiquetas meta a nuestra web y nuestros post y ascenderemos rápidamente posiciones en los buscadores (debo decir que a mí me ha pasado) pero por lo visto no, esto no es la panacea universal. Los meta tags son solo una parte de los motores de posicionamiento, vamos a explicar de todas formas como utilizarlos correctamente.

Etiqueta meta description: Es una etiqueta HTML que se utiliza para que el buscador logre un "resumen" del contenido de la página, sirve para atraer visitas desde el buscador y darle al usuario una pequeña guía de que contiene la página.

Etiqueta meta keywords: Otra etiqueta HTML que en este caso sirve para indicar al buscador que tags contiene nuestra página (justo lo que he explicado en el encabezado de la sección de etiquetas meta) debido al abuso de etiquetas los algoritmos de los buscadores no les prestan atención prácticamente. (técnicamente este abuso es llamado keyword stuffing).

Etiqueta meta robots: Esta etiqueta si es muy importante, ya que permite dar instrucciones a los robots de búsqueda respecto a lo que tienen que rastrear dentro de nuestra página.

Las etiquetas en desuso: Existen otras etiquetas que por diferentes motivos ya no se utilizan y son Author (indicaba el autor del contenido), Subject (parecido a una síntesis de la descripción), Generator (indicaba el gestor de contenidos con el que se había creado la página, por ejemplo Blogger o Wordpress), Language (el idioma del contenido) y Revisit-after (indicaba al robot del buscador cuantos días debían pasar para volver a rastrear el contenido de la página).

A través de un post explicaremos como poner todas estas etiquetas en nuestro blog.

Optimización de URLs

Las URLs son las direcciones web que tiene cada una de las páginas de nuestra web, que son únicas y diferentes, por ejemplo, no es la misma URL la que tiene este post que cualquier otro post o la página principal de la misma página web. Optimizar las etiquetas consiste en introducir las palabras clave o keywords dentro de las URLs, más adelante veremos como podemos hacer esto mismo a través de Blogger.

Además de esto, es importante utilizar también estas mismas keywords (pero con criterio) para los títulos de nuestros posts.

Utilización de un etiquetado correcto dentro de la web

Tal y como se hace en cada uno de los artículos, segmentar correctamente el uso de las etiquetas dentro de los mismos, de forma que si una persona quiere filtrar, por ejemplo, diseño de blogs dentro de este blog, solo encuentre los posts relacionados con ello y no otros.

Utilización correcta de la publicidad

La publicidad como medio para monetizar un blog es correcta, pero debe ser manteniendo un diseño del mismo adecuado e intentando que la misma se sitúe en la mitad inferior de la página web, de forma que el contenido útil de la misma quede concentrado en la mitad superior. Otro de los factores a tener en cuenta (ya venido a menos con la extensión masiva de las líneas ADSL y redes móviles de tercera y cuarta generación) era el peso total de la página, de forma que se redujera al máximo para conseguir un tiempo de carga óptimo.

Primeros resultados en posicionamiento

Hola a todos de nuevo,

Hoy quiero daros lo que para mí es una buena noticia y que os puede servir también a vosotros para ir comprobando como os posicionáis a la hora de ir creando vuestro blog o página web.

Desde hace unos días voy mirando a diario en Google como van entrando los nuevos artículos al buscador, utilizando los siguientes criterios: jenesaisdesign y jenesais design blog. Por jenesaisdesign obtenemos los siguientes resultados:

Para empezar los resultados han ido incrementándose a diario, hasta alcanzar un total de 30 actualmente, he comprobado que todos los artículos colgados hasta hace dos días ya están indexados, lo cual es muy positivo.

Por otra parte buscando por el criterior jenesais design blog, un criterio más complicado de posicionarse ya que añadimos las palabras genéricas blog y design, obtenemos los siguientes resultados:

Y esto si es una gran noticia! Jenesais como podéis deducir son palabras francesas juntas, con lo cual cuando hacía esta búsqueda a diario siempre salían (hasta las diez primeras páginas de búsqueda) blogs de diseño o franceses o mexicanos (efectivamente, tampoco entiendo porque salían los mexicanos) y ahora estoy en segunda posición en menos de dos semanas! Y fijaros, la búsqueda arroja un total de 803.000 resultados!

Solo queda posicionarse con el tag "diseño grafico blog" aunque eso va a ser mucho más complicado, pero espero poder escribir un post indicando que salgo en las primeras 100 posiciones!

Recursos para diseñar (IV) Vectores y logotipos

Finalizando ya con los recursos para diseñar, solo nos queda hablar de los vectores y los logotipos, de los que vamos a hablar ahora.

Vectores

La mayoría define a los vectores como una de las mejores opciones para crear diseños gráficos, sus principales puntos fuertes respecto a las imágenes normales (formadas por píxeles) es su capacidad de no perder definición cuando se realizan ampliaciones de escala, además de ello permiten controlar con total fidelidad los colores de la imagen, al contrario de las imágenes basadas en píxeles que están formadas por una paleta muy amplia de colores (millones de colores en diferentes píxeles). Para entender esto correctamente, si nosotros cogemos una imagen basada en cualquier formato que se utilice normalmente (bmp, jpg, jpeg, etc. dedicaremos un post posterior a hablar de los diferentes formatos de imagen existentes) y la ampliamos sucesivamente, en función de la definición que tenga comenzarán a aparecer los cuadraditos que componen la propia imagen (píxeles) esta circunstancia con las imágenes vectoriales no puede pasar ya que al contrario que el resto de formatos, este tipo de imágenes están formadas por un conjunto muy amplio de formas poligonales (triángulos, cuadrados, líneas, arcos, etc) que tienen unidos sus ángulos por vectores y estos al no estar formados por píxeles no pierden definición. A continuación tenéis un ejemplo de las diferencias al ampliar una misma imagen siendo una de ellas vector y la otra en píxeles.

Suponiendo esto que estoy explicando la siguiente pregunta que me podría realizar es porqué entonces no todo el mundo utiliza imágenes vectoriales para sus trabajos e ilustraciones y es por dos razones: elaboración y complejidad de la imagen resultante. La elaboración de vectores es muy compleja ya que supone ir uniendo manualmente polígonos y líneas para recrear la imagen de partida en píxeles. Por otra parte por este mismo motivo las imágenes en píxeles pasadas a vectores pierden gran parte de sus detalles y no pueden ser utilizadas para cualquier cosa. A continuación os pongo un ejemplo de una misma imagen en modo mapa de bits (bmp) y su equivalente en escala vectorial.

Hay que dejar claro que aunque esta imagen pierde parte de sus detalles una vez vectorizada, es posible también lograr un fidelidad de los mismo mayor, aunque como he comentado anteriormente vectorizar una imagen completamente es muy complejo y por eso existe este inconveniente. Otro punto a tener en cuenta y que no he comentado es que los vectores son representados por píxeles en la pantalla (es decir, es posible que veamos como si la imagen estuviera formada por cuadrados también) pero una vez se pasa a impresión estos desaparecen, simplemente la pantalla solo puede representar los vectores en píxeles porque su arquitectura está basada en estos.

Logotipos

Según la definición que podemos encontrar en Wikipedia, los logotipos, como todos sabemos, son una representación visual para identificar a una organización, producto o servicio. Se ha hablado mucho de logotipos y conocemos una amplia gama, así que seré breve. Para construir un logotipo correctamente tiene que tener las siguientes características:

Legible: El logotipo debe ser entendible y legible siempre sea el tamaño que sea, de ahí a que la mayoría de logotipos carezcan de texto en letras (podemos encontrar letras concretas, pero no texto o palabras como tal).

Escalable: Los logotipos suelen utilizarse en la mayoría de imágenes corporativas de las empresas, tanto para carteles como sobres, hojas, merchandising de empresa, etc. Por este motivo deben ser escalables tanto al tamaño más grande como al más reducido (en este caso utilizar logotipos vectorizados es un gran acierto).

Reproducible: Es importante que la imagen del logo no precise de elementos adicionales a un soporte bidimensional para poder ser reproducido en cualquier lugar, en definitiva, accesible a nivel de material.

Distinguible: Una de las dos premisas básicas que buscamos al crear un logotipo, distinguirnos de la competencia, el logotipo tiene que ser destacable respecto a sus pares tanto para bien como para mal.

Memorable: Que impacte y quede en la mente del consumidor.

Realizar logotipos no tiene más misterio que realizar cualquier otro tipo de gráficos (a nivel de software, así que aprenderemos también junto con el resto de diseño gráfico.

Y con esto damos por concluídas las explicaciones de recursos gráficos por el momento, en próximos posts hablaremos de donde encontrar todos estos recursos.

viernes, 13 de febrero de 2015

Recursos para diseñar (III) Fuentes

Siguiendo con lo comentado aquí (fotografías y texturas) y aquí (patrones e iconos) vamos a continuar la explicación de los recursos para diseñar con las fuentes.

Fuentes

Las fuentes (que son el tipo de letra con el que escribimos) más conocidas en el mundo de diseño y programación como tipografía son un elemento que no parece muy importante pero que realmente lo es a la hora de diseñar una página o blog. El tipo de letra es tan importante porque transmite sensaciones que aunque son menos visuales que los colores también indican estados de ánimo.

En tipografía existen cinco fuentes-tipo básicas: scritp (que es similar a la caligrafía escrita), serif (tipo de fuente), sans serif (otro tipo de fuente), las decorativas (aquí entraría por ejemplo la fuente comic sans y otras letras más creativas) y monospace (todas las letras son igual de anchas, al contrario de lo que pasa con la mayoría de fuentes que solemos utilizar).

Por desgracia la elección de nuestro tipo de fuente es algo totalmente personal y que va a resultar de ir probando diferentes hasta que encontremos alguna con la que nos sintamos realmente bien, aunque si hay que tener en cuenta algunas variantes como las que os detallo a continuación:

Legibilidad: Es importante que nuestra fuente sea totalmente comprensible, hay que evitar fuentes con exceso de creatividad para realizar posts que puedan llevar a confusiones o dificultad a la hora de leer (por ejemplo las fuentes basadas en estilos celtas o medievales, que distorsionan algunas letras del alfabeto latino). Esto descarta directamente las letras de estilo monospace, ya que hacen el texto muy largo y de difícil lectura. Para los textos de post deberíamos recurrir siempre a fuentes de estilo serif o sans serif.

Tamaño: Se debe elegir un tamaño de letra que sea suficiente para no forzar la vista, lo ideal es comenzar con 12px y en función del tipo de letra que utilicemos incrementarlo o disminuirlo.

Que son las fuentes serif y sans serif y en qué se diferencian?

Los tipos de fuentes serif y sans serif se diferencian del resto de tipos por ser las más fieles al la tipografía latina-occidental que utilizamos en la actualidad.

Las principales diferencias entre una fuente serif y sans serif son los motivos decorativos que encontramos en ellas, mientras que las tipo serif tienen bordes decorativos en cada letra (lo que hace más fácil a nuestro cerebro diferenciarlas y con ello más sencilla la lectura) las fuentes tipo sans serif no tiene decoraciones y su uso se extendió con la generalización de la informática. La principal ventaja que tienen las letras sans serif respecto a las serif es que al no tener bordes soportan resoluciones más bajas a la hora de imprimirlas (no se ven pixeladas).

Por norma general las fuentes de tipo serif son más formales y profesionales y las fuentes sans serif están más relacionadas con perfiles más jóvenes y frescos (yo, por ejemplo, utilizo Helvetica, una fuente sans serif)

Os pongo a continuación un ejemplo en que se ve claramente la diferencia entre ambas fuentes-tipo:

En el próximo post acabaremos con los recursos restantes, hablando de vectores y logotipos.

El blog cumple una semana!

El blog cumple la primera semana por fin! Realmente debo decir que no es la primera vez que intento hacer un blog, pero si es la primera en la que logro escribir más de diez post y tengo ideas para muchos más. Es curioso que en un principio había pensado en crear un blog de estadísticas sociológicas interesantes y que pensando en como hacer las infografías haya acabado aquí.

El diseño gráfico es un tema que me gustaría dominar y realmente creo que tengo potencial para ello. En esta semana he aprendido muchas cosas teóricas, sobretodo relacionadas con palabras técnicas que no dominaba. Ahora por ejemplo se distinguir que es un patrón de una textura, algunas aplicaciones que desconocía (principalmente en este caso la competencia de Adobe) y en definitiva, espero que en un mes vista pueda tener las primeras visitas (aunque durante esta primera semana ya he obtenido una!) o haber realizado algún trabajo personal que pueda compartir con los lectores.

Una vez tenga más contenido comenzaré a publicar el blog por las redes sociales y podré cuantificar y explicaros el impacto que tiene a todos los niveles (posicionamiento y público principalmente)

Próximas reflexiones para el resumen del primer mes. Un saludo a todos.

Posicionando tu blog (IV) Posicionamiento interno Parte 1

Después de hacer la aproximación, las primeras definiciones y el indexamiento de nuestra página o blog a los principales buscadores, vamos a comenzar a hablar de las primeras acciones de posicionamiento que vamos a emprender. Las primeras de todas, al ser las más fáciles, van a ser las acciones de posicionamiento interno.

Las acciones de posicionamiento interno son aquellas que aplicamos a nuestra página web, acciones destinadas en este caso a apariencia, contenido y accesibilidad. Vamos a enumerarlas.

Creación de contenidos de calidad

Si habéis investigado un poco por la web, os habréis dado cuenta que se remarca una y otra vez la importancia del contenido. ¿Cómo podemos hacer contenidos de calidad? Según mi recomendación por lo que he podido ir recopilando por la red hay que seguir los siguientes pasos:

Idea clara: Tener claro que es lo que vamos a publicar dentro de nuestro post, por ejemplo, si como es este caso voy a hablar de posicionamiento interno no extender contenido del mismo a otros temas como el diseño del blog o el posicionamiento externo.

Investigar: La investigación es clave a la hora de saber qué escribir. En mi caso por ejemplo, para poder redactar estos posts, suelo buscar por internet y doy con otros blogs o páginas web que están bien situados en los buscadores (lo cual significa que están bien posicionados en sus ámbitos y les está funcionando) podemos intentar seguir la estrategia de los mismos lugares que nosotros mismos tomamos como referencia.

Contenido completo: Cuando hablemos de un tema en concreto, siempre es mejor que sea lo más completo posible, ya que de esta forma evitamos que los lectores tengan que ir dando saltos de un blog a otro. Esta comprobado que los posts extensos tienen mejores resultados que los posts breves o incompletos.

Títulos únicos: Aquí cada uno sigue su estrategia, la mía es crear primero el título (tengo la aplicación de blogger en el móvil y cuando tengo una idea simplemente creo una nueva entrada en borrador escribiendo el título para no olvidarla) y posteriormente creo el texto, una vez he creado el texto lo leo y decido si cambio o mantengo el título. Por el contrario hay gente que directamente crea el post y a posteriori escribe el título, hay gustos para todo y no influye mientras el título sea único y original. Se recomienda que el título del texto sea de entre 60 y 70 caracteres (este, por ejemplo, es de 49, aunque creo que es adecuado ya que indica explícitamente de lo que estamos hablando). No hay que olvidar que los títulos son por donde los robots y algoritmos comienzan sus criterios de búsqueda.

Imágenes: Es importante añadir algunas imágenes (como podéis ver en los últimos posts que he completado ya he comenzado a inserir algunas imágenes) de forma que haga más amena la lectura del artículo y quede visualmente mejor estructurado. Los nombres de las imágenes también posicionan!

Estructura correctamente tu página web

Es muy importante que la página web sea lo mas clara y accesible posible (es una de las múltiples variables que los algoritmos de los buscadores tienen en cuenta a la hora de posicionar una web). En este post que escribí con anterioridad os explico porque elegí este diseño (en el momento que escribo este artículo mi diseño esta basado en una plantilla sencilla de blogger con algunos cambios).

Dentro del apartado de accesibilidad también hay que tener en cuenta que la web debe ser lo más accesible posible a nivel de software, es decir, intentar evitar contenidos basados en Flash o JavaScript, ya que los robots de rastreo no pueden leer correctamente esta información y además requieren de software adicional por parte del ordenador cliente (el del usuario) que es posible que no esté instalado.

Dentro de la estructura también tenemos que tener en cuenta el enlazamiento de las páginas de nuestro sitio de manera coherente, por ejemplo, en este mismo artículo veréis que he enlazado los tres posts anteriores de posicionamiento porque son de los mismos temas y considero que son importantes de leer antes de comenzar a realizar el posicionamiento interno de nuestra página.

Los robots de rastreo detectan las palabras en negrita y cursiva para posicionar, con lo cual es importante también mantener la coherencia en esta aspecto, utilizando estas variaciones en la fuente cuando sea necesario y queramos resaltar algo importante.

Fiabilidad y mejoras técnicas

Debemos intentar provocar las mínimas tasas de rebote posibles de nuestra web. (Un rebote se produce cuando un usuario visita nuestra web, entra solo a una de las páginas y esta un tiempo inferior a 30 segundos, se cuentan cuantos rebotes hay sobre el total de visitas y con ello se obtiene la tasa, podéis ver una definición completa aquí.)

Es importante también alojar la web en un servidor de calidad, para evitar caídas constantes. En mi caso por ejemplo, al estar alojada en este momento en los servidores de Blogger (de Google en este caso) podemos deducir que es un alojamiento muy fiable.

No olvidemos además, que otro de los valores que tiene en cuenta el algoritmo es la entrada de contenido nuevo, hay que mantener una tasa de actualización mínima constante para ir mejorando posiciones. Pensar que esto es como una gran carrera en la que no puedes para de correr para que la competencia no crezca por encima de ti.

En el siguiente post sobre posicionamiento explicaremos la parte algo más complicada (y que yo todavía no he comenzado a implementar) sobre el posicionamiento interno, ligado a el lenguaje HTML.