IGRAFIQ - Blog

Porque mis posts no se posicionan bien en Google?

Extraido de: http://tensaiweb.info/blog/posicionamiento-blogs-google-urls-cortas/

Un error muy común es descuidar la dupla URL – Título. Esta dupla es importantísima a la hora de posicionar una búsqueda en Google.
Obviamente también es muy importante que en el contenido se repitan las palabras clave que uno desea posicionar pero eso dependerá más de lo que tengamos que decir en el post, en cambio el título y la url son fácilmente manipulables y generalmente lo hacemos mal.

Ojos de Google

Aspectos que probablemente algunos desconocían y que es importante conocer para la creación de las urls:

• Google asume como iguales a las vocales acentuadas y no acentuadas.
• Google trata igualmente a mayúsculas y minúsculas.
• Google asume que la n puede ser tomada como ñ y también aproxima otros caracteres al que más se le parezca.

Estas reglas pueden cambiar si alguien realiza una búsqueda avanzada o usa comillas, pero seamos honestos, la gran mayoría usa una búsqueda normal y rápida.

Error crítico en las URLs de los posts: Acentos y otros signos

Algunos bloggers en el afán de querer escribir correctamente las palabras caen en la trampa que nos tienden tanto Blogger como Wordpress.
Cuando uno crea un post lo primero que indica es el título del post y es allí donde debemos tener cuidado, ya que con ese título es que se forma la URL. Claro siempre que tengamos en wordpress el permalink en esa modalidad, en Blogger está por defecto.

Como crea la url Blogger

Blogger coge el título y hace los siguientes cambios:

• Desaparece las vocales acentuadas y signos extraños como la ñ. Ejemplo: si en el título dice [Árbol Genealógico por años], en la url aparecerá [rbol-genealgico-por-aos].
• Recorta parte de las palabras que incluyan un caracter especial que comience con &, desde donde aparece dicho símbolo hasta el final de la palabra. Ejemplo: si el título dice [Feliz Año Nuevo Compañeros], en la url aparecerá [feliz-a-nuevo-compa].

Además recorta la URL a 37 caracteres como máximo.

Como crea la url Wordpress

Wordpress coge el título y hace los siguientes cambios:

• Reemplaza las vocales acentuadas y signos extraños como la ñ por vocales normales y la n. Ejemplo: si en el título dice [Árbol Genealógico por campaña], en la url aparecerá [arbol-genealogico-por-campana].
• Desaparece los caracteres especiales que comiencen con &. Ejemplo: si el título dice [Feliz Año Nuevo Compañeros], en la url aparecerá [feliz-ao-nuevo-compaeros].

Solución en Blogger

Escribir el título con vocales sin acentos y usar enes en lugar de eñes.
Luego volver y editar el título de la entrada colocando los signos que queramos, esto ya no afectará a la url que ya fue creada.
Además de incluir los signos nuevos podríamos incluso hacer el título del post más largo y explicativo sin temor a que la url crezca.
Recordemos que Blogger sólo nos da 37 caracteres así que sería una buena idea colocar como título inicial por ejemplo:
Efectos contaminacion ambiental salud.
y luego cuando editemos el título:
Efectos de la contaminación ambiental en la salud: Enfermedades causadas.
Recordemos también que en Blogger el título del post es también el título de la página y el título de la página debe ser lo más descriptivo posible porque así le gusta a Google.

Solución en Wordpress

Escribir el título del post sin usar caracteres especiales que empiecen con &.
Luego hacer los cambios que sean necesarios editando el título del post.
Aquí se aplica lo mismo en cuanto a que la url debe ser concisa pero el título del post puede ser más descriptivo. Aunque si realmente quieres manipular el título de la página para que sea diferente y más largo que el del post, entonces deberías usar un plugin como el de este otro artículo.

Porqué es importante corregir todo esto de la url y el título?

Porque tu posición en Google dependerá en gran parte de que en el título de tu página y en la url de la misma se encuentren las palabras que busca alguien en Google.
Ahora imagínate que alguien busque en Google : arbol genealogico.
Y tú en tu blog de Blogger creaste un post al respecto pero oh sorpresa! tu url es /2007/11/rbol genealgico.html.
Crees que Google siquiera te mostrará entre las primeras 50 posiciones? Posiblemente no.
El resultado será que aunque probablemente te muestre en alguna posición por existir dicha frase en el contenido de tu post, perderás muchas posiciones por no tener una buena url y si por ejemplo apareces en la posición 100, muy poca gente tendrá la paciencia de buscarte en los resultados degoogle y por ende entrar a tu página.

Y los acentos y otros signos en el contenido del post?

Está todo mal, loco?. Pues no, quédate tranquilo que el problema en los blogs con los acentos y otros signos es con la URL.
En tu contenido puedes poner los signos que gustes.

Extraido de: http://blogandweb.com/wordpress/crear-boton-animado-ilustracion-css/

Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.

