პრეზენტაცია როგორც კოდი, ან რატომ აღარ ვიყენებ Powerpoint-ს

ვფიქრობ, ათობით პრეზენტაცია გავუკეთე კოლეგებს, კლიენტებს და საჯარო გამოსვლებს ჩემს IT კარიერაში. მრავალი წლის განმავლობაში, Powerpoint იყო ბუნებრივი და საიმედო არჩევანი ჩემთვის, როგორც სლაიდების წარმოების ინსტრუმენტი. მაგრამ წელს მდგომარეობა ხარისხობრივად შეიცვალა. თებერვლიდან მაისამდე ხუთ კონფერენციაზე მქონდა გამოსვლის საშუალება და მოხსენებების სლაიდები მოკლე დროში უნდა მომზადებულიყო, მაგრამ მაღალი ხარისხით. გაჩნდა კითხვა სლაიდების ვიზუალურ დიზაინთან დაკავშირებული ნამუშევრის სხვა ადამიანებისთვის გადაცემის შესახებ. ერთხელ ვცადე დიზაინერთან მუშაობა, .pptx ფაილების გაგზავნა ფოსტით, მაგრამ სამუშაო ქაოსში გადაიზარდა: არავინ იცოდა სლაიდების რომელი ვერსია იყო „უახლესი“, ხოლო განლაგება „მოძრაობდა“ Powerpoint-ის სხვაობის გამო. ვერსიები და შრიფტები ჩვენს მანქანებზე. და გადავწყვიტე რაღაც ახალი ვცადო. ვცადე და მას შემდეგ Powerpoint-ზე დაბრუნებაზე აღარ მიფიქრია.

რა გვინდა

დაახლოებით წელიწადნახევრის წინ, ჩვენმა კომპანიამ შეწყვიტა Word-ის გამოყენება საპროექტო დოკუმენტაციის შესაქმნელად, იგივე პრობლემების გამო: თუმცა Word კარგია მცირე დოკუმენტის ასაღებად, რადგან მოცულობა იზრდება, სირთულეები წარმოიქმნება თანამშრომლობასთან და მაღალი ხარისხის და მოპოვებასთან დაკავშირებით. ერთიანი დიზაინი. ჩვენი არჩევანი დაეცა ასკი ექიმიდა ჩვენ არასდროს ვწყვეტთ ამ არჩევანის გახარებას, მაგრამ ეს ცალკე სტატიის თემაა. დაახლოებით ამავე დროს, ჩვენ ვისწავლეთ DevOps-ის ერთ-ერთი პრინციპის ეფექტურობა „ყველაფერი, როგორც კოდი“, ასე რომ, პრეზენტაციის სლაიდების შექმნის ახალი ტექნოლოგიის მოთხოვნების არჩევანი საკმაოდ აშკარა იყო:

1. პრეზენტაცია უნდა იყოს ჩვეულებრივი ტექსტური ფაილი მარკირების ენაზე.
2. ჩვენი სლაიდები დეველოპერულ პროექტებს ეხება, ამიტომ მარკირებამ უნდა გააადვილოს ჩასმა, გარე სისტემების გამოყენების გარეშე
   • კოდის ფრაგმენტები სინტაქსის ხაზგასმით,
   • მარტივი დიაგრამები გეომეტრიული ფორმების სახით, რომლებიც დაკავშირებულია ისრებით,
   • UML დიაგრამები, დიაგრამები და სხვა.
3. პრეზენტაციის მონახაზი უნდა იყოს შენახული ვერსიის კონტროლის სისტემაში.
4. დასრულებული სლაიდების ვალიდაცია და აწყობა უნდა მოხდეს CI სისტემაში.

დღეს, მარკირების ენებზე სლაიდების შექმნის ორი ძირითადი ვარიანტია: პაკეტი სხივი LaTeX-ისთვის ან HTML/CSS-ის გამოყენებით სლაიდების შექმნის ერთ-ერთი ფრეიმორისთვის (გამოავლინეთ JS, შენიშვნა, deck.js და მრავალი სხვა).

