impress.js[/caption]impress.js es una herramienta para crear presentaciones con el poder de CSS3 transforms y transitions en navegadores modernos e inspirado en la idea de prezi.
Necesitas tener mucho conocimiento de HTML y CSS para poder usar impress.js efectivamente. y algo mas importante, necesitas ser diseñador tambien, porque las presentaciondes de impress.js no traen estilos por defecto, no hay ningun layout automatico para ellos...
Necesitas diseñar y construir esto a mano. entonces... ¿Todavia te gustaria saber como usar impress.js?
HTML
Debes tener en cuenta, que para comenzar tu codigo HTML debes comenzarla con la etiqueta
<!doctype html>
ya que impress.js trabaja con html5, si no empiezas el documento como html5, no funcionará.
Impress.js no depende de ninguna hoja de estilo externa. El script añade todo el estilo necesario para que la presentación funcione.
El estilo que utilizaremos es solo un demo (desde la web del autor ya que el ejemplo, es igual, solo que traducido), mas que todo para ver como darle estilos a los steps de las presentaciones.
Se creativo, construye uno propio. Nosotros no buscamos que todas las presentaciondes con impress.js luzcan igual verdad?
Al crear su propia presentación puedes deshacerte de este archivo. Empezar desde cero, es divertido!
<link href="css/impress-demo.css" rel="stylesheet" />
El elemento body es usado por impress.js para establecer algunos nombres de las clases que utiliza, que permitira detectar el apoyo y el estado de la presentacion CSS u otros scripts.
El primer y muy util nombre de clase es el `impress-not-supported`. Esta clase dice, que navegador no soporta las caracteristicas requeridas por impress.js, entonces, puedes aplicar algun estilo fallback en tu CSS. No es necesario añadir manualmente esto en el elemento. Si el script detecta que el navegador no es muy bueno el agregara la clase, pero añadir esto al HTML, hara que un usuario sin JavaScript pueda tener un estilo Fallback.
Cuando impress.js detecta que el navegador no soporta las caracteristicas requeridas, esta nombre de la clase sera removida.
El nombre de la clase en el elemento cuerpo, tambien depende de la presentacion activa en el momento.
<body class="impress-not-supported">
Por ejemplo, este mensaje fallback sera solo visible cuando la clase `impress-not-supported` esté en el cuerpo.
<div class="fallback-message">
<p>tu navegador <b>no soporta las caracteristicas requeridas</b> por impress.js.</p>
<p>para una mejor experiencia, por favor utiliza la version mas reciente de <b>Chrome</b>,<b>Safari</b> o <b>Firefox</b></p>
</div>
Este es el elemento nucleo usado por impress.js.
Esta sera la envoltura de cada steps de tu presentacion. En este elemento toda la magia de impress.js sucede. No tiene porque se un <div>. solo el "ID" es importante aqui, ya que asi es como el script lo encuentra.
Probablemente no vas a necesitar esto ahora, pero aqui estan unas opciones de configuracion que pueden usarse en estos elementos.
Para cambiar la duracion de la transición entre los slides, usa `data-transition-duration="2000"` dandole a esto, un numero de ms. por defecto vendra a 1000 (1s).
puedes tambien controlar la perspectiva con `data-perspective="500"` dandole a esto un número
nde pixeles, por defecto esta en 1000. puedes establecerlo en 0 si no buscas ningun efecto 3D. Si estas pensando en cambiar este valor, asegurate de entender como funciona la perspectiva en CSS
pero como dije, no necesitas esto por ahora, entonces no te preocupes aqui hay simples, pero interesantes cosas con respecto a este tag.
<div id="impress">
Aqui es donde comienzan las cosas interesantes.
Cada paso de la presentacion debe ser un elemento dentro de `#impress` con un nombre de clase de `step`. Este elemento step esta posicionado rotado y escalado por impress.js y la camara los muestra en cada step de la presentacion.
La informacion del posicionamiento se pasa a traves de los atributos de datos.
en el ejemplo solo especificaremos "x" y "y" y la posicion de cada elemento step con los atributos `data-x="-1000"` y `data-y="-1500`. esto quiere decir que "el centro" de los elementos (si, el centro) sera posicionado en el punto x= -1000px y y= -1500px de la presentacion 'canvas'
esta no sera rotada ni escalada
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>No estas simplemente <b>aburrid@</b> con todas esas presentacions de slides basicos</q>
</div>
El atributo ID de el elemento step es usado para identificarlo en la url, pero es opcional. si no esta definido, este obtendrá un valor por defecto de 'step-N' es un numero de slide.
por lo tanto en el ejemplo debajo de esto, será ''step-2". La parte hash de la url cuando este step esté activo será '#/step-2'.
Tambien puedes usar '#step-2' en un link, para colocarlo directamente en este step. Por favor, nota que mientras '#/step-2' (con slash) tambien funcionaria, no es recomendado. usando el clasico 'id' - based links como '#step-2' hace estos link utiles en el modo fallback.
<div class="step slide" data-x="0" data-y="-1500">
<q>No piensas que las presentaciones <strong>en navegadores modernos</strong> deberian ser mejores?<strong>copiando los limites</strong> de las clasicas cubiertas de slides.</q>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>Te gustaria <strong>impresionar tu audiencia</strong>con <strong>impresionantes visualizaciones</strong> de tu charla?</q>
</div>
Este es un ejemplo de un elemento step siendo escalado. De nuevo, usamos el atributo 'data-' , pero esta vez es `data-scale="4"` esto quiere decir que este elemento será 4 veces mayor que los otros.
hablando de la presentación y el punto de vista de las transiciones significa que, tendrá que ser reducido (4 veces) para poder volver a su tamaño correcto.
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">Entonces puedes intentar</span>
<h1>impress.js<sup>*</sup></h1>
<span class="footnote"><sup>*</sup> Sin rima ninguna</span>
</div>
Este elemento tiene rotación. La notación no debería ser una sorpresa. Nosotros utilizamos el atributo 'data-rotate="90"', lo que significa que este elemento debe ser rotado 90 grados en sentido horario.
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>Esta es una<strong> herramienta para presentaciones</
nstrong> <br/>
inspirado en la idea de <a href="http://prezi.com">prezi.com</a> <br/>
y basado en el <strong>poder de CSS3 transforms y transitions</strong> en navegadores modernos.</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>visualiza tus <b>grandes </b> <span class="thoughts">pensamientos</span></p>
</div>
Y ahora esto se pone de verdad excitante! ahora movemos esto en Tercera Dimension. Junto con 'data-x' y 'data-y' puedes definir la posicion en un tercer eje (z), con 'data-z'. en el ejemplo usamos 'data-z=".3000"' lo que significa que el elemento puede estar posicionado a unos 3000 pixeles de nosotros.
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>y <b>pequeñas</b> ideas</p>
</div>
Este paso aquí no introduce nada nuevo cuando se trata de los atributos de datos, pero debes notar en la demostración de que algunas palabras de este texto se están animando. Es una transición CSS muy básica que se aplica a los elementos cuando este step es alcanzado.
En el comienzo de la presentación de todos los elementos step se les da la clase de 'future'. Esto significa que no han sido visitados todavía. Cuando la presentación se mueve a un paso dado el nombre de la clase 'future' se cambia a 'present'. Así es como la animación en este paso funciona - el texto se mueve cuando el step cambia el nombre de la clase a 'present'
Finalmente, cuando el step deja el `present` la clase se retira del elemento y la clase `past` se añade. Así que, básicamente todos los elementos step tienen una de tres clases: `future`, `present` o `past`. Pero sólo el step actual tiene la clase `present`.
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>mediante <b class="positioning">positioning</b>, <b class="rotating">rotating</b> y <bclass="scaling">scaling.</b> Esto, en un canvas infinito</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>El unico <b>limite</b> es tu <b class="imagination">imaginacion</b></p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>quieres saber mas?</p>
<q><a href="http://github.com/bartaz/impress.js">usa el codigo</a>, Luke!</q>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>una cosa mas...</p>
</div>
Y la última muestra del poder y la flexibilidad de impress.js. Usted puede no sólo posicionar el elemento en 3D, sino que también girar alrededor de cualquier eje. Así que esto de aquí obtendrá rotacion en -40 grados (40 grados en sentido antihorario) alrededor del eje X y 10 grados (sentido horario) alrededor del eje Y. Por supuesto, puedes hacerla girar alrededor del eje Z con 'data-rotate-z' -que tiene exactamente el mismo efecto que 'data-rotation' (estos dos son básicamente los mismos).
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">sabias </span> <span class="you">t�, </span> <span class="noticed">que</span> <span class="its">esto es</span> <span class="in">en </span> <b>3D<sup>*</sup></b>?</p>
<span class="footnote">* toma eso, prezi ;)</span>
</div>
Así que para hacer un resumen de todos los atributos posibles que
nsirven para colocar los steps de la presentación, tenemos:
- "data-x", "data-y", "data-z" - estos definen la posicion del centro en pixeles del elemento step en el canvas; Su valor inicial es 0
- "data-rotate-x", "data-rotate-y", "data-rotate-z", "data-rotate" - estos definen la rotacion de el elemento en grados alrededor de los ejes; su valor inicial es 0 "data-rotate" y "data-rotate-z" son exactamente los mismos.
- "data-scale" - define el scale de el elemento step; su valor inicial es 1.
Estos valores son usados por impress.js en las funciones de transformacion CSS, asi que para mas informacion consulta CSS transform docs.
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
"hint" no está relacionado con impress.js de ninguna manera. Sin embargo, le puede mostrar cómo utilizar las funciones impress.js en forma creativa. Cuando el step de presentación se muestra (selected) su elemento obtiene la clase de "active" y el elemento de cuerpo se basa en la clase Identificación del step activo "impress-on-ID" (donde ID es el id del step)... Tal vez no sea tan clara, debido a todos estos "IDs" en la frase anterior, por ejemplo, cuando el primer step (el unico con el ID de "bored") está activo, el elemento del cuerpo recibe una clase de "impress-on-bored". Esta clase la utiliza este "hint" a continuación. Compruebe el archivo CSS para ver cómo se muestra con retraso en la animación CSS cuando el primer step de la presentación es visible durante un par de segundos. Y cuando se trata de este fragmento de código JavaScript a continuación, (los niños, no hagan esto en casa) Es una solución rápida y sucia para obtener texto de sugerencia distinta para los dispositivos táctiles. En un mundo real debe ser por lo menos en distintos archivo JS... y el contenido de touch debe estar probablemente sólo oculta en algún lugar de HTML - no codificado en la secuencia de comandos.
<div class="hint">
<p>Usa la barra espaciadora o las flechas para navegar</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Toque a la izquierda o derecha para navegar</p>";
}
</script>
Por último, pero no menos importante. Para que todo lo que se ha descrito anteriormente funcione realmente, es necesario incluir impress.js en la página. De aquí me basta con incluir la fuente completa de la secuencia de comandos para que sea más legible. Tambien es necesario llamar a `impress().init()` para inicializar la función de presentación impress.js. Y debe hacerlo en el final de su documento. No sólo porque es una buena práctica, sino también porque se debe hacer cuando todo el documento está listo. Por supuesto que se puede envolver en cualquier tipo de evento "DOM ready", pero yo estaba demasiado perezoso para hacerlo ;)
<script src="js/impress.js"></script>
<script>impress().init();</script>
Y eso es todo.!! Espero puedan hacer magnificas presentaciones con impress.js
Resultado: Ver Archivos: Descargar
