Мисля, че съм изнесъл десетки презентации пред колеги, клиенти и публични изказвания в моята ИТ кариера. В продължение на много години Powerpoint беше естествен и надежден избор за мен като инструмент за създаване на слайдове. Но тази година ситуацията се промени качествено. От февруари до май имах възможността да говоря на пет конференции, като слайдовете за докладите трябваше да бъдат подготвени в кратки срокове, но с високо качество. Възникна въпросът за делегирането на тази част от работата по визуалния дизайн на слайдовете на други хора. Веднъж се опитах да работя с дизайнер, изпращайки .pptx файлове по пощата, но работата се превърна в хаос: никой не знаеше коя версия на слайдовете е „най-новата“, а оформлението се „движеше“ поради разликата в Powerpoint версии и шрифтове на нашите машини. И реших да опитам нещо ново. Опитах го и оттогава не съм мислил да се върна към Powerpoint.
Какво искаме
Преди около година и половина нашата компания спря да използва Word за създаване на проектна документация, тъй като се натъкна на същите проблеми: въпреки че Word е добър за писане на малък документ, с нарастването на обема възникват трудности при сътрудничеството и получаването на висококачествени и унифициран дизайн. Изборът ни падна на , и не спираме да се радваме на този избор, но това е тема за отделна статия. Приблизително по същото време научихме ефективността на един от принципите на DevOps за „всичко като код“, така че изборът на изисквания за новата технология за създаване на презентационни слайдове беше съвсем очевиден:
- Презентацията трябва да бъде обикновен текстов файл на език за маркиране.
- Нашите слайдове са за проекти за разработка, така че маркирането трябва да улеснява вмъкването, без да се прибягва до външни системи
- кодови фрагменти с подчертаване на синтаксиса,
- прости диаграми под формата на геометрични фигури, свързани със стрелки,
- 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 страница със слайдове
Източниците с обикновен текст са страхотни, но как да ги компилирате в самата презентация?
AsciiDoctor е проект, написан на Ruby, и има няколко начина да го стартирате. Първо, можете да инсталирате езика Ruby и да стартирате директно asciidoctor, което вероятно е най-близкото нещо до разработчиците на Ruby.
Ако не искате да се забърквате с инсталирането на Ruby, можете да използвате изображението на докер , в който при стартиране можете да свържете папката с източниците на проекта чрез VOLUME и да получите резултата на дадено място.
Вариантът, който избрах, може да изглежда малко неочакван, но е най-удобният за мен като Java разработчик. Не изисква инсталиране на Ruby или докер, но ви позволява да генерирате слайдове с помощта на скрипт на Maven.
Въпросът е, че проектът - Реализацията на Java на езика Ruby е толкова добра, че ви позволява да стартирате почти всичко, създадено за Ruby в Java машина, а стартирането на 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 в настройките на вашия профил, Настройки за разработчици -> Лични токени за достъп. Ако качите презентация в публично хранилище, тогава за този токен е достатъчно да посочите единственото ниво на достъп „Достъп до публични хранилища“.GH_USER_EMAIL/GH_USER_NAME— двойка име/имейл, от чието име ще се извърши насочването към нишкатаgh-pages.
По този начин всеки ангажимент на презентационния код в GitHub води до автоматично преизграждане на слайдовете в HTML и PDF формати и повторно качване в github.io. (Разбира се, трябва да качвате в github.io само тези презентации, които в крайна сметка искате да направите публични.)
Примери за проекти
И накрая, ето връзки към няколко примера за презентационни проекти с персонализирани Maven скриптове и CI конфигурация за Travis-CI, които могат да бъдат клонирани и използвани при създаване на ваши собствени презентационни проекти:
-
(моето изказване за JPoint 2019)
-
(моят доклад за Heisenbug 2019)
Сбогом Powerpoint! Не мисля, че някога ще имаш нужда от теб за технически презентации :)
Източник: www.habr.com