Мислам дека имам дадено десетици презентации на колеги, клиенти и јавно говорење во мојата ИТ кариера. За многу години, 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 или docker, но ви овозможува да генерирате слајдови користејќи скрипта Maven.
Поентата е дека проектот - Јава имплементацијата на јазикот 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 Два трикови при лансирање на лента, кои моравме да ги смислиме преку обиди и грешки:
-
резолуција преку параметар
-sмора да се специфицира со двојна маржа, инаку може да има проблеми со резултатите од конверзијата -
во URL-то на HTML верзијата на презентацијата треба да положите параметар
?fragments=true, што ќе создаде посебна PDF страница за секоја средна состојба на вашиот слајд (на пример, пет страници за пет точки ако се прикажани една по друга). Ова ќе ви овозможи да користите таков PDF самостојно како презентација за време на извештај.
Автоматско склопување и објавување на веб
Удобно е кога слајдовите се собираат автоматски кога се прават промени во системот за контрола на верзијата, а уште поудобно е кога автоматски компајлираните слајдови се објавуваат на Интернет за јавна употреба. Слајдовите од Интернет може лесно да се „пуштаат“ пред публика од која било машина поврзана на Интернет и проектор.
Бидејќи користиме GitHub во нашата работа, природниот избор на CI систем е , и за хостирање готови презентации - . Идејата зад github.io е дека секоја статична содржина е објавена во филијала gh-pages на вашиот проект на GitHub, станува достапен на <ваше имя>.gihub.io/<ваш проект>.
Комплетна конфигурациска датотека TravisCI, вклучително и компајлирање на HTML верзијата на страницата со помош на Maven, конвертирање во PDF со помош на лента и прикачување на резултатите во нишка 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