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: