Мен өзүмдүн 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 версиясын компиляциялоо, деcktape аркылуу 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 сайтына акыры жалпыга ачык кылгыңыз келген презентацияларды гана жүктөшүңүз керек.)
Долбоорлордун мисалдары
Акырында, бул жерде Maven скрипттери жана Travis-CI үчүн CI конфигурациясы бар презентация долбоорлорунун бир нече мисалдарына шилтемелер бар, аларды клондоштурууга жана өзүңүздүн презентация долбоорлоруңузду түзүүдө колдонууга болот:
-
(JPoint 2019 үчүн менин баяндамам)
-
(Heisenbug 2019 үчүн менин отчетум)
Кош бол Powerpoint! Техникалык презентациялар үчүн сизге эч качан керек эмес деп ойлойм :)
Source: www.habr.com