Creo que fixen decenas de presentacións a colegas, clientes e falar en público na miña carreira en TI. Durante moitos anos, Powerpoint foi unha opción natural e fiable para min como ferramenta de produción de diapositivas. Pero este ano a situación cambiou cualitativamente. De febreiro a maio tiven a oportunidade de falar en cinco conferencias, e as diapositivas dos relatorios tiveron que estar elaboradas en pouco tempo, pero con gran calidade. Xurdiu a cuestión de delegar esa parte do traballo relativa ao deseño visual das diapositivas noutras persoas. Unha vez tentei traballar cun deseñador, enviando ficheiros .pptx por correo, pero o traballo converteuse nun caos: ninguén sabía que versión das diapositivas era a "máis nova" e o deseño estaba "movéndose" debido á diferenza de Powerpoint. versións e fontes nas nosas máquinas. E decidín probar algo novo. Probeino, e desde entón non pensei en volver a Powerpoint.
Que queremos
Hai un ano e medio aproximadamente, a nosa empresa deixou de utilizar Word para crear documentación do proxecto, tendo atopado os mesmos problemas: aínda que Word é bo para teclear un documento pequeno, a medida que aumenta o volume xorden dificultades coa colaboración e a obtención de calidade e calidade. deseño unificado. A nosa elección recaeu , e nunca deixamos de alegrarnos por esta elección, pero este é un tema para un artigo aparte. Ao mesmo tempo, aprendemos a eficacia dun dos principios de DevOps de "todo como código", polo que a elección dos requisitos para a nova tecnoloxía para crear diapositivas de presentación era bastante obvia:
- A presentación debe ser un ficheiro de texto sinxelo nunha linguaxe de marcado.
- As nosas diapositivas son sobre proxectos de desenvolvemento, polo que o marcado debería facilitar a súa inserción, sen recorrer a sistemas externos
- fragmentos de código con resaltado de sintaxe,
- diagramas sinxelos en forma de formas xeométricas conectadas por frechas,
- Diagramas UML, diagramas de fluxo e moito máis.
- O borrador da presentación debe almacenarse nun sistema de control de versións.
- A validación e montaxe das diapositivas rematadas debe realizarse nun sistema CI.
Hoxe, hai dúas opcións básicas para crear diapositivas en linguaxes de marcado: paquete para LaTeX ou un dos marcos para crear diapositivas usando HTML/CSS (, , e moitos outros).
Aínda que a miña alma reside no LaTeX, a miña mente ditou que a elección dunha solución que non sería o único que usara debería estar do lado dunha solución familiar para un círculo máis amplo de persoas. Non todos coñecen LaTeX, e se a túa práctica diaria non está relacionada coa escritura de artigos científicos, é improbable que teñas tempo para mergullarte no enorme e intrincado mundo deste sistema.
Non obstante, o dominio de HTML/CSS non é precisamente unha habilidade estendida: eu, por exemplo, estou lonxe de ser totalmente competente nel. Afortunadamente, o xa familiar AsciiDoctor vén ao rescate: un conversor permítelle crear diapositivas RevealJS usando as marcas de AsciiDoctor. E é fácil de aprender e accesible para todos!
Como codificar diapositivas
Para comprender a esencia da codificación de diapositivas en AsciiDoctor, o xeito máis sinxelo é dar exemplos específicos. Estas son todas de diapositivas reais que fixen para as presentacións da miña conferencia este ano.
Unha diapositiva cun título e unha lista de elementos que se abren un despois do outro:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеResultado
Cabeceira e fragmento de código fonte con resaltado de sintaxe:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Resultado
Como preparación para unha charla, as demostracións de código sofren varias revisións e melloras, polo que a capacidade de copiar e pegar rapidamente o "código en bruto" directamente nunha diapositiva é inestimable, garantindo que a demostración estea actualizada sen preocuparse polo resaltado da sintaxe.
Título, ilustración e texto (a disposición da diapositiva faise en celas ):
== 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 veces non é necesario un título e para ilustrar o teu punto só necesitas unha imaxe a pantalla completa:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Resultado
Moitas veces, unha idea debe ser apoiada por un diagrama sinxelo, en forma de "cadrados conectados por frechas". Afortunadamente, AsciiDoctor está integrado co sistema — unha linguaxe que permite describir diagramas gráficos baseados na descrición de vértices e conexións entre eles. Graphviz toma unha curva de aprendizaxe, pero en función dos exemplos proporcionados, é bastante sinxelo de facelo. Este é 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
No caso de que sexa necesario editar a lenda da figura, cambiar a dirección da frecha, etc., pódese facer directamente no código de presentación, en lugar de volver debuxar a imaxe nalgún lugar e reinsertala na diapositiva. Isto aumenta significativamente a velocidade de traballo en diapositivas.
Un exemplo máis 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
Por certo, é conveniente experimentar con Graphviz e depurar imaxes na páxina .
Finalmente, se precisa inserir un diagrama de fluxo, un diagrama de clases ou outro diagrama estandarizado nunha diapositiva, outro sistema integrado con AsciiDoctor pode acudir ao rescate. . O meu colega Nikolai Potashnikov escribiu sobre as amplas capacidades de PlantUML .
Converter o proxecto de presentación en código almacenado nun sistema de control de versións permite organizar un traballo conxunto sobre a presentación, en primeiro lugar, para separar as tarefas de creación de contido e deseño. O deseño de diapositivas (tipos de letra, fondos, sangrías) en RevealJS descríbese mediante CSS. A miña habilidade persoal con CSS é mellor transmitida por - pero non dá medo cando hai xente que traballa con CSS moito máis destreza e máis rápida ca min. Como resultado, resulta que coa data límite para unha presentación que se achega rapidamente, podemos traballar en diferentes ficheiros simultaneamente a través de Git e desenvolver unha velocidade de colaboración imposible ao enviar ficheiros .pptx por correo.
Construír unha páxina HTML con diapositivas
As fontes de texto simple son xeniais, pero como as compilas na propia presentación?
AsciiDoctor é un proxecto escrito en Ruby, e hai varias formas de executalo. En primeiro lugar, pode instalar a linguaxe Ruby e executar asciidoctor directamente, que probablemente sexa o máis parecido aos desenvolvedores de Ruby.
Se non queres xogar coa instalación de Ruby, podes usar a imaxe do docker , no que, cando se inicia, pode conectar o cartafol coas fontes do proxecto a través de VOLUME e obter o resultado nun lugar determinado.
A opción que escollín pode parecer algo inesperada, pero é a máis conveniente para min como programador de Java. Non require a instalación de Ruby ou docker, pero permíteche xerar diapositivas mediante un script Maven.
A cuestión é que o proxecto - A implementación Java da linguaxe Ruby é tan boa que che permite executar case calquera cousa creada para Ruby nunha máquina Java, e executar AsciiDoctor é un dos usos máis comúns de JRuby.
dispoñibilidade permítelle recoller documentación de AsciiDoctor que forma parte dun proxecto Java (que usamos activamente). Ao mesmo tempo, AsciiDoctor e JRuby son descargados automaticamente por Maven, e AsciiDoctor execútase no ambiente JRuby: non é necesario instalar nada na máquina. (Paquete excluído graphviz, que é necesario se quere usar gráficos GraphViz ou PlantUML.) Simplemente coloque os seus ficheiros .adoc nun cartafol src/main/asciidoc/... Aquí recollendo diapositivas con diagramas.
Converter diapositivas a PDF
Aínda que a versión HTML das diapositivas é bastante autosuficiente, aínda é necesario ter unha versión PDF das diapositivas. En primeiro lugar, ocorre que nalgunhas conferencias que non ofrecen ao relator a posibilidade de conectar o seu propio portátil, requiren diapositivas "estrictamente en formato pptx ou pdf", sen esperar que tamén estean en HTML. En segundo lugar, é unha boa forma enviar aos organizadores unha versión sen editar das súas diapositivas tal e como se mostraban no informe, en formato PDF para a súa publicación nos materiais da conferencia.
Afortunadamente, a utilidade Node.js xestiona esta tarefa. , construído sobre a base — sistemas de automatización para xestionar o navegador Chrome. Podes converter a presentación de RevealJS en PDF co comando
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dous trucos ao lanzar decktape, que tivemos que atopar por proba e erro:
-
resolución mediante parámetro
-sdebe especificarse cunha marxe dobre, se non, pode haber problemas cos resultados da conversión -
no URL da versión HTML da presentación cómpre pasar un parámetro
?fragments=true, que creará unha páxina PDF separada para cada estado intermedio da túa diapositiva (por exemplo, cinco páxinas por cinco viñetas se se mostran unha tras outra). Isto permitirache usar un PDF por si só como presentación durante un informe.
Montaxe e publicación automática na web
É conveniente cando as diapositivas se compilan automaticamente cando se fan cambios no sistema de control de versións, e aínda máis cómodo cando as diapositivas compiladas automaticamente se publican en Internet para uso público. As diapositivas de Internet pódense "reproducir" facilmente diante dun público desde calquera máquina conectada a Internet e un proxector.
Dado que usamos GitHub no noso traballo, a elección natural dun sistema de CI é , e para aloxar presentacións xa preparadas - . A idea detrás de github.io é que calquera contido estático se publique nunha rama gh-pages do teu proxecto en GitHub, está dispoñible en <ваше имя>.gihub.io/<ваш проект>.
Ficheiro de configuración completo de TravisCI, incluíndo a compilación da versión HTML da páxina usando Maven, a conversión a PDF usando decktape e a carga dos resultados nun fío de conversa gh-pages para publicación en github.io, parece .
Para construír un proxecto deste tipo no lado de TravisCI, cómpre configurar as variables de ambiente
GH_REF— valor como github.com/inponomarev/csa-hbGH_TOKEN— Token de acceso a GitHub. Podes obtelo desde GitHub na configuración do teu perfil, Configuración do programador -> Fichas de acceso persoal. Se cargas unha presentación nun repositorio público, para este token é suficiente con especificar o único nivel de acceso "Acceso a repositorios públicos".GH_USER_EMAIL/GH_USER_NAME— parella nome/correo electrónico en nome do cal se levará a cabo o push ao fíogh-pages.
Así, cada commit do código de presentación en GitHub fai que as diapositivas sexan automaticamente reconstruídas en formatos HTML e PDF e que se volvan cargar en github.io. (Por suposto, só debes cargar en github.io aquelas presentacións que finalmente queiras facer públicas).
Exemplos de proxectos
Finalmente, aquí tes ligazóns a un par de exemplos de proxectos de presentación con scripts Maven personalizados e configuración de CI para Travis-CI, que se poden clonar e usar ao crear os teus propios proxectos de presentación:
-
(a miña charla para JPoint 2019)
-
(o meu informe para Heisenbug 2019)
Adeus Powerpoint! Creo que nunca te necesitarei para presentacións técnicas :)
Fonte: www.habr.com