Una lista de potentes herramientas online que nos permiten analizar múltiples aspectos de un sitio web, lo que nos puede servir para localizar fallos que no conocemos y encontrar soluciones:

Optimización SEO

Web SEO Analytics nos permite tener de forma rápida una visión global del éxito de nuestro sitio web. Nos ofrece desde datos sobre nuestro hosting y dominio, hasta la repercusión que tenemos dentro de las principales redes sociales. Por supuesto también nos hace un resumen de como estamos indexados dentro de los principales buscados y los directorios más importantes, así como las palabras que tienen mayor relevancia de nuestra web y los enlaces que recibimos desde paginas externas. Muy útil y completo.

webseoanalytics.com

Análisis de rendimiento

Un sitio web excesivamente lento puede hacer que perdamos muchas visitas y aunque ya tengamos uno rápido siempre hay margen para mejorar. La mayor virtud de GTmetrix es que combina las 2 mejores herramientas para analizar el rendimiento de una página web (Google Page Speed y Yahoo! YSlow), lo que nos da 2 puntuaciones diferentes y una cantidad de datos enorme sobre como acelerar la velocidad de carga. Trata desde temas tan básicos como la compresión de imágenes o el no incrustar CSS y Javascript dentro de los archivos HTML. Hasta otros más avanzados como optimizar la configuración de nuestro servidor o mejorar la forma en que los navegadores hacen cache de nuestros archivos. Muy practico, pues nos evita instalar varias extensiones en nuestro navegador para analizar el rendimiento.

gtmetrix.com

Comprobar la legibilidad del texto

A veces por cuestiones de diseño acabamos usando texto y fondos de diferentes colores, que no siempre serán fáciles de leer para todas las personas. Gracias a esta herramienta detectaremos fácilmente áreas de texto que cansarían demasiado a nuestros visitantes o supondrían un problema para gente con problemas de visión. Muy importante, pues recordemos que el contenido es lo más importante.

checkmycolours.com

¿Conoces otra herramienta que merezca estar en esta lista?

Esta es una anécdota surgida en una charla con un cliente sobre la renovación de su sitio web. Se trataba de una web obsoleta realizada hace años con Frontpage y dejando de lado su anticuada estética, además se descuadraba totalmente en navegadores que no fueran Internet Explorer.

El cliente estaba empeñado en actualizar solo su parte gráfica dejando su estructura, hecha a base de tablas html. Yo le insistía en que lo más recomendable era hacer un diseño desde cero para que fuera totalmente compatible con los estándares actuales y todos los navegadores. Pero él no estaba convencido de aumentar el presupuesto, pues en su opinión, todos los internautas usan Internet Explorer para navegar. Por lo que el tema se alargó y acabe poniéndole el siguiente ejemplo:

-Imagínate que tienes una empresa que necesita una alta seguridad y quieres que todos lo clientes antes de entrar se identifiquen. Por lo que yo te ofrezco una solución tecnológica para hacer el proceso mucho más cómodo a tus clientes, poner un sensor biométrico que identificara a los clientes habituales por su apariencia y les dejara entrar directamente. ¿Que te parecería?

-Pues muy bien, me ayudaría a ofrecer un mejor servicio.

-Bien, yo instalo el sistema y lo probamos. Funciona correctamente con la mayoría de las personas pero detectamos que falla con la gente rubia. Por alguna razón el sensor tiene problemas para distinguir el pelo de color claro y esas personas tras varios intentos, necesitan finalmente sacar su documentación e identificarse manualmente. ¿Te parecería bien usar ese sistema?

-Claro que no, afectaría a muchos clientes y acabaríamos teniendo quejas.

-Bien, un sitio web es similar a ese sistema de identificación, pues también te permite ofrecerles información y servicios de forma más rápida y cómoda a tus clientes. ¿correcto?

-Sí.

-Y si te digo que en España la gente con el pelo claro supone menos del 20% de la población. Mientras que los internautas que usan navegadores diferentes de Internet Explorer se acercan al 40%.

El cliente se quedo pensando unos segundos, tras lo cual me dijo que desarrollara la web desde cero.

Un ejemplo de que muchas empresas acaban con sitios web incompatibles por  no entender realmente el mercado al que intentan adaptarse. Pero, mediante ejemplos como el citado, podemos conseguir que vean la importancia real de causarles problemas al 40% de sus clientes.

Cada vez los teléfonos móviles tienen más importancia en el diseño web, si hace unos años casi nadie usaba Internet desde el móvil, hoy día es un sector con un enorme crecimiento gracias a modelos como el iPhone o los nuevos Android. Eso nos plantea un problema, pues es difícil crear un sitio web que sea valido tanto para resoluciones de ordenador, como para las pequeñas pantallas de los dispositivos móviles. Y si creamos 2 versiones alternativas nos surgirá otra duda, ¿cómo filtramos a los usuarios según el dispositivo desde el que accedan?

Una respuesta a ese problema nos la da el proyecto Detect Mobile Browser que facilita código libre en diferentes lenguajes de programación (Apache .htaccess, ASP, ColdFusion, JSP, Javascript, PHP, Python y Rails) para redirigir a los usuarios de navegadores móviles a una versión especial de nuestro sitio web, que previamente hayamos adaptado.

El código es simple y claro, por lo que no nos supondrá demasiado esfuerzo integrarlo en nuestros proyectos. Además, usa una lista de navegadores bastante completa y actualizada.

También nos ofrece otra alternativa, crear direcciones basadas en su propio dominio que  filtraran a los visitantes según su navegador. Yo no le encuentro demasiada utilidad, quien querría compartir una dirección como esta:

http://detectmobilebrowser.com/www.dglibre.com|www.dglibre.com/mv

No solo resulta excesivamente largo, sino que afectaría gravemente a nuestro SEO.

Cuando un diseñador web empieza un nuevo proyecto las primeras preguntas que debe hacerse son:

-¿Un diseño fluido o estático? y de ser estático, ¿qué resolución usaran la mayoría de los visitantes en el sitio web?

Preguntas no siempre fáciles de responder pues aunque tengamos una idea aproximada de las resoluciones más usadas, no tenemos sobre la mesa estadísticas fiables.

Actualmente no cabe duda de quien tiene más datos sobre los internautas, Google. La cantidad de información que maneja es incluso preocupante pero en este caso nos resultara muy interesante. Partamos de la base de que es casi imposible que, durante un mes, un internauta no visite el buscador de Google o alguna web con Analytics, se puede decir que tienen todos los datos reales y además actualizados. Por eso la nueva herramienta resulta extremadamente útil:

Google Browser Size

Siguiendo la forma de trabajar típica de Google nos presenta los datos de forma sencilla y clara. Cuando entramos vemos una página web de ejemplo, sobre la cual se representa con colores el % de internautas que vera cada parte sin necesidad de usar las barras de desplazamiento del navegador. Además, podemos cargar nuestro sitio web como fondo para poder verlo de forma gráfica.

Como ejemplo, DGLibre debería ser vista correctamente por el 80% de los internautas (cifras peores de las que esperaba aunque supongo que los navegadores de móviles y netbooks bajan la media). Por otra parte, la zona dedicada al texto es accesible para el 99%, cifra muy positiva.

Checkmycolours es una herramienta que sirve para analizar los textos de una página web, comprobando si son legibles para cualquier persona. Lo hace comparando el contraste y luminosidad de los textos con el color de fondo. Algo que puede parecer trivial pero que muchas veces se nos olvida a los diseñadores web, pues nos concentramos en hacer un diseño atractivo y podemos acabar con textos difíciles de leer para personas con problemas de visión. Y aun entre las personas que ven bien, no es lo mismo leer un texto claro que uno capaz de cansarnos la vista con rapidez, motivo por el que podemos perder muchas visitas.

Por eso me ha parecido interesante esta herramienta, con Checkmycolours obtenemos de forma rápida un resumen de la legibilidad de los textos que tenemos en nuestro sitio web. Además, nos avisa cuando el contraste entre un texto y el fondo es insuficiente según el algoritmo propuesto por el W3C y nos permite hacer pruebas en tiempo real cambiando los colores.

Aparte hay que admitir que el creador ha conseguido una interfaz sencilla de usar y muy bonita a nivel gráfico.

Cuando creamos un sitio web siempre debemos tener en cuenta como se adapta a diferentes resoluciones de pantalla. Existen herramientas que nos permiten hacerlo fácilmente, como por ejemplo la estupenda extensión Web Developer de Firefox, o también podemos cambiar a mano la resolución de nuestro escritorio aunque resulta una molestia.

Una alternativa rápida es ViewLike.us, un servicio web muy simple pero efectivo. Solo debemos de indicarle la dirección del sitio web  a probar y pulsar en el botón de la resolución deseada para que nos previsualice la web en un cuadro de ese tamaño mediante Ajax. Las resoluciones que nos ofrece son las más estandarizadas (incluyendo la Wii y el iPhone), aunque se echan de menos algunas panoramicas y sobretodo poder crear otras nuevas manualmente. No es la herramienta del año pero en ocasiones resulta útil.

Si tenemos nuestro propio blog con WordPress es importante tomar medidas básicas de seguridad para que cualquier desaprensivo no pueda dañarlo. Estos trucos que he recopilado son para gente que tiene instalado WordPress en su propio hosting y aunque no impedirán que un experto en seguridad puede fastidiarnos, si nos protegerán de los típicos script kiddies o lammers.

1. Tener siempre la última versión:

Con cada nueva versión WordPress no solo añade novedades, también corrige importantes fallos de seguridad. Actualizar a menudo es imprescindible en cualquier CMS.

2. No informar sobre que versión de WordPress estamos usando:

Por defecto WordPress pone en el código fuente del blog la versión que tenemos instalada. Esto puede ayudar a un atacante a aprovechar fallos de seguridad conocidos, especialmente si se trata de versiones antiguas. Ese dato es sencillo de eliminar, solo deberemos cambiar en el archivo header.php de nuestra plantilla el siguiente código:

<meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” />

Por este:

<meta name=”generator” content=”WordPress” />

3. Proteger la carpeta de plugins:

Si un posible atacante sabe que plugins tenemos instalados en WordPress también podría aprovecharse de sus fallos de seguridad. Para proteger dicha carpeta (/wp-content/plugins) basta con colocar en su interior un archivo vacío llamado index.html.

4. Evita que WordPress dé pistas para acceder al panel de control:

Cuando al acceder al panel de administración te equivocas con el usuario o la contraseña, WordPress intenta ayudarte informando de cual de los 2 datos es el incorrecto. Una función poco útil para el administrador pero si interesante para cualquier intruso que pretenda “hackear” tu blog.

Para corregir este exceso de confianza por parte de WordPress debes añadir el siguiente código dentro del archivo functions.php de tu plantilla:

add_filter('login_errors',create_function('$a', "return null;"));

5. Cambia el nombre del usuario administrador por defecto:

Cualquier persona que haya instalado alguna vez WordPress sabe que el usuario por defecto es admin y que si averigua su contraseña tendrá acceso total al panel de control. Pero por desgracia WordPress no nos ofrece una forma rápida para cambiar dicho nombre y tendremos que hacerlo desde la base de datos:

-Accedemos a PhpMyAdmin (o el gesto de base de datos que usemos).

-Dentro de la base de datos de WordPress buscamos la tabla wp_users (que puede variar si elegimos durante la instalación un prefijo diferente de wp_). Abrimos la tabla para editarla.

- Tendremos que cambiar admin en los campos user_login y user_nicename, en ambos el mismo nuevo nombre. El campo display_name es el nombre que aparece como autor si escribimos artículos con ese usuario, no es obligatorio cambiarlo.

Tras guardar los cambios si intentamos acceder como admin al panel de administración nos saldrá un error y deberemos poner el nuevo usuario con la anterior contraseña.

6. Usa contraseñas seguras:

Algo tan básico como importante, pues muchas veces los intrusos usaran ataques de fuerza bruta. Es decir, mediante scripts probaran contraseñas aleatorias o de un diccionario hasta encontrar cual está usando tu usuario.

Una contraseña segura debe ser larga (yo recomendaría al menos 12 caracteres) y debe mezclar letras mayúsculas, minúsculas, números y símbolos especiales. Si quieres generarlas automáticamente puedes usar el servicio: password.es

7. Bloquea el acceso al archivo de configuración:

Modificando el archivo .htaccess podemos proteger el fichero de configuración de WordPress: wp-config.php, impidiendo el acceso externo al servidor gracias a Apache. Para ello añadimos en .htaccess las siguientes lineas:

<files wp-config.php>
Order deny,allow
deny from all
</files>

8. Bloquea IP que introduzcan datos de acceso erróneos:

La forma más cómoda de hacerlo es con el plugin Login LockDown

Este plugin realiza 2 funciones:

-Monitoriza y guarda las IP que intentaron entrar en el panel de administración con usuarios o contraseñas no validos.

-Nos permite configurar un numero máximo de intentos fallidos, si una IP excede la cantidad marcada es bloqueada durante el tiempo que elijamos. Muy útil para complicar los ataques de fuerza bruta pues el intruso se verá obligado a usar miles de proxys para descubrir una contraseña segura.

Por último comentar que hay otros trucos más agresivos para mejorar la seguridad y también otros plugins. Pero yo he seleccionado los trucos que considero más importantes y cómodos, además ninguno de los cambios que aconsejo se destruyen con la actualización de WordPress, solo necesitamos hacerlos una vez.

Fuentes: ayudawordpress.com y anieto2k.com

Crear un menú con estilos CSS es relativamente sencillo pero no siempre tenemos el tiempo o los conocimientos necesarios para hacer el menú que buscamos. Como ayuda existen 3 herramientas online que nos pueden resultar útiles:

izzymenu.com: Impresionante, para empezar nos da bastantes opciones para personalizar cada menú. Pero es que además cuenta con cientos de diseños predefinidos de muy buena calidad, tanto creados por los editores como por los propios usuarios. Incluso podemos generar menús animados con Jquery.

Su peor defecto es la forma exagerada de mostrar la publicidad, hasta en los archivos que descargamos aparece publicidad de su CMS (que por supuesto podemos eliminar). Otra desventaja es tener que registrarse para poder usar todas las opciones.

cssmenubuilder.com: Otra estupenda herramienta que además genera código bastante más “limpio”. Su galería de menús predefinidos en mucho más corta pero a cambio podemos modificarlos totalmente sin necesidad de tocar el código.

La única desventaja que le encuentro es que no podemos generar la estructura de enlaces desde la propia herramienta. Aunque tampoco es ningún drama pues la propia herramienta nos permite crearla a mano.

cssmenumaker.com: Una opción más simple, contamos con una galería de unos 80 diseños predefinidos pero que no podemos modificar estéticamente. Como ventaja si podemos generar la estructura sin salir de la herramienta, incluyendo submenús. Es interesante,  aunque mucho menos potente que las 2 anteriores.

Por supuesto, una vez tenemos el código del menú aun nos queda adaptarlo a nuestro sitio web. En la mayoría de los casos el único cambio necesario será cambiar la ruta de las imágenes en el código CSS, a menos que nos guste tenerlas mezcladas con los demás archivos.

Un favicon es una imagen asociada a un sitio web. Casi todos los navegadores hacen uso de ellas, por ejemplo para ilustrar gráficamente a que web pertenece cada pestaña o para que nos sea más sencillo encontrar la web que buscamos en la lista de favoritos. Por supuesto no es algo imprescindible pero siempre queda bien estéticamente y realza el acabado de nuestro sitio web.

Existen muchas herramientas de escritorio para crearlos, así como herramientas online. Tratándose de algo tan especializado y sencillo prefiero la segunda opción, donde nos encontramos 2 tipos diferentes: las que generan el favicon a partir de una imagen y las que nos permiten dibujarlos a mano. Estas son las herramientas online que conozco y una pequeña descripción:

A partir de una imagen:

genfavicon: Unas de las herramientas más jóvenes pero muy bien realizada. La única que se encuentra en español, es muy sencilla de manejar y nos permite recortar la imagen, algo muy útil pues los favicon tienen que ser obligatoriamente cuadrados.

