Cómo crear un panel (parte 1)¶

★☆☆ Principiante - Tiempo: 30 minutos

Con este tutorial aprenderá a crear un panel utilizando 3 visualizaciones de un conjunto de datos publicado en un portal Opendatasoft.

En este tutorial, aprenderá:

Qué es un widget
Qué es un iframe
Cuál es la diferencia entre un widget y un iframe
Cómo usar un widget en una página de contenido creada con Opendatasoft

REQUISITOS PREVIOS

Para crear un panel, debe tener acceso al back office de un portal Opendatasoft y el permiso “Editar todas las páginas”.
Recomendamos vivamente seguir el tutorial con el conjunto de datos de la Lista del Patrimonio Mundial publicado en nuestra red de datos,. Este será nuestro conjunto de datos de ejemplo a lo largo de todo el tutorial. Sin embargo, si decide seguir el tutorial con otro conjunto de datos, asegúrese de elegir uno con una vista de tabla, además de una vista de mapa y una vista de análisis. También tendrá que adaptar el código de su página para que coincida con el conjunto de datos seleccionado.

Mostrar todas las imágenes

Ocultar todas las imágenes

Crear la página de contenido

1 + Vaya a la sección Páginas del back office.

2 + Haga clic en el botón + Página nueva para crear una nueva página de contenido.

3 + De forma predeterminada, accederá a la ficha Propiedades. Esta contiene varios campos de información acerca de la página, algunos de los cuales deberá rellenar para poder guardar la página. Especifique un sufijo de dirección URL de la página y un título. También puede añadir una descripción y etiquetas.

4 + Haga clic en el botón Guardar para guardar la página de contenido creada.

5 + Vaya a la ficha Contenido.

6 + Haga clic en Editar en modo experto para acceder al código HTML/CSS de la página. Aparecerá un mensaje emergente; haga clic en Sí, cambiar a modo experto para confirmar.

En el área de código HTML/CSS, debería ver el código siguiente:

<div class="container-fluid">
    <div class="ods-box" ></div>
</div>

Importante

En el lenguaje HTML, cada uno de los elementos se representa mediante una etiqueta. Esta etiqueta se escribe entre < y >, y casi siempre va acompañada de otra etiqueta con la cual forma una pareja de etiquetas inicial y final: por ej. <p></p> para párrafos, <h1></h1> para títulos de primer nivel, <div></div> para divisiones/secciones, etc.

Las etiquetas <div class="container-fluid"> y <div class="ods-box" > ayudan a dar a la página el formato deseado, a fin de que todos los elementos de la página de contenido se encuentren en un marco con bordes predefinido. Todos los elementos nuevos que añada en adelante deberán encontrarse entre estas dos etiquetas.

<div class="container-fluid">
 <div class="ods-box">

   This is where you will put your code

 </div>
</div>

7 + Guarde la página.

8 + Haga clic en Vista previa para ver el resultado actual de la página. Vuelva a hacer clic en Vista previa para ocultar la ventana de vista previa y regresar al código.

Poner contenido en la página: visualizaciones de datos

Obtener el código de widget de una visualización

Importante

Un widget es un fragmento de código que permite a cualquier usuario integrar un elemento interactivo directamente en una página web. En Opendatasoft hay varios widgets, todos ellos especificados y explicados en la documentación de widgets. Algunos de los widgets de Opendatasoft más comunes (los que usaremos en este tutorial) son los widgets de visualización. En efecto, cada una de las visualizaciones de datos de un conjunto de datos publicado está disponible en forma de widget, el código del cual aparece bajo la visualización, ¡listo para copiar!

9 + Vaya a Datos, donde nuestro conjunto de datos está publicado. Compruebe que se halla en la página del conjunto de datos, donde puede ver las visualizaciones de datos disponibles.

10 + Vamos a empezar con la vista de tabla. Haga clic en la ficha Tabla.

11 + Desplácese hacia abajo por la tabla. Debería ver 3 fichas: Compartir, Incrustar y Widget. La ficha Compartir muestra la dirección URL directa de la visualización. La ficha Incrustar muestra el código iframe de la visualización. La ficha Widget muestra el código de widget de las visualizaciones. Todo ello, ya sea una dirección URL ya sea un código, está listo para copiar y pegar. En este tutorial, utilizaremos los códigos de widget de las visualizaciones de tabla, mapa y análisis de nuestro conjunto de datos.

