Менің IT мансабымда әріптестеріме, клиенттеріме және көпшілік алдында сөз сөйлеуге ондаған презентациялар жасадым деп ойлаймын. Көптеген жылдар бойы Powerpoint слайд жасау құралы ретінде мен үшін табиғи және сенімді таңдау болды. Бірақ биыл жағдай сапалы түрде өзгерді. Ақпан-мамыр айлары аралығында бес конференцияда сөз сөйлеуге мүмкіндік алдым, баяндамаларға арналған слайдтар қысқа мерзімде, бірақ жоғары сапалы дайындалуы керек болды. Слайдтардың көрнекі дизайнына қатысты жұмыстың сол бөлігін басқа адамдарға тапсыру туралы сұрақ туындады. Мен бір рет .pptx файлдарын пошта арқылы жіберіп, дизайнермен жұмыс істеуге тырыстым, бірақ жұмыс хаосқа айналды: слайдтардың қай нұсқасы «ең жаңа» екенін ешкім білмеді, ал Powerpoint бағдарламасының айырмашылығына байланысты макет «жылжыды». нұсқалары мен қаріптер біздің машиналарда. Және мен жаңа нәрсені көруді шештім. Мен оны сынап көрдім, содан бері Powerpoint-ке қайта оралу туралы ойлаған жоқпын.
Біз не қалаймыз
Шамамен бір жарым жыл бұрын біздің компания бірдей мәселелерге тап болып, жобалық құжаттаманы жасау үшін Word бағдарламасын пайдалануды тоқтатты: Word кішігірім құжатты теру үшін жақсы болғанымен, көлемі ұлғайған сайын, бірлесіп жұмыс істеу және жоғары сапалы және жоғары сапалы құжаттарды алу кезінде қиындықтар туындайды. біртұтас дизайн. Біздің таңдауымызға түсті , және біз бұл таңдауға ешқашан қуанбаймыз, бірақ бұл бөлек мақаланың тақырыбы. Шамамен сол уақытта біз DevOps «бәрі код ретінде» қағидаларының бірінің тиімділігін білдік, сондықтан презентация слайдтарын жасаудың жаңа технологиясына қойылатын талаптарды таңдау өте айқын болды:
- Презентация белгілеу тілінде қарапайым мәтіндік файл болуы керек.
- Біздің слайдтар әзірлеу жобалары туралы, сондықтан белгілеу сыртқы жүйелерге жүгінбей-ақ кірістіруді жеңілдетуі керек.
- синтаксистік ерекшелеуі бар код фрагменттері,
- көрсеткілер арқылы байланысқан геометриялық фигуралар түріндегі қарапайым диаграммалар,
- UML диаграммалары, блок-схемалар және т.б.
- Презентация жобасы нұсқаларды басқару жүйесінде сақталуы керек.
- Дайын слайдтарды валидациялау және құрастыру CI жүйесінде орындалуы керек.
Бүгінгі таңда белгілеу тілдерінде слайд жасаудың екі негізгі нұсқасы бар: бума LaTeX үшін немесе HTML/CSS көмегімен слайдтар жасауға арналған жақтаулардың бірі (, , және басқалары).
Менің жаным LaTeX-те болса да, менің санам жалғыз мен пайдаланбайтын шешімді таңдау адамдардың кеңірек шеңберіне таныс шешім жағында болуы керек екенін айтты. LaTeX-ті бәрі бірдей біле бермейді және сіздің күнделікті тәжірибеңіз ғылыми мақалалар жазумен байланысты болмаса, онда сізде осы жүйенің орасан зор, күрделі әлеміне енуге уақытыңыз болуы екіталай.
Дегенмен, HTML/CSS-ті меңгеру кең тараған дағды емес: мен, мысалы, оны толық меңгеруден алыспын. Бақытымызға орай, бұрыннан таныс AsciiDoctor көмекке келеді: конвертер AsciiDoctor белгілеуін пайдаланып RevealJS слайдтарын жасауға мүмкіндік береді. Және оны үйрену оңай және барлығына қолжетімді!
Слайдтарды қалай кодтау керек
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 сценарийін пайдаланып слайдтарды жасауға мүмкіндік береді.
Мәселе мынада, бұл жоба - Ruby тілінің Java-ны іске асыруы соншалықты жақсы, ол Java машинасында Ruby үшін жасалған дерлік кез келген нәрсені іске қосуға мүмкіндік береді және AsciiDoctor іске қосу JRuby қолданбасының ең көп тараған түрлерінің бірі болып табылады.
болуы Java жобасының бөлігі болып табылатын AsciiDoctor құжаттамасын жинауға мүмкіндік береді (біз оны белсенді түрде қолданамыз). Сонымен қатар, AsciiDoctor және JRuby Maven арқылы автоматты түрде жүктеледі және AsciiDoctor JRuby ортасында жұмыс істейді: құрылғыға ештеңе орнатудың қажеті жоқ! (Пакеттен басқа graphviz, бұл GraphViz немесе PlantUML графикасын пайдаланғыңыз келсе қажет.) .adoc файлдарын қалтаға жай ғана орналастырыңыз. src/main/asciidoc/. Міне сызбалар арқылы слайдтар жинау.
Слайдтарды PDF форматына түрлендіру
Слайдтардың HTML нұсқасы жеткілікті түрде өзін-өзі қамтамасыз етсе де, слайдтардың PDF нұсқасы болуы керек. Біріншіден, спикерге өз ноутбугін қосу мүмкіндігін бермейтін кейбір конференцияларда олар HTML тілінде болуын күтпестен слайдтарды «қатаң pptx немесе pdf форматында» талап етеді. Екіншіден, конференция материалдарында файлды жариялау үшін ұйымдастырушыларға баяндамада көрсетілгендей слайдтарыңыздың өңделмеген нұсқасын PDF форматында жіберу жақсы форма.
Бақытымызға орай, Node.js утилитасы бұл тапсырманы өңдейді. , негізінде салынған — Chrome браузерін басқаруға арналған автоматтандыру жүйелері. RevealJS көрсетілімін пәрмен арқылы PDF форматына түрлендіруге болады
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Сынақ пен қателік арқылы біз ойлап табуымыз керек болатын папкаларды іске қосу кезіндегі екі трюк:
-
параметр арқылы ажыратымдылық
-sекі еселенген маржамен көрсетілуі керек, әйтпесе түрлендіру нәтижелеріне қатысты мәселелер болуы мүмкін -
презентацияның HTML нұсқасының URL мекенжайында параметрді беру қажет
?fragments=true, ол слайдтың әрбір аралық күйі үшін жеке PDF бетін жасайды (мысалы, бірінен соң бірі көрсетілсе, бес таңбалауыш нүктеге арналған бес бет). Бұл есеп кезінде мұндай PDF файлын презентация ретінде дербес пайдалануға мүмкіндік береді.
Автоматты құрастыру және интернетте жариялау
Нұсқаларды басқару жүйесіне өзгертулер енгізілгенде слайдтар автоматты түрде құрастырылған кезде ыңғайлы, ал автоматты түрде құрастырылған слайдтар жалпы пайдалану үшін Интернетте орналастырылған кезде одан да ыңғайлы. Интернеттегі слайдтарды аудитория алдында Интернетке қосылған кез келген құрылғыдан және проектордан оңай «ойнатуға» болады.
Біз өз жұмысымызда GitHub пайдаланатындықтан, CI жүйесінің табиғи таңдауы болып табылады , және дайын презентацияларды өткізу үшін - . Github.io-ның идеясы - филиалға жарияланған кез келген статикалық мазмұн gh-pages жобаңыздың GitHub сайтында қолжетімді болады <ваше имя>.gihub.io/<ваш проект>.
TravisCI конфигурация файлын аяқтаңыз, соның ішінде Maven көмегімен беттің HTML нұсқасын құрастыру, таспаны пайдаланып PDF форматына түрлендіру және нәтижелерді ағынға жүктеп салу. gh-pages github.io сайтында жарияланғанға ұқсайды .
TravisCI жағында мұндай жобаны құру үшін ортаның айнымалы мәндерін конфигурациялау қажет
GH_REF— github.com/inponomarev/csa-hb сияқты мәнGH_TOKEN— GitHub қатынас белгісі. Оны GitHub сайтынан профиль параметрлерінде, Әзірлеуші параметрлері -> Жеке қол жеткізу белгілерінен алуға болады. Егер сіз презентацияны жалпыға ортақ репозиторийге жүктеп салсаңыз, онда бұл белгі үшін «Қоғамдық репозиторийлерге кіру» жалғыз қолжетімділік деңгейін көрсету жеткілікті.GH_USER_EMAIL/GH_USER_NAME— аты/электрондық пошта жұбы, оның атынан ағынға итеру жүзеге асырыладыgh-pages.
Осылайша, GitHub-та көрсетілім кодының әрбір орындалуы слайдтардың HTML және PDF пішімінде автоматты түрде қайта құрылуына және github.io сайтына қайта жүктелуіне әкеледі. (Әрине, сіз github.io сайтына тек жалпыға жария еткіңіз келетін презентацияларды жүктеп салуыңыз керек.)
Жобалардың мысалдары
Соңында, жеке презентация жобаларын жасау кезінде клондауға және пайдалануға болатын Travis-CI үшін теңшелген Maven сценарийлері және CI конфигурациясы бар бірнеше презентация жобаларының мысалдарына сілтемелер берілген:
-
(JPoint 2019 үшін менің баяндамам)
-
(Менің Heisenbug 2019 туралы есебім)
Қош бол Powerpoint! Техникалық презентациялар үшін маған ешқашан қажет емес деп ойлаймын :)
Ақпарат көзі: www.habr.com