Personalizar los temas del portal

El tema predeterminado de todos los portales de Opendatasoft se puede personalizar por completo, no solo en cuanto a diseño y colores sino también en relación con áreas concretas como encabezado, pie de página y tarjetas de catálogo. Las configuraciones del tema se gestionan en la subsección Apariencia > Tema del back office.

../../_images/theme_interface.png

La interfaz Tema consta de 3 grandes bloques.

  • El encabezado (1), que no solo muestra el título de la interfaz sino también un menú desplegable Acción actual para gestionar la asignación de versiones (consulte Versiones de temas). En el encabezado también aparecen 3 botones importantes:

    • Guardar, para guardar las nuevas configuraciones

    • Vista previa, para abrir en una nueva ficha el portal de Opendatasoft con las nuevas configuraciones aplicadas.

    • Activar, para definir las nuevas configuraciones aplicadas como el nuevo tema activo disponible en el portal de Opendatasoft

  • El bloque de gestión Clave de API para desarrollo sin conexión en línea (2), que permite usar y generar nuevas claves de API (consulte la nota siguiente para obtener más información).

Nota

Se pueden crear hojas de estilo fuera de la plataforma con cualquier herramienta de desarrollo web estándar e insertarlas en la plataforma por medio de una clave de API. Para un uso más rápido y sencillo, dispone del Opendatasoft Portal Development Kit, un proyecto de código abierto creado por Opendatasoft que se puede descargar en Github.

Para encontrar y usar una clave de API del tema, haga clic en el bloque Clave de API para desarrollo sin conexión en línea para expandirlo. La clave de API actual aparecerá en el bloque, lista para copiar y usar.

También es posible generar una nueva clave de API haciendo clic en el botón Generar clave nueva. Sin embargo, tenga cuidado al generar nuevas claves de API: solo se puede usar la actual, lo que significa que al generar una nueva clave de API se revocan todas las anteriores.

Asignar versiones a temas

../../_images/theme_versioning.png

A los temas de portal se les asignan versiones, lo que significa que cada nuevo tema personalizado tiene asignado un número de versión. Una vez completado y activado, automáticamente se crea otra versión: es el nuevo tema de borrador en que se trabajará hasta que esté listo para activarse.

El menú desplegable Acción actual que se muestra en el encabezado indica la versión de trabajo actual. Asimismo, permite seleccionar temas anteriores que ya se han activado.

Importante

Una vez activado un tema, está totalmente bloqueado: no se puede introducir en él ninguna otra modificación. Solo admite modificaciones la última versión de borrador.

Mientras se trabaja en la última versión de borrador del tema de portal, se puede obtener una vista previa de la apariencia del portal con este nuevo tema. El botón Vista previa situado entre los botones Activar y Guardar permite abrir una nueva ficha con el portal configurado con el tema de borrador.

Nota

Tan solo los usuarios que pueden editar las propiedades del dominio pueden obtener una vista previa de la última versión del tema. Si comparte la dirección URL con otros usuarios sin los permisos adecuados, estos verán el portal con el tema activo.

Personalizar un tema de portal

Opciones de diseño

../../_images/theme_layout-options.png

La ficha Opciones de diseño permite personalizar el diseño del portal, basado de forma predeterminada en un sistema de cuadrícula de 12 columnas heredado del marco CSS de Bootstrap.

Concretamente, en esta ficha se puede modificar lo siguiente:

  • Ancho de margen interno: es el espacio (en píxeles) entre los diversos elementos que forman una interfaz del portal (columnas, filas y cuadros); y

  • Puntos de interrupción con respuesta: indica los diversos anchos de pantalla (en píxeles) a que el diseño debe cambiar para adaptarse al espacio disponible (por ejemplo, el diseño del portal debe variar si se usa en un teléfono móvil o un equipo de escritorio, ya que la pantalla del primero es muy inferior a la del segundo). Una interfaz web que se adapta al tamaño de la pantalla es lo que se denomina "responsive" (con capacidad de respuesta). Hay 3 puntos de interrupción configurables entre 4 tamaños de pantalla estándar asociados a los dispositivos habituales:

    • De móvil a tableta: para pasar de una pantalla muy pequeña a otra pequeña

    • De tableta a escritorio: para pasar de una pantalla pequeña a otra mediana

    • De escritorio a escritorio grande: para pasar de una pantalla mediana a otra grande

Nota

Se usan como referencia los términos móvil, tableta y equipo de escritorio porque estos nombres de los dispositivos más habituales ilustran bastante bien los 4 tamaños de pantalla estándar existentes (muy pequeña, pequeña, mediana y grande). Tenga presente que el término móvil, por ejemplo, no significa que el usuario esté usando realmente un móvil sino que el explorador que utiliza ofrece un área de visualización extrapequeña.

Para modificar una opción de diseño:

  1. Escriba un nuevo ancho, en píxeles, en el cuadro de texto seleccionado.

  2. Haga clic en el botón Guardar en la esquina superior derecha.

Para restablecer el valor predeterminado de cualquier opción de diseño, haga clic en el botón icon-trash.

