👩🏼‍🎓 🛍️ 😿 आधुनिक प्रस्तुति प्रारूप? ⛹🏽 📶 📇

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

2015 के बाद से, मैं खुद के लिए (स्नातक परियोजनाओं के अलावा) इष्टतम प्रस्तुति प्रारूप खोजने की कोशिश कर रहा हूं। और अब मुझे लगता है कि मैं लगभग सफल हो गया हूं। यह सब PowerPoint के साथ शुरू हुआ, और जावास्क्रिप्ट पर आधारित वेब फ्रेमवर्क के साथ समाप्त हुआ।

कई जावास्क्रिप्ट इंजन हैं जिनका उपयोग ठंडी प्रस्तुतियों को बनाने के लिए किया जा सकता है: मार्प , रिवील , लैंडस्लाइड , हैकर-स्लाइड , स्लाइड और अन्य। कुछ इंजनों में, आप मार्कडाउन का उपयोग कर सकते हैं, कुछ एक आईडीई में एम्बेडेड हैं, और कुछ के पास अपने स्वयं के संपादक हैं। मैंने पहले दो इंजन आजमाए हैं।

प्रदर्शन के रूप में, स्लाइड उदाहरण और वीडियो उपलब्ध हैं।

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

आप मेरी प्रस्तुतियों के विकास को रिपॉजिटरी https://github.com/KvanTTT/Presentations में देख सकते हैं।

पाठ की छोटी राशि

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

रूपकों का उपयोग करना

रूपकों का उपयोग करना अच्छा है। दर्शकों को प्रस्तुति की शुरुआत से लगे रहना चाहिए और जागते रहना चाहिए। यह फनी तस्वीरों की मदद से किया जा सकता है। लेकिन सीमाएं जानें: चुटकुलों की प्रचुरता कष्टप्रद और विचलित करने वाली हो सकती है।

न्यूनतमवाद और फ्लैट डिजाइन

एक सिद्धांत जो मैंने उधार लिया था। यह अब चलन में है, और मुझे यह पसंद भी है। नतीजतन, प्रस्तुतियों को बनाते समय मूल रंगों (तीन से पांच) की एक छोटी संख्या का उपयोग करने की सिफारिश की जाती है।

ऑनलाइन पहुंच

प्रस्तुति ब्राउज़र से उपलब्ध होनी चाहिए। इस प्रकार, आप प्रस्तुति के दौरान एक फ्लैश ड्राइव को खोने, अपने लैपटॉप के दुर्घटनाग्रस्त होने और अन्य प्रतिकूलताओं से डरेंगे नहीं।

ऑफ़लाइन कार्य

इंटरनेट कनेक्शन की अचानक हानि एक बड़ी समस्या नहीं है। हालाँकि, आपको अभी भी ब्राउज़र की आवश्यकता है। इस मामले में, सभी चित्रों को स्थानीय होना चाहिए। प्रस्तुति को चलाने के लिए, बस एक GitHub रिपॉजिटरी से स्रोतों को डाउनलोड करें।

क्रॉस-प्लेटफ़ॉर्म संस्करण

यह विंडोज , मैक , लिनक्स , एंड्रॉइड , आईओएस पर काम करता है हां, आप प्रस्तुति के दौरान फोन पर भी स्लाइड के माध्यम से फ्लिप कर सकते हैं!

स्लाइड्स इन इंग्लिश

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

लिंक के द्वारा पहुँच

श्रोता बात के दौरान अपने डिवाइस पर प्रस्तुति को खोलने में सक्षम हैं। शीर्षक स्लाइड पर आप मुख्य साइट पर एक छोटा लिंक kvttt.imtqy.com डाल सकते हैं, जहां प्रस्तुति का पूरा लिंक ढूंढना आसान है।

पढ़ने योग्य लिंक

प्रेजेंटेशन की लिंक से https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html निम्नलिखित स्पष्ट है।

लेखक: कावंट्ट
प्रकाशन की तिथि: 2018-05-15
प्रारूप: प्रस्तुतियाँ (उदाहरण के लिए, लेख , नमूने भी हो सकते हैं)
भाषा: अंग्रेजी
शीर्षक: Source-code-analyzers-how-generalizable-are-they
आप नंबर #/5 का उपयोग करके प्रस्तुति के किसी भी पृष्ठ पर भी जा सकते हैं।

डार्क और लाइट थीम

प्रकाश या मनोदशा के लिए सर्वोत्तम अनुकूलन के लिए। आप भी अपना बना सकते हैं।

आप स्लाइड के बीच बदलाव की शैली भी बदल सकते हैं।

संस्करण नियंत्रण प्रणालियों के साथ एकीकरण (Git)

Git सबसे लोकप्रिय संस्करण नियंत्रण प्रणालियों में से एक है। गिट का उपयोग करके, आप परिवर्तन कर सकते हैं, शाखाएं बना सकते हैं और विलय कर सकते हैं, फाइलों के अलग-अलग संस्करणों की तुलना कर सकते हैं (विस्‍तारित), विशिष्ट तारों के लेखकों की पहचान करें (दोष), और बहुत सारी अन्य चीजें करें। गिट बहुत सरल नहीं है, लेकिन बुनियादी क्षमताओं को जल्दी से महारत हासिल की जा सकती है।

GitHub को कॉन्फ़िगर किया जा सकता है ताकि जब आप gh-pages या imtqy.com , तो साइट तुरंत imtqy.com डोमेन में स्थैतिक होस्टिंग पर प्रकाशित हो जाए।

यहाँ स्रोत फ़ोल्डर है: https://github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they

सादे पाठ प्रारूप (मार्कडाउन) का उपयोग करना

यह एक सरल पाठ प्रारूप है - टैग और अन्य जटिल वाक्यविन्यास वैकल्पिक हैं। यह तकनीकी लेखकों के लिए पायथन की तरह कुछ है :) दूसरी ओर, विभिन्न संस्करणों की तुलना करना आसान है क्योंकि यह एक पाठ प्रारूप है, और आप मानक प्रोग्रामर टूल जैसे पुल अनुरोध का उपयोग कर सकते हैं । मर्ज अनुरोध या उपयुक्त शाखा में केवल संपादन करता है।

Markdown यह वर्णन करना आसान बनाता है:

विभिन्न पाठ शैलियों ( इटैलिक , बोल्ड , ~~स्ट्राइकथ्रू~~ , लिंक , उद्धरण, code snippet ),
शीर्षकों,
सूचियाँ, आदेशित और अनियंत्रित,
टेबल,
विफल,
अतिरिक्त तत्व जो कार्यान्वयन के आधार पर भिन्न हो सकते हैं। यदि आवश्यक हो, तो आप HTML टैग का भी उपयोग कर सकते हैं।

स्लाइड स्रोतों का उदाहरण

 <!-- .slide: style="text-align: left;" --> # ️ Text fingerprinting with zero-length characters Be careful what you copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. For example, I have inserted 5 such characters into this string, can you tell? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> ---

स्लाइड नोट

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

इमोजी का उपयोग करना

इमोजी का उपयोग दृश्य छवियों के साथ स्लाइड को जोड़ने के लिए किया जा सकता है। दुर्भाग्य से, वे अभी भी हैबर पर समर्थित नहीं हैं, इसलिए आप इस पैराग्राफ के ऊपर शीर्षक में इमोजी नहीं देखेंगे।

उपयुक्त प्रारूप में चित्र और योजनाएँ (JPG, PNG, SVG)

जेपीजी

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

पीएनजी

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

एसवीजी

किसी कारण से, कई लोग एसवीजी के बारे में भूल जाते हैं, जिसके निम्नलिखित फायदे हैं:

गुणवत्ता को खोए बिना किसी भी आकार में छवि को स्केल करना;
Git (पाठ प्रारूप) के साथ एकीकरण;
आप सीधे फ़ाइल में रंग, फ़ॉन्ट और अन्य तत्व बदल सकते हैं;
छोटे फ़ाइल का आकार।

सभी आधुनिक ब्राउज़रों द्वारा समर्थित - और यहां तक कि हेबर! दुर्भाग्य से, इसे केवल अप्रत्यक्ष रूप से हैबर पर अपलोड किया जा सकता है।

ध्यान दें कि इस आलेख में अधिकांश चित्र एसवीजी प्रारूप में हैं।

यह इस स्लाइड की पृष्ठभूमि एसवीजी छवि के लिए स्रोत कोड का एक टुकड़ा है

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generated by graphviz version 2.38.0 (20140413.2041) --> <!-- Title: cfg Pages: 1 --> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <!-- 27 --> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == &quot;admin&quot;</text> </g> <!-- 33 --> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == &quot;validkey&quot;</text> </g>

सुविधाजनक और सरल आईडीई का उपयोग करना

उदाहरण के लिए, प्लगइन्स के साथ विजुअल स्टूडियो कोड । बाईं ओर पूर्वावलोकन, दाईं ओर या ब्राउज़र में अंतिम संस्करण (रेंडर)। एक वर्तनी परीक्षक प्लगइन है, सामग्री (TOC) उत्पन्न करने के लिए प्लगइन्स, स्वरूपण तालिकाएँ और अन्य।

प्रस्तुति टेक्स्ट प्रिंट करना आसान है

स्लाइड और नोट्स का पाठ आसानी से मुद्रित किया जा सकता है (उदाहरण के लिए, प्रशिक्षण के लिए)। यह एक सादा पाठ है जिसमें न्यूनतम कचरा होता है।

उपयोग करने के लिए नि: शुल्क

सभी उपकरण, प्रारूप और स्थिर होस्टिंग .imtqy.com मुफ्त हैं। और यह तस्वीर भी

अतिरिक्त सुविधाएँ

Rev.js इंजन में, अन्य सुविधाएँ भी उपलब्ध हैं

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

आप एक इंटरैक्टिव संस्करण के साथ भी प्रयोग कर सकते हैं।

प्रस्तुति सरल और शांत लग रही है

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

कमियां

बेशक, सब कुछ कमियां हैं, और यह दृष्टिकोण कोई अपवाद नहीं है:

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

निष्कर्ष

यह मुझे लगता है कि भविष्य की प्रस्तुतियां इस तरह होंगी: वेबसाइट के प्रारूप में इंटरैक्टिव, जो प्रोग्रामर और डिज़ाइनर दोनों के लिए संपादन के लिए आसान है। आइए इस भविष्य को करीब लाने की कोशिश करें!

वैसे, Git और Markdown का उपयोग करके लेख भी लिखे जा सकते हैं और GitHub या GitLab पर होस्ट किए जा सकते हैं। इस बारे में बाद में लिखूंगा।

यदि आपके पास कोई सुधार या परिवर्धन है, तो कृपया नीचे अपनी टिप्पणी लिखें। मैं उन पर विचार करूंगा और संभवत: लेख में शामिल करूंगा।

लेख के स्रोत GitHub पर उपलब्ध हैं - कृपया कोई गलती पाए जाने पर पुल अनुरोध भेजें। Habr.com प्रारूप में परिवर्तित करने के लिए, मैं लाइब्रेरी मार्ककोव का उपयोग करता हूं ।

आधुनिक प्रस्तुति प्रारूप?