html-kit.com/favicon: Otra buena herramienta, lo mejor son sus opciones de previsualización y que nos genera tanto el  archivo .ico como un .gif animado (no todos los navegadores soportan estos favicon). Para imágenes con pocos colores tipo dibujo es el que consigue resultados más enfocados.

dynamicdrive.com/favicon: Mucho más simple que los anteriores, aunque los archivos .ico que genera tienen poco tamaño y están bastante suavizados, según el tipo de imagen puede ser una ventaja o una desventaja.

favicon.co.uk: Una herramienta básica, solo permite elegir el tipo de favicon.

favicongenerator.com: Subes la imagen y descargas el favicon, no hay ninguna opción.

Pintando a mano nuestro favicon:

Cuando hablamos de imágenes tan pequeñas como un favicon (16 x 16 pixels) no siempre es fácil hacer formas reconocibles y menos si usamos como base una imagen de alta resolución. En estos casos es preferible pintarlo directamente a mano.

favicon.cc: Posiblemente la mejor opción, es un mini editor de bitmaps. Podemos trabajar en base a una imagen, recortar, pintar a mano e incluso crear facilmente un favicon animado fotograma a fotograma. Muy completo y sencillo de usar. Recomendado.

degraeve.com/favicon: Más sencillo que el anterior aunque no está mal. Nos permite usar como base una imagen, incorpora una paleta de colores completa y va memorizando los colores usados.

somacon.com/p44.php: Un desastre a nivel de usabilidad, para usarla tendremos que combinar el ratón con atajos de teclado. En cuanto a opciones es bastante potente, por ejemplo, deja elegir nuevos colores por su código y podemos cambiar los usados sin alterar el diseño.

Una vez tengáis el favicon hay 2 formas de colocarlo en una web, la correcta es añadir entre las etiquetas HEAD el siguiente código:

O usar el camino más simple, poner el favicon con el nombre favicon.ico en el directorio raíz del sitio web. De esta forma los navegadores lo encontraran igual pero la W3C recomienda incluir el código.

Cualquiera que se dedique al diseño web o al desarrollo de aplicaciones online sabe que un proyecto, antes de considerarse terminado, debe ser probado en la mayor cantidad de navegadores posible. Una forma de simplificar el trabajo es hacer pruebas según el motor interno de cada navegador, que principalmente son:

• Trident: Internet Explorer
• Gecko: Firefox, Flock, Camino, K-Meleon, Epiphany, etc…
• Webkit: Safari, Chrome, Konqueror, etc…
• Presto: Opera

Si probamos el nuevo sitio web en al menos un programa de cada grupo y no aparecen problemas, nos aseguramos una buena compatibilidad. Pero también es cierto que cada navegador usa una versión diferente de su motor de renderizado, por lo que este truco no resulta del todo fiable.

Por ese motivo en los últimos años han aparecido servicios que nos facilitan hacer pruebas en casi todos los navegadores existentes y en un amplio rango de versiones. Desde las más modernas, a otras con una década a sus espaldas que nadie con un poco de cordura usará, por ejemplo IE 4.

browsershots.org: Solo debemos indicarle la dirección del sitio que queramos probar y en que navegadores, pasando después a una cola de espera. Nos informa del tiempo aproximado que tardaran los servidores en terminar y poco a poco irán apareciendo capturas de la web cargada en los navegadores seleccionados. Es muy fácil de usar y practico, aunque pueden tardar hasta 45 minutos en aparecer todas las capturas. Tiene una alternativa de pago que nos da preferencia en la cola de espera, haciendo el proceso mucho más rápido.

crossbrowsertesting.com: La idea es la misma pero la forma de realizarlo completamente diferente. Se trata de un portal de pago, aunque podemos crear una cuenta de usuario y usarlo durante 5 minutos gratuitamente, que usa una aplicación Java con la que controlamos remotamente varios equipos con diferentes sistemas operativos y navegadores. Lo que nos permite navegar por nuestro sitio web en todos los navegadores y hacer las pruebas que queramos, no limitándose a una simple captura.

¿Conocéis otros servicios similares?