Presentaciones con Reveal JS

Hola comunidad!

A veces necesitamos compartir una presentación "Tipo Powerpoint" pero no sabemos si la(s) persona(s) que recibe tiene instalado el paquete de Office, puede ser también que se nos "quede corto", tal vez que sea chevere que pueda ser "consumida desde el celular", que deseemos que sea "indexable por Google" por temas de marketing digital o posicionamiento SEO (Si señores, es truco útil), tal vez porque sea una forma rápida de compartirla (y no que nos pidan guardar en USB y demás)... Mejor dicho, hay bastantes razones de peso como para pensar que vale la pena aprender a usar un Framework como Reveal.js para publicar nuestras presentaciones (alias conferencias o contenidos) en versión web.

Nos pusimos a la tarea y cacharramos con Reveal.JS, arrancamos desde cero y publicamos el sitio web en servidor gratuito y para cerrar el pastel, generamos código QR - ¿te animas?

¿ Y el video?

Para aquellos que nunca tienen tiempo o aprenden más fácil por video, pues "se le tiene mono".

Ahora, para los que desean más detalles...

Reveal.js es un framework o librería (da igual en este momento para algunos), que puede ser usada como base para crear presentaciones HTML5 con bastantes ventajas sobre otras alternativas, bien sean de pago o nó - Reveal es libre.

El sitio web oficial para la descarga es: https://github.com/hakimel/reveal.js
Allí podés ver documentación, y descargarlo directamente - https://github.com/hakimel/reveal.js/archive/master.zip

Antes de iniciar, es bueno que veas el demo: http://lab.hakim.se/reveal-js/ así podrás ver algunas de las características, aunque cuando lo descargas, también está incluido - es el archivo demo.htm

Te recomiendo ver la presentación de los 50 años de los Rolling Stones (sus conciertos en mapas) creadas con esta herramienta: http://rollingstones.vizzuality.com/

Y si el código no es lo tuyo, pues usas http://slides.com como interfaz, es gratuito, pero tiene opciones interesantes de pago.

Algunas características de Reveal.js

Creación de pantallas anidadas o verticales - digamos que necesitas crear unas diapositivas de detalle, pero no sabes si te alcanza el tiempo, "por si las moscas" las creas de manera anidada y si las deseas ver, navegas con la tecla (flecha abajo).
Soporte a las características típicas: Encabezados, subencabezados, textos, imágenes, tablas, citas, videos (varias fuentes) - uso de textos que aparecen de manera incremental, transiciones entre diapositivas, uso de énfasis de texto por color,
Uso de Zoom - si relacionas la librería adicional, puedes presionar Alt+Click sobre la zona que deseas hacer zoom.
Optimizada para móviles
Soporte para marcado de código
Es posible crear hipervinculos internos
Volver la pantalla a fondo negro para hacer énfasis - tecla B
Ir a pantalla completa (Tecla F)
Ver el mapa de la presentación (Tecla ESC) - ideal para navegar rapidamente
Varios themes disponibles para que no te preocupes del tema de apariencia gráfica
Listo para exportar a PDF o ser incluida en un iframe en tu sitio web
Posee vista del "orador" y es excelente, tiene temporizador y se sincroniza con la presentación
Increíblemente configurable, entre más la domines, más provecho le sacarás
Al ser código abierto y usar tecnologías estándar es posible expandir su funcionalidad, ideal si eres creativo digital o programador

Ok, cómo iniciamos?

No pretendo colocar un manual técnico, esta parte está bastante explicada en el video, pero para comenzar, una vez que descargas el framework, pues abres el archivo index.htm (que sería tu presentación)

Tenemos dos Div principales - reveal y dentro slides - a partir de ahí comenzamos a colocar nuestro contenido.

Revisa cuidadosamente el código usado en el archivo demo.htm es muy útil para ir aprendiendo

Cada diapositiva debe estar encerrada en una etiqueta semántica llamada section. En este punto pues ya usas HTML5, es decir, encabezados desde h1 a h6, párrafos, negrillas, énfasis, hipervínculos, tablas, etc.

<div class="reveal">

    <div class="slides">

        Aquí van las diapositivas

    </div>

</div>

Entonces, si queremos tres diapositivas usamos tres section -

<div class="reveal">

    <div class="slides">

       <section>

           Aquí el contenido de cada diapositiva

       </section>
       <section>

           Aquí el contenido de cada diapositiva

       </section>
       <section>

           Aquí el contenido de cada diapositiva

       </section>

    </div>

</div>

Uno de los puntos interesantes es el uso de diapositivas internas, como subsecciones, es sencillo, ingresas esas diapositivas dentro de otro section - asi es señores, in section XD

<div class="reveal">
    <div class="slides">

        <section>
            Aquí el contenido de cada diapositiva
        </section>
        <section>

            <section>Diapositiva principal</section>
            <section>Diapositiva hija</section>
            <section>Diapositiva hija</section>

        </section>
        <section>
            Aquí el contenido de cada diapositiva
        </section>

    </div>
</div>

Sugerencias

Crea una carpeta para tus imágenes, de preferencia en PNG con fondo transparente, así cuando cambies el theme pues será más sencillo.
Usa notas del orador con la etiqueta aside y la clase "notes"
Súbelo a un servidor web - aunque está bien tenerlo como local, el mayor potencial del contenido es cuando se puede compartir
¿Porqué no? crea tu código QR
Cambia el theme, es sencillo
A medida que aprendas, ve más allá, mira la documentación y los ejemplos.
Usar características de CSS es sencillo, no hay porqué tenerle miedo al CSS o incluso al Javascript

Pros - (los contras ustedes me los pueden comentar aquí XD)

Usando tecnologías HTML5 tenemos varios pros que vale la pena mencionar:

¿Necesitas que esté disponible en línea? - es web, súbelo a tu servidor, así no necesitas enviar email por ejemplo
¿Es necesario estar editando porque cambias muchas cosas? - Al estar en línea, puedes editar en local - cualquier editor de texto - y sobre escribir el index.htm de esta manera siempre estará actualizada tu presentación
¿Soporta Flash? - No es necesario, HTML5 hoy tiene muchas características que no lo requieren, además si la industria casi que lo mató ¿porqué insistir en contenido de este tipo?
¿Compatibilidad? - ¿Te han pasado una presentación en Keynotes? o ¿has enviado una y te la piden en Powerpoint? - para ver presentaciones HTML5 necesitas un navegador, es decir, estamos cubriendo, Mac, PC, Ipad, Black Berry, Iphone, windows Mobile, Linux, Android y hasta televisores inteligentes - simple, necesitamos un navegador
¿Necesitamos recoger datos en un formulario? - se lo tengo, esto es HTML5, haz tu formlulario e incrústalo en tu presentación, puede ser una encuesta local - recordar, es HTML5 podríamos usar cosas como caché, cookies, etc pero también podría ser transaccional... además mostrar los datos en vivo y en directo y si no sabes mucho, usar formularios de Google Drive
¿Qué tal procesar la entrada del usuario para hacer algo con ello? - si, si conoces Javascript por ejemplo, podrías validar datos - también con HTML5 - o enviarlos a un servidor, que tal un videotutorial con retroalimentación,etc. las posibilidades son amplias
¿Crear un prototipo para una app? - Imagina que tienes que crear un prototipo funcional, no hay mejor presentación que un app - tenemos posibilidades de hacer algo parecido con opciones como shower.me
¿Liberarnos de las app de escritorio? - como dije, necesitamos un editor de texto y un navegador, ambos incluidos en cualquier sistema operativo
Compartir la presentación - Simple, si lo publicaste en un sitio web (gratuito o nó) compartes una URL, no importa "el peso" - hay presentaciones que no caben en un correo - también podés crear contenidos y presentaciones que apoyen tu marca y compartirla por redes sociales, no necesitan más software y de paso creas contenido fácilmente compartible y hasta indexable por Google - ahh y no necesitamos de licencias o software pago
Sería interesante que tu presentación la publiquen en otros sitios como parte de mi identidad digital - Slideshare lo entendió hace tiempo y tiene millones de usuarios - pues si lo subiste a la web, puedes configurar tu presentación para ser incrustada en un iframe - y sigues manteniendo los derechos de autor y se actualizará automáticamente cuando vos actualices tu contenido
Usar versiones para diversos públicos - pues como tenemos varios themes (y crear uno tampoco es rocket science) pues puedes crear la versión en fondo blanco, otra en fondo negro y tantas como necesites - con un poco de javascript hasta permitir que los usuarios seleccionen el theme que desean
¿Compartir una diapositiva en particular? - ¿No les ha pasado que desean compartir algo en particular de una presentación y terminan enviándola completa? - pues si generas una url para cada diapositiva (por defecto está activado) pues compartes esa URL específica
¿Ya les dije que ayuda con el SEO? - pues si la tenemos en nuestra web, con nuestros créditos y es fácil compartirla, y está basada en HTML5 pues termina convirtiéndose en una parte de la estrategia digital fácil de crear - por ejemplo, las infografías interactivas

Aparte de la curva clásica de aprendizaje (recordar que también Powerpoint la tiene) pues es poca la cantidad de contras que se me ocurre, pero también "escuchamos".

¿Otras opciones recomendadas?

En el mercado existe bastante, he hecho un resumen con lo siguiente:

Código:

Flowtime.js - muy interesante para "historias más complejas", es decir, si las diapositivas anidadas de Reveal le gustaron, Flowtime lleva el concepto más lejos.

https://github.com/marcolago/flowtime.js

Demo: http://marcolago.github.io/flowtime.js/

Impress.js - Inspirado en Prezi - usa transiciones y soporte a 3D, posee bastantes recursos útiles

