Adios Keynote, hola reveal.js

El día que empecé a preparar la presentación Helios y su integración en iOS me pregunté si habría alguna forma de utilizar markdown con Keynote. Iban a ser unas cuantas diapositivas de texto y manejar títulos, negritas, cursivas, listas, links,... con markdown me parecía triunfal. Después de una búsqueda rápida en Google y ver un par de enlaces descubrí reveal.js... y decidí no volver a abrir Keynote nunca más.

La presentación de ejemplo ya te da una idea general de toda la potencia de este framework. Inicialmente, a mi me bastaba con poder reutilizar un fichero en markdown en la presentación y al ver que dentro de cada section, que es como se identifican las slides, se podía introducir texto en markdown me daba por satisfecho. Luego seguí navegando y vi que, en realidad, podía utilizar un texto entero en markdown ya que con una seríe de convenciones en la escritura y arrancando reveal.js como una aplicación node.js, esta aplicación se encargaba de generar la presentación completa... reveal.js FTW!

Atajos de teclado

Un poco más adelante explicaré como hacer que reveal.js lea de un fichero .md pero antes quiero destacar la funcionalidad de reveal.js accesible a través de teclado.

Avance de diapositivas. Una característica muy llamativa de reveal.js es que las presentaciones tienen dos dimensiones. Estamos acostumbrados a avanzar y a retroceder pero con este framework también podemos subir y bajar. Esto, desde mi punto de vista, es muy útil cuando quieres ampliar la información de una diapositiva en varias diapositivas más. En el eje horizontal (avance-retroceso) estarían las diapositivas principales y algunas de ellas podrían tener un eje vertical (arriba-abajo). La navegación se controla con las teclas de cursor pero si la presentación se visualiza en un dispositivo táctil el control de la navegación se hace con el dedo. Impresionante, no?
Vistazo general. Pulsando la tecla escape se hace un zoom y puedes ver todas las diapositivas en miniatura lo que te permite navegar más rápidamente a una en concreto. Además, en caso de que tengas secciones de diapositivas (grupos en vertical) puedes ver la diapositiva que se mostraría en un flujo de navegación horizontal.
Modo Pausa. Pulsando la tecla "b" se hace un fundido a negro, de esta forma puedes forzar al público a centrar su atención en ti en lugar de hacerlo sobre la presentación. Para salir de la pausa hay que volver a pulsar la "b".
Pantalla completa. Pulsando la tecla "f"

Nada que envidiar a los programas típicos de presentaciones como Powerpoint (perdón por ponerlo en primer lugar) o Keynote.

Funcionalidad avanzada

Tener reveal.js dentro de una aplicación node.js también te permite visualizar las notas del presentador y alguna otra funcionalidad más sofisticada como sincronizar la presentación con todos los que la estén viendo al mismo tiempo que tu en sus dispositivos, actualizar el contenido de las diapositivas en tiempo real, etc.. La verdad es que toda esas funcionalidades pintan muy bien pero yo lo único que quería era:

¡Una presentación hecha con markdown!

Hay que destacar que, al combinar reveal.js con un fichero .md donde están recogidas todas las diapositivas no se explota toda la potencia del framework como las diferentes transiciones, enlaces internos, colores de fondo diferentes, imágenes de fondo diferentes, vistas fragmentadas, etc. En mi humilde opinión, abusar de las transiciones, cambios de colores o de imágenes suele cargar bastante una presentación, pero vamos, que eso es cuestión de gustos.
Si que eché de menos el no poder hacer vistas fragmentadas. Espero que en alguna próxima versión den con la forma de hacerlo. Al menos la agrupación de diapositivas y las notas si que está disponibles y eso es para mí algo digno de mención. Para que os hagáis una idea, este es el corazón de mi presentación: el fichero presentation.md.

¿Cómo hice mi presentación?

Lo primero que hice fue clonar el repositorio original de reveal.js y cambiar el fichero index.html. La mayor parte de la presentación estaría en el fichero markdown pero en la primera diapositiva quería usar una vista fragmentada (de esas en las que las frases o las palabras van apareciendo poco a poco). Debido a esto, el código de mi presentación quedaría así:

