🥇कोड के रूप में प्रस्तुति, या मैं अब पावरपॉइंट का उपयोग क्यों नहीं करता

मुझे लगता है कि मैंने अपने आईटी करियर में सहकर्मियों, ग्राहकों और सार्वजनिक भाषणों के लिए दर्जनों प्रस्तुतियाँ दी हैं। कई वर्षों से, स्लाइड उत्पादन उपकरण के रूप में पावरपॉइंट मेरे लिए एक स्वाभाविक और विश्वसनीय विकल्प रहा है। लेकिन इस साल स्थिति गुणात्मक रूप से बदल गयी है. फरवरी से मई तक, मुझे पाँच सम्मेलनों में बोलने का अवसर मिला, और रिपोर्ट के लिए स्लाइडें कम समय में, लेकिन उच्च गुणवत्ता के साथ तैयार करनी पड़ीं। स्लाइड के विज़ुअल डिज़ाइन से संबंधित कार्य के उस भाग को अन्य लोगों को सौंपने के बारे में प्रश्न उठा। मैंने एक बार मेल द्वारा .pptx फ़ाइलें भेजकर एक डिजाइनर के साथ काम करने की कोशिश की, लेकिन काम अराजकता में बदल गया: कोई नहीं जानता था कि स्लाइड का कौन सा संस्करण "नवीनतम" था, और पावरपॉइंट में अंतर के कारण लेआउट "चल रहा था" हमारी मशीनों पर संस्करण और फ़ॉन्ट। और मैंने कुछ नया आज़माने का फैसला किया। मैंने इसे आज़माया, और तब से मैंने पावरपॉइंट पर वापस जाने के बारे में नहीं सोचा।

हम क्या चाहते हैं

लगभग डेढ़ साल पहले, हमारी कंपनी ने उन्हीं समस्याओं का सामना करते हुए प्रोजेक्ट डॉक्यूमेंटेशन बनाने के लिए वर्ड का उपयोग बंद कर दिया था: हालाँकि वर्ड एक छोटे दस्तावेज़ को टाइप करने के लिए अच्छा है, जैसे-जैसे वॉल्यूम बढ़ता है, सहयोग और उच्च-गुणवत्ता प्राप्त करने में कठिनाइयाँ उत्पन्न होती हैं और एकीकृत डिज़ाइन. हमारी पसंद गिर गई Asciiडॉक्टर, और हम इस विकल्प पर खुशी मनाना कभी नहीं छोड़ते, लेकिन यह एक अलग लेख का विषय है। लगभग उसी समय, हमने "कोड के रूप में सब कुछ" के DevOps सिद्धांतों में से एक की प्रभावशीलता सीखी, इसलिए प्रेजेंटेशन स्लाइड बनाने के लिए नई तकनीक के लिए आवश्यकताओं का विकल्प काफी स्पष्ट था:

प्रस्तुतिकरण मार्कअप भाषा में एक सादा पाठ फ़ाइल होनी चाहिए।
हमारी स्लाइड्स विकास परियोजनाओं के बारे में हैं, इसलिए मार्कअप को बाहरी सिस्टम का सहारा लिए बिना सम्मिलित करना आसान बनाना चाहिए
- सिंटैक्स हाइलाइटिंग के साथ कोड टुकड़े,
- तीरों से जुड़े ज्यामितीय आकृतियों के रूप में सरल आरेख,
- यूएमएल आरेख, फ़्लोचार्ट और बहुत कुछ।
प्रेजेंटेशन ड्राफ्ट को एक संस्करण नियंत्रण प्रणाली में संग्रहीत किया जाना चाहिए।
तैयार स्लाइडों का सत्यापन और संयोजन सीआई प्रणाली में किया जाना चाहिए।

आज, मार्कअप भाषाओं में स्लाइड बनाने के लिए दो बुनियादी विकल्प हैं: पैकेज बीमर LaTeX के लिए या HTML/CSS का उपयोग करके स्लाइड बनाने के लिए फ्रेमवर्क में से एक के लिए (खुलासा, टिप्पणी, डेक.जे.एस गंभीर प्रयास)।

हालाँकि मेरी आत्मा LaTeX में निहित है, मेरे दिमाग ने तय किया कि एक ऐसे समाधान का चुनाव जिसका उपयोग करने वाला मैं अकेला नहीं होऊँगा, लोगों के एक व्यापक समूह से परिचित समाधान के पक्ष में होना चाहिए। हर कोई LaTeX नहीं जानता है, और यदि आपका दैनिक अभ्यास वैज्ञानिक लेख लिखने से संबंधित नहीं है, तो आपके पास इस प्रणाली की विशाल, जटिल दुनिया में डूबने का समय होने की संभावना नहीं है।

हालाँकि, HTML/CSS में महारत हासिल करना वास्तव में एक व्यापक कौशल नहीं है: उदाहरण के लिए, मैं इसमें पूरी तरह से दक्ष नहीं हूँ। सौभाग्य से, पहले से ही परिचित AsciiDoctor बचाव के लिए आता है: एक कनवर्टर asciidoctor-revealjs आपको 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();
----

परिणाम

किसी बातचीत की तैयारी में, कोड डेमो को बार-बार संशोधन और सुधार से गुजरना पड़ता है, इसलिए "कच्चे कोड" को सीधे स्लाइड में कॉपी और पेस्ट करने की क्षमता अमूल्य है, जिससे यह सुनिश्चित होता है कि सिंटैक्स हाइलाइटिंग के बारे में चिंता किए बिना डेमो अद्यतित है।

शीर्षक, चित्रण और पाठ (स्लाइड पर लेआउट कोशिकाओं में किया जाता है 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;}
}
-----

परिणाम

वैसे, ग्राफ़विज़ के साथ प्रयोग करना और पेज पर छवियों को डीबग करना सुविधाजनक है ग्राफ़विज़ ऑनलाइन.

अंत में, यदि आपको किसी स्लाइड में फ़्लोचार्ट, क्लास आरेख या अन्य मानकीकृत आरेख सम्मिलित करने की आवश्यकता है, तो AsciiDoctor के साथ एकीकृत एक अन्य प्रणाली बचाव में आ सकती है, प्लांटयूएमएल. मेरे सहयोगी निकोलाई पोटाशनिकोव ने प्लांटयूएमएल की व्यापक क्षमताओं के बारे में लिखा अलग पोस्ट.

प्रेजेंटेशन प्रोजेक्ट को संस्करण नियंत्रण प्रणाली पर संग्रहीत कोड में बदलने से प्रेजेंटेशन पर संयुक्त कार्य को व्यवस्थित करना संभव हो जाता है, सबसे पहले, सामग्री और डिज़ाइन बनाने के कार्यों को अलग करना। RevealJS में स्लाइड्स (फ़ॉन्ट, बैकग्राउंड, इंडेंट) का डिज़ाइन CSS का उपयोग करके वर्णित किया गया है। सीएसएस के साथ मेरा व्यक्तिगत कौशल सबसे अच्छी तरह से व्यक्त किया गया है यह GIF - लेकिन यह डरावना नहीं है जब ऐसे लोग हों जो सीएसएस के साथ मुझसे कहीं अधिक निपुणता और तेजी से काम करते हैं। परिणामस्वरूप, यह पता चलता है कि एक प्रस्तुति के लिए तेजी से निकट आने वाली समय सीमा के साथ, हम Git के माध्यम से विभिन्न फाइलों पर एक साथ काम कर सकते हैं और सहयोग की गति विकसित कर सकते हैं जो मेल द्वारा .pptx फ़ाइलें भेजते समय असंभव है।

स्लाइड्स के साथ एक HTML पेज बनाना

सादा पाठ स्रोत बहुत अच्छे हैं, लेकिन आप उन्हें प्रेजेंटेशन में कैसे संकलित करते हैं?

AsciiDoctor रूबी में लिखा गया एक प्रोजेक्ट है, और इसे चलाने के कई तरीके हैं। सबसे पहले, आप रूबी भाषा स्थापित कर सकते हैं और सीधे एस्सीडॉक्टर चला सकते हैं, जो संभवतः रूबी डेवलपर्स के लिए सबसे करीबी चीज़ है।

यदि आप रूबी को स्थापित करने में गड़बड़ी नहीं करना चाहते हैं, तो आप डॉकर छवि का उपयोग कर सकते हैं asciidoctor/docker-asciidoctor, जिसमें, लॉन्च होने पर, आप VOLUME के माध्यम से फ़ोल्डर को प्रोजेक्ट स्रोतों से कनेक्ट कर सकते हैं और किसी दिए गए स्थान पर परिणाम प्राप्त कर सकते हैं।

मेरे द्वारा चुना गया विकल्प कुछ हद तक अप्रत्याशित लग सकता है, लेकिन जावा डेवलपर के रूप में यह मेरे लिए सबसे सुविधाजनक है। इसके लिए रूबी या डॉकर की स्थापना की आवश्यकता नहीं है, लेकिन यह आपको मावेन स्क्रिप्ट का उपयोग करके स्लाइड बनाने की अनुमति देता है।

मुद्दा यह है कि परियोजना जरूबी - रूबी भाषा का जावा कार्यान्वयन इतना अच्छा है कि यह आपको जावा मशीन में रूबी के लिए बनाई गई लगभग किसी भी चीज़ को चलाने की अनुमति देता है, और AsciiDoctor चलाना JRuby के सबसे आम उपयोगों में से एक है।

उपलब्धता एस्कीडॉक्टर-मेवेन-प्लगइन आपको AsciiDoctor दस्तावेज़ एकत्र करने की अनुमति देता है जो जावा प्रोजेक्ट का हिस्सा है (जिसे हम सक्रिय रूप से उपयोग करते हैं)। उसी समय, AsciiDoctor और JRuby Maven द्वारा स्वचालित रूप से डाउनलोड किए जाते हैं, और AsciiDoctor JRuby वातावरण में चलता है: मशीन पर कुछ भी इंस्टॉल करने की कोई आवश्यकता नहीं है! (पैकेज को छोड़कर graphviz, यदि आप ग्राफविज़ या प्लांटयूएमएल ग्राफ़िक्स का उपयोग करना चाहते हैं तो इसकी आवश्यकता है।) बस अपनी .adoc फ़ाइलों को एक फ़ोल्डर में रखें src/main/asciidoc/। यहां पोमनिक का उदाहरणआरेखों के साथ स्लाइड एकत्रित करना।

स्लाइड्स को पीडीएफ में बदलें

हालाँकि स्लाइड्स का HTML संस्करण काफी आत्मनिर्भर है, फिर भी स्लाइड्स का पीडीएफ संस्करण होना आवश्यक है। सबसे पहले, ऐसा होता है कि कुछ सम्मेलनों में जो वक्ता को अपना लैपटॉप कनेक्ट करने का अवसर प्रदान नहीं करते हैं, उन्हें "कड़ाई से पीपीटीएक्स या पीडीएफ प्रारूप में" स्लाइड की आवश्यकता होती है, बिना यह उम्मीद किए कि वे HTML में भी हैं। दूसरे, सम्मेलन सामग्री में फ़ाइल के प्रकाशन के लिए आयोजकों को अपनी स्लाइडों का एक असंपादित संस्करण पीडीएफ प्रारूप में भेजना अच्छा तरीका है, जैसा कि रिपोर्ट में दिखाया गया था।

सौभाग्य से, Node.js उपयोगिता इस कार्य को संभालती है। डेकटेप, के आधार पर बनाया गया है कठपुतली चलानेवाला — क्रोम ब्राउज़र के प्रबंधन के लिए स्वचालन प्रणाली। आप कमांड से RevealJS प्रेजेंटेशन को पीडीएफ में बदल सकते हैं

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf

डेकटेप लॉन्च करते समय दो तरकीबें, जिन्हें हमें परीक्षण और त्रुटि के माध्यम से सामने लाना था:

पैरामीटर के माध्यम से संकल्प -s दोहरे मार्जिन के साथ निर्दिष्ट किया जाना चाहिए, अन्यथा रूपांतरण परिणामों में समस्याएँ हो सकती हैं
प्रेजेंटेशन के HTML संस्करण के URL में आपको एक पैरामीटर पास करने की आवश्यकता है ?fragments=true, जो आपकी स्लाइड की प्रत्येक मध्यवर्ती स्थिति के लिए एक अलग पीडीएफ पेज बनाएगा (उदाहरण के लिए, पांच बुलेट बिंदुओं के लिए पांच पेज यदि उन्हें एक के बाद एक दिखाया जाता है)। यह आपको किसी रिपोर्ट के दौरान प्रेजेंटेशन के रूप में ऐसी पीडीएफ का उपयोग करने की अनुमति देगा।

वेब पर स्वचालित असेंबली और प्रकाशन

यह सुविधाजनक है जब संस्करण नियंत्रण प्रणाली में परिवर्तन किए जाने पर स्लाइड स्वचालित रूप से संकलित की जाती हैं, और यह तब और भी सुविधाजनक होता है जब स्वचालित रूप से संकलित स्लाइड सार्वजनिक उपयोग के लिए इंटरनेट पर पोस्ट की जाती हैं। इंटरनेट से स्लाइड को इंटरनेट से जुड़ी किसी भी मशीन और प्रोजेक्टर से दर्शकों के सामने आसानी से "खेला" जा सकता है।

चूँकि हम अपने काम में GitHub का उपयोग करते हैं, इसलिए CI प्रणाली का स्वाभाविक विकल्प है ट्रैविसी, और तैयार प्रस्तुतियों की मेजबानी के लिए - github.io. Github.io के पीछे का विचार यह है कि कोई भी स्थिर सामग्री किसी शाखा में पोस्ट की जाती है gh-pages आपके प्रोजेक्ट का GitHub पर उपलब्ध हो जाता है <ваше имя>.gihub.io/<ваш проект>.

पूर्ण ट्रैविससीआई कॉन्फ़िगरेशन फ़ाइल, जिसमें मेवेन का उपयोग करके पृष्ठ के HTML संस्करण को संकलित करना, डेकटेप का उपयोग करके पीडीएफ में कनवर्ट करना और परिणामों को थ्रेड पर अपलोड करना शामिल है। gh-pages github.io पर प्रकाशन के लिए, ऐसा लगता है इसलिए.

ट्रैविसीसीआई की ओर से ऐसा प्रोजेक्ट बनाने के लिए, आपको पर्यावरण चर को कॉन्फ़िगर करने की आवश्यकता है

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 पर अपलोड करना चाहिए जिन्हें आप अंततः सार्वजनिक करना चाहते हैं।)

परियोजनाओं के उदाहरण

अंत में, यहां अनुकूलित मावेन स्क्रिप्ट और ट्रैविस-सीआई के लिए सीआई कॉन्फ़िगरेशन के साथ प्रस्तुति परियोजनाओं के कुछ उदाहरणों के लिंक दिए गए हैं, जिन्हें क्लोन किया जा सकता है और आपकी खुद की प्रस्तुति परियोजनाएं बनाते समय उपयोग किया जा सकता है:

https://github.com/inponomarev/kstreams-examples (JPoint 2019 के लिए मेरी बात)
https://github.com/inponomarev/csa-hb (हेइज़नबग 2019 के लिए मेरी रिपोर्ट)

अलविदा पावरप्वाइंट! मुझे नहीं लगता कि मुझे तकनीकी प्रस्तुतियों के लिए कभी आपकी आवश्यकता होगी :)

स्रोत: www.habr.com

कोड के रूप में प्रस्तुति, या मैं अब पावरपॉइंट का उपयोग क्यों नहीं करता

हम क्या चाहते हैं

स्लाइड को कोड कैसे करें

स्लाइड्स के साथ एक HTML पेज बनाना

स्लाइड्स को पीडीएफ में बदलें

वेब पर स्वचालित असेंबली और प्रकाशन

परियोजनाओं के उदाहरण

एक टिप्पणी जोड़ें उत्तर रद्द