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

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

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

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

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

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

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

सामान्य तौर पर, मेरी प्रस्तुतियों के प्रारूपों का विकास https://github.com/KvanTTT/Presentations रिपॉजिटरी में उपलब्ध है।

• पाठ की छोटी राशि
• रूपकों का उपयोग करना
• न्यूनतमवाद और फ्लैट डिजाइन।
• ऑनलाइन पहुंच
• ऑफ़लाइन संचालन
• क्रॉस-प्लेटफॉर्म
• अंग्रेजी भाषा स्लाइड
• लिंक एक्सेस करें
• लिंक पढ़ें
• डार्क और लाइट थीम
• संस्करण नियंत्रण प्रणालियों के साथ एकीकरण (Git)
• सादे पाठ प्रारूप (मार्कडाउन) का उपयोग करना
• स्लाइड एनोटेशन
• इमोजी का उपयोग करना
• एक उपयुक्त प्रारूप में चित्र और चित्र (JPG, PNG, SVG)
• सुविधाजनक और सरल आईडीई का उपयोग करना
• मुद्रण योग्य प्रस्तुति पाठ
• मुक्त
• अतिरिक्त सुविधाएँ
• प्रस्तुति सरल और शांत लग रही है
• असुविधा
• अन्य संसाधन
• निष्कर्ष

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

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

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

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

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

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

ऑनलाइन पहुंच

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

ऑफ़लाइन संचालन

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

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

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

अंग्रेजी भाषा स्लाइड

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

लिंक एक्सेस करें

कोई भी प्रस्तुति के दौरान अपने डिवाइस पर एक प्रस्तुति खोल सकता है। शीर्षक स्लाइड पर, आप मुख्य साइट पर एक छोटी कड़ी kvanttt.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 ब्रांच या master पर धकेल दिया जाए master साइट को तुरंत imtqy.com डोमेन में स्थैतिक होस्टिंग पर प्रकाशित किया जाता है - यह बहुत सुविधाजनक है।

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

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

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

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

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

 <!-- .slide: style="text-align: left;" --> # ️ Text fingerprinting with zero-length characters Be c​aref​ul wh​at yo​u 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">        ,     . ,      5  .  ?         <https://www.diffchecker.com>.       ""    .    , ,    :        ,   -   :)             . </aside> --- 

स्लाइड एनोटेशन

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

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

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

एक उपयुक्त प्रारूप में चित्र और चित्र (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> 

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

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

मुद्रण योग्य प्रस्तुति पाठ

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

मुक्त

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

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

Reveal.js इंजन में उपलब्ध अन्य सुविधाएँ

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

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

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

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

असुविधा

और निश्चित रूप से, सब कुछ कमियां हैं, जिसमें वर्णित दृष्टिकोण शामिल है:

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

अन्य संसाधन

उदाहरण के साथ अन्य युक्तियां हैं जो मुझे पसंद आईं:

• प्रस्तुतियों कि खुशी। 2017 के पांच रुझान
• 2018 में सुंदर व्यावसायिक प्रस्तुतियाँ बनाने के लिए 10 ट्रिक्स

निष्कर्ष

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

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

यदि आपके पास टिप्पणियाँ या परिवर्धन हैं - टिप्पणियों में सदस्यता समाप्त करें। विचार करें और संभवतः लेख में शामिल करें।

लेख का स्रोत कोड स्वयं GitHub पर उपलब्ध है - यदि आपको त्रुटियाँ मिलती हैं, तो एक निवेदन भेजें। Habr.com प्रारूप में बदलने के लिए, मार्ककोन पुस्तकालय का उपयोग किया गया था।