En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).

Vectores y la ilustración

Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.

No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.

Bocetando y de ahí a illustrator

Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.

Puedo mencionarles que prefiero hacer esto, bocetar aunque al final muchas veces trazo directo en illustrator pero al menos para mi me da una idea más clara y sé que haré, antes podía pasar horas en la computadora sin tener claro que dibujar y con ello perdía tiempo, unos momentos de boceto terminaron con eso.

Empezaremos con las formas básicas para la cabeza y las orejas, trazaremos tres círculos, juntos para luego aplicar el pathfinder (menu window-pathfinder) y aplicamos el efecto de sumar.

Trazaremos los ojos, dos círculos pequeños de color negro bastarán para hacerlo, colocamos y centramos, y después haremos el cabello.

Ahora solo ponerle color y unir las partes.

Esto solo es una guía, así que ustedes podrán hacer el personaje que quieran yo les muestro dos variantes de niño y niña.

Ahora viene la parte interesante, la sonrisa, la cual será una de las cosas que cambian. Para comenzar haremos la sonrisa con la boca cerrada, un medio circulo será suficiente, para después hacer la sonrisa de la boca abierta. duplicamos nuestro layer o capa con nuestro personaje con sonrisa cerrada y hacemos lo siguiente en el layer duplicado.

Feed rss y strokes de etiqueta.

Haremos nuestro feed RSS que es el pretexto para hacer esta ilustración, lo colocaremos detrás del niño y en la imagen el botón se verá más, y crearemos un efecto de movimiento.

Ahora hagamos el terminado de etiqueta, seleccionemos el personaje, le damos Unite con el pathfider lo rellenamos del color y le damos un stroke o borde para que se rebase la figura, aplicamos lo mismo al botón feed RSS.

Vamos a hacer un pequeño destello en la parte de atrás de nuestro personaje. Creamos un rectángulo vertical y aplicamos el efecto de transform o transformar, (menu effects/Distor & Transform).

Expandimos la forma creada (menu object- eExpand Appearance) le damos Unite con el pathfinder, ajustamos algunas puntas de nuestra figura y añadimos una degradado.

Solo agreguemos un pequeño texto para hacer más obvio nuestro cambio y listo tendríamos por separado en cada layer un archivo así:

Implementación del botón

Desde illustrator de exportan las imágenes, el resultado, dos imágenes un formato de imagen web, por ejemplo PNG8. Para poderlas usar en un hover, ambas deben tener el mismo alto y ancho y estar alineadas vertical y horizontalmente. En otras palabras, que si pones una sobre otra, la silueta de cara coincide.

Hemos unidos después estas dos imágenes en una sola, una sobre otra, para usarlas como sprite CSS:

Para el HTML basta con el siguiente código:

<a href='http://blogandweb.com/feed' class='botonrss'>Feed RSS</a>

El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.

a.botonrss {
    width:166px;
    height:180px; /* Dimensiones de la imagen */
    text-indent:-9999px;
    overflow:hidden; /* Oculatando el texto del enlace */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

Ahora, solo resta ver el botón en funcionamiento.

Implementarlo en Blogger y WordPress

Implementarlo en Blogger y WordPress es bastante sencillo. El código HTML se puede agregar en un widget de HTML en el sidebar y el CSS, en WordPress va en el archivo style.css y en Blogger justo antes del código:

]]></b:skin>

No olvides cambiar la URL por la de tu feed en el HTML y la ruta de la imagen en el CSS.

Descargar

Descargar HTML e imágenes.

Conclusión

En este tutorial vimos como crear un botón “animado” iniciando desde el panel, aunque resulta en algo de trabajo, el resultado generalmente vale la pena.

Igualmente, si te gusto este botón para tu sitio web, descárgalo e impleméntalo. Nosotros lo liberamos bajo licencia Creative Commons, y si nos quieres dar un link por los créditos, te lo agradecemos desde ahora

Por cierto, este es el primer tutorial que hacemos en conjunto, Ulises y Francisco (principalmente el primero), esperamos te haya gustado tanto como a nosotros al escribirlo.

Hola amigos de IGrafiQ,  soy Rafael Piqueras, vuestro jefe de proyectos, ese que se desvive para que todo salga bien y todo siga sobre la marcha.

Hemos creado este blog, para que todos aquellos que precisen de una guía o de un faro en el mar de Internet tengan un sitio donde poder instruirse.

Casi siempre es mejor saber que depender… pero como siempre para saber hay que leer, así que os iremos incluyendo lo mejorcito de la red para que podáis ser cada vez mejores en este maravilloso mundo de Internet.

Lo que nos preocupa no es el tiempo… sino saber en que invertirlo para que nuestro negocio funcione.

En este nuestro blog os dejo unos artículos que creo son realmente importantes.

Atentamente

Rafael Piqueras
Jefe de Proyectos