მიუხედავად იმისა, რომ ჩემი სული 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();
----

შედეგი

საუბრის მომზადებისას, კოდის დემო განმეორებით გადახედვასა და გაუმჯობესებას განიცდის, ამიტომ „ნედლეული კოდის“ პირდაპირ სლაიდში სწრაფად კოპირების და ჩასმის შესაძლებლობა ფასდაუდებელია, რაც უზრუნველყოფს დემო განახლებას სინტაქსის ხაზგასმის გარეშე.

სათაური, ილუსტრაცია და ტექსტი (სლაიდზე განლაგება ხდება უჯრედებში AsciiDoctor მაგიდები):

== 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-ის ექსპერიმენტი და გვერდზე სურათების გამართვა Graphviz ონლაინ რეჟიმში.

და ბოლოს, თუ თქვენ გჭირდებათ სლაიდში ჩასვათ დიაგრამა, კლასის დიაგრამა ან სხვა სტანდარტიზებული დიაგრამა, მაშინ AsciiDoctor-თან ინტეგრირებული სხვა სისტემა შეიძლება გამოვიდეს სამაშველოში. PlantUML. ჩემმა კოლეგამ ნიკოლაი პოტაშნიკოვმა დაწერა PlantUML-ის ფართო შესაძლებლობების შესახებ ცალკე პოსტი.

პრეზენტაციის პროექტის გადაქცევა ვერსიის კონტროლის სისტემაში შენახულ კოდად შესაძლებელს ხდის პრეზენტაციაზე ერთობლივი მუშაობის ორგანიზებას, პირველ რიგში, კონტენტის შექმნისა და დიზაინის ამოცანების გამიჯვნას. სლაიდების დიზაინი (შრიფტები, ფონი, ჩაღრმავები) RevealJS-ში აღწერილია CSS-ის გამოყენებით. ჩემი პირადი უნარი CSS-თან დაკავშირებით საუკეთესოდ არის გადმოცემული ეს gif - მაგრამ ეს არ არის საშინელი, როდესაც არიან ადამიანები, რომლებიც მუშაობენ CSS-ით ჩემზე ბევრად უფრო ოსტატურად და სწრაფად. შედეგად, გამოდის, რომ პრეზენტაციის ვადის სწრაფად მოახლოებასთან ერთად, ჩვენ შეგვიძლია ერთდროულად ვიმუშაოთ სხვადასხვა ფაილზე Git-ის საშუალებით და განვავითაროთ თანამშრომლობის სიჩქარე, რაც შეუძლებელია .pptx ფაილების ფოსტით გაგზავნისას.

HTML გვერდის აგება სლაიდებით

მარტივი ტექსტის წყაროები შესანიშნავია, მაგრამ როგორ აწყობთ მათ თავად პრეზენტაციაში?

AsciiDoctor არის Ruby-ში დაწერილი პროექტი და მისი გაშვების რამდენიმე გზა არსებობს. პირველ რიგში, შეგიძლიათ დააინსტალიროთ Ruby ენა და გაუშვათ asciidoctor პირდაპირ, რაც ალბათ ყველაზე ახლოსაა Ruby დეველოპერებთან.

თუ არ გსურთ არეულობა Ruby-ის დაყენებაში, შეგიძლიათ გამოიყენოთ დოკერის სურათი ასციიდოქტორი/დოკერ-ასციდოქტორი, რომელშიც გაშვებისას შეგიძლიათ დააკავშიროთ საქაღალდე პროექტის წყაროებთან VOLUME-ის საშუალებით და მიიღოთ შედეგი მოცემულ ადგილას.

ვარიანტი, რომელიც მე ავირჩიე, შეიძლება გარკვეულწილად მოულოდნელად ჩანდეს, მაგრამ ის ყველაზე მოსახერხებელია ჩემთვის, როგორც Java დეველოპერისთვის. ის არ საჭიროებს Ruby-ის ან დოკერის ინსტალაციას, მაგრამ საშუალებას გაძლევთ შექმნათ სლაიდები Maven სკრიპტის გამოყენებით.

