Personalización de Primo VE - Buenas prácticas

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.

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

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

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

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

   

   Pestaña Gestionar paquete de personalización

3. Seleccione Descargar para descargar el paquete de personalización. Si esta es la primera vez, descargue el paquete de plantilla. De lo contrario, descargar el paquete actual para garantizar que se esté usando la última versión.

4. Descomprima los ficheros.

5. Asegurarse de que la carpeta superior del fichero zip del 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 sea necesario, personalizar los ficheros de configuración y las carpetas 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:

   • Personalizar ficheros de imagen

   • Componentes y personalizaciones de CSS

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

   

   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 matriz de la carpeta que desea comprimir. Por ejemplo:
      cd /Users/<user name>/<parent folder>

   3. Introduzca el siguiente comando 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. Seleccione Guardar para aplicar 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 hace clic en el logotipo. Los siguientes formatos de imagen son compatibles: PNG y SVG.

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 la Plantilla de Correo Electrónico

Primo VE le permite personalizar el formato de los correos electrónicos enviados a los usuarios después de seleccionar la acción Enviar a correo electrónico en Primo VE. Se puede personalizar el formato con o sin Primo Studio. Con cualquier método, debe cargar las plantillas personalizadas de correo electrónico con la página Ver Configuración. Además, puede crear plantillas de correo electrónico por separado por cada idioma admitido en la IU.

La siguiente figura presenta la salida de muestra de la plantilla de Correo Electrónico lista para usar en Primo VE.

La plantilla de Correo Electrónico está en formato HTML e incluye las siguientes secciones:

• Logotipo - Muestra el mismo logotipo que se carga con el Gestor de paquetes de personalización (Menú de configuración > Descubrimiento > Configuración de despliegue > Configurar vistas). Para más detalles, véase Añadir un logotipo clicable.

• Nota de institución: muestra el texto configurado con el siguiente código en la tabla de códigos Enviar Correo Electrónico y SMS: nui.email.institutionNote. Por defecto, este campo no tiene valor y no se mostrará si se deja en blanco.

• Lista de registros: por cada registro, el correo electrónico muestra un despliegue breve del registro y la declaración de disponibilidad.

• Descargo - Muestra el texto configurado con el siguiente código en la tabla de códigos Enviar correo electrónico y SMS: nui.email.disclaimer. 

Personalización de íconos SVG

A diferencia de otros ficheros de imagen (como PNG, GIF y JPG), el formato SVG (gráficos vectoriales escalables) es un fichero editable basado en XML que representa un conjunto detallado de coordenadas que indica a su navegador cómo dibujar una imagen. Primo VE le permite sustituir las imágenes SVG mediante la personalización del fichero custom-ui.svg, que no se proporciona por defecto y se almacena en directorio /img de su paquete de personalización. Este fichero contiene un contenedor SVG (envoltorio) que puede incluir uno o más elementos SVG, donde cada elemento SVG es una imagen independiente que tiene su propio ID de SVG.

Por ejemplo:

Puede sustituir los íconos existentes asignando los identificadores SVG utilizados para representar íconos específicos en Primo VE a los elementos SVG que añada al contenedor del fichero de personalización.

1. En el navegador, inspeccione el ícono que desea reemplazar y obtenga su ID de SVG, que se utiliza más tarde en este procedimiento.

   

   Inspeccione el ícono en el navegador

   No incluya el sufijo _cache32 en el ID de SVG, solo utilice libros.

2. Edite el fichero SVG para su nuevo ícono y copie su definición SVG para utilizarla posteriormente en este procedimiento.

   Por ejemplo, la siguiente definición SVG dibuja la imagen de un corazón:

   <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x="0px" y="0px"
        viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
   <path style="fill:#D75A4A;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
       c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
       c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
   </svg>

3. En la pestaña Gestionar paquete de personalización en la página Configuración de vistas (Configuración > Descubrimiento > Configuración de despliegue > Configurar vistas), descargue su paquete de personalización de vistas. Si no existe, descargue la plantilla y úsela para crear su paquete de personalización de vistas.

4. En la carpeta /img, cree o edite el fichero custom-ui.svg (si ya existe) y pegue la definición SVG que copió en el paso 2 en el contenedor SVG del fichero (recuerde incluir el ID de SVG del ícono que inspeccionó en el paso 1).

   En el siguiente ejemplo, el ícono del corazón sustituye al ícono de Libros en la Barra de filtro de tipos de recursos:

   <?xml version="1.0" encoding="UTF-8" ?>

   <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width="24" height="5000" viewBox="0 0 24 5000">

    

   <svg id="books" xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x="0px" y="0px"
        viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
   <path style="fill:#D75A4A;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
       c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
       c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
   </svg>

    

   </svg>

   Sustituir la definición SVG del ícono de Libros

5. Guarde el fichero custom-ui.svg.

6. Comprima, cargue y guarde el paquete de personalización.

Personalización del icono de acceso directo para dispositivos iOS/Android 

Además, puede cambiar el icono de acceso directo que se muestra en la página de inicio de Primo VE para dispositivos iOS y Android.

Para cambiar el icono de acceso directo:

1. Cree una imagen de 150 x 150 píxeles para el icono de acceso directo de Primo VE con el nombre siguiente:home-screen-icon.png.

2. Edite su paquete de personalización y coloque el nuevo fichero de imagen del acceso directo debajo de la carpeta img .

3. Comprima y cargue su paquete de personalización.

Página 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

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 {}
   
   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) {}

Página Despliegue completo

1. prm-full-view prm-brief-result-container{}

Menú superior

1. view_code/img/library-logo.png
2. .layout-align-end-center { }
3. prm-topbar .md-button:not(.md-icon-button) {}

Barra de Búsqueda de la Biblioteca

1. prm-search-bar {}
2. /* the text color in the search box */

   prm-search-barinput::-webkit-input-placeholder { }

   prm-search-barinput:-moz-placeholder { /* Firefox 18- */}

   prm-search-barinput::-moz-placeholder { /* Firefox 19+ */}

   prm-search-barinput:-ms-input-placeholder {}
3. prm-search-bar md-autocomplete-wrap input {}
4. prm-search-bar .simple-search-wrapper .search-actions .md-button {}
5. prm-search-bar .search-switch-buttons .md-button {}

Barras de Búsqueda de Bases de Datos y de Diarios

1. prm-atoz-search-bar {}
2. prm-atoz-search-bar div.search-scope.layout-align-center-start.layout-column
3. /* the text color in the search box */

   prm-atoz-search-barinput::-webkit-input-placeholder { }

   prm-atoz-search-barinput:-moz-placeholder { /* Firefox 18- */}

   prm-atoz-search-barinput::-moz-placeholder { /* Firefox 19+ */}

   prm-atoz-search-barinput:-ms-input-placeholder {}
4. prm-atoz-search-bar md-autocomplete-wrap input {}
5. prm-atoz-search-bar .simple-search-wrapper .search-actions .md-button {}

Barra de Búsqueda de Navegación

1. prm-browse-search-bar {}
2. prm-browse-search-bar div.search-scope.layout-align-center-start.layout-column
3. /* the text color in the search box */

   prm-browse-search-barinput::-webkit-input-placeholder { }

   prm-browse-search-barinput:-moz-placeholder { /* Firefox 18- */}

   prm-browse-search-barinput::-moz-placeholder { /* Firefox 19+ */}

   prm-browse-search-barinput:-ms-input-placeholder {}
4. prm-browse-search-bar md-autocomplete-wrap input {}
5. prm-browse-search-bar .simple-search-wrapper .search-actions .md-button {}

Barra de búsqueda de Periódicos

1. prm-newspapers-search-bar{}
2. prm-newspapers-search-bar div.search-scope.layout-align-center-start.layout-column
3. /* el texto en color aparece en la casilla de búsqueda */

   prm-newspapers-search-barinput::-webkit-input-placeholder { }

   prm-newspapers-search-barinput:-moz-placeholder { /* Firefox 18- */}

   prm-newspapers-search-barinput::-moz-placeholder { /* Firefox 19+ */}

   prm-newspapers-search-barinput:-ms-input-placeholder {}
4. prm-newspapers-search-bar md-autocomplete-wrap input {}
5. prm-newspapers-search-bar .simple-search-wrapper .search-actions .md-button {}

Barra de Búsqueda de Etiquetas

1. prm-tags-search-bar{}
2. prm-tags-search-bar div.search-scope.layout-align-center-start.layout-column
3. /* the text color in the search box */

   prm-tags-search-barinput::-webkit-input-placeholder { }

   prm-tags-search-barinput:-moz-placeholder { /* Firefox 18- */}

   prm-tags-search-barinput::-moz-placeholder { /* Firefox 19+ */}

   prm-tags-search-barinput:-ms-input-placeholder {}
4. prm-tags-search-bar md-autocomplete-wrap input {}
5. prm-tags-search-bar .simple-search-wrapper .search-actions .md-button {}

Mover las facetas al lateral izquierdo

Crear y cargar el fichero 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. Guardar los ficheros de ayuda en el directorio html/help del 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

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. Seleccionar Personalizar > 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). Seleccione el icono Traducir para definir una etiqueta de un idioma específico.
   • Descripción - Especificar el texto que se muestra cuando los usuarios mantienen el cursor sobre el enlace. Seleccione el icono Traducir para definir una descripción de un idioma específico.
   
   Página Editar menú de enlaces
5. Seleccione Guardar.

Opciones de configuración

La siguiente tabla enumera los cambios en la tabla de códigos Etiquetas de Envío de Correo Electrónico y SMS, para admitir las etiquetas de despliegue utilizadas para los correos electrónicos de alerta.