Impress.js en WordPress de forma fácil gracias al plugin imPress

Impress.js demoEste tutorial versa sobre crear presentaciones basadas en la libreria impress.js en WordPress sin necesidad de conocimientos de programación.

Impress.js es una aplicación que permite crear presentaciones con animaciones 3D, basadas en transformaciones con CSS3. Si todavía no conoces Impress.js, te recomiendo ver primero la demo oficial (http://bartaz.github.io/impress.js/#/bored)

Si utilizas WordPress, implementar esta librería para crear presentaciones es muy sencillo, gracias al plugin gratuito imPress Lo primero es descargarse el plugin del repositorio oficial, o instalarlo mediante el menú de WordPress, “añadir plugin”. Buscamos imPress, lo instalamos y activamos.

Una vez activado, en el menú de la izquierda, aparecerá una nueva pestaña llamada Impress

Tutorial impress  plugin para WordPress

Antes de comenzar  debemos crear una página donde irá la presentación. Para ellos vamos a “Páginas” y creamos una  página en Worpress a la que podemos llamar “Pagina de impress”. A continuación vamos a la pestaña Impress, a “settings” y en “Getting started” seleccionamos la página creada.

Tutorial impress  plugin para WordPress

Ahora, para situarnos, veamos las distintas opciones del plugin.  Comenzamos con el diseño de las diapositivas, para ello vamos a la pestaña de “Impress” a  “settings”, y a “Design”, aquí es donde realizaremos los ajustes de apariencia que queramos.

Tutorial impress  plugin para WordPress

Type color: escogemos el color del texto

Color Gradient Option; podemos escoger dos colores para aplicar un gradiente de color, si sólo quieres un color, pon el mismo en las dos opciones.  (en Type escogemos el tipo de gradiente, linear si queremos que el gradiente comience con un color arriba y se vaya degradando hasta abajo, o radius si queremos que comience con un color circular en el centro y se degrade al alejarse del círculo central)

Choose Typeface: escogemos el tipo de fuente que queramos para el texto.

Debajo de Design se encuentra una pestaña llamada “Header/Footer”, esta pestaña sirve para insertar una cabecera o pie de página en todas las diapositivas mediante código HTML.

Las otras dos pestañas que nos quedan por ver son “Order”, que servirá para ordenar las diapositivas que vayamos creando, y la pestaña “Impress” que sirve para ver todas las diapositivas creadas y poder editarlas. Ahora que ya hemos visto las opciones del plugin, vamos a lo divertido.

Para comenzar a crear  la presentación,  hacemos click en el menú de la izquierda donde pone “Add new” y creamos la primera diapositiva.

En Title  ponemos un nombre administrativo para identificar esa diapositiva, por ejemplo a la primera podemos llamarle inicio. (Este título no se muestra al menos que indiquemos lo contrario, seleccionando la casilla “Show the title”.)

Tutorial impress  plugin para WordPress

En el cuerpo escribimos el texto, y a continuación viene lo divertido y más complicado, situar cada diapositiva en el plano y darle la animación.

Un consejo, el primer paso debería ser crear la presentación en un papel para situar todas las diapositivas que necesitemos, y  a continuación crearlas en WordPress situándolas en el plano mediante los ejes X, Y, y Z de forma que no se solapen unas con otras.

Tutorial impress  plugin para WordPress

Muy importante, marcar la opción “Overide Spatial Settings” para que tenga en cuenta los valores que estáis indicando, sino cogerá los valores que están establecidos por defecto en settings.

El eje X es el eje horizontal, y el  Y el vertical. Z es una tercera dimensión que sirve para dar profundidad, para alejar o acercar. La esquina superior izquierda sería el punto 0,0  Por ejemplo un  X2000 desplaza el centro de la diapositiva 2000px hacia la derecha, y un Y1000 lo desplaza 1000px hacia abajo. (Se pueden utilizar valores negativos) (Para una mejor comprensión podéis consultar  el manual de W3schools sobre el elemento canvas del nuevo HTML5)

En los ejes rotate, escogemos los grados que queremos rotar la diapositiva.

En scale indicamos la escala de la diapositiva, esto sirve para hacer zoom. Por ejemplo, si todas las diapositivas tienen escala 1, y a otra le asignamos scale=3, esa diapositiva se verá más grande que las otras, y seguramente cuando la visualices, se verán el resto de diapositivas de fondo en pequeño.

Si quieres que al entrar en la página comience la presentación, puedes seleccionar como página de inicio la página de impress, para lo que debes ir a “Ajustes” a “Lectura” y en Página frontal muestra, seleccionar página estática y en el desplegable seleccionar la página que has creado para impress.

Hasta aquí este pequeño tutorial sobre el plugin imPress, espero que si has llegado hasta aquí te sirva de ayuda, si tienes cualquier duda puedes utilizar los comentarios.


Opina

*

Blog personal Miguel Molina Alen | Psicología, Marketing, Actualidad TIC

Utilizamos cookies para ofrecer mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de nuestra política de cookies, pinche el enlace para más información. ACEPTAR

Aviso de cookies