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:

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.brFacebook, Twitter, Youtube

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade