Planificador de viaje interactivo

Planificador de viaje interactivo que centraliza en una única aplicación web toda la información de un viaje: itinerario diario, mapa de ruta, reservas con su documentación, trámites previos y una guía de frases del idioma …

Tecnologías utilizadas:
Nginx PWA JavaScript HTML5 CSS3 Leaflet OpenStreetMap Wikipedia API
10 Sep 2026
Planificador de viaje interactivo

Sobre este Proyecto

Una exploración detallada de las tecnologías, metodologías y soluciones implementadas

Visión y Desarrollo

Planificador de viaje interactivo que centraliza en una única aplicación web toda la información de un viaje: itinerario diario, mapa de ruta, reservas con su documentación, trámites previos y una guía de frases del idioma local. Está diseñado para consultarse desde el móvil durante el viaje y funciona como aplicación instalable, también sin conexión.

La demo recorre un itinerario de diez días por Tailandia —Bangkok, Ayutthaya, Khao Yai y Koh Tao— con lugares, horarios y rutas reales; las reservas, los localizadores y los documentos son ficticios.

ITINERARIO DÍA A DÍA
• Calendario con selector de días persistente y cada jornada organizada en mañana, tarde y noche.
• Enlaces directos a cada día (#d13) y a cada sección, para compartir o consultar un punto concreto del viaje.
• Detección automática de los lugares mencionados en el texto, que quedan enlazados a su ubicación en Google Maps.

MAPA Y RUTA DEL DÍA
• Mapa interactivo (Leaflet + OpenStreetMap) con las paradas numeradas en orden de visita y el recorrido trazado.
• Acceso a la ruta completa del día en Google Maps y a cada parada por separado.
• Galería fotográfica de cada lugar obtenida en tiempo real de Wikipedia y Wikimedia Commons, con visor a pantalla completa y navegación por gestos.

RESERVAS Y DOCUMENTACIÓN
• Reservas asociadas a cada día —vuelos, alojamientos, excursiones, entradas y traslados— con localizador, horarios, punto de encuentro y ubicación.
• Visor de PDF integrado: billetes, bonos y pólizas se consultan dentro de la propia aplicación, sin descargas.
• Resumen del viaje con el esquema completo, los vuelos por tramos y cada traslado con sus coordenadas GPS.

PREPARACIÓN DEL VIAJE
• Lista de trámites (documentación, formulario de entrada, seguro, vacunas y equipaje) que se reordena según el progreso y lo conserva en el navegador.
• Guía de frases en tailandés con su pronunciación aproximada.

APLICACIÓN INSTALABLE Y OFFLINE
• PWA con service worker que precarga la aplicación y toda la documentación, de modo que billetes y reservas siguen disponibles sin cobertura.

Desarrollado con HTML, CSS y JavaScript nativos, sin frameworks ni proceso de compilación, y desplegado como sitio estático sobre Nginx. Interfaz adaptada a móvil y escritorio, con transiciones que respetan la preferencia de movimiento reducido.

Itinerario día a día
Itinerario día a día
Calendario del viaje con selector de días fijo y la jornada dividida en mañana, tarde y noche.
Mapa con la ruta del día
Mapa con la ruta del día
Paradas numeradas en orden de visita, ruta trazada, fotos de cada lugar y accesos directos a Google Maps.
Documentos en la propia web
Documentos en la propia web
Billetes, vouchers y pólizas en PDF que se abren en un visor integrado, también sin conexión.
Resumen del viaje
Resumen del viaje
Los diez días de un vistazo, con los vuelos tramo a tramo y los traslados con coordenadas GPS.
Checklist de trámites
Checklist de trámites
Preparativos que se marcan y se reordenan solos; el progreso queda guardado en el navegador.
  • Arquitectura escalable y mantenible
  • Diseño responsivo y accesible
  • Optimización de rendimiento
  • Integración de APIs modernas
  • Seguridad implementada desde el diseño
Innovación Tecnológica

Implementación de las últimas tendencias y mejores prácticas en desarrollo web, asegurando un producto moderno y competitivo en el mercado actual.

Experiencia Multi-dispositivo

Diseño completamente responsivo que garantiza una experiencia fluida y consistente en smartphones, tablets y dispositivos de escritorio.

Rendimiento Optimizado

Código altamente optimizado con técnicas de carga rápida, lazy loading y compresión de recursos para tiempos de carga excepcionales.

¿Te gustó este proyecto?

Me encantaría colaborar contigo en tu próximo proyecto. Hablemos sobre cómo puedo ayudarte a hacer realidad tus ideas.

Trabajemos Juntos

¿Tienes un proyecto en mente? Me especializo en crear soluciones web innovadoras con Django, JavaScript y tecnologías modernas.

LinkedIn
danimateu14
GitHub
danielmateu14
Especialidades
Django • JavaScript • APIs REST