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:
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:
O último passo é iniciar o objeto Reveal:
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:
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:
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.
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:
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:
- código fonte da apresentação
- visualizar a apresentação no navegador