Mapeo y Redes - Responsive

Mapeo y Redes


Junio 2015.

Mapeo y Redes es un proyecto web para un colectivo social de Barcelona. Consiste en una herramienta colaborativa de geolocalización de entidades que permite la introducción y muestra de diferentes niveles de datos de forma intuitiva, tanto para los usuarios como para los futuros administradores.

En este tipo de proyectos de tratamiento de datos, la construcción personalizada de la base de datos resulta imprescindible para poder acceder posteriomente a ellos de forma aislada y extraer el máximo rendimiento de las variables almacenadas. Para lograrlo, se ha trabajado con MYSQL aprovechando la organización de datos nativa que nos ofrece WordPress, ampliando su estructura a un nuevo nivel jerárquico relacional de datos.

MYSQL - Base de dades Mapeo

Una de las características del proyecto consistía en la voluntad de que la participación en el envío de datos por parte de los usuarios fuera lo más immediata posible. En consecuencia, se prescinde del registro de usuarios con tal de no limitar la entrada de nuevo contenido a una área restringuida. Para ello, se facilita en el mismo frontend un formulario de introducción de datos que al ser enviado cumple una triple función: para empezar, almacena los datos en las tablas correspondientes de la base de datos; en segundo lugar, maqueta un post en modo borrador con los datos introducidos y lo mantiene en el panel de administración a la espera de ser aprobado; y por último, envía un correo electrónico a los administradores de la web informando que hay un nuevo borrador pendiente.

Registre Mapeo

Cuando el administrador accede al panel de WordPess y revisa el borrador, puede eliminarlo (o modificarlo) si algún dato es incorrecto, o aceptarlo. En el caso de ser aceptado, se ejecutan dos acciones: por un lado se publica la entrada aceptada en su sección correspondiente, y por otro se produce un llamamiento a los datos almacenados referentes a geolocaclización con tal de mostrar en el mapa principal la nueva entidad añadida. En este último paso, además, también se recoge una selección automatizada de datos relacionados que se mostrarán en el pop-up del icono que representará la nueva entidad en el mapa.

Icona i pop-up en el mapa.

Este desplegable, a su vez, contiene un enlace directo a la página que se ha creado con la información completa del registro en cuestión. También se ha facilitado la navegación a través de etiquetas que en este proyecto responde a los ámbitos de actuación de los colectivos registrados. Esta taxonomía permite acceder a un listado de posts relacionados con los registros que participen en ese mismo ámbito (información aportada también por los usuarios en el momento de la introducción de datos). Además, junto al buscador ubicado en el mapa principal, el usuario puede filtrar los resultados de su búsqueda por nombre y ámbito (que como hemos explicado, corresponden a etiquetas de WP). Este buscador se ha construido con AJAX comunicándose con la base de datos de forma asíncrona, esto es, que se ejecuta y devuelve los resultados sin interferir con el resto de código, haciendo posible el filtro de datos sin que la página tenga que volver a cargar.

Finalmente, destacar que para la representación del mapa se ha usado el framework Leaflet y la tecnología de OpenStreetMaps, alternativa (más) libre al popular Google Maps. Presenta un diseño sencillo y funcional basado en el concepto ‘Mobile first’, ya que el perfil del proyecto requería ubicar el énfasis de su diseño en el uso desde terminales móviles.

 

Curiosea otros trabajos:


« »