👩🏿‍🤝‍👨🏻 🌤️ 🚿 नौसिखिए कोडर के लिए एक दर्जन लानत सुझाव। भाग दो 👨🏿‍🎤 😷 👨🏽‍🎓

आपका दिन शुभ हो!

आप जो पढ़ते हैं, उसके बारे में

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

कुछ और गीत

पहला भाग रिलीज़ होने के बाद, मुझे बड़ी मात्रा में प्रतिक्रिया मिली। सच कहूं, तो मुझे कुछ नया सीखने की ऐसी इच्छा की उम्मीद नहीं थी। हां, हां, बायकोडर्स भी हैं। लेकिन अब उस बारे में नहीं है ...
इसके अलावा, जैसा कि आप देख सकते हैं, मेरे पसंदीदा में मेरे विषय को जोड़ने वाले लोगों की संख्या ~~एक मिलियन तक पहुंच गई है~~ , काफी बड़ी है जो HTML5 में एक बड़ी रुचि का संकेत नहीं दे सकती है। तो चलिए चलते हैं।

ऑडियो समर्थन

पहले, हमने अपने पेज पर संगीत चलाने के लिए किसी भी बाइक का उपयोग करने का सहारा लिया। अब हम इससे बच सकते हैं और मूल तरीके का उपयोग कर सकते हैं - एचटीएमएल 5 प्लेयर में संगीत चलाने के लिए। यह निम्नलिखित तरीके से किया जाता है:

<audio autoplay="autoplay" controls="controls"> <source src="moment of peace.mp3" /> <p>       .    <a href="file.mp3"></a> .</p> </audio>

वीडियो का समर्थन

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

 <video controls preload> <source src="moment of peace.mov" /> <p>       .    <a href="moment of peace.mov"></a> .</p> </video>

वीडियो लोड करें

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

 <video preload>        ! </video>

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

नियंत्रण प्रदर्शित करें

ऐसा होता है कि हमें अपने खिलाड़ी को उपयोगकर्ता को दिखाने की आवश्यकता नहीं है। इसके अलावा, हमें पृष्ठभूमि में संगीत चलाने की जरूरत है (जिसका दुरुपयोग नहीं किया जाना चाहिए)। हम अपने उपयोगकर्ताओं के बारे में चिंता करते हैं, है ना?

हम निम्नानुसार नियंत्रण जोड़ सकते हैं:

 <video controls> !   , ? </video>

और आप अनुमान लगा सकते हैं कि हम नियंत्रण विशेषता को हटाकर नियंत्रण हटा सकते हैं।

 <video>      . </video>

सब कहाँ है? कोई नहीं है!

नियमित अभिव्यक्ति

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

वर्णों की संख्या 6 से कम और 16 से अधिक नहीं होनी चाहिए। और ...
आप केवल अपरकेस दर्ज कर सकते हैं और लैटिन अक्षर कम कर सकते हैं।

ठीक है, कोई बात नहीं। निम्नलिखित कोड स्निपेट पर विचार करें:

  <form action="register.rb" method="post"> <label for="username">  : </label> <input type="text" name="username" placeholder="  ..." pattern="[A-Za-z]{6,16}" required> <button type="submit"></button> </form>

जैसा कि आप अनुमान लगा सकते हैं, HTML5 में नियमित अभिव्यक्ति के लिए पैटर्न विशेषता जिम्मेदार है। यदि आपने नियमित अभिव्यक्ति का सामना नहीं किया है, तो आप उनके बारे में यहां पढ़ सकते हैं।

छोटे तत्व को ओवरराइड करना

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

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

हैडर और पाद

पहले, हमारी साइट के हेडर और बेसमेंट के लेआउट के लिए, हमने div'noy लेआउट का उपयोग किया था। उदाहरण के लिए, इस तरह:

 <div id="header"> <p>-.</p> </div> <div id="footer"> <small> production (c)</small> </div>

अब, इस लेआउट को गलत माना जाएगा ~~(नैतिक स्तर पर, निश्चित रूप से)।~~ हाँ, और शब्दार्थ पर। अब निम्नलिखित लेआउट सही होगा:

 <header> <p>-.</p> </header> <footer> <small> production (c)</small> </footer>

मार्क तत्व

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

 <mark>-!   .    .</mark>

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

 mark { border-radius: 15px; background: silver; color: white; font-family: Tahoma; padding: 5px; }

और अब यह इस तरह दिखेगा:

\

पहले से बेहतर है। चलिए आगे ...

कहाँ div का उपयोग करें और कहाँ नहीं

फिर, आप एक हेडर और एक मंजिल = दो-साइट के साथ एक उदाहरण दे सकते हैं यह समझने के लिए कि डिव का उपयोग करना कहां रोकना है। आपका कोड निम्नलिखित के लिए धीरे-धीरे प्रयास करना चाहिए:

 <header> <p>-.</p> </header> <footer> <small> production (c)</small> </footer>

एक विशुद्ध रूप से div लेआउट के बजाय। इस तरह, उदाहरण के लिए:

 <div id="header"> <p>-.</p> </div> <div id="footer"> <small> production (c)</small> </div>

इसके अलावा, hgroup, लेख और अनुभाग तत्वों के बारे में मत भूलना। अब उन्हें सीधे अपने दिव्य समकक्षों की तुलना में उपयोग करना बेहतर होगा। ~~नहीं, शब्द "चमत्कार" से नहीं।~~

कस्टम विशेषताएँ

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

हम डेवलपर का नाम विशेषता में छोड़ देते हैं:

 <p id="yep" data-name="krovatti">     </p>

और चूंकि हमारे पास अलर्ट है , तो हम क्रमशः जावास्क्रिप्ट का उपयोग करेंगे।

 var tag = document.getElementById("yep"); var attr = tag.getAttribute("data-name"); alert(attr + " would have you later!");

और अंत में ... सबसे बड़ी बात ...

स्थानीय भंडारण उर्फ स्थानीय भंडारण

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

पहले हमें उनके समर्थन का यकीन करना होगा:

 function isSupported() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (exc) { return false; } }

किसी कारण से, Google Chrome 12 के साथ, मुझे भी संदेह नहीं था।

चलो आगे बढ़ते हैं ... अब चलो सीधे उपयोग के लिए आगे बढ़ते हैं। कुछ भी आसान नहीं है!

 function goGoGo() { var attr = "kill me"; //   localStorage.setItem("one", attr); //     var some = localStorage["one']; //          localStorage.removeItem("one"); //   .    }

वह सब है। एक साधारण सी बात, लेकिन इतनी उपयोगी ...

निष्कर्ष

आज हम आपको HTML5 में 11 और नवाचारों के साथ मिले। उपयोगी और बहुत नहीं। फिर भी, यह निस्संदेह है कि उन सभी को वेब उद्योग - HTML5 में नए मानक के मसौदे में शामिल होने का अधिकार है।

क्या पढ़ना है?

28 एचटीएमएल 5 के फीचर्स, टिप्स और टेक्नीक जो आपको जरूर जानना चाहिए
एचटीएमएल 5 में विसर्जन ।
वेब स्टोरेज: आसान, अधिक शक्तिशाली क्लाइंट-साइड डेटा स्टोरेज ।

नौसिखिए कोडर के लिए एक दर्जन लानत सुझाव। भाग दो