Buenas prácticas de personalización
Introducción
Debido a que cada biblioteca tiene sus propias necesidades y marca, hemos implementado un marco de personalización que permite a los clientes aprovechar puntos de conexión predefinidos para cada componente de la interfaz de usuario, permitiéndoles así personalizar cada elemento según sea necesario.
Para garantizar una experiencia de usuario de calidad y un rendimiento óptimo del sistema, recomendamos que los clientes prueben cada cambio que realicen en sus entornos de preparación para verificar accesibilidad y capacidad de respuesta antes de cargar paquetes en sus entornos de producción.
Marca de la interfaz de usuario de la NDE
Primo VE ofrece muchas opciones de configuración, algunas de las cuales requieren poca o ninguna experiencia en programación o desarrollo. Las siguientes secciones describen cada una de estas opciones.
Vea el vídeo Configuración de la interfaz de usuario (8:15).
Accesibilidad
Es importante tener en cuenta la accesibilidad al personalizar la NDE. Consulte las Pautas de accesibilidad para la personalización si tiene dudas comunes mientras adapta la interfaz de usuario a sus necesidades.
Seleccionar un esquema de colores
Puede cambiar rápidamente el esquema de colores de la vista sin necesidad de crear un paquete de personalización. Nuestros esquemas de colores afectan a muchos elementos de la interfaz de usuario de la NDE y cumplen con las pautas de accesibilidad en materia de color y contraste. Si desea realizar un pequeño cambio en un esquema de color, consulte Personalización de un esquema de colores.
-
Abra la pestaña Gestionar paquete de personalización.
-
En la sección Esquema de colores - Nueva interfaz de usuario, seleccione un icono de color. El morado es el color por defecto.
Selección del esquema de colores -
Seleccionar Guardar.
Añadir un enlace clicable para el logotipo
La pestaña General de la página Configuración de vistas (Configuración > Descubrimiento > Configuración de despliegue > Configurar vistas) permite especificar un enlace que abre una página cuando los usuarios clican en el logotipo. Cuando no se configura ninguna URL, se muestra la página de inicio de Descubrimiento si un usuario clica en el logotipo.
Para obtener información sobre cómo personalizar el logotipo de su vista, consulte Personalizar ficheros de imagen.
-
Edite su vista en la página Configuración de vista (Configuración > Descubrimiento > Configuración de despliegue > Configurar vistas).
-
Seleccione la pestaña General.
-
Especifique la URL de redirección en el campo URL de logotipo clicable.
-
Seleccione Guardar para guardar los cambios en el paquete de personalización.
Actualizar títulos de páginas
La tabla de códigos Etiquetas de ventanas de encabezado/pie de página (Configuración > Descubrimiento > Configuración de despliegue > Etiquetas) le permite personalizar los siguientes títulos en la interfaz de usuario de la NDE:
- main.title — Descubrimiento de Ex Libris
- nui.brief.title — Descubrimiento de Ex Libris - {{consulta}}
- dmain.description — Primo de Ex Libris
- nui.full.display.title — {{recordTitle}} - {{institutionName}}
Usar el Gerente del paquete de personalización
La pestaña Gestionar paquetes de personalización le permite cargar y gestionar paquetes de personalización, lo que le facilita marcar y personalizar Primo VE. Si no se cargan paquetes, el sistema usa solo las configuraciones predeterminadas. Si está realizando la transición de una vista desde la interfaz de usuario original, el paquete de personalización de la vista no se transferirá a la vista de la NDE. Debe descargar una nueva plantilla de paquete de personalización y añadir personalizaciones a un nuevo paquete para la interfaz de usuario de la NDE.
Para obtener más información sobre cómo cargar/descargar un paquete de personalización, consulte Pestaña Gestionar paquete de personalización.
-
No se permiten archivos de bases de datos (.db) en su paquete de personalización. Si el siguiente error ocurre mientras carga su archivo ZIP, elimine todos los archivos .db:
Error de validación: El tipo de archivo db no se permite en el archivo zip -
Configurar Windows para mostrar archivos ocultos si no se puede ver ningún fichero .db en la carpeta de paquetes de personalización.
-
El sistema no utiliza contenido dentro de las etiquetas <script>.
Comprender la estructura de ficheros de un paquete de personalización
Su paquete de personalización debe estar estructurado de la siguiente manera para garantizar que se integre correctamente con Primo VE:
<View_Code>: la carpeta superior de su paquete de personalización. Se debe cambiar el nombre de la carpeta superior por el código de vista de la institución, que debe estar en el siguiente formato: <institution_code>-<view_code>. Esta carpeta debe incluir las siguientes subcarpetas:
-
activos – Toda la personalización de la NDE se realiza dentro de las siguientes subcarpetas:
-
css - Esta subcarpeta contiene el fichero custom.css, que incluye sus reglas de formato para la interfaz de usuario de la NDE (excepto para la página de destino). Estas reglas ignoran las reglas correspondientes en el CSS por defecto.
-
header-footer – Al añadir los ficheros header.html y footer.html, puede personalizar el encabezado y el pie de página de su vista, respectivamente. Para más información, consulte Añadir encabezados y pies de página.
-
homepage - Esta carpeta le permite personalizar la página de destino añadiendo su HTML, CSS e imagen de fondo. Por defecto, incluye las siguientes plantillas: homepage_en.html.tmpl y homepage.css.tmpl. Para más información, consulte Personalización de la página de destino.
-
icons – Esta subcarpeta le permite personalizar varios iconos de la interfaz de usuario de la NDE, incluido el favicon.ico. Por defecto, solo incluye el fichero custom_icons.svg. Para más información, consulte Personalizar iconos.
-
images – Esta subcarpeta le permite personalizar imágenes para la interfaz de usuario de la NDE, como el logotipo de su biblioteca (library-logo.png) y los iconos de tipo de recurso (icon_<resource_type_code>.png). Por defecto, solo incluye el fichero library-logo.png. Para más información, consulte Personalizar ficheros de imágenes.
-
js – Esta subcarpeta contiene el fichero custom.js, en el que puede colocar el código JavaScript que debe ejecutarse cuando se carga la interfaz de usuario de NDE. Este fichero se utiliza de forma diferente en la NDE que en la interfaz de usuario original y ya no se utiliza para añadir componentes Angular personalizados vinculados a un componente específico. Para implementar esa configuración, consulte Capacidades avanzadas de personalización y Complementos para la interfaz de usuario de la NDE a continuación.
-
Crear e implementar un paquete de personalización
La pestaña Gestionar paquete de personalización descarga/carga el paquete de personalización entre el servidor Primo VE y su equipo local. Antes de actualizar un paquete de personalización existente, se recomienda descargarlo del servidor para asegurarse de que esté utilizando la versión más reciente. Si está creando un paquete de personalización, le recomendamos que descargue la plantilla.
Para obtener más información, consulte Gestionar paquetes de personalización.
-
Edite su vista en la página Lista de vistas (Configuración > Descubrimiento > Configuración de despliegue > Configurar vistas).
-
Seleccionar la pestaña Gestionar paquete de personalización.
Pestaña Gestionar paquete de personalización para la interfaz de usuario de la NDE -
Si esta es la primera vez, descargue el paquete de plantilla en la sección Descargar paquete. De lo contrario, descargue el paquete actual para asegurarse de que utiliza la última versión.
-
Descomprima los ficheros.
-
Asegúrese de que la carpeta superior del fichero zip de su paquete sea la carpeta <View_Code>, que debe tener el siguiente formato: <institution_code>-<view_code>-por ejemplo, PRMO_OAP_INST-Alma.
-
Según sea necesario, personalice los ficheros de configuración y las carpetas asociadas a la página de destino, imágenes y CSS. Debe conservar la estructura y los nombres de los ficheros que está reemplazando. Para más información, consulte el resto de las secciones de este documento.
-
Comprima la carpeta <View_Code>.
Se recomienda a los usuarios de Windows que utilicen una herramienta de compresión como 7zip o Winrar en lugar de Windows Enviar a > Comprimir carpeta para evitar errores de carga.
Los usuarios de Mac deben usar el siguiente procedimiento para comprimir y extraer cualquier fichero .DS_Store oculto:
-
Abra la aplicación Terminal en Aplicaciones > Herramientas.
-
Muévase al directorio primario de la carpeta que desea comprimir. Por ejemplo:
cd /Users/<nombre de usuario>/<carpeta primaria> -
Introduzca el siguiente comando para comprimir el fichero:
zip –r <target file>.zip <My_View> - x "*.DS_Store"
-
-
Especifique el nombre del paquete comprimido y cliquee Cargar en la sección Cargar paquete.
-
Seleccione Guardar para aplicar los cambios.
-
Actualice su vista en el navegador web y pruebe sus cambios antes de cargarlos en el servidor de producción.
Personalizar la página de destino
La página de destino es el punto de entrada para el descubrimiento de la biblioteca y suele incluir un cuadro de búsqueda vacío.
Se anima a las instituciones a añadir o personalizar los siguientes elementos de la página:
-
Enlaces de acceso rápido, como los horarios de las bibliotecas
-
Mensaje de bienvenida y consejos de búsqueda
-
La imagen de fondo de la página de destino — El ancho de la imagen es el 100 % del ancho de la pantalla. La altura de la imagen depende del tamaño de la pantalla.
Para obtener información sobre la superposición de color aplicada a la imagen de forma predeterminada, consulte Desactivar la superposición de la imagen de fondo a continuación. -
El texto del banner (consulte Modificar el banner)
En la actualidad, la personalización del contenido y los estilos de la página de inicio debe realizarse utilizando el paquete de personalización, como se explica en Personalizar el contenido y los estilos de la página de inicio. En la hoja de ruta de 2026, como parte de una mejora de CERV, se añadirán opciones de configuración que permitirán modificar el anuncio, los enlaces rápidos y el mensaje de bienvenida directamente en Alma, de modo que solo será necesario utilizar el paquete de personalización para implementar modificaciones de mayor alcance.
Personalizar el contenido y los estilos de la página de inicio
La carpeta de la página de inicio en su paquete de personalización incluye los siguientes ficheros para personalizar el contenido y los estilos de la Página de destino:
-
homepage_es.html.tmpl - Esta es la plantilla para el fichero HTML de la página de destino. Si lo edita y elimina su sufijo .tmpl, podrá personalizar el área situada debajo del cuadro de búsqueda de la página de destino. Para admitir otros idiomas, puede crear y cargar nuevos ficheros HTML con el código de idioma correspondiente. Por ejemplo: homepage_fr.html.
-
homepage.css.tmpl - Esta es la plantilla para el fichero CSS de la página de destino. Al editarlo y eliminar su sufijo .tmpl, puede personalizar el formato de la página de destino.
-
homepage_background.svg - Este fichero SVG configura la imagen de fondo de la página de destino. El paquete no incluye plantilla.
Al modificar estos ficheros, puede personalizar el diseño y el contenido de la página de destino como desee. Incluso puede sustituir por completo el diseño por defecto por uno creado por usted. Cualquier código que añada a los ficheros homepage_xx.html y homepage.css sustituye la codificación por defecto de esos elementos, pero no tiene ningún efecto sobre los demás elementos de la página. Puede cambiar tanto o tan poco como desee del código por defecto de la página.
En el siguiente ejemplo, se actualizaron la imagen de fondo y el texto de la sección "Acerca de la biblioteca", pero no se modificó nada más:
-
Cree el fichero homepage_en.html con los cambios de la sección "Acerca de la biblioteca" (consulte el fichero HTML adjunto):
<!DOCTYPE html>
</div>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Library Page</title>
<link href="./homepage.css" rel="stylesheet">
</head>
<body>
<main class="main-landing-page display-flex flex-column flex-layout-center-center">
<div class="menu-container width-100">
<ul role="list" class="menu width-100">
<li role="listitem">
<a id="Opening_hours_link" href="https://clarivate.com/" aria-label="Opening hours" role="link">
<div class="icon display-flex">
<img alt="" src="assets/images/homePageImages/clock.svg">
</div>
<span>Opening hours</span>
</a>
</li>
<li role="listitem">
<a id="FAQ_link" aria-label="FAQ" role="link">
<div class="icon display-flex">
<img alt="" src="assets/images/homePageImages/search.svg">
</div>
<span>FAQ</span>
</a>
</li>
<li role="listitem">
<a id="Ask_a_librarian_link" aria-label="Ask a librarian" role="link">
<div class="icon display-flex">
<img alt="" src="assets/images/homePageImages/book.svg">
</div>
<span>Ask a librarian</span>
</a>
</li>
<li role="listitem">
<a id="Search_tips_link" aria-label="Search tips" role="link">
<div class="icon display-flex">
<img alt="" src="assets/images/homePageImages/comp_search.svg">
</div>
<span>Search tips</span>
</a>
</li>
<li role="listitem">
<a id="Study_room_link" aria-label="Study room" role="link">
<div class="icon display-flex">
<img alt="" src="assets/images/homePageImages/book.svg">
</div>
<span>Study room</span>
</a>
</li>
</ul><div class="flex-row flex-layout-space-between width-100 welcome-announcements-container">
<div class="welcome display-flex flex-column flex-layout-start">
<h2 aria-level="2" role="heading" class="welcome-title mat-headline-medium ">Welcome to the library</h2>
<span class="welcome-content">Access your account by signing in and enabling more capabilities</span>
<a id="myLibraryCard" tabindex="0" aria-label="Go to my library card" role="link">Go to my library card</a>
</div>
<div class="announcements display-flex flex-column">
<header class="flex-column gap-1">
<h2 class="mat-title-medium" role="heading" aria-level="2">Announcements:</h2>
<h3 role="heading" aria-level="3" class="announcements-item-title mat-headline-medium">New library resources</h3>
</header>
<article>
<p class="mat-body-large">Lorem ipsum dolor sit amet consectetur. Varius ipsum amet elit convallis. Egestas arcu volutpat morbi urna
cursus amet.</p>
</article></div>
</div><div class="about display-flex width-100">
<div class="about-content flex-row">
<div class="about-text flex-column flex-space-between ">
<h2 role="heading" aria-level="2" class="about-text-title mat-headline-large">Customized Landing Page </h2>
<p class="about-text-description">
Please make sure to custom your text here as this is a demo customization example .</p>
<div class="help-sign-in-container flex-column gap-05">
<span>Primo also helps you manage your research. Sign in to:</span>
<ul role="list">
<li role="listitem">
<img alt="Library image" src="assets/images/homePageImages/success.svg">
<span> Reserve and renew books</span>
</li>
<li role="listitem">
<img alt="Library image" src="assets/images/homePageImages/success.svg">
<span> Create favorites lists</span></li>
<li role="listitem">
<img alt="Library image" src="assets/images/homePageImages/success.svg">
<span> Reserve and renew books</span></li>
<li role="listitem">
<img alt="Library image" src="assets/images/homePageImages/success.svg">
<span> View full search results</span></li>
</ul>
</div>
</div>
<div class="about-image flex-layout-center-center">
<img alt="" src="assets/images/homePageImages/about_image.svg">
</div>
</div>
</div>
</main>
</main>
</body>
</html> -
Cree el fichero de fondo de la página de destino homepage_background.svg con la nueva imagen de fondo (consulte el fichero SVG adjunto).
-
Como no se ha añadido CSS para este ejemplo, se utiliza el formato por defecto de la página de destino.
-
Comprima y cargue su paquete de personalización actualizado en la pestaña Gestionar paquete de personalización de su vista.
Si decide utilizar la estructura HTML de nuestra página de inicio, asegúrese de asignar a cada enlace de acceso rápido un atributo href que apunte a sus propios recursos.
Tras la implementación, la página de destino personalizada de este ejemplo aparece de la siguiente manera:
Modificar el banner
Por defecto, el texto del banner es Su descubrimiento comienza aquí. Esto se puede personalizar en la tabla de códigos de etiquetas de ventana de búsqueda (Configuración > Descubrimiento > Configuración de despliegue > Etiquetas), modificando la descripción del código nde.landing.header.
De forma predeterminada, recomendamos mantener las siguientes propiedades de imagen:
- Tamaño renderizado: 1280 x 320 píxeles
- Relación de aspecto renderizada: 4:1
- Tamaño del fichero: 485 KB
Desactivar la superposición de la imagen de fondo
Por defecto, la imagen de fondo de la página de destino se muestra con una superposición de color transparente. Esta superposición garantiza que el texto y los botones sigan siendo legibles en todas las imágenes. La superposición coincide con el color del tema de la vista.
El nivel de superposición se puede eliminar añadiendo la siguiente regla al fichero custom.css de la vista:
.custom-search-bar-container .background-overlay {
display: none;
}
Añadir encabezados y pies de página
Los encabezados y pies de página son áreas situadas en la parte superior e inferior de la interfaz de usuario de la NDE. Puede mostrar información común en todas las páginas de la interfaz de usuario en estas áreas si las añade a los siguientes ficheros de su paquete de personalización: header.html y footer.html. Si admite idiomas distintos del inglés, utilice el siguiente formato para incluir el código de dos dígitos del idioma en el nombre del fichero: header_<language_code>.html y footer_<language_code>.html.
Por ejemplo, añada el siguiente código al fichero footer.html para mostrar enlaces a la política de privacidad, la declaración de accesibilidad y las condiciones de uso de su institución:
<!DOCTYPE html>
<footer style="text-align: center; padding: 1em; background-color: #f2f2f2; font-size: 0.9em;">
<p>
<a href="/privacy-policy.html" target="_blank">Privacy Policy</a> |
<a href="/accessibility-statement.html" target="_blank">Accessibility Statement</a> |
<a href="/terms-of-use.html" target="_blank">Terms of Use</a>
</p>
<p>© Nombre de su biblioteca 2025</p>
</footer>
Cuando se implementa, el pie de página aparece en la parte inferior de la interfaz de usuario:
Personalizar un esquema de colores
Si ha seleccionado uno de nuestros esquemas de colores listos para usar, pero necesita pequeños cambios para adaptarlo a su marca, puede modificar variables específicas (como --sys-primary) con su paquete de personalización.
La interfaz de usuario de la NDE utiliza una paleta de colores definida por los estándares de Angular Material para ayudar a garantizar la accesibilidad mediante un contraste de colores adecuado, indicadores de enfoque visibles y un estilo coherente. Basada en las pautas de Material Design y WCAG, la paleta utiliza roles semánticos como primario y acento, lo que hace que la interfaz sea más fácil de usar y cumpla con la normativa por defecto. No se recomienda modificar estos atributos. En su lugar, se recomienda crear un esquema de colores personalizado. Para obtener más información, consulte Crear su propio esquema de colores en Github.
-
Determine qué atributo desea modificar. Para ver una lista de los atributos utilizados actualmente, consulte el fichero fuente nde-color-theme-*.css utilizando las Herramientas de desarrollo del navegador (F12).
Inspeccionar variables de color en el navegador -
Edite la variable en el fichero custom.css de su paquete de personalización. Por ejemplo:
:root {
--sys-primary: #b51a57;
} -
Comprima y cargue su paquete de personalización. Para obtener más información, consulte Crear e implementar un paquete de personalización, más arriba.
Personalizar imágenes
La carpeta images contiene las imágenes utilizadas para personalizar el logotipo de la biblioteca, la animación de carga, las miniaturas de los tipos de recursos, las imágenes de fondo de las páginas de búsqueda específicas y una imagen para la página de inicio de sesión. Los ficheros de imágenes deben estar en formato PNG y deben nombrarse como se especifica a continuación.
Logotipo de la biblioteca
Para sustituir el logotipo por defecto de la biblioteca que aparece en el menú principal, añada un fichero library-logo.png a la carpeta images.
Siga estas pautas para garantizar un despliegue óptimo y evitar la distorsión de las imágenes del logotipo:
-
Formato de fichero: debe ser PNG (con sufijo .png).
-
Dimensiones máximas:
-
Altura: hasta 100 px.
-
Ancho: hasta 300 px.
-
-
Tamaño del fichero: no más de 30 KB.
-
Relación de aspecto: mantenga la relación de aspecto original para evitar distorsiones.
Carga de animación
Puede sustituir la animación por defecto que se muestra cuando se carga una página de Primo VE. La animación personalizada debe estar en formato Lottie (JSON) y debe llamarse LoadingAnimationJson.json. No existen requisitos específicos en cuanto al tamaño o la estructura del fichero, pero, para obtener un rendimiento óptimo, debe ser lo suficientemente pequeño como para cargarse rápidamente.
Para añadir el fichero de animación al paquete de personalización, en la carpeta images, añada una subcarpeta loadingAnimations y coloque el fichero JSON en esta subcarpeta.
Miniaturas de tipo de recurso
Puede sustituir los iconos por defecto que se utilizan como miniaturas para los recursos que no tienen sus propias miniaturas. Para ello, añada un fichero icon_<resource_type_code>.png a la carpeta images para cada tipo de recurso cuyo icono desee sustituir. Por ejemplo, añada un fichero icon_journal.png o un fichero icon_other.png.
Siga estas pautas para garantizar un despliegue óptimo y evitar la distorsión de las miniaturas de tipo recurso:
-
Ancho: fijo en 68 px.
-
Altura: se ajusta según las proporciones, con alineación hacia arriba.
-
Color del trazo del borde: #DFDFDF (se aplica a todas las miniaturas e imágenes de marcador de posición, especialmente para fondos blancos).
-
Radio de esquina: 2 px tanto para miniaturas como para marcadores de posición.
Siga estas pautas para garantizar un despliegue óptimo y evitar distorsiones en las miniaturas recomendadas por BX (ordenador y móvil).
-
Ancho: fijo en 34 px.
-
Altura: se ajusta según las proporciones, con alineación hacia arriba.
-
Color del trazo del borde: #DFDFDF (se aplica a todas las miniaturas e imágenes de marcador de posición, especialmente para fondos blancos).
-
Radio de esquina: 2 px tanto para miniaturas como para marcadores de posición.
Imágenes de fondo para páginas de búsqueda específicas
Puede personalizar las imágenes de fondo que rodean el cuadro de búsqueda en páginas de búsqueda específicas, como la búsqueda de revistas o la búsqueda en bases de datos. Para ello, en la carpeta images/header (si esta carpeta no existe, créela), añada un fichero de imagen PNG para el tipo de búsqueda, con el nombre de fichero <tipo de recurso>-search-header-img.png; por ejemplo, journal-search-header-img.png. Actualmente, las imágenes de fondo de los siguientes tipos de páginas de búsqueda dedicadas se pueden personalizar de esta manera:
- Búsqueda de revistas (journal-search-header-img.png)
- Búsqueda en navegador (browse-search-header-img.png)
- Búsqueda en la base de datos (database-search-header-img.png)
- Búsqueda en periódicos (newspaper-search-header-img.png)
Imagen para la página de inicio de sesión
Cuando el inicio de sesión ocupa toda la página, puede añadir una imagen personalizada a la página. Para ello, en la carpeta images/loginPage (si esta carpeta no existe, créela), añada un fichero de imagen JPG con el nombre de fichero loginPageImage.jpg.
Personalizar iconos
La carpeta de iconos contiene los iconos utilizados para personalizar el favicon y varios iconos utilizados en la interfaz de usuario de la NDE (como el icono de búsqueda 
). Para personalizar los iconos, utilice el formato SVG y los siguientes ficheros:
-
favicon.ico – Cuando se añade a la carpeta de iconos, anula el favicon por defecto de la vista.
Favicon en la pestaña de la interfaz de usuario de la NDE -
custom_icons.svg - Añadir los iconos (basados en el ID del icono por defecto) a este fichero usando el formato SVG. Puede añadir tantos iconos como necesite utilizando el elemento <symbol> para cada uno.
Todos los iconos personalizados deben incluirse en el fichero custom_icons.svg. Varios iconos personalizados deben incluir los ID y las rutas de cada icono personalizado dentro del fichero custom_icons.svg. Para cambiar un icono personalizado, el cambio debe realizarse en el fichero custom_icons.svg.
Icono de búsqueda en la interfaz de usuario de la NDE (Próxima experiencia de descubrimiento)Para determinar el ID de un icono, utilice las Herramientas de desarrollo del navegador para inspeccionar el icono que desea personalizar. Tras seleccionar la opción Inspeccionar elemento y el icono, el ID del icono aparece en el campo data-mat-icon-name:
Inspeccionar el icono para la identificaciónPor ejemplo, el fichero custom_icons.svg puede aparecer de la siguiente manera con un solo icono:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
<symbol id="Search" height="24px" viewBox="0 -960 960 960" width="24px" fill="">
<path d="M440-240q116 0 198-81.5T720-520q0-116-82-198t-198-82q-117 0-198.5 82T160-520q0 117 81.5 198.5T440-240Zm0-280Zm0 160q-83 0-147.5-44.5T200-520q28-70 92.5-115T440-680q82 0 146.5 45T680-520q-29 71-93.5 115.5T440-360Zm0-60q55 0 101-26.5t72-73.5q-26-46-72-73t-101-27q-56 0-102 27t-72 73q26 47 72 73.5T440-420Zm0-40q25 0 42.5-17t17.5-43q0-25-17.5-42.5T440-580q-26 0-43 17.5T380-520q0 26 17 43t43 17Zm0 300q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T80-520q0-74 28.5-139.5t77-114.5q48.5-49 114-77.5T440-880q74 0 139.5 28.5T694-774q49 49 77.5 114.5T800-520q0 64-21 121t-58 104l159 159-57 56-159-158q-47 37-104 57.5T440-160Z"/>
</symbol>
</svg>
Fichero Example of custom_icons.svg
Añadir HTML personalizado y otros ficheros
Además, puede añadir sus propios ficheros HTML y, de hecho, la mayoría de los demás tipos de ficheros estáticos (excluidos los ficheros relacionados con bases de datos), a su paquete de personalización. Esto le permite alojar recursos adicionales como páginas de ayuda, contenido instructivo o componentes reutilizables, todos accesibles con un enlace directo sin alterar el comportamiento básico del sistema.
Una vez añadidos los ficheros al paquete, se puede hacer referencia a ellos utilizando la siguiente estructura de URL:
Ejemplo:
-
Descargue el paquete de personalización para su vista de NDE.
-
Descomprima el paquete.
-
Añada sus ficheros personalizados a la carpeta Activos.
-
Comprima el paquete.
-
Cargue el paquete al servidor.
Para obtener información más detallada, consulte Crear e implementar un paquete de personalización más arriba.
Crear una casilla de búsqueda con enlaces profundos a la NDE de Primo
Este ejemplo crea una casilla de búsqueda que usa un enlace profundo para buscar en el catálogo de su institución. Para más detalles sobre cómo crear un enlace profundo, consulte Enlaces profundos - Nueva interfaz de usuario.
Si ya está utilizando un cuadro de búsqueda para realizar búsquedas en VE, cuando se active la NDE, sus consultas se redirigirán automáticamente a ella. No es necesario crear un nuevo cuadro de búsqueda.
-
Cree un fichero HTML, incluya las siguientes líneas y asegúrese de introducir el nombre del servidor y los parámetros personalizables, como el código de vista y la pestaña (perfil de búsqueda):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Script que convierte el hilo de consulta en un parámetro válido -->
<script type="text/javascript">
function searchPrimo() {
document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value;
document.forms["searchForm"].submit();
}
</script>
</head>
<body>
<!-- Fill in Highlighted Parameters -->
<form id="simple" name="searchForm" method="get" target="_self" action="https://<host_name>/nde/search" enctype="application/x-www-form-urlencoded; charset=utf-8" onsubmit="searchPrimo()">
<input type="hidden" name="vid" value="<view_code>">
<input type="hidden" name="tab" value="<search_profile_slot_code>">
<input type="hidden" name="search_scope" value="<search_profile_code>">
<input type="hidden" name="lang" value="<2_char_lang_code>">
<!-- Fixed parameters -->
<input type="hidden" name="query" id="primoQuery">
<input type="text" id="primoQueryTemp" value="" size="35">
<!-- Search Button -->
<input id="go" title="Search" onclick="searchPrimo()" type="button" value="Search" alt="Search" style="height: 22px; font-size: 12px; font-weight: bold; background: #DE6E17; color: #ffffff; border: 1px solid;">
</form>
</body>
</html>
-
Ejemplo de consulta de búsqueda:
https://na02.primo.exlibrisgroup.com/nde/search?vid=TRIAL_10_INST:GENERIC_NDE&tab=Everything&search_scope=MyInst_and_CI&lang=en&query=any,contains,peace&mode=advanced
Si se están mostrando múltiples cuadros de búsqueda en una página, se deben definir funciones y formas separadas para cada cuadro de búsqueda, y asegurarse de que los nombres y ID en rojo sean únicos para cada cuadro de búsqueda.
-
Para probar la casilla de búsqueda, abra el fichero HTML en un navegador y realice una búsqueda. Si guardó el fichero HTML en un servidor web, use la siguiente URL para acceder a la casilla de búsqueda:
http://<web_server>/<path>/<filename.html>
Capacidades avanzadas de personalización
Se pueden incorporar personalizaciones más avanzadas, más allá de la marca estándar, en la interfaz de usuario de la NDE de las siguientes maneras:
- Usar el paquete de personalización de la interfaz de usuario de la NDE
- Integrar complementos externos
Se puede utilizar una tabla de códigos especial, Etiquetas definidas por el usuario de NDE (Descubrimiento > Configuración de despliegue > Etiquetas), para añadir y gestionar etiquetas personalizadas que se utilizarán en módulos personalizados o extensiones de módulos existentes.
Paquete de personalización de la interfaz de usuario de la NDE
Para modificaciones más profundas que excedan la marca estándar, puede utilizar el Paquete de personalización en la interfaz de usuario de la NDE en GitHub, que permite a los desarrolladores crear y desarrollar lo siguiente:
-
Un módulo personalizado adaptado a las necesidades específicas de cada institución. Puede crear y asignar sus componentes a los selectores de la interfaz de usuario de la NDE designados, con la flexibilidad de colocarlos en la parte superior, inferior, anterior o posterior a los elementos existentes o incluso sustituirlos por completo. Para más información, consulte CustomModule en GitHub.
-
Un esquema de colores personalizado. Para obtener más información, consulte Crear su propio esquema de colores en Github.
-
Un complemento. Para obtener más información, consulte Desarrollar un complemento para la interfaz de usuario de la NDE en GitHub.
Complementos externos para la interfaz de usuario de la NDE
La interfaz de usuario de la NDE proporciona la infraestructura necesaria para admitir la carga dinámica de complementos desarrollados por otras partes interesadas. Esta capacidad permite a las instituciones integrar a la perfección funcionalidades externas de proveedores, consorcios o miembros de la comunidad. Los complementos externos se gestionan a través de la página Configuración de complementos. Para obtener más información, consulte Gestionar complementos para la interfaz de usuario de la NDE.
Opciones y alcance del soporte y los comentarios
La interfaz de usuario de la NDE de Primo VE ofrece un marco de personalización flexible que permite a las instituciones adaptar la interfaz de usuario para cumplir sus objetivos de marca, accesibilidad y experiencia del usuario. En esta sección se describen los límites del soporte de Clarivate, las responsabilidades institucionales en cuanto a sus personalizaciones, las responsabilidades de los proveedores en cuanto a los complementos de terceros y los recursos disponibles de la comunidad.
Personalizaciones institucionales
Las instituciones pueden aplicar una amplia gama de ajustes en la interfaz utilizando el Paquete de personalización de la NDE oficial, que incluye tanto actualizaciones básicas de la marca (p. ej., logotipo, tema, diseño de la página de inicio) como cambios más avanzados en la interfaz de usuario a través del módulo de Personalización avanzada de la NDE.
Clarivate ofrece asistencia para:
- Mantener la estructura y la compatibilidad del Paquete de personalización la NDE en todas las versiones del producto
- Proporcionar documentación oficial sobre cómo utilizar la personalización, incluidos ejemplos de implementación y orientación para desarrolladores, tal y como se publica en el módulo Personalización avanzada de la NDE
- Comunicar los próximos cambios que pueden afectar las personalizaciones
- Responder a problemas relacionados con la falta de enlaces de interfaz o servicios necesarios para admitir personalizaciones institucionales.
Clarivate no admite los cambios de código realizados por las instituciones, especialmente cuando:
- Los componentes personalizados se implementaron utilizando el módulo Personalización avanzada de la NDE.
- Se emplearon marcos de terceros, bibliotecas no compatibles o métodos de integración no documentados.
- Los cambios en el código incluyeron modificaciones en CSS, modificaciones en JavaScript o diseños HTML personalizados.
Las instituciones son plenamente responsables del desarrollo, las pruebas, la depuración y el mantenimiento de sus propias personalizaciones. Si necesita consultar con un desarrollador de Primo o plantear una cuestión relacionada con el módulo de personalización avanzada, consulte https://github.com/ExLibrisGroup/customModule/issues.
Para garantizar la compatibilidad y la asistencia a largo plazo, se recomienda a los clientes que trabajen dentro del marco de personalización oficialmente compatible.
Integración de complementos
La interfaz de usuario de la NDE permite la integración con complementos de terceros para mejorar la funcionalidad. Estos complementos son creados y mantenidos por proveedores externos, y su soporte técnico queda fuera del ámbito de Clarivate.
Los vendedores son responsables de:
- Proporcionar una URL de conexión válida y accesible para el complemento.
- Proporcionar documentación e instrucciones de implementación claras.
- Proporcionar soporte para el funcionamiento continuo del complemento.
Clarivate no proporciona asistencia para complementos desarrollados por proveedores ni para funciones relacionadas.
Si una institución está interesada en un nuevo complemento, debe contactarse directamente con el proveedor correspondiente. Los proveedores pueden consultar la guía de Clarivate para desarrollar complementos de la NDE si desean obtener orientación sobre la implementación.
Canales alternativos - Recursos de la comunidad
Para obtener ayuda adicional con las mejoras de la interfaz, como el estilo, el comportamiento de JavaScript o la configuración del diseño, se recomienda a las instituciones que se comuniquen con la comunidad Primo general:
- La lista de correo de la comunidad de Primo (consulte Primo primo@exlibrisusers.org; Lista de correo electrónico de Primo)
- La Red de desarrolladores de Primo
Clarivate seguirá ampliando esta guía de buenas prácticas para la personalización de la interfaz de usuario de la NDE mediante la publicación de ejemplos de personalización solicitados con frecuencia y el seguimiento de los comentarios de la comunidad a lo largo del tiempo.