Catálogo de Áreas Visuales

Las páginas y subpáginas del gestor de portales se componen de áreas visuales o componentes. Es posible añadir los siguientes tipos de áreas visuales:

r01-image:: Este componente permite introducir un logo, imágenes, listado de imágenes, sliders, etc.
r01-link:: Este componente permite incluir un solo enlace, una lista de enlaces, un menú de uno o varios niveles, etc.
r01-langselector:: Este componente permite el cambio de idioma de la página actual.
r01-subpage:: Este componente le permite incorporar una página de tipo subpágina dentro de otra página. Las subáginas sirven para introducir elementos comunes y repetidos, por ejemplo, el encabezado o el pie de página dentro de otras páginas.
r01-breadcrumb (migas de pan):: Este componente permite mostrar la ruta de navegación en la web.
r01-editor:: Este componente permite introducir texto en formato HTML. Se utiliza para los títulos de las secciones de las páginas. Se debe evitar su uso en la medida de lo posible.
r01-contentlist:: Este componente presenta una lista de contenidos a partir de una búsqueda configurada y/o de una preselección de la misma. Se utiliza para mostrar listados de contenido en diferentes formatos como listados o miniaturas.
r01-calendar:: Este componente dibuja un calendario a partir de una búsqueda configurada de contenidos. Es necesario que el tipo de contenido especificado en la búsqueda disponga de metadatos de fecha.
r01-container:: Este componente te permite incrustar contenido o una aplicación en la página (fijo, si se ha configurado en el Área Visual o dinámico, si se especifica en la URL de la página).

A continuación explicamos más en detalle cómo crear cada una de estas áreas visuales y sus características:

Imagen

Es un área visual muy versátil para trabajar con imágenes y videos. Permite la inserción de un solo elemento o una colección de elementos y es posible presentarlos como galería o como slider. Jugando con el HTML, CSS y JS es posible crear innumerables presentaciones diferentes. En la sección de edición "configuración" se puede seleccionar su comportamiento como "simple" o como "colección".

Como insertar este área visual

<r01-image id=""></r01-image>

Estructura de datos del JSON

El contenido de la estructura de datos es dinámico: se introduce por el usuario. En la sección "Configuración" del área "Editar", se puede configurar para introducir un solo elemento o una colección. Cada elemento puede ser una imagen o un video. Esta área visual también tiene una sección de encabezado compuesta por un título (área de texto) y un subtítulo (editor HTML).

