2012

Paginas Web Perfectas Diseo

Edwin Bernardo Claure Vidaurre TECinc. 17/09/2012

Errores comunes en el diseo Web:

Mensaje poco claro: consigue que tus usuarios sean capaces de captar el mensaje y propsito de tu site con tan solo un vistazo. Uso inadecuado de colores: una incorrecta combinacin de colores puede ofrecer una imagen poco profesional capaz de ahuyentar a un buen nmero de usuarios. Contenidos ilegibles: evita usar fuentes tipogrficas que no sean de lectura fcil. El tamao y el color de la fuente son dos elementos a tener en cuenta. Respeto al usuario: incluye un resumen de tu poltica de privacidad para favorecer la suscripcin de usuarios y crea un sistema que permita darse de baja. Incluye un buscador: haz que el acceso a contenidos en tu site sea ms fcil a travs de un buscador visible dentro de la portada de tu web. Evita una navegacin complicada: trata de no confundir a tus usuarios, es recomendable crear apartados identificables y espaciados, enlaces fciles de encontrar y diferenciados del texto con el tpico subrayado y/o color azul, as como evitar un diseo sobrecargado con excesiva cantidad de texto.

Cuidado con las introducciones: evita usar una introduccin flash excesivamente larga, sin que esta ofrezca un botn para saltrsela Cuidado con la msica de fondo: en muchos casos la solucin rpida que toma un usuario que no encuentra de su agrado la msica implementada en cerrar el site y buscar en otro lugar. Si estas decidido a usar msica incluye la posibilidad de detenerla o enmudecerla.

Correcto formato de imagen: JPEG, PNG y GIF son los formatos estndar que evitan la mayor parte de los problemas de carga de imgenes. El uso de un tamao optimizado de imgenes evita adems un excesivo tiempo de carga.

Publicidad acertada: evita la confusin de tus contenidos con la publicidad de tu site, elige un lugar visible para colocar tus anuncios pero diferenciado del resto de la pgina. Compatibilidad navegadores: asegrate que tu website es compatible con los principales navegadores web. Especial mencin merece Internet Explorer 6, con diferencia el navegador que ms dolores de cabeza produce a diseadores y desarrolladores web pero que sin embargo sigue siendo usado por cerca del 9% de usuarios en todo el mundo.

La pgina web perfecta (para SEO)

Por Joan Boluda, el 28/01/2011 Cada vez que un proyecto web pasa por las manos de un SEO, pasa por el tratamiento de la optimizacin On-Page, es decir, mejorar el contenido, meta contenido y estructura de cada pgina, para que Google le queda muy clarito de que va esa web. El problema es que no hay una solucin universal y estandarizada. Cada proyecto es un mundo, y se debe estar puliendo constantemente. Sin embargo, hay ciertos factores y best-practices que (a da de hoy) son aplicables a cualquier proyecto que se nos ponga delante. O al menos eso es lo que he podido comprobar con mi experiencia, y la de colegas de profesin. Veamos pues, esa pgina web perfecta (para SEO). Vamos a dividir este artculo en tres partes. La primera, lo que sera la URL de la pgina, despus el HEAD, y finalmente el BODY, o sea, el contenido en si.

Optimizar la URL
1. Longitud
Parece ser que las URLs cortas funcionan mejor, no solo en los buscadores, sino tambin en la memoria de los usuarios, y son ms susceptibles de ser objeto de un copiar/pegar.

2. Palabra clave
Ni que decir se tiene, que las URLs deben incorporar palabras clave, ya sean 100% amigables o solo parcialmente. Y cuanto ms cerca est la palabra clave del dominio, mejor.

3. Guiones
Todas las palabras deben estar separadas-por-guin-medio. No_guiones_bajos, NiTodoJunto. Lo mejor para carpetas, subcarpetas y pginas, son los guiones medios.

Optimizar el HEAD
1. Etiqueta TITLE
El elemento ms importante de toda la pgina, sin lugar a dudas. No tan solo es la etiqueta a la que Google da ms peso, sino que adems es lo que los usuarios vern en la pgina de resultados, juntamente con la DESCRIPTION.

2. Meta Etiqueta DESCRIPTION

Contrariamente a lo que mucha gente piensa, la meta etiqueta description no sirve para posicionar ni aumentar en el ranking. O al menos, la mayora de buscadores no la tiene en cuenta. Eso es porque no es una etiqueta, sino una meta etiqueta. La diferencia est en que las primeras son visibles para los usuarios, mientra que las otras solo se ven en el cdigo fuente. En general, Google no se fa de aquello que el usuario no puede ver. Y la description o es una excepcin. Sin embargo, la description es el fragmento que aparece debajo del ttulo en la pgina de resultados. Y en el caso que coincida con la bsqueda del usuario, las palabras coincidentes se muestran en negrita, haciendo ms visible el resultado al usuario. Y eso si nos puede hacer aumentar nuestro CTR, lo que comporta ms visitas.

3. Meta Etiqueta KEYWORDS

Ya no sirve para nada. Ni se utiliza, ni se tiene en consideracin. Ya ha pasado a la historia, con tantas otras meta etiquetas. Menos es ms. Menos cdigo, ms rpido. No vale la pena ponerla, mejor dedicar ese precioso tiempo a otros menesteres. Quizs preparar un caf con lehe.

4. Meta Etiqueta ROBOTS

Bueno, simplemente decir al buscador si debe indexar la pgina, y si debe seguir los enlaces que hay en ella. Lo explico de forma ms especfica en el artculo Como utilizar la meta tag robots.

3. Meta Etiqueta CANONICAL

Esto ya es ms complicado, pero para abreviar, diremos que esta etiqueta sirve para que Google no vea contenido duplicado en una web. Eso pasa cuando se puede acceder a los mismos textos des de diferentes URL. Por ejemplo, a veces se puede leer un mismo post en la propia pgina del post, o en los archivos mensuales del blog. Mismo contenido, distintas URL = caca. Un da escribir un artculo ms detallado. De momento, SEOmoz.

Optimizar el BODY
1. Palabras clave
Cuantas veces debe aparecer una palabra clave dentro e la pgina? Ese es uno de esos tpicos del que todo el mundo tiene una respuesta distinta, y hay defensores de muchas teoras. Pero segn la gente de SEOmoz, de los que me fo mucho, y segn mi experiencia, de 2 a 3 veces en pginas de poco contenido, y de 4 a 6 veces par pginas medianas. Lo que nos puede aportar forzar ms palabras clave es insignificante. Tambin se considera importante que aparezca por primera vez dentro de los 100 primeros carcteres (esto es un poco leyenda urbana).

2. Variciones de la palabra clave

Actualmente webmastertools ya agrupa las palabras por variaciones, o sea que podemos afirmar que si las tiene en cuenta. No ser una estrategia definitiva y extraordinaria, pero tiene sentido que existan esas variaciones dentro de un contexto lgico.

3. Encabezados (h1, h2, h3, etc.)

La verdad es que como tantas otras variables, esta ha disminuido su importancia, ya que muchos listos usaban el H1 con estilos CSS para mezclarlo con el texto normal, o incluso ocultarlo. O sea que en realidad la importancia de estas etiquetas ha menguado mucho. Sin embargo vale la pena utilizarlas para tener bien estructurado el contenido de una pgina.

4. Imgenes
Hay un par de puntos a tener en cuenta. El atributo ALT (texto que aparece cuando la imagen no se carga), y el nombre de la imagen. Est comprobado que los dos tienen mucha importancia y correlacin entre sus nombres y el posicionamiento.

5. Negrita/cursiva
Otro de esos puntos que todos los SEO insisten en potenciar tanto, que en realidad no sirve demasiado. Yo prefiero utilizar esas etiquetas para llamar la atencin del lector, que bsicamente es su utilidad. Eso de poner en negrita cada vez que aparece una palabra clave lo veo un prdida de tiempo. Mejor dedicar-se a limpiar el teclado. Bien, en principio eso es todo para empezar! Debemos recordar que eso solo hace referencia a los aspectos relacionados con optimiza el contenido, pero ahora debemos tener en cuenta aspectos tcnicos, como por ejemplo aumentar la velocidad de la web con htaccess, ser muy bueno consiguiendo enlaces, y evidentemente un buen contenido!

Aumentar la velocidad de la web con htaccess

Por Joan Boluda, el 15/05/2010 Modificar el contenido del archivo .htaccess es la forma ms rpida y eficiente de incrementar la velocidad de carga de la web, y mejorar el Posicionamiento Natural en todos los buscadores. Este no pretende ser un manual de utilizacin de htaccess ni mucho menos. Para eso ya hay otras pginas que explican el funcionamiento de este archivo de modo exhaustivo. Simplemente indicar los cdigos que se deben incluir, para que el rendimiento de la pgina incremente de modo notable, para que mejore la posicin en los buscadores. Recordemos, como ya coment en el artculo Como mejorar la rapidez de carga de tu web, que Google usa la velocidad de carga como variable para su ranking. El .htaccess (acrnimo de HyperText Access) es un archivo que se coloca en la raz de tu web (siempre que uses un servidor Apache), que contiene cierta informacin acerca del modo de acceder a los archivos. Del gran abanico de posibilidades que nos permite, hoy nos centraremos en las que mejoran la velocidad de carga: 1. Control de cach: Con esto hacemos que las personas que ya han visitado nuestra pgina y regresen de nuevo a ella, no se bajen de nuevo todos los archivos, sino que utilicen los que ya tienen en cach (guardados en su ordenador). Se debera utilizar en archivos multimedia, scripts, y hojas de estilos. El cdigo es el siguiente:
<FilesMatch "\.(js|css|ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$"> Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT" </FilesMatch>

