Nuevo tema para el blog

Allá por abril ya comenté que estaba trabajando en un nuevo tema para el blog hecho desde 0. Después de varios meses con el proyecto medio olvidado, decidí mandar al garete lo que llevaba hecho y empezar de nuevo. Había un par de cosas que no me terminaban de convencer y otras que no acababan de funcionar como yo quería; lo mejor era retomarlo desde el principio, así además podría aplicar lo que había aprendido de HTML5 y CSS3 desde ese primer intento.

Como habéis podido ver el tema ya está por fin terminado —todo lo terminado que puede estar algo relacionado con la web— y funcionando desde hace unos días. Ahora toca un repaso por las novedades, como ya hice con el anterior rediseño.

Código

El cambio más grande no es algo que se pueda apreciar a simple vista, sino que está en las tripas del blog. HTML5 y CSS3 son los protagonistas de este nuevo diseño que he creado a partir de HTML5 Blank, un tema pensado precisamente para servir como punto de partida a otros.

A esta base le he añadido, modificado y eliminado todo lo que me faltaba, no me convencía y me sobraba hasta dejarlo a mi gusto. He añadido, por ejemplo, algo de jQuery por mi cuenta, como los atajos de teclado de los que hablo en el siguiente apartado. En este diseño no tienen cabida las imágenes al estilo tradicional: los iconos son fuentes, no imágenes, y los logos, tanto el de la cabecera como los del pie, están en formato vectorial (SVG). Esto permite que se vean perfectamente a cualquier tamaño o en pantallas con gran densidad de píxeles, eso que tan de moda está desde que Apple sacara sus pantallas retina con el iPhone 4 y que cada vez está presente en más dispositivos de Apple y de la competencia.

Pero no me quiero extender en el apartado técnico, no es ese el propósito de esta entrada.

Atajos de teclado

Me encantan los atajos de teclado, así que no he podido evitar añadir algunos para navegar por el blog. Podéis ver cuáles son en cualquier momento con la tecla «h» o con el enlace correspondiente en el pie de página. De momento —no descarto añadir más en el futuro— son los siguientes:

Tecla/Combinación	Acción
i	Ir a «Inicio»
a	Ir a «Archivo»
c	Ir a «Contactar»
/	Ir al campo de búsqueda
esc	Salir de campos de formularios
h	Mostrar/ocultar la ayuda
k	Seleccionar entrada anterior
j	Seleccionar entrada siguiente
ctrl+esc	Cancelar selección de entrada
intro	Abrir la entrada seleccionada
ctrl+intro	Abrir la entrada en nueva pestaña
may+izquierda	Ir a la página anterior
may+derecha	Ir a la página siguiente
izquierda	Imagen anterior
derecha	Imagen siguiente
esc	Cerrar imagen

Las 3 últimas son para el visor de imágenes  y ya estaban funcionando anteriormente.

Aspecto

El nuevo aspecto es lo primero que notaréis al entrar y, aunque quizá no sea tan evidente como en el rediseño previo, sí que hay bastantes modificaciones. Estas son algunas:

• Fuente más grande: lo importante de un blog es el contenido y que éste se pueda leer lo más cómodamente posible y para eso es necesario un tamaño de fuente generoso. 16 pixeles es el tamaño por defecto de los navegadores y es por una buena razón, así que ese es el que uso ahora para las entradas.
• Eliminada la barra lateral: ¿qué había antes en la barra lateral? Una pequeña descripción sobre el contenido del blog que se puede deducir echando un vistazo rápido a las entradas. El listado de categorías y el archivo por meses a los que ahora se puede acceder desde la nueva página Archivo. Y, aunque hace tiempo que lo quité, solía haber un widget que mostraba mis últimos tweets; ahora para verlos tendréis que entrar en mi twitter.
• Responsive web design: seguramente el nombre no os diga mucho si no estáis metido en el mundo del desarrollo web, pero es algo cada vez más común y que a mí me convenció desde la primera vez que oí hablar de ello. Se podría traducir como «diseño web adaptable» y consiste en que la web se adapta a la resolución del dispositivo donde se esté viendo, es decir, que se ve bien (pero no igual) en un ordenador de escritorio, en un portátil, un tablet o un smartphone. Podéis ver de qué os hablo, por ejemplo, cambiando el tamaño del navegador si estáis en un ordenador.
• Información sobre las entradas: ahora la categoría, las etiquetas y la fecha de publicación de cada entrada está arriba en lugar de abajo para poder ver esta información junto con el título.
• El aspecto de los comentarios también ha dado un cambio bastante notable.
• El pie de página tiene ahora menos enlaces sociales y le he añadido un menú y la parte de suscripción.