{
  "title" : "Imágenes destacadas",
  "subTitle" : "<p>En esta sección se muestra la relación de imágenes destacadas</p>",
  "images" : [ {
     "sourcePath" : "images/webavc00-logoAVC.png",
     "sourceType" : "IMAGE|VIDEO"
     "altText" : "Logo de AVC ",
     "link" : {
        "url" : "/webavc00-home/es/",
        "texts" : {
           "text" : "Texto del enlace",
           "description" : "Title del enlace"
        },
        "presentation" : {
          "openTarget" : "_blank"
        },
        "useCanonicalUrl" : false
     }
   } ]
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
images: Objeto global que contiene una lista de objetos de imagen y/o videos.
sourcePath: Path o ruta donde se alberga la imagen o video. Puede ser local (/ images / ...) o externo (http://www .....).
sourceType: Tipo del elemento. El valor pueder ser "IMAGE" o "VIDEO".
altText: Texto alternativo para la imagen.
link: Objeto del enlace. Es opcional.
- url: Enlace url.
- texts: Objeto del texto del enlace.
  - text: Texto del enlace.
  - description: Descripción del enlace.
- presentation: Objeto con información sobre cómo se abre el enlace.
- useCanonicalUrl: Uso de la url canonical.

Cómo utilizar la estructura de datos en el área visual

Esta sección solo es editable por el web developer o por el administrador de portal. El html es editable y a través de "expresiones" podemos modelar cómo insertar la estructura de datos en la página.

<div class="va{OID}">
    <!-- for image/video collection -->
    <ul>
        {{#each images}}
            <li class="thumbnail">
                {{#if (isImage this)}}
                    <a href="{{this.link.url}}" target="_blank">
                        <img class="responsive" alt="{{{this.altText}}}" src="{{this.sourcePath}}">
                    </a>
                {{else}}
                    <video width="320" height="240" controls>
                        <source src="{{this.link.url}}" type="video/mp4">
                    </video>
                {{/if}}
            </li>
        {{/each}}
    </ul>

    <!-- for single image -->
    {{#each images}}
        <a href="{{this.url}}" target="_blank">
            <img class="responsive" alt="{{{this.altText}}}" src="{{this.sourcePath}}">
        </a>
    {{/each}}
 </div>

Definición de las expresiones

{{#each images}} {{/each}}: Expresión para iterar la colección de objetos. Dentro de la expresión nos permite acceder a los valores del objeto, para lo cual usaremos las siguientes propiedades:
- {{this.sourcePath}}
- {{{this.altText}}}
- {{this.link.url}}
- {{{this.link.texts.text}}}
- {{{this.link.texts.description}}}
(isImage this): Expresión que devuelve verdadero si el elemento que estamos iterando es de tipo imagen y falso si no lo es.
(isVideo this): Expresión que devuelve verdadero si el elemento que estamos iterando es de tipo video y falso si no lo es.
(eq this.sourceType "IMAGE"): Expresión que devuelve verdadero si el elemento que estamos iterando es de tipo imagen y falso si no lo es.
(eq this.sourceType "VIDEO"): Expresión que devuelve verdadero si el elemento que estamos iterando es de tipo video y falso si no lo es.

Enlace

Es un área visual muy versátil para trabajar con enlaces. Permite la inserción de un solo enlace o una colección de ellos, y presentarlos en forma de lista, como menú o como menú multinivel. Jugando con el HTML, CSS y JS es posible crear innumerables presentaciones diferentes. En la sección de edición "configuración" se puede seleccionar su comportamiento como "simple" o como "colección".

Como insertar este área visual

<r01-link id=""></r01-link>

Estructura de datos del JSON

El contenido de la estructura de datos es dinámico: se introduce por el usuario. En la sección "Configuración" del área "Editar", se puede configurar para introducir un solo elemento o una colección. Esta área visual también tiene una sección de encabezado compuesta por un título (área de texto) y un subtítulo (editor HTML).

{
   "title" : "Enlaces de interés",
   "subTitle" : "<p>En esta sección se muestra la relación de enlaces de interés de cara a ...</p>",
   "links" : [ {
      "url" : {
        "url" : "",
        "texts" : {
            "text" : "Trámites",
            "description" : "Texto descriptivo del enlace"
        },
        "presentation" : {
           "openTarget" : "_blank"
        },
        "useCanonicalUrl" : false
     },
   "links" : [ {
      "url" : {
        "url" : "/pagina-externa-denuncias",
        "texts" : {
            "text" : "Denuncias",
            "description" : "Texto descriptivo del enlace"
        },
        "presentation" : {
           "openTarget" : "_blank"
        },
        "useCanonicalUrl" : false
     }
   },
   [...]
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
links: Objeto global que contiene una lista de objetos de enlaces.
url: Objeto de la url.
- url: Url del enlace.
- texts: Objeto del texto del enlace.
  - text: Texto del enlace.
  - description: Descripción del enlace.
- presentation: Objeto con información sobre cómo se abre el enlace.
- useCanonicalUrl: Uso de la url canonical.

Cómo utilizar la estructura de datos en el área visual

Esta sección solo es editable por el web developer o por el administrador de portal. El HTML es editable y a través de "expresiones" podemos modelar cómo insertar la estructura de datos en la página.

<!-- Single menu -->
<div class="va{OID}">
    <ul>
    {{#each links}}
        <li>
            <a href="{{this.url.url}}">{{{this.url.texts.text}}}</a>
        </li>
    {{/each}}
    </ul>
</div>

<!-- 2-level menu -->
<ul class="menu-web"> 
{{#each links}}
    <li> 
        {{#if this.links}}
        <div class="dropdown">
            <a class="dropbtn" href="javascript:void(0);"> {{{this.url.texts.text}}} <i class="fas fa-angle-down"></i></a>
            <div id="myDropdown" class="dropdown-content ">
                <div class="arrow_box container">
                <ul>
                {{#each this.links}}
                    <li><a href="{{this.url.url}}">{{{this.url.texts.text}}}</a></li>
                {{/each}}
                </ul>
                </div>
            </div>
        </div>
        {{else}}
        <a href="{{this.url.url}}">{{{this.url.texts.text}}}</a>
        {{/if}}
    </li>
{{/each}}
</ul>

Definición de las expresiones

{{#each links}} {{/each}}: Expresión para iterar la colección de objetos. Dentro de la expresión nos permite acceder a los valores del objeto. Para anidar menús de más de un nivel, debemos anidar otra estructura. Para acceder a los valores del objeto lo haremos del siguiente modo:
- {{this.url.url}
- {{{this.url.texts.text}}}
- {{{this.url.texts.description}}}
- {{this.url.presentation.opentarget}}
- {{this.url.useCanonicalUrl}}

Selector de idioma

Es un área visual que permite configurar el cambio de idioma de la página en la que nos encontramos.

Como insertar este área visual

<r01-langselector id=""></r01-langselector>

Estructura de datos del JSON

El contenido de la estructura de datos es dinámico: se introduce por el usuario. Esta área visual también tiene una sección de encabezado compuesta por un título (área de texto) y un subtítulo (editor HTML).

{
  "title" : "Idiomas",
  "subTitle" : "<p>Idiomas disponibles en el portal</p>",
  "items" : [ {
     "lang" : "SPANISH",
     "selected" : true,
     "text" : "es",
     "title" : "Español",
     "link" : "/<!--#echo var='r01_lang_redirect_es' -->"
   }, {
     "lang" : "BASQUE",
     "selected" : false,
     "text" : "eu",
     "title" : "Euskara",
     "link" : "/<!--#echo var='r01_lang_redirect_eu' -->"
   } ]
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
items: Objeto global que contiene una colección de objetos que representan los enlaces para seleccionar o cambiar el idioma en el que se muestra la página.
lang: Idioma.
selected: Puede tener los valores verdadero o falso, e indica si es el idioma activo.
text: texto del idioma.
title: title del idioma.
link: enlace que apunta a la URL equivalente, pero en el idioma indicado en el elemento "lang".

Cómo utilizar la estructura de datos en el área visual

<div class="va{OID}">
    {{#each items}}
    
        {{#unless this.selected}}
    
            <a href="{{{this.link}}}">
                <span>
                    {{{this.text}}}
                </span>
            </a>
    
        {{else}}
    
           <span class="selected">
               {{this.text}}
           </span>
    
        {{/unless}}
    
    {{/each}}
</div>

Definición de las expresiones

{{#each items}} {{/items}}: Expresión para iterar a través de la colección de objetos. Dentro de la expresión nos permite acceder a los valores del objeto.
{{#unless this.selected}} {{else}} {{/unless}}: Expresión que es una estructura de control de tipo "if/else" que permite evaluar si el objeto es el idioma seleccionado o no, con el fin de asignar código HTML diferentes para cada caso. Para acceder a los valores del objeto lo hacemos usando las siguientes propiedades:
- {{this.lang}}: Accede al valor del campo "lang".
- {{this.selected}}: Accede al valor del campo "seleccionado". Es posible utilizar una estructura de control como ésta: {{#unless this.selected}}
- {{{this.text}}}: Devuelve el valor del campo "texto".
- {{{this.title}}}: Devuelve el valor del campo "title"
- {{{this.link}}}: Devuelve la URL para usarla como enlace. Es IMPORTANTE que tenga la triple llave "{{{" para "escapar" el contenido.

Subpágina

La subpágina es un área visual que permite incluir un conjunto de áreas visuales que se comparten en varias páginas. Una subpágina es una página especial, sin encabezado ni cuerpo, que permite crear fragmentos de página como una plantilla, para que pueda insertarse en cualquier página (a través de una subpágina).

Como insertar este área visual

<r01-subpage id=""></r01-subpage>

Este área visual no tiene estructura de datos.

La forma de usarlo es insertándolo en el HTML de la página. Una vez que se ha insertado y seleccionado una subpágina, su contenido será visible en la página.

Migas de pan

Este área visual no tiene estructura de datos. Es un área visual que genera el sendero de migas de pan automáticamente, mostrando enlaces a las páginas visitadas por el usuario.

Como insertar este área visual

<r01-breadcrumb id=""></r01-breadcrumb>

Estructura de datos del JSON

El contenido de la estructura de datos es fijo, no editable por el usuario. Esta área visual también tiene una sección de encabezado compuesta por un título (área de texto) y un subtítulo (editor HTML).

{
      "title" : "Estás en:",
      "subTitle" : "<p>Sendero de migas recorrido<p>",
      "breadcrumbs" : [ {
        "level" : 1,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_1'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_1'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_1'-->"
      }, {
        "level" : 2,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_2'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_2'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_2'-->"
      }, {
        "level" : 3,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_3'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_3'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_3'-->"
      }, {
        "level" : 4,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_4'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_4'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_4'-->"
      }, {
        "level" : 5,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_5'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_5'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_5'-->"
      }, {
        "level" : 6,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_6'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_6'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_6'-->"
      }, {
        "level" : 7,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_7'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_7'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_7'-->"
      }, {
        "level" : 8,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_8'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_8'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_8'-->"
      }, {
        "level" : 9,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_9'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_9'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_9'-->"
      } ]
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
breadcrumbs: Objeto global que contiene una lista de objetos, de forma que cada uno representa uno de los 9 niveles de navegación.
level: nivel de navegación de la página.
text: texto del enlace.
title: título de la página.
link: enlace a la página.

Cómo utilizar la estructura de datos en el área visual

<div class="va{OID}">
    <div>
        <ol>
            {{#each breadcrumbs}}

                {{#linked-breadcrumb}}
                <a href="{{this.link}}">{{this.title}}</a>
                {{/linked-breadcrumb}}

                {{#last-breadcrumb}}
                <li class="r01gNavigatorLast">{{this.title}}</li>
                {{/last-breadcrumb}}

            {{/each}}
       </ol>
   </div>
</div>

Definición de las expresiones

{{#each links}} {{/each}}: Expresión para iterar la colección de objetos. Dentro de la expresión nos permite acceder a los valores del objeto. Para anidar menús de más de un nivel, debemos anidar otra estructura. Para acceder a los valores del objeto lo haremos del siguiente modo:
{{#each breadcrumbs}} {{/each}}: Expresión para iterar la colección de "migas de pan". Dentro de la expresión podemos acceder a los valores del objeto.
{{#linked-breadcrumb}} {{/linked-breadcrumb}}: El contenido de esta expresión sólo será visible mientras no sea la última miga de pan.
{{#last-breadcrumb}} {{/last-breadcrumb}}: El contenido de esta expresión solo será visible cuando sea la última ruta de navegación.

Editor

Es un área visual que permite insertar tanto HTML como texto plano.

Como insertar este área visual

<r01-editor id=""></r01-editor>

Estructura de datos del JSON

{
    "title" : "Datos de contacto",
    "subTitle" : "<p>Medios para la comunicación de la ciudadanía con la Administración<p>",  
    "codeHTML" : "<p>......<p>"
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
codeHTML: consta de un único campo y puede contener tanto texto plano como código HTML para ser insertado en la página.

Cómo utilizar la estructura de datos en el área visual

<div class="va{OID}">
    <span>{{{codeHTML}}}</span>
</div>

Definición de las expresiones

{{{codeHTML}}}: Inserta todo el contenido del campo con el mismo nombre. La triple llave se usa para interpretar el código HTML que está dentro de la variable.

Lista de contenidos

Este área visual permite obtener de forma dinámica una lista de contenidos. Para configurar esta lista es posible:

Presentar N contenidos fijos
Configurar una búsqueda especificando los criterios de búsqueda y ordenación

Al pintar la lista, es posible indicar lo siguiente:

Formato reducido (formateador básico)
Formato de detalle (miniatura de contenido)

Como insertar este área visual

<r01-contentlist id=""></r01-contentlist>

Estructura de datos del JSON


{
    "title" : "Noticias",
    "subTitle" : "<p>En esta sección se muestran las últimas noticias publicadas</p>",
    "include": ""
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
include: Campo único que inserta la lista de contenidos definidos en el formulario.

Cómo utilizar la estructura de datos en el área visual

<div class="va{OID}">
    {{{include}}}
</div>

Definición de las expresiones

{{{include}}}: Expresión única que inserta la lista completa de contenidos.

Calendario

Calendario es un área visual que permite imprimir un calendario mensual en el que aparecen resaltados los días con eventos u otro tipo de contenido, permitiendo acceder al detalle de estos resultados.

Para configurar el calendario, es necesario especificar una búsqueda cuyo tipo de contenido involucrado tenga metadatos de tipo fecha.

Jugando con el código html, css y js se pueden crear multitud de presentaciones diferentes.

En la sección de edición "Configuración" puedes seleccionar diferentes parámetros, que te permiten variar la configuración del Área Visual.

Como insertar este área visual

<r01-calendar id=""></r01-calendar>

Estructura de datos del JSON

El contenido de la estructura de datos es dinámico: es introducido por el usuario.

En la sección "Configuración" del área "Editar", es posible configurar el área visual introduciendo diferentes parámetros:

MonthsBefore: cuántos meses tiene que imprimir antes del mes actual.
MonthsAfter: cuántos meses tiene que imprimir después del mes actual.
MetadataEventStartDate: Nombre del metadato de tipo de fecha asociado al tipo de contenido que se utiliza como filtro inicial para detectar los días destacados del mes.
MetadataEventEndDate: Nombre del metadato de tipo de fecha asociado al tipo de contenido que se utiliza como filtro final para detectar los días destacados del mes.
DayNameLength: Duración del nombre de los días de la semana.

Esta área visual también tiene una sección de encabezado compuesta por un título (área de texto) y un subtítulo (editor HTML).

{
  "title" : "Calendario de cursos",
  "subTitle" : "<p>Si quieres consultar, los próximos cursos diseñados, entra en el calendario</p>",
  "description" : "Programación de cursos",
  "include" : <!--#include virtual='/VA/calendar/ACCD3FF2/es/webson00-ACCD3FF2-rendered.shtml'-->
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
description: Texto descriptivo, que se utiliza para la propiedad HTML ' aria-describedby'
include: Campo único que inserta la lista de contenidos definidos en el formulario.

Cómo utilizar la estructura de datos en el área visual

El código html es editable por el usuario. A través de "expresiones" podemos modelar cómo insertar la estructura de datos en la página.

Es posible añadir controles de avance y retroceso para navegar entre meses. Se debería programar mediante javascript.

También es necesario configurar los estilos css para crear cualquier diseño de calendario.

Puedes ver un ejemplo de uso en la plantilla predeterminada.

<div class="va{OID}">
    <div class="wrapper">
        <p id="calendar-description">Monthly calendar of events</p>
        <span class="calendar-reverse">&LeftAngleBracket;</span>
        <span>{{{include}}}</span>
        <span class="calendar-forward">&RightAngleBracket;</span>
    </div>
 </div>

Contenedor

Este área visual funciona como un contenedor que puede albergar diferentes tipos de elementos:

Contenido (reconocido por una URL de contenido.... o URL amigable de contenido)
Aplicación (reconocida por un patrón de aplicación:... WAR/jsp/asp....)
Resultados de búsqueda (reconocidos por una URL con patrón de búsqueda: ?r01kQry=...)

En principio, si el campo URL está vacío, el contenido se cargará con el elemento indicado en la URL del navegador. Si tiene un valor, entonces contendrá el elemento indicado en ese parámetro.

Si tiene un valor, entonces contendrá el elemento indicado en ese parámetro.

Como insertar este área visual

<r01-container id=""></r01-container>

Estructura de datos del JSON

{
   "title" : "Contenido destacado",
   "subTitle" : "<p>Entradilla al contenido destacado</p>",
   "preSelectedUrl" : "",
   "showContentTypeInfoContext" : false,
   "showContentOrgInfoContext" : false
}

Descripción de los elementos

title: Título de la sección de encabezado del área visual.
subTitle: Subtítulo de la sección de encabezado del área visual.
preSelectedUrl: Elemento que debe albergar la página contenedora. Puede estar vacío.
showContentTypeInfoContext: Indicador para mostrar o no la cabecera de contexto referente al tipo de contenido. Solo para la página que contiene un contenido.
showContentOrgInfoContext: Indicador para mostrar o no la cabecera de contexto referente al organismo asociado al contenido. Solo para la página que contiene un contenido.

Cómo utilizar la estructura de datos en el área visual

Esta sección solo es editable por el web developer o por el administrador de portal. No obstante, en el caso de esta área visual, es obligatorio que no haya nada dentro de las expresiones. Fuera de las expresiones, es posible personalizar el HTML.

<div class="va{OID}">
    {{#container-content}}
    {{/container-content}}
</div>

Si en este contenedor se van a cargar contenidos con pestañas (por ejemplo, contenido de tipo información con secciones), es necesario establecer un "envoltorio" con esta estructura encima del "container-content":

<div class="va{OID}">
  <div id="containercontContainer" class="r01gContainer r01gContainerContContainer r01informacion r01es r01informacion_es">
       {{#container-content}}
       {{/container-content}}
  </div>
</div>

Definición de las expresiones

{{#container-content}}{{/container-content}}: Inserta el contenido indicado en el campo "preSelectedUrl". También evalúa los parámetros "showContentTypeInfoContext" y "showContentOrgInfoContext".

Web Zerbitzua

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones

Como insertar este área visual

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Como insertar este área visual

Estructura de datos del JSON

Descripción de los elementos

Cómo utilizar la estructura de datos en el área visual

Definición de las expresiones