Cómo crear presentaciones de Impress.js en Linux

Hay muchas maneras diferentes de crear diapositivas para una presentación en Linux. Puede utilizar 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 usted utiliza a través de las suites mencionadas anteriormente (o una aplicación de visualización) 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 ejecute en un navegador web, una presentación construida usando HTML, Javascript y CSS? Gracias a impress.js, usted puede!

impress.js es un potente 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 advertencia antes de continuar, usar impress.js en su forma cruda se trata de crear archivos usando editores de texto y escribiendo manualmente el HTML. No hay ningún GUI elegante aquí, no WYSIWYG.

Nota : Aunque el tutorial que se muestra aquí se realiza en una plataforma Linux, los pasos son los mismos independientemente de la plataforma OS que esté utilizando. Impress.js es un script basado en web y es compatible con varias plataformas.

Para empezar, descargue impress.js de github . La forma más sencilla es ejecutar el siguiente comando desde la línea de comandos:

wgethttps://github.com/bartaz/impress.js/archive/master.zip

Y bájale la cremallera:

unzip master.zip

Dentro de la carpeta «impress.js-master», hay dos subcarpetas – CSS y JS, que contienen los archivos CSS y Javascript de impress.js respectivamente. En realidad no es necesario profundizar en la carpeta Javascript, sin embargo, la carpeta CSS contiene el archivo CSS de demostración que puede que desee modificar para sus propias presentaciones. También encontrará un ejemplo de presentación impress.js en el archivo index.html. Esto abrirá su navegador web predeterminado (con suerte, ya sea Firefox o Chrome) e iniciará la presentación.

Cómo crear presentaciones de Impress.js en Linux


He aquí cómo construir una presentación sencilla basada en el archivo CSS de ejemplo («css/impress-demo.css») suministrado con impress.js. Cree un archivo HTML utilizando un editor de texto. Puede usar un editor de texto como gEdit, o puede crearlo usando nano en la línea de comandos de esta manera:

nano demo1.html

Inserte el siguiente código en el archivo y, a continuación, guarde y salga (CTRL-X).

/ font color="#fefefe">#fefefe
DIFUNDE LA PALABRA-


All about impress.js / i>
impress.js es un poderoso marco de presentación de CSS y Javascript.

All about impress.js / i>
Proporciona todas las librerías y archivos CSS necesarios
para crear presentaciones complejas y visualmente inspiradoras usando HTML

All about impress.js / i>
Más información en http://bartaz.github.io/impress.js



impress.init.init.

/ i> / i> / i&gt.

Todos los archivos HTML se dividen en secciones que comienzan con una etiqueta de apertura (por ejemplo, ). Dentro de la sección "" la etiqueta "" define qué archivo CSS debe utilizarse (es decir, css/impress-demo.css). A medida que avances con impress.js, tendrás que crear tu propio archivo CSS.

En la sección de "cuerpo", hay una sección con la identificación de "impresionar". Aquí es donde impress.js espera encontrar las diapositivas. Cada diapositiva se llama "paso" y debe usar la clase "paso". En el ejemplo anterior, hay tres diapositivas, cada una marcada con una con la clase de "diapositiva escalonada".

Cada diapositiva tiene un atributo data-x y data-y que define la posición de las diapositivas. El valor de y permanece igual para los tres carros, 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 avance la presentación. Cambiando los valores de x y y puede conseguir que las diapositivas hagan la transición en cualquier 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 dentro de Nautilus.

Cómo crear presentaciones de Impress.js en Linux


Las transiciones de impress.js también pueden incluir rotación. Añada esta diapositiva a su presentación:

All about impress.js / i>
¡Rotación!
/ i&gt.

El atributo data-rotate le dice a impress.js que rote la vista en 90 grados durante la transición. El valor es absoluto, así 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.

Otro atributo interesante es la escala de datos (es decir, el zoom). Esto puede dar a su presentación un estilo 3D al acercarse y alejarse del lienzo a medida que avanza la presentación.

Para ver el efecto de zoom, agregue la siguiente diapositiva a su presentación:

Zoom, además esto no parece una diapositiva.
/ i&gt.

Hay algunas cosas que vale la pena notar acerca de esta última diapositiva. Primero omite la clase "slide". Esto significa que la diapositiva se presentará sin el fondo blanco definido en el archivo CSS de ejemplo. Segundo, anote los valores de rotación y escala de datos. El atributo data-rotate 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 su aspecto, pruebe la presentación en su navegador.

Ahora que ha dominado algunas diapositivas simples, intente leer index.html y "css/impress-demo.css" para ver cómo se construye la demo. El archivo index.html tiene abundantes comentarios para guiarte a través de los diversos elementos y clases.

Si tiene alguna pregunta sobre los ejemplos anteriores, por favor utilice la sección de comentarios de abajo y veremos si podemos ayudarle.

Fuente: este post proviene de Vida Tecno, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: Linux

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

Herramientas y consejos Emprendedores imágenes ...

¿Utilizas presentaciones en tus reuniones de venta o en tu oficina? ¿Te gustaría crear infografías  para tu blog? ¿Y si te dijéramos que exsite una herramienta que te ayudará a hacer ambas cosas, crear infografías y presentaciones, y mucho más? Su nombre es Visme y, con ella, tendrás la oportunidad de crear cualquier tipo de contenido atractivo, como pancartas, informes, diapositivas e imágenes de ...

rendimiento

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

Tecnología e Internet

Cómo transmitir una presentación de PowerPoint desde tu móvil En estos tiempos, nuestro teléfono móvil es una de las herramientas de trabajo más poderosas. Tenemos la agenda, el calendario, incluso informes empresariales importantes todo en la palma de nuestra mano. Ahora, probablemente te has preguntado alguna vez si también es posible hacer presentaciones de PowerPoint desde un teléfono móvil, y ...

propuestas

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...

general

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...

Sin categoría

Como ya hemos comentado otras veces, si eres capaz de programar en WordPress y en la web en general, accedes a otra dimensión de posibilidades para tu proyecto online. Imagen de Fotolia - ©Digiclack Esto es así porque saber programar fulmina todas las barreras que te puedas encontrar en el desarrollo de tu proyecto online, ya no dependerás del plugin X para hacer tal cosa o de encontrar el tema Y ...

desde0

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

informática desarrollo android

Este artículo te explicará el uso del Navigation Drawer en Android para crear una navegación a través de un Menú deslizante. Verás como implementar un Drawer Layout para el diseño. Aprenderás a manejar los eventos relacionados. Y también a complementar su funcionamiento con la action bar mediante un Action Bar Drawer Toggle. CONTENIDO ¿Cómo crear un menú deslizante con un Navigation Drawer? Ejem ...

general propuestas

Muchos usuarios de Blogger se plantean la posibilidad de complementar su Blog con la posibilidad de ofrecer descarga de archivos con información suplementaria a sus contenidos. Desde recetas a manuales de instrucciones, cursos, fotografías, poesías, escritos... las posibilidades de ofrecer a tus seguidores un valor añadido que pueda serles útil siempre ofrece muy buenos resultados. Vamos a ver con ...

Linux

MakeTechEasier.com está explorando la posibilidad de crear screencasts para nuestros usuarios, de modo que podamos visualizar rápidamente algunos de los tutoriales que podrían tener más sentido en un formato de vídeo. Al investigar esto, encontramos una gran cantidad de software para la grabación de escritorio. Estos programas pueden diferir ampliamente en características como la calidad de vídeo, ...