कोडको रूपमा प्रस्तुति, वा किन म अब PowerPoint प्रयोग गर्दिन

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

हामी के चाहन्छौं

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

1. प्रस्तुति मार्कअप भाषामा सादा पाठ फाइल हुनुपर्छ।
2. हाम्रा स्लाइडहरू विकास परियोजनाहरूका बारेमा हुन्, त्यसैले मार्कअपले बाह्य प्रणालीहरूको सहारा नगरी सम्मिलित गर्न सजिलो बनाउनुपर्छ।
   • सिन्ट्याक्स हाइलाइटिङको साथ कोड टुक्राहरू,
   • तीरहरूद्वारा जोडिएका ज्यामितीय आकारहरूको रूपमा सरल रेखाचित्रहरू,
   • UML रेखाचित्र, फ्लोचार्ट र थप।
3. प्रस्तुतीकरण मस्यौदा संस्करण नियन्त्रण प्रणालीमा भण्डारण हुनुपर्छ।
4. समाप्त स्लाइडहरूको प्रमाणीकरण र संयोजन सीआई प्रणालीमा गरिनु पर्छ।

आज, मार्कअप भाषाहरूमा स्लाइडहरू सिर्जना गर्न दुई आधारभूत विकल्पहरू छन्: प्याकेज बीमर LaTeX को लागि वा HTML/CSS प्रयोग गरेर स्लाइडहरू सिर्जना गर्नका लागि फ्रेमवर्कहरू मध्ये एक (RevalJS, टिप्पणी, deck.js र धेरै अन्य)।

यद्यपि मेरो आत्मा 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 — एउटा भाषा जसले तपाईंलाई ग्राफ आरेखहरू वर्णन गर्न अनुमति दिन्छ र तिनीहरू बीचको जडानहरूको विवरणको आधारमा। 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 अनलाइन.

अन्तमा, यदि तपाइँलाई स्लाइडमा फ्लोचार्ट, वर्ग रेखाचित्र वा अन्य मानकीकृत रेखाचित्र सम्मिलित गर्न आवश्यक छ भने, त्यसपछि AsciiDoctor सँग एकीकृत अर्को प्रणाली उद्धारमा आउन सक्छ, PlantUML। मेरो सहकर्मी निकोलाई पोटाश्निकोभले PlantUML को व्यापक क्षमताहरूको बारेमा लेखे। अलग पोस्ट.

प्रस्तुतीकरण परियोजनालाई संस्करण नियन्त्रण प्रणालीमा भण्डारण गरिएको कोडमा परिणत गर्नाले प्रस्तुतीकरणमा संयुक्त कार्यहरू व्यवस्थित गर्न सम्भव बनाउँछ, सबै भन्दा पहिले, सामग्री र डिजाइन सिर्जना गर्ने कार्यहरू अलग गर्न। RevealJS मा स्लाइडहरू (फन्टहरू, पृष्ठभूमिहरू, इन्डेन्टहरू) को डिजाइन CSS प्रयोग गरी वर्णन गरिएको छ। CSS को साथ मेरो व्यक्तिगत सीप सबै भन्दा राम्रो द्वारा व्यक्त गरिएको छ यो gif - तर यो डरलाग्दो छैन जब त्यहाँ व्यक्तिहरू छन् जसले CSS मा म भन्दा धेरै कुशलतापूर्वक र छिटो काम गर्छन्। नतिजाको रूपमा, यो बाहिर जान्छ कि प्रस्तुतीकरणको लागि द्रुत रूपमा नजिकको समयसीमाको साथ, हामी Git मार्फत विभिन्न फाइलहरूमा काम गर्न सक्छौं र मेल मार्फत .pptx फाइलहरू पठाउँदा असम्भव हुने सहकार्यको गति विकास गर्न सक्छौं।

स्लाइडहरूसँग HTML पृष्ठ निर्माण गर्दै

सादा पाठ स्रोतहरू उत्कृष्ट छन्, तर तपाइँ तिनीहरूलाई प्रस्तुतीकरणमा कसरी कम्पाइल गर्नुहुन्छ?

AsciiDoctor Ruby मा लेखिएको परियोजना हो, र यसलाई चलाउन धेरै तरिकाहरू छन्। पहिले, तपाईं रुबी भाषा स्थापना गर्न सक्नुहुन्छ र asciidoctor सीधा चलाउन सक्नुहुन्छ, जुन सम्भवतः रुबी विकासकर्ताहरूको सबैभन्दा नजिकको कुरा हो।

यदि तपाइँ रुबी स्थापना गर्न गडबड गर्न चाहनुहुन्न भने, तपाइँ डकर छवि प्रयोग गर्न सक्नुहुन्छ asciidoctor/docker-asciidoctor, जसमा, जब सुरु हुन्छ, तपाईंले VOLUME मार्फत फोल्डरलाई परियोजना स्रोतहरूसँग जडान गर्न सक्नुहुन्छ र दिइएको स्थानमा परिणाम प्राप्त गर्न सक्नुहुन्छ।

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

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

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

स्लाइडहरूलाई PDF मा रूपान्तरण गर्नुहोस्

यद्यपि स्लाइडहरूको HTML संस्करण एकदम आत्म-पर्याप्त छ, यो अझै पनि स्लाइडहरूको PDF संस्करण हुनु आवश्यक छ। पहिलो, यो हुन्छ कि केहि सम्मेलनहरूमा जसले स्पिकरलाई आफ्नै ल्यापटप जडान गर्ने अवसर प्रदान गर्दैन, उनीहरूलाई HTML मा पनि छन् भन्ने आशा नगरी "कडा रूपमा pptx वा pdf ढाँचामा" स्लाइडहरू चाहिन्छ। दोस्रो, सम्मेलन सामग्रीहरूमा फाइलको प्रकाशनको लागि पीडीएफ ढाँचामा रिपोर्टमा देखाइएका रूपमा आयोजकहरूलाई तपाईंको स्लाइडहरूको सम्पादित संस्करण पठाउनु राम्रो हो।

सौभाग्य देखि, Node.js उपयोगिताले यो कार्य ह्यान्डल गर्दछ। डेकटेपआधारमा निर्मित कठपुतली - क्रोम ब्राउजर प्रबन्ध गर्न को लागी स्वचालन प्रणाली। तपाईले 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 कन्फिगरेसन फाइल पूरा गर्नुहोस्, Maven प्रयोग गरेर पृष्ठको HTML संस्करण कम्पाइल गर्ने, डेकटेप प्रयोग गरेर 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 मा ती प्रस्तुतीकरणहरू अपलोड गर्नुपर्छ जुन तपाईले अन्ततः सार्वजनिक गर्न चाहानुहुन्छ।)

परियोजनाहरूको उदाहरणहरू

अन्तमा, यहाँ ट्राभिस-सीआईको लागि अनुकूलित माभेन स्क्रिप्टहरू र CI कन्फिगरेसनको साथ प्रस्तुतीकरण परियोजनाहरूको केही उदाहरणहरूको लिङ्कहरू छन्, जुन क्लोन गर्न सकिन्छ र तपाईंको आफ्नै प्रस्तुतीकरण परियोजनाहरू सिर्जना गर्दा प्रयोग गर्न सकिन्छ:

• https://github.com/inponomarev/kstreams-examples (JPoint 2019 को लागि मेरो कुराकानी)

• https://github.com/inponomarev/csa-hb (हेइसेनबग २०१९ को लागि मेरो रिपोर्ट)

अलविदा PowerPoint! प्राविधिक प्रस्तुतिहरूको लागि मलाई तपाइँको आवश्यकता पर्दैन जस्तो लाग्दैन :)

स्रोत: www.habr.com