Skip to content

Instantly share code, notes, and snippets.

@Heipry
Created February 14, 2025 11:36
Show Gist options
  • Save Heipry/ec5faeea39db5769573837e2e55b0298 to your computer and use it in GitHub Desktop.
Save Heipry/ec5faeea39db5769573837e2e55b0298 to your computer and use it in GitHub Desktop.

Documento Funcional: Sitio Web del Parque Natural

Este documento describe los elementos principales, funcionalidades y estructura del sitio web, incluyendo la navegación hacia otras páginas para las secciones de "Rutas" y "Fauna".

1. Objetivo del Sitio Web

El sitio web tiene como objetivo proporcionar información relevante sobre el Parque Natural, permitiendo a los usuarios explorar las actividades disponibles, obtener información sobre la fauna y las rutas, y realizar reservas de manera sencilla.


2. Estructura del Sitio Web

Página Principal (Landing Page)

  • Encabezado:

    • Incluye el nombre del parque y un eslogan motivador para captar la atención del usuario.
    • Ejemplo: "Parque Natural - Explora la belleza de la naturaleza".
  • Menú de Navegación:

    • Permite acceder a las siguientes secciones:
      • Inicio (landing page): /index.html.
      • Rutas: /rutas.html.
      • Fauna: /fauna.html.
      • Reservas: Sección en la landing page (#reservas).
      • Contacto: Sección en la landing page (#contacto).
  • Cuerpo Principal:

    • Introducción breve al Parque Natural con texto motivador y un botón de Call to Action (CTA).
    • Ejemplo: "¿Listo para vivir una experiencia única en la naturaleza? ¡Reserva tu visita!".
    • Incluye un enlace interno hacia la sección del formulario de reservas.
  • Formulario de Reservas:

    • Campos principales:
      • Nombre (obligatorio).
      • Correo electrónico (obligatorio).
      • Fecha de la visita (obligatorio).
    • Botón para enviar los datos del formulario.
    • La información enviada podría ser procesada en un backend (no implementado en este ejemplo).
  • Pie de Página:

    • Información de contacto (correo electrónico, teléfono).
    • Mapa interactivo embebido desde Google Maps para indicar la ubicación del Parque Natural.

Página de Rutas (rutas.html)

  • Descripción detallada de las rutas disponibles en el parque, incluyendo:
    • Distancias y niveles de dificultad.
    • Fotografías representativas de cada ruta.
    • Recomendaciones para los visitantes.
    • Botón de reserva vinculado al formulario en la landing page (/index.html#reservas).

Página de Fauna (fauna.html)

  • Información sobre las especies más destacadas del parque, incluyendo:
    • Fotografías de alta calidad.
    • Breve descripción de cada especie.
    • Botón de navegación para regresar a la página principal.

3. Funcionalidades Clave

Encabezado y Menú de Navegación

  • El menú permanece fijo en la parte superior de todas las páginas para facilitar la navegación.

Botón de Call to Action (CTA)

  • El botón está vinculado al formulario de reservas en la página principal.

Formulario de Reservas

  • Función: Permitir que los usuarios ingresen sus datos para planificar una visita.

Mapa Interactivo

  • Muestra la ubicación del parque mediante un iframe de Google Maps.

4. Flujo de Navegación

  1. Inicio (Landing Page): Introduce el parque y permite navegar hacia "Rutas" o "Fauna", o realizar reservas directamente.
  2. Rutas: Los usuarios pueden ver información sobre las rutas y, si les interesa, regresar a la página principal para realizar la reserva.
  3. Fauna: Los usuarios pueden explorar las especies más destacadas y, si lo desean, regresar a la página principal para seguir navegando o reservar.
  4. Reservas: Desde cualquier página, el usuario puede acceder al formulario en la landing page para completar su reserva.

5. Estilo Visual (Opcionalmente Personalizable)

  • Paleta de Colores:

    • Verde (#4CAF50) como color principal para representar la naturaleza.
    • Blanco (#FFFFFF) para el fondo principal y texto limpio.
    • Gris oscuro (#333333) para el menú de navegación.
  • Diseño Responsivo:

    • El sitio se ajusta automáticamente a dispositivos móviles mediante el uso de meta viewport y un diseño fluido.

6. Tecnologías Usadas

  • HTML5 para la estructura.
  • CSS3 para el estilo visual y diseño responsivo.
  • JavaScript (opcional) podría ser añadido para funcionalidades adicionales, como validación del formulario o interacción en el mapa.
  • Google Maps Embed API para mostrar el mapa interactivo en el pie de página.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment