HTML5 और CSS3 की क्षमता को अनलॉक करना

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

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

कैनवास को अनदेखा न करें

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

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

चित्रण सौजन्य से

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

आपको किसी और फ्लैश की आवश्यकता नहीं है

जो हमने पहले फ्लैश के लिए इस्तेमाल किया था, उसमें से अधिकांश में फ्लैश की आवश्यकता नहीं होती है। अब आप यह सब CSS3 बदलाव, HTML5 ड्राइंग, HTML5 एनीमेशन, HTML5 वीडियो और HTML5 ऑडियो के साथ कर सकते हैं।

केवल वही चीजें जो हम HTML5 में नहीं कर रहे हैं कि फ्लैश ने आपको अपने उपयोगकर्ताओं की जासूसी करने और उनकी गोपनीयता का उल्लंघन करने की अनुमति दी है, लेकिन यह कुछ ऐसा नहीं है जिसे आप वैसे भी करना चाहते हैं, क्या ऐसा है?

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

CSS3 आपको नई छद्म कक्षाएं देता है

कुछ छद्म कक्षाएं CSS2 के आसपास थीं, लेकिन CSS3 के साथ आप अधिक नियंत्रण पाने के लिए महत्वपूर्ण स्थितिगत छद्म वर्गों का उपयोग करने में सक्षम हैं। मुख्य रूप से वे पाठ के साथ उपयोग किए जाते हैं, जैसा कि छद्म वर्ग के नाम इंगित करते हैं: पहले, बाद में, पहला अक्षर, पहली पंक्ति ...

आपके पास संक्रमणों तक पहुंच भी है, जिसका उपयोग पाठ सहित किसी भी चीज को संशोधित करने के लिए किया जा सकता है। ये परिवर्तन चेतन या परिवर्तन करते हैं जो उपयोगकर्ता स्क्रीन पर देखता है।

आपके वेब पेज सीधे GPU के साथ संवाद कर सकते हैं

आपको कुछ सावधानी के साथ ऐसा करना चाहिए, क्योंकि किसी भी प्रकार का हार्डवेयर त्वरण मोबाइल उपकरणों से बैटरी जीवन को समाप्त करने वाला है, लेकिन यह अभी भी बहुत अच्छा है कि आप इसे कर सकते हैं।

जब आप संक्रमण, 3D रूपांतरण, 3D मोड में कैनवास और WebGL 3D का उपयोग करते हैं, तो GPU त्वरण काम करता है। उत्तरार्द्ध मेरा पसंदीदा है, लेकिन आपको WebGL में शामिल सभी चीज़ों के साथ पकड़ पाने के लिए बहुत कुछ करने की आवश्यकता होगी। हालाँकि, यह आपको एनिमेशन और गेम बनाने की बहुत गुंजाइश देगा।

GPU त्वरण पुराने ब्राउज़रों के साथ काम नहीं करता है, भले ही वे HTML5 और CSS3 का समर्थन करते हों।

के सौजन्य से

3D ग्राफिक्स से कठिन काम लेने के लिए गेम इंजन का उपयोग करें

गेम प्रोग्रामर गेम प्रोग्रामिंग का उपयोग हमेशा से गेम प्रोग्रामिंग को सरल बनाने के लिए करते आ रहे हैं, लेकिन यह केवल पिछले एक या दो वर्षों में है कि वास्तव में सक्षम HTML5 गेम इंजन उभरे हैं जो उच्च गुणवत्ता वाले XNUMDD गेमिंग बनाने के कार्य में खड़े हो सकते हैं। एक ब्राउज़र आधारित वातावरण।

PlayCanvas के साथ आरंभ करने के लिए सबसे सरल में से एक है, और भले ही यह व्यक्तिगत लाइसेंस के साथ प्रयोग करने और वास्तव में सस्ते होने के लिए स्वतंत्र है, यह कोई हल्का नहीं है। यहां बताया गया है झपट्टा, PlayCanvas में बनाया गया एक खेल:

और यह है RoboStorm:

क्या आप इस तरह के खेल बना सकते हैं? बिल्कुल, और यह अब तक की तुलना में कहीं अधिक आसान है।

एक रेट्रो गेम बिल्डिंग अनुभव के लिए, प्रयास करें Construct2 or Construct3। यह सब कुछ है जो आपको ड्रैग और ड्रॉप के आधार पर गेम बनाने की शुरुआत करने की आवश्यकता है (हालांकि कुछ इसे बहुत सीमित पाएंगे)। आप अपने गेम ऑनलाइन बनाते हैं और लोग उन्हें ऑनलाइन खेलते हैं। यह उन लोगों के लिए एक इंजन है जो किसी भी प्रोग्रामिंग को नहीं जानते हैं और सीखने के साथ परेशान नहीं करना चाहते हैं।

यहाँ है कीवी कहानी, एक पुराने स्कूल 2D प्लेटफ़ॉर्मर में बनाया गया है जो Construct3:

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

HTML5 और CSS3 आपको अधिक शक्ति देते हैं

HTML5 और CSS3 के साथ अब आप अपने पृष्ठ पर दिखाई देने वाले प्रत्येक तत्व पर पूरा नियंत्रण कर सकते हैं, जिसमें प्रत्येक वस्तु को व्यावहारिक रूप से आपकी इच्छा के अनुसार हेरफेर करने की क्षमता भी शामिल है।

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

अब आप अपारदर्शिता को भी नियंत्रित कर सकते हैं और पहले की तुलना में अधिक आसानी से स्केलिंग कर सकते हैं, और तकनीक सभी प्रमुख ब्राउज़रों में काम करेगी।

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

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

सौभाग्य से आपको शायद ही कभी उसके लिए कोई आवश्यकता होगी, लेकिन कभी-कभी स्क्रीन पर कुछ फिटिंग करना चाहे वह स्क्रीन कितना भी छोटा क्यों न हो, आपका प्राथमिक उद्देश्य होगा। उन मामलों में, विभिन्न ब्राउज़रों में मानकीकृत स्केलिंग की कमी एक समस्या बनी रहेगी।

फिर भी, ये समस्याएं HTML5 या CSS3 समस्याएँ नहीं हैं, वे ब्राउज़र डेवलपर्स की समस्याएं हैं जो HTML5 और CSS3 द्वारा प्रदान की गई सुविधाओं का ठीक से समर्थन नहीं कर पाती हैं।

जैसे-जैसे समय बीत रहा है, हमें ब्राउज़रों में सुधार देखना चाहिए, और सब कुछ उम्मीद के मुताबिक काम करेगा। तब तक HTML6 और CSS4 सीखना शुरू करने का समय हो सकता है, लेकिन कम से कम यह सही दिशा में एक कदम है।

हेडर इमेज सौजन्य से

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।