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: