Mapeo y Redes - Responsive

Mapeo y Redes


Juny 2015.

Mapeo y Redes és un projecte de mapatge per un col·lectiu social de Barcelona. Consisteix en una web col·laborativa de geolocalització d’entitats que permet la introducció i mostra de diferents nivells de dades de forma intuïtiva, tant pels usuaris com pels futurs administradors.

En aquest tipus de projectes de tractament de dades, la construcció personalitzada de la base de dades resulta imprescindible per poder accedir posteriorment a elles de forma aïllada i treure el màxim rendiment de les mateixes. Per fer-ho, s’ha treballat amb MYSQL aprofitant la organització de dades bàsica que ofereix WordPress tot ampliant la seva estructura a un nou nivell jeràrquic de dades relacionals.

MYSQL - Base de dades Mapeo

Una de les característiques del projecte consistia en la voluntat de que la participació en la tramesa de dades per part de l’usuari fos el més immediata possible. En conseqüència, es prescindeix del registre d’usuaris per tal de no limitar l’entrada de nou contingut a una àrea restringida. Amb aquest objectiu, es facilita al mateix frontend un formulari d’introducció de dades que a l’enviar-se compleix una triple funció: per una banda, emmagatzema les dades a les taules corresponents de la base de dades; en segon lloc,  maqueta un esborrany de post amb les dades introduïdes i el manté al panell d’administrador a l’espera de ser aprovat; i en tercer lloc, envia un correu electrònic als administradors del web per tal que aquests estiguin informats de que hi ha un nou esborrany pendent.

Registre Mapeo

Un cop l’administrador accedeix al panell de WordPress i revisa l’esborrany, pot eliminar (o modificar-lo) si alguna dada és incorrecte, o acceptar-lo. Al acceptar-ho, s’executen dues accions: per una banda es publica l’entrada acceptada en la seva secció corresponent, i per altre es fa una crida a les dades emmagatzemades referents a geolocalització per tal de mostrar en el mapa principal la nova entitat afegida. En aquest últim pas, a més, també s’agafen una selecció automatitzada de dades que es mostraran en el pop-up de la icona que representarà la nova entitat en el mapa.

Icona i pop-up en el mapa.

Aquest desplegable, a la vegada, conté un enllaç directe a la pàgina que s’ha creat amb la informació completa del registre relacionat. També s’ha facilitat la navegació a través d’etiquetes que en aquest projecte s’han vinculat a àmbits d’actuació dels col·lectius registrats. Aquesta taxonomia permet accedir a un llistat de posts relacionats amb els registres que participin en aquell àmbit (informació que dóna també l’usuari en el moment de la introducció de dades). A més, unit al cercador ubicat en el mapa que s’ha creat pel projecte, l’usuari pot filtrar els marcadors del mapa per nom i àmbit (que com em dit, estan vinculades a les etiquetes de WP). Aquest cercador s’ha creat amb AJAX i es comunica amb la base de dades de forma asíncrona, això és, que s’executa i retorna els resultats sense interferir amb la resta del codi, fent possible el filtre de dades sense que la pàgina es tingui que tornar a carregar.

Finalment, destacar que per a la representació del mapa s’ha usat el framework Leaflet i la tecnologia de OpenStreetMaps, alternativa (més) lliure al popular Google Maps. Presenta un disseny senzill i funcional basat en el concepte ‘Mobile first’, ja que el perfil del projecte requeria ubicar l’èmfasi del seu disseny en l’ús des de terminals mòbils.

 

Fes un ull a altres treballs:


« »