Parece que tive a chance de fazer dezenas de apresentações para colegas, clientes e aparições públicas para minha carreira em TI. Por muitos anos, o Powerpoint, como meio de fazer slides, permaneceu para mim uma escolha natural e confiável. Mas este ano a situação mudou qualitativamente. De fevereiro a maio, tive a oportunidade de falar em cinco conferências, e os slides dos relatórios tiveram que ser preparados em pouco tempo, mas com alta qualidade. Surgiu a questão de delegar essa parte do trabalho, quanto ao design visual dos slides, a outras pessoas. Certa vez, tentei trabalhar com um designer enviando arquivos .pptx por correio, mas o trabalho se transformou em caos: ninguém sabia qual versão dos slides era "mais nova" e o layout "foi" devido à diferença nas versões e fontes do Powerpoint em nossas máquinas . E eu decidi tentar algo novo. Eu tentei e, desde então, não penso em retornar ao Powerpoint.
O que nós queremos
Há cerca de um ano e meio, a empresa recusou-se a usar o Word para criar a documentação do projeto, diante dos mesmos problemas: embora o Word seja bom para digitar um pequeno documento, à medida que os volumes aumentam, há dificuldades em trabalhar juntos e obter design unificado e de alta qualidade. Nossa escolha recaiu sobre o AsciiDoctor e não paramos de nos alegrar com essa escolha, mas este é um tópico para um artigo separado. Na mesma época, aprendemos a eficácia de um dos princípios do DevOps de "tudo como código"; portanto, a escolha dos requisitos da nova tecnologia para a criação de slides da apresentação era bastante óbvia:
- A apresentação deve ser um arquivo de texto sem formatação em uma linguagem de marcação.
- Temos slides sobre projetos de desenvolvimento, portanto, a marcação deve permitir a inserção fácil, sem recorrer a sistemas externos
- sintaxe destacada fragmentos de código,
- diagramas simples na forma de formas geométricas conectadas por setas,
- Diagramas UML, fluxogramas e muito mais.
- O projeto de apresentação deve ser armazenado em um sistema de controle de versão.
- A validação e montagem dos slides finalizados devem ser feitas no sistema de IC.
Hoje existem duas opções básicas para a criação de slides em linguagens de marcação: o pacote beamer para o LaTeX ou uma das estruturas para criação de slides em HTML / CSS ( RevealJS , observação , deck.js e muitos outros).
Embora minha alma esteja com o LaTeX, minha mente sugeriu que a escolha de uma solução que não usarei sozinha deveria estar do lado da solução, familiar a um círculo mais amplo de pessoas. Nem todo mundo conhece o LaTeX, e se sua prática cotidiana não está relacionada à escrita de artigos científicos, é improvável que você tenha tempo para mergulhar no vasto e intrincado mundo deste sistema.
No entanto, o domínio do HTML / CSS não significa que a habilidade onipresente seja: Eu, por exemplo, não a possuo totalmente. Felizmente, o familiar AsciiDoctor vem em socorro: o conversor asciidoctor-discoverjs permite criar slides RevealJS usando a marcação AsciiDoctor. E é tão fácil de aprender e acessível a todos!
Como codificar slides
Para entender a essência da codificação de slides no AsciiDoctor, é mais fácil dar exemplos específicos. Todos eles são de slides reais que eu fiz para minhas palestras da conferência este ano.
Um slide com um cabeçalho e uma lista em um após o outro, abrindo parágrafos:
== Streams API? [%step] * Real-time stream processing * Stream-like API (map / reduce) * : ** offset commit ** ** **
Cabeçalho e trecho de código-fonte com destaque de sintaxe:
== Kafka Streams API: KStreams- [source,java] ---- StreamsConfig config = ...; // Topology topology = new StreamsBuilder() // ....build(); ----
No processo de preparação do relatório, os exemplos de código de demonstração sofrem repetidas alterações e melhorias, portanto, a oportunidade de copiar e colar rapidamente o "código bruto" diretamente no slide é inestimável, garantindo a relevância do exemplo de demonstração e não se preocupando com o destaque da sintaxe.
O título, ilustração e texto (o layout no slide é executado nas células da tabela AsciiDoctor ):
== Kafka Streams in Action [.custom-style] [cols="30a,70a"] |=== |image::KSIA.jpg[] | * **William Bejeck**, + “Kafka Streams in Action”, November 2018 * Kafka 1.0 |===
Às vezes, o título não é necessário, mas para ilustrar seus pensamentos, você só precisa de uma imagem em tela cheia:
[%notitle] == image::swampman.jpg[canvas, size=cover]
Muitas vezes, a idéia precisa ser apoiada por um diagrama simples, na forma de "quadrados conectados por setas". Felizmente, o AsciiDoctor está integrado ao sistema Graphviz , uma linguagem que permite descrever gráficos com base nas descrições dos vértices e nas relações entre eles. O Graphviz precisa ser dominado, mas com base nos exemplos existentes, isso é bastante fácil! Aqui está o que parece:
== “Bet Totalling App” , ? [graphviz, "counting-topology.png"] ----- digraph G { graph [ dpi = 150 ]; rankdir="LR"; node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"]; Store [shape="cylinder"; label="Local Store"; fixedsize="true"; width="1.5"] Source -> MapVal -> Sum -> Sink Sum -> Store [dir=both; label=" \n "] {rank = same; Store; Sum;} } -----
No caso em que é necessário editar a assinatura na figura, alterar a direção da seta, etc., isso pode ser feito diretamente no código da apresentação, em vez de redesenhar a imagem em algum lugar e reinserir no slide. Isso aumenta muito a velocidade do trabalho nos slides.
Um exemplo é mais complicado:
== [graphviz, "unstable-update.png"] ----- digraph G { rankdir="LR"; graph [ dpi = 150 ]; u -> r0; u[shape=plaintext; label="linter update\n+ 13 warnings"] r0[shape=point, width = 0] r1 -> r0[ arrowhead = none, label="master branch" ]; r0-> r2 []; b1 -> b4; r1->b1 r1[label="150\nwarnings"] b1[label="± 0\nwarnings"] b4[label="± 0\nwarnings"] b4->r2 r2[label="163\nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>] {rank = same; u; r0; b4;} } -----
A propósito, experimentar o Graphviz e depurar imagens é conveniente na página online do Graphviz .
Finalmente, se você precisar inserir um diagrama de blocos, um diagrama de classes ou outro diagrama padronizado no slide, outro sistema integrado ao AsciiDoctor, PlantUML , poderá ajudar . Meu colega Nikolai Potashnikov escreveu um post separado sobre as vastas capacidades do PlantUML.
A transformação do projeto de apresentação em código armazenado no sistema de controle de versão torna possível organizar o trabalho conjunto na apresentação, antes de tudo, para separar as tarefas de criação de conteúdo e design. O design dos slides (fontes, planos de fundo, recuos) no RevealJS é descrito usando CSS. Minha habilidade pessoal em CSS é melhor transmitida por esse GIF - mas não é assustador quando há pessoas que trabalham com CSS muito mais ágil e mais rápido que eu. Como resultado, no contexto de um prazo de apresentação que se aproxima rapidamente, podemos trabalhar simultaneamente em arquivos diferentes por meio do Git e desenvolver a velocidade da colaboração que é impossível ao enviar arquivos .pptx por email.
Crie uma página HTML com slides
As fontes de texto simples são ótimas, mas como você as compila na própria apresentação?
O AsciiDoctor é um projeto Ruby e você pode executá-lo de várias maneiras. Primeiramente, você pode instalar a linguagem Ruby e executar o asciidoctor diretamente, o que provavelmente será o mais próximo dos desenvolvedores do Ruby.
Se você não deseja se envolver na instalação do Ruby, pode usar a imagem da janela de encaixe asciidoctor / docker-asciidoctor , na qual você pode conectar a pasta de origem do projeto via VOLUME e obter o resultado no local especificado.
A opção em que decidi pode parecer um tanto inesperada, mas é mais conveniente para mim como desenvolvedor Java. Ele não requer a instalação do Ruby ou da janela de encaixe, mas permite gerar slides usando um script Maven.
O fato é que o projeto JRuby - a implementação Java da linguagem Ruby - é tão bom que permite executar quase tudo o que é criado para Ruby na máquina Java, e executar o AsciiDoctor é um dos aplicativos mais comuns do JRuby.
A presença do asciidoctor-maven-plugin permite coletar a documentação do AsciiDoctor, que faz parte do projeto Java (que usamos ativamente). Ao mesmo tempo, o AsciiDoctor e o JRuby são baixados automaticamente pelo Maven e o AsciiDoctor é executado no ambiente do JRuby: nada precisa ser instalado na máquina! (Exceto pelo pacote graphviz , necessário para usar os gráficos GraphViz ou PlantUML.) Apenas coloque seus arquivos .adoc na src/main/asciidoc/ . Aqui está um exemplo de uma pickhouse coletando slides do diagrama.
Converter slides em PDF
Embora a versão HTML dos slides seja completamente auto-suficiente, ainda é necessário ter uma versão em PDF dos slides. Primeiramente, acontece que em algumas conferências que não oferecem ao palestrante a capacidade de conectar seu próprio laptop, eles exigem slides "estritamente em formato pptx ou pdf", sem esperar que eles também venham em HTML. Em segundo lugar, é uma boa forma enviar aos organizadores uma versão inalterada dos seus slides no formulário conforme mostrado no relatório, em formato PDF para publicação do arquivo nos materiais da conferência.
Felizmente, o Node.js é um utilitário de decktape criado com base no Puppeteer , o sistema de automação do navegador Chrome, que lida com essa tarefa. Você pode converter a apresentação do RevealJS em PDF com o comando
node decktape.js -s 3200x1800 --slides 1-500 \ reveal "file:///index.html?fragments=true" slides.pdf
Dois truques para iniciar a decktape, que tiveram que ser tentados e errados:
a resolução através do parâmetro -s deve ser definida com uma margem dupla, caso contrário, poderá haver problemas com os resultados da conversão
você precisa passar o parâmetro ?fragments=true no URL da versão HTML da apresentação, o que permitirá criar uma página PDF separada para cada estado intermediário do slide (por exemplo, cinco páginas para cinco itens da lista, se eles forem exibidos um após o outro). Isso permitirá o uso desse PDF em si como uma apresentação em um relatório.
Crie e publique automaticamente na Web
É conveniente quando os slides são coletados automaticamente quando as alterações caem no sistema de controle de versão e ainda mais conveniente quando os slides compilados automaticamente são postados na Internet para uso geral. Slides da Internet podem ser facilmente "reproduzidos" na frente de um público a partir de qualquer máquina conectada à Internet e ao projetor.
Como usamos o GitHub em nosso trabalho, a escolha natural para o sistema de CI é o TravisCI e para hospedar apresentações prontas - imtqy.com . A idéia do imtqy.com é que qualquer conteúdo estático colocado na ramificação gh-pages do seu projeto no GitHub fique disponível em < >.gihub.io/< > .
O arquivo de configuração completo do TravisCI, que inclui a compilação da versão HTML da página usando o Maven, a conversão para PDF usando a decktape e o upload dos resultados no ramo gh-pages para publicação no imtqy.com, é semelhante a este .
Para criar esse projeto ao lado do TravisCI, você precisa configurar variáveis de ambiente
GH_REF - valor do formulário github.com/inponomarev/csa-hbGH_TOKEN - token de acesso do GitHub. Você pode obtê-lo no GitHub nas configurações do seu perfil, Configurações do desenvolvedor -> Tokens de acesso pessoal. Se você fizer upload da apresentação em um repositório público, para esse token, basta especificar o único nível de acesso "Acessar repositórios públicos".GH_USER_EMAIL / GH_USER_NAME - par nome / email, em nome do qual o envio para a ramificação gh-pages será implementado.
Assim, cada confirmação do código de apresentação no GitHub reconstruirá automaticamente os slides nos formatos HTML e PDF e os recarregará no imtqy.com. (Obviamente, apenas as apresentações que você deseja tornar públicas no final devem ser carregadas no imtqy.com.)
Exemplos de Projetos
Por fim, existem links para alguns exemplos de projetos de apresentação com scripts Maven personalizados e configuração de IC para o Travis-CI, que você pode clonar e usar ao criar seus próprios projetos de apresentação:
Adeus Powerpoint! Acho que nunca precisarei de você para apresentações técnicas :-)