Siempre es importante averiguar en el menor tiempo posible cuando nuestro sitio web se ha caído, ya sea por errores en el servidor, de software o problemas de red. Pero por desgracia los webmasters nunca tenemos el tiempo suficiente para visitar todos nuestros sitios web a diario y muchas veces somos los últimos en enterarnos. Incluso si se trata de un trabajo, muchas veces el cliente espera unas horas a ver si el problema se soluciona solo y cuando ve que no es así nos llama ya cabreado.

Para evitar esto podemos instalar en nuestro ordenador algún programa que compruebe cada x minutos si todo funciona correctamente, pero eso solo nos da una visión limitada. Puede tratarse de un problema de red y mientras en nuestro equipo todo funciona a la perfección, otros visitantes con diferentes ISP o de otros países tener problema. Por eso existen servicios que comprueban nuestros sitios web cada cierto tiempo desde distintas localizaciones geográficas, avisándonos por correo electrónico, sms o incluso por teléfono cuando hay problemas. Dentro de estos servicios muchos ofrecen versiones gratuitas, más limitadas en opciones pero igualmente validas.

site24x7.com: Monitoriza hasta 2 sitios de forma gratuita cada 60 minutos como mínimo.  Avisa por email, RSS y SMS. En Inglés. En su versión de pago hace las comprobaciones desde 17 lugares repartidos por USA, Europa y Asia, mientras en su versión gratuita solo lo hace desde California (USA), su gran desventaja. A nivel de opciones ofrece informes y estadísticas del uptime de cada sitio.

mon.itor.us: De forma gratuita no parece poner limite en cuanto a cantidad de sitios y los revisa cada 15 minutos. Nos avisa por email, RSS, SMS, Twitter y IM. Está mitad en español, mitad en inglés. De forma gratuita monitoriza nuestros sitios desde USA y Europa, pagando podemos añadir más localizaciones. Y además respecto a las estadísticas es bastante completo.

host-tracker.com: En la versión gratuita monitoriza hasta 2 sitios cada 30 minutos. Avisa por email y SMS. Está disponible en español. A nivel de nodos geográficos es el mejor pues ofrecen 92 localizaciones diferentes, incluyendo Europa, Latinoamérica, USA y Asia. Respecto a las estadísticas que ofrece son suficientes.

Como aclaración, aunque la cuenta sea gratuita los avisos por SMS son siempre de pago (totalmente lógico). Aunque algunos servicios nos regalan algunos SMS al abrir una nueva cuenta. De todas formas, si te dedicas a esto profesionalmente siempre es preferible pagar una cuota adecuada y ser el primero en enterarte de los problemas.

Y por supuesto existen muchos más servicios similares, yo hago un resumen de los que he probado de momento. Si usas otro y quieres aportar tu opinión no dudes en hacerlo, nos sera útil a todos.

Esta es una lista de 40 plantillas HTML/CSS de alta calidad y gratuitas. Muy útiles para usarlas como base para nuevos proyectos, inspirarse con nuevas ideas o aprender observando como están hechas. Algunas son HTML5, el estándar de la web del futuro.

La mayoría también incorporan archivos .psd con capas para modificar los gráficos, aunque es un formato de Photoshop deberían poderse abrir con Gimp.

Airlines

Descarga

Art of Business

Descarga

Big City

Descarga

Black Fox

Descarga

Business Time

Descarga

Cafe & Bakery

Descarga

Calliope

Descarga

Christmas Night

Descarga

Christmas Red

Descarga

Chrome 3D

Descarga

Creative Studio

Descarga

Cyanspark

Descarga

Dark Pro

Descarga

Eco Green

Descarga

Free Facebook

Descarga

Global Connect

Descarga

Eco Design

Descarga

GeoForce

Descarga

Green Planet

Descarga

Greeny

Descarga

Holiday

Descarga

Ice Media

Descarga

Lawyer and attorney

Descarga

Light House

Descarga

Orange Blog

Descarga

Paper Blog

Descarga

Particle

Descarga

PhotoBusiness

Descarga

Politics

Descarga

Real Estate Agency

Descarga

Estate

Descarga

Red Blog

Descarga

Shalom

Descarga

Sifiso

Descarga

Skipopia

Descarga

Sky Blue

Descarga

Valentine’s Day

Descarga

Around the World

Descarga

Wedding

Descarga

Xtreme

Descarga

Fuente: webdesignish.com

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.