viernes, 11 de septiembre de 2015

RevealJs, HTML5 ideal para presentaciones


Hace unos meses he estado leyendo acerca de los presentadores en MarkDown y HTML5. Entre los que más podrían destacar, aunque distintos, RevealJs, Impress y RemarkJs. RevalsJs tiene una versión online en Slides.com (gratuita para proyectos públicos). Impress está basado en el editor de presentaciones online Prezi.com. RemarkJs es un proyecto que destaca por su sencilled.

Esta tarde he subido una plantilla para RevealsJs mi cuenta de GitHub. Es una modificación del fork original el cual incluye soporte para AngularJs, carga de las pantallas a partir de datos en json y una barra de menús en la parte superior. Aún necesita una serie de mejoras pero como idea base funciona perfectamente.

Otra opción mucho más elegante, es crear los proyecto mediante generadores de código. Yeoman es un famoso ecosistema de autogeneradores para múltiples aplicaciones y frameworks, algunos muy interesantes como JHipster (Spring Boot + AngularJs), generadores de AngularJs, React, Backbone y para RevealJs.

Esto es lo que hace el autogenerador de Yeoman generator-reveal, creado por Sebastian Lara Menares, permitiendo crear una presentación en HTML5 en apenas unos minutos mediante línea de comando. Creando un proyecto mucho más limpio, simple y mejor organizado.

Para instalar Yeoman y el autogenerador de RevealJs, es tan simple como seguir los pasos que describo a continuación (debereis tener instalado NodeJs con la ruta del PATH hacia la ruta de ejecutables de Node para poder ejecutar "npm"):

$ npm -g install yeoman generator-reveal bower grunt-cli
$ mkdir generator-reveal-presentation && cd $_
$ yo reveal
This includes the amazing Reveal.js Framework
and a Gruntfile for your presentation pleasure.

? What are you going to talk about? Title
? What version should we put in the package.json file? 0.0.0
? Do you want to use Sass to create a custom theme? Yes/No
? What Reveal.js theme would you like to use? simple
? Do you want to deploy your presentation to Github Pages? This requires an empty Github repository. Yes/No

$ yo reveal:slide "Introduction" [--markdown] [--attributes] [--notes]
$ yo reveal:slide "Targets" [--markdown] [--attributes] [--notes]
$ yo reveal:slide "Demo with video cats" [--markdown] [--attributes] [--notes]
$ yo reveal:slide "Greetings" [--markdown] [--attributes] [--notes]
# Markdow crea el slide como lenguaje de MarkDown
# attributes añade atributos opcionales para el slide: background, otros.
#note añade notas para mostar ayuda en la ventana del ponente.

# Editar primer slide
$ vi slides/index.md

### Is Evil Corp real?
##### Fsociety
>##### from: Mr. Robot
>##### by: Christian Bale

note:
From the terminal, pop in:

```yo reveal:slide "Slide Title"```

Available options:

```--markdown --attributes --notes```

# Editar último slide
$ vi slides/index.json
{
"filename": "greetings.md",
"attr": {
"data-background": "img/questions.jpg"
}
}

# Ejecutar gestor de tareas
$ grunt serve

A continuación se describen algunos consejos para la creación de presentación con generator-reveal.

Atributos en Diapositivas

Abrir Slides/list.json y añadir el atributo attr con la lista de los atributos que se quieran añadir a una diapositiva. Por ejemplo con la imagen de fondo y clase centrado:
    {
        "filename": "index.md",
        "attr": {
            "data-background": "resources/background.png",
            "data-background-size": "1024px",
            "class": "center"
        }
    },



Diapositivas Verticales

Para añadir diapositivas verticales a una diapositiva horizontal, tan solo es necesario sustituir el documento JSON por un array de documentos:
    [
        {
            "filename": "introduction.md"
        },
        {
            "filename": "introduction/introduction1.md",
            "attr": {
                "data-background": "resources/background.png",
                "data-background-size": "1024px",
                "data-transition": "none"
            }
        },
        {
            "filename": "introduction/introduction2.md",
            "attr": {
                "data-background": "resources/background.png",
                "data-background-size": "1024px",
                "data-transition": "none"
            }
        },
        {
            "filename": "introduction/introduction3.md",
            "attr": {
                "data-background": "resources/background.png",
                "data-background-size": "1024px",
                "data-transition": "none"
            }
        }
    ],

MarkDown

Las diapositivas pueden ser creadas en formato Markdown (extensión .md) facilitando bastante la creación de las presentaciones. Con el editor Atom de Github se puede ver una previsualización de los resultados de una página en Markdown pulsando la combinación de teclas Control, Shift y M o en el menú Packages -> Markdown Preview -> Toggle Preview.


Previsualización de MarkDown con editor Atom.


MarkDown con Fragments

Para ir mostrando líneas de texto poco a poco en una diapositiva se usa la clase fragments. La forma de añadirlo en Markdown se añade con el comentario de HTML .element.

Imágenes en MarkDown

Agregar imágenes con MarkDown es muy sencillo, con [!Nombre de imagen] se añade el texto para el atributo alt. RevealJs añade la imagen con un borde grueso de color negro. Se puede eliminar añadiendo el estilo "border:0px;". Por defecto, esto deja un marcado de sombreado para los bordes de la imagen. Esta sombra también se puede eliminar con "box-shadow: 0 0 0 rgba(0, 0, 0, 0);". La imagen se ajusta automáticamente al 95% del total del tamaño de la diapositiva. También se puede alinear junto con un texto con el atributo CSS "vertial-align", con opciones como baseline, bottom, top o middle. A continuación se muestra un ejemplo:
## ![Cassandra](resources/logo_cassandra.png )<!-- .element: style="border:0px; box-shadow: 0 0 0 rgba(0, 0, 0, 0); vertical-align: middle;" --> Apache Cassandra

Personalizando RevealJS

Para cambiar las propiedades de RevealJs se deben utilizar las plantillas dentro del directorio templates. No se debe modificar directamente index.html, porque en cuanto se ejecute grunt los cambios serán sobreescritos por el fichero de la plantilla.

En _index.html está la configuración de RevealJs. Para añadir otras opciones como mostar paginación o añadir movimiento con la rueda del ratón:
Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            center: false,
            slideNumber : true,
            fragments: true,
            mouseWheel: true,
            hideAddressBar: true,
            transition: 'slide', // none/fade/slide/convex/concave/zoom

Código en MarkDown

RevealJs incluye sintaxis de código con highlighting y es posible crear elementos de código para cada lenguaje.
Para incluir código en MarkDown tan solo es necesario añadir 3 comillas simples invertidas ```, al inicio y al final. También se puede indicar en qué lenguaje está escrito el código.

Dos columnas por Diapositiva

A veces resulta interesante poder dividir la diapositiva en 3 o más columnas. Las columnas se pueden añidir con nuevas propiedades CSS: moz-column-count y -webkit-column-count para navegadores Mozilla y Webkit respectivamente. En template/_index.html añadir:
         <style>
          .multicolumn > ul, .multicolumn > ol {
              -moz-column-count: 2;
              -moz-column-gap: 50%;
              -webkit-column-count: 2;
              -webkit-column-gap: 50%;
              column-count: 3;
              column-gap: 50%;
          }
         </style>


e indicar en la configuración de la diapositiva, en Slides/list.json, el nombre de la clase multicolumn.


Resultado diapositiva con doble columna

Notas para presentaciones

Se pueden añadir notas de ponente en cada diapositiva para ayudar en las presentaciones. Para ello, en cada diapositiva se añade la etiqueta aside con la clase notes. Para diapositivas en MarkDown es mucho más simple, basta con añadir note: al final:

Pulsando la tecla s, RevealJs abre una nueva ventana del navegador, un temporizador de tiempo (reiniciable pulsando sobre él) y las notas añadidas.

Conversión a pdf

La presentación de RevealJs se puede convertir a pdf. Lo único que hay que hacer es añadir el parámetro "?print-pdf" a la url.

Cuidado con los cambios en la hoja de estilos. Por ejemplo, el estilo de doble columna no estará optimizado para impresiones en pdf.

Desplegar en Github

Con Generator-Reveal, se puede configurar fácilmente para que despliegue una página de presentación usando github. Lo que se realiza de forma automática es subir crear la complilación de archivos en dist, crear la rama gh-pages en dist para subir posteriormente el contenido al repositorio del usuario de Github. Esto crea finalmente una página con la presentación desplegada en https://[usaario].github.io/[nombre-repositorio].
Primero, es necesario crear el repositorio en Github y a continuación ejecutar los comandos de linea:
$ grunt dist
$ git init
$ git add .
$ git commit -m 'First commit'
$ git remote add origin remote repository URL
$ grunt deploy


Para desplegar, debe estar configurado en Reveal la cuenta y el repositorio del usuario (seleccionado durante la creación del código con Yeoman). Sin embargo, los datos del repositorio puden ser reconfigurados posteriormente en los ficheros .yo-rc.json y Gruntfile.coffee:
$ vim .yo-rc.json
    "deployToGithubPages": true,
    "githubUsername": "user-github",
    "githubRepository": "repository-name"
  }
}

$ vim Gruntfile.coffee
        buildcontrol:

            options:
                dir: 'dist'
                commit: true
                push: true
                message: 'Built from %sourceCommit% on branch %sourceBranch%'
            pages:
                options:
                    remote: 'git@github.com:user-github/repository-name'
                    branch: 'gh-pages'
...
    grunt.registerTask 'deploy',
        'Deploy to Github Pages', [
            'dist'
            'buildcontrol'
        ]


Finalmente, en este enlace se muestra el código y resultado de una presentación creada con RevealJs y Generator-Reveal.