Lección 10: Despliegue de Imágenes en JW Library (Parte 1)

Aquí aprenderás el código html que debemos incluir para que desplegar imágenes en nuestro documento. Así como los diferentes atributos que podemos añadir si queremos que estas se muestren de una forma determinada.

Hemos dejado casi al último este elemento que aunque no es vital en el funcionamiento de un JWPUB, ciertamente es importante para el disfrute y la presentación de nuestras publicaciones, claro estamos hablando de las imágenes.

Si algo es cierto es que la Organización y el Departamento de Arte se han esmerado desde siempre en brindarnos ilustraciones e imágenes vívidas y que nos llegan al corazón.

Un poderoso material visual que aunque no se incluye en todos los JWPUB, prácticamente no hay ningún archivo reciente en este formato que no haga uso de ellas.

¿Cómo funciona el código html que está detrás de este componente?

Para ello usaremos nuevamente la Meeting Workbook (Guía de Actividades) de Enero del 2019 que ya usamos en la lección anterior y vamos a extraer varios documentos que cuentan con imágenes varias.

Voy a exportar el archivo binario que corresponde a la sección “Ideas para conversar” (Sample Conversations)

Tenemos una imagen que encabeza esta sección:

También podemos ver que a la imagen lo acompaña un epígrafe <“Un superintendente de circuito y su esposa sirviendo en Francia (1957)”> cómo elemento adicional que nos ayuda a saber qué es lo que estamos viendo en la fotografía.

Bueno ambos elementos los encontraremos en el archivo htm, que mostramos a continuación:

Veamos qué tenemos aquí.

Iniciando con la etiqueta <div> podemos ver que inicia una nueva agrupación de contenido a interpretar.

<div id="f1" class="north_center">

Claro este lleva su atributo que lo identifican “f1” (figura 1 en el documento) y el atributo global nos dice que es de clase “north_center”.

Esta clase señala la forma en que debe desplegarse la imagen con relación al texto. Y me gustaría señalar los valores que pueden asignarse de acuerdo a cómo queramos ver la imagen. Se usan los puntos cardinales (norte, sur, este, y oeste) como referencia en vez de arriba, abajo, izquierda, derecha… además de otros parámetros para orientarnos. He modificado el comportamiento de la misma imagen en la Guía de actividades experimentando con estos valores, a continuación te describo los que puedes usar y que efecto tienen en la imagen y el texto del documento:

 

“north_center” = La imagen se despliega en el centro y se extiende completamente hasta los márgenes izquierdo y derecho del documento situándose arriba del texto.

 

 

 

 

 

“south_center” = La imagen se despliega en el centro y se extiende completamente hasta los márgenes izquierdo y derecho del documento situándose abajo del texto.

 

 

 

 

“east_right half” = La imagen se despliega hacia el margen derecho del documento, mientras el texto queda en la parte izquierda. El valor “half” indica que el tamaño de la imagen debe reducirse a la mitad.

 

 

“west_right half” = La imagen se despliega hacia el margen izquierdo del documento, mientras el texto queda en la parte derecha. El valor “half” indica que el tamaño de la imagen debe reducirse a la mitad.

 

 

 

Estos suelen ser los más comunes que podemos ver en las publicaciones y utilizar en nuestros documentos. Sin embargo también hay algunos valores extras que podemos agregar:

 

“north_center fullBleed” = La imagen se sitúa en el centro del documento pero acoplándose a la alineación del texto dejando un espacio entre los márgenes derecho e izquierdo. Por lo general este tipo de valor se aplica a imágenes que aparecen en cuadros y tablas adicionales, de manera que el tamaño de la imagen se adapta al contenido de este. Siempre en la parte superior del texto.

 

 

En el caso de los valores “east_right” y “west_right” también puede agregarse el valor “quarter”, lo cual hará que la imagen sea más pequeña reduciéndose a una cuarta parte de su tamaño real, en lugar de “half” (el cual lo reduce a la mitad). En esta imagen de ejemplo tenemos el valor “quarter” aplicado. Cada libro es una imagen individual con su epígrafe: el año. Solo debes anteceder uno de los valores ya sea “north”, “south”, “east”, “west”, y luego “quarter” para conseguir una imagen de tamaño más pequeño.

 

Puedes experimentar y combinar valores para ver qué ocurre. No debes preocuparte por “dañar” la aplicación al menos en este aspecto, pues si el valor no es reconocido la imagen simplemente se desplegará en el margen izquierdo en un tamaño normal.

Por ejemplo ¿Que ocurriría con la imagen y el texto si usaras el valor “south_left quarter”? Te lo dejo de tarea, inténtalo y mira por ti mismo. Solo a base de experimentación podrás ver que ajustes son los adecuados para tus proyectos. Continuemos.

La etiqueta <figure> se utiliza para indicarle a la aplicación que debe interpretar imágenes con una descripción.

A continuación buscará la imagen a interpretar. La etiqueta <img> señala que tenemos un elemento imagen y su atributo complemento src (source <fuente, origen>) nos dice dónde debe buscar ese elemento:
<img src="jwpub-media://202019001_univ_cnt_1.jpg"

A diferencia de los enlaces a referencias y footnotes que inician con jwpub://, este enlace inicia con jwpub-media:// para que la aplicación sepa que trata con un elemento multimedia  y que ese es el nombre del archivo en formato de imagen jpg.

Al descomprimir el archivo contents de un JWPUB, ya te has dado cuenta que las imágenes de la publicación se encuentran allí también. Bueno la aplicación buscará un archivo con ese nombre para desplegarlo: 202019001_univ_cnt_1.jpg y vemos que en este caso coincide.

Se que puede parecer una obviedad, pero te aseguro que más de alguno le ocurrirá que una imágen no se despliega y se frustrará hasta que se de cuenta que el nombré del archivo y del código no coinciden. (Me contaron jeje)

Seguimos:

alt="A circuit overseer and his wife in France, 1957" width="1200" height="600" class="north_center"/>

Tenemos el parámetro alt que guarda el valor del texto que acompaña a nuestra imagen. También el tamaño de la imagen, la anchura (width) y la altura (height) en píxeles. Y nuevamente el atributo clase que orienta la imagen.

Sin embargo cabe señalar, ese texto no debe confundirse con el epígrafe que acompaña la foto. Este valor de nuestro “alt” es texto alternativo, ¿cual es su propósito?

El texto alternativo se usa para describir qué sucede en la fotografía.

Normalmente en un navegador web, este elemento ayuda a que los motores de búsqueda por ejemplo Google, puedan clasificar y posicionar las imágenes basándose en esa descripción.

También puede pasar que alguna imagen no pueda cargarse, por problemas de conexión a internet o un bloqueo del mismo navegador y entonces aparece un espacio donde debería ir la imagen haciéndose visible el texto alternativo. Así podemos saber qué imagen estaba en esa parte del documento.

Otro uso de este elemento es que ayuda a las personas con problemas visuales. Gracias a un software que trabaje como lector de pantalla, puede permitir a una persona con discapacidad visual, usar un dispositivo inteligente a la perfección y saber dónde está navegando mediante instrucciones de voz. El texto alt ayudará al software a describir lo que aparece en la imagen.

Sin embargo al tratarse de la aplicación este texto es opcional y no altera el comportamiento de la imagen.

Pasemos al siguiente bloque del código.

<div class="figcaption">
<figcaption>

La etiqueta <figcaption> es un complemento de nuestra etiqueta <figure>, que indica que la imagen va a acompañada de un texto también, pero esta vez si es visible al usuario, y cómo podemos ver en la parte del código que sigue:

<p id="p15" data-pid="15" class="sc">A circuit overseer and his wife on assignment in France, 1957</p>

Ahora ya estamos tratando con el epígrafe de nuestra foto y por tanto un párrafo más en el documento que puede subrayarse y agregarse notas. Por eso lo acompañan sus atributos correspondientes.

Y debido a que muchas imágenes no tienen necesidad de epígrafe, por ejemplo íconos y fotos ilustrativas. La etiqueta <figcaption> es opcional. Dependerá de las características de la publicación, si necesitas que un texto acompañe tu imagen o no.

Y por último se agregan las etiquetas </figcaption>, </div> y </figure> que cierran nuestro bloque.

Es así como podemos agregar imágenes a nuestro documento. Observando otras publicaciones oficiales y la manera en que despliega estos elementos, podrás darte una idea de que código quedará mejor con tu documento.

Sin embargo esta es la primera parte de lo que JW Library necesita para desplegar las imágenes tal y como funciona en una publicación oficial.

En la siguiente lección veremos en cómo trabaja el modo de proyección de imágenes a otras pantallas.

Siguiente

Anterior

You may also like...

Deja un comentario