Lección 6: Atributos html en JW Library

En esta lección aprenderás en cómo funcionan algunos atributos html, que son clave en la forma en que interactúa la aplicación con el contenido de un documento.

Para este nuevo tema, vamos a utilizar nuestras herramientas recurrentes, JWBlober, Sigil y DB Browser for Sqlite por supuesto, además de JW Library en Windows 10 como entorno de ejecución.

Comencemos aclarando la duda de nuestra lección anterior. ¿Por que en mi Docu-test no puedo realizar las funciones extras de marcado que ofrece JW Library?

En nuestro Docu-test no podemos colorear el texto ni agregar notas. ¿Por qué?

 

Para ver la diferencia entre los documentos comparados arriba. Le echaremos un vistazo al código fuente de una publicación oficial y vamos a compararla con nuestro Docu-test. Y aprovechando que ya tenemos el archivo html que extrajimos de la publicación th-E de la lección 4 mostrada en la imagen de arriba también, usaremos ese documento.

Vamos a abrir Sigil y yendo al “Explorador del Libro” hacemos clic derecho sobre el único documento en blanco que está disponible y seleccionaremos la opción “Añadir archivos existentes…” entonces buscaremos el archivo que extrajimos. ¿Recuerdas cómo lo nombraste? Yo lo guardé como “study1.htm”

También agregaremos nuestro Docu-test.htm a Sigil para una comparación más sencilla si es que no lo tenemos abierto

Bien pues ya teniendo cargado ambos documentos, vamos a revisar el código fuente cambiando el modo de visualización a Vista código.

¿Qué observamos aquí?

Al ver el contenido de “Study 1”, observamos que hay mucho más que las etiquetas que tenemos en nuestro Docu-test.

Por ejemplo comparemos los encabezados principales. ¿Recuerdas cual era la etiqueta?

<h1> y cerramos con </h1>

Tal y cómo podemos apreciar en el documento. <h1>Testing Document</h1> así aparece en nuestro Docu-Test.

Sin embargo en la etiqueta <h1> de Study 1 hay más elementos. ¿Puedes observarlos?

<h1 id="p2" data-pid="2"><strong>Effective Introduction</strong></h1>

Tenemos a la etiqueta <strong> (fuerte en inglés) que sirve para enfatizar aún más el texto que está entre sus etiquetas reforzando su apariencia. Por lo general los navegadores interpretan <strong> igual que una etiqueta <b> es decir Bold o negrita. Pero en el caso de JW Library si puede interpretar estas etiquetas de forma distinta. Así que procuraremos utilizar la etiqueta <strong> siempre que sea necesario resaltar un texto.

Lo siguiente es el contenido dentro de nuestra etiqueta <h1> que aparece así: id="p2" data-pid="2"

Tenemos un atributo identificador id=“p2” y un atributo de datos data-pid=“2” ¿Y cual es su función?

Mientras la etiqueta <h1> le dice al navegador o la aplicación que ese párrafo es un encabezado, los atributos personalizan los elementos que van dentro de esas etiquetas, y también almacenan información que será utilizada por la aplicación.

Por ejemplo en este caso, el atributo id=“p2” se encarga de asignarle un nombre identificador a este elemento del documento. Mientras el atributo de datos data-pid=“2” indica a la aplicación que ese elemento es un párrafo y que es el número 2 del documento.

JW Library usará ambos atributos para diversas funciones, por ejemplo puede usar el atributo identificador para que con la ayuda de un archivo de estilos ese texto despliegue una apariencia diferente a otros elementos. Y en el caso del atributo de datos ayudará a almacenar información que después pueda recuperar al ejecutarse la aplicación. Por ejemplo para saber qué párrafos se han subrayado o en dónde se ha agregado una nota. Es por eso que al carecer de estos atributos en el texto de nuestro Docu-test, la aplicación lo ignora y las funciones de estudio no se activan. Pero si contara con ellos, funcionaría correctamente.

¿Hacemos la prueba?

Vayamos a nuestro encabezado y vamos a agregarle ambos atributos, además de la etiqueta <strong> copiando el ejemplo del archivo Study 1 de manera que quede así:

<h1 id="p1" data-pid="1"><strong>Testing Document</strong></h1>

Si regresamos al modo de visualización libro o web, no veremos ningún cambio aparente. Pero eso ya lo sabremos al ejecutarlo en la aplicación.

Así que guardemos nuevamente nuestro archivo docu-test modificado y reemplacemos el anterior. Y ya sabemos que sigue, hay que convertirlo a un archivo binario con JWBlober y luego lo guardamos en nuestra base de datos del pubtest donde corresponde. (Mira la lección anterior si necesitas recordar el proceso).

Reiniciamos JW Library y veamos nuestro documento nuevamente:

¡Genial! la aplicación ahora reconoce nuestro encabezado de manera que puede colorearse y agregarse notas como en una publicación oficial. Visualmente nada cambió, pero definitivamente hay una gran diferencia y eso es precisamente lo que son los atributos html, hacen su trabajo sin que los usuarios lectores (osea nosotros) sepamos que están allí. Pero ahora que somos creadores de documentos para JW Library, tendremos que agregarlos siempre que editemos texto con su etiqueta correspondiente, eso si queremos que sean funcionales al cien con la aplicación.

Que te parece si como tarea agregas atributos a los que resta del documento. Ahora ya sabes cómo hacerlo.

En las próximas lecciones veremos más elementos de nuestro documento como son los enlaces, de los cuales existen diferentes tipos dentro de la aplicación. Empezaremos con los enlaces a la Biblia.

Siguiente

Anterior

You may also like...

Deja un comentario