Importante

Un iframe es una manera fácil y segura de integrar contenido de Opendatasoft en un marco aislado, independiente del resto de la página. Si deseara integrar contenido de Opendatasoft fuera del entorno de Opendatasoft, los iframes serían la mejor forma de hacerlo, aunque probablemente serían necesarias algunas tareas de interacción y personalización. Los widgets también pueden integrarse en una página fuera del entorno de Opendatasoft, aunque eso requeriría mucho trabajo.

Como estamos creando un panel directamente en una página de Opendatasoft, la mejor opción es usar los widgets de Opendatasoft. En el entorno de Opendatasoft, son realmente fáciles de personalizar y muy interactivos con otros widgets.

12 + Todavía en la ficha Tabla de nuestro conjunto de datos, donde se visualiza el código de widget, haga clic en el botón COPIAR para copiar el código de widget de la visualización de tabla.

Añadir un widget de visualización a la página

13 + Vuelva al back office para seguir editando la página de contenido de Opendatasoft.

14 + Pegue el código de widget de la visualización de tabla en el lugar adecuado, entre la etiqueta ods-box (vea el paso 6).

<div class="container-fluid">
  <div class="ods-box">

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
    </ods-dataset-context>

  </div>
</div>

15 + Guarde la página y haga clic en Vista previa: ¡ahora hay una visualización de tabla en la página!

Añadir más widgets a la página: mapa y gráfico

16 + ¡Vamos a añadir un mapa a nuestra página! Igual que antes, obtenga el código de widget de la vista de mapa de nuestro conjunto de datos (vea los pasos 9-12, pero aplicados a la ficha Mapa).

17 + Pegue el código de widget de la visualización de mapa bajo el código de widget de la visualización de tabla (vea Añadir un widget a la página).

<div class="container-fluid">
  <div class="ods-box">

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

  </div>
</div>

18 + Vamos a añadir una cosa más: ¡un gráfico! Obtenga el código de widget de la vista de análisis de nuestro conjunto de datos.

19 + Pegue el código de widget de la visualización de análisis bajo el código de widget de la visualización de mapa.

<div class="container-fluid">
  <div class="ods-box">

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-chart align-month="true">
        <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
          <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
          </ods-chart-serie>
        </ods-chart-query>
      </ods-chart>
    </ods-dataset-context>

  </div>
</div>

20 + Guarde la página y haga clic en Vista previa. ¡Ahora tenemos 3 visualizaciones en la página!

Completar la página de contenido con un título

21 + En HTML, los títulos (conocidos como encabezados) suelen definirse mediante las etiquetas h1. La letra h no cambia, en referencia al vocablo inglés “header” (encabezado). Pero el número (aquí, 1) puede sustituirse por otro valor del 1 al 6, donde h1 corresponde al título de nivel más alto y h6 al más bajo. Por encima de todos los widgets de código de visualización añadidos a la página, y justo por debajo de la etiqueta ods-box, añada un título de nivel alto a la página de contenido.

<div class="container-fluid">
  <div class="ods-box">

    <h1>Write your title here</h1>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-table context="worldheritagelistpublicus"></ods-table>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
      <ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
    </ods-dataset-context>

    <ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
      <ods-chart align-month="true">
        <ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
          <ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
          </ods-chart-serie>
        </ods-chart-query>
      </ods-chart>
    </ods-dataset-context>

  </div>
</div>

22 + Guarde la página y haga clic en Vista previa: ¡el panel ya tiene un título!

23 + Haga clic en el botón Abrir página para ver el resultado de la página en el portal.

¡ENHORABUENA!

¡Ha completado este tutorial, y ahora ya sabe cómo crear un panel sencillo con 3 visualizaciones de conjuntos de datos!

Si quiere continuar avanzando con su panel, puede seguir la segunda parte de este tutorial: “Cómo crear un panel (parte 2)”. Allí aprenderá a vincular los widgets, añadir widgets más avanzados, y dar estilo al panel y organizarlo.