Мислим да сам одржао десетине презентација колегама, клијентима и јавним наступима у својој ИТ каријери. Дуги низ година Поверпоинт је био природан и поуздан избор за мене као алат за производњу слајдова. Али ове године ситуација се квалитативно променила. Од фебруара до маја имао сам прилику да говорим на пет конференција, а слајдови за извештаје морали су да буду припремљени за кратко време, али квалитетно. Поставило се питање да се тај део посла око визуелног дизајна слајдова препусти другим људима. Једном сам покушао да радим са дизајнером, шаљући .пптк фајлове поштом, али посао се претворио у хаос: нико није знао која је верзија слајдова „најновија“, а распоред се „кретао“ због разлике у Поверпоинт-у верзије и фонтове на нашим машинама. И одлучио сам да пробам нешто ново. Пробао сам и од тада нисам размишљао да се вратим на Поверпоинт.
Шта ми желимо
Пре отприлике годину и по дана, наша компанија је престала да користи Ворд за израду пројектне документације, наишла је на исте проблеме: иако је Ворд добар за куцање малих докумената, како обим расте, јављају се потешкоће са сарадњом и добијањем квалитетног и квалитетног документа. унифицирани дизајн. Наш избор је пао , и никада не престајемо да се радујемо овом избору, али ово је тема за посебан чланак. Отприлике у исто време научили смо ефикасност једног од ДевОпс принципа „све као код“, па је избор захтева за нову технологију за креирање слајдова презентације био сасвим очигледан:
- Презентација мора бити обична текстуална датотека на језику за означавање.
- Наши слајдови су о развојним пројектима, тако да би ознаке требало да олакшају уметање, без прибегавања спољним системима
- фрагменти кода са истицањем синтаксе,
- једноставни дијаграми у облику геометријских облика повезаних стрелицама,
- УМЛ дијаграми, дијаграми тока и још много тога.
- Нацрт презентације мора бити ускладиштен у систему за контролу верзија.
- Валидацију и монтажу готових слајдова треба обавити у ЦИ систему.
Данас постоје две основне опције за креирање слајдова на језицима за означавање: пакет за ЛаТеКс или један од оквира за креирање слајдова помоћу ХТМЛ/ЦСС (, , и многи други).
Иако моја душа лежи у ЛаТеКс-у, мој ум је налагао да избор решења које не бих једини користио буде на страни решења познатог ширем кругу људи. Не знају сви ЛаТеКс, а ако ваша свакодневна пракса није везана за писање научних чланака, онда је мало вероватно да ћете имати времена да се уроните у огроман, замршени свет овог система.
Међутим, владање ХТМЛ/ЦСС-ом није баш широко распрострањена вештина: ја, на пример, нисам у потпуности вешт у томе. На срећу, већ познати АсцииДоцтор долази у помоћ: конвертер омогућава вам да креирате РевеалЈС слајдове користећи АсцииДоцтор маркуп. И лако је научити и свима је доступно!
Како кодирати слајдове
Да бисте разумели суштину кодирања слајдова на АсцииДоцтор-у, најлакши начин је да наведете конкретне примере. Ово су све из стварних слајдова које сам направио за своје овогодишње презентације на конференцији.
Слајд са насловом и листом у ставкама који се отварају један за другим:
== Зачем нам 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]Резултат
Често идеја треба да буде подржана једноставним дијаграмом, у облику „квадрата повезаних стрелицама“. На срећу, АсцииДоцтор је интегрисан са системом — језик који вам омогућава да опишете дијаграме графова на основу описа врхова и веза између њих. Грапхвиз има криву учења, али на основу датих примера, то је прилично лако учинити! Овако то изгледа:
== Пишем “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, што је потребно ако желите да користите ГрапхВиз или ПлантУМЛ графику.) Једноставно поставите своје .адоц датотеке у фасциклу src/main/asciidoc/. Ево прикупљање слајдова са дијаграмима.
Претворите слајдове у ПДФ
Иако је ХТМЛ верзија слајдова сасвим самодовољна, ипак је неопходно имати ПДФ верзију слајдова. Прво, дешава се да на неким конференцијама које говорнику не дају могућност да повеже сопствени лаптоп, захтевају слајдове „строго у пптк или пдф формату“, не очекујући да су и у ХТМЛ-у. Друго, добра је форма да организаторима пошаљете неедитовану верзију ваших слајдова онако како су приказани у извештају, у ПДФ формату за објављивање датотеке у материјалима конференције.
На срећу, услужни програм Ноде.јс се бави овим задатком. , изграђен на основу — системи аутоматизације за управљање прегледачем Цхроме. Можете претворити РевеалЈС презентацију у ПДФ помоћу наредбе
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Два трика приликом покретања децктапе-а, до којих смо морали да дођемо путем покушаја и грешака:
-
резолуција преко параметра
-sмора бити наведено са двоструком маргином, иначе може доћи до проблема са резултатима конверзије -
у УРЛ-у ХТМЛ верзије презентације треба да проследите параметар
?fragments=true, који ће креирати посебну ПДФ страницу за свако средње стање вашег слајда (на пример, пет страница за пет тачака за набрајање ако су приказане једна за другом). Ово ће вам омогућити да користите такав ПДФ самостално као презентацију током извештаја.
Аутоматско склапање и објављивање на вебу
Погодно је када се слајдови аутоматски компајлирају када се изврше промене у систему контроле верзија, а још згодније када се аутоматски састављени слајдови постављају на Интернет за јавну употребу. Слајдови са Интернета могу се лако „пуштати“ пред публиком са било које машине повезане на Интернет и пројектора.
Пошто у свом раду користимо ГитХуб, природан избор ЦИ система је , и за хостовање готових презентација - . Идеја иза гитхуб.ио је да било који статички садржај постављен на грану gh-pages вашег пројекта на ГитХуб-у, постаје доступан на <ваше имя>.gihub.io/<ваш проект>.
Завршите ТрависЦИ конфигурациону датотеку, укључујући компајлирање ХТМЛ верзије странице користећи Мавен, претварање у ПДФ помоћу децктапе-а и отпремање резултата у нит gh-pages за објављивање на гитхуб.ио, изгледа .
Да бисте изградили такав пројекат на страни ТрависЦИ-ја, потребно је да конфигуришете променљиве окружења
GH_REF— вредност попут гитхуб.цом/инпономарев/цса-хбGH_TOKEN— ГитХуб приступни токен. Можете га добити са ГитХуб-а у подешавањима профила, Подешавања програмера -> Лични токени за приступ. Ако поставите презентацију у јавно спремиште, онда је за овај токен довољно да наведете једини ниво приступа „Приступ јавним спремиштима“.GH_USER_EMAIL/GH_USER_NAME— пар име/е-пошта у име којег ће се вршити гурање нитиgh-pages.
Стога, свако урезивање кода за презентацију на ГитХуб-у доводи до тога да се слајдови аутоматски поново праве у ХТМЛ и ПДФ форматима и поново отпремају на гитхуб.ио. (Наравно, на гитхуб.ио би требало да отпремите само оне презентације које на крају желите да објавите.)
Примери пројеката
На крају, ево линкова до неколико примера презентационих пројеката са прилагођеним Мавен скриптама и ЦИ конфигурацијом за Травис-ЦИ, који се могу клонирати и користити приликом креирања сопствених пројеката презентације:
-
(мој разговор за ЈПоинт 2019)
-
(мој извештај за Хеисенбуг 2019)
Збогом Поверпоинт! Мислим да ми никада нећете требати за техничке презентације :)
Извор: ввв.хабр.цом