Atualmente, quando os capacetes de realidade virtual se tornam parte da nossa realidade e os carros da Tesla voam no espaço, você pode usar todo o poder dos mecanismos do navegador para criar apresentações verdadeiramente interativas, multiplataforma e elegantes, em vez de criar um conjunto de páginas PPTX ou, até pior ainda, um documento em PDF no estilo "material ilustrativo para relatório explicativo e de cálculo".
Desde 2015, eu tenho tentado encontrar o formato de apresentação ideal para mim (além dos projetos de graduação). E agora acho que quase consegui. Tudo começou com o PowerPoint e terminou com estruturas da Web baseadas em JavaScript.
Existem vários mecanismos JavaScript que podem ser usados para criar apresentações interessantes: Marp , Reveal , deslizamento de terra , slides de hackers , slidify e outros. Em alguns mecanismos, você pode usar o Markdown, alguns são incorporados a um IDE e outros têm seus próprios editores. Eu tentei os dois primeiros motores.
Como demonstração, estão disponíveis exemplos de slides e vídeo .
Ambos os mecanismos mencionados acima oferecem suporte ao formato de texto sem formatação do Markdown. O primeiro, Marp , permite criar apresentações em seu próprio IDE, o que é muito conveniente, mas a saída ainda é um PDF estático. O segundo, Reveal , é mais interessante: pode ser usado para criar sites de apresentação inteiros - você pode usar todo o poder do JavaScript, HTML e CSS além do Markdown. Vou falar principalmente sobre Revelar neste artigo.
Você pode ver a evolução de minhas apresentações no repositório https://github.com/KvanTTT/Presentations .
Pequena quantidade de texto
Seu público não lerá o texto da apresentação nos slides; portanto, não coloque parágrafos inteiros nos slides. Converse com o público. Se você tiver dúvidas sobre colocar ou não um pedaço de texto em um slide, jogue-o fora. Se necessário, escreva um artigo no qual os detalhes sejam explicados. É melhor usar mais informações visuais.
Usar metáforas é bom. O público deve estar envolvido desde o início da apresentação e mantido acordado. Isso pode ser feito com a ajuda de fotos engraçadas. Mas conheça os limites: a abundância de piadas pode ser irritante e perturbadora.
Minimalismo e design plano
Um dos princípios que peguei emprestado. Está em tendência agora, e eu também gosto. Consequentemente, é recomendável usar um pequeno número de cores básicas (três a cinco) ao criar apresentações.
Acesso online
A apresentação deve estar disponível no navegador. Assim, você não terá medo de perder uma unidade flash, travar o seu laptop e outras adversidades durante a apresentação.
Trabalho offline
Apresentações em inglês
Acesso por link
Link legível
Do link para a apresentação https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html, o seguinte é imediatamente claro:
- Autor: kvanttt
- Data de publicação: 2018-05-15
- Formato: Apresentações (também pode haver, por exemplo, Artigos , Amostras )
- Língua: Inglês
- Título: Analisadores de código-fonte, como são generalizáveis
- Você também pode consultar qualquer página da apresentação usando o sinal numérico
#/5 .
Temas escuros e claros
Para a melhor adaptação à iluminação ou humor. Você também pode criar o seu próprio.
Você também pode alterar o estilo das transições entre os slides.
Integração com sistemas de controle de versão (Git)
O GitHub pode ser configurado para que, quando você enviar para as gh-pages ou filial master , o site seja publicado imediatamente em uma hospedagem estática no domínio imtqy.com - isso é muito conveniente.
Aqui está a pasta de origem: https://github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they
Usando formato de texto sem formatação (Markdown)
O Markdown facilita a descrição:
- estilos de texto diferentes ( itálico , negrito ,
tachado , link , cotação, code snippet ), - títulos
- listas, ordenadas e não ordenadas,
- mesas
- spoilers,
- elementos adicionais que podem variar dependendo da implementação. Se necessário, você também pode usar tags HTML.
Exemplo das fontes de slides # ️ Text fingerprinting with zero-length characters Be careful what you copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. For example, I have inserted 5 such characters into this string, can you tell? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> ---
Notas do slide
Durante a apresentação, você pode pressionar S e observar as notas preparadas e o próximo slide. Além disso, você pode controlar a duração da sua conversa usando o timer. As notas podem ser exibidas no segundo monitor.
Usando emoji
Emoji pode ser usado para associar slides a imagens visuais. Infelizmente, eles ainda não são suportados no Habr, portanto você não verá o emoji no título acima deste parágrafo.
Jpg
Formato de compactação com perdas, adequado para fotos e imagens complexas com gradientes e paleta rica. Ruim para desenhos e gráficos com texto e sinais. Bom para o fundo.
PNG
Formato de compactação sem perdas, adequado para imagens com grandes áreas homogêneas e uma paleta limitada de cores. Não é necessário usá-lo para fotos, pois o tamanho do arquivo será muito maior. Bom para capturas de tela.
Svg
Por alguma razão, muitas pessoas esquecem o SVG, que possui as seguintes vantagens:
- dimensionar a imagem para qualquer tamanho sem perder a qualidade;
- integração com Git (formato de texto);
- você pode alterar cores, fontes e outros elementos diretamente no arquivo;
- tamanho de arquivo pequeno.
Suportado por todos os navegadores modernos - e até pelo Habr! Infelizmente, ele pode ser carregado no Habr apenas indiretamente .
Observe que a maioria das imagens neste artigo está no formato SVG.
Este é um fragmento do código fonte da imagem SVG em segundo plano deste slide <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == "admin"</text> </g> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == "validkey"</text> </g>
Usando IDEs simples e convenientes
Por exemplo, código do Visual Studio com plug-ins. A visualização à esquerda, a versão final (renderização) à direita ou no navegador. Há um plug-in de corretor ortográfico, plug-ins para gerar conteúdo (TOC), formatação de tabelas e outros.
Texto de apresentação fácil de imprimir
Livre para usar
Recursos adicionais
- Slides verticais: você pode rolar não apenas lateralmente, mas também verticalmente.
- Capacidade de criar uma apresentação sem escrever código usando slides.com .
- Capacidade de visualizar vários slides ao mesmo tempo para facilitar a navegação.
- Usando diferentes tipos de mosaico em segundo plano, usando o vídeo como pano de fundo.
- Apresentação de slides automática.
- E alguns outros recursos .
Você também pode experimentar uma versão interativa.
A apresentação parece simples e legal
Desvantagens
Obviamente, tudo tem desvantagens, e essa abordagem não é exceção:
- Desajeitada exportação para PDF , você precisa editar a saída. No entanto, também está disponível .
- Nenhuma exportação para PPTX .
- Não é muito fácil de dominar, especialmente para não programadores e desenvolvedores de front-end (idealmente, você precisa conhecer HTML e CSS ).
- Não é muito fácil fazer edições. Mas você pode adaptá-lo e automatizá-lo.
- Os emoji não são exibidos da mesma maneira em todos os lugares (por exemplo, você não verá o emoji nesta frase).
- O motor ainda é bruto.
Conclusão
Parece-me que as apresentações futuras serão assim: interativas, no formato de sites fáceis de editar para programadores e designers. Vamos tentar aproximar esse futuro!
A propósito, os artigos também podem ser escritos usando Git e Markdown e hospedados no GitHub ou GitLab. Vou escrever sobre isso mais tarde.
Se você tiver alguma correção ou acréscimo, escreva seus comentários abaixo. Vou considerá-los e possivelmente incluir no artigo.
As fontes do artigo estão disponíveis no GitHub - envie Pull Request se encontrar algum erro. Para converter para o formato habr.com, eu uso a biblioteca MarkConv .