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

बोरिंग!

रचनात्मकता कहाँ है? क्या आप वास्तव में अपने विषय को न केवल प्रकट करना चाहते हैं, बल्कि ऐसा करें कि विषय में रुचि न रखने वाले भी सामग्री को प्रस्तुत करने में रुचि लेंगे? अरे, हम वेब डेवलपर हैं, तो हम बाएं कार्यक्रमों में प्रस्तुतियां क्यों बनाते हैं, न कि जहां हम सबसे अच्छे हैं?

कहानी

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

इस साल, मुझे फिर से बोलने के लिए आमंत्रित किया गया था (इस बार जेईसीईसीएफ में ) और मुझे फिर से इस सवाल का सामना करना पड़ा कि मैं कैसे दिखाऊंगा कि मैं (लगभग एक कविता) क्या बात करने जा रहा हूं। और फिर से मैं एक असामान्य चाहता था :)

पहले तो मैंने प्रीजी जैसा कुछ करने का फैसला किया, लेकिन जीडब्ल्यूटी पर और एचटीएमएल की पूरी ताकत का फायदा उठाया। लेकिन विकास की प्रक्रिया में, एक और विचार किसी तरह धीरे-धीरे आया: एनीमेशन के लिए CSS3- बदलाव और सीएसएस के लिए CSS3-2D- ट्रांसफ़ॉर्म का उपयोग क्यों नहीं किया गया? सब के बाद, तो न्यूनतम प्रयास के साथ आप "स्लाइड" के बीच सुंदर बदलाव कर सकते हैं।

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

यही है, अगर दो परिभाषाएं हैं

.class1 { left: 100px; } .class2 { left: 200px; }

और कुछ तत्व के लिए दो वर्गों को सेट किया जाएगा (वर्ग = "class1 class2"), परिणामस्वरूप, ब्राउज़र को तत्व को 200px के बराबर बाईं संपत्ति के साथ रखना होगा। यह संपत्ति किसी के लिए भी परिचित है जिसने अभी CSS सीखना शुरू किया है।

और अगर तत्व में क्लास 1 था और फिर हम क्लास 2 को इसे असाइन करते हैं, तो लेफ्ट 100 से 200 में बदल जाएगा। यह बदल जाएगा। यही है, अगर तत्व में css3 संक्रमण "चालू" था, तो ब्राउज़र को तत्व को आसानी से 100px से 200px तक ले जाना होगा। और यह वही है जो हमें चाहिए!

पहला पैनकेक

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

सभी सामग्री जो दिखाई दी और गायब हो गई, मैंने एक कंटेनर में एक विशिष्ट आईडी ("कॉन्टेस्ट") के साथ रखा, जिसने सामग्री की शैलियों को बदलने के लिए इस कंटेनर के वर्ग (एस) को बदलने की अनुमति दी।

अंत में, स्लाइड सेटअप कोड जैसा दिखता था:

  if (stage>current_stage) { for (current_stage++;current_stage<=stage;current_stage++) { $("#cont").addClass("s"+current_stage); } current_stage--; } else if (stage<current_stage) { for (;current_stage>stage;current_stage--) { $("#cont").removeClass("s"+current_stage); } }

उसके बाद, मैंने मुख्य रूप से सामग्री पर ध्यान केंद्रित किया।

परिणामस्वरूप, मैंने JEEConf: CQRS + GAE + GWT में निम्न प्रस्तुति दी

स्टेज 2: JACSS

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

सबसे पहले, मैंने तय किया कि मेरे मामले में jQuery की आवश्यकता नहीं है - आखिरकार, एक क्लासिस्ट है ।

दूसरे, न्यूनतम कॉन्फ़िगरेशन बनाना आवश्यक था - कितनी स्लाइड्स, कहां नियंत्रण हैं, आदि। ऐसा करने के लिए, मैंने इन पैरामीटर्स को कॉन्फ़िगरेशन के लिए एक अलग ऑब्जेक्ट में रखा और querySelectorAll का उपयोग किया

नतीजतन, यहां इस तरह की परियोजना आई: JaCSS (जावास्क्रिप्ट और सीएसएस के मिश्रण के रूप में)।

कोड के अंदर बिल्कुल जटिल कुछ भी नहीं है। जोड़ने के बाद jacss निम्नलिखित करता है:

दो कार्य करता है: jacss.next (), javss.prev () - "स्लाइड" स्विच करना
टांके और स्पेस बार की चाबी के लिए हैंडलर खिड़की पर लटका रहता है (जो "स्लाइड" स्विच करता है)
"हैश" url हैंग को बदलने के लिए हैंडलर (ब्राउज़र के "आगे" / "आगे" नेविगेशन के सही प्रसंस्करण के लिए)
Url हैश में दिखता है, और अगर कोई ऐसा है जो url हैश में निर्दिष्ट स्लाइड पर जाने की कोशिश कर रहा है

स्लाइड्स स्विच करते समय:

फॉर्म के वर्गों को जोड़ना और हटाना "s N ", जहां N स्लाइड की संख्या है। इस प्रकार, यदि वर्तमान स्लाइड पांचवीं थी, तो जब 7 वीं में प्रवेश करते हैं, तो कक्षा एस 6, एस 7 को जोड़ा जाएगा। और 2 में नेविगेट करते समय, वर्गों s5 , s4 को हटाने का प्रयास होगा
url हैश को नई "करंट" स्लाइड के बराबर सेट किया जाएगा

सबसे दिलचस्प बात यह है कि बाद में मैं आपको इस "पुस्तकालय" के मेरे प्रस्तावित उपयोग के बारे में बताऊंगा। वास्तव में, HTML और CSS फाइलों की संरचना खदान से मौलिक रूप से भिन्न हो सकती है। इसके अलावा, मैं अच्छा वेब डिज़ाइनरों को भी सोचने और सामग्री की स्थिति और केंद्र के लिए अधिक सुविधाजनक विकल्प प्रदान करने के लिए कहूँगा। मेरे उदाहरणों को अवधारणा के प्रमाण के रूप में माना जा सकता है, जिसके आधार पर "सामान्य" निर्णय करना पहले से ही संभव है।

सामान्य तौर पर, मैं अपना विकल्प सुझाता हूं:

JACSS के साथ अपनी प्रस्तुति कैसे बनाएं

प्रस्तुति दो भागों में विभाजित है (स्पष्ट रूप से, नीचे नहीं देखें): "सामग्री" (पाठ, चित्र), और "व्यवहार" (सीएसएस परिभाषाओं का एक सेट)। इसलिए, हम दो फाइलें बनाएंगे: simple.html और simple.css

एक html कोड के साथ, हैबरपर किसी तरह से सामना करना मुश्किल है, इसलिए मैं यहां पूछता हूं: github.com/olostan/jacss/tree/master/examples/simple

Html में हम jacss के js / css को शामिल करते हैं। फिर हम इसे कॉन्फ़िगर करते हैं ("स्लाइड" की अधिकतम संख्या) और वास्तविक पाठ सेट करें:

 <span id='texample'>Example</span>

मुझे तुरंत कहना होगा कि यदि आप मेरे jacss.common.css (जो आवश्यक नहीं है) का उपयोग करते हैं, तो सामग्री वाले ब्लॉकों की पहचान "टी" अक्षर से शुरू होनी चाहिए।

CSS में, हम पहले सामग्री की प्रारंभिक स्थिति निर्धारित करते हैं। मेरी शैली सेट का उपयोग करते समय, प्रत्येक सामग्री शुरू में छिपाई जाती है (अपारदर्शिता: 0, दृश्यता: छिपी), इसके अलावा, ऊपरी बाएं कोने को लगभग केंद्र में स्थित किया जाता है। प्रारंभ में हमारे पाठ की आवश्यकता के लिए कुल:

 #texample { color: blue; font-size: 50px; left: -80px; top: -35px; }

फिर प्रत्येक "स्लाइड" के लिए सामग्री की शैली (रंग, दृश्यता, स्थिति) का वर्णन है:

 .s1 > #texample { opacity: 1; visibility: visible; } .s2 > #texample { left: -400px; top: 200px; } .s3 > #texample { top: -200px; color: red; } .....

हम पिछले "स्लाइड" के सापेक्ष केवल परिवर्तनों को रिकॉर्ड करते हैं।

परिणाम यहां देखा जा सकता है (या गितुब से लिया गया है)।

एक अधिक जटिल उदाहरण (ग्रेडिएंट, शैडो, RGBA- बैकग्राउंड आदि के साथ) को भी देखा जा सकता है ।

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

आगे क्या है?

और फिर सब कुछ आपके हाथों में है: स्वास्थ्य के लिए कांटा! वास्तव में, केवल अवधारणा वास्तव में अब तक तैयार है, जिस पर इतना अधिक प्रभाव डाला जा सकता है:

ब्राउज़र समर्थन (मैंने मुख्य रूप से Chrome / FF4 को देखा)। मैं कोई कारण नहीं देखता कि यह ओपेरा, IE9 पर समान काम क्यों न करे
मोबाइल उपकरणों (इशारों) के लिए समर्थन। मैंने अपने iPad पर जाँच की - मूल रूप से यह काम करता है, आपको बस CSS को "तेज" करना और इशारों के लिए हैंडलर जोड़ना होगा
नोड के साथ LESS (http://lesscss.org/) को नो-एंड के रूप में पेंच करने का प्रयास करें
एक और अधिक सुंदर नेविगेशन बार (शायद ऑटो-हाइड के साथ), या इसके लिए अलग "खाल"

मैं धीरे-धीरे इस चेकलिस्ट पर आगे बढ़ने की कोशिश करूंगा, लेकिन मैं पुल अनुरोध के रूप में भी किसी भी मदद का स्वागत करता हूं :) साथ ही सुझाव, सुझाव और टिप्पणियां भी।

धन्यवाद और आपको सुंदर और आकर्षक रिपोर्ट्स देखने को मिलीं!

linklist:
मेरी पहली प्रस्तुति
GitHub पर JaCSS
Jacss पर सबसे सरल डेमो
Jacss पर थोड़ा और जटिल डेमो

आसानी से JaCSS के साथ सुंदर CSS3 प्रस्तुतियाँ बनाएं