Tableless

Busca Menu

Reveal.js: criando apresentações no navegador

Seja o primeiro a comentar por

Apresentações não estão mais limitadas a softwares e plataformas específicas – hoje em dia é possível criar slides utilizando o navegador e tecnologias como HTML5, CSS3 e JavaScript.

Uma das responsáveis por isto é a biblioteca JavaScript reveal.js, criada por Hakim El Hattab, desenvolvedor mais conhecido por seus experimentos com animações CSS3.

Neste artigo vamos criar uma apresentação básica e conhecer as opções disponíveis para personalizar nossos slides.

Estrutura da apresentação

Vamos começar fazendo o download da última versão da biblioteca reveal.js disponível no GitHub: https://github.com/hakimel/reveal.js/downloads.

Feito isso, basta criar um arquivo index.html e copiar os arquivos da biblioteca para o diretório da apresentação. Nosso HTML inicial fica assim:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Apresentação Exemplo Tableless</title>
    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides"></div>
    </div>
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>
  </body>
</html>

A apresentação precisa seguir uma estrutura pré-definida: a biblioteca irá procurar um div com a classe reveal que contenha outro div com a classe slides.

O elemento div.slides receberá os slides de nossa apresentação. Os slides precisam ser elementos do tipo section. Vamos, então, adicionar nossos três slides à apresentação:

...
<div class="reveal">
  <div class="slides">
    <section>
      <h1>Apresentações no navegador</h1>
      <h3>Exemplo de apresentação Tableless</h3>
    </section>
    <section>
      <h1>Sobre o autor</h1>
      <ul>
        <li>15 anos de experiência</li>
        <li>desenvolvedor na globo.com</li>
      </ul>
    </section>
    <section>
      <h1>reveal.js</h1>
        <ul>
          <li>desenvolvida por Hakim El Hattab</li>
          <li>open source</li>
        </ul>
    </section>
  </div>
</div>
...

O último passo é iniciar o objeto Reveal:

...
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
  Reveal.initialize();
</script>
...

Agora basta abrir o arquivo index.html no seu navegador favorito e conferir o resultado.

Opções

O método initialize pode receber como parâmetro um objeto com as opções da apresentação. É possível, por exemplo, esconder os controles de navegação, habilitar navegação via teclado, alterar o efeito de transição dos slides, entre outros.

Vamos agora mudar nossa inicialização, alterando algumas configurações:

Reveal.initialize({
  autoSlide: 6000,
  center: true,
  controls: false,
  mouseWheel: true,
  transition: 'concave'
});

Com as configurações acima nós habilitamos a troca automática de slides após 6 segundos, centralizamos o conteúdo dos nossos slides, desabilitamos os controles de navegação, habilitamos a navegação utilizando o scroll do mouse e alteramos a transição dos slides para o efeito ‘concave’.

Para conferir uma lista completa de opções disponíveis, leia o README do projeto no github.

Fragmentos

Para utilizar fragmentos com reveal.js basta adicionar a classe fragment a um ou mais conteúdos dentro de um slide.

Vamos alterar o nosso slide “Sobre o autor” e exibir os ítens da lista de forma fragmentada:

...
   <h1>Sobre o autor</h1>¬
   <ul>¬
     <li class="fragment">15 anos de experiência</li>¬
     <li class="fragment">desenvolvedor na globo.com</li>¬
   </ul>¬
...

Atualizando a apresentação no navegador, ao chegar no slide acima, os elementos da lista serão exibidos passo a passo.

Temas & Plugins

Além do tema padrão, a biblioteca reveal.js disponibiliza outros temas para nossas apresentações. São eles: beige, night, serif, simple e sky.

Para utilizar um tema diferente, basta alterar o link do CSS de default para o tema desejado. No exemplo abaixo passamos a utilizar o tema night.

...
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night.css">
...

Outra forma de alterar e estender nossa apresentação é utilizar o pacote de plugins que acompanha a biblioteca. Dentro do diretório plugin estão disponíveis extensões para adicionar conteúdo com Markdown, zoom, notas e highlight de código.

Para ativar um plugin, basta adicionar a opção dependencies na inicialização do objeto Reveal:

Reveal.initialize({
  autoSlide: 6000,
  center: true,
  controls: false,
  mouseWheel: true,
  transition: 'concave',
  dependencies: [{ src: 'plugin/zoom-js/zoom.js' }]
});

No exemplo acima habilitamos o plugin de zoom. Agora, ao utilizar a combinação alt + clique do mouse aplicamos zoom in/zoom out nos slides.

E mais…

Isso foi só uma parte do que a biblioteca reveal.js oferece. É possível ainda criar temas próprios (o diretório de temas inclui um esqueleto em Sass), tirar proveito da API JavaScript do objeto Reveal (com métodos para controlar a navegação dos slides), escutar os eventos disparados por trocas de slides e fragmentos, entre outras coisas.

Além do pacote JavaScript, você pode criar suas apresentações utilizando o serviço www.rvl.io, sem a necessidade de código.

Para finalizar, seguem os links do código fonte do exemplo e da apresentação criada aqui:

Publicado no dia