Deyəsən, İT sahəsində karyeram ərzində həmkarlarım, müştərilərim və ictimai çıxışlar üçün onlarla təqdimatlar etmişəm. Uzun illərdir ki, Powerpoint slayd hazırlama vasitəsi kimi mənim üçün təbii və etibarlı seçim olub. Amma bu il vəziyyət keyfiyyətcə dəyişdi. Fevraldan may ayına qədər beş konfransda çıxış etmək imkanım oldu və məruzələr üçün slaydlar qısa müddətdə, lakin yüksək keyfiyyətlə hazırlanmalı idi. Slaydların vizual dizaynı ilə bağlı işin həmin hissəsini başqa insanlara həvalə etmək barədə sual yarandı. Bir dəfə .pptx fayllarını poçtla göndərərək dizaynerlə işləməyə çalışdım, lakin iş xaosa çevrildi: heç kim slaydların hansı versiyasının “ən yeni” olduğunu bilmirdi və versiyalardakı fərqlərə görə tərtibat “sürücü” idi. maşınlarımızda Powerpoint və şriftlər. Və yeni bir şey sınamaq qərarına gəldim. Mən bunu sınadım və o vaxtdan Powerpoint-ə qayıtmağı düşünmürəm.
Nə istəyirik
Təxminən bir il yarım əvvəl biz şirkətdə eyni problemlərlə qarşılaşaraq dizayn sənədlərinin yaradılması üçün Word istifadəsindən imtina etdik: Word kiçik sənədi yazmaq üçün yaxşı olsa da, həcmlər artdıqca əməkdaşlıq etmək və yüksək nailiyyətlərə nail olmaq çətinləşir. -keyfiyyətli və vahid dizayn. Seçimimiz üzərinə düşdü , və biz bu seçimə sevinməyi dayandırmırıq, lakin bu ayrı bir məqalə üçün bir mövzudur. Təxminən eyni vaxtda biz DevOps-un “hər şey kod kimi” prinsiplərindən birinin effektivliyini öyrəndik, ona görə də təqdimat slaydlarının yaradılması üçün yeni texnologiya üçün tələblərin seçimi olduqca aydın idi:
- Təqdimat işarələmə dilində düz mətn faylı olmalıdır.
- Slaydlarımız inkişaf layihələri haqqındadır, ona görə də işarələmə xarici sistemlərə müraciət etmədən asanlıqla daxil etməyə imkan verməlidir.
- sintaksisi vurğulayan kod parçaları,
- oxlarla birləşdirilən həndəsi fiqurlar şəklində sadə diaqramlar,
- UML diaqramları, axın sxemləri və s.
- Təqdimat layihəsi versiya nəzarətində saxlanmalıdır.
- Hazır slaydların yoxlanılması və yığılması CI sistemində aparılmalıdır.
Bu gün işarələmə dillərində slaydlar yaratmaq üçün iki əsas variant var: LaTeX üçün və ya HTML/CSS-də slaydlar yaratmaq üçün çərçivələrdən biri (, , və bir çox başqaları).
Ruhum LaTeX-də olsa da, ağlım mənə dedi ki, tək istifadə etməyəcəyim bir həll seçimi daha geniş insan dairəsinə tanış olan bir həllin tərəfində olmalıdır. LaTeX-i hamı bilmir və əgər gündəlik təcrübəniz elmi məqalələr yazmaqla bağlı deyilsə, o zaman bu sistemin geniş mürəkkəb dünyasına dalmağa vaxtınız olmayacaq.
Bununla belə, HTML / CSS biliyi hər yerdə mövcud olan bacarıq deyil: məsələn, mən ona tam sahib deyiləm. Xoşbəxtlikdən, bizə artıq tanış olan AsciiDoctor xilasetmə üçün burada gəlir: çevirici AsciiDoctor işarələməsindən istifadə edərək RevealJS slaydları yaratmağa imkan verir. Və öyrənmək asandır və hər kəs üçün əlçatandır!
Slaydları necə kodlaşdırmaq olar
AsciiDoctor slayd kodlaşdırmasının mahiyyətini başa düşmək üçün konkret nümunələr vermək asandır. Onların hamısı bu il konfrans danışıqlarım üçün hazırladığım faktiki slaydlardandır.
Bir-birinin ardınca açılan paraqraflarda başlıq və siyahı olan slayd:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеNəticə
Sintaksis vurğulanan başlıq və mənbə kodu parçası:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Nəticə
Hesabatın hazırlanması zamanı kod demoları dəfələrlə yenidən işlənir və təkmilləşdirilir, ona görə də “xam kodu” cəld surətdə surəti və birbaşa slaydda yapışdırmaq, demonu aktual saxlamaq və sintaksisin vurğulanmasından narahat olmamaq imkanı əvəzsizdir.
Başlıq, illüstrasiya və mətn (slayddakı düzeni xanalarda yerinə yetiririk ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Nəticə
Bəzən başlığa ehtiyacınız yoxdur, ancaq fikrinizi göstərmək üçün sadəcə tam ekran şəkil lazımdır:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Nəticə
Çox vaxt düşüncəni "oxlarla bağlanmış kvadratlar" şəklində sadə bir diaqramla dəstəkləmək lazımdır. Xoşbəxtlikdən, AsciiDoctor sistemlə inteqrasiya olunub - təpələrin təsviri və onlar arasındakı əlaqə əsasında qrafik diaqramlarını təsvir etməyə imkan verən dil. Graphviz-i mənimsəmək lazımdır, lakin mövcud nümunələrə əsasən bunu etmək olduqca asandır! Göründüyü kimi:
== Пишем “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;}
}
-----Nəticə
Şəkildəki başlığı redaktə etmək, oxun istiqamətini dəyişdirmək və s. lazım olduqda - bu, şəkli haradasa yenidən çəkmək və slaydda yenidən daxil etmək əvəzinə, birbaşa təqdimat kodunda edilə bilər. Bu, slaydlarda işin sürətini xeyli artırır.
Daha mürəkkəb nümunə:
== Невоспроизводимая сборка
[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;}
}
-----Nəticə
Yeri gəlmişkən, Graphviz ilə təcrübə etmək və şəkilləri ayıklamaq səhifədə rahatdır .
Nəhayət, slaydda bir axın diaqramı, sinif diaqramı və ya digər standartlaşdırılmış diaqram daxil etmək lazımdırsa, AsciiDoctor ilə inteqrasiya olunmuş başqa bir sistem xilasetmə işinə gələ bilər, . Həmkarım Nikolay Potashnikov PlantUML-in geniş imkanları haqqında yazdı. .
Təqdimat layihəsinin versiyaya nəzarət sistemində saxlanılan koda çevrilməsi təqdimat üzərində birgə işi təşkil etməyə, ilk növbədə məzmun və dizaynın yaradılması vəzifələrini ayırmağa imkan verir. RevealJS-də slaydların dizaynı (şriftlər, fonlar, doldurma) CSS-dən istifadə etməklə təsvir edilmişdir. CSS ilə şəxsi bacarığımı ən yaxşı şəkildə çatdırır - amma CSS ilə məndən daha çevik və sürətli işləyən insanların olması qorxulu deyil. Nəticə odur ki, təqdimat tarixinin sürətlə yaxınlaşması ilə biz Git vasitəsilə müxtəlif fayllar üzərində eyni vaxtda işləyə və .pptx fayllarını poçtla göndərərkən mümkün olmayan əməkdaşlıq sürətini inkişaf etdirə bilərik.
Slaydlarla HTML səhifəsinin qurulması
Düz mətn mənbələri əladır, lakin onları təqdimatın özünə necə tərtib edirsiniz?
AsciiDoctor Ruby-də yazılmış bir layihədir və ona başlamağın bir neçə yolu var. Birincisi, siz Ruby dilini quraşdıra və bilavasitə asciidoctor-u işə sala bilərsiniz, bu, yəqin ki, ən yaxın Ruby tərtibatçısıdır.
Ruby quraşdırmanızla qarışmaq istəmirsinizsə, docker görüntüsündən istifadə edə bilərsiniz , işə salındıqda qovluğu VOLUME vasitəsilə layihə mənbələri ilə birləşdirə və nəticəni göstərilən yerdə əldə edə bilərsiniz.
Seçdiyim seçim bir qədər gözlənilməz görünə bilər, lakin Java tərtibatçısı kimi mənim üçün ən əlverişlidir. O, Ruby və ya docker-in quraşdırılmasını tələb etmir, lakin Maven skriptindən istifadə edərək slaydlar yaratmağa imkan verir.
Məsələ burasındadır ki, layihə - Ruby dilinin Java tətbiqi o qədər yaxşıdır ki, Ruby üçün yaradılmış demək olar ki, hər şeyi Java maşınında işlətməyə imkan verir və AsciiDoctor-un işlədilməsi JRuby-nin ən çox yayılmış istifadələrindən biridir.
mövcudluğu Java layihəsinin (bizim fəal şəkildə istifadə etdiyimiz) bir hissəsi olan AsciiDoctor sənədlərini toplamağa imkan verir. Eyni zamanda, AsciiDoctor və JRuby Maven tərəfindən avtomatik yüklənir və AsciiDoctor JRuby mühitində işləyir: maşında heç bir şey quraşdırmaq lazım deyil! (Paket istisna olmaqla graphvizGraphViz və ya PlantUML qrafiklərindən istifadə etmək istəyirsinizsə, bu lazımdır.) Sadəcə .adoc fayllarınızı qovluğa qoyun. src/main/asciidoc/. Burada , diaqramlarla slaydları toplayan.
Slaydları PDF-ə çevirin
Slaydların HTML versiyası kifayət qədər özünü təmin etsə də, hələ də slaydların PDF versiyasına sahib olmaq lazımdır. Əvvəla, belə olur ki, spikerə öz noutbukunu qoşmaq imkanı verməyən bəzi konfranslarda onlar HTML-də də olmasını gözləmədən slaydları “ciddi olaraq pptx və ya pdf formatında” tələb edirlər. İkincisi, konfrans materiallarında dərc olunmaq üçün hesabatda PDF formatında göstərildiyi üçün slaydlarınızın dəyişdirilməmiş versiyasını təşkilatçılara göndərmək yaxşı təcrübədir.
Xoşbəxtlikdən, Node.js yardım proqramı bu tapşırığı yerinə yetirir. əsasında tikilmişdir - Chrome brauzerinin idarəetmə avtomatlaşdırma sistemləri. Komanda ilə RevealJS təqdimatını PDF-ə çevirə bilərsiniz
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Sınaq və səhv yolu ilə tapmalı olduğum kasetləri işə salarkən iki fənd:
-
parametr vasitəsilə həll
-sikiqat marja ilə təyin edilməlidir, əks halda çevrilmə nəticələri ilə bağlı problemlər yarana bilər -
təqdimatın HTML versiyasının URL-də parametri keçməlisiniz
?fragments=true, bu, slaydınızın hər bir ara vəziyyəti üçün ayrıca PDF səhifəsi yaratmağa imkan verəcək (məsələn, bir-birinin ardınca göstərilirsə, beş siyahı elementi üçün beş səhifə). Bu, hesabat zamanı belə bir PDF-dən təqdimat kimi istifadə etməyə imkan verəcəkdir.
Avtomatik montaj və internetdə dərc
Dəyişikliklər versiyaya nəzarət sisteminə daxil olduqda slaydlar avtomatik qurulduqda rahatdır və avtomatik tərtib edilmiş slaydlar ümumi istifadə üçün İnternetdə yerləşdirildikdə daha rahatdır. İnternet slaydları İnternetə qoşulmuş istənilən maşından və proyektordan auditoriya qarşısında asanlıqla ifa edilə bilər.
İşimizdə GitHub-dan istifadə etdiyimiz üçün CI sisteminin təbii seçimidir , və hazır təqdimatların keçirilməsi üçün - . github.io-nun arxasında duran fikir, hər hansı bir statik məzmunun filialda yerləşdirilməsidir gh-pages GitHub-dakı layihəniz burada əlçatan olur <ваше имя>.gihub.io/<ваш проект>.
TravisCI konfiqurasiya faylını tamamlayın, o cümlədən Maven istifadə edərək səhifənin HTML versiyasını tərtib edin, decktape istifadə edərək PDF-ə çevirin və nəticələri filiala yükləyin gh-pages github.io-da dərc etmək üçün belə görünür .
TravisCI tərəfində belə bir layihə qurmaq üçün ətraf mühit dəyişənlərini qurmaq lazımdır
GH_REF- github.com/inponomarev/csa-hb formasının dəyəriGH_TOKEN- GitHub giriş nişanı. Siz onu GitHub-da profil parametrlərində, Tərtibatçı Parametrləri -> Şəxsi Giriş Tokenlərində əldə edə bilərsiniz. Təqdimatı ictimai depoya yükləsəniz, bu əlamət üçün "İctimai depolara giriş" yeganə giriş səviyyəsini təyin etmək kifayətdir.GH_USER_EMAIL/GH_USER_NAME— adından filiala təkan veriləcək ad/poçt cütügh-pages.
Beləliklə, GitHub-da təqdimat kodunun hər bir öhdəliyi slaydların HTML və PDF formatlarında avtomatik yenidən qurulmasına və github.io-ya yenidən yüklənməsinə gətirib çıxarır. (Əlbəttə, siz yalnız github.io-da nəhayət ictimailəşdirmək istədiyiniz təqdimatları göndərməlisiniz.)
Layihə nümunələri
Nəhayət, fərdiləşdirilmiş Maven skriptləri və Travis-CI üçün CI konfiqurasiyası ilə klonlaşdırıla və öz təqdimat layihələrinizi yaratmaq üçün istifadə edilə bilən bir neçə nümunə təqdimat layihəsinə keçidlər:
-
(JPoint 2019 üçün hesabatım)
-
(Heisenbug 2019 üçün hesabatım)
Əlvida PowerPoint! Texniki təqdimatlar üçün sizə heç vaxt ehtiyac duymayacağımı düşünmürəm 🙂
Mənbə: www.habr.com