सूचनाएं (कॉलआउट, नोट, चेतावनियां वगैरह)

DevSite में सूचनाओं के कई स्टाइल इस्तेमाल किए जा सकते हैं. ये सूचनाएं, अलग-अलग बैकग्राउंड रंगों वाले बॉक्स के तौर पर दिखती हैं. बैकग्राउंड के रंग पहले से तय होते हैं. साथ ही, एचटीएमएल या मार्कडाउन का इस्तेमाल करके सूचनाएं बनाई जा सकती हैं.

सूचना के अलग-अलग टाइप

ध्यान दें

<aside class="note">
<b>Note:</b> An ordinary note.
</aside>

Note: An ordinary note.

सलाह

<aside class="tip">
<b>Tip:</b> An ordinary tip.
</aside>

Tip: An ordinary tip.

चेतावनी

<aside class="caution">
<b>Caution:</b> Suggests proceeding with caution.
</aside>

Caution: Suggests proceeding with caution.

चेतावनी

<aside class="warning">
<b>Warning:</b> Stronger than caution; it means "Don't do this."
</aside>

Warning: Stronger than caution; it means "Don't do this."

अहम जानकारी

<aside class="special">
<b>Important:</b> Defines an important concept.
</aside>

Important: Defines an important concept.

मुख्य बात

<aside class="key-point">
<b>Key Point:</b> Defines an important takeaway.
</aside>

Key Point: Defines an important takeaway.

मुख्य शब्द

<aside class="key-term">
<b>Key Term:</b> Defines important terminology.
</aside>

Key Term: Defines important terminology.

मकसद

<aside class="objective">
<b>Objective:</b> Defines the goal of a procedure.
</aside>

Objective: Defines the goal of a procedure.

काम हो गया

<aside class="success">
<b>Success:</b> Describes a successful action or an error-free status.
Used only in interactive or dynamic content; don't use in ordinary
static pages.
</aside>

Success: Describes a successful action or an error-free status. Used only
in interactive or dynamic content; don't use in ordinary static pages.

बीटा

<aside class="beta">
<b>Beta:</b> A notice that describes a beta-release feature, which is
subject to change or removal in new minor versions of the product.
</aside>

Beta: A notice that describes a beta-release feature, which is subject to
change or removal in new minor versions of the product.

झलक देखें

<aside class="preview">
<b>Preview:</b> A note or tip for a feature preview.
</aside>

Preview: A note or tip for a feature preview.

Dogfood

<aside class="dogfood">
<b>Dogfood:</b> A notice that applies only temporarily, during internal
dogfood testing. Remove all Dogfood notices before making a document
publicly visible.
</aside>

Dogfood: A notice that applies only temporarily, during internal dogfood
testing. Remove all Dogfood notices before making a document publicly
visible.

बहिष्कृत

<aside class="deprecated">
<b>Deprecated:</b> A note or tip for a deprecated feature, product, or
service.
</aside>

Deprecated: A note or tip for a deprecated feature, product, or service.

इस्तेमाल की जानकारी

एचटीएमएल का इस्तेमाल

हमारा सुझाव है कि इन क्लास का इस्तेमाल, HTML5 <aside> एलिमेंट के साथ करें. हालांकि, इसके बजाय किसी दूसरे ब्लॉक-लेवल एलिमेंट (जैसे, <p>) का इस्तेमाल किया जा सकता है.

एचटीएमएल क्लास, सूचना का रंग और आइकॉन तय करते हैं. हालांकि, वे बोल्ड किए गए पहले शब्द को अपने-आप सेट नहीं करते. आपको उस शब्द को मैन्युअल तरीके से लिखना होगा, जैसा कि उदाहरणों में दिखाया गया है. सैद्धांतिक तौर पर, क्लास से जुड़े शब्द के अलावा किसी दूसरे शब्द का इस्तेमाल किया जा सकता है. हालांकि, हमारा सुझाव है कि आप ऊपर दिए गए पहले शब्दों का ही इस्तेमाल करें.

पुराने दस्तावेज़ों में, आपको class="note" के बजाय class="special" या गैर-स्टैंडर्ड क्लास के नाम दिख सकते हैं. इन क्लास के नामों से ऐसी सूचनाएं मिलती हैं जो दिखने में note सूचना जैसी ही होती हैं. हालांकि, हमारा सुझाव है कि आप खास या स्टैंडर्ड क्लास के नामों के बजाय class="note" का इस्तेमाल करें.

मार्कडाउन का इस्तेमाल

Markdown स्टाइल से, सूचना का रंग और आइकॉन तय होता है. साथ ही, सूचना के पहले शब्द को बोल्ड करने की सुविधा अपने-आप सेट हो जाती है. उदाहरण के लिए, Markdown में नोट हमेशा बोल्ड किए गए Note: शब्द से शुरू होता है.

एक से ज़्यादा पैराग्राफ़ वाली सूचना के लिए, एचटीएमएल <aside> (और <p>) का इस्तेमाल करें.

आपको Note: के बजाय, अहम जानकारी: दिख सकती है. इस मार्कडाउन स्टाइल से ऐसी सूचनाएं जनरेट होती हैं जो दिखने में Note: सूचना जैसी होती हैं.

सबसे सही तरीके

DevSite का सुझाव है कि अपने दस्तावेज़ में सूचनाएं जोड़ते समय, यहां दिए गए सबसे सही तरीके अपनाएं:

सुझाए गए

• कम शब्दों में लिखें. सूचनाओं को एक या दो वाक्यों में रखने की कोशिश करें.
• अगर हो सके, तो हर पेज पर एक सूचना रखें. अगर ज़रूरी हो, तो हर सेक्शन पर एक सूचना रखें.
• पक्का करें कि सूचनाओं में सिर्फ़ ज़रूरी कॉन्टेंट शामिल हो जिसे आपको हाइलाइट करना है. सूचना में ऐसा कॉन्टेंट शामिल न करें जिसे आपको नहीं पता कि उसका क्या करना है.
• सूचनाओं का इस्तेमाल, उपयोगकर्ता को जानकारी की ज़रूरत पड़ने से पहले करें, न कि उसके बाद.

सुझाया नहीं गया

• सूचनाओं में कोड के उदाहरण, टेबल या इमेज शामिल न करें.
• सूचनाओं को एक-दूसरे के ऊपर स्टैक करने से बचें. भले ही, वे अलग-अलग तरह की हों.
• हेडिंग के तुरंत बाद सूचनाएं डालने से बचें.
• किसी प्रोसेस से पहले ज़रूरी शर्तों के बारे में बताने के लिए, सूचनाओं का इस्तेमाल न करें.

ज़्यादातर मामलों में, ये सबसे सही तरीके note, caution, और warning टाइप की सूचनाओं पर लागू होते हैं. हालांकि, ये अन्य टाइप पर भी लागू हो सकते हैं.

सही उदाहरण

इसे आसान रखें:

डेटा के नुकसान की संभावना के लिए, cautions का इस्तेमाल करें:

संभावित चोट के लिए warning का इस्तेमाल करें:

कॉन्टेंट के लिए, सूचना के सही टाइप का इस्तेमाल करें. जैसे, key-term या success:

खराब उदाहरण

सूचनाओं में ज़्यादा शब्द नहीं होने चाहिए. साथ ही, उनमें ऐसी जानकारी नहीं होनी चाहिए जो मुख्य कॉन्टेंट में शामिल हो:

सूचनाओं में, किसी प्रक्रिया से पहले ज़रूरी शर्तों के बारे में नहीं बताया जाना चाहिए. इसके बजाय, "ज़रूरी शर्तें" सेक्शन का इस्तेमाल करें: