2.3 Presentador DZSslides

Haz clic sobre la primera diapositiva y luego usa las teclas de desplazamiento del teclado. Puedes presionar la letra f (full), para ver la presentación en pantalla completa.

Excelente presentador con características especiales que describiremos a continuación. Hacemos copia de la licencia (https://github.com/paulrouget/dzslides).

Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed (Do what the fuck you want to public license terms and conditions for copying, distribution and modification).

Resumiendo... puedes hacer lo que quieras con la licencia.

Ademas de las teclas de desplazamiento, el presentador también responde a las teclas "inicio" y "fin".

Similar al presentador Deck.js, una sección <section> es una diapositiva. Su tamaño es de 800x600 encapsuladas en un marco… todos los cambios, incluido el resize se hacen en el marco. Describimos solamente algunas diapositivas que tengan algo novedoso (recuerda abrir el archivo index.html con el editor de textos planos).

Primera diapositiva. Incluye un pie de página <footer>

Observa, en la página anterior, el diseño resultante al usar estas dos etiquetas.

Segunda diapositiva. Esta diapositiva sólo usa la etiqueta párrafo <p>.

Es posible que no estés satisfecho con el tamaño de la letra, por lo que puedes intervenir la hoja de estilos; por ejemplo, para la etiqueta párrafo, en la línea 131 del archivo index.html, puedes cambiar el tamaño de la fuente que, inicialmente, es de 50px.

Tercera diapositiva. Hemos incluido un objeto interactivo del Proyecto Canals que, pese a su tamaño, el presentador lo ajusta al marco. En este caso hemos usado un objeto que se encuentra en una de las carpetas del libro.

Diapositivas con imágenes. Estas diapositivas tienen una caracteristica especial, en tanto que permite usar una etiqueta <figure> para escalar las imágenes al tamaño del marco 800x600, lo que obliga a utilizar imágenes cercanas a este valor o de tamaño superior para evitar distorsiones; sin embargo, si tu diseño exige que la imagen se presente en un tamaño menor, sólo debes eliminar esta etiqueta adicional. En nuestro ejemplo, hemos usado dos imágenes, una de formato jpg y otra en png.

Diapositivas con vídeos. En esta diapositiva se usa el formato HML5 para vídeos <video>. Siempre que se use formatos de vídeo webm o mp4, se contará con las siguentes ventajas: ejecución automática, detención del vídeo cuando se pasa a otra diapositiva, reanudación cuando se regresa a la diapositiva. Se pueden hacer comparaciones con el vídeo YouTube incluido en la presentación y los dos vídeos webm y mp4.

Se podrá notar que el sonido del vídeo YouTube se seguirá escuchando cuando se pasa a otra diapositiva, advirtiendo que aún se está reproduciendo.

En la siguiente escena iteractiva, diseñada con DescartesJS, puedes comprobar la ventaja enunciada. La escena tiene enlaces a vídeos en formato mp4, webm y ogv, este último no es reconocido por DZSlides.

Otra característica interesante de DZSlides es que tanto el CSS como JavaScript ya están incluidos en el archivo, lo que facilita su manejo para el diseño de nuestras diapositivas. La navegación básica por teclado es compatible con controles táctiles compatibles con dispositivos móviles (Hipp, 2019).

En el siguiente vídeo puedes observar un resumen de lo explicado en este apartado y el funcionamiento del presentador.