Personalizar el tema y el icono del portal

Importante

La personalización de temas no está disponible en dominios freemium (creados a través de la página Try it for free del sitio web de Opendatasoft). Si su dominio es freemium y desea obtener esta función de temas, ¡escríbanos un correo electrónico!

La interfaz de administración de temas de Opendatasoft se encuentra en el back office del dominio. Para acceder a ella, haga clic en la sección Apariencia de la barra de navegación y, a continuación, en el vínculo Tema.

Nota

Para acceder a la página del tema, deberá poder editar las propiedades del dominio. Consulte Administrar la seguridad del dominio para obtener más detalles sobre los permisos.

../../_images/theme_interface.png

Con los diversos formularios disponibles en esta página, podrá personalizar todos los aspectos del portal, desde una opción básica como definir los colores hasta efectuar cambios relevantes en el diseño.

Control de versiones

Antes de adentrarnos en las muchas maneras de personalizar el tema del portal, es muy importante recalcar que todo lo que haga en esta página recibirá una asignación de versión. Es decir, se asignará un número de versión a su tarea, y en cualquier momento podrá crear una versión nueva. Siempre estará trabajando con la versión más reciente (entiéndase como un borrador de trabajo), pero podrá activar cualquier versión (o sea, aplicarla en el portal). Cuando active la última versión, se creará una nueva que pasará a ser el nuevo borrador de trabajo. Solo se puede editar la última versión; todas las anteriores son de solo lectura.

Al trabajar con la última versión, puede obtener una vista previa de los cambios haciendo clic en el botón Vista previa. Así se abrirá una ventana nueva que contiene el portal con la versión actual del tema aplicada.

Nota

Solo los usuarios que puedan editar las propiedades del dominio podrán obtener una vista previa de la última versión del tema. Si comparte la dirección URL de la vista previa con otros usuarios, estos no verán ninguna diferencia en la versión activa.

Nota

Puede obtener una vista previa de la última versión del tema en cualquier momento y en cualquier página del front office del portal añadiendo el parámetro stage_theme=true a la dirección URL.

../../_images/theme_versioning.png

El selector de versión le indicará explícitamente si está trabajando con la última versión o está visualizando una anterior, y qué versión está activa.

Opciones de personalización

Opciones de diseño

El diseño del portal utiliza un sistema de cuadrícula de 12 columnas ampliamente heredado del marco CSS de Bootstrap y como tal tiene algunas variables internas que se utilizan en código CSS. Esta ficha permite establecer el valor de algunas de estas variables.

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

Las variables que actualmente se pueden sobrescribir son: Ancho de margen interno y Puntos de interrupción con respuesta.

Ancho de margen interno es el espacio entre columnas, filas y cuadros adyacentes.

Puntos de interrupción con respuesta indica los anchos de pantalla (en píxeles) en que el diseño cambiará para organizar mejor el espacio disponible. Hay 4 modos (muy pequeño, pequeño, mediano y grande), lo que significa que hay 3 puntos de interrupción: de muy pequeño a pequeño, de pequeño a mediano, y de mediano a grande. Los modos también se conocen como móvil, tableta, escritorio y escritorio grande.

Nota

No obstante, tenga presente que el modo móvil no significa que el usuario realmente utilice un dispositivo móvil, sino que el explorador del dispositivo ofrece una área de visualización pequeña.

Para restablecer el valor predeterminado de alguna variable, basta con hacer clic en el botón de borrar que aparece a su lado.

Colores

Al igual con las opciones de diseño, la plataforma Opendatasoft utiliza diversas variables de color para el estilo de los elementos del portal. Puede usar las entradas de color de esta ficha para establecer parte del tema. De este modo, con unos simples clics, puede personalizar la marca del portal de acuerdo con sus colores.

../../_images/theme_colors.png

Nota

Estas variables sobrescribirán los colores del tema predeterminado. Sin embargo, las reglas de estilo personalizadas que usted puede escribir en la ficha de hoja de estilos tendrán prioridad frente a estos colores. Esto significa que sus opciones de color tal vez no estén visibles si ha escrito reglas CSS más específicas.

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

Si no le basta con cambiar los colores y desea efectuar cambios más significativos, tendrá que escribir su propio código CSS. Por suerte, esta ficha le permite especificar sus propias reglas de estilo. Estas se aplicarán sobre las reglas predeterminadas de Opendatasoft y tendrán prioridad frente a ellas.

../../_images/theme_stylesheet.png

