Vamos a despedir el mes con un anuncio que hicimos hace unas semanas: un mini-tutorial de uso de la herramienta de presentaciones dinámicas Sozi que funciona a través de Inkscape. Hay bastante material sobre esta aplicación pero cuando nos decidimos a usarla sentimos que estaba bastante disperso así que, sin ánimo de ser exhaustivæs, en esta entrada nos propusimos reunir toda la información básica para empezar a usarlo. Iremos por partes: instalación, cómo funciona y cómo incrustarlo en una entrada.

Antes de seguir avanzando vamos a las presentaciones iniciales: el programa de dibujos Inkscape es un editor de gráficos vectoriales de código abierto y multiplataforma, con capacidades similares a Illustrator, Freehand o CorelDraw. Usa como formato de archivo los .svg o Scalable Vector Graphics es decir Gráficos Vectoriales Redimensionables. Para instalarlo en Ubuntu aquí encontrarán las instrucciones para hacerlo por consola (aunque también se puede hacer a través del Centro de Software). Si en cambio usan Windows o Mac las instrucciones de instalación las encontrarán aquí.

Sozi es un complemento, también de código abierto licenciado bajo GPL 3.0, realizado en Python y con código JavaScript (lo cual permite las animaciones) que funciona a través de Inkscape (¡por lo tanto si no tenemos instalado este programa no podremos usar su complemento!) Sozi es de fácil instalación, en su página oficial encontrarán cómo hacerlo en las distintas distribuciones de Linux y también en Windows y en Mac. Además hay unas instrucciones muy simples para instalación por consola en Ubuntu disponibles que están aquí.

 

¿Cómo funciona?

Las presentaciones que lograremos con Sozi son animaciones basadas en efectos de acercamientos/alejamientos, traslaciones y rotaciones que permiten enfocar los elementos que queremos destacar en cada momento y que podremos ir viendo con solo presionando enter, darle al click del ratón o bien desplazándonos con las flechas (arriba/abajo y adelante/atrás).

Cada documento estará dispuesto como un gran lienzo es decir que si bien el resultado se verá como una sucesión de diapositivas lo cierto es que se trabaja todo el contenido en una sola hoja o lienzo en blanco donde los elementos se disponen libremente.

Como este complemento funciona a través de Inkscape cuanto más manejemos este programa mayores posibilidades tendrán nuestras presentaciones. El propósito de esta entrada no es explicar el funcionamiento de Inkscape pero aprovechamos para dejar un muy buen manual, que alguna vez ya recomendamos (¡y sigue siendo nuestro preferido!)

Trabajaremos en dos capas: una de contenidos (texto/gráficos/etc) y otra de animación o control.

En la capa de contenidos dispondremos todos los elementos de nuestra presentación y una vez hecho esto todo deber ser convertido a path o vector porque de lo contrario no podrá ser visualizado (lo más común es que olvidemos convertir a vector los textos que añadimos entonces veremos la pantalla de animación pero no qué dice). La recomendación es disponer primero todos los elementos que se visionarán en nuestra presentación y luego empezar a animarlas.

Para nuestra segunda capa, la de animación o control, marcaremos el orden de las diapositivas con una recuadro que se debe ser de preferencia rectangular (el complemento hará zoom allí y lo ideal es que emule las dimensiones de una pantalla). Copio y pego ese primer cuadro que he creado y a continuación lo giro en el sentido en el que quiero verlo. Repetimos esta acción tantas veces como contenido hayamos dispuesto.

Debemos ir guardando cada cuadro como una nueva pantalla de Sozi en Extensiones – Sozi. Allí se abrirá una nueva ventana para que complete los datos del cuadro y que nos posibilita diversas opciones:

• Duration/Duración (s): establece la duración de la transición entre la diapositiva anterior y la actual.
• Zoom/Acercamiento (%): establece el porcentaje de ampliación que se aplicará a la diapositiva (puede ser en números positivos o negativos).
• Profile/Perfil: permite establecer el tipo de animación que se realizará durante la transición (lineal, acelerar, fuerte aceleramiento, desacelerar, fuerte desaceleramiento y sus combinaciones).
• Title/Título: por defecto aparece New Frame número “x”, podemos dejar ese nombre o, si lo cambiamos por un nombre más oportuno, la recomendación es que mantenga la numeración de aparición. Este nombre será el que aparecerá en el menú de navegación.
• Hide/Ocultar: deja marcada esta casilla para ocultar el cuadrado de animación durante la presentación. Nota: en ocasiones también puede suceder que necesitemos cerrar el ojito de la capa control/animación para evitar que se visualice durante la presentación.
• Clip/Clip: deja marcada esta casilla para recortar el área de visualización del lienzo que esté por fuera de los límites del cuadrado.
• Time out/Tiempo de espera (s): marca esta casilla si quieres que la presentación pase a la siguiente diapositiva de forma automática después del tiempo indicado. Si queda desmarcada simplemente pasarás a la siguiente diapositiva de forma manual con el click del ratón, el enter o las fechas de dirección.

Luego de elegir el formato que queremos darle a cada diapositiva clicamos en Nuevo – Guardar y cerramos la ventana externa de Sozi. Repetimos la operación con cada cuadro de animación. Para estos pasos es recomendable ir cuadro a cuadro (creo un rectángulo e inmediatamente después aplico el proceso Sozi).

Además Sozi nos permite incrustar videos en nuestras presentaciones. Para ello vamos a Extensiones – Sozi extras – Agregar Video (es importante que no haya ningún elemento seleccionando ya que este se va a crear ahora al insertar el video). Se nos abre otra ventana y ahí damos las propiedades del video que queremos agregar:

si el video está en nuestra computadora buscamos el video, lo abrimos con un reproductor y buscamos en la Información de los codec la resolución del video (en el VLC por ejemplo esto se puede encontrar desde la pestaña de Herramientas)

si el video que incrustaremos será desde internet es recomendable seguir la resolución en la que se quiere obtener

Esos datos de la resolución irán en los primeros dos casilleros de Ancho x Alto. Lo que sigue es rellenar el MIME Type/Tipo de MIME, es decir si el elemento que incrustaremos es audio o video y qué extensión posee (ejemplo: Video/ogg). Y finalmente rellenamos File or URL/ Archivo o URL: aquí ponemos el nombre exacto del archivo con la extensión correspondiente o bien la dirección URL donde se encuentra alojado el video que queremos reproducir. Damos a Aplicar y cerramos. Nota: los videos deben estar en formatos libres .ogv, .oga, .ogx, .ogg para poder visionarlos dentro de la presentación, de lo contrario conviene enlazarlo a la URL correspondiente.

Así ya tendremos nuestro video incorporado y para verlo en la presentación solo tenemos que realizar los pasos anteriores: en la capa control creamos un rectángulo, vamos a Extenciones – Sozi – Nuevo Cuadro y ¡listo!

Ahora sí, una vez finalizada la presentación vamos a guardarla yendo a Archivo – Guardar – Nombre-del-archivo.svg. Para ver la presentación simplemente abrimos nuestro navegador de preferencia y arrastramos el archivo .svg hasta una ventana (aunque no necesita internet para poder ser utilizado, sí se requiere de un navegador instalado en la computadora para poder visualizarlo) Nota: Las presentaciones creadas con Sozi pueden visualizarse en la mayoría de los navegadores actuales sin problemas porque no usa Flash (podemos usar Firefox, Chrome, Safari, Opera -no así en Internet Explorer que una vez más se autoexcluye-).

Recordatorios finales: pasar todo el contenido a vectores/path; cerrar el ojito de la capa de control y animarse a probar cosas en cada diapositiva (otra de las ventajas es que pueden volver sobre cada una de ellas para cambiar sus opciones tantas veces como deseen).

Las presentaciones se pueden enlazar (como enlazaríamos cualquier otro elemento) y también incrustar con los siguientes comandos en la parte html de nuestra entrada:

<center>
<iframe width="640px" height="480px" src="http://url-donde-esté-subida-la-presentación.svg">
</iframe></center>

La presentación puede descargarse aquí.

@sursiendo