ऐसा लगता है कि मुझे आईटी में अपने करियर के लिए सहयोगियों, ग्राहकों और सार्वजनिक प्रस्तुतियों के लिए दर्जनों प्रस्तुतियां देने का मौका मिला। कई सालों से, स्लाइड बनाने के साधन के रूप में पावरपॉइंट मेरे लिए एक स्वाभाविक और विश्वसनीय विकल्प बना हुआ है। लेकिन इस साल स्थिति गुणात्मक रूप से बदल गई है। फरवरी से मई तक मुझे पांच सम्मेलनों में बोलने का अवसर मिला, और रिपोर्ट के लिए स्लाइड को थोड़े समय में तैयार किया जाना था, लेकिन उच्च गुणवत्ता के साथ। यह सवाल काम के उस हिस्से को दर्शाने को लेकर पैदा हुआ, जैसा कि स्लाइड के दृश्य डिजाइन के लिए, अन्य लोगों के लिए। एक बार जब मैंने मेल द्वारा .pptx फाइलें भेजकर एक डिजाइनर के साथ काम करने की कोशिश की, लेकिन काम अराजकता में बदल गया: किसी को नहीं पता था कि स्लाइड्स का कौन सा संस्करण "नवीनतम" था, और हमारी मशीनों पर पावरपॉइंट संस्करणों और फोंट में अंतर के कारण लेआउट "चला गया" था। । और मैंने कुछ नया करने की कोशिश की। मैंने इसकी कोशिश की, और तब से मैं पावरपॉइंट पर वापस जाने के लिए नहीं सोचता।
हम क्या चाहते हैं?
लगभग डेढ़ साल पहले, हमने कंपनी में प्रोजेक्ट डॉक्यूमेंटेशन बनाने के लिए वर्ड का उपयोग करने से इनकार कर दिया था, जो एक ही समस्या का सामना कर रहा था: हालाँकि वर्ड एक छोटे से डॉक्यूमेंट को टाइप करने के लिए अच्छा है, जैसे-जैसे वॉल्यूम बढ़ता है, एक साथ काम करने और उच्च-गुणवत्ता और एकीकृत डिज़ाइन प्राप्त करने में कठिनाइयाँ होती हैं। हमारी पसंद AsciiDoctor पर गिरी , और हम इस पसंद पर ख़ुशी नहीं रोक रहे हैं, लेकिन यह एक अलग लेख के लिए एक विषय है। लगभग उसी समय, हमने "कोड के रूप में सब कुछ" के DevOps सिद्धांतों में से एक की प्रभावशीलता को सीखा, इसलिए प्रस्तुति स्लाइड बनाने के लिए नई तकनीक के लिए आवश्यकताओं का चुनाव बहुत स्पष्ट था:
- प्रस्तुति एक मार्कअप भाषा में एक सादे पाठ फ़ाइल होनी चाहिए।
- हमारे पास विकास परियोजनाओं के बारे में स्लाइड्स हैं, इसलिए मार्कअप को आपको बाहरी सिस्टम का सहारा लिए बिना आसानी से सम्मिलित करने की अनुमति देनी चाहिए
- सिंटैक्स हाइलाइट किए गए कोड के टुकड़े,
- तीर द्वारा जुड़े ज्यामितीय आकृतियों के रूप में सरल आरेख,
- यूएमएल आरेख, फ़्लोचार्ट, और बहुत कुछ।
- प्रस्तुति परियोजना को एक संस्करण नियंत्रण प्रणाली में संग्रहीत किया जाना चाहिए।
- तैयार स्लाइड्स का सत्यापन और संयोजन सीआई सिस्टम में किया जाना चाहिए।
आज मार्कअप भाषाओं में स्लाइड बनाने के लिए दो बुनियादी विकल्प हैं: एलईटीएक्स के लिए बीमर पैकेज या HTML / CSS स्लाइड ( RevealJS , टिप्पणी , डेक.जेएस और कई अन्य) बनाने के लिए फ्रेमवर्क में से एक।
यद्यपि मेरी आत्मा LaTeX के साथ है, मेरे दिमाग ने सुझाव दिया कि एक समाधान का विकल्प जिसका मैं अकेले उपयोग नहीं करूंगा, समाधान के पक्ष में होना चाहिए, जो लोगों के एक व्यापक सर्कल से परिचित है। हर कोई LaTeX को नहीं जानता है, और यदि आपका रोजमर्रा का अभ्यास वैज्ञानिक लेख लिखने से संबंधित नहीं है, तो आपके पास इस प्रणाली की विशाल, जटिल दुनिया में खुद को विसर्जित करने का समय नहीं है।
हालांकि, HTML / CSS की महारत यह कहने के लिए नहीं है कि यह एक सर्वव्यापी कौशल है: उदाहरण के लिए, मैं इसे पूरी तरह से नहीं बताता हूं। सौभाग्य से, परिचित AsciiDoctor बचाव के लिए आता है: asciidoctor-revjs कनवर्टर आपको 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 update\n+ 13 warnings"] r0[shape=point, width = 0] r1 -> r0[ arrowhead = none, label="master branch" ]; r0-> r2 []; b1 -> b4; r1->b1 r1[label="150\nwarnings"] b1[label="± 0\nwarnings"] b4[label="± 0\nwarnings"] b4->r2 r2[label="163\nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>] {rank = same; u; r0; b4;} } -----
वैसे, ग्राफविज़ और डिबगिंग चित्रों के साथ प्रयोग करना ग्राफविज़ ऑनलाइन पेज पर सुविधाजनक है।
अंत में, यदि आपको स्लाइड में एक ब्लॉक आरेख, वर्ग आरेख, या अन्य मानकीकृत आरेख सम्मिलित करने की आवश्यकता है, तो AsciiDoctor, PlantUML के साथ एकीकृत एक और प्रणाली बचाव में आ सकती है। मेरे सहयोगी निकोलाई पोटाशनिकोव ने प्लांटयूएमएल की विशाल क्षमताओं के बारे में एक अलग पोस्ट लिखी।
संस्करण नियंत्रण प्रणाली पर संग्रहीत कोड में प्रस्तुति परियोजना का परिवर्तन सामग्री और डिजाइन बनाने के कार्यों को अलग करने के लिए, सबसे पहले, प्रस्तुति पर संयुक्त कार्य को व्यवस्थित करना संभव बनाता है। RevealJS में स्लाइड्स (फोंट, बैकग्राउंड, इंडेंट्स) के डिजाइन को सीएसएस का उपयोग करके वर्णित किया गया है। इस GIF द्वारा मेरे व्यक्तिगत CSS कौशल को सबसे अच्छी तरह से अवगत कराया गया है - लेकिन यह डरावना नहीं है जब ऐसे लोग हैं जो CSS की तुलना में बहुत अधिक चुस्त और मेरे साथ काम करते हैं। नतीजतन, यह पता चला है कि तेजी से आ रही प्रस्तुति की समय सीमा के संदर्भ में, हम एक साथ गिट के माध्यम से विभिन्न फाइलों पर काम कर सकते हैं और मेल द्वारा .pptx फाइलें भेजते समय सहयोग की गति को विकसित करना असंभव है।
स्लाइड्स के साथ एक HTML पेज बनाएँ
सादा पाठ स्रोत महान हैं, लेकिन आप उन्हें प्रस्तुति में कैसे संकलित करते हैं?
AsciiDoctor एक रूबी परियोजना है और आप इसे कई तरीकों से चला सकते हैं। सबसे पहले, आप रूबी भाषा को स्थापित कर सकते हैं और asciidoctor को सीधे चला सकते हैं, जो संभवतः रूबी डेवलपर्स के सबसे करीब होगा।
यदि आप रूबी को स्थापित करने में शामिल नहीं होना चाहते हैं, तो आप docker की छवि asciidoctor / docker-asciidoctor का उपयोग कर सकते हैं, जिसमें आप VOLUME के माध्यम से प्रोजेक्ट स्रोत फ़ोल्डर को कनेक्ट कर सकते हैं और निर्दिष्ट स्थान पर परिणाम प्राप्त कर सकते हैं।
जो विकल्प मैंने तय किया है वह कुछ अप्रत्याशित लग सकता है, लेकिन यह मेरे लिए जावा डेवलपर के रूप में सबसे सुविधाजनक है। इसमें रूबी या डॉकटर की स्थापना की आवश्यकता नहीं है, लेकिन आपको मावेन स्क्रिप्ट का उपयोग करके स्लाइड उत्पन्न करने की अनुमति मिलती है।
तथ्य यह है कि JRuby परियोजना - रूबी भाषा का जावा कार्यान्वयन - इतना अच्छा है कि यह आपको लगभग हर चीज को चलाने की अनुमति देता है जो रूबी के लिए जावा मशीन में बनाई गई है, और AsciiDoctor को चलाना सबसे आम रूबी अनुप्रयोगों में से एक है।
Asciidoctor-maven-plugin की उपस्थिति आपको AsciiDoctor-प्रलेखन को इकट्ठा करने की अनुमति देती है, जो जावा-प्रोजेक्ट का हिस्सा है (जिसका हम सक्रिय रूप से उपयोग करते हैं)। उसी समय, AsciiDoctor और JRuby को मावेन द्वारा स्वचालित रूप से डाउनलोड किया जाता है, और AsciiDoctor को JRuby वातावरण में निष्पादित किया जाता है: मशीन पर कुछ भी स्थापित करने की आवश्यकता नहीं है! ( graphviz पैकेज को छोड़कर, यदि आपको ग्राफविज़ या प्लांटयूएमएल ग्राफिक्स का उपयोग करना है, तो ज़रूरत है।) बस अपनी .adoc फ़ाइलों को src/main/asciidoc/ । यहाँ एक स्लाइडहाउस का एक उदाहरण है जो आरेखीय स्लाइड एकत्र करता है।
स्लाइड्स को पीडीएफ में बदलें
हालाँकि स्लाइड्स का HTML संस्करण पूरी तरह से आत्मनिर्भर है, फिर भी स्लाइड्स का एक पीडीएफ संस्करण होना आवश्यक है। सबसे पहले, ऐसा होता है कि कुछ सम्मेलनों में जो स्पीकर को अपने स्वयं के लैपटॉप को जोड़ने की क्षमता प्रदान नहीं करते हैं, उन्हें स्लाइड्स की आवश्यकता है "कड़ाई से pptx या पीडीएफ प्रारूप में", यह अपेक्षा नहीं कि वे 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 सिस्टम के लिए प्राकृतिक विकल्प ट्रैविसीआई है , और तैयार प्रस्तुतियों की मेजबानी के लिए - imtqy.com । Github.io का विचार यह है कि GitHub पर आपके प्रोजेक्ट के g gh-pages शाखा में रखी गई कोई भी स्थिर सामग्री < >.gihub.io/< > पर उपलब्ध हो जाती है।
पूर्ण ट्रैविसीआई कॉन्फ़िगरेशन फ़ाइल, जिसमें मावेन का उपयोग करके पृष्ठ के एचटीएमएल संस्करण को संकलित करना, डेकटैप का उपयोग करके पीडीएफ में कनवर्ट करना और परिणाम को जीथ -बियो पर प्रकाशन के लिए gh-pages शाखा पर अपलोड करना शामिल है, इस तरह दिखता है।
ट्रैविसीआई की ओर से इस तरह की परियोजना का निर्माण करने के लिए, आपको पर्यावरण चर को कॉन्फ़िगर करने की आवश्यकता है
GH_REF - github.com/inponomarev/csa-hb फॉर्म का मूल्यGH_TOKEN - GH_TOKEN पहुंच टोकन। आप इसे GitHub पर अपनी प्रोफ़ाइल सेटिंग, डेवलपर सेटिंग्स -> व्यक्तिगत एक्सेस टोकन पर प्राप्त कर सकते हैं। यदि आप प्रस्तुति को सार्वजनिक रिपॉजिटरी में अपलोड करते हैं, तो इस टोकन के लिए केवल एक्सेस स्तर "पब्लिक रिपॉजिटरी एक्सेस" को निर्दिष्ट करना पर्याप्त है।GH_USER_EMAIL / GH_USER_NAME - नाम / मेल जोड़ी, जिसकी ओर से gh-pages शाखा को धक्का दिया जाएगा।
इस प्रकार, GitHub पर प्रस्तुति कोड की प्रत्येक प्रतिबद्ध स्वचालित रूप से HTML और पीडीएफ प्रारूपों में स्लाइड्स का पुनर्निर्माण करेगी और उन्हें imtqy.com पर पुनः लोड करेगी। (बेशक, केवल वे प्रस्तुतियाँ जिन्हें आप अंत में सार्वजनिक करना चाहते हैं, उन्हें imtqy.com पर अपलोड किया जाना चाहिए।)
प्रोजेक्ट उदाहरण
अंत में, ट्रेविस-सीआई के लिए अनुकूलित मावेन लिपियों और सीआई कॉन्फ़िगरेशन के साथ प्रस्तुति परियोजनाओं के कुछ उदाहरणों के लिंक हैं, जिन्हें आप अपनी प्रस्तुति परियोजनाओं को बनाते समय क्लोन और उपयोग कर सकते हैं:
अलविदा पावरपॉइंट! मुझे नहीं लगता कि मुझे कभी भी तकनीकी प्रस्तुतियों के लिए आपकी आवश्यकता होगी :-)