> ## Documentation Index
> Fetch the complete documentation index at: https://docs.intrena.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Diseño de cursos

> El editor visual: módulos, submódulos y pantallas de contenido.

El **diseñador de cursos** es donde se construye el contenido que verá la
persona. Se abre desde el catálogo o desde el detalle del curso, con la opción
**Diseño**.

## La estructura de un curso

Todo curso tiene tres niveles:

```mermaid theme={null}
flowchart TD
  C[Curso] --> M1["Módulo 1"]
  C --> M2["Módulo 2"]
  M1 --> S1["Submódulo 1.1"]
  M1 --> S2["Submódulo 1.2"]
  S1 --> P1["Pantalla: Concepto"]
  S1 --> P2["Pantalla: Selección única"]
  S1 --> P3["Pantalla: Video"]
```

<CardGroup cols={3}>
  <Card title="Módulo" icon="layer-group">
    El bloque temático mayor. La persona lo ve como una sección del curso, con su
    propia pantalla de resultados.
  </Card>

  <Card title="Submódulo" icon="list">
    Una sesión dentro del módulo. Es la unidad que la persona completa de una
    sentada y sobre la que se calcula el avance.
  </Card>

  <Card title="Pantalla" icon="mobile-screen-button">
    Cada contenido individual: un concepto, una pregunta, un video, un reto. Ver
    [Tipos de contenido](/formacion/tipos-de-contenido).
  </Card>
</CardGroup>

## La pantalla del editor

<Columns cols={2}>
  <div>
    **A la izquierda**, el árbol del curso: módulos y submódulos, con el número de
    pantallas de cada uno. Desde aquí agregas, renombras, reordenas y eliminas.

    **En el centro**, la tira de pantallas del submódulo seleccionado, en
    miniatura y en orden. Se arrastran para reordenar.
  </div>

  <div>
    **A la derecha**, el editor de propiedades de la pantalla seleccionada: su
    texto, sus opciones, su imagen, su audio y una **nota interna** opcional
    (solo la ve tu equipo; no se muestra en la app).

    **Arriba**, la barra de control: agregar contenido, duplicar, eliminar, editar
    el tema visual y exportar a PDF.
  </div>
</Columns>

## Trabajar con módulos y submódulos

<Steps>
  <Step title="Agregar un módulo">
    **Nuevo módulo** en el árbol. Le pones nombre y queda al final; puedes
    arrastrarlo a otra posición.
  </Step>

  <Step title="Agregar un submódulo">
    Dentro de un módulo, la misma acción crea un submódulo.
  </Step>

  <Step title="Reordenar">
    Arrastra en el árbol. El orden que ves es el orden en que la persona lo
    recorre. Puedes contraer o expandir cada módulo o submódulo para
    concentrarte en una parte del curso.
  </Step>

  <Step title="Eliminar">
    Elimina un módulo o submódulo con todo su contenido. **No se puede
    deshacer.**
  </Step>
</Steps>

## Trabajar con pantallas

<AccordionGroup>
  <Accordion title="Agregar" icon="plus">
    **Nuevo contenido** abre un catálogo de plantillas con buscador. Eliges la
    plantilla y la pantalla se crea al final del submódulo, lista para editar.
  </Accordion>

  <Accordion title="Editar" icon="pen">
    Selecciona la miniatura y usa el panel derecho. Los cambios se guardan
    solos.
  </Accordion>

  <Accordion title="Duplicar" icon="copy">
    Copia la pantalla con todo su contenido. Es lo más rápido para series de
    preguntas con la misma estructura.
  </Accordion>

  <Accordion title="Reordenar" icon="arrows-up-down">
    Arrastra dentro de la tira. También se puede mover una pantalla a otro
    submódulo.
  </Accordion>

  <Accordion title="Eliminar" icon="trash">
    Elimina la pantalla seleccionada. Irreversible.
  </Accordion>
</AccordionGroup>

## Recursos: imágenes, audio y video

Las pantallas que lo necesitan tienen un selector de recursos donde puedes subir
un archivo nuevo o reutilizar uno ya subido al curso.

| Tipo        | Formatos      | Notas                                                          |
| ----------- | ------------- | -------------------------------------------------------------- |
| Imágenes    | PNG, JPG, GIF | Se optimizan al subirlas.                                      |
| Audio       | M4A           | Para pantallas de audio.                                       |
| Video       | MP4           | Alojado en la plataforma; también existe la opción de YouTube. |
| Infografías | SVG           | Para la pantalla de infografía.                                |

<Note>
  Los archivos de video y audio admiten hasta 200 MB; las imágenes del tema
  visual, hasta 10 MB.
</Note>

## Vista previa y exportación a PDF

* **Vista previa** abre el curso completo en una sola página, en orden, tal como
  quedará. Es la forma de revisarlo sin abrir la aplicación.
* **Exportar a PDF** genera un documento con todo el contenido. Sirve para
  enviarlo a revisión, para aprobaciones internas o como respaldo documental de
  la formación.

## Recomendaciones de diseño

<AccordionGroup>
  <Accordion title="Submódulos cortos" icon="clock">
    Entre 8 y 15 pantallas. El formato está pensado para sesiones de pocos
    minutos, no para clases de una hora.
  </Accordion>

  <Accordion title="Alterna contenido y pregunta" icon="shuffle">
    Dos o tres conceptos seguidos de una pregunta sostienen mucho mejor la
    atención que diez conceptos consecutivos.
  </Accordion>

  <Accordion title="Una idea por pantalla" icon="lightbulb">
    Si necesitas hacer scroll para leerla completa, divídela en dos.
  </Accordion>

  <Accordion title="Prueba en un teléfono real" icon="mobile">
    Lo que se ve bien en el editor no siempre se ve bien en una pantalla de 5
    pulgadas. Revisa el curso desde la app antes de asignarlo.
  </Accordion>
</AccordionGroup>