Hay muchas formas diferentes de crear diapositivas para una presentación en Linux. Puede usar OpenOffice, LibreOffice o incluso Microsoft Office (a través de Wine). Su presentación completa será un archivo .odp (formato OpenDocument) o .ppt (formato Powerpoint), que utilizará a través de las suites mencionadas anteriormente (o una aplicación de visor) para realizar su presentación. Sin el software correcto instalado, la presentación no se puede ver. ¿No sería genial si pudieras crear una presentación que se ejecuta en un navegador web, una presentación creada con HTML, Javascript y CSS? ¡Gracias a impress.js, puedes!
impress.js es un poderoso marco de presentación de CSS y Javascript. Proporciona todas las bibliotecas y archivos CSS necesarios para crear presentaciones complejas y visualmente inspiradoras usando HTML. Pero una palabra de advertencia antes de continuar, el uso de impress.js en su forma original se trata de crear archivos usando editores de texto y escribir manualmente el HTML. Aquí no hay una interfaz gráfica de usuario sofisticada, ni WYSIWYG.
Nota: Si bien el tutorial que se muestra aquí se realiza en una plataforma Linux, los pasos son los mismos independientemente de la plataforma del sistema operativo que esté utilizando. Impress.js es un script basado en la web y es compatible con varias plataformas.
Para empezar, descarga impresionar.js de github. La forma más sencilla es ejecutar el siguiente comando desde la línea de comandos:
wget https://github.com/bartaz/impress.js/archive/master.zip
Y descomprímelo:
Dentro de la carpeta «impress.js-master», hay dos subcarpetas: CSS y JS, que contienen los archivos CSS y Javascript de impress.js, respectivamente. Realmente no necesita profundizar en la carpeta Javascript, sin embargo, la carpeta CSS contiene el archivo CSS de demostración que puede modificar para sus propias presentaciones. También encontrará un ejemplo de presentación de impress.js en el archivo index.html. Con Nautilus, abra la carpeta «impress.js-master» y haga doble clic en index.html. Esto abrirá su navegador web predeterminado (con suerte, ya sea Firefox o Chrome) y comenzará la presentación.
Aquí se explica cómo crear una presentación simple basada en el archivo CSS de ejemplo («css/impress-demo.css») suministrado con impress.js. Cree un archivo HTML utilizando un editor de texto. Es posible que desee usar un editor de texto como gEdit, o puede crearlo usando nano en la línea de comando de esta manera:
Inserte el siguiente código en el archivo y luego guarde y salga (CTRL-X).
<html lang="en">
<title>All about impress.js</title>
<link href="css/impress-demo.css" rel="stylesheet" />
<body>
<div id="impress">
<div class="step slide" data-x="-1000" data-y="-1000">
<b>All about impress.js</b>
<q>impress.js is a powerful CSS and Javascript presentation framework.
</div>
<div class="step slide" data-x="0" data-y="0">
<b>All about impress.js</b>
<q>It provides all the libraries and CSS files needed
to create complex and visually inspiring presentations using HTML
</div>
<div class="step slide" data-x="1000" data-y="1000">
<b>All about impress.js</b>
<q>Find out more at https://bartaz.github.io/impress.js
</div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
Todos los archivos HTML se dividen en secciones que comienzan con una etiqueta de apertura (p. ej., ) y se cierran con la misma etiqueta pero con una barra diagonal añadida (p. ej., ). Dentro de la sección “”, la etiqueta “ ” define qué archivo CSS debe usarse (es decir, css/impress-demo.css). A medida que avance con impress.js, deberá crear su propio archivo CSS.
En la sección , hay una sección
Cada diapositiva tiene un atributo data-x y data-y que define la posición de las diapositivas. El valor de y sigue siendo el mismo para las tres diapositivas, pero el valor de x cambia. Comienza con -1000 y luego pasa a 0 y finalmente a 1000. El resultado es que las diapositivas se moverán de izquierda a derecha a medida que avanza la presentación. Al cambiar los valores de x e y, puede hacer que las diapositivas cambien en la dirección que desee.
Al final del archivo HTML hay dos líneas que cargan el script impress.js y luego inicializan la biblioteca impress.js (por ejemplo, impress().init).
Para probar el archivo, haga doble clic en demo1.html desde Nautilus.
Las transiciones de impress.js también pueden incluir rotación. Agregue esta diapositiva a su presentación:
<div class="step slide" data-x="2000" data-y="3000" data-rotate="90"> <b>All about impress.js</b> <q>Rotation! </div>
El atributo de rotación de datos le dice a impress.js que gire la ventana gráfica 90 grados durante la transición. El valor es absoluto, por lo que otra diapositiva con el valor de 90 no rotará si la diapositiva anterior tenía una rotación de datos de 90. Pruebe la nueva presentación en su navegador web.
Otro atributo interesante es la escala de datos (es decir, el zoom). Esto puede darle a su presentación un estilo 3D al acercar y alejar el lienzo a medida que avanza la presentación.
Para ver el efecto de zoom, agregue la siguiente diapositiva a su presentación:
<div class="step" data-x="5000" data-y="4000" data-rotate="0" data-scale="3"> <q>Zoom, plus this doesn't look like a slide </div>
Hay algunas cosas que vale la pena señalar sobre esta última diapositiva. Primero omite la clase «diapositiva». Esto significa que la diapositiva se presentará sin el fondo blanco como se define en el archivo CSS de ejemplo. En segundo lugar, tenga en cuenta los valores de data-rotate y data-scale. El atributo de rotación de datos devuelve el lienzo a 0 grados (desde la rotación de 90 grados en la diapositiva anterior). El atributo de escala de datos hace que impress.js realice un zoom durante la transición. Para ver cómo se ve, pruebe la presentación en su navegador.
Ahora que domina algunas diapositivas simples, intente leer index.html y «css/impress-demo.css» para ver cómo se construye la demostración. El archivo index.html tiene abundantes comentarios para guiarlo a través de los diversos elementos y clases.
Si tiene alguna pregunta sobre los ejemplos dados anteriormente, utilice la sección de comentarios a continuación y veremos si podemos ayudarlo.