Como criar uma apresentação cativante usando Reveal.js

Construir apresentações não é fácil. Muitas vezes, você fica preso no Prezi ou no PowerPoint e os modelos são extremamente limitados e genéricos.

Hoje, vamos aprender como criar uma apresentação impressionante e animada usando HTML, CSS e JavaScript.

Se você é iniciante em desenvolvimento web, não se preocupe! Este tutorial será fácil o suficiente para acompanhar. Então, vamos deslizar direto para ele!

Usaremos uma estrutura incrível chamada Reveal.js . Ele fornece funcionalidade robusta para criar apresentações interessantes e personalizáveis.

Vamos começar!

  1. Vá para o repositório Reveal.js e clone o projeto (você também pode colocar isso no seu espaço para nome do GitHub).
git reveal

Altere os diretórios para sua pasta clonada recentemente e execute o npm install para baixar as dependências do pacote. Em seguida, execute npm startpara executar o projeto.

reveal 1

index.htmlarquivo contém toda a marcação para os slides. Essa é uma das desvantagens do uso do Reveal.js; todo o conteúdo será colocado dentro deste arquivo HTML.

Mudando o tema

  1. Abrir index.html
  2. Altere a importação de CSS para refletir o tema que você deseja usar
reveal vscode

Temas incorporados

O Reveal.js inclui 11 temas internos para você escolher:

themes reveal

Os arquivos de tema são:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

Criando um tema personalizado

  1. Abra css/theme/srcdentro do seu IDE. Isso contém todos os arquivos Sass ( .scss) para cada tema. Esses arquivos serão transpilados para CSS usando o Grunt (um executor de tarefas JavaScript). Se você preferir escrever CSS, vá em frente e crie o arquivo CSS dentro de css / theme.
  2. Crie um novo  .scssarquivo. Vou ligar para o meu custom.scss. Você pode ter que parar seu host local e executar npm run buildpara transpilar seu código Sass para CSS.
  3. Dentro do index.htmlarquivo, altere a importação do tema CSS na <head>tag para usar o nome da folha de estilo recém-criada. A extensão será  .css, não  .scss.
  4. Em seguida, criei variáveis ​​para todos os estilos diferentes que desejava usar. Você pode encontrar fontes personalizadas no Google Fonts. Depois que a fonte for baixada, adicione os URLs da fonte no index.htmlarquivo.

Mixins e configurações

O Reveal.js também vem com mixins e configurações que você pode aproveitar no seu tema personalizado.

Para usar os mixins e as configurações, basta importar os arquivos para o seu tema personalizado:

mixins reveal

Mixins
Você pode usar as mixins de gradiente vertical, gradiente horizontal ou gradiente radial para criar um efeito visual elegante.

Tudo o que você precisa fazer é passar os parâmetros necessários (valor da cor) e pronto, você tem um gradiente!

Configurações
No arquivo de configurações, você encontrará variáveis ​​úteis como tamanhos de cabeçalho, fontes e cores padrão e muito mais!

Conteúdo

Elementos

A estrutura para adicionar novo conteúdo é:

.reveal > .slides > section

<section>elemento representa um slide. Adicione quantas seções você precisar para o seu conteúdo.

Slides verticais

Para criar slides verticais, basta aninhar seções.

Transições

Existem várias transições de slides diferentes para você escolher:

  • Nenhum
  • Desvaneça
  • Deslizar
  • Convexo
  • Côncavo
  • Ampliação

Para usá-los, adicione um data-transition="{name}"ao <section>que contém os dados do slide.

Fragmentos

Fragmentos são ótimos para destacar informações específicas no seu slide. Aqui está um exemplo.

Para usar fragmentos, adicione a class="fragment {type-of-fragment}"ao seu elemento.

Os tipos de fragmentos podem ser:

  • crescer
  • encolher
  • desaparecer
  • desbotar
  • desaparecer depois
  • desvanecer-se-depois-semi-fora
  • destaque atual-azul
  • realçar-vermelho
  • destaque-verde
  • destaque-azul

Além disso, você pode adicionar índices aos seus elementos para indicar em qual ordem eles devem ser destacados ou exibidos. Você pode denotar isso usando o data-fragment-index={index}atributo

Há muito mais recursos para o Reveal.js que você pode aproveitar para criar uma excelente apresentação, mas essas são as principais coisas que me ajudaram a começar.

Segue minha apresentação utilizando o Reveal.js

https://github.com/jefferson-pereira-oliveira/meetup-hal9000

Até a próxima!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: