> For the complete documentation index, see [llms.txt](https://docs.gaiodataos.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gaiodataos.com/gaio-dataos-spanish/herramientas/tareas/entrega/contenido.md).

# Contenido

<figure><img src="/files/OQ3J04x9SbX4y6yaLLnb" 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gaiodataos.com/gaio-dataos-spanish/herramientas/tareas/entrega/contenido.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.