En este artículo veremos como crear un plano interactivo para publicar en web a partir de un plano existente en formato JPG o PNG con diferentes técnicas y niveles de dificultad.
Ya te avanzo que, como es lógico, mi opción preferida es usar Mapplanner.
Crear un mapa interactivo solo con HTML
Dificultad técnica: Baja
Nivel de personalización: Muy bajo
Tiempo de desarrollo: Muy corto
Con el tag html <map> o con enlaces normales posicionados estratégicamente podemos simular un mapa interactivo muy sencillo. Servirá para casos muy simples en los que nos sea suficiente mostrar un nombre y aplicar un enlace a cada uno de los elementos.
Este sistema tiene bastantes deficiencias:
- Es muy difícil personalizarlo.
- Es complejo hacerlo compatible con todos los dispositivos.
- Necesitaremos alguna herramienta como www.zaneray.com/responsive-image-map si no queremos complicarnos la vida mapeando nuestra imagen.
- Siempre dependeremos de la edición del código
A continuación os dejo un ejemplo creado con este sistema:
Crear el plano con HTML y Javascript
Dificultad técnica: Alta
Nivel de personalización: Muy alto
Tiempo de desarrollo: Largo
Gracias al uso de Javascript un programador podrá generar un plano interactivo completamente a medida, con el que conseguiremos los resultados deseados y podremos hacer todo lo que queramos.
El inconveniente de esta solución es que se trata de un trabajo engorroso, que implica muchas horas de desarrollo y en consecuencia es costoso, seguramente no bajemos de los 700€ en el desarrollo inicial de un plano medio. Eso si hablamos de un solo plano, si en tu caso necesitas crear múltiples planos este presupuesto seguramente se multiplicará por 3 o 4. Este sistema tiene muchas ventajas y unos pocos inconvenientes:
- El desarrollo inicial es muy costoso.
- Normalmente dependeremos de un programador para hacer modificaciones.
Podrás ver planos interactivos en diferentes sitios web, por ejemplo en esta web https://hleb-dom.ru/en/location.html utilizan un bonito plano personalizado para mostrar diferentes lugares de la ciudad de forma atractiva. Prácticamente todas las funcionalidades que encontraras en él puedes conseguirlas con Mapplanner, nuestra solución que vemos más abajo continuación.
Crear un plano con herramientas infográficas
Dificultad técnica: Baja
Nivel de personalización:Alto
Tiempo de desarrollo: Medio
Existen herramientas para crear infografías o gráficos interactivos como www.genial.ly con las que con un poco de trabajo puedes llegar a conseguir un plano interactivo básico.
No me malinterpretes, estas herramientas son muy potentes y muy completas, pero no están enfocadas en la elaboración de planos interactivos. Aunque puedes usarlas la experiencia en la creación y en el resultado final no será la misma que en una plataforma de generación de planos interactivos como Mapplanner.
Crear un plano interactivo con Mapplanner
Dificultad técnica: Baja
Nivel de personalización:Alto
Tiempo de desarrollo: Bajo
Aquí llegamos a nuestro servicio que creo, con sinceridad, es la mejor opción para generar un plano interactivo de calidad si lo que deseas es ofrecer a tu visitante una buena experiencia de uso y dotar al plano de mucha información e imágenes.
Con Mapplanner solo tendrás que importar tu imagen de plano y empezar a crear marcadores o puntos de interés, que podrán ser áreas interactivas o imágenes.
Utilizando las plantillas, podrás reutilizar siempre las funcionalidades que ya has definido, por lo que si dos, tres o veinte marcadores con diferente información deben verse y comportarse igual, podrás montar tu plano en unos minutos. Os aseguro que teniendo el material listo, el desarrollo de cada una de nuestras demos no me ha llevado más de 4 horas y en muchos casos han sido tan solo 2 horas.
A continuación te dejo el ejemplo de plano con el que he iniciado este post, pero en esta ocasión creado con Mapplanner para que puedas ver la diferencia:
Soy consciente de que acabamos de empezar y hay mucho que desarrollar, es por ello que si creas tu cuenta de prueba y accedes al panel de usuario, podrás rellenar un formulario para indicar que cosas añadirías al servicio.
Muchas gracias por llegar hasta aquí y si tienes alguna duda, escríbeme para consultarme como crear un plano interactivo con Mapplanner.
0 comentarios