https://github.com/impress/impress.js
Demo: http://impress.github.io/impress.js/#/bored
Generador de diapositivas en círculo por ejemplo -http://wmh.github.io/circular-slides-generator/
Existe un editor online - http://strut.io/editor/

Shower - con bastante comunidad activa

https://shwr.me/ - descarga - https://github.com/shower/shower

Shower y material design - https://github.com/shower/material/
Ejemplo: https://pepelsbey.net/pres/web-apps/

Fathom.js - Para revisión
http://markdalgleish.com/projects/fathom/
Ejemplo: http://markdalgleish.com/presentations/jquerymobile/

ScrollDeck - Basado en Jquery
https://github.com/johnpolacek/scrolldeck.js
Ejemplo para infografías - http://johnpolacek.github.io/scrolldeck.js/decks/infographics/
Ejemplo Parallax - http://johnpolacek.github.io/scrolldeck.js/decks/parallax/

DZSlides - Para revisión

http://paulrouget.com/dzslides/
Descarga: https://github.com/paulrouget/dzslides
Ejemplo: http://paulrouget.com/slides/tmnt/slides.html

Stack JS - Para revisión
http://mbostock.github.io/stack/
https://github.com/mbostock/stack

Bespoke - muy liviano
https://github.com/bespokejs/bespoke
Ejemplo: http://mikemaccana.github.io/rejectjs2013/

Wobbly Slideshow Effect- bastante visual
https://github.com/codrops/WobblySlideshowEffect
Demo: http://tympanus.net/Development/WobblySlideshowEffect/

Parallax Effect- para landing pages y proyectos
http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/CSS3FluidParallaxSlideshow.zip
Ejemplo: http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/

Interfaz:

Slides.com - Interfaz para Reveal.js- Son públicas - tiene opción de pago.
Permite múltiples usuarios, seguimiento estadístico, presentaciones remotas, fórmulas matemáticas , etc.
Ejemplo: http://slides.com/news/collaborate-on-slides

Presentaciones Google
Necesitas cuenta Gmail, gratuita, forma parte de Google Drive

slidedeck.com - De pago -
Demo: http://www.slidedeck.com/demo/
Editor integrado - muy visual.

https://prezi.com/- Incluye editor y versión de pago
Interesante - Si se usa correctamente, terrible si mareas a la gente - Basado en un guión - sigue a la "cámara conceptual"
Plantilla Demo para elaborar un pitch para emprendimiento -
https://prezi.com/kz6uhyyq787f/business-pitch-template/

Y sólo compartir ... :

Si sólo quieres compartir, ok

Speaker deck - Compartir tu presentación PDF
https://speakerdeck.com/
Ejemplo: https://speakerdeck.com/marcelosomers/fight-the-zombie-pattern-library-rwd-summit-2016

Bunkr - Compartir tu presentación PDF
https://www.bunkr.me/

Mención especial!

Ok, digamos que no tienes mucho tiempo - no quieres ni publicar (mucho mejor si lo haces en local) - y no tienes mucho dominio, pues te presento al que algunos de mis amigos llaman "El Powerpoint del vago" - se llama Slidifier.

Slidifier- Muy sencillo y útil.
https://github.com/holgerl/Slidifier
Code: https://github.com/holgerl/Slidifier

Posee editor online y en su simplicidad está su poder, aquí está "el manual" pero en resumidas cuentas, digamos que queremos seis diapositivas, la primera con título, la segunda título y subtítulo, la tercera con una lista de tareas, en la cuarta una imagen, en la quinta un trozo de código de programación y en la sexta el contáctenos.

El texto para construir nuestra presentación sería:

# Mi Super presentación

Slidifier en uso

---

# Cómo usarla

Es simple , podemos insertar el texto en el editor y pedir que nos construya la presentación

---

# Que puedo hacer

Presentaciones sencillas, pero basicamente

- Inserción de texto
- Insertar imágenes ya publicadas en url
- Uso de listas, como esta

---

# Imágenes ya publicadas en url?

Si, como el siguiente ejemplo, puedes subir también a Google Drive y compartirla

<img src="http://slidifier.com/uploaded_files/pic.jpg"/>

---

# Código de programación

Realmente ninguno, pero puedes compartir si los creas.

\\
public int codigo_mio() {
return true;
}
\\

## Es muy simple

---

# Contáctenos entonces

## En serio, es sencillo, copia este texto completo y ponlo en el editor, luego dale clic al botón mágico.

Entonces, títulos con la almohadilla, nuevas diapositivas con tres guiones --- y el resto es "hacer caso y usar el editor" - en serio, copien ese texto, vayan al editor - http://www.slidifier.com/slidifier.html - y den clic en Slidify y listo!

Yo soy rebelde porque el mundo me hizo así ...

Si en todo caso deseas seguir usando Powerpoint, pues por lo menos aprende trucos que te ahorren tiempo - aquí te dejo un video de eso.

Me cuentan si conocen algo más, vale la pena compartir XD

- Nos webmos.