🥇 कोड म्हणून सादरीकरण, किंवा मी यापुढे पॉवरपॉइंट का वापरत नाही

मला वाटते की मी माझ्या IT करिअरमध्ये सहकाऱ्यांना, क्लायंटना आणि सार्वजनिक बोलण्यासाठी डझनभर सादरीकरणे दिली आहेत. बर्‍याच वर्षांपासून, पॉवरपॉइंट माझ्यासाठी स्लाइड उत्पादन साधन म्हणून एक नैसर्गिक आणि विश्वासार्ह निवड आहे. मात्र यंदा स्थिती गुणात्मक बदलली आहे. फेब्रुवारी ते मे या कालावधीत मला पाच परिषदांमध्ये बोलण्याची संधी मिळाली आणि अहवालांच्या स्लाइड्स कमी वेळात, पण उच्च दर्जाच्या तयार करायच्या होत्या. स्लाइड्सच्या व्हिज्युअल डिझाइनच्या कामाचा तो भाग इतर लोकांना सोपवण्याबद्दल प्रश्न उद्भवला. मी एकदा एका डिझायनरसोबत काम करण्याचा प्रयत्न केला, मेलद्वारे .pptx फाइल्स पाठवल्या, परंतु काम गोंधळात बदलले: स्लाइड्सची कोणती आवृत्ती "नवीन" आहे हे कोणालाही माहिती नव्हते आणि पॉवरपॉइंटमधील फरकामुळे लेआउट "हलवत" होता. आमच्या मशीनवर आवृत्त्या आणि फॉन्ट. आणि मी काहीतरी नवीन करण्याचा निर्णय घेतला. मी प्रयत्न केला आणि तेव्हापासून मी पॉवरपॉइंटवर परत जाण्याचा विचार केला नाही.

आम्हाला काय हवे आहे

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

सादरीकरण मार्कअप भाषेत एक साधा मजकूर फाइल असणे आवश्यक आहे.
आमच्या स्लाइड्स विकास प्रकल्पांबद्दल आहेत, त्यामुळे मार्कअपने बाह्य प्रणालींचा अवलंब न करता ते घालणे सोपे केले पाहिजे
- वाक्यरचना हायलाइटिंगसह कोडचे तुकडे,
- बाणांनी जोडलेल्या भौमितिक आकारांच्या स्वरूपात साधे आकृती,
- UML आकृत्या, फ्लोचार्ट आणि बरेच काही.
सादरीकरण मसुदा आवृत्ती नियंत्रण प्रणालीमध्ये संग्रहित करणे आवश्यक आहे.
पूर्ण झालेल्या स्लाइड्सचे प्रमाणीकरण आणि असेंबली सीआय सिस्टममध्ये केली पाहिजे.

