O'ylaymanki, men IT kareramda hamkasblarim, mijozlarim va ommaviy nutqlar uchun o'nlab taqdimotlar qildim. Ko'p yillar davomida Powerpoint slayd ishlab chiqarish vositasi sifatida men uchun tabiiy va ishonchli tanlov bo'ldi. Ammo bu yil vaziyat sifat jihatidan o'zgardi. Fevraldan maygacha beshta konferensiyada nutq so‘zlash imkoniyatiga ega bo‘ldim va ma’ruzalar uchun slaydlar qisqa vaqt ichida, lekin sifatli tayyorlanishi kerak edi. Slaydlarning vizual dizayni bo'yicha ishning ushbu qismini boshqa odamlarga topshirish haqida savol tug'ildi. Men bir marta .pptx fayllarini pochta orqali jo'natib, dizayner bilan ishlashga harakat qildim, lekin ish tartibsizlikka aylandi: hech kim slaydlarning qaysi versiyasi "eng yangi" ekanligini bilmas edi va Powerpoint-dagi farq tufayli tartib "harakatlanardi". mashinalarimizdagi versiyalar va shriftlar. Va men yangi narsani sinab ko'rishga qaror qildim. Men buni sinab ko'rdim va o'shandan beri Powerpoint-ga qaytish haqida o'ylamaganman.
Biz nima xohlaymiz
Taxminan bir yarim yil oldin kompaniyamiz loyiha hujjatlarini yaratish uchun Word dasturidan foydalanishni to'xtatdi va bir xil muammolarga duch keldi: Word kichik hujjatni yozish uchun yaxshi bo'lsa-da, hajmi oshgani sayin, hamkorlik qilish va yuqori sifatli va sifatli hujjatlarni olishda qiyinchiliklar paydo bo'ladi. yagona dizayn. Bizning tanlovimiz to'g'ri keldi , va biz bu tanlovdan xursand bo'lishni to'xtatmaymiz, ammo bu alohida maqola uchun mavzu. Taxminan bir vaqtning o'zida biz DevOps-ning "hamma narsa kod sifatida" tamoyillaridan birining samaradorligini bilib oldik, shuning uchun taqdimot slaydlarini yaratish uchun yangi texnologiyaga qo'yiladigan talablarni tanlash juda aniq edi:
- Taqdimot belgilash tilida oddiy matnli fayl bo'lishi kerak.
- Bizning slaydlarimiz ishlab chiqish loyihalari haqida, shuning uchun belgilash tashqi tizimlarga murojaat qilmasdan kiritishni osonlashtirishi kerak.
- sintaksis ta'kidlangan kod qismlari,
- o'qlar bilan bog'langan geometrik shakllar ko'rinishidagi oddiy diagrammalar,
- UML diagrammalari, oqim sxemalari va boshqalar.
- Taqdimot loyihasi versiyani boshqarish tizimida saqlanishi kerak.
- Tayyor slaydlarni tekshirish va yig'ish CI tizimida amalga oshirilishi kerak.
Bugungi kunda belgilash tillarida slaydlar yaratishning ikkita asosiy varianti mavjud: paket LaTeX uchun yoki HTML/CSS yordamida slaydlar yaratish uchun ramkalardan biri (, , va boshqalar).
Mening qalbim LaTeXda bo'lsa-da, mening fikrim shuni ta'kidladiki, men yagona foydalanmaydigan yechimni tanlash kengroq odamlar doirasiga tanish bo'lgan yechim tomonida bo'lishi kerak. LaTeX-ni hamma ham bilmaydi va agar sizning kundalik amaliyotingiz ilmiy maqolalar yozish bilan bog'liq bo'lmasa, unda siz ushbu tizimning ulkan, murakkab dunyosiga sho'ng'ishga vaqtingiz bo'lishi dargumon.
Biroq, HTML/CSS-ni o'zlashtirish unchalik keng tarqalgan mahorat emas: men, masalan, uni to'liq bilishdan yiroqman. Yaxshiyamki, allaqachon tanish bo'lgan AsciiDoctor yordamga keladi: konvertor AsciiDoctor belgisi yordamida RevealJS slaydlarini yaratishga imkon beradi. Va o'rganish oson va hamma uchun ochiq!
Slaydlarni qanday kodlash kerak
AsciiDoctor-da slaydlarni kodlashning mohiyatini tushunish uchun eng oson yo'li aniq misollar keltirishdir. Bularning barchasi bu yilgi konferentsiyam taqdimotlari uchun qilgan haqiqiy slaydlardan.
Sarlavhali slayd va birin-ketin ochiladigan elementlar roʻyxati:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеnatija
Sintaksis ta'kidlangan sarlavha va manba kodi parchasi:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----natija
Nutqga tayyorgarlik ko'rish jarayonida kod demolari qayta ko'rib chiqiladi va yaxshilanadi, shuning uchun "xom kod" ni to'g'ridan-to'g'ri slaydga tezda nusxalash va joylashtirish qobiliyati bebahodir, bu sintaksisni ajratib ko'rsatish haqida tashvishlanmasdan demoning yangilanishini ta'minlaydi.
Sarlavha, rasm va matn (slayddagi tartib hujayralarda amalga oshiriladi ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===natija
Ba'zan sarlavha kerak emas va fikringizni tushuntirish uchun sizga to'liq ekranli rasm kerak bo'ladi:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]natija
Ko'pincha g'oya "o'qlar bilan bog'langan kvadratlar" ko'rinishidagi oddiy diagramma bilan qo'llab-quvvatlanishi kerak. Yaxshiyamki, AsciiDoctor tizim bilan integratsiyalashgan — cho‘qqilar va ular orasidagi bog‘lanishlar tavsifi asosida grafik diagrammalarni tasvirlash imkonini beruvchi til. Graphviz o'rganish egri chizig'ini oladi, ammo taqdim etilgan misollarga asoslanib, buni qilish juda oson! Bu shunday ko'rinadi:
== Пишем “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;}
}
-----natija
Rasmdagi sarlavhani tahrirlash, o'qning yo'nalishini o'zgartirish va hokazolar zarur bo'lganda, bu rasmni biron bir joyda qayta chizish va slaydga qayta kiritish o'rniga, to'g'ridan-to'g'ri taqdimot kodida amalga oshirilishi mumkin. Bu slaydlar ustida ishlash tezligini sezilarli darajada oshiradi.
Yana murakkab misol:
== Невоспроизводимая сборка
[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;}
}
-----natija
Aytgancha, Graphviz bilan tajriba o'tkazish va sahifadagi tasvirlarni disk raskadrovka qilish qulay .
Va nihoyat, agar siz slaydga oqim diagrammasi, sinf diagrammasi yoki boshqa standartlashtirilgan diagrammani kiritishingiz kerak bo'lsa, AsciiDoctor bilan birlashtirilgan boshqa tizim yordamga kelishi mumkin, . Mening hamkasbim Nikolay Potashnikov PlantUML ning keng imkoniyatlari haqida yozgan .
Taqdimot loyihasini versiyalarni boshqarish tizimida saqlanadigan kodga aylantirish taqdimot bo'yicha qo'shma ishlarni tashkil qilish, birinchi navbatda, kontent va dizayn yaratish vazifalarini ajratish imkonini beradi. RevealJS da slaydlar dizayni (shriftlar, fonlar, chekinishlar) CSS yordamida tasvirlangan. Mening CSS bo'yicha shaxsiy mahoratimni eng yaxshi tarzda etkazaman - lekin CSS bilan mendan ko'ra epchilroq va tezroq ishlaydigan odamlar bo'lsa, bu qo'rqinchli emas. Natijada, taqdimot muddati tez yaqinlashib kelayotganligi sababli, biz Git orqali bir vaqtning o'zida turli xil fayllar bilan ishlashimiz va .pptx fayllarini pochta orqali yuborishda imkonsiz hamkorlik tezligini rivojlantirishimiz mumkin.
Slaydlar bilan HTML sahifani yaratish
Oddiy matn manbalari ajoyib, lekin ularni qanday qilib taqdimotning o'ziga jamlash mumkin?
AsciiDoctor - bu Ruby-da yozilgan loyiha bo'lib, uni ishga tushirishning bir necha yo'li mavjud. Birinchidan, siz Ruby tilini o'rnatishingiz va to'g'ridan-to'g'ri asciidoctor-ni ishga tushirishingiz mumkin, bu Ruby dasturchilariga eng yaqin narsadir.
Agar siz Ruby-ni o'rnatish bilan chalkashmoqchi bo'lmasangiz, docker tasviridan foydalanishingiz mumkin , ishga tushirilganda siz VOLUME orqali papkani loyiha manbalari bilan ulashingiz va natijani ma'lum bir joyda olishingiz mumkin.
Men tanlagan variant biroz kutilmagandek tuyulishi mumkin, ammo bu Java dasturchisi sifatida men uchun eng qulayi. Bu Ruby yoki docker-ni o'rnatishni talab qilmaydi, lekin Maven skripti yordamida slaydlarni yaratishga imkon beradi.
Gap shundaki, loyiha - Ruby tilining Java ilovasi shunchalik yaxshiki, u sizga Ruby uchun yaratilgan deyarli hamma narsani Java mashinasida ishga tushirish imkonini beradi va AsciiDoctor-ni ishga tushirish JRuby-ning eng keng tarqalgan qo'llanilishidan biridir.
imkoniyat Java loyihasining bir qismi bo'lgan (biz faol foydalanayotgan) AsciiDoctor hujjatlarini to'plash imkonini beradi. Shu bilan birga, AsciiDoctor va JRuby Maven tomonidan avtomatik ravishda yuklab olinadi va AsciiDoctor JRuby muhitida ishlaydi: mashinaga hech narsa o'rnatishning hojati yo'q! (paketdan tashqari graphvizGraphViz yoki PlantUML grafiklaridan foydalanmoqchi bo'lsangiz, bu kerak bo'ladi.) .adoc fayllaringizni jildga joylashtiring. src/main/asciidoc/. Mana diagrammalar bilan slaydlarni yig'ish.
Slaydlarni PDF-ga aylantirish
Slaydlarning HTML versiyasi o'zini-o'zi etarli bo'lsa-da, hali ham slaydlarning PDF versiyasiga ega bo'lish kerak. Birinchidan, karnayga o'z noutbukini ulash imkoniyatini bermaydigan ba'zi konferentsiyalarda ular HTML-da bo'lishini kutmasdan slaydlarni "qat'iy ravishda pptx yoki pdf formatida" talab qiladilar. Ikkinchidan, tashkilotchilarga slaydlaringizning tahrir qilinmagan versiyasini hisobotda ko'rsatilgandek, PDF formatida faylni konferentsiya materiallarida nashr qilish uchun yuborish yaxshi shakldir.
Yaxshiyamki, Node.js yordam dasturi bu vazifani bajaradi. , asosida qurilgan — Chrome brauzerini boshqarish uchun avtomatlashtirish tizimlari. Buyruq yordamida RevealJS taqdimotini PDF ga o'zgartirishingiz mumkin
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Decktapni ishga tushirishda biz sinov va xato orqali topishimiz kerak bo'lgan ikkita hiyla:
-
parametr orqali aniqlik
-sikki karra chegara bilan ko'rsatilishi kerak, aks holda konvertatsiya natijalari bilan bog'liq muammolar bo'lishi mumkin -
taqdimotning HTML versiyasining URL manzilida siz parametrni kiritishingiz kerak
?fragments=true, bu slaydingizning har bir oraliq holati uchun alohida PDF sahifasini yaratadi (masalan, beshta nuqta uchun besh sahifa, agar ular ketma-ket ko'rsatilsa). Bu sizga hisobot paytida bunday PDF-dan mustaqil ravishda taqdimot sifatida foydalanish imkonini beradi.
Avtomatik yig'ish va Internetda nashr qilish
Bu versiyani boshqarish tizimiga o'zgartirishlar kiritilganda slaydlar avtomatik ravishda kompilyatsiya qilinganda qulayroq va avtomatik ravishda tuzilgan slaydlar ommaviy foydalanish uchun Internetga joylashtirilganda yanada qulayroqdir. Internetdan slaydlarni tomoshabinlar oldida Internetga ulangan har qanday mashinadan va proyektordan osongina "o'ynash" mumkin.
Biz ishimizda GitHub-dan foydalanganimiz sababli, CI tizimining tabiiy tanlovi , va tayyor taqdimotlarni o'tkazish uchun - . Github.io-ning g'oyasi shundaki, har qanday statik kontent filialga joylashtiriladi gh-pages GitHub-dagi loyihangiz quyidagi manzilda mavjud bo'ladi <ваше имя>.gihub.io/<ваш проект>.
TravisCI konfiguratsiya faylini toʻldiring, jumladan Maven yordamida sahifaning HTML versiyasini kompilyatsiya qilish, decktape yordamida PDF-ga aylantirish va natijalarni mavzuga yuklash. gh-pages github.io da nashr qilish uchun, o'xshaydi .
TravisCI tomonida bunday loyihani qurish uchun siz muhit o'zgaruvchilarini sozlashingiz kerak
GH_REF— github.com/inponomarev/csa-hb kabi qiymatGH_TOKEN— GitHub kirish tokeni. Siz uni GitHub-dan profil sozlamalarida, Dasturchi sozlamalari -> Shaxsiy kirish tokenlarida olishingiz mumkin. Agar siz taqdimotni umumiy omborga yuklasangiz, ushbu token uchun "Ommaviy omborlarga kirish" yagona kirish darajasini belgilash kifoya.GH_USER_EMAIL/GH_USER_NAME— nomidan ipga surish amalga oshiriladigan nom/elektron pochta juftligigh-pages.
Shunday qilib, GitHub-da taqdimot kodining har bir topshirilishi slaydlar avtomatik ravishda HTML va PDF formatlarida qayta tiklanadi va github.io-ga qayta yuklanadi. (Albatta, siz github.io saytiga faqat oxir-oqibat ommaga e'lon qilmoqchi bo'lgan taqdimotlarni yuklashingiz kerak.)
Loyihalarga misollar
Va nihoyat, Travis-CI uchun moslashtirilgan Maven skriptlari va CI konfiguratsiyasi bilan taqdimot loyihalarining bir nechta misollariga havolalar mavjud bo'lib, ular klonlanishi va shaxsiy taqdimot loyihalaringizni yaratishda ishlatilishi mumkin:
-
(JPoint 2019 uchun nutqim)
-
(Heisenbug 2019 uchun hisobotim)
Xayr Powerpoint! Texnik taqdimotlar uchun sizga hech qachon kerak bo'lmaydi deb o'ylayman :)
Manba: www.habr.com