Remodelando el diario de la Costa Oeste

Facebooktwittergoogle_plus

Rediseño del diario de la costa oeste de EEUU

Los que me conocen ya sabrán que uno de los viajes que mejor recuerdo me provocan es el que realicé hace ya más de un año a la costa oeste de los Estados Unidos. Lógico, tratándose del más ambjcioso y rico en contenido de los viajes que la economía doméstica me ha permitido hacer hasta la fecha.

También conocen algo menos habitual, que es mi obsesión de traer de cada viaje un bloc de notas cargado de apuntes con la intención de crear un completo diario de la experiencia. Una intención que nació hace ya varios años, cuando empecé a descubrir ciertas comunidades de viajeros en la red y me percaté de lo útil que es para futuros turistas leer sin intermediarios ni intereses ocultos las impresiones de gente que ya ha visitado esos lugares. Además, a mí -algo habréis notado- me gusta escribir, y para colmo mi madre está encantada con conocer hasta el último detalle de mis viajes.

El caso es que mi mejor viaje dio también lugar a mi mejor diario. Y no es que lo diga yo, si no que me avalan para decirlo por un lado las opiniones de amigos y conocidos -algunos lo han usado como fuente de inspiración para sus propios viajes-, así como las escasas estadísticas que suelo vigilar acerca de las visitas que recibe todo albertobastos.info. Todo lo relativo a mi experiencia en el oeste de EEUU es con diferencia lo que más tráfico capta a través de búsquedas por la red.

Por ese motivo llevaba un tiempo barajando la posibilidad de mejorar un poco el aspecto y detalles internos de dicho diario, ya que no ha sido precisamente mi mejor trabajo como desarrollador web y era una pena que mi aportación más visible no fuera tratada en consonancia. Y por fin en los últimos días decidí enfrentarme a dicha empresa, dando lugar a esta criatura a la que podríamos llamar “versión 2.0” de mi diario de viaje. A continuación enumero la lista de arreglos y mejoras que he aplicado en este rediseño.

Olvidarse de los frames

Uno de los aspectos de los que menos orgulloso estaba en la versión anterior era el uso de “frames” para la separación de contenidos. Una técnica ridículamente obsoleta pero que me sacó del apuro en su día, momento en el que no pude o quise encontrar una solución mejor. El uso de frames provocaba que si, tras una búsqueda en Google, alguien aterrizaba en la página de una etapa concreta del viaje, todo lo que veía era el contenido de esa etapa. Ni un mísero menú de navegación, un auténtico horror en términos de usabilidad.

La nueva versión desecha completamente el uso de frames, e independientemente de en qué página aterrice un nuevo visitante recibirá las herramientas necesarias para poder visitar todo el diario.

Utilizar un diseño responsivo

Por una combinación de trayectoria profesional y curiosidad personal, en los últimos meses el concepto de “Diseño web responsivo” me ha acompañado un día sí y al otro también. Y teniéndolo tan presente, no podía dejar de aplicarlo en este nuevo rediseño.

La web se adapta a dispositivos de todos los tamaños, especialmente en lo que se refiere a anchos más pequeños como el de un teléfono móvil. Para conseguirlo me he aprovechado del popular framework Bootstrap, con la intención de coger un poco de experiencia con él de primera mano tras usar semanas antes para la renovación de mi Currículum uno de sus competidores, Zurb Foundation.

Reutilización de fragmentos

Un aspecto interno que no puede percibir un ojo inexperto es cómo una web está hecha “por dentro”. En el caso del diario, la versión anterior era un conjunto de páginas HTML estáticas, lo cual para el visitante es indiferente, pero para el encargado de crear y mantener la web supone un mayor esfuerzo por la no-reutilización de aspectos comunes en todas las páginas.

Ni mucho menos he descubierto la rueda. Simplemente para la creación del nuevo diseño me he apoyado en PHP para poder reutilizar partes comunes de la web como pueden ser la cabecera, la paginación, el menú, la inclusión de JavaScript, etc. No solo eso, si no que además construí una suerte de “núcleo de datos” en el que poder tener centralizada la estructura de la web, y pintar el resto de la página a partir de esos datos.

En resumen, ahora la web está formada por una serie de ficheros “.php” que realizan tareas muy concretas: uno pinta el menú, otro calcula cuál es la página anterior y posterior a partir de la actual, etc. El resultado es que los ficheros “.php” con el contenido de las etapas se reducen a la mínima expresión, siendo algo del estilo:

*incluir include/_pre.php*
... párrafos, imágenes, más párrafos y más imágenes ...
*incluir include/_post.php*

Esto me ha permitido generar los contenidos de forma relativamente sencilla una vez que había ideado la estructura general de la web.

Accesibilidad sin JavaScript

Como desarrollador web, una de las técnicas con los que más de acuerdo estoy y celebro ver implantada en otros sitios es la del “Progressive enhancement”, algo así como “Mejora progresiva”. Consiste en no asumir jamás que todos tus visitantes tendrán la última versión del último navegador de moda con soporte para absolutamente cualquier cosa que quieras ofrecer.

En su lugar, la web se crea teniendo siempre en mente que todos sus contenidos sean accesibles hasta para el más anticuado o austero de los navegadores, y proceder a instalar comportamientos avanzados (efectos, en su mayoría) cuando se sabe que el navegador va a soportarlos.

La consecuencia más clara de seguir estas buenas prácticas es que un navegador sin JavaScript habilitado puede acceder a todas las páginas del sitio. No podrá disfrutar de menús desplegables, o de imágenes que se amplían en una capa superpuesta, pero nada de ello le privará de poder acceder a todos los contenidos disponibles.

Intentar mejorar el SEO

En mi recientemente estrenado puesto de trabajo, por primera vez trabajo codo con codo con un responsable de posicionamiento web (SEO). Eso me ha permitido conocer de primera mano algunas de las recomendaciones y buenas prácticas para que tu sitio web se imponga a otros similares a la hora de captar nuevos internautas que escudriñan la red.

Entre otras cosas, el nuevo rediseño intenta que cada página utilice unos títulos y cabeceras con buen contenido semántico que exponga lo más detallado posible de qué habla la página, y la estructura de la web debería ser completamente accesible para una araña de búsqueda, ya sea saltando de enlace a enlace o ayudándose del sitemap.xml que detalla toda la relación de páginas incluidas.

¿Por qué demonios servía las imágenes en HTTPS?

Desde hace ya mucho tiempo, utilizo el servicio Picasa de Google para alojar las imágenes de mis diarios. Esto me permite no tener que subirlas a mi propio servidor, evitando así el impacto en espacio en disco y ancho de banda que supone.

Estoy encantado con Picasa, pero un aspecto en el que no había reparado hasta ahora es que, por defecto, las rutas de las imágenes que el servicio me ofrecía utilizaban el protocolo HTTPS.

El protocolo HTTPS permite que los sitios web cifren la comunicación con el usuario y así evitar que información sensible sea visible para intrusos no deseados. Para conseguirlo añade cierta complejidad a la conexión con el servidor, lo cual afecta al rendimiento tanto del navegador web del usuario como de la máquina que sirve del contenido.

Tratándose de imágenes sin ningún tipo de control de acceso y disponibles públicamente, servirlas en HTTPS era un esfuerzo innecesario. Verifiqué que las mismas rutas funcionaban perfectamente en HTTP sin cifrar, y sustituí todas las imágenes del viaje para abrazar el nuevo protocolo.

Nueva sección de comentarios

Siempre he querido separar los diarios de viaje de mi blog personal, ya que así no estoy atado a un CMS de turno y tengo libertad absoluta para decidir cómo hacer un diario cada vez que finalizo el viaje de turno. El aspecto más negativo de dicha decisión es que no podía aprovecharme del sistema de comentarios que un blog me ofrece, pero eso ha terminado.

Gracias a Disqus, un servicio externo que permite integrar un sistema de comentarios en cualquier web, ahora el diario cuenta con una sección donde -espero- si algún visitante tiene alguna duda o quiere pedir consejo sobre un futuro viaje, pueda hacerlo.

Nuevo plugin para galería multimedia

En un tipo de web como los diarios de viaje, llenos de imágenes y videos que acompañan al texto, es imperativo habilitar algún mecanismo que permita ampliar las miniaturas y visualizar los videos sin romper la navegación del usuario.

Siempre he adoptado alguna librería estilo “lightbox” que permite hacer precisamente eso: miniaturas de imagen que al pulsarlas dan lugar a una versión ampliada de la misma fotografía, normalmente mostrada en una capa que se pone “encima” de la web y desaparece al terminar para poder seguir la lectura donde la habíamos dejado. Sin embargo, ha sido esta vez cuando he encontrado un plugin de jQuery llamado prettyPhoto que me ofrece todas las características que buscaba, especialmente poder combinar en una misma galería fotografías de Picasa y vídeos colgados en YouTube.

Redirecciones 301 para que nadie se cabree

El nuevo diseño ha supuesto que la ruta de cada etapa sea diferente (distintos nombres, extensión “.php” en lugar de “.html”, etc.). Además, he aprovechado para reubicar el sitio entero en mi servidor. El resultado es que las URL que apuntaban a la versión antigua de las páginas ya no ofrecen ningún contenido.

Dejar las rutas antiguas “rotas” puede acarrear problemas, siendo el más claro de todos que sigan apareciendo como resultados en un buscador como Google. Eso provocaría que un potencial nuevo visitante se encuentre un feo error de “Página no encontrada”.

Para matar dos pájaros de un tiro, evitar esos errores y al mismo tiempo redirigir las visitas a la nueva versión, he añadido una serie de reglas HTTP 301 (redirección permanente) al fichero .htaccess de mi hosting. Gracias a eso, las visitas a las rutas antiguas serán redireccionadas automáticamente a la versión rediseñada de los mismos contenidos.

Y eso es todo. El resultado es un diario de viaje del que estoy relativamente orgulloso ya no solo en el contenido, si no también en la forma. Y, de hecho, es una forma que creo que reutilizaré para mis próximas experiencias: una escapada a Madrid la próxima semana y, esperemos, un nuevo periplo por los Estados Unidos el próximo septiembre, esta vez recorriendo parte de la costa este. ¡Prometo contarlo todo!

Facebooktwittergoogle_plus

3 pensamientos en “Remodelando el diario de la Costa Oeste”

  1. Como ya sabrás, aquí un culpable de usurpar vilmente vuestra ruta del viaje a los USA. Genial el trabajo te has pegado al crear esta guia en todos los aspectos (técnico y de contenido), és realmente útil. Esperamos ver pronto las secuelas ;)

    1. Hola Albert,

      Algo me han contado, sí. Estoy deseando que volváis y que cierto amigo común me empiece a contar qué tal os habrá ido y me enseñe muchas, muchas fotos :D Espero que lo que hayáis podido aprovechar de mi experiencia os vaya a ser útil, esa es la idea.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *