jueves, 15 de noviembre de 2012

Crear presentaciones con html5

crear presentaciones con html5
 Me ha surgido la necesidad de crear una presentación en inglés, el caso es que no tengo instalado el PowerPoint, no se si habrá alguna versión para linux, mirando un poco por la nube, he encontrado que existe el Power Point viewer, pero como su nombre indica, no creo que deje crearlas, tampoco voy a instalarme dicho programa en la máquina virtual, cuando luego no le voy a dar uso. Y la pregunta que me hago es, después de estar todo el día programando, con las mejoras que trae el HTML 5, ¿sería muy complicado crear algunas funciones con jQuery y CSS para crear efectos que simulen las presentaciones?
Oh...wait... antes de nada, vamos a mirar un poco por Google, que seguro que alguién que tuviese que hacer varias presentaciones ya lo ha pensado... Efectivamente, hay ya creadas varias librerías creadas con propósito.

Explico aquí un poco lo que he encontrado:

Impress.js
Es el que más me ha llamado la atención y más me ha impresionado, ahora entiendo el porqué del nombre, vamos que me ha impactado, siendo posible crear efectos 3D, es un framework de javascript que hace uso de las mejoras de CSS 3 a nivel de efectos en las animaciones. No hace falta recordar que, para que se vean dichas animaciones, se debe usar un navegador que soporte el CSS3 y HTML5. El inconveniente que veo es que no hay estilos ni plantillas definidas, sino que tienes la página en blanco y ahí vas añadiendo a mano las transparencias en el lugar que desees, para que luego te genere el efecto, de tal manera que si éstas las pones muy seguidas, el efecto es pequeño, mientras que alejándolas consigues que el efecto llegue incluso a marear.

Link de ejemplo de presentación aquí
Link de descarga del código fuente aquí

Es el que más me ha llamado la atención por sus efectos visuales, de primeras no parece muy difícil de cambiar los CSS y añadir tus propios efectos, aunque luego haciendo pruebas, el contenido no aparecía donde tocaba y había que pelearse más de la cuenta con los css para que aparezcan centrados. Si entras a la página de http://www.rvl.io, una vez registrado puedes crear la presentación sin necesidad de tocar código fuente, aunque ahí estaríamos en las mismas que con el PowerPoint, las transparencias están separadas en tags llamados section.

Ejemplo aquí: http://lab.hakim.se/reveal-js/
https://github.com/hakimel/reveal.js/tree/master --> descargar la librería reveal.js
http://foundation.zurb.com/docs/reveal.php --> documentation here

Link para descargar el reveal.js aquí.

Google Slides Template
Como no, Google tiene su propia plantilla de presentaciones HTML5. Es bastante más básico comparado con el anterior, Reveal.js. Está restringido a transicciones de diapositivas de derecha a izquierda y efectos de fade-in, aún así, tiene muy buena pinta. Las transparencias están separadas en tags llamados article y parece bastante sencillo añadir nuevos efectos CSS. Link para descargar el Google Slides Template aquí.

http://slides.html5rocks.com/#drag-out -- muy buenos efectos

http://luiscanada.com/blog/pase-de-diapositivas-con-html5/ -- web donde está muy bien explicado
Plantilla de presentaciones de w3c, entiendo que cumplirá los estándares xD. Si dijimos que el anterior era ya algo más básico... este aún le gana, si las comparamos con las anteriores son un poco más sosas, aunque tiene pinta de ser bastante sencillo de usar.

Link de un ejemplo aquí.

Fathom.js
Se basa en jQuery, y está muy clara la documentación, diría que es la más rápida para crear una presentación, quedando bastante decente sin que te quite mucho tiempo. Luego muy buena en relación calidad/tiempo dedicado.

Link de ejemplo aquí
Código fuente aquí

No hay comentarios:

Publicar un comentario