"HowTo: Components" वेब कॉम्पोनेंट का एक कलेक्शन है. इसमें सामान्य यूज़र इंटरफ़ेस (यूआई) पैटर्न लागू किए जाते हैं. इन तरीकों का मकसद, शिक्षा से जुड़ा संसाधन उपलब्ध कराना है. अलग-अलग कॉम्पोनेंट को लागू करने के तरीके के बारे में ज़्यादा जानकारी पाने के लिए, टिप्पणियां पढ़ें. उम्मीद है कि आपको इनसे कुछ सीखने को मिलेगा. ध्यान दें कि ये यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी नहीं हैं और इन्हें प्रोडक्शन में इस्तेमाल नहीं किया जाना चाहिए.
घटक
<howto-checkbox>: यह किसी फ़ॉर्म में बूलियन विकल्प को दिखाता है. चेकबॉक्स का सबसे आम टाइप, ड्यूअल-टाइप होता है. इसमें उपयोगकर्ता को दो विकल्पों के बीच टॉगल करने की सुविधा मिलती है. ये विकल्प हैं: सही का निशान लगाना और सही का निशान हटाना.<howto-tabs>: यह कॉन्टेंट को कई पैनल में बांटकर, दिखने वाले कॉन्टेंट को सीमित करता है.<howto-tooltip>: यह एक पॉप-अप होता है, जो किसी एलिमेंट से जुड़ी जानकारी दिखाता है. ऐसा तब होता है, जब एलिमेंट को कीबोर्ड फ़ोकस मिलता है या उस पर माउस घुमाया जाता है.
लक्ष्य
हमारा मकसद, ऐसे कॉम्पोनेंट लिखने के सबसे सही तरीके बताना है जो ऐक्सेस करने में आसान हों, बेहतर परफ़ॉर्म करें, आसानी से मैनेज किए जा सकें, और आसानी से स्टाइल किए जा सकें. हर कॉम्पोनेंट पूरी तरह से आत्मनिर्भर होता है, ताकि इसे रेफ़रंस के तौर पर इस्तेमाल किया जा सके.
सुलभता
ये कॉम्पोनेंट, WAI ARIA Authoring Practices का बारीकी से पालन करते हैं. यह एक गाइड है, जिसमें Accessible Rich Internet Application standard, यानी ARIA के बारे में बताया गया है और इसे दिखाया गया है. अगर आपको ARIA के बारे में जानकारी नहीं है, तो WebFundamentals पर हमारा परिचय देखें. हर कॉम्पोनेंट, कॉन्टेंट बनाने के सबसे सही तरीकों के काम के सेक्शन से लिंक होता है. हालांकि, यह ज़रूरी नहीं है, लेकिन हमारा सुझाव है कि कोड में बदलाव करने से पहले, ऑथरिंग प्रैक्टिस वाला सेक्शन पढ़ें.
परफ़ॉर्मेंस
वेब डेवलपमेंट में, "परफ़ॉर्मेंस" शब्द का इस्तेमाल कई चीज़ों के लिए किया जा सकता है. <howto> के संदर्भ में, परफ़ॉर्मेंस का मतलब आम तौर पर ऐनिमेशन से होता है. ये ऐनिमेशन, मोबाइल डिवाइसों पर भी लगातार 60 एफ़पीएस पर चलते हैं.
विज़ुअल फ़्लेक्सिबिलिटी
जहां तक हो सके, कॉम्पोनेंट को स्टाइल नहीं किया जाता. हालांकि, लेआउट या चुने गए या चालू स्टेटस को दिखाने के लिए, कॉम्पोनेंट को स्टाइल किया जा सकता है. ऐसा इसलिए किया गया है, ताकि लागू करने की प्रोसेस को विज़ुअल तौर पर आसान और फ़ोकस किया जा सके. सजावट पर समय खर्च न करके, हम कोड को सिर्फ़ उस चीज़ तक सीमित रखते हैं जो कॉम्पोनेंट को काम करने के लिए ज़रूरी है. अगर कॉम्पोनेंट को काम करने के लिए किसी स्टाइल की ज़रूरत है, तो स्टाइल को एक टिप्पणी के साथ मार्क किया जाएगा. इसमें बताया जाएगा कि ऐसा क्यों है.
मेंटेन किया जा सकने वाला कोड
HowTo: Components, रेफ़रंस के तौर पर लागू किया गया है. इसलिए, हमने ऐसा कोड लिखने में ज़्यादा समय लगाया जिसे आसानी से पढ़ा और समझा जा सके. साथ ही, इसमें ज़्यादा टिप्पणियां भी शामिल की गईं.
नॉन-गोल
लाइब्रेरी / फ़्रेमवर्क / टूलकिट होना चाहिए
<howto> कॉम्पोनेंट, npm, bower या किसी अन्य प्लैटफ़ॉर्म पर पब्लिश नहीं किए जाते, क्योंकि इनका इस्तेमाल प्रोडक्शन में नहीं किया जाता. कोड को छोटा और आसानी से पढ़ा जा सकने वाला बनाने के लिए, हम मॉडर्न JavaScript एपीआई का इस्तेमाल कर रहे हैं. साथ ही, हम उन मॉडर्न ब्राउज़र के साथ काम कर रहे हैं जो वेब कॉम्पोनेंट के स्टैंडर्ड लागू करते हैं. लागू करने के इन तरीकों को पढ़ने के बाद, अपनी ज़रूरतों के हिसाब से कोड में बदलाव किया जा सकता है.
पुराने सिस्टम के साथ काम करने की सुविधा
कोड पर सीधे तौर पर भरोसा नहीं किया जाना चाहिए. अगर हमें किसी एलिमेंट को लागू करने का बेहतर तरीका मिलता है, तो हम उसे लागू करने के तरीके और एपीआई में काफ़ी बदलाव कर सकते हैं. ऐसा होने की संभावना बहुत ज़्यादा है. यह एक ऐसा रिसॉर्स है जहां हम वेब यूज़र इंटरफ़ेस (यूआई) बनाने के सबसे सही तरीकों को शेयर कर सकते हैं, उन्हें एक्सप्लोर कर सकते हैं, और उन पर चर्चा कर सकते हैं.
पूरी जानकारी दें
हम WAI ARIA Authoring Practices में मौजूद *सभी *कॉम्पोनेंट लागू नहीं करते हैं. ऐसा हो सकता है कि हम उन्हें आगे भी लागू न करें. हालांकि, अन्य <howto> कॉम्पोनेंट में इस्तेमाल किए गए सिद्धांतों का दोबारा इस्तेमाल करने से, पढ़ने वाले लोग उन कॉम्पोनेंट को लागू कर सकते हैं जो मौजूद नहीं हैं.