Colores

../../_images/theme_colors.png

La ficha Colores permite personalizar los colores empleados en los textos y vínculos, fondos y bordes del portal.

Importante

Si se ha creado una hoja de estilos personalizada para el portal, las reglas CSS que contiene tendrán prioridad sobre los colores definidos en la ficha Colores.

En esta ficha se puede configurar el color de los siguientes elementos de un portal de Opendatasoft:

Categoría

Elementos configurables

Texto

  • Texto (principal)

  • Vínculos

  • Vínculos del encabezado

  • Vínculos del pie de página

  • Títulos

  • Títulos de sección

  • Resaltar (elemento activo)

Fondo

  • Fondo de página

  • Fondo de cuadros

  • Fondo de títulos de sección

  • Fondo de encabezado

  • Fondo de pie de página

Bordes

  • Borde de cuadros

Para modificar un color de tema:

  1. En el cuadro de texto seleccionado, especifique el código hexadecimal del nuevo color o haga clic en el botón de color para elegirlo en Colores bonitos o con el Selector de color.

  2. Haga clic en el botón Guardar en la esquina superior derecha.

Para volver al color del tema del portal activo actual, haga clic en el botón icon-reset.

Nota

Los colores de temas pueden usarse en la hoja de estilos del dominio, como variables CSS:

var(--variable-name)

Las variables disponibles son: text, links, titles, page-background, highlight, boxes-background, boxes-border, section-titles, section-titles-background, header-background, header-links, footer-background y footer-links.

Estas variables CSS son compatibles con todos los exploradores porque la plataforma Opendatasoft sustituye automáticamente todas las variables por sus valores reales de colores de temas.

Hoja de estilos

../../_images/theme_stylesheet.png

La ficha Hoja de estilos muestra un editor donde añadir reglas de estilo CSS puras. Permite personalizar aún más un tema de portal. Todas las reglas añadidas en esta ficha tendrán prioridad sobre las configuraciones definidas en las demás fichas de tema.

Para cambiar el estilo de un elemento, localice la clase del elemento y cambie la propiedad CSS deseada. Los nombres de clases se escriben como bloque, elemento y modificador: .ods-bloque[--modificadorbloque][__elemento][--modificadorelemento].

Nota

Si usa imágenes y fuentes específicas para la personalización del dominio, no dude en cargarlas como activos en la plataforma (consulte Añadir activos). Esto permite copiar fácilmente las URL de activos y pegarlas en el código CSS.

Tarjeta de catálogo

../../_images/theme_catalog-card.png

La ficha Tarjeta de catálogo muestra un editor donde añadir código HTML puro. Permite personalizar las tarjetas de catálogo visualizadas en el catálogo del portal, que representan los conjuntos de datos publicados de ese portal (consulte Explorar un conjunto de datos del catálogo).

Las directivas siguientes permiten recuperar información acerca de un conjunto de datos, que podría incluirse en la tarjeta de catálogo.

Nota

Las directivas empleadas en la ficha Tarjeta de catálogo se presentan con un estilo estándar, que se puede modificar en la ficha Hoja de estilos.

Directiva

 Information
ods-catalog-card

Obligatorio. Envuelve la tarjeta de catálogo completa para que las demás directivas funcionen.
ods-catalog-card-theme-icon

Recupera el tema del conjunto de datos e incluye el icono relacionado.
ods-catalog-card-body

Proporciona casos extremos de gran utilidad relacionados con el estilo y el comportamiento (por ejemplo, conjuntos de datos sin registros).
ods-catalog-card-title

Recupera el título del conjunto de datos.
ods-catalog-card-description

Recupera la descripción del conjunto de datos.
ods-catalog-card-keywords

Recupera las palabras clave definidas para el conjunto de datos.
ods-catalog-card-metadata-item

Toma un atributo item-key y un atributo item-title. Recupera una propiedad de metadatos coincidente con item-key (consulte la tabla siguiente) del conjunto de datos y la incluye en la página utilizando item-title como etiqueta. Por una cuestión de estilo, se recomienda envolverla con un elemento .ods-catalog-card__metadata, aunque no es obligatorio.

Ejemplo: <ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>

La tabla siguiente indica todas las claves de elementos de metadatos disponibles:

Clave de elemento

 Information
license

Licencia (se presentará como vínculo si es posible).
language

Idioma del contenido.
modified

Fecha de la última modificación.
publisher

Nombre del publicador.
references

Vínculo con el origen de los datos original.
odi_certificate_url

Vínculo con el certificado ODI.
records_count

Número de registros del juego de datos (al margen de los filtros).
attributions

Nombres del propietario de los datos.
source_domain

Solo para los juegos de datos federados, nombre del dominio del cual procede el juego de datos.
source_domain_title

Solo para los juegos de datos federados, título original del juego de datos en su dominio de origen.
source_dataset

Solo para los juegos de datos federados, identificador original del juego de datos en su dominio de origen.
explore.download_count

Número de descargas de datos para este juego de datos.