JessyInk (de Mark Crutch para Full Circle Magazine #132)

En su habitual columna sobre Inkscape, en la edición de abril de la revista “Full Circle”, Mark Crutch escribió sobre JessyInk, una extensión de Inkscape que lo “convierte” en una poderosa herramienta para la creación de presentaciones electrónicas.
La he usado varias veces y es mi opción preferida a la hora de crear presentaciones electrónicas.
Además, el artículo de Mark es, como siempre, muy claro y detallado, por lo que decidí traducirlo al español y publicarlo, para llegar con más facilidad a quienes, siendo de habla hispana, tengan dificultades con el inglés.

(Por más información sobre esta herramienta, puede acceder a una explicación muy detallada, y originalmente en español, de Darío Badagnani en vamox.blogspot.com).

Este mes voy a tratar sobre una "aplicación" que, en realidad, se manifiesta como una colección de extensiones de Inkscape: JessyInk. Con ella se puede convertir a Inkscape en un editor de presentaciones electrónicas (como PowerPoint y similares) que luego pueden verse con un navegador web. Para lograr esto, JessyInk modifica su documento; agrega código JavaScript para permitir la navegación con el teclado y el mouse e implementar algunos efectos de transiciones básicas. Un buen ejemplo de lo que es capaz JessyInk se puede ver en la presentación "JessyInk 1.5.5 Showcase", que se puede encontrar en el sitio Launchpad de Canonical.

Puede hacer clic en ese enlace para ver la presentación desde cualquier navegador web moderno compatible con SVG, pero una mejor idea es hacer clic derecho en el enlace y guardarla primero en su máquina local. Un enfoque recomendado para crear una presentación de JessyInk es, simplemente, cargar esta presentación en Inkscape y reemplazar los contenidos con los suyos, para lo cual es necesario tener una copia local del archivo, como primer paso. Tenga en cuenta que, al menos en mis pruebas, hay que descargar el archivo directamente desde la página de Launchpad, ya que cargarlo primero en el navegador y luego guardar el documento en ejecución, siempre generaba un archivo que luego no se recargaba.

En lugar de modificar ese documento de ejemplo, voy a mostrar cómo crear una presentación de JessyInk desde cero. Recomiendo tener abierto Inkscape y un navegador web durante todo el proceso. A medida que realiza cambios en el archivo de Inkscape, puede guardarlos (Ctrl + S) e inmediatamente volver a cargar el archivo en el navegador (F5) para comprobar los resultados. Entonces, con su navegador listo y un documento en blanco de Inkscape, comencemos...




Un archivo en blanco de Inkscape no sabe nada sobre JessyInk y sus múltiples funciones de JavaScript, por lo que el primer paso es inicializarlo yendo al ménú Extensiones > JessyInk > Instalar / actualizar...  (para abreviar, a partir de ahora, me referiré a las extensiones solo por su nombre ya que están todas en el menú Extensiones > JessyInk). No hay nada que hacer aquí, más que hacer clic en el botón “Aplicar” y cerrar el cuadro de diálogo una vez que haya finalizado.

Para lograr la coherencia en una presentación, es común crear una diapositiva maestra que contenga a los elementos que estarán presentes en todas las diapositivas, como un fondo particular o el logotipo de la empresa. En lo que respeca a JessyInk, una capa particular de su documento puede servir como una diapositiva maestra, por lo que lo haremos obvio abriendo el cuadro de diálogo “Capas” (Ctrl+May+L) y cambiando el nombre de la capa existente por “MASTER”. Luego, vale la pena abrir el cuadro de diálogo “Propiedades del documento...” y configurar las unidades en "px" y el tamaño de página para que se adapte a la pantalla en la que se presentará (1024x768 en mi caso). Esto no es indispensable, ya que el navegador escalará el SVG para adaptarse a la pantalla, pero al menos le dará una idea de cómo se verá la presentación final. Sin embargo, tenga en cuenta que aunque el navegador escalará el documento, se mantendrá la relación de aspecto, por lo que presentar en una pantalla de una relación diferente dará como resultado bordes en blanco.

Finalmente, agregue los elementos comunes a toda la presentación. Yo dibujé un rectángulo con un relleno degradado como fondo y luego agregué algunos rectángulos sólidos con un texto como marcador de posición para el título de la diapositiva y “nn de NN“. Este último lo implementé como tres objetos de texto separados, por razones que se aclararán en breve.

Así es como se ve nuestra página maestra:

Nuestra diapositiva maestra puede parecer correcta, pero, por el momento, JessyInk no sabe que la debe tratar de manera diferente que a cualquier otra diapositiva. Ejecute la extensión “Diapositiva maestra...” y proporcione el nombre de la capa (“MASTER”, en mi caso) antes de hacer clic en “Aplicar” y luego cerrar el cuadro de diálogo cuando haya terminado.

Antes de salir de la diapositiva maestra, veamos el texto del título que hemos agregado como marcador de posición. Seleccione el elemento de texto “Título de la diapositiva” y ejecute la extensión “Auto-textos...”. Esta se utiliza para definir elementos de texto en la página que se reemplazarán dinámicamente cuando se ejecute la presentación. Para este elemento, debe elegir el botón de opción “Título de diapositiva” y hacer clic en “Aplicar”. A continuación, con el cuadro de diálogo todavía abierto, seleccione el texto “nn” y cambie el botón de opción a “Número de diapositiva” antes de aplicar. Finalmente, seleccione el texto “NN” y cambie el botón de opción a “Cantidad de diapositivas” y luego aplique una vez más. Ya puede cerrar el cuadro de diálogo.

Hemos terminado con la diapositiva maestra por ahora, por lo que probablemente sea una buena idea bloquear la capa para evitar cambios accidentales cuando comencemos a agregar el contenido real a nuestra presentación.

Ahora es el momento de agregar algunas diapositivas reales. Debido a que Inkscape (y el formato SVG) no tienen la capacidad de manejar documentos multi-páginas, no podemos simplemente tener cada diapositiva en una página nueva y cambiar entre ellas usando pestañas o miniaturas, como se puede hacer en otros programas de presentaciones. En cambio, debemos lograr el efecto de múltiples páginas creando cada diapositiva en su propia capa. Este enfoque funciona, pero requiere un poco de disciplina al trabajar: en todo momento, solo debe tener visibles la diapositiva maestra y la diapositiva que esté editando. Cuando desee cambiar entre diapositivas, no se debe olvidar de ocultar la diapositiva anterior, de lo contrario, podría confundirse fácilmente al pensar que parte del contenido de la diapositiva previa es, en realidad, parte de la nueva. También debe asegurarse de seleccionar la nueva capa, de lo contrario sus modificaciones se aplicarán a la diapositiva incorrecta. Para ilustrar esto, crearemos un par de capas para nuestras dos primeras diapositivas, cada una con un nombre en función del contenido que pretendemos incluir en ellas.

Quizás contrario a la intuición, el orden de las diapositivas es de abajo hacia arriba, por lo que, en este caso, la primera diapositiva es la que se llama “Presentaciones con JessyInk”, mientras que la segunda se llama “¿Qué es Inkscape?”. Tenga en cuenta que la diapositiva maestra está bloqueada, y solo la diapositiva maestra y la primera diapositiva están visibles. La primera diapositiva está actualmente seleccionada, por lo que es hora de agregar algo de contenido. Este puede ser cualquier contenido que normalmente se incluiría en un documento de Inkscape: textos, gráficos vectoriales y mapas de bits. Sin embargo, recuerde que la presentación será procesada por un navegador web, por lo que la visualización final estará limitada a las capacidades del motor SVG del navegador: no utilice texto fluido, y tenga en cuenta que las fuentes tipográficas pueden ser diferentes entre su máquina con Inkscape y la del espectador final. Si debe utilizar fuentes particulares, probablemente le convenga convertirlas en trayectos, pero recuerde conservar una copia de la presentación sin convertir, porque de lo contrario no podrá editar el texto en el futuro.

Con algo de contenido en ambas diapositivas, es hora de probar la presentación en un navegador. Cargue el archivo desde el disco (presione Ctrl + O en el navegador para abrir el selector de archivos) y, opcionalmente, presione F11 para poner el navegador en modo de pantalla completa (use la misma tecla para volver al modo normal). Debería ver que el texto en el título y en el recuento de diapositivas en la parte inferior, se han reemplazado por contenido real.

Para moverse a través de su presentación, haga clic con el botón del ratón o use las teclas flecha Izquierda y Derecha. Las teclas Inicio y Fin le llevarán al principio y al final de tu presentación, respectivamente, aunque con solo dos diapositivas, de alguna forma son redundantes en este momento. Elaboremos nuestra presentación un poco más con otra diapositiva, describiendo los efectos de transiciones de JessyInk.

Las formas en que una diapositiva puede hacer una transición de entrada o salida están limitadas en JessyInk, pero eso es probablemente una buena cosa: si confía a los efectos especiales el mantenimiento del interés de sus espectadores, ¡entonces debe repensar su presentación! Para establecer una transición en una diapositiva, es útil hacer doble clic en la capa en el cuadro de diálogo Capas y luego copiar el nombre de la capa al portapapeles. Deberá pegar esto en el campo “Nombre de capa” del cuadro de diálogo “Transiciones...” para identificar qué diapositiva está editando.

A continuación, puede elegir cómo debe aparecer y desaparecer la diapositiva:

• “Aparecer” resulta en una diapositiva que reemplaza inmediatamente a la siguiente, sin animación.
• “Desvanecer” hace que la diapositiva se desvanezca.
• “Saltar” agranda la diapositiva, desde una pequeña representación inicial, hasta su tamaño completo.

Desvanecer y Saltar funcionan mejor cuando la diapositiva anterior usa uno de ellos como efecto de transición, de lo contrario, pueden desentonar bastante. También puede ajustar la duración del efecto, aunque he encontrado que el valor predeterminado de 0,8 segundos está bien en la mayoría de los casos. Quizás se esté preguntando sobre el tipo de transición Predeterminado. Este elimina la transición de entrada o de salida, restableciéndola al comportamiento predeterminado, que parece ser idéntico a la opción Aparecer.

Después de editar algunas diapositivas, puede ser fácil perder la pista del estado de las transiciones de cada una de ellas. La extensión “Resumen...“ es útil aquí: al pinchar en “Aplicar” produce un cuadro de diálogo con un resumen de la presentación, incluidos los tipos y tiempos de transición que ha establecido. El cuadro de diálogo siempre se abre pequeño, pero puede cambiar su tamaño en lugar de leer el resumen línea por línea en un pequeño cuadro de texto.

Además de las transiciones de las diapositivas, se pueden aplicar animaciones similares a los elementos individuales de su diapositiva, utilizando la extensión “Efectos...”. En este caso, la transición se aplica a cada elemento seleccionado, y se usa un campo “Orden” para determinar en qué secuencia se aplican los efectos. Los elementos hacen la transición comenzando con la Orden 1 y de ahí en adelante. Múltiples elementos con el mismo número de orden, harán las transiciones al mismo tiempo. La opción “Ninguno (predeterminado)” se usa para detener la transición, de modo que siempre estén presentes en la diapositiva.

Ahora es probable que sea el momento de probar su presentación una vez más. Simplemente guarde el archivo de Inkscape, luego presione F5 en el navegador para volver a cargar el archivo. No es necesario cerrar y volver a ejecutar ninguna de las aplicaciones, lo que le permite alternar rápidamente entre la edición y la vista final para refinar los detalles de su presentación.

Si JessyInk se limitara a presentaciones de diapositivas simples con algunas transiciones, sería poco beneficioso sobre el uso de LibreOffice Impress. Pero también ofrece la posibilidad de crear presentaciones de “zoom y panorámica”, originalmente popularizadas por un sitio web llamado Prezi con una nueva versión de presentaciones, más dinámicas que las lineales de PowerPoint de antaño. El software de edición de Prezi originalmente requería el uso de Adobe Flash, aunque ahora también lo pueden hacer con HTML5. También hay un programa de código abierto, llamado Sozi, que realiza el mismo truco (por si quiere probar otra alternativa a JessyInk).

Una forma habitual en este tipo de presentaciones es que se use una sola diapositiva para ofrecer una visión general general del tema en cuestión, luego el programa de visualización amplía, gira y se desliza para “sumergirse” en información más detallada. Para nuestros propósitos, voy a crear otra diapositiva con otras tres “vistas” dentro de ella. He marcado cada vista (incluida la vista inicial de toda la diapositiva) con un rectángulo en Inkscape, y les he aplicado trazos de color verde brillante para asegurar que se destaquen. No estarán visibles en la presentación final, por lo que puede usar cualquier estilo de trazo o color que desee para ayudarlo a realizar un seguimiento de las vistas individuales.

He mantenido la misma relación de aspecto para cada uno de los rectángulos que la que he usado para la presentación en general. De esa forma puedo asegurarme que mis vistas tengan el tamaño y la posición adecuados en relación con el contenido. El rectángulo que está alrededor del “3” también lo he girado para demostrar que es posible la rotación, así como el acercamiento y el barrido. Con las vistas marcadas, solo tenemos que seleccionar cada una por turno y usar la extensión “Vista...” para definir el orden en el que se visitan durante la presentación, comenzando en 0 para el estado inicial de la diapositiva.

Tan solo hacer un zoom en los tres números no es que sea muy útil, pero, al combinar el orden de zoom con algunos efectos de animación de objetos, puede lograr que partes de la diapositiva se desvanezcan y aparezcan, al tiempo que el espectador se desplaza por la misma. Aquí está la versión final de esta diapositiva, que parece un poco más desordenada:

En la práctica, sin embargo, el “1” se desvanece durante el paso 1 en el orden de diapositivas, y el texto “Acercar” aparece al mismo tiempo. Se han aplicado reglas similares a las otras áreas, y el recuadro rojo se usa como la vista final. El resultado es que en la diapositiva se ven los números 1, 2 y 3 cuando se muestra por primera vez, luego se acerca y se mueve hacia el círculo rojo (que muestra la palabra “Acercar”), hacia el verde (que muestra la palabra “Deslizar”), y se desliza y gira hacia el azul (que muestra la palabra “Rotar”). Finalmente, la presentación vuelve a la vista general, que ahora muestra las palabras, en lugar de los números.

Vea la presentación en acción en el siguiente video:



Ahora que tenemos la presentación finalizada, me gustaría mencionar algunas características más de JessyInk. Al presionar la tecla i durante una presentación aparecerá una página de sumario que muestra miniaturas de todas las diapositivas, lo que le permite saltar hacia atrás u omitir secciones con el ratón o el teclado. Presionando la tecla d cambiará al modo de dibujo, con el que puede dibujar con el puntero sobre una diapositiva. Al presionar teclas particulares, incluso, puede cambiar el color y el tamaño de la pluma. Ejecute la extensión “Combinaciones de tecla...” para ver o cambiar los diversos atajos de teclado que ofrece JessyInk.

Para concluir, JessyInk es, realmente, un ejemplo notable de lo que una extensión de Inkscape puede lograr con un poco de pensamiento lateral y mucho de JavaScript. La suavidad de las presentaciones resultantes, sin embargo, depende, en gran medida, del rendimiento de su navegador, algo a tener en cuenta antes de pararse al frente de una sala llena de gente para dar una charla. Sin embargo, si le resulta más cómodo trabajar con Inkscape que con LibreOffice, podría ser una herramienta invalorable sobre la que aprender.