საქმე იმაშია, რომ პროექტი ჯრაბი - Ruby ენის Java იმპლემენტაცია იმდენად კარგია, რომ გაძლევთ საშუალებას გაუშვათ თითქმის ყველაფერი, რაც Ruby-სთვის არის შექმნილი Java მანქანაში, ხოლო AsciiDoctor-ის გაშვება JRuby-ის ერთ-ერთი ყველაზე გავრცელებული გამოყენებაა.

Наличие asciidoctor-maven-plugin საშუალებას გაძლევთ შეაგროვოთ AsciiDoctor დოკუმენტაცია, რომელიც არის Java პროექტის ნაწილი (რომელსაც ჩვენ აქტიურად ვიყენებთ). ამავდროულად, AsciiDoctor და JRuby ავტომატურად იტვირთება Maven-ის მიერ, ხოლო AsciiDoctor მუშაობს JRuby გარემოში: არ არის საჭირო მანქანაზე რაიმეს დაყენება! (პაკეტის გამოკლებით graphviz, რომელიც საჭიროა, თუ გსურთ გამოიყენოთ GraphViz ან PlantUML გრაფიკა.) უბრალოდ განათავსეთ თქვენი .adoc ფაილები საქაღალდეში src/main/asciidoc/. აქ პომნიკის მაგალითისლაიდების შეგროვება დიაგრამებით.

გადაიყვანეთ სლაიდები PDF-ში

მიუხედავად იმისა, რომ სლაიდების HTML ვერსია საკმაოდ თვითკმარია, მაინც აუცილებელია სლაიდების PDF ვერსიის არსებობა. პირველ რიგში, ხდება, რომ ზოგიერთ კონფერენციაზე, რომელიც არ აძლევს სპიკერს საკუთარი ლეპტოპის დაკავშირების შესაძლებლობას, მათ სჭირდებათ სლაიდები "მკაცრად pptx ან pdf ფორმატში", იმის მოლოდინის გარეშე, რომ ისინი ასევე HTML-შია. მეორეც, კარგი საშუალებაა ორგანიზატორებს გაუგზავნოთ თქვენი სლაიდების დაუმუშავებელი ვერსია, როგორც ისინი ნაჩვენები იყო მოხსენებაში, PDF ფორმატში ფაილის კონფერენციის მასალებში გამოსაქვეყნებლად.

საბედნიეროდ, Node.js უტილიტა უმკლავდება ამ ამოცანას. decktapeბაზაზე აგებული მარიონეტული — ავტომატიზაციის სისტემები 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 სისტემის ბუნებრივი არჩევანია TravisCIდა მზა პრეზენტაციების მასპინძლობისთვის - github.io. იდეა github.io არის ის, რომ ნებისმიერი სტატიკური შინაარსი გამოქვეყნებულია ფილიალში gh-pages თქვენი პროექტის GitHub-ზე, ხელმისაწვდომი ხდება მისამართზე <ваше имя>.gihub.io/<ваш проект>.

დაასრულეთ TravisCI კონფიგურაციის ფაილი, მათ შორის გვერდის HTML ვერსიის შედგენა Maven-ის გამოყენებით, 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 სკრიპტებით და CI კონფიგურაციით Travis-CI-სთვის, რომელთა კლონირება და გამოყენება შესაძლებელია თქვენი საკუთარი საპრეზენტაციო პროექტების შექმნისას:

• https://github.com/inponomarev/kstreams-examples (ჩემი საუბარი JPoint 2019-ისთვის)

• https://github.com/inponomarev/csa-hb (ჩემი მოხსენება Heisenbug 2019-ისთვის)

ნახვამდის Powerpoint! არამგონია ოდესმე დამჭირდე ტექნიკური პრეზენტაციებისთვის :)

წყარო: www.habr.com