नमस्कार, मेरा नाम दिमित्री कार्लोव्स्की है और मैं कभी-कभी सम्मेलनों, बैठकों में बोलता हूं और हाल ही में, मैं खुद उनमें से एक के आयोजकों की टीम में प्रवेश करता हूं - पितृज । हाल ही में, हमारी एक वर्षगांठ थी - 40 बैठकें। लेकिन आराम करने और बधाई प्राप्त करने के बजाय, हम थक गए और खुद आयोजकों से रिपोर्ट तैयार की ।

आवाज नियंत्रण का परीक्षण

लेकिन यह हमारे लिए पर्याप्त नहीं है, इसलिए हमने नेवा PiterJSConf के तट पर एक सम्मेलन आयोजित करके एक बड़ी वर्षगांठ मनाने का फैसला किया, जो इस शनिवार, 7 सितंबर, 2019 को आयोजित किया जाएगा। साइन अप करने के लिए जल्दी करो, जबकि अभी भी खाली सीटें हैं, क्योंकि इसमें भागीदारी आपके लिए पूरी तरह से मुफ्त होगी।

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

इस बीच, मैं आपको $hyoo_slides प्रस्तुति वेब एप्लिकेशन के बारे में एक कहानी पेश कर रहा हूं $hyoo_slides उपयोग मैं अपनी सभी प्रस्तुतियों के लिए करता हूं। वीडियो रिकॉर्डिंग YouTube पर उपलब्ध है , लेकिन सब कुछ नहीं है। आप इस कहानी को एक लेख के रूप में पढ़ सकते हैं , या इसे एप्लिकेशन के इंटरफ़ेस में खोल सकते हैं । आगे मैं आपको बताऊंगा कि यह कितना काम कर सकता है और यह कैसे काम करता है।

श्रोता इंटरफ़ेस

श्रवण प्रस्तुति

यहां वह इंटरफ़ेस है जिसे दर्शक प्रदर्शन के दौरान देखते हैं। इसमें कुछ भी शानदार नहीं है।

स्लाइड का नाम और संख्या शीर्ष पर प्रदर्शित होती है। सुनने वालों के सवाल हो सकते हैं। और जल्दी से इस नंबर को रिकॉर्ड करते हुए, वे इसे भाषण के बाद नाम दे पाएंगे और इस तरह दर्शकों को थकाऊ इंतजार से बचाएंगे, जब स्पीकर को एक स्लाइड मिलेगी, जिस पर सवाल पूछा जा रहा है।

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

देखो मैं कैसे कर सकता हूँ

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

क्योंकि मैं ही हूँ, ओटोमन!

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

स्पीकर इंटरफ़ेस

स्पीकर का इंटरफ़ेस दो भागों में विभाजित है।

प्रस्तुतकर्ता प्रस्तुति

बाईं ओर श्रोता जो देखते हैं। और दाईं ओर स्पीकर के नोट्स हैं। वे आपको एक खोए हुए विचार को याद रखने में मदद करेंगे, दर्शकों से दूर हुए बिना और लंबे समय तक उन्हें तनाव में डाले बिना ... उम ... यह है ... एक विराम।

मुख्य बात सामग्री है

इसलिए, हमारे मामले में, सामग्री को मार्कडाउन प्रारूप में एक लेख के रूप में लिखा गया है और कुछ गिटहब पृष्ठों पर रखा गया है। और वेब एप्लिकेशन बाकी का ख्याल रखता है।

 #       #

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

पाठ शैली

सादा पाठ केवल प्रस्तुतकर्ता को प्रदर्शित किया जाता है। और सभी प्रकार के चित्र, सूची, टेबल, उद्धरण आदि सभी को दिखाई देते हैं।

 - ** - ** ** - ~~~~ - ``````

उच्चारण
मजबूत उच्चारण
~~निष्कासन~~

बेशक, विभिन्न इनलाइन प्रारूपण उपकरण उपलब्ध हैं।

स्रोत कोड

स्रोत कोड के ब्लॉक, ज़ाहिर है, भी समर्थित हैं, और इंद्रधनुष के सभी रंगों में चित्रित हैं। जैसा आपको अच्छा लगे।

 ```javascript const hello = ()=> <body> Hello, "world"! </body> ```

 const hello = ()=> <body> Hello, "world"! </body>

टेबल

विभिन्न चीजों की तुलना आपको तालिकाओं में मदद करेगी। उदाहरण के लिए, आइए देखें कि $hyoo_slides अपने निकटतम प्रतिस्पर्धियों से बेहतर क्यों $hyoo_slides - shwr.me और Google स्लाइड

 | | shwr.me | google slides | slides.hyoo.ru | |--------------------------|---------|---------------|----------------| |   MarkDown | - | - | + | |   | - | + | + | |   | - | - | + | |  | - | + | + |

	shwr.me	गूगल स्लाइड	slides.hyoo.ru
मार्कडाउन में स्रोत	-	-	+
दोहरी पैनल मोड	-	+	+
ऑटो स्लाइड स्विच	-	-	+
ऑफ़लाइन	-	+	+

जैसा कि आप देख सकते हैं, $hyoo_slides सभी मोर्चों पर प्रतियोगियों को $hyoo_slides है। सिवाय उन लोगों के जो तालिका में शामिल नहीं हैं, निश्चित रूप से।

अच्छी तरह से लानो, टेबल उबाऊ हैं।

तस्वीरें

बिल्ली को पकड़ो।

 ![](https://github.com/nin-jin/slides/raw/master/slides/cat.gif)

माइक फ़र्ले

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

वीडियो

आप चित्रों को सम्मिलित करने के लिए उसी मार्कडाउन सिंटैक्स का उपयोग करके वीडियो, वेब पेज और किसी भी अन्य बाहरी सामग्री को पोस्ट कर सकते हैं।

 ![ ](https://www.youtube.com/embed/exfBX2pb7AQ?autoplay=1)

लक्ष्य श्रोता

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

कीबोर्ड नेविगेशन

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

तीर

लेकिन क्या होगा अगर क्लिकर टूट गया है?

कोड वाक्यांश

आप शायद सोचते हैं कि कमरे में मेरे पास एक गलत तरीके से रखा हुआ कोस्क है जो मेरे बजाय स्लाइड स्विच करता है? हालाँकि, ऐसा नहीं है।

आगे कृपया।
वापस , कृपया।
स्लाइड संख्या 5, दयालु बनें।
शुरुआत में , कृपया।
अंत में , कृपया।
"बिल्ली" ढूंढें , दयालु बनें।
कृपया दोहराएं ।
चुप रहो , दयालु बनो।
कृपया जारी रखें ।
कृपया लाइट बंद करें ।

कृपया दोहराएं। ऊपर से एक आवाज अंतिम वाक्यांश दोहराती है।

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

लेकिन एक पंक्ति में इन कोड वाक्यांशों को दस बार दोहराना उबाऊ है, इसलिए $hyoo_slides स्पीकर नोट्स का विश्लेषण कर सकते हैं और जब आप अंतिम शब्द कहते हैं, तो स्लाइड को स्वचालित रूप से स्विच करें।

उंगली के इशारे

ठीक है, स्थिति को जटिल बनाना। आपके भाषण को सुनने के बाद, किसी ने मेट्रो होम की सवारी करते समय टैबलेट से आपकी स्लाइड देखने का फैसला किया।

इशारों

कोई कीबोर्ड नहीं है। ट्रेनें शोर मचा रही हैं। यहां, सामान्य उंगली के इशारे बचाव में आते हैं।

ऑफ़लाइन

लेकिन फिर वह सुरंग में जाता है और उसका कनेक्शन गायब हो जाता है।

कोई नेटवर्क नहीं

इससे कोई फर्क नहीं पड़ता, हमारे पास वेब 2.0 एचटीएमएल 5 प्रोग्रेसिव वेब एप्लिकेशन है जिसमें इंटरनेट न होने पर भी पूरी कार्यक्षमता है।

पीडीएफ प्रिंटिंग

लेकिन यहां आयोजक आपके पास आते हैं और कहते हैं: "हम एक पीडीएफ चाहते हैं।"

मार्क

कौन सा pdf? हमारे यहां मल्टीमीडिया इंटरेक्टिव Web2.0 HTML5 प्रोग्रेसिव वेब एप्लिकेशन है। हालांकि, वे आपको समझाते हैं कि आवेदन आज है, और कल यह अब नहीं है। और अगर है, तो उसे पैसे चाहिए। और यदि आप नहीं करना चाहते हैं, तो वहां की स्लाइड्स को मान्यता से पहले ही बदला जा सकता है। और पीडीएफ चुपचाप संग्रह में है कि वास्तव में सामग्री जो प्रदर्शन के दौरान रिकॉर्ड किए गए वीडियो से मेल खाती है।

खैर, इससे कोई फर्क नहीं पड़ता, Ctrl+P , "प्रिंट टू पीडीएफ" चुनें और आपको जो चाहिए वह प्राप्त करें। यह बस किया जाता है - onbeforeprint घटना की onbeforeprint की onbeforeprint और, जब यह होता है, तो केवल वर्तमान स्लाइड के बजाय, सभी स्लाइड्स को सभी पर प्रदान किया जाता है। और onafterprint , सभी लेकिन वर्तमान एक, स्लाइड हटा दी जाती हैं।

इस पर, सुविधा सूची अब समाप्त हो गई है।

प्रेजेंटेशन कैसे बनाएं

$hyoo_slides कोशिश करना आसान है। आपको अपनी सामग्री और चित्रों के साथ readme.md आवश्यकता होगी। इसके अलावा पास में आपको index.html को कॉपी-पेस्ट करना होगा, जो वेब एप्लिकेशन पर रीडायरेक्ट करता है और उसमें आपकी प्रस्तुति खोलता है। और ऑफलाइन समर्थन के लिए भी ऑफलाइन.जेएस।

readme.md
तस्वीरें
index.html
offline.js
स्थैतिक होस्टिंग

ध्यान रखें कि यह index.html एप्लिकेशन को किसी भी फाइल को देगा जो उस डोमेन से एक्सेस करने योग्य है जहां आप पूरी चीज डालते हैं। GitHub Pages एक बहुत ही सुविधाजनक और सुरक्षित विकल्प है। मैं खुद इसका इस्तेमाल करता हूं।

अन्य अनुप्रयोगों

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

अनुप्रयोग गैलरी

लेकिन उनके बारे में बाद में किसी तरह ...

प्रस्तुति के उदाहरण

आप एक अलग प्रस्तुति में रूपरेखा के बारे में अधिक जान सकते हैं। आप पीपीआर पर एक प्रस्तुति में गहरी खुदाई कर सकते हैं। और आप गणनाओं के परिमाणीकरण पर एक प्रस्तुति में भविष्य का पर्दा उठा सकते हैं।

वे सभी प्रदर्शित करने के लिए $ hyoo_slides का उपयोग करते हैं। मुझे उम्मीद है कि जल्द ही ऐसी और भी प्रस्तुतियां होंगी।

अनुप्रयोग संरचना

और अब, हुड को थोड़ा खोलें और देखें कि आवेदन कैसे व्यवस्थित किया गया है, और केवल एक शाम में हमारे समान कैसे करें।

 $hyoo_slides_page $mol_view sub / <= Listener <= Speaker

 export class $hyoo_slides_page extends $mol_view { sub() { return [ this.Listener() , this.Speaker() , ] } }

यहाँ view.tree और समकक्ष टाइपस्क्रिप्ट कोड में एकल स्क्रीन का शीर्ष-स्तरीय वर्णन है। यहां हम घटक $hyoo_slides_page घोषित करते हैं, जो आधार घटक $mol_view विस्तार करता है। इस घटक की एक sub संपत्ति है। इस संपत्ति को लौटाने वाली हर चीज घटक के अंदर प्रदान की जाएगी। इसलिए, हम इसे फिर से परिभाषित करते हैं, एक मान के रूप में दो तत्वों की एक सरणी के रूप में: Listener - श्रोताओं और Speaker को स्लाइड आउटपुट करने के लिए एक घटक - एक अतिरिक्त स्पीकर पैनल का एक घटक।

पृष्ठ लेआउट स्विच करें

संरचना के वर्णन के अलावा, हम प्रोग्राम लॉजिक भी लागू कर सकते हैं जो किसी भी गुण को गतिशील रूप से गणना करने की अनुमति देता है।

 sub() { const role = this.role() return [ this.Listener() , ... ( role === 'speaker' ) ? [ this.Speaker() ] : [] , ] }

यहां तर्क सरल है: हम हमेशा श्रोताओं के लिए स्लाइड प्रदर्शित करते हैं, लेकिन स्पीकर पैनल केवल तभी दिखाया जाता है जब वर्तमान भूमिका speaker । यदि भूमिका बदलती है, तो ऑब्जेक्ट के रिएक्टिव प्रोग्रामिंग के जादू के कारण एप्लिकेशन का लेआउट भी बदल जाएगा।

मार्ग

हम विशेष प्रतिक्रियाशील एपीआई $mol_state_arg माध्यम से पता पैरामीटर से भूमिका $mol_state_arg ।

 role() : 'speaker' | 'listener' { return $mol_state_arg.value( 'role' ) || 'speaker' }

जो भी कारण पता बदल गया है - भूमिका को स्वचालित रूप से उसमें से निकाला जाएगा, और इस विधि से गुजारा जाएगा।

श्रोता इंटरफ़ेस संरचना

आइए श्रोता इंटरफ़ेस का वर्णन करें।

 Listener $mol_page title <= title tools / <= Slide_switcher body / <= Listener_content <= Progress

यह मानक घटक $mol_page का उपयोग करता है जो हेडर और बॉडी के साथ एक विशिष्ट पृष्ठ खींचता है। शीर्ष लेख में एक ऐसा क्षेत्र होता है जहाँ पृष्ठ नाम प्रदर्शित होता है। title संपत्ति के माध्यम से, आप निर्दिष्ट कर सकते हैं कि वहां क्या आउटपुट करना है। जो हमने उसकी title संपत्ति को उसी नाम की संपत्ति के साथ जोड़कर किया था। अब, अपनी संपत्ति को बदलते हुए, पृष्ठ पर एक शीर्षक के रूप में जो प्रदर्शित किया जाएगा, उस पर हमारा पूरा नियंत्रण है।

हेडर में दाईं ओर, अतिरिक्त टूल - tools लिए आउटपुट एरिया है। इसमें हम Slides_switcher - स्लाइड नंबर प्रदर्शित करने और आसन्न स्लाइड्स के बीच स्विच करने के लिए एक घटक।

और अंत में, body में पेज body में body हम स्लाइड की सामग्री और प्रगति बार प्रदर्शित करते हैं।

पृष्ठ स्विच संरचना

Slide_switcher को कैसे लागू किया Slide_switcher ? बस मानक घटक $mol_paginator उपयोग करें।

 Slide_switcher $mol_paginator value?val <=> slide?val

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

स्लाइड सामग्री संरचना

स्लाइड की सामग्री को प्रदर्शित करने के लिए, हम फिर से मानक घटक $mol_text उपयोग करते हैं।

 Listener_content $mol_text uri_base <= uri_base text <= listener_content

यह markdown लेता है और इसे रेंडर करता है। चूंकि इस पाठ में लिंक स्रोत फ़ाइल के सापेक्ष होंगे, और हमारे आवेदन के लिए नहीं, हम uri_base प्रॉपर्टी के लिंक को पास करते हैं, जिसके बारे में सभी रास्ते हल हो जाएंगे।

प्रगति संकेतक संरचना

जैसा कि आप शायद पहले ही अनुमान लगा चुके हैं, प्रगति दिखाने के लिए एक मानक घटक भी है - $mol_portion ।

 Progress $mol_portion portion <= progress

 portion: [ 0 .. 1 ]

हम उसे 0 से 1 तक एक नंबर खिलाते हैं और इस शेयर के लिए एक संकेतक भरते हैं।

स्पीकर इंटरफ़ेस संरचना

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

 Speaker $mol_page head <= speaker_tools /$mol_view body / <= Speaker_content

अनुप्रयोग संरचना

अब एक स्तर ऊपर जाएं और एक एप्लिकेशन कंपोनेंट बनाएं $hyoo_slides जो पेज कंपोनेंट का उपयोग करता है।

 $hyoo_slides $mol_view Page!index $hyoo_slides_page - ... plugins / <= Nav <= Touch <= Speech_next - ...

किसी भी $mol_view घटक में एक plugins गुण होता है जिसके माध्यम से अतिरिक्त तर्क को इससे जोड़ा जा सकता है। प्लगिन प्लग उसी डोम नोड पर घटक के रूप में रहते हैं। घटक इसके प्रतिपादन के दौरान उन्हें आरंभ करता है। और जब रेंडर किए जाने बंद हो जाते हैं तो - प्लगइन्स अपने आप नष्ट हो जाते हैं।

हमने Page संपत्ति की भी घोषणा की, जो प्रत्येक सूचकांक के लिए पहले विकसित $hyoo_slides_page घटक का एक अलग उदाहरण देता है।

बाहरी पेज सेटअप

 Page!index $hyoo_slides_page role <= role slide?val <=> page_slide!index?val speaker_tools / <= Speech_toggle <= Speech_text <= Open_listener

हम उपसम्पन्न के लिए role संपत्ति को पास करते हैं। पेज कंपोनेंट की slide प्रॉपर्टी एप्लिकेशन के page_slide प्रॉपर्टी के साथ टू-वे कम्युनिकेशन से page_slide है। ध्यान दें कि page_slide न केवल वैकल्पिक नए मूल्य को स्वीकार करता है, बल्कि पेज इंडेक्स को भी स्वीकार करता है। यह आपको प्रत्येक पृष्ठ के लिए एक नंबर वापस करने की अनुमति देता है। अंत में, speaker_tools स्लॉट में हमने पहले घोषणा की, हमने स्लाइड को प्रबंधित करने में मदद करने के लिए तीन घटक रखे।

आवाज नियंत्रण स्विच संरचना

हम मानक घटक $mol_check_icon Speech_toggle माध्यम से Speech_toggle लागू Speech_toggle , जो एक आइकन खींचता है। जब आप इस पर क्लिक करते हैं, तो यह checked झंडे को पकड़ लेता है। और आइकन की रंग बदलकर वर्तमान स्थिति प्रदर्शित की जाती है।

 Speech_toggle $mol_check_icon Icon <= Speech_toggle_icon $mol_icon_microphone checked?flag <=> speech_enabled?flag

हमने $mol_icon से आइकन लिया, जहां तपस्वी सामग्री डिजाइन शैली में बने 4000 आइकन में से, सही को ढूंढना आसान है ।

स्लेव विंडो ओपनिंग बटन स्ट्रक्चर

यहां सब कुछ सरल है। यह बटन $mol_link लिंक होगा। वह एक पते के साथ uri संपत्ति सेट कर सकता है, या वह कुछ और चालाक कर सकता है और वर्तमान पते को पैच कर सकता है, जैसे कि कुछ मापदंडों की जगह।

 Listener_open $mol_link target \_blank arg * role \listener slide null sub / <= Listener_open_icon $mol_icon_external

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

प्लग-इन

प्लगइन्स घटक की क्षमताओं का काफी विस्तार कर सकते हैं। हम उनका अधिकतम उपयोग करेंगे।

 plugins / <= Nav <= Touch <= Speech_next <= Speech_prev <= Speech_start <= Speech_end - ...

हमारे द्वारा उपयोग किए जाने वाले सभी प्लगइन्स को 3 श्रेणियों में विभाजित किया जा सकता है: कीबोर्ड नेविगेशन, जेस्चर कंट्रोल और वॉइस कंट्रोल।

कीबोर्ड नेविगेशन

$mol_nav माध्यम से कीबोर्ड नेविगेशन को लंबवत और क्षैतिज रूप से लागू करना आसान है। सभी की जरूरत है कि प्लग-इन कुंजी की एक सूची प्रदान करना है जिसके द्वारा यह चालू हो जाएगा, और वर्तमान मूल्य पर दो-तरफा संचार होगा।

 Nav $mol_nav keys_y <= slide_keys keys_x <= slide_keys current_y?val <=> slide?val current_x?val <=> slide?val

 slide_keys: [ 0 , 1 , 2 , 3 , ... , 30 ] ^ slide

उंगली के इशारे

फिंगर ट्रैकिंग के लिए, $mol_touch । इसके साथ, आप ज़ूम, पैन और स्वाइप कर सकते हैं। यह अंतिम अवसर है कि अब हमें रुचि है।

 Touch $mol_touch swipe_to_left?event <=> go_next?event swipe_to_right?event <=> go_prev?event

 go_next( event? : Event ) { this.slide( this.slide() + 1 ) }

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

आवाज पर नियंत्रण

आवाज नियंत्रण के लिए, $mol_speech उपयोग करें। कार्रवाई के प्रत्येक संस्करण के लिए प्लगइन का एक उदाहरण बनाना आवश्यक है।

 Sing $mol_speech event_catch?val <=> sing?val patterns / \sing( \S+?)* \( \S+?)*

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

ऑटो स्लाइड स्विच

डिफ़ॉल्ट रूप से, $mol_speech को विनम्र हैंडलिंग की आवश्यकता होती है। उदाहरण के लिए, आपको "गाना," नहीं बल्कि "गाना, कृपया" कहना चाहिए। आप इस कोडवर्ड को पूरी तरह से बदलने या हटाने के लिए suffix संपत्ति को ओवरराइड कर सकते हैं।

 Speech_next_auto $mol_speech event_catch?val <=> go_next?val suffix \ patterns <= speech_next_auto_patterns

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

एप्लिकेशन लॉन्च

एप्लिकेशन घटक होने पर, आप इसे किसी भी सामान्य वर्ग की तरह मैन्युअल रूप से इंस्टेंट कर सकते हैं। लेकिन हम विशेष विशेषता mol_view_root माध्यम से स्वचालित लॉन्च का उपयोग करेंगे।

 <body mol_view_root="$hyoo_slides"> <script src="web.js" charset="utf-8"></script> </body>

विशेषता नाम घटक का नाम है। इस तरह से प्रतिपादन, ज़ाहिर है, बिल्कुल किसी भी घटक हो सकता है।

ऑफ़लाइन

ऑफ़लाइन समर्थन जोड़ने के लिए, बस बंडल में mol/offline/install मॉड्यूल शामिल करें।

 include \/mol/offline/install

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

प्रिंट मोड

इससे पहले, मैंने कहा कि मुद्रण के दौरान आपको सभी पृष्ठों को रेंडर करने की आवश्यकता होती है, लेकिन मैन्युअल रूप से onbeforeprint और onafterprint निगरानी करने की कोई आवश्यकता नहीं है, क्योंकि हमारे पास पूर्ण-प्रतिक्रियाशील प्रोग्रामिंग है, इसलिए हम प्रतिक्रियाशील राज्य $mol_print उपयोग करेंगे, जो कि हमें एक प्रतिक्रियाशील ध्वज प्रदान कर सकता है। रेंडरिंग टाई।

 sub() { if( !this.$.$mol_print.active() ) { return [ this.Page( this.slide() ) ] } return $mol_range2( index => this.Page( index ) , ()=> this.slide_keys().length , ) }

यहां हम केवल एक पृष्ठ वापस करते हैं यदि active ध्वज नहीं उठाया जाता है। अन्यथा, हम एक आलसी सरणी देते हैं जो दिए गए सूत्रों के अनुसार इसकी लंबाई और तत्वों की गणना करता है।

उपसंहार

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

ये स्लाइड ऐप में हैं: स्लाइड .hyoo.ru
आवेदन के स्रोत: hyoo-ru / स्लाइड्स .hyoo.ru
प्रस्तुति के उदाहरण: नौ-जिन / स्लाइड
टेलीग्राम चैट: @mam_mol

मुझे खुशी होगी अगर आप $hyoo_slides साथ अपनी प्रस्तुति देने की कोशिश $hyoo_slides । और मुझे बहुत खुशी होगी अगर आप इसे अभी की तुलना में बेहतर बनाने में मदद करेंगे। आपका ध्यान के लिए धन्यवाद!

प्रस्तुति आवेदन प्रस्तुति

श्रोता इंटरफ़ेस

देखो मैं कैसे कर सकता हूँ

स्पीकर इंटरफ़ेस

मुख्य बात सामग्री है

पाठ शैली

स्रोत कोड

टेबल

तस्वीरें

वीडियो

कीबोर्ड नेविगेशन

कोड वाक्यांश

उंगली के इशारे

ऑफ़लाइन

पीडीएफ प्रिंटिंग

प्रेजेंटेशन कैसे बनाएं

अन्य अनुप्रयोगों

प्रस्तुति के उदाहरण

अनुप्रयोग संरचना

पृष्ठ लेआउट स्विच करें

मार्ग

श्रोता इंटरफ़ेस संरचना

पृष्ठ स्विच संरचना

स्लाइड सामग्री संरचना

प्रगति संकेतक संरचना

स्पीकर इंटरफ़ेस संरचना

अनुप्रयोग संरचना

बाहरी पेज सेटअप

आवाज नियंत्रण स्विच संरचना

स्लेव विंडो ओपनिंग बटन स्ट्रक्चर

प्लग-इन

कीबोर्ड नेविगेशन

उंगली के इशारे

आवाज पर नियंत्रण

ऑटो स्लाइड स्विच

एप्लिकेशन लॉन्च

ऑफ़लाइन

प्रिंट मोड

उपसंहार

More articles: