Integración de Mirador 3
: Vea un ejemplo en vivo.
Descargar: Ver y descargar el código fuente de la sección de integración de Mirador 3 .
El visor Mirador es un popular visor de código abierto para la comparación de imágenes y manuscritos que utiliza las API de Imagen y Presentación de IIIF para cargar imágenes digitales desde repositorios digitales. A través del soporte nativo de CONTENTdm para IIIF, usted puede integrar Mirador en su sitio web y proporcionar a sus usuarios finales otra opción para visualizar su contenido. Debido a que muchos repositorios digitales modernos admiten IIIF, el contenido de otras organizaciones se puede comparar con el de usted en el visor de Mirador.
Esta receta es para la versión 3 de Mirador, que representa una mejora significativa respecto a Mirador 2 e incorpora numerosas mejoras en usabilidad y accesibilidad. Mirador 3 también cuenta con una arquitectura más sencilla para integrarse en CONTENTdm.
Se necesitan algunas piezas para integrar Mirador 3. El proceso general es el siguiente:
- Cree una página personalizada vacía que sirva como contenedor para el visor de Mirador.
- Suba el archivo JavaScript de Mirador 3 a su sitio (o enlace a él).
- Agregue JavaScript personalizado a CONTENTdm que inserte un botón de Mirador y cargue el visor.
Paso 1: Cree el contenedor de página personalizado
La base para la integración de Mirador será una página personalizada estándar que actuará como contenedor para el visor de Mirador (consulte Crear una página personalizada para más información). Esta página HTML tiene un estilo CSS en línea para eliminar todos los márgenes y el relleno, y muestra una animación de carga mientras Mirador 3 se carga por primera vez. Todos los archivos utilizados en esta receta se pueden ver y descargar desde el portal de descarga de CONTENTdm Cookbook en la sección de integración de Mirador 3. El archivo mirador3.html es la página HTML utilizada en el ejemplo en vivo.
Descargue el archivo mirador3.html para la integración de su Mirador 3. Puede modificar este archivo HTML como mejor le parezca. Por ejemplo, si desea mostrar un título de página diferente para su visor Mirador 3, edite el título en el encabezado YAML en la parte superior del código HTML.
Cargue su archivo mirador3.html en la herramienta de configuración de sitios web en el cuadro de diálogo Configuración global > Personalizar > Páginas personalizadas utilizando la herramienta de administración de archivos. Esta receta asume que el archivo HTML se sube al nivel superior de la estructura de archivos (no en un subdirectorio) y que el archivo se llama mirador3.html.
Paso 2: determine cómo cargar Mirador3 en su sitio web
Mirador 3 es una reescritura completa de Mirador 2 y se distribuye y empaqueta de una manera diferente. Puede cargar la totalidad de Mirador 3 como un único archivo JavaScript, lo cual es mucho más sencillo que Mirador 2. Esta receta sigue este enfoque y se basa en un archivo JavaScript preconstruido. Para cargar esta versión de Mirador 3:
- Descargue el archivo llamado mirador.min.js desde la página del portal de recetas.
- En la herramienta de Configuración del sitio web, cree una carpeta llamada js usando la herramienta de gestión de archivos en el cuadro de diálogo Personalizar > Páginas personalizadas.
- Suba mirador.min.js a la carpeta js que usted creó.
- Continúe al paso 3.
Otras opciones para el paso 2: usuarios avanzados
Hay otras formas de acceder a Mirador 3. Para esta receta, hemos construido el paquete Mirador desde el código fuente. Si desea utilizar una versión específica de Mirador 3 o actualizar la versión en el futuro, puede compilar una única versión de JavaScript para usted mismo. Mirador es un software de código abierto, y la página principal del proyecto se encuentra en su repositorio de GitHub. Para construir Mirador, haga lo siguiente:
- Tenga npm configurado en su computadora y tenga cierta familiaridad con la ejecución de scripts de línea de comandos para construir software.
- Descargue los archivos de código fuente de la versión de Mirador 3 que desea utilizar desde la página de lanzamientos.
- Descomprima el paquete de archivos fuente.
- En una ventana de shell, cambie al directorio de Mirador que se creó cuando se descomprimió el paquete.
- Ejecute los siguientes dos comandos:
npm install
npm run-script build
Esos dos comandos pueden tardar varios minutos en completarse. Es posible que usted vea algunos errores y advertencias en el camino que a menudo se pueden ignorar. Si el proceso fue exitoso, verá un nuevo archivo mirador.min.js en un subdirectorio denominado «dist». El archivo debería tener un tamaño de alrededor de 2 MB. Una vez que haya generado este archivo, puede cargarlo en la Herramienta de Configuración de Sitios Web de la misma manera que se describió anteriormente en el paso 2.
Otra manera de utilizar Mirador 3 es cargarlo directamente desde una CDN pública. Un servicio gratuito de CDN popular llamado unkpg distribuye una amplia variedad de proyectos de JavaScript de código abierto. Puede enlazar directamente a Mirador 3 en unkpg usando esta URL: https://unpkg.com/browse/mirador@latest/dist/mirador.min.js
El indicador «@latest» siempre seleccionará la versión más reciente de Mirador. Si prefiere cargar una versión específica, puede visitar el sitio de unpkg y usar el selector de versiones para obtener la URL de su versión preferida: https://unpkg.com/browse/mirador@latest/
Una vez que sepa qué versión desea usar de unkpg, solo necesitará modificar la ruta en el script mirador3-cp.js (descrito a continuación) para que apunte a la URL de unkpg que ha elegido. Este enfoque no es el predeterminado en la receta, por lo que deberá modificar el código en mirador3-cp.js para que funcione.
Paso 3 – archivo JavaScript personalizado
Hay un archivo JavaScript principal que reúne las piezas de esta receta y las hace funcionar. Este script principal realiza dos funciones:
- Inserta un botón de Mirador en la página del documento de cualquier registro que tenga soporte para la API de IIIF, y
- Carga Mirador 3 y lo representa en el contenedor de página personalizado con el Manifiesto IIIF del documento.
Este archivo JavaScript principal se llama mirador3-cp.js y se puede descargar desde la página del portal de recetas del libro de cocina. (El nombre real del archivo se acompaña de números de versión, como mirador3-cp-1_2.js, que no afectará los siguientes pasos si se usa de manera consistente al aplicar la receta).
Si no tiene ningún otro JavaScript personalizado ejecutándose en su sitio web, cargue el archivo mirador3-cp.js en la Herramienta de Configuración del Sitio Web, en el cuadro de diálogo Personalizado > Scripts personalizados. Si ya ha agregado un archivo JavaScript en la página de Scripts personalizados, deberá modificar ese archivo JavaScript y copiar todo el contenido de mirador3-cp.js en el archivo JS personalizado principal para su sitio de CONTENTdm. El código en mirador3-cp.js está contenido en una sola función, por lo que puede coexistir de forma segura junto a otro código JavaScript. Si está utilizando la receta Cargar varios archivos JavaScript, puede añadir mirador-cp.js a su lista de archivos para cargar.
Una vez que haya subido mirador3-cp.js, Guarde y publique en la herramienta de configuración del sitio web para completar la instalación de la receta.
Verificación
Para verificar esta receta, abra su navegador y navegue hasta un documento de CONTENTdm en su sitio web que sepa que tiene soporte para la API de IIIF. Si su sitio está en Cantaloupe, podría ser una imagen o un PDF . Borre la caché de su navegador local (o use una ventana privada/incógnito) para asegurarse de que tiene la versión más reciente de sus archivos JavaScript personalizados. Debería ver el icono de Mirador a la derecha de los iconos de Descargar o Imprimir en la página del documento en CONTENTdm. Haga clic en el icono. Se abrirá una ventana aparte con ese registro cargado dentro del visor Mirador 3.