Platos Sobre Ruedas


Gener 2017 http://platossobreruedas.com

Per aquest projecte s’ha elaborat un nou tema per crear un blog de viatge bilingüe (castellà i portuguès), amb una pàgina principal que mostra la localització corresponent de cada entrada en un mapa, jerarquia de taxonomies personalitzada, galeria d’imatges i vídeos vinculats amb les entrades a on aparèixen i entorn de comentaris amb AJAX.

Els requisits centrals de la comanda residien en un blog que permetés als autors escriure tres tipus de continguts diferents i que aquests automàticament fossin geolocalitzats i posicionats gràficament en un mapa. Per aconseguir-ho s’ha fet ús de nou de la informació geogràfica lliure d’OpenStreetMap i la llibreria Leaflet, creant tres tipus d’entrades específiques mitjançant la funció register post type de WP, i modificant el backend de l’editor d’entrades per afegir un botó que geocalitza la ubicació dels autors a l’hora de redactar l’entrada, o que els permet buscar una adreça.

Un cop l’entrada és publicada, aquesta informació en forma de coordenades és guardada automàticament a la base de dades relacional, que és d’on extreu les dades la funció que construeix el mapa al carregar la pàgina principal, per tal de convertir cada entrada en un icone posicionat en el mapa -tres icones diferents, un per cada tipus d’entrada-  i que ofereix, al ser clicat, un conjunt d’informació de la entrada (títol, imatge principal, resum i enllaç al post en qüestió).

Com a complement de les funcionalitats del mapa, també s’ha afegit un filtre per tipus d’entrada implementat amb AJAX, que mostra en el mapa, sense necessitat de recarregar la pàgina, les entrades vinculades amb cadascun dels tres tipus de post.

En referència a la galeria d’imatges i vídeos, la idea era un apartat on poder trobar tot aquell material gràfic que els autors anaven adjuntant en les seves entrades, per oferir al visitant un sistema de navegació alternatiu molt més visual. Així és com s’ha cimentat: la pàgina de la galeria crea una matriu amb els enllaços de tots els elements multimèdia associats a entrades publicades,  les ordena per idioma i tipus d’entrada, i manté la informació referent a quina entrada va associada, per tal que l’usuari pugui accedir a llegir l’entrada vinculada amb la imatge que té en pantalla.

Degut a que el procediment estàndard de WP no diferència entre imatges i vídeos en el moment de l’emmagatzematge del seu vincle en la base de dades, s’ha aprofitat l’etiqueta destinada a descripció del mèdia per introduir una paraula clau que ens funcionarà com a constant a l’hora de saber si les dades rebudes corresponen a una imatge o un vídeo abans que aquestes es carreguin. Dit d’una altra manera, per cada vídeo publicat els autors del blog escriuran en el camp de la descripció un text relacionat amb el vídeo, que comenci amb la paraula Video. Per exemple, “Video de las Cataratas de Iguazú”. La primera paraula és la constant abans esmentada i ens indica el tipus de mèdia desde la matriu: si la primera paraula de la descripció és la paraula Video, es tracta d’un video. En cas contrari, és una imatge. Això ens resulta molt útil a l’hora de poder integrar correctament els vídeos en la galeria d’imatges, tan des del punt de vista de Javascript com en el de CSS.

El principal repte a l’hora de crear galeries multimèdia és que la seva càrrega sigui àgil en qualsevol dispositiu i no sobrepassi les possibilitats de connexions limitades. La solució en aquest cas consisteix en establir la càrrega inicial a 24 elements, a mesura que l’usuari es desplaça cap a baix automàticament es prepara i es mostra el següent grup de 12 elements, i així fins que l’usuari deixa de desplaçar-se per veure més contingut o fins que s’arriba al final del mateix. A més, els elements que es carreguen en aquesta pàgina són miniatures ampliables adaptades a la mida de la pantalla, de forma que l’usuari pot tenir aquest apartat carregat a partir d’un cost de només 350kb aproximadament (mesura similar a l’aplicada per Google Imatges en el seu buscador). Afegir també que aquesta matriu de dades de la galeria es construeix des d’una crida AJAX, motiu per el qual el visitant pot filtrar ràpidament el contingut que es mostra per tipus d’entrada.

Per la organització dels posts, a banda de les tres tipologies creades ja comentades, s’han creat diferents taxonomies pròpies per a cada tipus d’entrada. Això permet oferir una navegació principal per tipus, i un filtre opcional secundari per categoria. Per enriquir la interacció en l’apartat de comentaris s’ha usat el plugin Ajaxify Comments, que proporciona de forma eficient comunicació immediata amb el visitant que envia el seu comentari, sense càrregues de pàgines ni redireccions molestes. La funcionalitat bilingüe s’ha aplicat amb el plugin Polylang, del que ja he parlat en anteriors projectes.

Comentar que també s’han aplicat les mesures SEO habituals en altres projectes, emfatitzant en aquest cas el posicionament de les imatges a Google i atenent les microdades referents als dos idiomes de la web. Les qüestions estètiques s’han elaborat exclusivament amb CSS, responsive com sempre.

 

 

 

 

 

 

Fes un ull a altres treballs:


«