html-slides é um modelo para criar slides de apresentação que são executados diretamente em um navegador da web. Para ver esses slides em ação, dê uma olhada na apresentação de slides de demonstração.
Recursos de apresentação
Recursos de slides
Para construir a apresentação a partir de seus slides, o Node.js deve estar instalado no computador.
A apresentação pode ser exibida em qualquer um dos principais navegadores (Firefox, Chrome, Edge, Safari, Opera, ...) e não requer nenhum software adicional.
Baixe ou clone o repositório de slides html e comece a criar sua apresentação dentro da pasta template . Você não precisa de nada fora desta pasta e pode renomeá-la ou movê-la.
A pasta template contém os seguintes arquivos e pastas:
slides contém seus slides e seus recursos de mídia.index.build.html contém a lista de slides.deploy reúne seus slides em um único arquivo index.html .index.html é a apresentação gerada.style contém o arquivo de estilo CSS ( style.inc.css ) e as fontes. Você pode ajustar as fontes e cores padrão aqui.skeleton contém o código HTML, CSS e JavaScript para transformar seus slides em uma apresentação. Você não precisa modificar nada aqui. Um slide normalmente é um arquivo com algumas linhas de código HTML ou um arquivo SVG. Para slides somente de vídeo ou somente imagem, o esqueleto fornece código HTML predefinido.
O arquivo index.build.html contém o título e a sequência de slides da apresentação:
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >A primeira e a última linha importam o esqueleto da apresentação e devem permanecer como estão. Cada slide leva os seguintes parâmetros:
A extensão do arquivo determina o tipo de slide:
.inc.html são slides HTML (veja abaixo)..inc.svg são slides SVG (veja abaixo)..mp4 , .webm ou .ogg são slides apenas de vídeo. Eles resultam em um player de vídeo mostrado no slide. Eles ficam melhor com o estilo 'preto'..png , .jpg ou .jpeg são slides somente de imagem. Os estilos adequados são 'preto' (para colocar a imagem sobre um fundo preto) e 'capa' (para cobrir todo o slide).Os slides são preparados para um tamanho de 1000 x 600 pixels. No modo de apresentação, eles são dimensionados para se ajustarem ao tamanho da tela.
Um slide HTML simples ( slides/slide-name.inc.html ) com marcadores tem a seguinte aparência:
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >O slide mostra uma imagem (tag img) no lado direito (400 pixels) e usa os 600 pixels restantes à esquerda para o título do slide (tag h1) e os marcadores (tag ul, tag ol, tag li).
O modelo contém exemplos de posicionamento de texto e imagens e inserção de tabelas.
O formato SVG ( slides/slide-name.inc.svg ) é adequado para slides com gráficos vetoriais, como diagramas ou esquemas. Esses slides podem ser desenhados usando o Inkscape ou qualquer outro software capaz de salvar ou exportar arquivos SVG.
O documento SVG (página) deve ter 1000 x 600 pixels de tamanho ( width="1000" height="600" ). O código SVG passa por alguma limpeza durante a importação. Em particular, as informações específicas do Inkscape e os IDs padrão (por exemplo, rect1098 ) são removidos.
Para reconstruir a apresentação ( index.html ), abra uma janela de terminal (linha de comando) e execute
./deploy/run
O script continua procurando alterações e reconstrói index.html quando necessário. Para sair, pressione Ctrl-C na janela do terminal.
O script de implantação verifica grosseiramente seu código HTML. Em particular, avisa se as tags não estão devidamente fechadas.
Para iniciar a apresentação, pressione F11 para ativar a tela inteira e p para alternar para o modo de apresentação . Use as teclas de seta para esquerda/direita (ou Page Up / Page Down ) no teclado para mover para o slide anterior/seguinte. Em dispositivos móveis, você pode deslizar para a esquerda/direita.
O botão de menu no canto superior direito (três listras) abre o índice de slides. Clicar em qualquer slide muda para esse slide.
Se você ativar outra janela (ou iframe dentro dos slides) durante a apresentação, o botão do menu fica vermelho para indicar que as teclas de seta (para passar para o próximo slide) não funcionam. Clicar no botão vermelho focará a apresentação novamente e fará com que as teclas de seta funcionem.
Muitos navegadores permitem que os slides sejam impressos. Cada slide cabe em uma página A4 paisagem.
Ao conectar um projetor como tela externa, você pode exibir a apresentação em ambas as telas.
Para isso, abra a mesma apresentação em duas janelas separadas do navegador (do mesmo navegador). Coloque uma janela na tela principal e a outra janela na tela externa (em modo tela cheia). As duas janelas mostrarão sempre o mesmo slide.
Observe que o conteúdo interativo nem sempre pode ser sincronizado.
Uma apresentação executada em um laptop pode ser controlada remotamente por um telefone celular. Isto requer uma ligação à Internet, uma vez que as mensagens de controlo são enviadas através de um servidor (https://viereck.ch/remote/).
Para configurar isso:
Os vídeos são inseridos usando a tag video :
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Os navegadores da Web suportam uma variedade de formatos de vídeo. MP4, ou formato de vídeo MPEG-4/H.264, é compatível com quase todos os navegadores da web. Os navegadores mais populares também reproduzem arquivos WebM (vídeo/webm) ou Ogg/Theora (vídeo/ogg).
Da mesma forma, os arquivos de áudio são inseridos usando a tag audio .
Um slide com vídeo em tela cheia pode ser simplesmente criado a partir do índice de slides:
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; O índice de slides pode ser estruturado usando topic e subTopic :
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Os tópicos e subtópicos aparecem apenas no índice de slides. Eles não afetam os slides ou o fluxo da apresentação.
Arquivos JavaScript denominados slides/slide-name.inc.js são inseridos automaticamente com seu respectivo slide. JavaScript permite criar slides avançados com simulações, animações, elementos interativos e assim por diante.
Um script de slide simples pode ter a seguinte aparência:
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ; O código é executado quando a apresentação é carregada. slide é uma referência ao slide correspondente, um elemento <div> . Quando o slide aparece na tela, a função onSlideAppears é chamada. Por outro lado, onSlideDisappears é chamado quando o slide desaparece. É uma boa prática executar animações somente quando o slide estiver visível. Observe que vários slides podem estar visíveis ao mesmo tempo.
Para evitar conflitos entre nomes de variáveis e funções, o código JavaScript do slide é colocado em uma função anônima. Um slide gerado tem a seguinte estrutura:
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > Os slides ainda podem se comunicar entre si por meio do objeto window :
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... Os IDs dos elementos devem ser exclusivos em toda a página HTML. Os slides devem, portanto, prefixá-los com um nome de slide exclusivo ( fancySlide no exemplo acima).
Os slides interativos podem sincronizar seu estado com outras instâncias por meio de controle remoto (veja acima). Observe que isso se destina apenas a pequenas quantidades de dados, como alguns números, um ID de elemento ou um texto curto.
O exemplo a seguir usa sendState e um ouvinte de estado para sincronizar o conteúdo de uma entrada de texto:
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
