Este 24 de agosto me tocó realizar la ponencia que propuse para el FUDCon Valencia. Decidí hacer algo diferente a mis tradicionales láminas de Impress/ODP, aprovechando la aparición de herramientas más versátiles y modernas.

Sozi es un plugin hecho en python para el editor de gráficos vectoriales Inkscape. Posibilita la realización de transiciones dinámicas entre varios objetos dentro de un gráfico vectorial, lo que permite al diseñador a hacer presentaciones verdaderamente impresionantes, a través de casi cualquier conjunto de dibujos o formas.

La presentación resultante es un SVG (Scalable Vector Graphics), que contiene JavaScript insertado para habilitar las transiciones a partir de los clicks del mouse y/o flechas de dirección del teclado. El archivo SVG puede ser leído por cualquier navegador web moderno (léase todos menos Internet Explorer).

Instalando Inkscape y Sozi

En Canaima, Debian o Ubuntu, Inkscape se instala a través del gestor de paquetes. Accede a una Terminal de Root (Menú > Aplicaciones > Accesorios > Terminal de Root) y ejecuta el siguiente comando:

aptitude install inkscape

En Fedora, se puede instalar a través de un Terminal de Root ejecutando el siguiente comando:

yum install inkscape

Para instalar Sozi se debe descargar la última versión desde el sitio oficial. Una vez descargado, se debe descomprimir y su contenido colocado en /usr/share/inkscape/extensions/. Este directorio necesita permisos de superusuario para poder recibir archivos. En resumen, se puede instalar Sozi con los siguientes comandos (como superusuarios):

wget http://github.com/senshu/Sozi/archive/12.09.zip
unzip sozi-release-12.05-08120927.zip
cp sozi* /usr/share/inkscape/extensions/

Comenzando a crear

Bien, ejecutemos Inkscape (Menú > Aplicaciones > Gráficos > Inkscape) y comencemos haciendo 5 formas genéricas que nos servirán como “láminas” para la presentación. En inkscape, podemos hacer diferentes formas por defecto como estrellas, círculos, cuadrados, o simplemente podemos hacer nuestra propia forma si tenemos un poco de experiencia modificando gráficos vectoriales. Por ahora, les dejo esta forma que se ve más abajo para que la puedan utilizar. Cada imagen tiene un enlace a su código fuente SVG, pero la idea es que ustedes lo hagan en sus casas a manera de práctica.

Código fuente SVG para ser abierto con inkscape (botón derecho, guardar como).

Ahora, replicamos la forma otras 4 veces (seleccionar, CTRL+C, CTRL-V) y cambiamos colores (seleccionar, hacer click en la barra de colores inferior para cada forma). Debe quedar algo parecido a la imagen inferior.

.

Código fuente SVG para ser abierto con inkscape (botón derecho, guardar como)

Una vez que tenemos las “láminas” de nuestra presentación, procedemos a llenar cada una con el contenido (imágenes, texto, gráficos, etc.). Para este ejemplo simplemente las enumeraremos.

.

Código fuente SVG para ser abierto con inkscape (botón derecho, guardar como).

Aquí es donde entra en escena Sozi. Cada lámina debemos encerrarla en un cuadrado, para ello debemos seleccionar la herramienta de rectángulos (a la izquierda) y seleccionar el candado para que el tamaño cambie proporcionalmente. Además, cada cuadrado debe tener solamente el contorno sin el relleno. Los cuadrados establecerán los límites de cada lámina y serán los que Sozi utilizará para computar las transiciones.

Código fuente SVG para ser abierto con inkscape (botón derecho, guardar como).

Seguidamente, seleccionamos el cuadrado que encierra la forma que utilizaremos como primera diapositiva y hacemos click en la opción “Sozi” del menú Extensiones. Aparecerá un cuadro como el que se refleja en la captura de pantalla inferior, en donde debemos presionar el boton que tiene forma de + para agregar una diapositiva asociada al cuadrado que seleccionamos.

En el mismo cuadro, existen diversas opciones para configurar otros aspectos de la diapositiva y su transición hacia la siguiente:

  • Título: el título del cuadro actual tal y como aparecerá en el menú de navegación.
  • Ocultar: marca esta casilla para ocultar el cuadrado durante la presentación.
  • Clip: marca esta casilla para recortar el área de visualización que esté por fuera de los límites del cuadrado.
  • Habilitar tiempo de espera (s): si esta casilla está marcada, la presentación pasará al siguiente fotograma de forma automática después del tiempo indicado. Si no está marcada, sólo las teclas de dirección o el click de mouse te permitirá ir al siguiente fotograma.
  • Duración (s): la duración de la transición entre la diapositiva anterior y la actual.
  • Ampliación (%): el porcentaje de ampliación que se aplicará a la siguiente diapositiva.
  • Perfil: el tipo de animación que se realizará durante la transición (lineal, acelerar, desacelerar, luego acelerar desacelerar, entre otros).

Luego de aplicar los cambios, debemos realizar este procedimiento con cada diapositiva, seleccionando el cuadrado y menú Extensiones > Sozi.

Finalmente guardamos, abrimos la presentación con nuestro navegador preferido y deberíamos obtener algo parecido a lo que tenemos acá debajo.