Muitas vezes quando precisamos fazer um slider ou uma apresentação de slides usamos softwares como Powerpoint ou Prezi, atualmente existem muitos frameworks que nos permitem fazer este tipo de apresentações usando a tecnologia Html5, Jquery e Css 3.
A vantagem é que pode ser visualizado em qualquer navegador, em qualquer sistema operacional e até mesmo utilizado em aplicativos para dispositivos móveis.
Reveal é um framework desenvolvido em Javascript que fornece funcionalidades para criar slider e apresentações com recursos que permitem gerenciar e manipular slides, exportação de PDF, possibilidade de controle de tempo, navegação e efeitos de cada slide.
Reveal é uma biblioteca gratuita E tem a grande vantagem de podermos programar, conectar-nos a bases de dados ou incluir em qualquer aplicação que suporte Html e Javascript, algo que os softwares mais populares não conseguem fazer.
Desenvolver com o Reveal é fácil e basta conhecer Html e Js, para começar a criar uma apresentação devemos baixar a biblioteca Reveal.js do site oficial.
Em seguida, descompactamos os arquivos zip para iniciar o tutorial. Vamos começar com um Exemplo simples para testar Reveal.js.
Do diretório que descompactamos, copiamos as pastas css, js, plugins e lib para nossa pasta Example01. Essas pastas contêm todas as bibliotecas necessárias para criar nossa apresentação.
A seguir vamos criar um controle deslizante com duas imagens e texto, onde você pode navegar automaticamente ou pelo teclado. Será o seguinte:
O código-fonte é o seguinte:
Reveal.js Exemplo 01A estrutura do Reveal nos fornece vários temas ou design css que podemos encontrar na pasta css e, alterando a linha do tema, podemos alterar o design.Carro esporte
Visite o nosso site
CONSULTAR
Aplicamos o tema Bege e visualizamos com o emulador de mobile do Firefox e podemos ver que a biblioteca se encarrega de fazer um design adaptativo.
A operação do controle deslizante é fornecida pelo código Javascript:
Se quisermos que o controle deslizante se mova automaticamente, indicaremos o tempo de transição em milissegundos com o parâmetro autoSlide, caso não o utilize então deverá ser movido com as setas utilizando o teclado ou mouse.
Os desenvolvedores da Web estão usando esse tipo de biblioteca para deixar de lado gif.webp, flash e outros formatos de animação, esse tipo de estrutura ainda permite que o controle deslizante seja usado para seo uma vez que o texto é indexável. Também podemos usá-lo online e offline para mostrar nossa apresentação de um pendrive ou celular, usando qualquer navegador.
A estrutura Reveal.js consiste em um único arquivo JavaScript e dois arquivos de folha de estilo. A primeira folha de estilo, revela.css, define alguns estilos comuns, enquanto a segunda contém o design de um tema padrão, também podemos adicionar uma terceira folha de estilo com nossas próprias classes.
Este tema define a aparência das partes importantes de suas apresentações, pois há texto, imagens e links.
Podemos usar junto com Reveal.js outras bibliotecas, como CSS 3D ou WebGL.
O Revelar estrutura Permite que você use vários plugins e parâmetros de configuração para melhorar a experiência do usuário. Os parâmetros de configuração que mais nos interessam são:
controlesEste parâmetro indica que as setas de direção são mostradas para navegar pelos nossos slides, se não indicarmos nada, ele aparece por padrão. Ele pode assumir o valor verdadeiro ou falso.
progressoExibe uma barra de progresso conforme o andamento da apresentação. Ele pode assumir o valor verdadeiro ou falso.
slideNumberMostra o número do slide atual. Ele pode assumir o valor verdadeiro ou falso.
tecladoAtive ou desative a interação do teclado. Ele pode assumir o valor verdadeiro ou falso.
tocarativa ou desativa o uso de telas sensíveis ao toque, se você tiver uma. Ele pode assumir o valor verdadeiro ou falso.
cicloindica que quando chega ao fim volta ao início e continua sem parar, se colocarmos false irá parar quando chegar ao fim.
Ele pode assumir o valor verdadeiro ou falso.
autoSlideé o tempo em milissegundos para alternar de um slide para outro automaticamente.
transiçãotipo de transição entre slides. Pode ser definido como padrão, nenhum, fade, slide, convexo, côncavo ou zoom.
Um exemplo muito interessante é a demonstração oficial que pode ser usada para praticar e também baixada da página Reveal.js oficial.
Se quisermos adicionar Controle deslizante vertical devemos criar seções aninhadas da seguinte maneira:
Slide vertical 1 Sub slide vertical 1.1 Sub slide vertical 1.2A seguir faremos um Exemplo02 onde incluiremos outras características como os fragmentos que são listas em html que são mostradas quando uma tecla é pressionada, a apresentação avança
A apresentação será um Curso de Hacking, com slides em computador.
O código-fonte será o seguinte:
Curso de Hacking ÉticoAprenda Segurança Defensiva de Computadores
- Detecção e controle de vulnerabilidade
- Teste de penetração: Métodos.
Também indicamos seções verticais, que são sub slides, para mostrar outros slides dentro de uma determinada seção.
O framework Reveal.js É uma das opções mais populares para a criação de apresentações em HTML, pois pode ser usada em qualquer dispositivo e não requer a instalação de nenhum software de design ou programação.
Vemos alguns de seus recursos básicos neste artigo, mas há muitos mais disponíveis.
O Google está experimentando a tecnologia WebRtc, uma tecnologia que vimos no tutorial WebRTC Comunicação de áudio e vídeo a partir de um navegador e Reveal.js para que os movimentos de slide possam ser realizados usando gestos com as mãos por meio de uma webcam. Calibrando a webcam através do WebRtc e com um simples movimento da mão no ar podemos mudar o slide.
Podemos ver o projeto do Google que está em fase beta do Google Chrome com Gestures + Reveal.JS, onde você pode ver alguns vídeos de demonstração que testam a tecnologia.
Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
