Ik tink dat ik yn myn IT-karriêre tsientallen presintaasjes jûn haw oan kollega's, kliïnten en sprekkers yn it iepenbier. Foar in protte jierren hat Powerpoint in natuerlike en betroubere kar foar my west as ark foar diaproduksje. Mar dit jier is de situaasje kwalitatyf feroare. Fan febrewaris oant maaie hie ik de kâns om te sprekken op fiif konferinsjes, en de dia's foar de rapporten moasten yn koarte tiid, mar mei hege kwaliteit, taret wurde. De fraach ûntstie oer it delegearjen fan dat diel fan it wurk oangeande it fisuele ûntwerp fan de dia's oan oare minsken. Ik haw ienris besocht om te wurkjen mei in ûntwerper, it ferstjoeren fan .pptx-bestannen per post, mar it wurk feroare yn gaos: gjinien wist hokker ferzje fan 'e dia's de "nijste" wie, en de yndieling wie "bewege" troch it ferskil yn Powerpoint ferzjes en lettertypen op ús masines. En ik besleat wat nijs te besykjen. Ik besocht it, en sûnt doe haw ik net tocht oer werom te gean nei Powerpoint.
Wat wolle wy
Года полтора назад мы в компании отказались от использования Word для создания проектной документации, столкнувшись с теми же проблемами: хотя Word хорош для того, чтобы набрать небольшой документ, по мере роста объёмов, возникают трудности с совместной работой и получением качественного и унифицированного оформления. Наш выбор пал на , и выбору этому мы не перестаём радоваться, но это тема для отдельной статьи. Примерно тогда же мы познали эффективность одного из DevOps-принципов «everything as code», поэтому выбор требований для новой технологии создания презентационных слайдов был довольно очевидным:
- De presintaasje moat in platte tekstbestân wêze yn in markuptaal.
- Слайды у нас про проекты разработки, поэтому разметка должна позволять легко, не прибегая к помощи внешних систем, вставлять
- koade fragminten mei syntaksis markearring,
- простые диаграммы в виде геометрических фигур, соединённых стрелками,
- UML-diagrammen, flowcharts en mear.
- It presintaasjekonsept moat wurde opslein yn in ferzjekontrôlesysteem.
- Validaasje en gearstalling fan klear dia 's moatte wurde dien yn in CI systeem.
На сегодня возможны два базовых варианта создания слайдов на языках разметки: пакет foar LaTeX of ien fan 'e kaders foar it meitsjen fan dia's mei HTML/CSS (, , en in protte oaren).
Hoewol myn siel yn LaTeX leit, diktearre myn geast dat de kar fan in oplossing dy't ik net de iennichste wêze soe dy't soe wêze moatte oan 'e kant fan in oplossing dy't bekend is foar in bredere kring fan minsken. Net elkenien wit LaTeX, en as jo deistige praktyk net relatearre is oan it skriuwen fan wittenskiplike artikels, dan binne jo net wierskynlik tiid om josels te ferdjipjen yn 'e enoarme, yngewikkelde wrâld fan dit systeem.
Впрочем, и владение HTML/CSS — не сказать чтобы повсеместно распространённый навык: я, например, им владею далеко не в полной мере. К счастью, тут на помощь приходит уже знакомый нам AsciiDoctor: конвертер позволяет создавать RevealJS-слайды, используя AsciiDoctor-разметку. А уж она-то проста для изучения и доступна каждому!
Hoe koade dia's
Чтобы понять суть кодирования слайдов на AsciiDoctor, проще всего привести конкретные примеры. Все они — из реальных слайдов, которые я делал для своих конференционных докладов в этом году.
In dia mei in titel en in list yn items dy't ien nei de oare iepenje:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеresultaat
Koptekst en boarne koade snippet mei syntaksis markearring:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----resultaat
В процессе подготовки к докладу демонстрационные примеры кода подвергаются неоднократным переделкам и улучшениям, поэтому бесценна возможность быстро скопировать и вставить «сырой код» прямо в слайд, обеспечивая актуальность демо-примера и не заботясь о подсветке синтаксиса.
Titel, yllustraasje en tekst (opmaak op 'e dia wurdt dien yn sellen ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===resultaat
Иногда заголовок не нужен, а для иллюстрации твоей мысли нужна просто картинка во весь экран:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]resultaat
Часто мысль необходимо подкрепить простой диаграммой, в виде «квадратиков, соединённых стрелочками». К счастью, AsciiDoctor интегрирован с системой — языком, позволяющим описывать графовые диаграммы на основании описания вершин и связей между ними. Graphviz нужно осваивать, но на основе имеющихся примеров сделать это довольно легко! Вот как это выглядит:
== Пишем “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;}
}
-----resultaat
В случае, когда необходимо отредактировать подпись на фигуре, изменить направление стрелки и т. п. — это можно сделать непосредственно в коде презентации, вместо того, чтобы перерисовывать где-то картинку и заново вставлять её в слайд. Это значительно увеличивает скорость работы над слайдами.
In mear komplisearre foarbyld:
== Невоспроизводимая сборка
[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;}
}
-----resultaat
Кстати, экспериментировать с Graphviz и отлаживать картинки удобно на странице .
Наконец, если нужно вставить в слайд блок-схему, диаграмму классов или иную стандартизованную диаграмму, то в этом случае на помощь может прийти ещё одна интегрированная с AsciiDoctor система, . Про обширные возможности PlantUML мой коллега Николай Поташников написал .
It transformearjen fan it presintaasjeprojekt yn koade opslein op in ferzjekontrôlesysteem makket it mooglik om mienskiplik wurk op 'e presintaasje te organisearjen, earst fan alle, om de taken fan it meitsjen fan ynhâld en ûntwerp te skieden. It ûntwerp fan dia's (lettertypen, eftergrûnen, ynspringen) yn RevealJS wurdt beskreaun mei CSS. Myn persoanlike feardigens mei CSS wurdt it bêste oerbrocht troch — но это не страшно, когда есть люди, работающие с CSS гораздо ловчее и быстрее меня. В итоге получается, что в условиях стремительно приближающегося дедлайна по презентации мы можем работать одновременно над разными файлами через Git и развивать скорость совместной работы, невозможную при пересылке по почте файлов .pptx.
It bouwen fan in HTML-side mei dia's
Plain text-исходники — это здорово, но как их скомпилировать в саму презентацию?
AsciiDoctor — это проект, написанный на Ruby, и запустить его можно несколькими способами. Во-первых, вы можете установить язык Ruby и запускать asciidoctor напрямую, что, наверное, будет наиболее близко Ruby-разработчикам.
Если не хочется связываться с установкой Ruby, можно воспользоваться docker-образом , в который при запуске можно через VOLUME подключить папку с исходниками проекта и в заданном месте получить результат.
Вариант, на котором остановился я, может показаться несколько неожиданным, но он наиболее удобен мне как Java-разработчику. Он не требует ни установки Ruby, ни наличия docker, зато позволяет генерировать слайды с помощью Maven-скрипта.
It punt is dat it projekt — Java-реализация языка Ruby — настолько хорош, что позволяет запускать в Java-машине практически всё, что создано для Ruby, и запуск AsciiDoctor — одно из наиболее частых применений JRuby.
beskikberens позволяет собирать AsciiDoctor-документацию, являющуюся частью Java-проекта (чем мы активно пользуемся). При этом AsciiDoctor и JRuby скачиваются Maven-ом автоматически, и AsciiDoctor выполняется в среде JRuby: ничего устанавливать на машину не надо! (За исключением пакета graphviz, который нужен, если вы хотите использовать графику GraphViz или PlantUML.) Достаточно поместить ваши .adoc-файлы в папку src/main/asciidoc/. Hjir it sammeljen fan dia's mei diagrammen.
Konvertearje dia's nei PDF
Hoewol de HTML-ferzje fan 'e dia's frij selsfoarsjennend is, is it noch altyd nedich om in PDF-ferzje fan' e dia's te hawwen. As earste bart it dat op guon konferinsjes dy't de sprekker net de mooglikheid jouwe om syn eigen laptop te ferbinen, se dia's nedich binne "strikt yn pptx- of pdf-formaat", sûnder te ferwachtsjen dat se ek yn HTML binne. Twads is it in goede foarm om de organisatoaren in net-bewurke ferzje fan jo dia's te stjoeren sa't se waarden werjûn yn it rapport, yn PDF-formaat foar publikaasje fan it bestân yn 'e konferinsjematerialen.
К счастью, с этой задачей справляется Node.js утилита , boud op basis — системы автоматизации управления браузером Chrome. Сконвертировать RevealJS презентацию в PDF можно командой
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Две хитрости при запуске decktape, к которым пришлось прийти методом проб и ошибок:
-
resolúsje fia parameter
-sнадо задавать с двухкратным запасом, иначе возможны проблемы с результатами конвертации -
в URL HTML-версии презентации надо передавать параметр
?fragments=true, что позволит создавать отдельную PDF- страницу для каждого промежуточного состояния вашего слайда (например, пять страниц для пяти пунктов списка, если они показываются один за другим). Это позволит использовать такой PDF сам по себе в качестве презентации при докладе.
Automatysk gearstalling en publisearjen op it web
Удобно, когда слайды собираются автоматически при попадании изменений в систему контроля версий, и ещё удобнее, когда автоматически скомпилированные слайды выкладываются в интернет для всеобщего использования. Слайды из интернета можно легко «проиграть» перед аудиторией с любой машины, подсоединённой к интернету и проектору.
Om't wy GitHub yn ús wurk brûke, is de natuerlike kar fan in CI-systeem , en foar it hostjen fan klearmakke presintaasjes - . It idee efter github.io is dat elke statyske ynhâld pleatst nei in branch gh-pages fan jo projekt op GitHub, wurdt beskikber by <ваше имя>.gihub.io/<ваш проект>.
Полный конфигурационный файл TravisCI, включающий в себя компиляцию HTML-версии страницы с помощью Maven, конвертацию в PDF при помощи decktape и выгрузку результатов в ветку gh-pages foar publikaasje op github.io, liket .
Для сборки такого проекта на стороне TravisCI необходимо настроить переменные среды
GH_REF- wearde lykas github.com/inponomarev/csa-hbGH_TOKEN— токен доступа к GitHub. Можно получить в GitHub-е в настройках своего профиля, Developer Settings -> Personal Access Tokens. Если вы выкладываете презентацию в публичный репозиторий, то для этого токена достаточно указать единственный уровень доступа «Access public repositories».GH_USER_EMAIL/GH_USER_NAME- namme-/e-postpear út namme wêrfan de druk nei de tried sil wurde útfierdgh-pages.
Таким образом, каждый коммит кода презентации на GitHub приводит к автоматическому перестроению слайдов в форматах HTML и PDF и перезаливке их на github.io. (Конечно же, выкладывать на github.io нужно лишь те презентации, которые вы хотите в итоге сделать публичными.)
Foarbylden fan projekten
Напоследок — ссылки на пару примеров проектов презентаций с настроенными Maven-скриптами и CI-конфигурацией для Travis-CI, которые можно клонировать и использовать при создании собственных проектов презентаций:
-
(myn petear foar JPoint 2019)
-
(myn rapport foar Heisenbug 2019)
Прощай, Powerpoint! Не думаю, что ты мне когда-нибудь понадобишься для технических презентаций 🙂
Boarne: www.habr.com