Con el tiempo, algunas convenciones y las mejores prácticas han sido desarrolladas para ayudar a mejorar la usabilidad general de los sitios web en su diseño y construcción.

Aquí les dejamos diez delitos de usabilidad y algunos de los errores más comunes o áreas pasadas por alto en el diseño web. También una solución alternativa para ayudar a mejorar la usabilidad de tu sitio.

Crimen 1: Etiquetas de formulario que no están asociados a los campos de formulario de entrada

Utilizar el atributo ‘for’ le permite al usuario hacer clic en la etiqueta para seleccionar el campo de entrada apropiado dentro de un formulario. Esto es especialmente importante para los checkboxes y campos de radio para dar un área de “cliqueo” más grande; es una buena práctica.

Crimen 2: un logotipo que no está asociado a la página principal

Vincular el logo de un sitio web a la página principal se ha convertido en una práctica común y la mayoría de los que navegan la web están acostumbrados a hacer clic en el logo para volver al inicio. También vale la pena mencionar que el logo debe aparecer en la parte superior izquierda.

Crimen 3: No especificar un estado de vínculo visitado

Los Estados de vínculos visitados hacen exactamente lo que su nombre indica. No es el selector CSS más avanzado, pero es uno que a menudo se pasa por alto. Dar a los usuarios una pista visual, para que sepan qué enlaces ya han sido visitados.

Crimen 4: No indicar un campo de formulario activo

Puedes utilizar el selector “Focus”en muchos de los elementos, pero es muy útil cuando se utiliza en las entradas y áreas de texto para indicar que el campo está activo. Añadan estilo CSS, como los bordes resaltados, o un sutil cambio en el color de fondo..

Crimen 5: Una imagen sin una descripción alt

Esta es alejarse un poco del ámbito de la accesibilidad, pero sigue siendo una consideración importante. Recuerden que siempre debe añadir un atributo “alt” descriptivo a sus imágenes, a menos que, por supuesto, se utilicen para fines decorativos, en estos casos el atributo ALT se puede dejar vacío (pero aún debe existir). Al utilizar una imagen como un vínculo, escriba una descripción del lugar donde va el enlace.

Crimen 6: Una imagen de fondo, sin un color de fondo

Es común el uso de imágenes de fondo detrás de los pasajes de texto, pero vale la pena recordar que si las imágenes de fondo son deshabilitadas por el usuario, tiene que haber un tono similar en el color de fondo del formulario para evitar que el texto sea ilegible.

Crimen 7: Uso de largos pasajes aburridos de contenido

No hay nada más desalentador que caer en una página web que está prevista como un paso continúo de texto. Dividan su contenido con imágenes, títulos y secciones claras para hacer más fácil de buscar, leer y digerir.

Crimen 8: Cosas subrayadas que no son enlaces

Todo el mundo sabe que el texto que está subrayado o es de un color diferente, es probable que sea un enlace. No confundan a la gente poniendo texto subrayado en otra parte! Para llamar la atención sobre una determinada palabra, intenten utilizar la negrita o usen la etiqueta em para dar énfasis.

Crimen 9: Decirle a la gente que “haga clic aquí”

Las palabras, “hagan clic aquí” han existido desde los inicios de Internet, pero han sido rechazadas en favor de opciones más útiles. El uso de las palabras, “haga clic aquí” requiere que el usuario lea la frase completa para saber qué va a suceder. En su lugar, describan lo que va a suceder en el texto verdadero del link.

Crimen 10: La utilización de texto justificado

Este es otro consejo que va un poco más allá de la accesibilidad, pero también es un punto importante a considerar. El texto justificado puede lucir limpio a la vista, pero puede generar algunos problemas de legibilidad real, especialmente para los usuarios disléxicos que pueden encontrarlo molesto para identificar palabras debido a la separación desigual de los párrafos justificados.

Fuente: Line 25

En esta nota, te mostramos 13 infografías que presentan información y datos útiles para todos los trabajadores de la web, y para ti también ya que puedes utilizarlas como fuente de inspiración en tus diseños.

The Internet’s Undersea World

Haz clic aquí para ingresar en The Internet’s Undersea World»

Search Benefits of the Blogosphere

Haz clic aquí para ingresar en Search Benefits of the Blogosphere»

The Life Cycle of a Blog Post

Haz clic aquí para ingresar en The Life Cycle of a Blog Post»

50 Repetitive & annoying Website Intros Examined

Haz clic aquí para ingresar en 50 Repetitive & Annoying Website Intros Examined»

Web Trends

Haz clic aquí para ingresar en Web Trends»

Map of Online Communities

Haz clic aquí para ingresar en Map of Online Communities»

What People are Doing Online

Haz clic aquí para ingresar en What People are Doing Online»

Global Traffic Map

Haz clic aquí para ingresar en Global Traffic Map»

Periodic Table of Typefaces

Haz clic aquí para ingresar en Periodic Table of Typefaces»

The Exploding Internet

Haz clic aquí para ingresar en The Exploding Internet»

The Web Life of an Article

Haz clic aquí para ingresar en The Web Life of an Article»

Yahoo YDN Metro Map

Haz clic aquí para ingresar en Yahoo YDN Metro Map»

World Map of Social Networks

