Lección 9: Despliegue de imágenes en JW Library

Aquí aprenderás 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. 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.

Aunque ya tuvieras las imágenes de tu documento listas y ordenadas como te parecieron mejor, notarás algo extraño: al hacerles tab/click no pasa nada, permanecen estáticas. ¿Qué quiero decir? Usualmente cuando tocas una imagen en JW Library se “maximiza” o cambia a modo presentación (algunos dicen hacerle zoom, pero no es el término exacto) y si está conectada a una segunda pantalla se proyecta ¿cierto?

Seguro que conoces está función pues es de las más solicitadas en nuestra aplicación. Gracias a esta característica quienes sirven en el Dpto. de Audio y Video de la Congregación pueden proyectar cómodamente a pantallas adicionales el material de nuestras reuniones semana tras semana.

Bueno les comento, aunque ya tiene tiempo que la función de proyección multimedia está activa, en el 2018 no habría sido necesario hacer esta segunda parte, pues la aplicación proyectaba la imagen únicamente añadiendo las etiquetas y atributos HTML en el documento.

Bien, a continuación veremos cómo podemos replicarlo. Abre tu DB Browser y carga la base de datos de nuestra Guía de Actividades de Enero de 2019. En concreto las Tablas Multimedia y Document Multimedia son los que almacenan esta información, así que vamos examinar su contenido y a explicarlo.

Tabla Multimedia

Es la Tabla multimedia la que clasifica nos solo las imágenes, sino también los archivos de audio y video de los documentos. Cada elemento tiene un número identificador así como el nombre del archivo.

Mirando nuestra foto ejemplo del Superintendente y su esposa, podemos encontrarla en el campo MultimediaId con el número 3. Al momento no es necesario indagar en cada campo de la Tabla. Nos basta con replicarlo y ver que funcione correctamente. Aunque podemos señalar por ejemplo el campo DataType (o tipo de dato) solo existen dos valores el 0, si se trata de una imagen y el 2 si se trata de un video.

Como puedes ver en la imagen, nuestra foto está clasificada correctamente como 0 en este campo. MajorType y Minor Type parecen seguir la misma estructura: 1 y 1 si es una imagen, 2 y 3 si es un video respectivamente. No parece haber variaciones en esto. También hay que indicar el tamaño de la imagen, sus medidas (Campos Width-Height con los valores 1200×600) y en MimeType (image/jpeg) nos indica obviamente que es una imagen en formato jpeg.

Alcanzamos a ver al final de esta parte de la imagen el campo Label que contiene nuestro texto alternativo, ¿lo recuerdas? Texto no visible que acompaña a nuestra imagen. Veamos el resto de los campos. El campo Caption, almacena el texto que si es visible al usuario. Y que se mostrará al “maximizar” nuestra imagen. Es un campo opcional dependiendo de si la imagen le acompaña un epígrafe o no.

A continuación tenemos el campo CategoryType. Que guarda el valor número 8. Este valor indica que se trata de una imagen ordinaria y es el que debemos tener en mente cuando agreguemos nuestras propias imágenes.

Y aunque hay más valores numéricos en este campo, pues está contemplado para clasificar diferentes tipos de un mismo archivo multimedia, la mayoría son informativas a los programadores de la aplicación y no nos atañen por el momento.

El resto de los campos está en NULL por lo que no es necesario agregar contenido, solo el último campo IssueTagNumber debe agregarse el valor 0 siempre que se trate de una imagen.

Tabla Document Multimedia

Al examinar esta tabla no parece haber mucho contenido que podamos entender. Pero es vital para la correcta proyección de las imágenes. Ya que esta tabla se encarga de decirle a la aplicación dónde debe buscar estos elementos multimedia. Enseguida verás cómo interpreta JW Library estos campos.

¿Recuerdas cual era el MultimediaId de la foto que hemos estado usando de ejemplo? Lo vimos en la tabla anterior, es el número 3. Así que es la misma que encontraremos en esta tabla. Teniendo esto en mente el resto de los campos será más fácil de deducir. La ilustración arriba te hace saber que la imagen se encuentra en el DocumentId número 1 (Verifícalo tu mismo(a), revisa la Tabla Document, y verás que el DocumentId “Ideas para conversar” es efectivamente el número 1).

Los campos BeginParagraphOrdinal y EndParagraphOrdinal indican que la imagen se encuentra ubicado en el párrafo con el data-pid número 1 de ese documento, que coincide con el hecho de que la imagen está antes de cualquier otro elemento de esa página, incluido el título principal.

Esto a la vez ayuda, a que se puedan proyectar varias imágenes y videos sin necesidad de tener que hacer clic/tab en cada una. ¿Has usado esta característica verdad? Si hay varias imágenes en esa página puedes usar los botones laterales o el teclado para pasar al siguiente elemento o viceversa.

Te daré una idea de lo que estoy hablando:

Por ejemplo en esta misma publicación vamos a ir a la Sección “Efectúese la voluntad de Jehová” (“Let the Will of Jehovah Take Place”) que corresponde al DocumentId número 3, y vemos esta sección en JW Library podemos observar que tiene 3 imágenes.

Y haciendo clic en la imagen del joven limpiando la ventana, te darás cuenta de que tienes la opción de ver las siguientes dos imágenes en modo presentación. Ya sea usando el teclado o haciendo clic/tab a los botones laterales (rodeado con un círculo rojo a la derecha de la ilustración) podremos avanzar o retroceder.

Ahora ya tienes una idea de lo que hablo ¿verdad? Bueno si examinamos la Tabla DocumentMultimedia, vamos a ver dónde se almacenan estas 3 imágenes.

Dijimos que el documento de esta sección tiene el Id número 3 ¿verdad? Entonces debemos buscar este valor en el campo DocumentID

¡Aquí está! Hemos encontrado 4 elementos que van en el documento 3. Las imágenes corresponden a los campos (MultimediaId) con los valores 9 al 12. ¿Puedes verlo en la imagen? Y si vamos a la tabla Multimedia y buscamos los MultimediaId con estos números verás que corresponden a nuestras imágenes de esa sección:

De manera que así es cómo JW Library sabe que hay 3 imágenes que deben proyectarse en esa sección y gracias a los otros campos puede saber cuales son y dónde encontrarlas. Pero un momento, ¿por qué hay cuatro elementos, es decir cuatro imágenes en la tabla si solo estamos proyectando 3 en el documento? Es cierto si miras la ilustración de arriba verás que la imagen de “A brother washes windows…” (Un hermano limpia las ventanas…) aparece dos veces. Sin embargo te darás cuenta que aunque se trata de la misma imagen, tienen atributos diferentes. Por ejemplo las medidas del tamaño son distintas. El primero es de 600×600 y el segundo es de 1200×801.

Además el campo CategoryType indica que mientras uno tiene el valor 8 (ya lo dijimos este es el correcto para incluir imágenes ordinarias) el primero tiene valor 9. (Mira la imagen). Lo que nos indica que aunque son imágenes similares tienen propósitos distintos en la aplicación.

¿Y para que sirve el valor 9? te preguntarás. Bueno este valor le dice a la aplicación que es una imagen miniatura que se agrega en las tablas de contenido junto al nombre del artículo. Probablemente lo has visto en la Biblioteca en línea Watchtower.

Al ver este documento en la página web, observarás que efectivamente la imagen del hermano limpiando la ventana aparece de miniatura. Lo cual complementa un título que a veces no nos dice mucho, pero gracias a esta imagen miniatura nos da una idea de que va ese artículo o si ya lo leímos tal vez nos ayude a recordarlo. Y claro el diseño luce mucho mejor.

Como lo dije antes, los demás valores tienen propósitos diferentes, y quizás más adelante podremos analizar para qué sirven. Pero en este momento ya tienes el conocimiento necesario para hacer un documento completo, con sus imágenes, notas, enlaces y párrafos subrayables.

¿Que más debemos saber? En la siguiente lección aprenderemos cómo debemos editar nuestro archivo manifest.json correctamente para empaquetar nuestro proyecto final en JWPUB.