Si la personalización utiliza imágenes y fuentes específicos, puede cargarlos en la plataforma por medio de la página de administración de activos. Después podrá copiar las direcciones URL de activos y pegarlas en su código CSS.

Importante

Para cambiar el estilo de un elemento, solo tiene que encontrar la clase del elemento y cambiar la propiedad CSS deseada. No hay efectos colaterales (salvo este nombre de clase único), y su funcionamiento está garantizado (dado que el árbol de jerarquía es prácticamente plano).

Esto es posible dado que todo el código CSS de Opendatasoft está escrito según la metodología BEM y lleva antepuesto el prefijo ods- para que no entren en conflicto con sus propios estilos y puedan sobrescribirse fácilmente. Encontrará una excelente introducción de esta metodología en el siempre útil sitio web CSS Tricks.

En resumen, los nombres de clases se escriben como bloque, elemento, modificador (de ahí, BEM) .ods-bloque[--modificadorbloque][__elemento][--modificadorelemento]. El árbol de jerarquía tiene como máximo 2 selectores de profundidad. Además, el estilo pertinente está lo más cerca posible del elemento.

Tarjeta de catálogo

En la página de catálogo del dominio, cada uno de los juegos de datos se representa por medio de una tarjeta de catálogo. Estas tarjetas presentan una serie de elementos estándar, pero puede que desee cambiar completamente su apariencia, añadir vínculos nuevos o implementar nuevos comportamientos.

A continuación se muestran algunos ejemplos de tarjetas de catálogo:

../../_images/theme__catalog-card-example-central.png ../../_images/theme__catalog-card-example-datacorsica.png ../../_images/theme__catalog-card-example-toulouse.png

Proporcionamos prácticas directivas para recuperar e incluir fácilmente cualquier información acerca de un juego de datos. Estas directivas también se facilitan con un estilo estándar que podrá sobrescribir en la ficha Hoja de estilos.

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

Las directivas son:

  • ods-catalog-card debe envolver la tarjeta de catálogo completa para que las demás directivas funcionen.

  • ods-catalog-card-theme-icon recuperará el tema del juego de datos e incluirá el icono correspondiente.

  • ods-catalog-card-body proporciona casos extremos de gran utilidad relacionados con el estilo y el comportamiento (juegos de datos sin registros, proxy de API...).

  • ods-catalog-card-title, ods-catalog-card-description y ods-catalog-card-keywords son autoexplicativas.

  • ods-catalog-card-metadata-item toma un atributo item-key y un atributo item-title para recuperar una propiedad de metadatos coincidente con item-key del juego de datos e incluirla 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.

    <ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>
    
Claves de elementos de metadatos

Clave de elemento

Título de elemento

Licencia

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

Idioma

Idioma del contenido.

modified

Fecha de la última modificación.

Publicador

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.

Desarrollo sin conexión en línea

En la sección anterior hemos visto que puede escribir reglas CSS detalladas que sobrescribirán el tema predeterminado del portal. Sin embargo, la tarea de escribir en el explorador puede resultar tediosa, sobre todo para los desarrolladores veteranos habituados a potentes editores de texto. Dado que solo se admite CSS puro, tendrá que verificar manualmente que las reglas lleven antepuesto un prefijo de proveedor adecuado y no podrá usar las funciones que los desarrolladores del front end emplean habitualmente con los preprocesadores, como variables y anidamientos.

Por todo ello, hemos creado una API que permite a los usuarios con la clave de API del tema escribir localmente sus reglas de estilo utilizando todas las herramientas que deseen y simplemente insertar el código CSS final en la plataforma. Hemos empaquetado un cliente para esta API junto con las herramientas frecuentes (preprocesador y autoprefijador de less) en el Opendatasoft Portal Development Kit.

El ODS Portal DevKit es un proyecto de código abierto distribuido gratuitamente en Github; descárgueselo y adáptelo con plena libertad a su flujo de trabajo de desarrollo.

Clave de API del tema

Puede encontrar la clave de API del tema en la página de personalización de temas del portal. Simplemente expanda la sección Clave de API para desarrollo sin conexión en línea y copie la clave.

../../_images/theme_offline-dev.png

Advertencia

Al generar una clave nueva, las anteriores quedan revocadas. Por consiguiente, los desarrolladores que utilicen una clave antigua no podrán insertar su trabajo en la plataforma. No olvide reenviar la clave nueva a cada uno de los desarrolladores que trabajan con el tema del portal para cerciorarse de que el desarrollo no se vea interrumpido.