Apresentações fantásticas com o Reveal.js

Existem inúmeras maneiras e ferramentas para se fazer apresentações, desde o tradicional Power Point (do pacote Office da Microsoft), o inovador Prezi, até as soluções na nuvem, como o Google Slides. Aqui na Code Prestige, procuramos padronizar nossas apresentações dentro de um formato enxuto, eficaz, envolvente e amigável para quem trabalha no mundo técnico; tanto para quem está assistindo quanto para quem é um dos nossos instrutores. no entanto, nenhuma das ferramentas citadas conseguiu resolver nosso problema.

Foi então que encontramos a ferramenta que é assunto do artigo de hoje, o reveal.js. Este framework de apresentações de código aberto desenvolvida inicialmente pelo programador Hakim El Hattab é um grande sucesso e já possui mais de 40 mil estrelas e 11 mil forks no GitHub; tudo sob licença MIT.

Além de ser extremamente fácil de usar, nos permite criar apresentações fascinantes, como veremos a seguir.

O framework definitivo para apresentações

O reveal.js, de acordo com o site oficial, é um framework que nos permite facilmente criar belas apresentações usando HTML. Ele vem com uma ampla gama de recursos, incluindo slides aninhados, conteúdo Markdown, exportação de PDF, anotações de palestrantes e uma API JavaScript (que nos permite aproveitar e expandir as suas funcionalidades). Há também um editor visual completo e uma plataforma para compartilhar apresentações do reveal.js no site slides.com.

Para entender melhor o seu funcionamento, vamos criar uma apresentação totalmente do zero.

Criando uma apresentação

Há duas maneiras de se começar a trabalhar com o framework: utilizando o setup básico ou avançado. Para o setup básico, basta baixar a última versão disponível (neste link), descompactar e substituir o conteúdo do exemplo no arquivo index.html pelo seu próprio.

Para o setup avançado, é necessário baixar o repositório na sua máquina:

git clone https://github.com/hakimel/reveal.js.git

Feito isso, instalar as dependências com o npm install e então alterar o arquivo index.html.

Uma vez instalado na sua máquina, você notará que a apresentação segue uma estrutura muito simples:

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

Tudo começa com uma div com a classe reveal. Dentro dela, devemos ter uma outra div com a classe slides. Dentro desta div, criaremos quantos slides quisermos. Para cada tag <section>, um slide é criado, como mostra o exemplo a seguir:

Slides criados com o reveal.js

Bem bacana, né? Notem nas setinhas criados no canto inferior direito. O framework nos permite criar slides verticais, desta forma conseguimos aprofundar um mesmo assunto em slides que seguem a mesma linha vertical. Para isso basta inserir uma tag <section> dentro de outra tag <section>. Como por exemplo:

<div class="reveal">
  <div class="slides">
    <section>
      <section>Slide 1.1</section>
      <section>Slide 1.2</section>
    </section>
    <section>Slide 2</section>
  </div>
</div>

O resultado é o seguinte:

Slides verticais

Além disso, também conseguimos criar os slides utilizando Markdown. Para isso, basta marcar a tag section com data-markdown. Feito isso, qualquer conteúdo dentro da tag <textarea data-template> será interpretado na linguagem.

Outro aspecto interessante para quem trabalhar com programação é que o reveal.js utiliza o highlight.js para renderizar código de forma agradável na tela. Com isso, conseguimos mostrar trechos de código em nossas apresentações:

Sintaxe identificada pelo highlight.js

A ferramenta dá uma grande possibilidade de formatos para os slides, dando suporte a:

• Imagens (incluindo gifs!)
• Listas
• Transições e Efeitos
• Tabelas
• Quotes
• Interligação entre slides
• E muito mais!

Para dar uma olhada em todas possibilidades que temos com ela, te convido a visitar a apresentação oficial do site, feita 100% utilizando a ferramenta.

Configurações

Ao final de toda página que contém uma apresentação feita com o reveal.js, precisamos rodar código JavaScript para inicializá-lo da maneira que quisermos. Existem várias configurações disponíveis, desde a configuração das setas, até a velocidade da transição das imagens. Vou deixar o exemplo padrão comentado disponível no site abaixo para referência:

Não vou explorar estas configurações pois o artigo ficaria muito extenso, mas te convido a ativar e desativar as configurações para ver seus efeitos na prática. Além disso, vale ressaltar que para aproveitar todas elas, é necessário que você esteja utilizando o setup completo.

Como nós utilizamos

Aqui na empresa todas as apresentações foram padronizadas utilizando a ferramenta. Nossos instrutores também gostam bastante do formato, por ser muito próximo ao que utilizam no dia a dia. Para ver alguns exemplos do que já fizemos, te convido a visitar os links a seguir:

• https://codeprestige.github.io/curso-introducaoreact/#/
• https://codeprestige.github.io/curso-performancenode/#/
• https://codeprestige.github.io/curso-primeirospassosansible/#/

Conclusão

O ecossistema JavaScript está cheio de ferramentas, frameworks e bibliotecas fantásticas, e o reveal.js sem dúvida é uma delas. A facilidade com que os slides são feitos e a forma com que são montados na tela, o tornam uma excelente opção. Além disso, por se tratar de um site, conseguimos subir a apresentação facilmente no GitHub Pages, a tornando acessível de forma fácil e prática a todos.

Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube