# Contenido

<figure><img src="https://content.gitbook.com/content/7nKJZNWmfvaqAyIRrGi4/blobs/mpEWDoWtshMYLS548vUE/Content.png" alt=""><figcaption></figcaption></figure>

El componente **Content** permite crear elementos visuales personalizados utilizando **HTML**, **CSS (Style)** y **JavaScript (Script)**. Es una herramienta poderosa para construir paneles dinámicos, interfaces interactivas y presentaciones de datos personalizadas, todo dentro de la plataforma Gaio. Esta tarea ofrece gran flexibilidad para usuarios con conocimientos de programación.

***

## Cómo Usar el Editor Content

### 1. Seleccionar el Componente Content

1. En el panel lateral izquierdo, dentro de **Entrega**, arrastra la tarea **Content** hacia tu flujo.
2. Conéctala a las tareas o tablas cuyos datos deseas utilizar.

***

### 2. Configurar la Tarea

#### Etiqueta de la Tarea

(Opcional) Nombre para identificar este paso dentro del flujo.

***

#### Pestaña HTML (Estructura Visual)

Utiliza esta pestaña para construir la estructura del resultado visual.

Aquí defines:

* Contenedores
* Títulos
* Tablas personalizadas
* Elementos interactivos

***

#### Pestaña Script (Lógica JavaScript)

Permite agregar lógica dinámica.

* Accede a las tablas mediante el objeto `context`.
* Inserta valores dinámicamente dentro del HTML.
* Aplica cálculos personalizados.

***

#### Pestaña Style (Estilos CSS)

Permite personalizar la apariencia:

* Colores
* Tipografía
* Espaciado
* Bordes
* Animaciones

{% hint style="danger" %}
Aunque las pestañas estén separadas por lenguaje, puedes combinar HTML, CSS y JavaScript dentro del mismo código.
{% endhint %}

***

### Contexto de Datos

Para utilizar datos de tablas existentes en Gaio:

1. Debes marcarlas como disponibles.
2. Activa cada tabla que será utilizada.
3. Gaio pondrá sus datos a disposición en esta tarea.

***

### Opciones

* **Borde:** Define si el resultado visual tendrá un contenedor con borde.
  * Con borde: genera un cuadro visual.
  * Sin borde: el contenido se integra con el fondo.
  * Recomendación: usar sin borde cuando se muestran imágenes o diseños más limpios.
* **Biblioteca:** Permite seleccionar bibliotecas externas compatibles.
* **Contenido:** Permite acceder a imágenes, PDFs y otros archivos cargados en Gaio.\
  Desde esta tarea es posible mostrar:
  * Imágenes
  * PDFs
  * Videos
  * Mapas
  * Cualquier elemento que el código permita renderizar

***

### 3. Vista Previa y Configuración de Visualización

#### Pestaña Resultado

Muestra una vista previa en tiempo real del contenido renderizado.

Puedes:

* Combinar datos de múltiples tablas
* Aplicar cálculos
* Mostrar resultados dinámicos en tiempo real

#### Configuración de Tamaño

* **Ancho (%)** – Define cuánto espacio horizontal ocupa el componente.
* **Altura (px)** – Define el tamaño vertical del marco de resultado.

{% hint style="danger" %}
Siempre que agregues o modifiques código, debes hacer clic en **Ejecutar** para visualizar el resultado.
{% endhint %}

***

## Buenas Prácticas

* Mantén el HTML y JavaScript modular y limpio.
* Verifica siempre valores `null` o `undefined` antes de utilizarlos.
* Utiliza `console.log()` para depuración cuando sea necesario.

{% hint style="info" %}
El componente Content permite transformar Gaio en una plataforma altamente personalizada, combinando datos, diseño y lógica en una única experiencia interactiva.
{% endhint %}