comunidades

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

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 ...

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 ...

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 ...

Linux

Sería estupendo que existiera una versión Linux del popular Dreamweaver CS3 , o que se pudiera instalar fácilmente a través de WINE. La verdad es que nada de lo anterior funciona. No existe una versión para Linux, ni funcionará a través de la instalación directa de WINE. La única forma de hacer que funcione es portarlo desde una instalación de Windows. Si usted es nuevo en Dreamweaver CS3, es uno ...

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 ...

Muchos usuarios de Linux, incluso los más nuevos, adoran Linux porque es altamente personalizable. KDE en particular es un entorno de escritorio que es muy fácil y divertido de personalizar, ya sea que desee tres paneles y una presentación rotativa de diapositivas de fotos de fondos de pantalla de sus vacaciones en Perú, o simplemente quiere asegurarse de que los archivos de texto siempre se abren ...

Linux

¿Alguna vez ha querido ocultar un archivo o una carpeta en su sistema de archivos Linux pero no tiene idea de cómo hacerlo? No se preocupe, esto no es tan complicado como parece y se puede hacer con bastante rapidez y eficiencia. En esta guía repasaremos las formas más sencillas de ocultar archivos y carpetas en Linux. Además de ocultar cosas, veremos cómo revelar estos elementos ocultos tanto en ...

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 ...

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 ...