Novela Multidimensional Interactiva

Descripción Breve

Este proyecto es una novela interactiva desarrollada en HTML, CSS y (futuramente) JavaScript. La estructura permite crear una narrativa con múltiples hilos, personajes y lugares interconectados, ofreciendo una experiencia de lectura no lineal y rica en detalles.

Estructura de Carpetas

• index.html: Punto de entrada principal de la novela. Desde aquí se enlaza al primer capítulo.
• css/: Contiene los archivos de hojas de estilo.
  • estilos.css: Define la apariencia visual de toda la novela.
• historias/: Almacena los archivos HTML para cada capítulo, escena o arco narrativo.
  • Ejemplo: capitulo1.html
  • Contiene un archivo .gitkeep para asegurar que la carpeta sea rastreada por Git.
• personajes/: Contiene los archivos HTML para los perfiles detallados de cada personaje.
  • Ejemplo: heroe_principal.html
  • Contiene un archivo .gitkeep.
• lugares/: Incluye los archivos HTML para las descripciones de los diferentes lugares y escenarios de la novela.
  • Ejemplo: aldea_inicio.html
  • Contiene un archivo .gitkeep.
• plantillas/: Contiene las plantillas base para crear nuevo contenido.
  • plantilla_historia.html: Plantilla para nuevos capítulos/historias.
  • plantilla_personaje.html: Plantilla para nuevos perfiles de personaje.
  • plantilla_lugar.html: Plantilla para nuevas descripciones de lugar.
  • Contiene un archivo .gitkeep.
• js/: Destinada a futuros archivos JavaScript para añadir interactividad avanzada.
  • Actualmente vacío, pero contiene un .gitkeep.
• media/: Para almacenar imágenes, mapas, u otros archivos multimedia que se puedan incorporar en la novela.
  • Actualmente vacío, pero contiene un .gitkeep.

Cómo Añadir Nuevo Contenido

Sigue estos pasos para expandir la novela:

Nueva Historia/Capítulo

1. Copiar Plantilla: Copia el archivo plantillas/plantilla_historia.html a la carpeta historias/ y renómbralo descriptivamente (ej. historias/capitulo2_el_despertar.html).
2. Editar Metadatos: Abre el nuevo archivo y modifica el contenido de la etiqueta <title> y el <h1> principal para reflejar el título del capítulo.
3. Añadir Narrativa: Escribe o pega el contenido narrativo dentro de la etiqueta <main>, utilizando párrafos <p>, y otros elementos HTML según sea necesario.
4. Crear Enlaces:
   • Para enlazar a un personaje: <a href="../personajes/nombre_del_personaje.html">Nombre del Personaje</a>.
   • Para enlazar a un lugar: <a href="../lugares/nombre_del_lugar.html">Nombre del Lugar</a>.
   • Asegúrate de que los archivos referenciados existan o créalos siguiendo los pasos correspondientes.
5. Vincular Capítulo: Añade un enlace a este nuevo capítulo desde el index.html (si es un punto de inicio) o desde el capítulo anterior para mantener la continuidad.

Nuevo Personaje

1. Copiar Plantilla: Copia plantillas/plantilla_personaje.html a personajes/ y renómbralo con el nombre del personaje (ej. personajes/mentor_arcano.html).
2. Editar Metadatos: Modifica el <title> y el <h1> con el nombre del personaje.
3. Rellenar Información: Completa las diferentes secciones (<section id="descripcion_general">, <section id="historia_trasfondo">, etc.) con la información detallada del personaje.
4. Aplicar Estilos de Sección (Opcional): Para usar los estilos predefinidos, añade la clase CSS correspondiente a cada etiqueta <section>. Por ejemplo: <section id="descripcion_general" class="descripcion-general">
5. Enlazar al Personaje: Desde los capítulos o lugares donde este personaje aparezca o sea relevante, añade enlaces a este archivo de personaje.

Nuevo Lugar

1. Copiar Plantilla: Copia plantillas/plantilla_lugar.html a lugares/ y renómbralo (ej. lugares/ciudad_perdida.html).
2. Editar Metadatos: Actualiza el <title> y el <h1> con el nombre del lugar.
3. Rellenar Información: Describe el lugar en las secciones correspondientes.
4. Aplicar Estilos de Sección (Opcional): Al igual que con los personajes, puedes añadir clases CSS a las secciones: <section id="descripcion_general" class="descripcion-general">
5. Enlazar al Lugar: Crea enlaces a este lugar desde los capítulos o perfiles de personajes que estén asociados con él.

Estilos CSS

• La apariencia visual de la novela se controla principalmente a través del archivo css/estilos.css.
• Existen clases CSS predefinidas para estilizar secciones comunes en las páginas de personajes y lugares. Estas clases son:
  • .descripcion-general
  • .historia-trasfondo (para personajes) / .historia-relevancia (para lugares)
  • .relaciones (para personajes)
  • .apariciones (para personajes)
  • .eventos-ocurridos (para lugares)
  • .personajes-asociados (para lugares) Puedes aplicar estas clases a las etiquetas <section> correspondientes en los archivos HTML para obtener un formato consistente.

Funcionalidades Interactivas

Modales Interactivos (Ventanas Emergentes)

Los modales se utilizan para mostrar información adicional detallada sin necesidad de navegar a una nueva página. Por ejemplo, se pueden usar para dar más contexto sobre un objeto, un personaje secundario mencionado brevemente, o un concepto específico de la historia.

Cómo activar un modal:

1. Añadir Clase: Al elemento HTML que desees que active el modal (puede ser un <span>, un <a>, un <button>, etc.), añádele la clase activador-modal.
2. Definir Contenido con Atributos data-*: En el mismo elemento, define el contenido que aparecerá en el modal usando los siguientes atributos:
   • data-modal-titulo="El título que aparecerá en el modal": Define el encabezado del modal.
   • data-modal-parrafo1="Contenido del primer párrafo. Puede incluir <b>HTML</b> simple.": Define el texto del primer párrafo principal del modal.
   • data-modal-parrafo2="Contenido del segundo párrafo (opcional).": Define un segundo párrafo. Si se omite, esta parte no se mostrará o quedará vacía.
3. Estructura del Modal en la Página: Asegúrate de que la estructura HTML base del modal esté presente en la página donde se va a utilizar el activador. Actualmente, esta estructura es:

   <!-- El Modal Genérico -->
   <div id="miModal" class="modal-contenedor">
       <!-- Contenido del Modal -->
       <div class="modal-contenido">
           <span class="modal-cerrar">&times;</span>
           <h2>Título del Modal</h2> <!-- Este H2 será reemplazado por data-modal-titulo -->
           <p>Contenido de ejemplo...</p> <!-- Este p será reemplazado por data-modal-parrafo1 -->
           <p>Más contenido aquí.</p> <!-- Este p será reemplazado por data-modal-parrafo2 -->
       </div>
   </div>

   (Esta estructura se puede copiar de index.html o historias/capitulo1.html y pegarla antes del cierre del </body>).
4. Enlazar JavaScript: La página debe tener enlazado el script de interacciones: <script src="js/interacciones.js"></script> (o ../js/interacciones.js si está en una subcarpeta), preferiblemente al final del <body>.

Ejemplo de un activador de modal:

<span class="activador-modal tooltip"
      data-modal-titulo="Información sobre el Medallón"
      data-modal-parrafo1="Este antiguo medallón perteneció a los Guardianes del Tiempo."
      data-modal-parrafo2="Se dice que vibra en presencia de anomalías temporales."
      style="cursor: pointer; font-weight: bold;">
    el viejo medallón
    <span class="tooltip-texto">Haz clic para saber más sobre el medallón.</span>
</span>

Este ejemplo muestra un <span> que, al ser clickeado, abrirá un modal con el título "Información sobre el Medallón" y los dos párrafos especificados. También conserva la funcionalidad de tooltip CSS.

Tooltips (Información rápida)

Los tooltips CSS se utilizan para mostrar información breve al pasar el cursor sobre un elemento.

• Cómo usarlos: Envuelve el texto que quieres que tenga un tooltip con un <span> (o usa un elemento existente como <a>).
  • Añade la clase tooltip al elemento contenedor.
  • Dentro de este elemento, añade otro <span> con la clase tooltip-texto y el contenido del tooltip.
• Ejemplo:

  El <span class="tooltip">artefacto<span class="tooltip-texto">Un objeto misterioso y antiguo.</span></span> brillaba con luz propia.

Futuras Mejoras

• Interactividad con JavaScript: Se podría añadir JavaScript para funcionalidades como:
  • Tooltips para mostrar información adicional al pasar el cursor sobre ciertos términos.
  • Modales para mostrar perfiles de personajes o descripciones de lugares sin salir de la página actual.
  • Mapas interactivos.
• Más contenido y ramificaciones.

---

Documentación creada para el proyecto de Novela Multidimensional.