Haz clic aquí para ingresar en World Map of Social Networks»

Fuente: Web Design Ledger

Los lectores deben seguir pasos, leer código, visualizar demos o examinar imágenes. En esta nota te daremos algunos tips para hacer más eficientes tus tutoriales.

1. Hazlo breve pero directo

Seamos honestos, muy pocos lectores van a leer el tutorial completo. Como con cualquier contenido web, analizarán el contenido en lugar de leerlo. Sólo si encuentran interés en lo que estás mostrando es que lo van a leer. Evita los párrafos largos y las serie de párrafos sin fragmentos de código o de imágenes. También evita describir cada pequeña cosa que el usuario debe hacer, sino más bien muestra los puntos clave en el camino hacia la realización del tutorial. Sin embargo, no debes omitir nada importante. Por ejemplo, es importante explicar cómo un elemento será animado con jQuery, pero es completamente innecesario explicar y mostrar la estructura de cada línea de código HTML o CSS usado en el Tutorial.

2. Explica cada tarea de forma corta

Debes ser capaz de explicar cada tarea en unas pocas frases sencillas. Einstein dijo: “Si no lo puedes explicar simplemente, no lo entendiste lo bastante bien”. Imagina lo que piensan los lectores de tu conocimiento del tema y la forma en que lo entenderían. Si lo has hecho demasiado largo, vuelve atrás y reescríbelo.

3. Sepáralo en pasos lógicos

Esto ayudará a los usuarios a leer y seguir el tutorial con más facilidad, y volver a un paso específico, si lo necesitan. Cada paso debe contener varias tareas después de las que lector podrá ver realmente algún resultado.

4. Incluye código pero no lo sobrecargues

Si tienes código para mostrar, hazlo, pero no pegues el demo completo en el tutorial. Nadie va a estar interesados en leer pantallas de código. Muestra sólo los fragmentos clave. Los lectores que estén interesados en el código completo echarán un vistazo a la demo o descargarán el código fuente. Lo que nos lleva a la siguiente sugerencia.

5. Provee demos

Siempre intenta poner demos a disposición de los usuarios. Muchos de los usuarios ven primero el demo y si les interesa, siguen leyendo el tutorial. No te olvides de poner un link al tutorial en cada página del demo para que los usuarios puedan volver a éste con facilidad.

6. Visualiza las tareas más complejas

También puedes proporcionar imágenes que expliquen las tareas más complejas o pasos a seguir. Cuando los lectores ven una demostración, entenderán cómo funciona, pero se entiende cómo se hace solamente si leen la demo o ven la imagen explicando el proceso de creación. Estas imágenes también ayudan a los lectores a visualizar algunos pasos o el tutorial completo.

7. Siempre brinda código fuente

A algunos lectores les gustaría tener el código del tutorial disponible offline. De esta manera pueden examinar el código, incluso si no son capaces de acceder a su tutorial por cualquier razón. Debes comprimir los archivos y dar un nombre significativo al archivo comprimido. Lo mismo se aplica a todos los demás archivos. También deberías incluir un enlace al tutorial en sus páginas de demostración para que el lector pueda volver fácilmente si es necesario.

8. Pon los links de descarga y demos en lugar prominentes

Este es uno de los aspectos más importantes. Es importante colocar el demo al principio del artículo y de forma prominente. La posición es usual es debajo de una pequeña introducción y/o imagen pero antes del primer paso del tutorial. Hemos probado 3 versiones diferentes del mismo tutorial:

* Tutorial con un link de demo prominente en la parte superior del mismo.

* Tutorial con un link plano al demo en la parte superior.

* Tutorial con un link a la página demo colocado al final del mismo.

La primera versión es la que mejores resultados tuvo.

9. Únete a la discusión

Una vez que publicas el tutorial tu trabajo no termina. Los lectores tendrán diferentes opiniones sobre éste, puede que lo critiquen o que hagan sugerencias. Contesta los comentarios. Así, les mostrarás a los usuarios que te importa su opinión y que tus tutoriales están ahí realmente para ayudar.

10. Actualiza el tutorial si es necesario

Si te equivocaste en algo, o si alguien realiza una mejora, modifica tu tutorial. Esto logrará satisfacer a los usuarios que han notado alguna falla y motivará a otros a leer tus tutoriales y comentar acerca de ellos.

¿Qué esperas para crear tus propios tutoriales?

Fuente: Janko at Warp Speed

Entre el 16 y 19 de Septiembre todo desarrollador web, apasionado con las tecnologías de la web 2.0 podrá formar parte de Web 2.0 Expo NYC que tendrá lugar en NY, Javits Center.

Ya sea que seas nuevo en Ajax, Ruby, el etiquetamiento, la programación meta o un experto construyendo startups desde cero, adéntrate en la Experiencia Web 2.0.

¿Qué temas se tratarán?

Algunos de los temas de mayor importancia son los protocolos a tiempo real, HTML5, el aprendizaje de la máquina, el desarrollo de tiendas de aplicaciones y de aplicaciones móviles, entre otros.

• Entre las charlas ya programadas se encuentran:
• Simple es difícil
• CSS escalable para desarrolladores
• Tiendas de aplicaciones móviles: la perspectiva del desarrollador
• HTML5: Abre nuevos gráficos, animaciones y videos con SVG

¿A quién apunta el evento?

Web 2.0 Expo está especialmente pensada para los constructores de la nueva generación web: diseñadores, desarrolladores, empresarios, estrategas de negocios y todo aquel que tenga pasión por aprender y compartir experiencias.

Regístrate ahora para asistir a Web 2.0 Expo NY»

¿Qué esperas para ser parte de la experiencia Web 2.0?

Este evento tendrá lugar el próximo 20 de octubre de 2009 de 9:00 a 20:30 hrs, en Paseo La Plaza; en la Ciudad Autónoma de Bs.As, Argentina. En esta nota te contamos en qué consiste.

¿Qué es el e-Commerce Day?

Es un encuentro nacional que tiene como fin la difusión de los alcances e importancia que tiene el Comercio y Negocios Electrónicos en la Economía y mejora de la competitividad de las empresas y emprendimientos. Facilitando un ámbito para aquellas empresas y personas que están en el mundo de los negocios por internet pueden intercambiar experiencias y soluciones brindando también un canal de colaboración con aquellos interesados en ingresar activamente y aprovechar los beneficios de la Economía Digital.

¿A quién está enfocado?

- Personas entre 15 y 50 años
- Estudiantes secundarios y universitarios
- Gerentes Generales y Comerciales de Pymes
- Gerentes de IT de grandes empresas
- Emprendedores

¿Qué incluye la inscripción?

La inscripción al evento es arancelada e incluye acceso a todas las actividades de networking social y de negocios que se llevaran a cabo durante la jornada: e Coffee breaks , e Lunch, e after-hour y la entrega de los eCommerce Awards además de los materiales y acceso a una beca especial para el Curso Online “La Claves de los Negocios por Internet”

Haz clic aquí para registrarte»

Si no puedes asistir no te preocupes. Ya que desde este link podrás ver el evento en vivo.

Suena prometedor ¿Verdad?

Pero existen maneras más sencillas de revisar los comentarios que recibes, sin tener que chequear tus feeds varias veces al día ¿Te interesa saber más? En esta nota te mostramos algunas aplicaciones con estos fines.

1. Feed My Inbox

Feed My Inbox es completamente simple de usar y gratuito. Sólo debes ingresar el website o la URL del feed del cual deseas recibir actualizaciones y casi estás listo.

Luego, debes ir a FeedMyInbox e ingresar tu feed (mencionado anteriormente) y tu dirección de email. Una vez que te hayas suscripto, revisa tu correo y haz clic en el link de confirmación para activar el servicio. Ahora sí ¡Listo!

Pros

* Súper simple de usar, toma segundos.

* Gratuito.

* Funciona en websites y feeds URLs.

* Incluso si el feed se actualiza 20 veces en el día, sólo recibirás un email.

Contras

*Sólo se envían actualizaciones una vez cada 24 horas para reducir el spam.

Haz clic aquí para ingresar a la web de Feed My InBox»

2. RSS 2 Email

RSS 2 email es un software completamente gratuito que te permite integrar feed RSS a tu cliente e-mail de elección. RSS2Email es de código abierto y funciona directamente con tu cliente de correo para permitirte obtener notificaciones y actuar de Puente en la brecha entre tu cliente de e-mail y los feeds RSS.

RSS2Email funciona tanto en sistemas basados en Windows con en UNIX, y puede leer cualquier feed RSS o ATOM.

Pros

* Funciona en Windows y UNIX

* Compatible con servidores POP e IMAP

* Gratuito y de código abierto

* Maneja cualquier formato RSS o ATOM, incluyendo caracteres no ingleses.

Contras

* No es un servicio basado en la web, debes descargar e instalar el software en la computadora y configurarlo con tu cliente de e-mail de elección.

Haz clic aquí para ingresar a la web de RSS 2 Email»

3. Blog Alert

Blog Alert es otra aplicación web de RSS a e-mail muy simple y gratuita. Blog Alert no necesita siquiera ningún tipo de descarga o programación de cuenta, simplemente ingresa el feed y tu e-mail y listo.

Una cosa que hay que notar con Blog Alert es que debes asegurarte de ingresar la URL del feed RSS, no el feed del sitio web. Si bien algunas herramientas están capacitadas para detector el feed, Blog Alert no ofrece esto.

Pros

* Simple, toma sólo segundos comenzar a trabajar.

* Free.

Contras

* Falta información.

Haz clic aquí para ingresar a la web de Blog Alert»

4. NewsGator

NewsGator es un producto Microsoft Outlook específico que integra feeds RSS e e-mails. Si utilizas Outlook a menudo, NewsGator puede ser la mejor opción para ti.

Puedes obtener alertas RSS, actualizaciones y feeds todo desde dentro de Outlook usando NewsGator. Si eres un usuario Outlook, prueba esta servicio que no te vas a arrepentir.

Pros

* Se integra en Outlook, un cliente de e-mail muy popular.

* Se encuentra muy bien pulido.

* Recibe actualizaciones, añade nuevos feeds y lee feeds todo desde el Outlook.

Contras

* Específico para Microsoft/Outlook. No funciona con otros clientes de e-mail.

* No es gratuito, cuesta $29.

Haz clic aquí para ingresar a la web de News Gator»

5. Reblinks

Reblinks es un Puente que manda los RSS al Email, se trata de otro servicio web gratuito que se enfoca en la simplicidad y funcionalidad. Dirígete a la página de inicio e ingresa la URL del feed y el e-mail al que deseas que se manden las actualizaciones, luego haz clic en “Submit”. Sal a pasear un rato y al volver ¡Ya tendrás los feeds en tu casilla de correo!

Reblinks se encuentra todavía en Beta por lo que puede que tenga algunos problemas o bugs, pero nada demasiado malo.

Pros

* Gratuito.

* Simple y fácil.

Contras

* ¿Confiabilidad? Antes de depender completamente en este servicio es necesario tener presente que el mismo se encuentra en etapa Beta.

* Además, falta información en la página. ¿Existen restricciones? ¿Cuán a menudo se mandan las actualizaciones?

Haz clic aquí para ingresar a la web de Reblinks»

RSS a SMS

Hasta el momento hemos visto algunos productos geniales de software y aplicaciones web que permiten enviar las actualizaciones de RSS a tu dirección de correo electrónico. Pero hoy en día no siempre tenemos nuestras computadoras portátiles a mano cuando lo necesitamos. Para la última parte de este artículo nos centraremos en los servicios que te permiten enviar actualizaciones RSS directamente en tu teléfono celular a través de SMS. Imagina ser notificado al instante en tu teléfono cuando estás con tus amigos, y alguien te ha hecho un comentario (esperemos que positivo).

6. PeekFeed

PeekFeed es un servicio de RSS a SMS que luce muy bien. PeekFeed es completamente gratuito y manda cualquier tipo de actualización RSS que hayas programado directo a tu dispositivo móvil.

Para comenzar, sólo dirígete a la página de PeekFeed y crea una cuenta nueva. Una vez que la hayas creado, puedes programar todas las propiedades de usuario y añadir los feeds de los cuales deseas recibir notificaciones. PeekFeed incluso te permite seleccionar cuán a menudo deseas recibir las actualizaciones. Puedes elegir por minuto, hora, día y así.

Pros

* Gratuito.

* Fácil de usar y recibir.

* Propiedades de actualización personalizables (minuto, hora, día etc).

Contras

* Ninguna que se nos ocurra.

Haz clic aquí para ingresar a la web de PeekFeed»

7. Pingie

Por último, pero ciertamente no menos importante, es el servicio RSS a SMS muy popular, Pingie. Pingie te permite introducir su número de teléfono, correo electrónico y la dirección del sitio web para empezar a recibir las actualizaciones al instante.

Pingie se ha conocido como una aplicación RSS a SMS confiable desde hace un tiempo, e incluso te permite comprobar el estado de todos sus servidores en su página de estado. Fuera de las aplicaciones RSS a SMS, Pinige parece ser la que más usa la gente.

Pros

* Gratuito.

* Interface de usuario simple e intuitiva.

* Confiable y abierto, en el sitio hay una gran cantidad de información para leer.

Contras

* Podrá ser que hay que pagar los mensajes de texto que recibimos, pero eso no difiere de cualquier otro servicio que manda SMS.

Haz clic aquí para ingresar a la web de Pingie»

Fuente: In The Woods

Un error 404 en un sitio web es lo que responde un servidor cuando se atasca al tratar de poner a nuestra disposición un recurso que no puede encontrar.

Por lo general se suele incorporar algo gracioso en estas páginas para desviar la atención del usuario. A continuación les dejamos una lista con varios consejos para que tu página 404 no sea una completa pérdida de tiempo.

1. Debe tener concordancia con el diseño de tu sitio

Si no le especificas a tu servidor web qué debe mostrar cuando maneja errores 404, mostrará una página de error plana y genérica. Una página 404 debería lucir como una página de error, pero también debería lucir como tu sitio. Si estás utilizando un CMS probablemente ya se ha encargado de esto por ti. Pero si posees un sitio estático, puedes especificar un template 404 a través de tu archivo .htaccess.

2. Discúlpate

Nadie está tratando de llegar a tu página 404 adrede. Seguramente llegaron a ella por un mal enlace de tu propio sitio o fuera de su voluntad. Probablemente no estarán muy felices con esto, por lo que es la oportunidad de oro para pedir disculpas y esperar que el ceño fruncido de los usuarios desaparezca.

3. Búsqueda

Es posible que la página que están buscando todavía existe, y que sea sólo que la URL de la misma ha cambiado o que fue tipeada incorrectamente en algún lugar. Dado que tu sitio debería poseer búsquedas de todas formas, ésta es un buen momento para poner a disposición del usuario la caja de búsqueda para que encuentren el enlace al que estaban intentando llegar.

4. Dale a los usuarios links útiles

Quizá la página que están enlazando no está rota, sino que no existe más. Sumada a la búsqueda, puede que te convenga añadir algunos links que les puedan resultar útiles. Quizá links a la página de inicio, a la página e archivo o a otras páginas de tu sitio que sepas que son comúnmente visitadas.

5. Una forma de contacto para reportar el error

Es posible que al enfrentarse con un error 404 los usuarios se preocupen, enojen o tengan algún comentario para hacerte al respecto, por lo que puede ser buena idea incluir un formulario de contacto. Y esto también resultará bueno para tí, porque te pondrás al tanto del problema que está ocurriendo en tu sitio y lo podrás solucionar cuanto antes.

6. Reporte automático

Poner a disposición de los usuarios un formulario para que te informen del error es muy bueno, pero sólo un pequeño porcentaje de los lectores se tomará la molestia de avisarnos acerca del problema. Otra alternativa para esto es hacer que la página 404 nos reporte el error automáticamente. Una forma rápida de lograrlo sería hacer de nuestra página 404 un archivo PHP, y utilizar la función de email para enviarte un correo con la URL en la que se aterrizó.

NOTA: El código de arriba probablemente será bueno para un sitio pequeño pero no resulta práctico en sitios de mucho tráfico. En esas circunstancias será mejor escribir los errores a una base de datos.

7. Humor

Incluso los sitios más serios pueden añadir algo de humor en su página 404. Esta página es definitivamente una buena oportunidad para relajarse un poco y hacer algo gracioso.

8. ¿Redireccionar?

Podrías optar por redireccionar el error 404 a otra página. Quizá a la página de inicio que muestre un mensaje sobre el error, o a la página de búsqueda con las palabras claves de la URL que no funcionó.

9. Tamaño de archivo

Te sorprendería saber la gran cantidad de actividad maliciosa con la que debe tratar tu servidor web. Suelen haber muchos pedidos de archivos “raros”, que al no aparecer hacen que tu servidor cargue la página 404. No es necesario aclarar que la aparición de una página completa para todas estas requests añade serios problemas de ancho de banda. Para esto tu mejor apuesta es pelear contra estos pedidos maliciosos, pero también deberías tomar en consideración el tamaño total de tu página 404 y reducirlo si el ancho de banda es una preocupación mayor.

Fuente: CSS Tricks

Dejar de utilizar la búsqueda común de Wordpress en nuestro sitio web y pasar a utilizar la búsqueda personalizada de Google es algo bastante sencillo de implementar.

Pero le pregunta es ¿Vale la pena? Según nuestra opinión, si bien ambos servicios tienen sus pro y sus contra, no se puede dejar de lado una realidad bien conocida: Google es sencillamente un motor de búsqueda magnífico.

La prueba: números de búsquedas

Si un tipo de búsqueda motiva más a la gente a realizar nuevas búsquedas, esto quiere decir que está haciendo un mejor trabajo que el otro.

Google rastrea automáticamente estadísticas en tus motores de búsqueda (Debes ir a google.com/cse > Manage Existing Search Engines > Statistics). Para rastrear la búsqueda WordPress puedes utilizar el plugin Search Meter de Bennett McElwee.

Una cosa que hay que notar es que la caja de búsqueda en este diseño es bastante no-obstrusiva y díficil de localizar, por lo que el número de búsquedas es bastante bajo. Esto hace que lo resultados sean menos confiables estadísticamente, pero como verás, más allá de esto, hay una clara tendencia:

Búsqueda WordPress:

• Agosto- 102
• Septiembre - 92
• Octubre - 82
• Noviembre - 109

Búsqueda personalizada Google:

• Enero - 131
• Febrero - 140
• Marzo - 136
• Abril - 142
• Mayo - 131

El número de búsquedas promedio para Wordpress fue 96, y para Google 136. Eso significa 40 búsquedas extra por mes sólo porque la gente vio el logo de Google. No parecerá mucho, pero en estos pequeños números implica un aumento de un 42% sobre el promedio de Wordpress.

Razones para quedarse con Wordpress

Deberás hacer muchas más pruebas con más sitios y usuarios, pero a pesar de eso, los números mencionados anteriormente son bastante perjudiciales para Wordpress. Por eso, a continuación les dejamos algunas razones por las que vale la pena utilizar la búsqueda Wordpress:

• No tiene publicidades - Google llena tu página de resultados con molestas publicidades.
• Control sobre el diseño - Al crear el archivo search.php en tu theme puedes hacer que los resultados se muestren de la forma que más te guste. Puedes mostrar thumbnails, utilizar extractos, o cualquier otra cosa que prefieras.
• Efectos especiales - Con Wordpress son posibles ciertos efectos como el resaltado de los términos de búsqueda, la paginación, texto de búsqueda dinámico y otros trucos, porque en verdad tienes el control.

Conclusión

En conclusión, Wordpress nos permite encargarnos verdaderamente del diseño de nuestra página de resultados, pero en contraposición, en relación a la calidad de los resultados, Wordpress se queda atrás por el momento.

¿Ustedes qué piensan al respecto? ¿Han considerado dejar la búsqueda Wordpress en manos de un sistema diferente?

Fuente: Pro Blog Design

Si tu sitio tarda eternidades en cargar, eso no es nada bueno. No quieres jugar con la paciencia de tus lectores antes de que hayan siquiera ingresado a tu sitio.

En este post vamos a explorar 10 formas distintas para mejorar la velocidad de carga de tu sitio web. Y como ninguno de estos consejos es complicado, no tienen excusas para no implementarlos.

1. Borra cualquier plugin no deseado

Si tu sitio está cargando lento, fíjate cuántos plugins estás utilizando. Si la respuesta es más de diez, fíjate si no puedes integrar alguno directamente a tu tema. Mientras tanto, asegúrate de que verdaderamente los necesites y sino, bórralos.

Los plugins enlenteces la carga de tu blog. Intenta no tener más de 5 plugins habilitados.

2. Remueve etiquetas PHP inncesarias

Si no eres el autor del theme que estás utilizando, hay muchas chances de que esté lleno de php que no necesitas. Echa un vistazo en el archivo header.php y otros archivos del tema y te sorprenderá la gran cantidad de queries innecesarias que puedes eliminar.

3. Utiliza WP Super Cache

Instalar WP Super Cache plugin es una de las mejores formas de hacer que tu WP sea más rápido. Este plugin cachea tu sitio para una carga super rápida. Sólo debes instalarlo y olvidarte del tema.

4. Optimiza tu base de datos

La forma manual: Debes ingresar a cPanel, encontrar phpMyAdmin, seleccionar tu base de datos, hacer clic en ‘check all’ al final de la página y seleccionar ‘Optimize database’ en el drop down.

La otra opción es usar el plugin Optimize DB de yoast.com.

5. Optimiza tus imágenes

Optimizar tus imágenes te permitirá aumentar tu ancho de banda y mejorar el tiempo de carga de tu web.

Ahora, cada vez que guardes una imagen en Photoshop, asegúrate de hacerlo con la opción “Guardar para la Web” (Save for Web and Devices) en el menú de archivo. También puedes seleccionar la opción de guardar como JPG y disminuir la calidad de la imagen en “Opciones de la imagen”.

Si no manejas Photoshop, puedes utilizar el editor de imágenes gratuito GIMP y guardar el archivo como JPG. Automáticamente se te darán opciones para comprimir el archivo.

6. Comprime tu CSS y JavaScript

Para comprimir tu CSS puedes usar herramientas online como styleneat.com, que se encargará de eliminar el espacio en blanco y anidará todo. Puede que al principio no notes ninguna diferencia, pero te ayudará mucho en el tiempo de carga de tu sitio.

Otra cosa que puedes hacer es poner todo tu JavaScript en un solo archivo y luego subirlo al final de la página (en el archivo footer.php).

7. Deshabilita el Hotlinking

Puedes deshabilitar el hotlinking por medio del archivo .htaccess (que encontrarás en la ruta de tu directorio).

Primero, haz una copia de respaldo de tu archivo .htaccess. Luego, añade las líneas de código que se encuentran debajo, cambiando las líneas apropiadas para que vayan con tu blog. La última línea es una imagen que se mostrará en su lugar.

1.#disable hotlinking of images with forbidden or custom image option
2.RewriteEngine on
3.RewriteCond %{HTTP_REFERER} !^$
4.RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC]
5.#RewriteRule \.(gif|jpg)$ - [F]
6.RewriteRule \.(gif|jpg)$ http://www.yourdomain.com/stealingisbad.gif [R,L]


8. Mantén lejos a los spammers

El archivo .htaccess es una herramienta muy útil, no sólo detendrá el hotlinking, sino que también se puede utilizar para mantener a los spammers lejos al bloquear referencias de ciertos sitios.

En Perishable Press, han compilado más de 8000 referrers de los spammiest, que puedes bajar desde aquí y sólo deberás copiar y pegar en tu archivo .htaccess.

9. Deshabilita las revisiones de posts

Las revisiones de post, introducidas en WordPress 2.6, no han sido un gran éxito, especialmente con aquellos que tienen un blog de un solo autor.

¿Por qué hacen lento tu sitio? Cada vez que guardas un post, una nueva fila es creada en tu tabla wp_posts table, por lo que si guardas 10 veces tu post, son 10 nuevas filas creadas.

10. Lecturas adicionales

Algunos otros artículos relacionados:

AndBreak.com: Guía para acelerar WordPress

WPCandy: 4 formas simples de acelerar WordPress

Lorelle on WordPress: Las 3 formas más fáciles de acelerar WordPress

Yoast.com: Acelera WordPress, y límpialo también!and clean it up too!

Noupe.com: 13 grandes consejos para acelerar WordPress

Si conoces otra forma de acelerar un blog, no dudes en dejar tu comentario.

Fuente: Pro Blog Design

Existen ciertos pasos básicos que deben seguirse con cualquier instalación WordPress nueva. No todos los blogs WordPress serán iguales, pero existen configuraciones esenciales que deberían hacerse sin importar temática o estilo.

A continuación les dejo 10 pasos esenciales para realizar luego de cualquier instalación WordPress, incluyendo una lista de 10 plug-ins que todo sitio debe tener incorporados.

Paso 1 - Cambia la estructura de Permalinks

Si te diriges a Settings > Permalinks, notarás que el Permalink por defecto es http://site.com/?p=123. Esta estructura no sólo no es buena para el SEO de tu blog sino que tampoco le dice nada a tus visitantes acerca del sitio que están viendo.

Sugeriría una estructura personalizada utilizando sólo el título del post (http://site.com/title-of-article) el cual proveerá palabras claves para los motores de búsqueda y le dará a los lectores algo que hacer.

Para cambiar la estructura de tus permalink selecciona Custom Structure y pega /%postname% en la caja. Si deseas añadir también la categoría pega /%category%/%postname%

Paso 2 - Configura Autores

Como en el próximo paso vamos a eliminar la cuenta de administrador por razones de seguridad, es hora de programar autores para tu blog. Para hacer esto debes ir a Users > Add New y llenar el formulario. Asegúrate de ponerte a ti mismo como administrador.

Paso 3 - Arregla los problemas de seguridad

Existen algunos asuntos menores de seguridad que es necesario manejar en una nueva instalación WordPress. Estos son:

Deshabilitar la publicación remota: A menos que utilices un editor de blog externo es recomendable deshabilitar tanto la publicación Atom como la SML-PRC. Estas configuraciones se encuentran en: Settings > Writing.

Remover la cuenta de administrador: Los hackers saben que esta cuenta es añadida automáticamente por defecto y asignada ID#1 haciendo que éste sea un fácil punto de partida para ellos. Para hacer esto debes ir a Users, y con el mouse sobre la cuenta admin hacer clic en Delete.

Deshabilitar posteo por medio de e-mail: Esto también se encuentra en Settings > Writing. Si no planeas postear por email, no pongas información real en esta sección.

Crea un archivo index.html en blanco para esconder directorios: Pon este archivo en todos los directorios que no quieras que la gente pueda navegar. De esta forma, si alguien carga un directorio, sólo verán una página en blanco en lugar del contenido del mismo.

De forma alternative, puedes utilizar htaccess para prevenir que la gente navegue tus directorios.

Paso 4 - Configura las propiedades de Discusión

Primero debes ir a Settings > Discussion

El área de discusión posee algunas opciones importantes que deberás programar de acuerdo a tus gustos personales. Veamos un poco de qué se tratan:

• Notifica a los blogs cuando linkees uno de sus artículos: notificará a cualquier otro blog WordPress de que has hecho un link a uno de sus artículos con un pingback.
• Permitir notificaciones por link de otros blogs (pingbacks y trackbacks): Esto te notifica si cualquier otro blog WordPress te linkea y añade un pingback/trackback a los comentarios del artículo que fue linkeado.
• Permite que las personas posteen comentarios en tu artículo: Esta es una preferencia totalmente personal. Si deseas permitir comentarios en tu blog selecciónalo.
• El autor del comentario debe llenar su nombre y mail: Es recomendable seleccionar esta opción para reducir el spam de los comentarios.
• El usuario debe estar registrado y haber ingresado a la cuenta para comentar: Si posees un sitio en el cual es necesario registrarse seguramente desearás seleccionar esta opción para reducir el spam.
• Cierra automáticamente los comentarios en posts que tengan más de “-” días: Algunos bloggers deciden cerrar comentarios para los posts más viejos para no tener que estar revisando constantemente todos los posteos. Si deseas implementar esta estrategia, sólo debes programar la cantidad de días después de los cuales quieras que se cierren los comentarios.
• Habilita comentarios threaded (anidados) en X niveles de profundidad: Los comentarios Threaded son una nueva característica de WordPress. Si deseas usarlos, primero debes asegurarte que tu tema los soporte, luego selecciona esta caja y configura el número máximo que deseas que se muestre en tu blog.
• Divide comentarios en páginas con - comentarios por página y la “página X” mostrada por defecto. Los comentarios deberían ser mostrados con el “X comentarios” en la parte superior de cada página: Si tienes un blog muy activo que recibe muchos comentarios seguramente desearás seleccionar esta opción. Los comentarios serán divididos en páginas con la última página mostrada y los comentarios más viejos en la parte superior de cada página.
• Envíenme un mail cuando alguien realice un comentario: Es útil cuando no tienes mucho tráfico en tu sitio y deseas saber si alguien realiza algún comentario nuevo.
• Envíenme un mail cuando un comentario esté esperando moderación: Esta opción es recomendable si deseas moderar los comentarios tan pronto como sea posible.
• Antes que un comentario aparezca, un administrador siempre debe aprobar el comentario: Algunas personas seleccionan esta opción para evitar spam o comentarios inapropiados.
• Antes que un comentario aparezca, el autor del comentario debe tener un comentario previamente aprobado: Si un comentador nunca antes escribió en el sitio, su primer comentario deberá ser moderado.

Paso 5 - Actualiza tu lista Ping

Para actualizar tu lista ping debes ir a Settings > Writing y scrollear hacia abajo hasta Update Services. Asegúrate que, por lo menos, Pingomatic (http://rpc.pingomatic.com/) se encuentre en tu caja de Update Services. Estos son otros servicios que también sería bueno que sean notificados cuando añadas contenido nuevo a tu blog:

http://api.moreover.com/RPC2
http://bblog.com/ping.php
http://blogsearch.google.com/ping/RPC2
http://ping.weblogalot.com/rpc.php
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://ping.bloggers.jp/rpc/
http://rpc.pingomatic.com/
http://rpc.weblogs.com/RPC2
http://rpc.technorati.com/rpc/ping
http://topicexchange.com/RPC2
http://www.blogpeople.net/servlet/weblogUpdates
http://xping.pubsub.com/ping

Paso 6 - Configura Feedburner

Configurar tu feed Feedburner no sólo te da más opciones sino que también te permite mantener un registro de tus estadísticas. Ingresa en Feedburner, abre tu cuenta, ingresa la dirección de tu blog y selecciona “Next” para añadir un feed de feedburner en tu blog.

Paso 7 - Sube y activa tu tema

Cualquiera sea el theme que selecciones deberás subirlo y activarlo.

Primero deberás conectarte con tu host vía FTP e ir a la carpeta donde tienes instalado tu blog. Ve a wp-content > themes y sube tu tema. Luego, para activarlo deberás ir a Appearance y hacer clic sobre el tema que quieres activar.

Esto hará que aparezca una ventana con una pre-visualización del tema que deseas activar. Haz clic en Activate “Theme” y listo.

Paso 8 - Programa Analytics

Google Analytics es uno de los mejores servicios de estadísticas gratuito disponible. Para programar tu cuenta debes ir a Google Analytics y registrarte con tu cuenta Google. Ahora sólo debes añadir tu sitio.

NOTA: No te preocupes todavía por insertar el javascript en tus páginas, el plug-in Google Analytics se ocupará de ésto por ti después.

Paso 9 - Edita la página “About”

Existe una página genérica “About” por defecto. Sin embargo, para personalizarla realmente deberás ir a Pages, pasar el mouse sobre About y hacer clic en Edit.

Es recomendable poner un poco sobre en qué consiste el blog, algo de información personal sobre ti y una foto bonita. Los lectores se sienten más comodos si saben un poco sobre el autor del blog.

Paso 10 - Instala y activa algunos plugins

Si bien WordPress es una plataforma muy completa, los plugins que te dejamos a continuación son verdaderamente esenciales.

Para instarlos deberás descargarlos. Luego, vía FTP, ir a la carpeta en que está instalado WordPress, ir a wp-content > plugins, y subir los plugins que deseas instalar en esta carpeta.

Para activarlos debes ir a Plugins y hacer clic en Activate. Todo plugin que tenga programación, tendrá ahora sus propiedades en Settings.

Plugin 1 - Akismet

Akismet es uno de los mejores filtros de spam y como viene pre-instalado en tu blog sólo deberás activarlo. Una vez activado te pedirá tu clave API de WordPress. Si ya tienes una de otro sito, puedes utilizarla. Si no posees una clave, registrarte en WordPress API Keys para conseguir una. Una vez que la tengas deberás ir a Plugins > Akismet Configuration, ingresar la clave y hacer clic en Update Options.

Plugin 2 - Permalink Redirect

Permalink Redirect se asegura que haya sólo una URL para cada entrada de tu blog.

Plugin 3 - All in one SEO Pack

All in one SEO Pack te brinda opciones para optimizer tu blog WordPress para los motores de búsqueda que la instalación básica de WordPress no tiene. Para la programación básica deberás ir a Settings > All In One SEO y completar Title, Description y Keywords de tu blog. Las otras opciones es mejor dejarlas como están por defecto.

La otra mitad de este plugin actúa cuando escribes un nuevo posteo en tu blog. Cuando estás editando un post o una página, si scrolleas hacia abajo hasta el final de la página, verás una sección para All In One SEO Pack donde puedes añadir el título, descripción y palabras claves para cada página, o deshabilitar el SEO para ellos.

Plugin 4 - WordPress Automatic Upgrade

WordPress Automatic Upgrade Plugin te advierte cuando una nueva versión de WordPress está disponible y te permite realizar un back-up de tus archivos y actualizar sólo con presionar un par de botones.

Plugin 5 - Google Analytics for WordPress

El plugin Google Analytics for WordPress rastrea y segmenta automáticamente todos los links salientes desde los posts, links de comentarios de autor, links dentro de comentarios, y descargas. Esto también te permite rastrear AdSense clicks, añadir motores de búsqueda extra y rastrear búsquedas de imágenes.

Aquí es también donde pondrás el javascript para Google Analytics hacienda que no tengas que editar tu tema. Debes ir a Settings > Google Analytics y pegar el script urchin.js dentro de la caja.

NOTE: Es muy importante que utilices el script urchin.js y no el ga.js.

Plugin 6 - WP Super Cache

WP Super Cache no es esencial para un blog nuevo pero es fundamental a medida que el sitio progresa. El plugin genera archivos html estáticos de tu blog WordPress dinámico. Esto permite que las páginas carguen más rápido.

Plugin 7 - Google XML Sitemaps

Google XML Sitemaps creará un mapa de sitio Google de tu blog que puedes añadir en cualquier motor de búsqueda.

Plugin 8 - No Self Pings

No Self Pings evita que WordPress envíe pingbacks de tu blog a tu blog.

Plugin 9 - Feedburner Feedsmith

Instala y activa el plugin Feedburner Feedsmith, luego ve a Settings > Feedburner. Todo lo que necesitás hacer aquí es poner la dirección del feed de Feedburner que programaste en el paso 6 y hacer clic en Save. El plugin ahora detectará todas las formas de acceder a tu feed y las redireccionará a tu feed de Deedburner.

Plugin 10 - WP DB Backup

WP DB Backup te permite realizar fácilmente un backup de tu base de datos WordPress.

Fuente: ProBlog Design