Contenido

En cuanto al contenido también hay novedades. Una de ellas es el listado de entradas relacionadas que he añadido al final de cada entrada, algo que puede resultar útil para seguir leyendo más sobre el mismo tema.

Además, a partir de ahora cada vez que vea una película o lea un libro, intentaré escribir una entrada, aunque sea breve, con mi opinión. Esto me permitirá actualizar el blog más a menudo, que al pobre lo tengo medio abandonado. Así, en lugar de publicar, como he estado haciendo hasta ahora, una entrada con las películas que he visto durante el año y otra con los libros que he leído, iré publicando con mucha más frecuencia y esa entrada anual será simplemente una recopilación de enlaces a las minireseñas a modo de resumen del año.

He añadido una nueva página de Archivo donde recopilo todas las entradas, ordenadas por años y por categorías. Desde ella se puede ver de un solo vistazo de qué hablo por aquí.

Ahora además de poder suscribiros al feed RSS, también tenéis la opción de que os lleguen las actualizaciones por correo electrónico. Tenéis las dos posibilidades en el pie.

Y, aunque aun no está funcionando, pienso agregar un nuevo tipo de entrada para poder compartir aquello que haya leído y que me parezca especialmente interesante. La idea es que en este tipo de entrada no se pueda comentar, sino que sería simplemente un enlace y una pequeña descripción, resumen u opinión sobre el enlace. Es algo que he visto en otros sitios y que me ha gustado. La temática de los enlaces será incluso más variada que la del blog.

Plugins

Han cambiado muchos de los plugins que usaba, siendo eliminados en algunos casos y sustituidos en otros. Los únicos plugins que sigo usando de la anterior versión del blog son Akismet para evitar el spam en los comentarios y Advanced Excerpt para los resúmenes de las entradas. Para el SEO he sustituido All in One SEO Pack por WordPress SEO by Yoast, que me parece más completo. Como visor de imágenes he pasado de Lightbox Plus a jQuery Colorbox, que me ha gustado más. Para tema de caché he abandonado W3 Total Cache en favor de WP Super Cache y DB Cache Reloaded, mucho más sencillos de configurar.

También he añadido algunos nuevos:

• Jetpack por WordPress.com, que permite añadir a un blog con WordPress algunas características de WordPress.com y que yo uso para estadísticas adicionales, crear el formulario de contacto y alguna cosa más (tengo la mayoría de sus opciones desactivadas).
• Yet Another Related Posts Plugin: para las entradas relacionadas que vienen al final de cada entrada.
• Basic Comment Quicktags: añade los botones del formulario de comentarios que permiten que cualquiera pueda incluir negritas, cursivas, enlaces o citas en sus comentarios sin saber HTML.
• Clean Notifications: no se actualiza desde 2008, pero funciona perfectamente. Modifica el formato de los e-mails de notificaciones (nuevos comentarios y ese tipo de cosas) para que tengan un formato más cómodo de leer. Incluso me he permitido modificarlo para adaptarlo a este blog añadiendo, por ejemplo, el enlace para Twitter.
• Raw HTML: me permite usar bloques de texto en las entradas en los que se cancela el formateo automático de WordPress, que tan jodido puede ser en ocasiones.
• Save with keyboard: una chorrada de plugin pero muy útil para mí. Gracias a él puedo salvar una entrada en la que estoy trabajando con un atajo de teclado (Ctrl+S en Windows y GNU/Linux y Cmd+S en OSX).
• WP Mail SMTP: los correos electrónicos que envía el blog (notificaciones, formulario de contacto…) no usan el servidor de correo del hosting, sino que yo le configuro un servidor de SMTP externo (el de Gmail en mi caso). Una cosa menos con la que lidiar en el servidor.