Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

10 alternativas a PowerPoint: crear presentaciones web

¿Quieres crear presentaciones web en HTML5? Existen varios frameworks Javascript con los que podrás crear sorprendentes diapositivas de forma muy sencilla.

Necesitamos crear varias diapositivas para presentar y explicar un tema o trabajo, pero luego queremos colgarla en Internet. Probablemente, la opción más tradicional es utilizar PowerPoint y hacer alguna presentación con él. O quizás con KeyNote, Google Docs o Prezi.

Aunque siempre está bien tener una versión alternativa, o subir un PDF a SlideShare o SpeakerDeck para ir sobre seguro, mi opción favorita suele ser utilizar un framework Javascript para hacer diapositivas basadas en la tecnología nativa de la web: HTML5, CSS3 y Javascript.

Las razones por las que prefiero las presentaciones web son varias, pero se resumen en una: «la potencia de la web, en mis diapositivas»:

  • Puedo utilizar transiciones CSS y animaciones CSS para hacer diapositivas interactivas.
  • Puedo crear formularios interactivos para demostraciones en vivo.
  • Puedo incluir videos de Youtube, Vimeo o mediante etiquetas <video> de HTML5. Idem con audios de SoundCloud o etiquetas <audio>.
  • Puedo incluir código Javascript para interactuar con diapositivas o páginas.
  • Puedo moverme facilmente entre diapositivas o personalizar su funcionamiento.
  • Puedo editar facilmente las diapositivas o corregir errores desde el código fuente.
  • Puedo preparar varios temas (oscuro y claro) y cambiarlos con un solo click.
  • Cualquier navegador moderno las soporta (algunas incluso se adaptan a móviles).
  • Puedo modificar la presentación (erratas, por ejemplo) facilmente si la tengo subida a Internet.

Pero como desarrollar una presentación desde cero podría ser algo tedioso, existen varios frameworks o «librerías» Javascript que facilitan dicha tarea, simplificándolo considerablemente hasta el punto de sólo necesitar saber HTML (o ni siquiera eso).

1. Impress.js

Este es uno de mis frameworks preferidos para crear presentaciones. Impress.js permite crear llamativas presentaciones pudiendo utilizar efectos 2D/3D para movernos entre diapositivas, simplemente indicando con clases las diferentes diapositivas y utilizando algunas opciones y parámetros para movernos en los diferentes ejes X, Y y Z o utilizar otros efectos de transformaciones.

Aunque estas herramientas limitan bastante las posibilidades del framework, Strut editor permite crear diapositivas de una forma más sencilla y visual, siendo compatible con impress.js y con bespoke.js (ver más adelante).

Algunas presentaciones de ejemplo:

Github | Impress.js

2. Reveal.js

Mi segundo framework preferido para crear presentaciones web se llama Reveal.js. Es muy sencillo y práctico, aunque no es tan potente como el anterior. Reveal.js tiene un flujo de diapositivas muy intuitivo, ya que muestra una cruceta en la esquina inferior-derecha donde puedes ver hacia donde te puedes mover en la presentación.

Por defecto, puedes ir avanzando diapositivas en horizontal (hacia la derecha), pero también permite colocar diapositivas en vertical, y así poder organizar mejor los temas de la presentación.

Algunas presentaciones de ejemplo:

Github | Reveal.js

3. Stack.js

Stack.js es una librería minimalista que permite hacer presentaciones basadas en scroll vertical (o alternativamente, con teclado), pasando entre diapositivas cuando la barra lateral llega a la parte superior. Permite diseños responsive (se adapta al tamaño del navegador), ejecutar eventos cuando una diapositiva está visible, entre otras cosas. Ideal para presentaciones minimalistas y elegantes.

Github | Stack.js

4. Flowtime.js

Flowtime.js permite crear presentaciones con un flujo similar al de Reveal.js pero con algunos añadidos como imágenes superpuestas o soporte Parallax nativo. También soporta fragmentos para ir avanzando poco a poco en la misma diapositiva o resaltado de código.

Algunas presentaciones de ejemplo:

Github | Flowtime.js

5. BeSpoke.js

BeSpoke.js se presenta como un micro-framework muy liviano que permite hacer de todo de forma nativa y muy eficiente. Si eres programador de Javascript, este será uno de tus frameworks favoritos, ya que permite modularizar facilmente e ir ampliando el framework para nuestro propio uso. Además, la interfaz resultante es elegante y muy limpia.

Además, incluye una serie de interesantes plugins para aumentar funcionalidades: interacción con el teclado, dispositivos táctiles, listas animadas, enrutado de URLs, re-escalado responsive y barras de progreso, entre muchos otros.

Algunos ejemplos creados con BeSpoke:

Github | BeSpoke.js

6. Slidifier