Con la directiva FilesMatch le estamos diciendo a que tipos de archivo (segn su extensin) se le debe aplicar el cach. Y con la directiva Header le indicamos el Cache-Control como public para que permita cachear pblicamente el archivo, y el Expires, que indica la fecha en la que finaliza el cach. Prefiero utilizar el Expires antes que el max-age porque he visto que no falla en ninguna plataforma, en cambio el max-age tiene problemas en algunas versiones de Internet Explorer. 2. Activar la compresin: La idea es simple: Es ms rpido comprimir un archivo, enviarlo, y descomprimirlo, que no enviarlo directamente sin comprimir. Aunque el proceso es ms complejo, es mucho ms rpido, ya que la informacin comprimida que se enva ocupa mucho menos. El cdigo es el siguiente:
<FilesMatch "\.(js|css|ico|pdf|jpg|jpeg|png|gif|php)$"> SetOutputFilter DEFLATE </FilesMatch>

Una vez ms, con la directiva FilesMatch le decimos a que archivos se le debe aplicar la compresin, y con la directiva SetOutputFilter le indicamos que debe comprimir los archivos con el mod DEFLATE, que es el ms extendido. Si quisiramos comprimirlo todo, simplemente deberamos eliminar la directiva FilesMatch y dejar nicamente la segunda lnea. 3. Desactivar las Etags: Las Etags son una etiqueta o cdigo que se asigna a cada archivo. La idea es que se comprara si la Etag del archivo en el cach del navegador coincide con la del servidor. En caso de ser as, no se descarga el archivo. El problema de las Etags es que se definen con atributos nicos para cada servidor, y muchas veces no coinciden, obligando a descargarse el archivo aunque ya est en cache. Aqu tenemos el cdigo:
Header unset ETag FileETag None

En este caso no las colocamos en una directiva FilesMatch, porque queremos que se anulen en todos y cada uno de los tipos de archivos, sean los que sean.

4. Desactivar el Last-Modified: Desactivando las Etags y el LastModified eliminamos totalmente las peticiones de IfNone-Match y If-Modified-Since, y nos ahorramos las respuestas 304 Not Modified, por lo que el contenido quedar en Cach hasta que el Expires que le hemos dicho en el punto 1 nos diga que ya est disponible.
<FilesMatch "\.(js|css|ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$"> Header unset Last-Modified </FilesMatch>

Este comando tambin se puede incluir en el apartado nmero 1, dentro de la directiva FilesMatch para ahorrar unas lneas de cdigo, ya que se trata del mismo tipo de archivos. Es importante no colocar ah los archivos HTM, HTML y PHP, ya que el contenido que hay en estos es mucho ms dinmico, y actualizado de forma ms frecuente. Es por eso que solo dejamos Last-Modified. 5. Cuatro en uno: As pues, el archivo .htaccess definitivo, en cuanto a gestin de la velocidad de carga de una web, simplificando el cdigo al mximo (al menos, el mximo que yo he sido capaz) es el siguiente:
SetOutputFilter DEFLATE Header unset ETag FileETag None <FilesMatch "\.(js|css|ico|pdf|jpg|jpeg|png|gif)$"> Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT" Header unset Last-Modified </FilesMatch>

Recordemos que el archivo .htaccess solamente funciona en servidores Apache. En caso de que ya exista, no se debe sobrescribir, sino simplemente aadir los cdigos de los apartados descritos anteriormente que no estn ya incluidos.

8 Respuestas a Aumentar la velocidad de la web con htaccess

1. 2. Pingback: Consultor de Marketing Online Uso de Webmastertools como SEO Pingback: Uso de Webmastertools como SEO

3.

Javier says: 06/04/2011 en 12:59 Excelente posts, tan slo tengo una duda (tonta) en cuanto al Header set expires veo que lo tienes puesto a una fecha lejana, pero, y si por ejemplo actualizo el archivo de hoja de estilos css? gracias Responder

Boluda says: 07/04/2011 en 06:53 Simplemente puedes quitar el Header set expires un par de das, para todas las visitas de repetidores. Y las nuevas visitas, o los que fuerzen el cah, ya lo vern bien :)

Responder

4.

Fernando says: 23/10/2011 en 02:59 para no andar cambiando la fecha de espiracin se puede, por ejemplo, hacer que expire cada 2 semanas. # 2 semanas ExpiresDefault A604800 Header append Cache-Control public Responder

5.

Fernando says: 23/10/2011 en 03:03 otra cosa.. No se que tan bueno sea desactivar los etags.. estuve usando YSlow en Google, Facebook y Yahoo y estos sitios tienen habilitados los etags Responder

6.

Ignacio says: 25/11/2011 en 11:13 Esta pregunta es para Fernando en uno de sus comentarios. para no andar cambiando la fecha de espiracin se puede, por ejemplo, hacer que expire cada 2 semanas. # 2 semanas ExpiresDefault A604800 Header append Cache-Control public La pregunta es cmo dejaras el .htaccess terminado con la expiracin dinamica? Gracias. Responder

http://boluda.com/la-pagina-web-perfecta-para-seo/ http://boluda.com/aumentar-la-velocidad-de-la-web-con-htaccess/ http://www.trecebits.com/2012/07/05/anatomia-de-una-landing-page-perfecta-infografia/ http://blog.kissmetrics.com/color-psychology/?wide=1 Otros Espero les ayude. Duende