Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    Personalización de Primo VE - Buenas prácticas

    Volver al menú

    Introducción

    Para ofrecer a los usuarios la mejor experiencia en Primo VE, Ex Libris llevó a cabo un amplio estudio de usuarios que incluyó las siguientes tareas para ayudar a rediseñar la interfaz de usuario de Primo clásica:
    • Análisis de registros de búsqueda
    • Encuestas a bibliotecarios durante talleres
    • Entrevistas a usuarios de diferentes niveles académicos y de distintos países y disciplinas.
    Durante el diseño y desarrollo de la nueva interfaz, se evaluó la accesibilidad y capacidad de respuesta en varios dispositivos para garantizar que el nuevo diseño cumpla con las metas según los resultados del estudio de usuarios.
    Puesto que cada biblioteca tiene sus propias necesidades y marca, hemos implementado un nuevo marco de personalización que permite a los clientes tener acceso a puntos de enganche predefinidos para cada componente de la UI y, de esta manera, personalizar cada componente según resulte necesario.
    A fin de garantizar una experiencia de calidad para los usuarios y el desempeño óptimo del sistema, recomendamos a los clientes que prueben todos los cambios que realizan respecto a la accesibilidad y a la capacidad de respuesta en sus entornos de montaje antes de cargar paquetes a su entorno de producción.

    Recursos adicionales

    Los siguientes recursos pueden resultar de utilidad para la personalización de la nueva UI de Primo:

    Inspeccionar elementos web con su navegador

    La mayoría de los navegadores web ofrecen herramientas de desarrollador que le permiten inspeccionar el HTML cargado actualmente y encontrar elementos específicos en una página. En la mayoría de los navegadores puede clicar en F12 o clicar en el botón derecho del ratón en la página y luego seleccionar la opción Inspeccionar elemento.

    Para personalizar Primo VE, debe estar familiarizado con: CSS, HTML, JavaScript y AngularJS. Dependiendo de su experiencia con cada uno de estos lenguajes y marcos, podrá realizar personalizaciones más complejas.

    AlmaCustomization.png

    Página de despliegue completo - Sección Obtener

    El siguiente procedimiento demuestra cómo usar la herramienta para inspeccionar del navegador a fin de localizar la tabla de códigos utilizada para definir una etiqueta en Primo VE.

    Para localizar una etiqueta en la página:
    1. En la página que desea inspeccionar, pulse F12.

    2. Clique en el botón Inspeccionar ejemplar (#1) y luego clique en la etiqueta (#2) que desea modificar. Cada componente debería resaltarse a medida que mueve el cursor sobre el ejemplar.

      InspectElementExample.png

      Página Resultados breves de inspección
    3. En la pestaña HTML debería ver la etiqueta y su código correspondiente (#3). Si no ve un parámetro de traducir, en su lugar, puede buscar la descripción de la etiqueta en la página Todas las tablas de códigos.

    4. En la página Todas las tablas de códigos (Menú de configuración > Descubrimiento > Mostrar configuración > Etiquetas), busque el código o la descripción (la etiqueta de despliegue actual).

      La siguiente figura muestra un ejemplo de búsqueda de un código:

      PVE_AllCodeTables_Search_For_Code.png

      Ejemplo de búsqueda de códigos

      La siguiente figura muestra un ejemplo de búsqueda de una etiqueta:

      PVE_AllCodeTables_Search_For_Label.png

      Ejemplo de búsqueda de etiqueta

    Usar el Gerente del paquete de personalización de la UI

    El Gerente del paquete de personalización le permite cargar y gestionar paquetes de personalización, lo cual le permite marcar y continuar personalizando Primo VE. Si no se cargan paquetes, el sistema usará solo las configuraciones predefinidas.

    • 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
    • Es posible que deba cambiar una opción en Windows para mostrar archivos ocultos si no puede ver ningún archivo .db en su carpeta de paquetes de personalización.

    Para garantizar que un paquete de personalización se integre correctamente con Primo VE, asegúrese de que su fichero ZIP esté estructurado de la siguiente manera:

    PVE_CP_Structure.png

    Estructura del Paquete de Personalización
    • <View_Code>: la carpeta superior de su paquete de personalización. Asegúrese de cambiar el nombre de la carpeta superior por el código de vista de su institución, que debería estar en el siguiente formato: <institution_code>-<view_code>.

    • css : esta subcarpeta contiene el fichero custom1.css, el cual incluye sus reglas CSS. Estas reglas ignorarán las reglas correspondientes en el CSS por defecto.

    • img : eEsta subcarpeta contiene todas las imágenes personalizadas para Primo VE. Para garantizar que aparezca la imagen correcta en Primo VE, asegúrese de utilizar el mismo nombre del fichero que el original.

    • js : esta subcarpeta contiene el fichero custom.js, que incluye sus scripts .

    • html : esta subcarpeta incluye las siguientes subcarpetas, las cuales almacenan todos los ficheros HTML personalizados para Primo VE:

      • página de inicio : el fichero homepage_en.html le permite personalizar el área de la página debajo del cuadro de búsqueda en la página de Inicio de Primo VE. Para admitir otros idiomas, puede crear y cargar nuevos ficheros HTML con el código de idioma correspondiente. Por ejemplo: homepage_fr.html. Para obtener más información, vea Página de inicio.

        Página de inicio de Primo VE
        • El sistema no utilizará contenido dentro de las etiquetas <script>.

        • Como este código estará anidado dentro del código HTML principal, se recomienda incluirlo en una etiqueta <div> (recuadros de la etiqueta <html>).

      • ayuda : el fichero help_en.html le permite crear una página de ayuda para su vista. Para admitir otros idiomas, puede crear y cargar nuevos ficheros de ayuda HTML con el código de idioma correspondiente. Por ejemplo: help_fr.html. Para obtener más información, véase Crear una página de ayuda personalizada. Dado que no se proporciona de inmediato una página de ayuda, deberá añadir el directorio de ayuda a su paquete de personalización.

    Puede crear un paquete de personalización desde la página Ver Configuración o desde Primo Studio, pero necesitará utilizar la página Ver Configuración para implementar el paquete de personalización para los dos métodos. Para obtener más información, vea las siguientes secciones:

    Acceder a Primo Studio

    Primo Studio le permite personalizar de manera interactiva algunos aspectos de su vista y crear un paquete de personalización para desplegar con la página Configuración de vista en Primo VE. Para obtener más información, véase Primo Studio para Primo VE.

    Para acceder a Primo Studio:
    1. Edite su vista en la página Configuración de vista (Menú de configuración > Descubrimiento > Mostrar configuración > Configurar vistas).

    2. Seleccione la pestaña Gestionar paquete de personalización.

    3. Seleccione Ir a Primo Studio en la sección Crear un paquete de personalización.

    Crear un paquete de personalización

    Para crear un paquete de personalización:
    1. En la página Lista de vistas (Menú de configuración > Descubrimiento > Mostrar configuración > Configurar vistas), edite su vista.

    2. Clique en la pestaña Gestionar paquete de personalización.

      PVE_PrimoStudio_ManageCustomizationPackageTab.png

      Pestaña Gestionar paquete de personalización
    3. Clique en Descargar para descargar el paquete de personalización. Si esta es la primera vez, descargue el paquete de plantilla. De lo contrario, descargue el paquete actual para asegurarse de que esté usando la última versión.

    4. Descomprima los ficheros.

    5. Asegúrese de que la carpeta superior del fichero zip de su paquete sea la carpeta <View_Code>, la cual debe tener el siguiente formato: <institution_code>-<view_code>. Por ejemplo: PRMO_OAP_INST-Alma.

    6. Según resulte necesario, personalice los ficheros de configuración y las carpetas que están asociadas a la página de inicio, imágenes y CSS. Debe conservar la estructura y los nombres de los ficheros que está reemplazando. Consulte las siguientes secciones para obtener detalles de cómo marcar y hacer cambios simples en su vista:

    7. Comprima la carpeta de código de vista.

      PVE_CustomZippedPackage.png

      Carpeta de código de vista comprimida

      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:

      1. Abra la aplicación Terminal en Aplicaciones > Herramientas.

      2. Muévase al directorio padre de la carpeta que desea comprimir. Por ejemplo: cd /Users/<user name>/<parent folder>

      3. Ingrese la siguiente orden para comprimir el fichero: zip –r <target file>.zip <My_View> - x "*.DS_Store"

    8. Especifique el nombre del paquete comprimido y clique en Cargar.

    9. Clique en Guardar para desplegar los cambios.

    10. Actualice su vista en el navegador web y pruebe sus cambios antes de cargarlos en el servidor de producción.

    Añadir un logo clicable

    La pestaña Gestionar paquete de personalización en la página Configuración de vista (Menú de configuración > Descubrimiento > Mostrar configuración > Configurar vistas) le permite cargar un nuevo logotipo y definir un enlace que abra una página cuando el usuario clica en el logotipo. Los siguientes formatos de imagen son compatibles: PNG y SVG.

    Es posible que IE11 no sea compatible por completo con el despliegue de las imágenes SVG.

    Para cargar un logo nuevo:
    1. Edite su vista en la página Configuración de vista (Menú de configuración > Descubrimiento > Mostrar configuración > Configurar vistas).

    2. Seleccione la pestaña Gestionar paquete de personalización.

    3. En la sección Cargar logo, siga los siguientes pasos:

      1. Seleccione una imagen para cargar en el campo Cargar fichero de logotipo.

        El sistema coloca las siguientes restricciones en el fichero del logotipo:
        • El formato de fichero de la imagen debe ser .png o .svg.

        • La altura de la imagen no puede exceder los 100 píxeles.

        • El ancho de la imagen no puede exceder los 300 píxeles.

        • El tamaño de la imagen no puede exceder los 30 KB.

      2. Seleccionar Cargar.

        Si desea eliminar el logotipo clicable, seleccione Eliminar logotipo.

      3. Si desea que la imagen sea clicable, especifique la URL de redirección en el campo URL de logotipo clicable.

    4. Seleccione Guardar para guardar los cambios en el paquete de personalización.

    Personalizar ficheros de imagen

    Cualquiera de las imágenes predefinidas se puede personalizar al crear o modificar un paquete de vista si coloca la imagen personalizada en la carpeta img, carga el paquete actualizado en el servidor y luego despliega el paquete. A continuación encontrará algunas de las imágenes que habitualmente se personalizan para fines de marca:
    • library-logo.png: contiene el logo de la biblioteca.
    • favicon.ico: contiene el favicono.
    • icon_<resource_type>.png: contiene la imagen para el tipo de recurso especificado <resource_type>. Por ejemplo: icon_audio.png

    Componentes y personalizaciones de CSS

    Esta sección identifica los principales componentes CSS para cada página de la nueva UI y ofrece un ejemplo de cómo mover las facetas hacia el lateral izquierdo de la página usando CSS.

    Página de inicio

    Esta sección identifica los componentes principales de la Página de inicio.

    HomePage_CSS2.png

    Componentes de la Pagina de inicio
    1. .prm-primary-bg.prm-hue1, prm-search-bar.prm-hue1, prm-spinner.prm-hue1.overlay-cover.light-on-dark:after, prm-topbar .top-nav-bar{}
    2. .prm-primary-bg, prm-search-bar, prm-spinner.overlay-cover.light-on-dark:after{}
    3. view_code/html/homepage_en.html
    Si desea mostrar inicialmente listas desplegables en la casilla de búsqueda para la pestaña por defecto y el alcance de búsqueda de la vista, incluya el parámetro tab de la siguiente manera en la URL de la nueva UI:
    http://<Primo_URL>/primo-explore/search?vid=<view_code>&tab=<default_tab_name>
    Si desea mostrar inicialmente una lista desplegable para un alcance de búsqueda específico, incluya el parámetro search_scope de la siguiente manera en la URL de la nueva UI:
    http://<Primo_URL>/primo-explore/search?vid=<view_code>&tab=<default_tab_name>&search_scope=<scope_name>

    Página Resultados breves

    Esta sección identifica los principales componentes de la página Resultados breves.
    BriefResultsPage_CSS.png
    Componentes de la página Resultados breves
    1. .alert-bar{}
    2. md-content, md-content.md-primoExplore-theme{}
      1. .section-title {}
      2. .section-content .md-chips .md-chip strong{}
      3. .md-autocomplete-suggestions .suggestion-scope, .text-italic{}
      4. .link-alt-color, .section-title prm-icon {}
    3. prm-search-result-list .results-title {}
      BriefResultsItem_CSS.png
      Componentes de ejemplar de resultados breves
    4. prm-brief-result-container .list-item-primary-content {}
      1. prm-brief-result .item-title{}
      2. prm-brief-result .item-detail{}
      3. .item-expanded .secondary-content-holder .md-tab:nth-child(2), .item-expanded .secondary-content-holder md-tab-item:nth-child(2){}
      4. .item-expanded .secondary-content-holder .md-tab:nth-child(3), .item-expanded .secondary-content-holder md-tab-item:nth-child(3) {}
      5. .item-expanded .secondary-content-holder .md-tab:nth-child(4), .item-expanded .secondary-content-holder md-tab-item:nth-child(4) {}
      6. .item-expanded .secondary-content-holder .md-tab:nth-child(5), .item-expanded .secondary-content-holder md-tab-item:nth-child(5) {}
      7. .item-expanded .secondary-content-holder .md-tab:nth-child(6), .item-expanded .secondary-content-holder md-tab-item:nth-child(6) {}
      8. .item-expanded .secondary-content-holder .md-tab:nth-child(7), .item-expanded .secondary-content-holder md-tab-item:nth-child(7) {}
      9. .item-expanded .secondary-content-holder .md-tab:nth-child(8), .item-expanded .secondary-content-holder md-tab-item:nth-child(8) {}

    Ocultar el enlace de inicio de sesión

    Para ocultar el enlace "Iniciar sesión para obtener resultados completos y solicitar ejemplares":
    .alert-bar {
    display:none;
    }

    Cambiar el color del enlace de versiones

    Para cambiar el color del enlace "Ver todas las versiones":
    1. Abra la tabla de códigos Etiquetas de descubrimiento UI (Menú de configuración > Descubrimiento > Configuración de despliegue > Etiqueta).

    2. Edite la tabla de códigos Etiquetas de Ventana de Resultados.
    3. Cambie la descripción del código nui.frbrversion.found.link para incluir sus ajustes de color. Por ejemplo:
      <font color="green">Ver todas las versiones</font>

    Página Despliegue completo

    Esta sección identifica los principales componentes de la página Despliegue completo. Para obtener detalles sobre cómo configurar los servicios Ver y Obtener de Alma, véase Marcar las etiquetas de entrega.
    FullRecordPage_CSS.png
    Componentes de la página Registro completo
    1. prm-full-view prm-brief-result-container{}

    Menú superior

    Esta sección identifica los principales componentes del Menú superior.
    UpperMenu.png
    Componentes del Menú superior
    1. view_code/img/library-logo.png
    2. .layout-align-end-center { }
    3. prm-topbar .md-button:not(.md-icon-button) {}

    Ocultar el menú de idiomas

    Para ocultar el menú de idiomas:
    prm-change-lang {
      display: none;
    }

    Desactivar mayúsculas automáticas en enlaces del menú principal

    Para desactivar las mayúsculas automáticas de todos los caracteres en enlaces del menú principal:
    prm-topbar .md-button {
         text-transform: none;
    }

    Barra de búsqueda

    Esta sección identifica los componentes principales de la Barra de búsqueda.
    SearchBar_CSS.png
    Componentes de la Barra de búsqueda
    1. prm-search-bar{}
    2. /* el texto en color aparece en la casilla de búsqueda */
      input::-webkit-input-placeholder { }
      input:-moz-placeholder { /* Firefox 18- */}
      input::-moz-placeholder {  /* Firefox 19+ */}
      input:-ms-input-placeholder {}
    3. md-autocomplete-wrap input {}
    4. prm-search-bar .simple-search-wrapper .search-actions .md-button {}
    5. prm-search-bar .search-switch-buttons .md-button {}

    Mover las facetas al lateral izquierdo

    De manera predeterminada, la nueva UI muestra las facetas en el lateral derecho de la página de resultados. Use la opción Posición de la barra lateral (cambiar mis resultados) en la pestaña General en la página Configuración de vista (Menú de configuración > Descubrimiento > Mostrar configuración > Configurar vistas) para mover las facetas al lateral izquierdo o derecho de la página.

    Crear una casilla de búsqueda con enlaces profundos a Primo VE

    Este ejemplo crea una casilla de búsqueda que usa un enlace profundo para buscar en el catálogo de su institución.
    PVE_NewSearchBox.png
    Casilla de búsqueda
    Para crear una casilla de búsqueda:
    1. Cree un fichero HTML, incluya las siguientes líneas y asegúrese de ingresar el nombre del servidor, los parámetros personalizables (como el código de vista) y los parámetros fijos (como el tamaño de la carga):
      <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.replace(/[,]/g, " ");
      document.forms["searchForm"].submit();
      }
      </script>
      </head>
      <body>
      <form id="simple" name="searchForm" method="get" target="_self" action="https://<host_name>/discovery/search" enctype="application/x-www-form-urlencoded; charset=utf-8" onsubmit="searchPrimo()">
      <!-- Parámetros personalizables -->
      <input type="hidden" name="vid" value="<inst_code:view_code>">
      <input type="hidden" name="tab" value="<tab_code>">
      <input type="hidden" name="search_scope" value="<scope_name>">
      <input type="hidden" name="mode" value="basic">
      <!-- Parámetros fijos -->
      <input type="hidden" name="displayMode" value="full">
      <input type="hidden" name="bulkSize" value="10">
      <input type="hidden" name="highlight" value="true">
      <input type="hidden" name="dum" value="true">
      <input type="hidden" name="query" id="primoQuery">
      <input type="hidden" name="displayField" value="all">
      <!-- Habilite esto si "Expandir mis resultados" está habilitado por defecto en el Asistente de vistas -->
      <input type="hidden" name="pcAvailabiltyMode" value="true">
      <input type="text" id="primoQueryTemp" value="" size="35">
      <!-- Botón de búsqueda -->
      <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://my-inst.primo.exlibrisgroup.com/discovery/search?query=any,contains,herring&tab=Everything&search_scope=MyInst_and_CI&vid=PRIMO_OAP_INST:MyInst&lang=en&offset=0

      Si está mostrando múltiples cuadros de búsqueda en una página, debe definir funciones y formas separadas para cada cuadro de búsqueda, y asegurarse de que los nombres en rojo y los ID sean únicos para cada cuadro de búsqueda.

    2. 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>

    Crear alimentación de Twitter

    Este procedimiento crea un enlace en la página de inicio que abre su alimentación de Twitter en una nueva pestaña.

    PVE_TwitterExample.png

    Enlace a alimentación de Twitter en la página de inicio
    Para añadir una alimentación de Twitter:
    1. Cree un enlace HTML basado en su alimentación de Twitter. Para obtener detalles, véase https://publish.twitter.com/.

    2. Edite el fichero homepage_en.html e incruste el enlace HTML creado en el paso anterior.

      Por ejemplo:

      <div flex-xs flex="40" layout="column">
       <md-card class="default-card">
       <md-card-title>
       <md-card-title-text>
       <span class="md-headline">Twitter</span>
       </md-card-title-text>
       </md-card-title>
       <md-card-content>

      <a class="twitter-timeline" href="https://twitter.com/ExLibrisGroup?ref_src=twsrc%5Etfw">Tweets by ExLibrisGroup</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
       </md-card-content>
       </md-card>
       </div>

    3. Comprima, cargue y despliegue su paquete de personalización actualizado. Para obtener más información, véase Usar el gerente del paquete de personalización de la UI.

    Crear una página de ayuda personalizada

    La nueva UI le permite crear e incrustar una página de ayuda personalizada que contiene información sobre cómo utilizar la interfaz para acceder a servicios provistos por su institución. Para ofrecer una página de ayuda personalizada, deberá crear un fichero de ayuda, cargarlo al servidor y añadir un enlace en la nueva UI que permita a los usuarios acceder a la página de ayuda.

    Crear y cargar el fichero de ayuda

    Primo VE le permite ofrecer ficheros de ayuda para cada idioma que sea compatible con su institución. La convención de nombres es help_<language>.html(como help_en.html). Todos los ficheros de ayuda personalizados deben colocarse en el directorio html/help de su paquete de personalización de vista.
    Para crear y cargar los ficheros de ayuda:
    1. Descargue su paquete de personalización de vista (véase Modificar un paquete a nivel vista).
    2. Para cada idioma compatible, cree un fichero de ayuda HTML (usando la convención de nombres mencionada anteriormente).
    3. Guarde los ficheros de ayuda en el directorio html/help de su paquete de personalización de vista. Es posible que deba crear el directorio de ayuda primero.
    4. Comprima su paquete de vista y cárguelo al servidor (véase Modificar un paquete a nivel vista).

    Añadir el enlace de ayuda a la UI

    La pestaña Menú de enlaces en la página Configuración de vistas le permite definir el enlace de Ayuda que aparece en la parte superior de la página en Primo VE.
    PVE_AddHelpLink_To_Menu.png
    Enlace de ayuda en el menú principal
    Para añadir el enlace de ayuda:
    1. En la página Configuración de vista (Menú de configuración > Descubrimiento > Mostrar configuración > Configurar vistas), edite su vista.
    2. Seleccione la pestaña Menú de enlaces.
    3. Clique en Añadir enlace para abrir la página Editar menú de enlaces.
    4. Especifique los siguientes campos:
      • Código: ingrese primo_help.
      • URL: ingrese static-file/help.
      • Etiqueta: ingrese la etiqueta de despliegue para el enlace de ayuda (como Ayuda). Clique en el icono TraducirPVE_TranslateIcon2.png para definir una etiqueta de un idioma específico.
      • Descripción: especifique el texto que se muestra cuando los usuarios mantienen el cursor sobre el enlace. Clique en el icono TraducirPVE_TranslateIcon2.png para definir una descripción de un idioma específico.
      PVE_EditMenuLink2.png
      Página Editar menú de enlaces
    5. Clique en Guardar.

    Deshabilitar Permalinks Cortos en Primo VE

    Por defecto, el Permalink de la acción Enviar a, que aparece tanto en las páginas de Despliegue Breve como de Despliegue Completo, crea una URL acortada que incluye el código de la institución, el ID del registro y una clave:

    <Primo Domain>/permalink/<institution_code>/<key>/<record_ID>

    Cuando se introduce la URL acortada en un navegador, Primo convertirá la URL en su URL completa y mostrará los detalles completos del registro.

    • Formato corto:

      https://inst.primo.exlibrisgroup.com/permalink/11INST_INST/12345/alma991004075889705106

    • Formato largo:

      https://inst.primo.exlibrisgroup.com/discovery/fulldisplay?docid=alma991004075889705106&context=L&vid=11INST_INST:inst&search_scope=MyInstitution&tab=LibraryCatalog&lang=en

    Para deshabilitar permalinks cortos:

    Esta mejora está habilitada por defecto. Si desea volver al formato largo, añada las siguientes líneas al fichero CSS de su paquete de personalización:

    .__xs prm-permalink .layout-column>.long-permalink, prm-permalink .layout-column>.long-permalink {

        display: inherit;

    }

     

    .__xs prm-permalink .layout-column>.short-permalink, prm-permalink .layout-column>.short-permalink {

        display: none;

    }

    • Was this article helpful?
    //Feedback