Acho que fiz dezenas de apresentações para colegas, clientes e falei em público em minha carreira de TI. Por muitos anos, o Powerpoint tem sido uma escolha natural e confiável para mim como ferramenta de produção de slides. 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 muita qualidade. Surgiu a questão de delegar a outras pessoas essa parte do trabalho de design visual dos slides. Certa vez tentei trabalhar com um designer, enviando arquivos .pptx pelo correio, mas o trabalho virou um caos: ninguém sabia qual versão dos slides era a “mais nova”, e o layout estava “mexendo” devido à diferença no Powerpoint versões e fontes em nossas máquinas. E decidi tentar algo novo. Eu tentei e desde então não pensei em voltar ao Powerpoint.
O que queremos
Há cerca de um ano e meio, a nossa empresa deixou de usar o Word para criar documentação de projetos, tendo encontrado os mesmos problemas: embora o Word seja bom para digitar um documento pequeno, à medida que o volume aumenta, surgem dificuldades na colaboração e na obtenção de alta qualidade e projeto unificado. Nossa escolha recaiu sobre , e nunca deixamos de nos alegrar com essa escolha, mas este é um assunto para um artigo separado. Na mesma época, aprendemos a eficácia de um dos princípios do DevOps de “tudo como código”, então a escolha dos requisitos para a nova tecnologia de criação de slides de apresentação era bastante óbvia:
- A apresentação deve ser um arquivo de texto simples em linguagem de marcação.
- Nossos slides são sobre projetos de desenvolvimento, portanto a marcação deve facilitar a inserção, sem recorrer a sistemas externos
- fragmentos de código com destaque de sintaxe,
- diagramas simples na forma de formas geométricas conectadas por setas,
- Diagramas UML, fluxogramas e muito mais.
- O rascunho da apresentação deve ser armazenado em um sistema de controle de versão.
- A validação e montagem dos slides finalizados devem ser feitas em um sistema CI.
Hoje, existem duas opções básicas para criação de slides em linguagens de marcação: pacote para LaTeX ou um dos frameworks para criação de slides usando HTML/CSS (, , e muitos outros).
Embora minha alma esteja no LaTeX, minha mente ditou que a escolha de uma solução que eu não seria o único a usar deveria estar do lado de uma solução familiar a um círculo mais amplo de pessoas. Nem todo mundo conhece o LaTeX, e se sua prática diária não estiver relacionada à escrita de artigos científicos, é improvável que você tenha tempo para mergulhar no vasto e intrincado mundo desse sistema.
No entanto, o domínio de HTML/CSS não é exatamente uma habilidade generalizada: eu, por exemplo, estou longe de ser totalmente proficiente nisso. Felizmente, o já conhecido AsciiDoctor vem em socorro: um conversor permite criar slides RevealJS usando a marcação AsciiDoctor. E é fácil de aprender e acessível a todos!
Como codificar slides
Para entender a essência da codificação de slides no AsciiDoctor, a maneira mais fácil é dar exemplos específicos. Tudo isso são slides reais que fiz para minhas apresentações em conferências este ano.
Um slide com um título e uma lista de itens abrindo um após o outro:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеresultado
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();
----resultado
Na preparação para uma palestra, as demonstrações de código passam por repetidas revisões e melhorias, portanto, a capacidade de copiar e colar rapidamente o “código bruto” diretamente em um slide é inestimável, garantindo que a demonstração esteja atualizada sem se preocupar com o realce de sintaxe.
Título, ilustração e texto (o layout do slide é feito em células ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===resultado
Às vezes, um título não é necessário e, para ilustrar seu ponto de vista, você só precisa de uma imagem em tela inteira:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]resultado
Muitas vezes uma ideia precisa ser apoiada por um diagrama simples, na forma de “quadrados conectados por setas”. Felizmente, o AsciiDoctor está integrado ao sistema — uma linguagem que permite descrever diagramas gráficos com base na descrição de vértices e conexões entre eles. Graphviz exige uma curva de aprendizado, mas com base nos exemplos fornecidos, é muito fácil de fazer! Isto é 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;}
}
-----resultado
Caso seja necessário editar a legenda da figura, mudar a direção da seta, etc., isso pode ser feito diretamente no código da apresentação, ao invés de redesenhar a imagem em algum lugar e inseri-la novamente no slide. Isso aumenta significativamente a velocidade de 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 updaten+ 13 warnings"]
r0[shape=point, width = 0]
r1 -> r0[ arrowhead = none, label="master branch" ];
r0-> r2 []; b1 -> b4; r1->b1
r1[label="150nwarnings"]
b1[label="± 0nwarnings"]
b4[label="± 0nwarnings"]
b4->r2
r2[label="163nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>]
{rank = same; u; r0; b4;}
}
-----resultado
A propósito, é conveniente experimentar o Graphviz e depurar imagens na página .
Finalmente, se você precisar inserir um fluxograma, diagrama de classes ou outro diagrama padronizado em um slide, outro sistema integrado ao AsciiDoctor pode vir em seu socorro, . Meu colega Nikolai Potashnikov escreveu sobre os amplos recursos do PlantUML .
Transformar o projeto de apresentação em código armazenado em um sistema de controle de versão permite organizar o trabalho conjunto na apresentação, antes de mais nada, 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 com CSS é melhor transmitida por - mas não é assustador quando há pessoas que trabalham com CSS com muito mais habilidade e rapidez do que eu. Como resultado, verifica-se que com o prazo de uma apresentação se aproximando rapidamente, podemos trabalhar em diferentes arquivos simultaneamente via Git e desenvolver uma velocidade de colaboração que é impossível ao enviar arquivos .pptx por correio.
Construindo uma página HTML com slides
Fontes de texto simples são ótimas, mas como compilá-las na própria apresentação?
AsciiDoctor é um projeto escrito em Ruby e existem várias maneiras de executá-lo. Primeiro, você pode instalar a linguagem Ruby e executar o asciidoctor diretamente, que é provavelmente a coisa mais próxima dos desenvolvedores Ruby.
Se você não quiser mexer na instalação do Ruby, você pode usar a imagem docker , no qual, ao ser iniciado, você pode conectar a pasta com as fontes do projeto via VOLUME e obter o resultado em um determinado local.
A opção que escolhi pode parecer um tanto inesperada, mas é a mais conveniente para mim como desenvolvedor Java. Não requer instalação de Ruby ou docker, mas permite gerar slides usando um script Maven.
A questão é que o projeto - A implementação Java da linguagem Ruby é tão boa que permite executar quase tudo criado para Ruby em uma máquina Java, e executar AsciiDoctor é um dos usos mais comuns do JRuby.
disponibilidade permite coletar documentação AsciiDoctor que faz parte de um 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 JRuby: não há necessidade de instalar nada na máquina! (Excluindo pacote graphviz, que é necessário se você quiser usar gráficos GraphViz ou PlantUML.) Basta colocar seus arquivos .adoc em uma pasta src/main/asciidoc/. Aqui coletando slides com diagramas.
Converter slides em PDF
Embora a versão HTML dos slides seja bastante autossuficiente, ainda é necessário ter uma versão PDF dos slides. Em primeiro lugar, acontece que em algumas conferências que não dão ao palestrante a oportunidade de conectar seu próprio laptop, exigem slides “estritamente em formato pptx ou pdf”, sem esperar que também estejam em HTML. Em segundo lugar, é uma boa forma enviar aos organizadores uma versão não editada dos seus slides tal como foram apresentados no relatório, em formato PDF para publicação do arquivo nos materiais da conferência.
Felizmente, o utilitário Node.js cuida dessa tarefa. , construído com base — sistemas de automação para gerenciamento do navegador Chrome. Você pode converter a apresentação RevealJS em PDF com o comando
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dois truques ao lançar o decktape, que tivemos que inventar por tentativa e erro:
-
resolução via parâmetro
-sdeve ser especificado com uma margem dupla, caso contrário poderá haver problemas com os resultados da conversão -
na URL da versão HTML da apresentação você precisa passar um parâmetro
?fragments=true, que criará uma página PDF separada para cada estado intermediário do slide (por exemplo, cinco páginas para cinco marcadores, se forem mostrados um após o outro). Isso permitirá que você use esse PDF sozinho como apresentação durante um relatório.
Montagem e publicação automática na web
É conveniente quando os slides são compilados automaticamente quando são feitas alterações no sistema de controle de versão, e ainda mais conveniente quando os slides compilados automaticamente são publicados na Internet para uso público. Os slides da Internet podem ser facilmente “reproduzidos” diante de um público a partir de qualquer máquina conectada à Internet e a um projetor.
Como usamos o GitHub em nosso trabalho, a escolha natural de um sistema de CI é e para hospedar apresentações prontas - . A ideia por trás do github.io é que qualquer conteúdo estático postado em um branch gh-pages do seu projeto no GitHub, fica disponível em <ваше имя>.gihub.io/<ваш проект>.
Arquivo de configuração completo do TravisCI, incluindo compilação da versão HTML da página usando Maven, conversão para PDF usando decktape e upload dos resultados para um thread gh-pages para publicação no github.io, parece .
Para construir tal projeto no lado do TravisCI, você precisa configurar variáveis de ambiente
GH_REF- valor como github.com/inponomarev/csa-hbGH_TOKEN— Token de acesso 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 de uma apresentação para um repositório público, para este token basta especificar o único nível de acesso “Acessar repositórios públicos”.GH_USER_EMAIL/GH_USER_NAME— par nome/e-mail em nome do qual o push para o thread será realizadogh-pages.
Assim, cada commit do código de apresentação no GitHub resulta na reconstrução automática dos slides nos formatos HTML e PDF e reenvio para github.io. (Claro, você só deve enviar para o github.io as apresentações que deseja tornar públicas.)
Exemplos de projetos
Finalmente, aqui estão links para alguns exemplos de projetos de apresentação com scripts Maven customizados e configuração de CI para Travis-CI, que podem ser clonados e usados ao criar seus próprios projetos de apresentação:
-
(minha palestra para JPoint 2019)
-
(meu relatório para Heisenbug 2019)
Adeus PowerPoint! Acho que nunca precisarei de você para apresentações técnicas :)
Fonte: habr.com