Lección 5: Editando un documento html

En esta lección editaremos un documento html y luego lo visualizaremos en JW Library aplicando los conocimientos de la lección anterior.

¿Qué necesitamos?

Estas serán nuestras herramientas recurrentes en cada lección.

  • Sigil, un editor html muy completo y recomendado.
  • DB Browser for SQlite, nuestro editor de base de datos ya usado previamente.

Vamos directo a crear nuestro primer documento de prueba en html y luego lo veremos desplegado en JW Library.

La herramienta que nos ayudará a crear nuestros documentos html será Sigil, una aplicación que se presenta como un editor multiplataforma de libros electrónicos en formato EPUB. Si no tienes Sigil instalado en tu PC, puedes visitar su página oficial Sigil Ebook Website y descargar la versión más reciente.

Una vez que hayamos descargado e instalado Sigil, procedemos ha abrir la aplicación y veremos este entorno:

Ya que la aplicación no es solo un editor de html, sino que es un creador muy completo de EPUB, en la práctica no utilizaremos la mayoría de sus funciones. Pero es gratuita y muy fácil de utilizar. Además ofrece algunas ventajas que no se encuentran en los editores de html convencionales.

Al costado izquierdo vemos el “Explorador del Libro” un área donde van ordenados los diferentes objetos que utiliza un EPUB: archivos html, archivos Style (de estilos), Images (imágenes), etc. En fin todos los componentes necesarios para estos libros electrónicos. Sin embargo nosotros por el momento solo utilizaremos y agregaremos archivos en la capeta text, que corresponde a los documentos en html.

 

Al abrir la aplicación por defecto ya tiene abierto un nuevo documento en blanco listo para comenzar. Bien pues vamos a escribir algo:

Como ves pusimos unas cuantas líneas básicas y sin formato para este documento de prueba. Pero antes de proseguir me gustaría señalarte lo siguiente, ¿puedes ver la parte superior entre el menú de la aplicación y el área del documento? Hay tres opciones activas:

La primera a la izquierda señala la etiqueta -p- es decir el texto que estamos editando en ese momento es un párrafo. La tercera a la derecha simplemente señala la alineación del texto (a la izquierda) y la del centro es el modo de visualización del documento (activada la vista del libro por defecto) Si recuerdas en nuestra lección anterior vimos el documento interpretado por el navegador (vista web) y el que todavía no estaba interpretado (vista del código fuente) bueno pues esto es similar. Podemos editar en ambos modos, ya sea en modo libro/web o directamente el código fuente.

Echemos un vistazo y cambiemos el modo de edición para ver nuestro documento en código html.

Podemos ver las líneas que acabamos de escribir, pero hay contenido adicional (<p>, </p>, <title>, </title>, <head>, </head>, etc.) bueno estas son etiquetas html y se encargan de decirle al navegador cómo debe interpretar el contenido. Por ejemplo ¿puedes ver que en las líneas que escribimos se encuentran las etiquetas <p></p> encerrando nuestras líneas? Bien ya lo dije previamente pero eso significa que el texto dentro es un párrafo. Pero no trataremos aquí para que sirve cada una de ellas. Así que te invito a consultar información sobre las etiquetas básicas de html si eres principiante.

Bien volvamos al modo libro/web del documento:

Ahora vamos a darle un poco de formato. Seleccionemos el primer párrafo y lo convertiremos en un título o encabezamiento principal. Esto lo hacemos cambiando la etiqueta -p- por la -h1-

¡Excelente! Aquí tenemos el resultado:

Como puedes ver el texto ahora sobresale en tamaño y se ha puesto en negrita. Si cambiamos de vuelta al modo de código fuente verás que la primera línea ya no está entre las etiquetas <p></p> sino entre las etiquetas <h1></h1>

Esto podíamos haberlo hecho manualmente y el resultado sería el mismo. Bueno pero aun queda contenido con el cual podemos prácticar. Probemos poniendo las etiquetas <h2></h2> en la siguiente línea editando el código directamente:

Al regresar al modo libro podemos ver el efecto de esta etiqueta al ser interpretada.

Logramos un efecto similar al anterior pero de menor tamaño, pues esta etiqueta corresponde a un subtítulo o encabezado secundario.

Dejaremos como párrafo la línea final. Y ahora si procedemos a guardar nuestro archivo web, para ello vamos al área de exploración y haremos clic derecho sobre el archivo, ya que se despliegue el menú seleccionamos la opción “Guardar cómo”.

Por defecto la aplicación guarda el archivo con extensión xhtml, pero le cambiaremos el nombre a Docu-test y la extensión será htm.

Ahora que nuestro documento de prueba a quedado listo necesitamos una base de datos, también de prueba que pueda contenerlo y por tanto un JWPUB en el que podamos experimentar..

En la página de Descargas encontrarás un archivo de prueba llamado Pubtest_E.jwpub para este propósito. Te invito a descargarlo junto con su jwtoken. Así podrás editar documentos y experimentar con ellos antes de crear tu propio JWPUB.

De aquí en adelante usaremos al mismo JW Library como entorno de ejecución. Es decir vamos a instalar el archivo Pubtest en la aplicación y desde allí iremos viendo el resultado de nuestras modificaciones. Esto solo va a aplicar si tenemos Windows 10, pues la tienda de aplicaciones de esta plataforma está disponible en esta versión del Sistema Operativo. (Aunque creo que Windows 8.1 también cuenta con la Microsoft Store, pero al parecer hay problemas con el soporte de JW Library) Si tienes una versión anterior a estos sistemas solo nos quedará probarlo en otra plataforma donde funcione JW Library, en tu móvil o tableta tal vez con android o IOS cada vez que hagamos un cambio.

Entonces, descargado el archivo Pubtest_E + JWToken, vamos a instalarlo como cualquier publicación JWPUB haciendo clic derecho Abrir con… y elegimos JW Library si no hemos instalado JWPUB’s sueltos antes. O hacemos doble clic sobre el archivo si ya está asociada la extensión *.jwpub a la aplicación.

Al abrirse la aplicación vemos un menú con Títulos de prueba enumerados:

Al abrir cualquiera de estos títulos vemos que ningún documento se despliega, claro pues aún no hemos cargado ninguno.

Entonces vamos a prepararlo. Tal como hicimos en la lección anterior, abrimos JWBlober y buscamos el archivo “Docu-test.htm” que recién creamos con Sigil. Colocamos nuestra carpeta de salida y cargamos el token que venía adjunto a nuestro Pubtest. (pubtest-E.jwtkn) A continuación hacemos clic en procesar.

Como ya vimos anteriormente se abrirá la carpeta de salida al terminar el proceso y nos mostrará un nuevo archivo binario con la extensión jw. Este será el que cargaremos en nuestra base de datos del pubtest.

Y es lo siguiente que vamos a hacer.

Abrimos la base de datos del PubTest, ejecutando la aplicación DB Browser y buscando el archivo *.db, pero atención a esto, debemos buscarlo en la carpeta de las publicaciones ya instaladas en JW Library si queremos ver los cambios inmediatos.

En la carpeta AppData de Windows 10 se puede localizar los datos de las aplicaciones de la Tienda de Microsoft, sin embargo esta carpeta no es visible sin hacer algunos ajustes. No vamos a detallar cómo se hace eso, pero puedes ver lo explicado en esta página.

Yo te daré el directorio completo que puedes copiar y pegar en el explorador de archivos para ir directamente a la carpeta de publicaciones.

C:\Users\TU-USUARIO\AppData\Local\Packages\WatchtowerBibleandTractSo.45909CDBADF3C_5rz59y55nfz3e\LocalState\Publications

Vamos a Open Database… y colocamos la dirección editando solamente el nombre de usuario de tu equipo:

Y abrimos la carpeta pubtest_E localizando el archivo “pubtest_E.db”.

Ya tenemos cargada nuestra base de datos del pubtest.

Ahora vamos a la Tabla Document y localizamos la primera “fila” que lleva el nombre de Docu-test 1. Una vez allí buscamos el campo BLOB correspondiente, que no tiene contenido al momento. (Aparece el texto NULL) y cargaremos nuestro archivo binario Docu-test.htm.jw en él

.¿Recuerdas cómo se hace? lo hicimos con el folleto th_E en la lección anterior. Te lo recuerdo, revisa que la opción “Mode” esté en Binary y no en Text. Seleccionamos la opción Import y buscamos nuestro archivo “Docu-test.htm.jw” (cambiando el filtro de archivos *.txt a *.* All Files) y lo agregamos. Damos clic en “Apply” y guardamos los cambios en la base de datos en la parte superior “Write Changes”.

Ejemplo de la lección anterior.

(Revisa el procedimiento con imágenes paso por paso acá si te has perdido)

¿Habrá resultado? Hay que averiguarlo abriendo JW Library. (Si la dejaste abierta debes cerrarla y abrir la aplicación nuevamente. Para cualquier modificación que hagamos tenemos que reiniciar la aplicación siempre que queramos ver los cambios guardados)

Abrimos el Pubtest en la página principal o en la sección de Descargados. En el menú de la publicación vamos al Title Test 1 y aquí está el resultado:

¡Felicidades! ¡Hemos creado nuestro primer documento para JW Library! Qué es el primer pasó para crear nuestros propios JWPUB.

Veamos una comparación de nuestro Documento hecho en Sigil y el desplegado por JW Library.

Aunque el contenido es el mismo, podemos ver que JW Library despliega los títulos con una fuente diferente y más estilizada. Además la aplicación ordena el contenido para que se adapte a la pantalla de nuestro dispositivo (Mira la imagen de arriba, el último párrafo) Pero eso ya lo habíamos visto en la lección anterior.

Pues bien antes de continuar quisiera mencionarte lo siguiente.

A pesar de que el Documento aparece en la parte superior cómo Docu-test 1, en el menú aparece el nombre de este elemento como Title-Test 1 ¿Lo notaste?

Esto se debe son dos componentes distintos: el título del documento y un título del menú. Algo que la aplicación ubica en otras tablas y por lo general no distinguimos porque en las publicaciones oficiales aparece el mismo texto, lo que es ideal. Si quieres saber cómo editar el título del menú visita la documentación complementaria en el Anexo 5: PublicationViewItem

Para finalizar esta lección volvamos a nuestro Docu-test 1 y observemos algo curioso, si intentas seleccionar estas líneas para subrayarlas con color, copiarlas o agregar notas como normalmente lo hacemos en nuestras publicaciones, verás que no podemos. El contenido de este Docu-test aún le falta algo para ser igual al de una publicación oficial.

Bueno de hecho nos faltan varias cosas para que nuestro documento sea similar a uno oficial, pues este Docu-test ha sido muy básico. Aún no sabemos como se despliegan los enlaces a la Biblia ni otros elementos cómo las imágenes. En nuestras próximas lecciones veremos más a fondo cómo funcionan dichos objetos.

Siguiente

Anterior

You may also like...

Deja un comentario