Integración de Mirador 2
Ver una grabación: Incrustar el visor Mirador.
Nota: Este video demuestra un método antiguo para integrar Mirador Viewer con scripts primarios y secundarios. Ahora hemos simplificado la receta para usar solo un script, como se muestra a continuación.
Consulte la formación de CONTENTdm o el anuncio del evento para obtener más información.
: Vea un ejemplo en vivo.
Descargar: Vea y descargue el código fuente de la sección de integración de Mirador 2 .
Personalización preparada en colaboración con la Biblioteca Huntington.
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.
La integración de Mirador es algo complicada debido a la gran cantidad de archivos y scripts involucrados. El proceso general se ve así:
- Cree una página personalizada vacía que sirva como contenedor para el visor de Mirador.
- Descargue el paquete Mirador desde la página de GitHub del proyecto y suba los archivos a CONTENTdm.
- Añada JavaScript 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 será el contenedor para el visor de Mirador (consulte Crear una página personalizada para obtener más información). Esta página HTML tiene CSS en línea para eliminar todos los márgenes y el relleno, y para crear un lienzo limpio para cargar el visor Mirador. Haga clic en los enlaces a continuación para ver la página HTML de ejemplo que se utiliza en el ejemplo en vivo. Debe ver el código fuente de la página para ver el código HTML.
Ver: Ver el código HTML.
Ver el código fuente de la página para ver el código HTML.
Puede utilizar esta página para su personalización. Descargue este HTML o copie el código fuente para crear el suyo propio. Si desea mostrar un título de página diferente para su visor de Mirador, modifique el título en el encabezado YAML en la parte superior del HTML. También puede ver esta página personalizada con la sintaxis YAML:
Ver: Vea el HTML bajo la sintaxis YAML.
Esto muestra la página personalizada con el visor Mirador cargado.
Esta página HTML debe cargarse en la herramienta de configuración del sitio web en el cuadro de diálogo Personalizar > Páginas personalizadas utilizando la herramienta gestionar archivos. Esta receta asume que la página se sube al nivel superior y que el archivo se llama mirador.html.
Paso 2: Añada el paquete Mirador a CONTENTdm
Mirador es un software de código abierto y el hogar del proyecto está en el repositorio de GitHub. Puede descargar el paquete Mirador desde la página oficial de lanzamiento.
La versión 2.7.0 será la última versión 2.x de Mirador porque todo el esfuerzo de desarrollo se ha trasladado a la versión 3. Descargue el paquete 2.7.0 build.tar.gz o build.zip, y luego expanda el archivo en su disco local. Usted verá un directorio mirador que contiene una gran cantidad de archivos y subdirectorios.
En la Herramienta de configuración de sitios web de CONTENTdm, regrese al cuadro de diálogo Personalizar > Páginas personalizadas > Administrar archivos. Haga clic en el icono de carga y luego en Añadir archivo(s) para abrir su explorador de archivos local. Localice el directorio mirador que acaba de crear a partir del paquete build.tar.gz o build.zip y súbalo, junto con todo lo que contiene. Esta receta supone que usted ha subido el directorio de mirador al nivel superior, el mismo lugar donde se añadió mirador.html en el paso 1.
Paso 3: archivos JavaScript personalizados
Hay dos objetivos principales para el JavaScript personalizado como parte de esta receta:
- insertar un botón Mirador en la página del documento de cualquier registro que tenga soporte para la API de IIIF (todos los registros de imagen), y
- cargando todos los archivos de Mirador en el contenedor de página personalizada.
Para esta receta, estas operaciones están a cargo del archivo JavaScript, que carga todo en el momento adecuado del ciclo de vida de la página, se asegura de que el botón aparezca en los lugares correctos y carga Mirador en una nueva pestaña cuando se hace clic en el botón. El archivo JavaScript debe añadirse a su sitio en el cuadro de diálogo Personalizado > Scripts personalizados en la herramienta de configuración del sitio web.
Ver: Ver el guion.
Verificación
Para verificar esta receta, abra su navegador y navegue a un documento de CONTENTdm en su sitio web que sea un archivo de imagen (para asegurarse de que tiene soporte para la API IIIF). 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. Usted debería ver el icono de Mirador a la derecha de los iconos de Descargar o Imprimir en CONTENTdm. Haga clic en el icono. Se abrirá una ventana separada con ese registro cargado dentro del visor de Mirador.
Hacer más con Mirador
Esta receta le ofrece una manera de integrar Mirador como un visor independiente dentro de sus páginas existentes de CONTENTdm. Hay muchas maneras en las que usted podría ir más allá de este concepto. Mirador ha sido diseñado para funcionar en base a un objeto JavaScript, que se construye en esta receta mediante el archivo .js archivo en el Paso 3. Puede modificar la configuración de ese objeto para cambiar la apariencia inicial de Mirador o modificar lo que está disponible para los usuarios finales. Obtenga más información sobre la flexibilidad de Mirador en la guía de GitHub, Configurar Mirador.
Otra posible aplicación de Mirador sería integrarlo profundamente en su página de CONTENTdm. Esta receta se basa en el concepto de que Mirador se carga en una ventana del navegador separada o en una nueva pestaña, pero no hay ninguna razón técnica por la cual Mirador no pueda integrarse directamente en CONTENTdm, o incluso utilizarse para reemplazar el visor OpenSeadragon, que es el visor de imágenes predeterminado de CONTENTdm. Ese tipo de personalización es un poco más complicada que esta receta, pero es posible.
Otra idea interesante es crear un enlace de Mirador que abra una ventana con varios registros que se muestran en el modo de comparación de Mirador. Por ejemplo, usted podría mostrar el anverso y el reverso de una tarjeta postal en una sola ventana de Mirador, o mostrar 4, 6 u 8 imágenes que se relacionen entre sí para una comparación visual. Estos enfoques no serían difíciles de extender más allá de esta receta aprovechando las opciones de configuración descritas en la guía de GitHub de ProjectMirador, Configurar Mirador.
Al igual que con todas las recetas de libros de cocina de CONTENTdm, el personal de CONTENTdm está interesado en trabajar con usted para hacer más. Si tiene alguna idea y necesita orientación, póngase en contacto con Soporte de OCLC. Si usted crea una nueva e interesante aplicación de Mirador en su sitio de CONTENTdm, considere compartirla con la comunidad más amplia de CONTENTdm a través de este Recetario de Personalización Avanzada.
