परिचय
समस्याओं को हल करने के उद्देश्य से HTML5 में से एक तार्किक (और इसलिए मशीन पठनीयता) मार्कअप को बढ़ा रहा था, जैसा कि मानक शीर्षक तत्वों जैसे <हेडर>, <नेवी> और <फिगर> के परिचय से स्पष्ट है। यह सब अच्छा है, लेकिन कभी-कभी सामग्री तत्वों के लिए कुछ मशीन-पठनीय विशेषताओं को जोड़ने की आवश्यकता होती है, ताकि उनका उपयोग किसी भी स्क्रिप्ट में अनुमानित रूप से किया जा सके, भले ही अलग-अलग सामग्री के लिए उपयोग किया जाने वाला मार्कअप अलग हो। सरल और पिछड़े संगत
माइक्रोफ़ॉर्मेट्स की मदद से, और अधिक गूढ़
आरडीएफए की मदद से यह आवश्यकता कुछ हद तक पहले ही पूरी हो चुकी है।
इस संबंध में, यह आश्चर्य की बात नहीं है कि इस समस्या का हल HTML5 विनिर्देश में एक
माइक्रोडाटा विनिर्देश के रूप में जोड़ा गया था (बाद में माइक्रोडाटा के रूप में संदर्भित), जिसमें विशेषताओं का एक सेट शामिल है जो प्रसंस्करण के लिए किसी भी तत्व और संबद्ध DOM API को जोड़ा जा सकता है। पेज।
माइक्रोडेटा हमारे पास पहले से जो कुछ था उसे सुधारने की कोशिश कर रहा है: एक अंतर्निहित तंत्र प्रदान करें जो कि माइक्रोफ़ॉर्मेट्स के रूप में समझना आसान है, और जो आपको अपने स्वयं के पार्सर को लिखने के बिना डेटा को संसाधित करने की अनुमति देता है। बेशक, यदि आवश्यक हो, तो आप
जावास्क्रिप्ट का उपयोग करके मूल माइक्रोडाटा डोम एपीआई समर्थन के बिना ब्राउज़र समर्थन के लिए अपना
खुद का माइक्रोडाटा पार्सर बना सकते हैं। इस लेख में, हम माइक्रोडाटा एचटीएमएल विशेषताओं और डोम एपीआई सिंटैक्स पर जाएंगे।
: Opera Microdata .
HTML सिंटैक्स
माइक्रोडेटा में तत्वों का एक सेट होता है, जिनमें से प्रत्येक में कुंजी-मूल्य जोड़े द्वारा दर्शाए गए गुणों का एक सेट होता है। दरअसल, असली वेब गीक्स की तरह, खुद को माइक्रोडेटा प्रारूप में वर्णन करते हैं। आप अपने स्वयं के उदाहरण, मेरे पैटर्न में लिख सकते हैं।
: Microdata HTML5-. Microdata , .
सबसे पहले, हम
आइटमस्कोप विशेषता का उपयोग करके तत्वों के कंटेनर के रूप में किसी भी उपयुक्त तत्व को चिह्नित कर सकते हैं
<article itemscope> </article>
जाहिर है, आपको उस तत्व का चयन करना चाहिए जिसमें आपको आवश्यक डेटा चाहिए, जबकि इससे कोई फर्क नहीं पड़ता कि आप किस डेटा को चिह्नित करते हैं। इस मामले में, मैं जीवनी कार्ड को चिह्नित करूंगा: पहली संपत्ति हमारे नाम होगी, और हम इसे
आइटम विवरण का उपयोग करके चिह्नित करेंगे:
<article itemscope> <h2 itemprop="name">Chris Mills</h2> </article>
आइटमप्रॉप विशेषता डेटा वाले आइटम का चयन करती है। गुण मान गुण का नाम है, और तत्व का गुण संपत्ति का मूल्य है। आइए हम कुछ और गुण जोड़ते हैं ताकि आपको यह पता चल सके कि आपको क्या मिलेगा:
<article itemscope> <h2 itemprop="name">Chris Mills</h2> <ul> <li>Nationality: <span itemprop="nationality">British</span></li> <li>Age: <span itemprop="age">33</span></li> <li>Hair colour: <span itemprop="colour">Brown</span></li> </ul> </article>
कुछ मामलों में, संपत्ति का मूल्य तत्व का पाठ सामग्री नहीं है, लेकिन एक ही तत्व के कुछ विशेषता का मूल्य है। उदाहरण के लिए:
- <मीडिया> टैग के लिए, संपत्ति का मूल्य src विशेषता का मूल्य है।
- <a> टैग के लिए, href विशेषता का मान।
- <समय> टैग के लिए, "डेटाइम" विशेषता का मान।
(नोट अनुवादक: अन्य तत्वों के मान
विनिर्देश में पाए जा सकते हैं)
दूसरी ओर, यदि संपत्ति का मूल्य URL है, तो उसे संबंधित तत्व के माध्यम से व्यक्त किया जाना चाहिए, जो कि <आबंटन तत्व के माध्यम से बाहरी संसाधन को इंगित या लोड करता है। यदि संपत्ति का मूल्य एक तारीख या समय (या दोनों एक साथ) है, तो संपत्ति को <समय> तत्व और "डेटाइम" विशेषता के माध्यम से व्यक्त किया जाना चाहिए।
आइटमप्रॉप विशेषता
को बिल्कुल उसी तरह
से जोड़ा जाता है, लेकिन साथ ही, तत्व के पाठ सामग्री के बजाय गुण मान गुण मान होगा।
कुछ उदाहरण:
<article itemscope> <h2 itemprop="name">Chris Mills</h2> <p><img itemprop="image" src="Chris-Mills.png" alt="Photo of Chris Mills - this is me"></p> <ul> <li>Nationality: <span itemprop="nationality">British</span></li> <li>Age: <span itemprop="age">33</span></li> <li>Date of birth: <time itemprop="birthday" datetime="1978-06-27">June 27th 1978</time></li> <li>Hair colour: <span itemprop="colour">Brown</span></li> </ul> </article>
: (10 2011), <data>, .
नेस्टेड माइक्रोडाटा नोड्स
आप माइक्रोडाटा तत्वों को भी आसानी से पेश कर सकते हैं (नोट अनुवादक: आगे, ताकि शब्दों में भ्रमित न हों: एक दूसरे के अंदर "माइक्रोडाटा नोड्स")। सबसे ऊपरी माइक्रोडेटा नोड को
आइटमस्कोप विशेषता के साथ चिह्नित किया
जाता है, और फिर किसी भी नेस्टेड माइक्रोडेटा नोड्स को भी
आइटमस्कोप विशेषता के साथ चिह्नित किया
जाता है। आइए हमारे समूह के बारे में कुछ जानकारी जीवनी कार्ड में जोड़ें:
<article itemscope itemtype="http://example.org/biography"> ... <li> <div itemscope itemprop="band"> <h3>My band</h3> <ul> <li>Name: <span itemprop="name">Conquest of Steel</span></li> <li>Band: <span itemprop="style">Heavy metal</span></li> <li>Members: <span itemprop="size">5</span></li> </ul> </div> </li> ... </article>
विभिन्न गुण, एक नाम; एक संपत्ति, अलग-अलग नाम
आप कई तत्वों के लिए एक ही संपत्ति का नाम निर्दिष्ट कर सकते हैं, उदाहरण के लिए:
<li>Members: <ul> <li itemprop="member">Claymore Clark</li> <li itemprop="member">DD Danger</li> <li itemprop="member">Dan Durrant</li> <li itemprop="member">Chris Mills</li> <li itemprop="member">Vic Victory</li> </ul> </li>
परिणाम पांच गुणों के साथ एक माइक्रोडाटा नोड है, सभी नाम "मेमबर" और प्रत्येक अपने स्वयं के मूल्य के साथ।
और इसके विपरीत, आप एक तत्व में कई गुण भी डाल सकते हैं, जिससे इन गुणों को समान मूल्य मिल सकता है:
<li>Band: <span itemprop="style favouritemusic">Heavy metal</span></li>
आइटमकोप तत्व के बाहर के गुणों की ओर इशारा करते हुए
ऐसे समय हो सकते हैं जब आप अपने माइक्रोडेटा नोड्स को उन गुणों को शामिल करना चाहते हैं जो वास्तव में इस खंड (तत्व) के बाहर परिभाषित नहीं हैं। आप
आइटम गुण के अंदर बाहरी गुणों की
आईडी संदर्भित करके ऐसा कर सकते हैं। निम्नलिखित उदाहरण पर विचार करें, जिसमें मैंने अपने तत्व के बाहर अपने समूह के सदस्यों को html मार्कअप में एक अलग स्थान पर स्थानांतरित कर दिया है:
<article> ... <li> <div itemscope itemprop="band" itemref="members"> <h3>My band</h3> <ul> <li>Name: <span itemprop="name">Conquest of Steel</span></li> <li>Band: <span itemprop="style">Heavy metal</span></li> <li>Members: <span itemprop="bandsize">5</span></li> </ul> </div> </li> </ul> </article> <ul id="members"> <li itemprop="member">Claymore Clark</li> <li itemprop="member">DD Danger</li> <li itemprop="member">Dan Durrant</li> <li itemprop="member">Chris Mills</li> <li itemprop="member">Vic Victory</li> </ul>
इस मामले में, "सदस्य" गुण पहचानकर्ता के साथ तत्व के अंदर होते हैं जो हमारे माइक्रोडाटा आइटम के आइटम गुण को संदर्भित करता है।
: ID itemref . : itemref="members instruments gigdates"माइक्रोडाटा नोड्स के लिए एक संपत्ति शब्दकोश को परिभाषित करना जो बाद में उपयोग किया जा सकता है
जब तक आप अपने माइक्रोडाटा मार्कअप का उपयोग करते हैं, तब तक सब कुछ ठीक है - आप अपने माइक्रोडाटा नोड्स के लिए गुणों का एक सेट खुद निर्धारित करते हैं। लेकिन, जब अन्य वेब डेवलपर्स के साथ काम करते हैं, तो एक विशिष्ट माइक्रोडाटा नोड के लिए एक संपत्ति शब्दकोश को परिभाषित करना आवश्यक हो जाता है। आप प्रत्येक नोड को
आइटम टाइप विशेषता का उपयोग करके ऐसा कर सकते हैं। इस विशेषता का मान URL के रूप में है, इस URL द्वारा संदर्भित संसाधन मौजूद हो सकता है या नहीं भी हो सकता है। यदि आप इंटरनेट पर एक वास्तविक पृष्ठ पर URL को इंगित करते हैं तो यह अच्छा है जो अन्य उपयोगकर्ताओं को संपत्ति शब्दकोश के बारे में सूचित करता है, लेकिन आपको ऐसा नहीं करना है।
आइए अपने उदाहरण पर वापस आते हैं:
<article itemscope itemtype="http://example.org/biography"> ... <div itemscope itemprop="band" itemtype="http://example.org/band" itemref="members"> ... </div> ... </article>
एक माइक्रोडाटा नोड में केवल एक प्रकार हो सकता है, और एक प्रकार गुणों का एक शब्दकोश परिभाषित करता है। इस प्रकार, हमारे उदाहरण में, type example//ography के एक तत्व के चार गुण हैं - नाम, शैली, बैंडाइज़ और सदस्य। यह एक समान संपत्ति नाम के साथ भ्रम से बचने में मदद करता है। आप कोर्ट में जूरी के बारे में जानकारी को चिह्नित करने के लिए माइक्रोड्राटा का उपयोग भी कर सकते हैं, एक ही प्रॉपर्टी आइटमप्रॉप = "सदस्य" के साथ, लेकिन यह एक अलग प्रॉपर्टी होगी, क्योंकि माइक्रोडेटा नोड का एक अन्य
आइटम प्रकार है - "
example.org/jury ", या आपकी पसंद का कोई अन्य।
आपको ध्यान से सोचना चाहिए कि एक विश्वसनीय, लचीली, और एक्स्टेंसिबल चुनने के लिए आप किस प्रॉपर्टी डिक्शनरी का उपयोग करेंगे: अधिक जानकारी और युक्तियों के लिए,
डिक्शनरी डेफिनिशन की परिभाषा में सेलेक्टिंग नेम्स का सेक्शन पढ़ें। आपको वेब भी खोजना चाहिए, हो सकता है कि किसी ने पहले से ही आपके उद्देश्यों के लिए एक उपयुक्त शब्दकोश लिखा हो। माइक्रोफ़ॉर्म डिस्क्स विनिर्देश अनुभाग देखें, जो मौजूदा शब्दकोशों पर जानकारी के लिए माइक्रोफ़ॉर्मेट्स से माइग्रेट किया गया है, जैसे vCard और vEvent।
एक मिडरोडाटा नोड के लिए एक वैश्विक पहचानकर्ता असाइन करना
कुछ चीजें पहले से ही एक पहचानकर्ता को निपटान पहचानकर्ता समझौते द्वारा सौंपी गई हैं, जैसे कि पुस्तकों के लिए
आईएसबीएन और स्टोर में उत्पादों के लिए
यूपीसी । कुछ माइक्रोडाटा शब्दकोशों इन पहचानकर्ताओं का समर्थन करते हैं (आपको स्वयं ऐसे प्रश्नों का पता लगाना चाहिए, यही कारण है कि हम अनुशंसा करते हैं कि आप उन्हें
आइटम में निर्दिष्ट URL पर लिखें, जो आपकी अपनी संपत्ति शब्दकोशों लिखते समय)। यदि आप समान आइडेंटिफ़ायर का उपयोग करते हैं, तो उसे उसी तत्व में आइटम विशेषता में निर्दिष्ट करें जहाँ आपने
आइटम्सस्कोप और
आइटमटाइप निर्दिष्ट किया था। एक क्रॉलर या खोज इंजन जो इस तरह के मार्कअप को समझता है (अभी तक ऐसे कोई मार्कअप नहीं हैं) यह समझ जाएगा कि आपकी सामग्री उसी
आइटम के साथ किसी भी अन्य सामग्री के समान आईएसबीएन / यूपीसी ऑब्जेक्ट है। इसके अलावा, वे तब तक सुचारू रूप से संचित करने में सक्षम होंगे जब तक कि नेटवर्क चेतना और मशीनों में वृद्धि न हो जाए।
उदाहरण के लिए, निम्नलिखित मार्कअप को केवल तभी संसाधित किया जाएगा जब
example.com/book शब्दकोश स्पष्ट रूप से आईएसबीएन पहचानकर्ता का उपयोग करने का निर्देश देता है (इसके बारे में अधिक विवरण):
<article itemscope itemtype="http://example.com/book" itemid="urn:isbn:978-0321703521"> <h2 itemprop="title">InterACT with web standards</h2> <p>Authors:</p> <ul> <li itemprop="author">Leslie Jensen-Inman</li> <li itemprop="author">Chris Mills</li> <li itemprop="author">Glenda Sims</li> <li itemprop="author">Aarron Walter</li> ...
माइक्रोडाटा डोम एपीआई
माइक्रोडाटा तब और भी उपयोगी हो जाता है जब आप जावास्क्रिप्ट के उपयोग से पृष्ठ पर नोड्स और उनके गुणों को हेरफेर करने के लिए इसके डोम एपीआई का उपयोग करना शुरू करते हैं, शायद खोज तरीके से जानकारी प्रस्तुत करने के लिए या इसे किसी अन्य एप्लिकेशन पर वितरित करने के लिए।
एपीआई बहुत सरल है - आप दस्तावेज़ का उपयोग करते हैं। यह (पृष्ठ पर सभी माइक्रोडेटा नोड्स सहित नोडेलिस्ट ऑब्जेक्ट प्राप्त करने के लिए फ़ंक्शन का उपयोग करता है (अनुवादक का ध्यान दें: केवल सभी
शीर्ष-स्तरीय नोड्स, अर्थात् अन्य नोड्स में नेस्टेड नहीं था और
आइटमप्रॉप्ट विशेषता नहीं है)। यदि आप फ़ंक्शन को तर्कों के बिना कहते हैं, तो आपको सभी माइक्रोडेटा नोड्स की एक सूची मिल जाएगी; या, आप यह निर्दिष्ट कर सकते हैं कि आप किस
आइटमटाइप को कॉल पैरामीटर के रूप में पास करके देख रहे हैं, इस मामले में फ़ंक्शन केवल माइक्रोडेटा नोड्स के साथ एक नोडेलिस्ट लौटाएगा जिसका
आइटमटाइप आपके पैरामीटर के बराबर है। उदाहरण के लिए:
var biography = document.getItems("http://example.org/biography");
एक जीवनी नोड वापस करेगा और इसे एक चर में बचाएगा। नोड प्राप्त करने के बाद, आप संपत्ति के गुणों के माध्यम से इसके गुणों में हेरफेर कर सकते हैं:
var biography = document.getItems("http://example.org/biography")[0]; alert('Hi there ' + biography.properties['name'][0].textContent + '!');
और कुछ भी जटिल नहीं है, गंभीरता से। आप
माइक्रोडाटा डोम एपीआई विनिर्देश
का उपयोग करके अध्ययन करने के लिए और अधिक उदाहरण पा सकते हैं। इसके अलावा,
फिलिप जेगेन्स्टेड ने एक सुंदर सुरुचिपूर्ण
लाइव माइक्रोडेटा दर्शक बनाया , जो आपके कोड की जांच करने के लिए बहुत उपयोगी है, और इसका उपयोग जल्दी से माइक्रोडाटा को विभिन्न प्रारूपों में बदलने के लिए भी किया जा सकता है, उदाहरण के लिए, जेएसएनएस।
Microdata. , Opera Microdata, W3Cहमारी संक्षिप्त माइक्रोडेटा समीक्षा समाप्त हो गई है। मुझे उम्मीद है कि यह आपको इस दिलचस्प नई तकनीक को समझने में मदद करेगा। हमें पता है कि आप क्या सोचते हैं और हमारे
पायलट निर्माण को माइक्रोडाटा समर्थन के साथ ओपेरा के निर्माण की जांच करें
अनुवादक से:
लेख अगस्त के बाद से देवता पर आधारित है और किसी ने भी इसका अनुवाद नहीं किया है। क्योंकि लेख ध्यान देने योग्य है और बड़ी संख्या में डेवलपर्स के लिए दिलचस्प होगा, मैंने इस अन्याय को ठीक करने की स्वतंत्रता ली। मुझे न तो अंग्रेजी का अच्छा ज्ञान है, और न ही अनुवाद का अनुभव, इसलिए यदि आपको अनुवाद में अशुद्धि मिलती है, तो मुझे व्यक्तिगत रूप से लिखें। यदि आपको लगता है कि लेख किसी अन्य ब्लॉग के योग्य है - तो मुझे व्यक्तिगत रूप से भी लिखें