Изглежда, че съм направил десетки презентации за колеги, клиенти и публични изказвания през моята кариера в IT. Много години Powerpoint беше естественият и надежден избор за мен при изготвянето на слайдове. Но тази година ситуацията се промени качествено. От февруари до май имах възможността да участвам на пет конференции и трябваше да подготвя слайдовете за докладите в кратки срокове, но качествено. Възникна въпросът за делегирането на част от работата, свързана с визуалния дизайн на слайдовете, на други хора. Един път опитах да работя с дизайнер, като изпращах файлове .pptx по имейл, но работата се превърна в хаос: никой не знаеше коя версия на слайдовете е „най-нова“, а форматирането „се развали“ заради различията в версиите на Powerpoint и шрифтовете на нашите компютри. И реших да опитам нещо ново. Опитах и оттогава не си мисля да се връщам към Powerpoint.
Какво искаме
Поне година и половина назад в компанията се отказахме от използването на Word за създаване на проектна документация, като се сблъскахме със същите проблеми: макар Word да е добър за написване на малък документ, с увеличаването на обема възникват трудности с съвместната работа и получаването на качествено и унифицирано оформление. Нашият избор падна на , и не спираме да се радваме на този избор, но това е тема за отделна статия. Приблизително по това време осъзнахме ефективността на един от следните принципи на DevOps „всичко като код“, така че изборът на изисквания за новата технология за създаване на презентационни слайдове беше доста очевиден:
- Презентацията трябва да представлява plain text файл на език за размяна.
- Слайдовете ни са за проекти за разработка, така че разметката трябва да позволява лесно, без помощта на външни системи, да се вмъкват
- фрагменти от код с подсветка на синтаксиса,
- обикновени диаграми под формата на геометрични фигури, свързани със стрелки,
- UML диаграми, блок-схеми и други.
- Проектът на презентацията трябва да се съхранява в система за контрол на версиите.
- Валидацията и сглобяването на готовите слайдове трябва да се извършват в CI система.
В момента съществуват два основни варианта за създаване на слайдове на езици за размяна: пакетът за LaTeX или един от фреймуърковете за създаване на слайдове на HTML/CSS (, , и много други).
Въпреки че душата ми е насочена към LaTeX, разумът подсказыва, че изборът на решение, което няма да използвам само аз, трябва да бъде в полза на решение, познато на по-широк кръг хора. LaTeX не е известен на всички, и ако ежедневната ви практика не е свързана с написването на научни статии, едва ли ще имате време да се задълбочите в огромния и сложен свят на тази система.
Все пак, умението да работиш с HTML/CSS не е именно широко разпространено: аз, например, не го владея напълно. За щастие, на помощ идва вече познатият ни AsciiDoctor: конвертер позволяващ създаването на RevealJS слайдове, използвайки AsciiDoctor маркери. А тя е лесна за учене и достъпна за всеки!
Как да кодираш слайдове
За да разберем същността на кодирането на слайдове в AsciiDoctor, най-лесно е да приложим конкретни примери. Всички те са от реални слайдове, които направих за докладите си на конференции тази година.
Слайд с заглавие и списък, в който пунктите се появяват един след друг:
== Зачем нуждаем се от Streams API?
[%step]
* Обработка на потоци в реално време
* API, подобен на поток (map / reduce)
* Под капака:
** Автоматично комитиране на offset
** Ребалансиране
** Вътрешно състояние на обработвачите
** Лесно скалиранеРезултат
Заглавие и фрагмент от код с подсветка на синтаксиса:
== 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[]
|
* **Уилям Бежек**, +
“Kafka Streams in Action”, ноември 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 система, . Моят колега Николай Поташников е написал .
Превръщането на проекта за презентация в код, съхраняван в система за контрол на версиите, дава възможност за организиране на съвместна работа по презентацията, най-вече разделяйки задачите за създаване на съдържание и оформление. Оформлението на слайдовете (шрифтове, фонове, отстъпи) в RevealJS се описва с помощта на CSS. Личното ми умение да работя с CSS най-добре предава — но това не е страшно, когато има хора, които работят с CSS много по-умело и по-бързо от мен. В резултат на това, в условията на бързо приближаващия се краен срок за презентацията, можем да работим едновременно по различни файлове чрез Git и да увеличим скоростта на съвместната работа, невъзможна при изпращане по пощата на файлове .pptx.
Сборка на HTML-страница със слайдовете
Обикновен текст-изходници — това е страхотно, но как да ги компилираме в самата презентация?
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, става достъпен на адрес .github.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
