Parques Naturales de Jaén
El Reto
Este proyecto nació de una doble necesidad: una personal y una profesional. Recién trasladado a un pueblo de Jaén y con una profunda pasión por la naturaleza, descubrí que la información sobre los parques de la región estaba fragmentada y poco accesible. Al mismo tiempo, como parte de mi formación en diseño web, buscaba un proyecto real que fuera más allá de un simple ejercicio; un reto que me permitiera aplicar y consolidar mis habilidades como ingeniero en una solución útil y tangible para otros amantes de la naturaleza.
Mi Solución
Mi enfoque fue directo y centrado en la utilidad. La solución se articuló en torno a una estructura de 'artículos', uno por cada zona de interés, para presentar la información de forma clara. El punto de inflexión fue encontrar un mapa detallado de la región, el cual transformé en un mapa de enlaces SVG. Esta pieza se convirtió en el corazón de la web: un mapa interactivo y responsive que sirve como índice principal. Para enriquecer la experiencia, añadí una sección de 'Actividades' con datos cargados desde un fichero JSON, y un formulario de contacto funcional que se comunica con un servicio externo mediante la API Fetch.
Informe del Arquitecto
Pila Tecnológica (Tech Stack)
- HTML5
- CSS3
- JavaScript (ES6+)
- JSON
- Formspree API
- Inkscape
Arquitectura y Decisiones Clave
- Arquitectura de Aplicación Dinámica (SPA-like): La sección de "Actividades" renderiza el contenido del lado del cliente, obteniendo los datos de un fichero JSON y construyendo la interfaz con JavaScript nativo.
- Sistema de Plantillas Nativas: Se desarrolló un sistema de componentes reutilizables (menú, pie de página) usando funciones de JavaScript para inyectar HTML, evitando la repetición de código sin necesidad de un framework.
- Integración de Servicios Externos (Backendless): El formulario de contacto utiliza la API Fetch para enviar datos de forma asíncrona a Formspree, una práctica estándar en el desarrollo web moderno.
- Mapa Vectorial Interactivo: El índice de parques se basa en un mapa SVG manipulado con Inkscape para definir zonas clicables, una solución creativa y de alto rendimiento.
Desafío Técnico Principal
El desafío más apasionante fue diseñar y construir una arquitectura de aplicación dinámica desde cero, utilizando únicamente las herramientas base de la web. Esto me obligó a entender los fundamentos de cómo frameworks como React gestionan el estado, renderizan componentes y manejan eventos. Implementar la carga de datos desde un JSON y gestionar el envío de un formulario de forma asíncrona fue un profundo aprendizaje práctico sobre cómo funcionan las librerías modernas por dentro.