Fragmento HTML para definir la presentación

  
<div class="reveal">

    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">


        <section>
            <h1>Helios</h1>
            <h2>y su integración en iOS</h2>
            <h3 class="fragment fade-in">¿Es <a href="http://twitter.com/mattt">@mattt</a></small> una persona o una legión?</h3>
            <p>
                <small>Created by <a href="http://javimoreno.me">Javier Moreno</a> / <a href="http://twitter.com/jmoreno78">@jmoreno78</a></small>
            </p>
        </section>

        <section data-markdown="presentation.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:" data-charset="UTF-8"></section>

        <section>
            <h1>THE END</h1>
            <h3>BY Javier Moreno / javimoreno.me</h3>
            <p class="fragment fade-in">
                <small>Created by <a href="http://javimoreno.me">Javier Moreno</a> / <a href="http://twitter.com/jmoreno78">@jmoreno</a></small>
            </p>
        </section>

    </div>

</div>

Eso es todo, aparentemente tres diapositivas. La sección que se nutre de un fichero markdown tiene los siguientes atributos:

data-markdown: La ubicación del fichero
data-separator: Lo que vaya a identificar la separación entre diapositivas horizontales. En mi caso, tres líneas en blanco.
data-vertical: Lo que vaya a identificar la separación entre diapositivas verticales. En mi caso, dos líneas en blanco.
data-notes: Lo que identifique que el texto a continuación no es parte visual de la diapositivas si no de las notas.
data-charset: Muy importante para nosotros, que usamos muchos caracteres especiales como tildes, eñes, signos de interrogación y admiración el poner UTF-8.

Y eso es todo, si echáis un vistazo al fichero presentation.md comprobaréis lo que acabo de comentar.

Una vez hecho esto, para probarlo en local hay que tener instalado node.js y grunt. Si ya tenemos estos servicios instalados lo único que hay que hacer es ir hasta la carpeta donde está reveal, instalar las dependencias con $ npm install y arrancar la presentación con $ grunt serve. La presentación se verá en http://localhost:8000.

Despliegue en Heroku.

Si hacer lo anterior me llevo un rato de nada, conseguir desplegar en Heroku me llevó un mes: subí con éxito el martes y la presentación a los asistentes de la NSCoderMAD fue el miércoles.
Lo primero que probé fue desplegar tal y como estaba la aplicación: fue un fracaso. Por lo visto grunt está muy bien para entornos de desarrollo pero los hosting de node.js prefieren otras cosas. Búsquedas en Google hablan de versiones diferentes de la Heroku Toolbet para desplegar aplicaciones node.js con grub pero a mi no me funcionó ninguna de las recomendaciones que encontré.

A última hora encontré este fork de reveal.js que se podía previsualizar en Heroku y de ahí tomé las configuraciones que necesitaba para que funcionará mi presentación en Heroku.

Lo primero fue crear un fichero llamado server.js con el siguiente contenido:

Fichero server.js

var app = require('http').createServer(handler)
  , fs = require('fs')
  , path = require('path')
  , url = require('url')
  ,mime=require('mime')

app.listen(process.env.PORT||5000);
function handler (req, res) {
    var uri = url.parse(req.url).pathname;
    if(uri=='/'){
        uri='/index.html'
    }
    uri=uri.replace(/%20/g,' ')
    console.log(uri)
    var filename = path.join(__dirname, uri);
    fs.readFile(filename,
        function (err, data) {
        if (err) {
            res.writeHead(404);
            return res.end('Error loading file...');              
        }
        res.setHeader('Content-type',mime.lookup(uri));
        res.writeHead(200);
        res.end(data);
    })
}

Este fichero contiene la información mínima que node.js necesita para arrancar la aplicación. Para que lea de este fichero, hubo que modificar el fichero Procfile

Fichero Procfile

web: node server.js

Y por último, cambiar el fichero de dependencias package.json:

Fichero package.json

{
    "author": "Javi Moreno featuring (reveal.js by Hakim El Hattab)",
    "name": "revealjs",
    "description": "Helios y su integración con iOS",
    "version": "2.5.1",
    "repository": {
        "type": "git",
        "url": "[email protected]:jmoreno/HeliosTalk.git"
    },
    "engines": {
        "node": "0.8.x"
    },
    "dependencies": {
        "mime":"1.2.7",
        "npm":"1.2.x"
    }
}

Ya solo quedaba hacer commit y seguir los pasos para desplegar en Heroku:

$ heroku create
$ git push heroku master
$ heroku open

No os podéis hacer a la idea de la alegría que me llevé.

Para acabar

Creo que, en su momento, este tweet no se entendió:

Si no me falla el valor, la presentación que estoy haciendo para la @nscoder_mad se podrá ver en slideshare, Github y Heroku…
— Javi Moreno (@jmoreno78) September 10, 2013

Como al final no me faltó el valor, ahí está la presentación: en slideshare, Github y Heroku. \o/