Platos Sobre Ruedas


Enero 2017 http://platossobreruedas.com

Para este proyecto se ha elaborado un nuevo tema para crear un blog de viaje bilingue (castellano y portugués) con una página principal que muestra la localización correspondiente de cada entrada en un mapa, jerarquía de taxonomías personalizada, galería de imágenes y vídeos vinculados con las entradas en las que aparecen y entorno de comentarios con AJAX.

Los requisitos centrales del pedido consistían en un blog que permitiera a los autores escribir tres tipos de contenidos distintos y que estos, automáticamete, fueran geolocalizados y posicionados gráficamente en un mapa. Para ello se ha usado de nuevo la información geográfica libre de OpenStreetMap y la librería Leaflet, creando tres tipos de entradas específicas mediante la función register post type de WP, y modificando el backend del editor de entradas para añadir un botón que geolocaliza la ubicación de los autores en el momento de redactar la entrada, o que les permite buscar una dirección.

Cuando la entrada se publica, esta información en forma de coordenadas se guarda automáticamente en la base de datos relacional, que es de donde extrae los datos la función que construye el mapa al cargar la página principal, con el objetivo de convertir cada entrada en un icono posicionado en el mapa – tres iconos distintos para tres tipos de entrada- y que ofrece, al clicar en él, un conjunto de información de la entrada (título, imagen principal, resumen y enlace al post en cuestión).

Como complemento de las funcionalidades del mapa, también se ha añadido un filtro por tipo de entrada implementado con AJAX que muestra en el mapa, sin necesidad de recargar la página, las entradas vinculadas con cada uno de los tres tipos de post.

En cuanto a la galería de imágenes y vídeos, la idea consistía en un apartado donde hallar todo el material gráfico que los autores iban adjuntando en sus entradas, para ofrecer al visitante un sistema de navegación alternativo mucho más visual. Así es como se ha cimentado: la página de la galería crea una matriz con los enlaces de todos los elementos multimedia asociados a entradas publicadas, las ordena por idioma y tipo de entrada, y mantiene la información referente a la entrada a la cual va asociada, para que el usuario pueda acceder a leer la entrada vinculada con la imagen que tiene en pantalla.

Debido a que el procedimiento estándar de WP no diferencia entre imagenes y videos en el momento del almacenaje de su vínculo en la base de datos, se ha aprovechado la etiqueta destinada a la descripción del media para introducir una palabra clave que nos funcionará como constante a la hora de saber si los datos recibidos corresponden a una imagen o a un vídeo antes que estos se carguen. Dicho de otra forma, por cada video publicado los autores del blog escribirán en el campo de la descripción un texto relacionado con el video, que empiece con la palabra Video. Por ejemplo, “Video de las Cataratas de Iguazú”. La primera palabra es la constante antes mencionada, y nos indica el tipo de media desde la matriz: si la primera palabra de la descripción es la palabra Video, se trata de un video. En caso contrario, es una imagen. Esto nos resulta muy útil a la hora de poder integrar correctamente los videos en la galería de imágenes, tanto desde el punto de vista de Javascript como en el de CSS.

El principal reto a la hora de crear galerías multimedia es que su carga sea ágil en cualquier dispositivo y no sobrepase las posibilidades de conexiones limitadas. La solución en este caso ha consistido en establecer la carga inicial a 24 elementos; a medida que el usuario se desplaza hacia bajo, automáticamente se prepara y se muestra el siguiente grupo de 12 elementos, y así hasta que el usuario deja de desplazarse para seguir viendo contenido o hasta que se llega al final del mismo. Además, los elementos que se cargan en esta página son miniaturas ampliables adaptadas al tamaño de la pantalla, de forma que el usuario puede tener este apartado cargado a partir de un coste de solo 350kb aproximadamente (medida similar a la que aplica Google Imágenes en su buscador). Añadir también que esta matriz de datos de la galería se construye con AJAX, motivo por el cual el visitante puede filtrar rápidamente el contenido que se muestra por el tipo de entrada.

Para la organización de los posts, a parte de las tres tipologías creadas ya comentadas, se han añadido distintas taxonomías propias para cada tipo de entrada. Esto permite ofrecer una navegación principal por tipo, y un filtro opcional secundario por categoría. Para enriquecer la interacción en el apartado de comentarios se ha usado el plugin Ajaxify Comments, que proporciona de forma eficiente comunicación immediata con el visitante que envía su comentario, sin cargas de páginas ni redirecciones molestas. La funcionalidad bilingue se ha aplicado con el plugin Polylang, del que ya se ha hablado en proyectos anteriores.

Comentar que también se han aplicado las medidas SEO habituales en otros proyectos, enfatizando en este caso el posicionamiento de las imágenes a Google, y atendiendo los microdatos referentes a los dos idiomas de la web. Las cuestiones estéticas se han elaborado exclusivamente con CSS, responsive como siempre.

 

 

 

 

 

 

 

Curiosea otros trabajos:


«