आज, मार्कअप भाषांमध्ये स्लाइड्स तयार करण्यासाठी दोन मूलभूत पर्याय आहेत: पॅकेज बीमर HTML/CSS वापरून स्लाइड्स तयार करण्यासाठी LaTeX किंवा फ्रेमवर्कपैकी एक (रेव्हलजेएस, टिप्पणी, 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 एक शिक्षण वक्र घेते, परंतु प्रदान केलेल्या उदाहरणांवर आधारित, हे करणे खूपच सोपे आहे! हे असे दिसते:

== Пишем “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 वापरून वर्णन केले आहे. CSS सह माझे वैयक्तिक कौशल्य उत्तम प्रकारे व्यक्त केले आहे हे gif - परंतु जेव्हा असे लोक असतात जे माझ्यापेक्षा अधिक कुशलतेने आणि वेगवानपणे CSS सह काम करतात तेव्हा ते भयानक नसते. परिणामी, असे दिसून आले की सादरीकरणासाठी वेगाने जवळ येत असलेल्या अंतिम मुदतीसह, आम्ही Git द्वारे एकाच वेळी वेगवेगळ्या फाइल्सवर काम करू शकतो आणि मेलद्वारे .pptx फाइल्स पाठवताना अशक्य सहकार्याचा वेग विकसित करू शकतो.

स्लाइड्ससह HTML पृष्ठ तयार करणे

साधा मजकूर स्रोत उत्तम आहेत, पण तुम्ही ते सादरीकरणातच कसे संकलित कराल?

AsciiDoctor हा रुबीमध्ये लिहिलेला प्रकल्प आहे आणि तो चालवण्याचे अनेक मार्ग आहेत. प्रथम, आपण रुबी भाषा स्थापित करू शकता आणि थेट asciidoctor चालवू शकता, जी कदाचित रुबी विकसकांसाठी सर्वात जवळची गोष्ट आहे.

तुम्हाला रुबी इन्स्टॉल करताना गोंधळ घालायचा नसेल, तर तुम्ही डॉकर इमेज वापरू शकता asciidoctor/docker-asciidoctor, ज्यामध्ये, लाँच केल्यावर, तुम्ही फोल्डरला प्रकल्प स्त्रोतांसह VOLUME द्वारे कनेक्ट करू शकता आणि दिलेल्या ठिकाणी निकाल मिळवू शकता.

मी निवडलेला पर्याय काहीसा अनपेक्षित वाटू शकतो, परंतु Java विकसक म्हणून माझ्यासाठी तो सर्वात सोयीचा आहे. यासाठी रुबी किंवा डॉकरच्या स्थापनेची आवश्यकता नाही, परंतु तुम्हाला मावेन स्क्रिप्ट वापरून स्लाइड्स व्युत्पन्न करण्याची परवानगी देते.

मुद्दा असा की प्रकल्पाचा जेआरबी - रुबी भाषेची जावा अंमलबजावणी इतकी चांगली आहे की ती तुम्हाला जावा मशीनमध्ये रुबीसाठी तयार केलेली जवळजवळ कोणतीही गोष्ट चालवण्यास अनुमती देते आणि AsciiDoctor चालवणे हा JRuby चा सर्वात सामान्य वापर आहे.

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

स्लाइड्स पीडीएफमध्ये रूपांतरित करा

जरी स्लाइड्सची 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 पृष्ठ तयार करेल (उदाहरणार्थ, पाच बुलेट पॉइंटसाठी पाच पृष्ठे एकामागून एक दर्शविल्यास). हे तुम्हाला अहवालादरम्यान सादरीकरण म्हणून अशा पीडीएफचा स्वतःहून वापर करण्यास अनुमती देईल.

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

जेव्हा आवृत्ती नियंत्रण प्रणालीमध्ये बदल केले जातात तेव्हा स्लाइड्स स्वयंचलितपणे संकलित केल्या जातात तेव्हा ते सोयीस्कर असते आणि जेव्हा स्वयंचलितपणे संकलित केलेल्या स्लाइड सार्वजनिक वापरासाठी इंटरनेटवर पोस्ट केल्या जातात तेव्हा ते अधिक सोयीचे असते. इंटरनेटवरील स्लाइड्स इंटरनेटशी कनेक्ट केलेल्या कोणत्याही मशीन आणि प्रोजेक्टरमधून प्रेक्षकांसमोर सहजपणे "प्ले" केल्या जाऊ शकतात.

आम्ही आमच्या कामात 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 वरील सादरीकरण कोडच्या प्रत्येक कमिटचा परिणाम स्लाइड्स आपोआप एचटीएमएल आणि पीडीएफ फॉरमॅटमध्ये पुन्हा तयार केला जातो आणि github.io वर पुन्हा अपलोड केला जातो. (अर्थात, तुम्ही फक्त github.io वर तीच सादरीकरणे अपलोड करावी जी तुम्हाला शेवटी सार्वजनिक करायची आहेत.)

प्रकल्पांची उदाहरणे

शेवटी, येथे सानुकूलित मावेन स्क्रिप्ट्स आणि ट्रॅव्हिस-सीआयसाठी सीआय कॉन्फिगरेशनसह सादरीकरण प्रकल्पांच्या काही उदाहरणांचे दुवे आहेत, जे क्लोन केले जाऊ शकतात आणि तुमचे स्वतःचे सादरीकरण प्रकल्प तयार करताना वापरले जाऊ शकतात:

https://github.com/inponomarev/kstreams-examples (JPoint 2019 साठी माझे बोलणे)
https://github.com/inponomarev/csa-hb (हायसेनबग 2019 साठी माझा अहवाल)

गुडबाय पॉवरपॉईंट! तांत्रिक सादरीकरणासाठी मला तुमची गरज भासेल असे वाटत नाही :)

स्त्रोत: www.habr.com

कोड म्हणून सादरीकरण, किंवा मी यापुढे पॉवरपॉइंट का वापरत नाही

आम्हाला काय हवे आहे

स्लाइड्स कोड कसे करावे

स्लाइड्ससह HTML पृष्ठ तयार करणे

स्लाइड्स पीडीएफमध्ये रूपांतरित करा

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

प्रकल्पांची उदाहरणे

एक टिप्पणी जोडा Отменить ответ