Здається, мені довелося зробити десятки презентацій для колег, замовників та публічних виступів за мою кар'єру в ІТ. Багато років Powerpoint як засіб виготовлення слайдів залишався для мене природним та надійним вибором. Але цього року ситуація якісно змінилася. З лютого до травня мені довелося виступити на п'яти конференціях, і слайди до доповідей треба було готувати в стислий термін, але якісно. Постало питання делегування тієї частини роботи, що стосується візуального дизайну слайдів, іншим людям. Одного разу я спробував працювати з дизайнером, пересилаючи файли. . І я вирішив спробувати щось нове. Спробував, і з того часу не думаю повертатися до Powerpoint.
Що ми хочемо
Року півтора тому ми в компанії відмовилися від використання Word для створення проектної документації, зіткнувшись з тими самими проблемами: хоча Word хороший для того, щоб набрати невеликий документ, зі збільшенням обсягів, виникають труднощі зі спільною роботою та отриманням якісного та уніфікованого оформлення. Наш вибір ліг на і вибору цього ми не перестаємо радіти, але це тема для окремої статті. Приблизно тоді ми пізнали ефективність одного з DevOps-принципів «everything as code», тому вибір вимог для нової технології створення презентаційних слайдів був досить очевидним:
- Презентація повинна бути plain text-файл мовою розмітки.
- Слайди у нас про проекти розробки, тому розмітка має дозволяти легко, не вдаючись до допомоги зовнішніх систем, вставляти
- фрагменти коду з підсвічуванням синтаксису,
- прості діаграми у вигляді геометричних фігур, з'єднаних стрілками,
- UML-діаграми, блок-схеми та інше.
- Проект презентації має зберігатися у системі контролю версій.
- Валідація та складання готових слайдів має проводитися в CI-системі.
На сьогодні можливі два базові варіанти створення слайдів мовами розмітки: пакет для LaTeX або один із фреймворків для створення слайдів на HTML/CSS (, , і багато інших).
Хоча моя душа лежить до LaTeX-у, розум підказував, що вибір рішення, яким користуватимуся не я один, повинен бути на стороні рішення, знайомого ширшому колу осіб. LaTeX знають не всі, і якщо ваша щоденна практика не пов'язана з написанням наукових статей, то навряд чи ви знайдете час на занурення у величезний хитромудрий світ цієї системи.
Втім, і володіння HTML/CSS - не сказати щоб повсюдно поширена навичка: я, наприклад, ним володію далеко не повною мірою. На щастя, тут на допомогу приходить вже знайомий нам AsciiDoctor: конвертер дозволяє створювати RevealJS-слайди за допомогою AsciiDoctor-розмітки. А вже вона проста для вивчення і доступна кожному!
Як закодувати слайди
Щоб зрозуміти суть кодування слайдів на AsciiDoctor, найпростіше навести конкретні приклади. Усі вони — із реальних слайдів, які я робив для своїх конференційних доповідей цього року.
Слайд із заголовком і списком у пунктах, що відкриваються один за одним:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеРезультат
Заголовок та фрагмент вихідного коду з підсвічуванням синтаксису:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Результат
У процесі підготовки до доповіді демонстраційні приклади коду піддаються неодноразовим переробкам та поліпшенням, тому безцінна можливість швидко скопіювати та вставити «сирий код» прямо в слайд, забезпечуючи актуальність демо-прикладу та не дбаючи про підсвічування синтаксису.
Заголовок, ілюстрація та текст (розкладку по слайду виконуємо в осередках ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Результат
Іноді заголовок не потрібний, а для ілюстрації твоєї думки потрібна просто картинка на весь екран:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Результат
Часто думку необхідно підкріпити простою діаграмою, як «квадратиків, з'єднаних стрілочками». На щастя, 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;}
}
-----Результат
У разі, коли необхідно відредагувати підпис на фігурі, змінити напрямок стрілки тощо — це можна зробити безпосередньо в коді презентації, замість того, щоб перемальовувати десь картинку та заново вставляти її в слайд. Це значно підвищує швидкість роботи над слайдами.
Приклад складніше:
== Невоспроизводимая сборка
[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;}
}
-----Результат
До речі, експериментувати з Graphviz та налагоджувати картинки зручно на сторінці .
Зрештою, якщо потрібно вставити в слайд блок-схему, діаграму класів або іншу стандартизовану діаграму, то в цьому випадку на допомогу може прийти ще одна інтегрована система з AsciiDoctor, . Про великі можливості PlantUML мій колега Микола Поташников написав .
Перетворення проекту презентації на код, що зберігається на системі контролю версій, дає можливість організувати спільну роботу над презентацією, перш за все розділити завдання створення контенту та оформлення. Оформлення слайдів (шрифти, фони, відступи) у RevealJS описується за допомогою CSS. Моє особисте вміння керуватися CSS найкраще передає — але це не страшно, коли є люди, які працюють з CSS набагато спритніше і швидше за мене. У результаті виходить, що в умовах дедлайну, що стрімко наближається, по презентації ми можемо працювати одночасно над різними файлами через Git і розвивати швидкість спільної роботи, неможливу при пересиланні поштою файлів .pptx.
Складання HTML-сторінки зі слайдами
Plain text-вихідники – це чудово, але як їх скомпілювати у саму презентацію?
AsciiDoctor це проект, написаний на Ruby, і запустити його можна кількома способами. По-перше, ви можете встановити мову Ruby і запускати asciidoctor безпосередньо, що, напевно, буде найближчим до Ruby-розробників.
Якщо не хочеться зв'язуватися з установкою Ruby, можна скористатися docker-образом , в який під час запуску можна через VOLUME підключити папку з вихідними даними проекту і в заданому місці отримати результат.
Варіант, на якому зупинився я, може здатися дещо несподіваним, але він найзручніший мені як Java-розробнику. Він не вимагає ні встановлення Ruby, ні наявності docker, зате дозволяє генерувати слайди за допомогою Maven-скрипту.
Справа в тому, що проект - Java-реалізація мови Ruby - настільки гарний, що дозволяє запускати в Java-машині практично все, що створено для Ruby, і запуск AsciiDoctor - одне з найчастіших застосувань JRuby.
Наявність дозволяє збирати AsciiDoctor-документацію, що є частиною Java-проекту (що ми активно користуємося). При цьому AsciiDoctor та JRuby завантажуються Maven-ом автоматично, і AsciiDoctor виконується в середовищі JRuby: нічого встановлювати на машину не треба! (За винятком пакету graphviz, який потрібен, якщо ви хочете використовувати графіку GraphViz або PlantUML.) Достатньо помістити ваші .adoc-файли в папку src/main/asciidoc/. Ось збирає слайди з діаграмами.
Конвертація слайдів у PDF
Хоча HTML-версія слайдів цілком самодостатня, все ж таки мати PDF-варіант слайдів теж буває необхідно. По-перше, трапляється, що на деяких конференціях, що не надають спікеру можливість підключення власного ноутбука, вимагають слайди "строго у форматі pptx або pdf", не очікуючи, що вони бувають ще й у HTML. По-друге, хорошим тоном є відправити організаторам незмінний варіант ваших слайдів у вигляді, як вони були показані на доповіді, у форматі PDF для публікації файлу в матеріалах конференції.
На щастя, це завдання справляється Node.js утиліта , побудована на базі - системи автоматизації керування браузером Chrome. Сконвертувати RevealJS презентацію у PDF можна командою
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Дві хитрощі при запуску decktape, до яких довелося прийти методом спроб і помилок:
-
дозвіл через параметр
-sтреба ставити з дворазовим запасом, інакше можливі проблеми з результатами конвертації -
у URL HTML-версії презентації треба передавати параметр
?fragments=true, що дозволить створювати окрему сторінку PDF для кожного проміжного стану вашого слайда (наприклад, п'ять сторінок для п'яти пунктів списку, якщо вони показуються один за одним). Це дозволить використовувати такий PDF сам собою як презентації при доповіді.
Автоматичне складання та публікація у вебі
Зручно, коли слайди збираються автоматично при попаданні змін до системи контролю версій, і ще зручніше, коли автоматично скомпіловані слайди викладаються в інтернет для загального використання. Слайди з інтернету можна легко «програти» перед аудиторією з будь-якої машини, приєднаної до інтернету та проектора.
Оскільки ми використовуємо в роботі GitHub, то природним вибором CI-системи є , а для хостингу готових презентацій . Ідея github.io полягає в тому, що будь-який статичний контент, поміщений у гілку gh-pages вашого проекту на GitHub, стає доступним за адресою <ваше имя>.gihub.io/<ваш проект>.
Повний конфігураційний файл TravisCI, що включає компіляцію HTML-версії сторінки за допомогою Maven, конвертацію в PDF за допомогою decktape і вивантаження результатів у гілку gh-pages для публікації на github.io, виглядає .
Для складання такого проекту на стороні TravisCI необхідно налаштувати змінні середовища
GH_REF- значення виду github.com/inponomarev/csa-hbGH_TOKEN- токен доступу до GitHub. Можна отримати в GitHub-і в налаштуваннях свого профілю, Developer Settings -> Personal Access Tokens. Якщо ви викладаєте презентацію до публічного репозиторію, то для цього токена достатньо вказати єдиний рівень доступу «Access public repositories».GH_USER_EMAIL/GH_USER_NAME— пара ім'я/пошта, від імені якої буде здійснено пуш у гілкуgh-pages.
Таким чином, кожен коміт коду презентації на GitHub призводить до автоматичного перебудови слайдів у форматах HTML та PDF та перезаливання їх на github.io. (Звичайно ж, викладати на github.io потрібно тільки ті презентації, які ви хочете зробити публічними.)
Приклади проектів
Насамкінець — посилання на кілька прикладів проектів презентацій з налаштованими Maven-скриптами та CI-конфігурацією для Travis-CI, які можна клонувати та використовувати при створенні власних проектів презентацій:
-
(моя доповідь для JPoint 2019)
-
(моя доповідь для Heisenbug 2019)
Прощавай, Powerpoint! Не думаю, що ти мені колись знадобишся для технічних презентацій 🙂
Джерело: habr.com