Slidifier (algo así como «diapositivador») es un sistema para crear presentaciones para vagos. La web nos muestra un área de texto donde podemos escribir código Markdown. A raíz de él, slidifier convierte ese código markdown en una presentación simple, pero totalmente funcional.

Puedes probar el ejemplo que incorpora por defecto Slidifier, o crear uno tu mismo utilizando Markdown y separando las diapositivas con líneas (3 guiones consecutivos). Sólo tienes que pulsar el botón Slidify!: http://www.slidifier.com/slidifier.html

Github | Slidifier

7. Shower (Shwr)

Shower permite crear presentaciones sencillas pero elegantes y muy consistentes. Los temas están separados de la presentación e incluye un tema de material design para los amantes de este estilo de diseño creado por Google.

Algunos ejemplos de Shower:

Github | Shower

8. Deck.js

Deck.js es otro framework para crear presentaciones. Es muy sencillo pero bastante personalizable. En su wiki puedes encontrar algunos temas, extensiones y herramientas para utilizar junto a Deck.js. Necesita jQuery y Modernizr para funcionar.

Presentación de ejemplo utilizando Deck.js: http://imakewebthings.com/deck.js/

Github | Deck.js

9. ScrollDeck.js

Si lo tuyo es ser amigo inseparable de jQuery, ScrollDeck.js es un plugin para jQuery que premite crear presentaciones que permitan hacer scroll a través de sus diapositivas. Puede ser igualmente útil para crear presentaciones como para utilizar en sitios webs donde queremos usar parallax o ciertos efectos de scroll llamativos como se ven en los ejemplos.

Algunos ejemplos de ScrollDeck:

Github | ScrollDeck.js

10. Fathom.js

Por último, tenemos Fathom.js, también para amantes de jQuery, puesto que este entorno simplifica la creación de presentaciones a los diseñadores y desarrolladores web, puesto que sólo tenemos que crear las diapositivas en el HTML, darle estilo con CSS y echar un vistazo a todas las opciones que FathomJS nos brinda para personalizar la presentación desde Javascript; desde pasar diapositivas automáticamente transcurrido un tiempo especificado (y sincronizarla con un audio o video) hasta movernos directamente o hacer scroll hasta una diapositiva concreta.

Algunos ejemplos creados con FathomJS:

Github | Fathom.js

Escrito por Manz, el , en internet. Comentarios recibidos: 3.

3 comentarios de lectores
XDuende
XDuende
1

Ahora, vamos a hacer una presentación de 10 laminas, algo basico, en PowerPoint vs cualquier herramienta que escojas... a ver cual se hace mas rapida y cual puede usar el usuario comun... ¿Cuantos usuarios comunes que usan Excel como un calculadora grande o PowerPoint como un Block de dibujo, pueden escribir codigo?...

Manz
Manz
2

@XDuende: No es una opción para cualquier tipo de usuario, pero los resultados de cada una tampoco son equivalentes. Muchas veces, el PowerPoint es suficiente, otras veces, no. :-) Como casi siempre, lo bueno es tener alternativas.

  • 1
Iván
Iván
3

Conocía las maravillas en cuestión de efectos que se pueden hacer combinando CSS y Javascript, pero nunca me había puesto a buscar librerías que permitiesen trabajar presentaciones. Me ha gustado mucho la primera, impress.js, con la que seguramente juegue un poco en los próximos días. @XDuende: Creo que no debemos entender este tipo de opciones como para el usuario común o para el experto. Si es cierto que normalmente la gente utiliza el MS PowerPoint, también es cierto que la gente suele utilizarlo de manera muy tosca y sin tener conocimiento de que hay un elenco de alternativas que se pueden utilizar para lo mismo (tales como LibreOffice y otras suites ofimáticas) o incluso para darle un toque de originalidad con respecto a lo tradicional en las presentaciones (como Prezi) o hacerlas aún más potentes trabajando con estas librerías. Claro está que estas librerías requieren un conocimiento básico en HTML y CSS, y a ser posible, entender el comportamiento de Javascript. Pero esa es una cuestión que depende de cada uno y de su ímpetu por aprender: hay quienes están cómodos sabiendo lo que saben y haciendo lo que hacen, y luego están quienes están en un continuo aprendizaje, intentando innovar en herramientas y contenido. Ninguna opción hace a unos mejor que otros, sin embargo, si creo que hay un gran grupo (del que forma una parte del sector educativo) que realiza "presentaciones" en formato PPT sin tener conocimiento alguno de como debe ser una presentación ni en molestarse en como hacerla; y con esto quiero decir potajes de textos que cubren toda la presentación con poco uso de recursos gráficos y que se usan para ser leídas por el ponente-profesor. Muchas gracias Manz por este listado de recursos. Saludos, Iván

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.