डेवलपर्स के लिए इंटरनेट एक्सप्लोरर 9 (और न केवल) के लिए सबसे व्यापक गाइड, भाग 6

CSS3 2D ट्रांसफ़ॉर्म, HTML5 सिमेंटिक एलिमेंट्स, जावास्क्रिप्ट, डेमोस और टेस्ट







PDC10 सम्मेलन के दौरान, इंटरनेट एक्सप्लोरर 9 का अगला परीक्षण संस्करण प्रस्तुत किया गया था। IE9 पूर्वावलोकन 6 डेवलपर्स द्वारा परीक्षण के लिए एक संस्करण है और पिछले पूर्वावलोकन संस्करणों की तरह, इसमें उपयोगकर्ता इंटरफ़ेस नहीं है। लेकिन आप इसे IE9 Beta को हटाए बिना अपने कंप्यूटर पर इंस्टॉल कर सकते हैं।



यह पोस्ट इंटरनेट एक्सप्लोरर 9 के छठे परीक्षण संस्करण का विवरण प्रकट करेगा और ब्राउज़र में नवाचारों के बारे में बात करेगा जो डेवलपर्स के लिए महत्वपूर्ण होगा।



डेवलपर्स के लिए IE9 में नवाचारों के बारे में लेखों की एक श्रृंखला में यह छठा लेख है। आप यहां पिछले भागों से परिचित हो सकते हैं:

• भाग 1 (CSS3, HTML5, DOM) ;
• भाग 2 (एसवीजी, जीपीयू) ;
• भाग तीन (आईसीसी प्रोफाइल, छवि प्रारूप, जावास्क्रिप्ट) ;
• भाग 4 ;
• भाग ५

परिचय

PDC10 सम्मेलन के दौरान, एक अफवाह थी कि IE9 P6 एक रिलीज उम्मीदवार और इंटरनेट एक्सप्लोरर 9 के बाद के अंतिम रिलीज से पहले नवीनतम पूर्वावलोकन बिल्ड है।



यह रिलीज़, अगले प्रदर्शन अनुकूलन के अलावा, कई उपयोगी नवाचार शामिल हैं: CSS3 2D ट्रांसफ़ॉर्म और HTML5 सिमेंटिक तत्वों का समर्थन।

जावास्क्रिप्ट निष्पादन की गति

डेवलपर्स ने जावास्क्रिप्ट के साथ काम करते समय एक बार फिर से ब्राउज़र के प्रदर्शन को कड़ा कर दिया। वेबकिट परीक्षणों के अनुसार, सनस्पाइडर इंटरनेट एक्सप्लोरर 9 चौथे स्थान पर है, फ़ायरफ़ॉक्स 4.0 के प्रारंभिक संस्करण से आगे, लेकिन क्रोम और ओपेरा ब्राउज़रों से नीच:







हालाँकि, जैसा कि आप देख सकते हैं, आधुनिक ब्राउज़र गति अनुकूलन की सीमा तक पहुँच चुके हैं और लाभ की गणना मिलीसेकंड में की जाती है।

CSS3 2 डी ट्रांसफ़ोम

IE9 पूर्वावलोकन 6 में एक काफी अप्रत्याशित नवाचार सीएसएस में 2 डी परिवर्तनों के लिए समर्थन था। यह मानक अभी तक नहीं अपनाया गया है, इसलिए, विशेष उपसर्गों के माध्यम से आदेशों का समर्थन किया जाता है-

• -ms- परिवर्तन - एक तत्व के लिए एक परिवर्तन फ़ंक्शन लागू करता है;
• -ms-transform-Origin - उस बिंदु को इंगित करता है जिससे तत्व परिवर्तन माना जाता है, केंद्र डिफ़ॉल्ट रूप से उपयोग किया जाता है (क्षैतिज स्थिति के लिए 50% और ऊर्ध्वाधर स्थिति के लिए 50%)।

Internet Explorer 9 प्रीव्यू 6 निम्नलिखित परिवर्तन कार्यों का समर्थन करता है, जिनका उपयोग किया जाता है -ms-transform:

• मैट्रिक्स ( ए , बी , सी , डी , ई , एफ ) - छह मूल्यों के मैट्रिक्स के परिवर्तन को इंगित करता है;
• अनुवाद ( tx , ty ) - वेक्टर द्वारा परिवर्तन को इंगित करता है;
• TranslX ( tx ) - क्षैतिज परिवर्तन को इंगित करता है;
• ट्रांसली ( ty ) - ऊर्ध्वाधर परिवर्तन को इंगित करता है;
• स्केल ( sx , sy ) - वेक्टर द्वारा तत्व के स्केलिंग को इंगित करता है। यदि दूसरा मूल्य निर्दिष्ट नहीं है (ऊर्ध्वाधर स्केलिंग), यह पहले के बराबर होगा;
• स्केलएक्स ( एसएक्स ) - तत्व के क्षैतिज स्केलिंग को इंगित करता है;
• स्केल (से) - तत्व के ऊर्ध्वाधर स्केलिंग को इंगित करता है;
• रोटेट ( कोण ) - तत्व के रोटेशन को निर्दिष्ट कोण पर इंगित करता है, जहां केंद्र बिंदु होगा -ms-ट्रांस्फ़ॉर्म-उत्पत्ति या तत्व का केंद्र अगर -ms-ट्रांस्फ़ॉर्म-मूल सेट नहीं है;
• skewX ( ax ) - निर्दिष्ट कोण पर झुकाव क्षैतिज परिवर्तन को इंगित करता है;
• skewY ( ay ) - निर्दिष्ट कोण पर लंबवत रूप से तिरछा परिवर्तन इंगित करता है;
• तिरछा ( कुल्हाड़ी , ay ) - निर्दिष्ट कोण पर दोनों निर्देशांक में तिर्यक परिवर्तन को इंगित करता है।

-Ms-ट्रांस्फ़ॉर्म-मूल संपत्ति दो मापदंडों को स्वीकार करती है, जो सकारात्मक या नकारात्मक हो सकती है। ये पैरामीटर प्रारंभिक बिंदु को इंगित करते हैं, जो तत्व में परिवर्तन लागू होंगे। पैरामीटर मान या तो अंतराल या विशेष मूल्यों के अनुमत मानों में से कोई भी हो सकते हैं: बाएं, केंद्र या दाएं । ये विशेष मूल्य 0%, 50% और 100% के अनुरूप हैं।

उदाहरण

मूल आइटम:



<div id = "test" style = "background-color: red; width: 50px; height: 50px"> </ div>







-ms- परिवर्तन: मैट्रिक्स (10, 1, 1, 1, 1, 1);







-ms-transform: अनुवाद (1px, 15px) घुमाएँ (45deg);







-ms-transform: skew (15deg, 15deg);







-ms-transform: ट्रांसलेशन (200px, 100px) स्केल (.75, .75) रोटेट (40deg);

-एमएस-ट्रांसफॉर्म-मूल: 60% 100%;

HTML5 शब्दार्थ तत्व

HTML5 मानक विशेष शब्दार्थ के साथ नए तत्वों का परिचय देता है। Internet Explorer 9 पूर्वावलोकन 6 उनके पूर्ण समर्थन को लागू करता है। विनिर्देशन के अनुसार, ये सभी तत्व HTMLElement ऑब्जेक्ट से विरासत में मिले हैं। इसके अलावा, IE9P6 में, इन नए तत्वों को विनिर्देश के अनुसार मानक रूप से स्टाइल किया गया है।



नीचे HTML5 अर्थ तत्वों की एक सूची दी गई है:

• अनुभाग
• एनएवी
• लेख
• अलग
• hgroup
• हैडर
• फ़ुटबाल
• आकृति
• figcaption
• मार्क

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



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

डेवलपर टूल में नया

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



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



यह कैसा दिखता है स्क्रीनशॉट में प्रदर्शित एक के समान एक कोड होना:







बेहतर पठनीयता और डीबगिंग के लिए आप इसे कुछ क्लिकों में प्रारूपित कर सकते हैं:











अत्यंत उपयोगी और सुविधाजनक नवाचार।

डेमोस और टेस्ट

इंटरनेट एक्सप्लोरर 9 बहुत ध्यान आकर्षित करता है। IE9 बीटा की रिलीज के बाद पहले 6 हफ्तों में, ब्राउज़र को 10 मिलियन से अधिक बार डाउनलोड किया गया है। यह मुझे लगता है कि डेवलपर्स ने इस या उस नवीनता के महत्व को दिखाने के लिए जो उत्कृष्ट और ज्वलंत प्रदर्शन किए हैं, उन्होंने यहां एक महत्वपूर्ण भूमिका निभाई है। इसके अलावा, डेवलपर्स परीक्षण बनाते हैं जो आपको अन्य ब्राउज़रों के बीच IE9 में कार्यान्वित कार्यों के वितरण की डिग्री का मूल्यांकन करने की अनुमति देता है।



IE9 पूर्वावलोकन 6 की रिलीज के साथ, कई नए डेमो और नए परीक्षण सूट जारी किए गए थे।

एसवीजी हेलीकाप्टर

एक दिलचस्प गेम जो आपको गतिशील सामग्री और ग्राफिक्स की ब्राउज़र प्रसंस्करण गति का मूल्यांकन करने की अनुमति देता है। एक हेलीकॉप्टर को नियंत्रित करने और एक रेंज रिकॉर्ड स्थापित करने का प्रयास करें। मैं 522 मील की दूरी तय करने में कामयाब रहा।







IE9 में, यह गेम FPS = 60 के साथ आता है।

ट्रैक छप

एक छोटा परीक्षण जो वेब पेज पर कैनवास, ध्वनि और एनीमेशन का उपयोग करते समय ब्राउज़र के प्रदर्शन को निर्धारित करेगा।

शब्दार्थ नोटपैड

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

एक नया दिन

एक ग्राफिक परीक्षण जो आपको अपने ब्राउज़र में CSS3 के बॉक्स-शैडो तत्व के कार्यान्वयन की तुलना करने की अनुमति देता है।







नीचे परिणाम है जो मुझे ओपेरा 11 अल्फा 1029 ब्राउज़र में मिला है।







जांचें कि आपका ब्राउज़र मानक और औजार CSS3 के बॉक्स-छाया के साथ कैसे अनुपालन करता है।

फ़्लिकर पोस्टकार्ड

यह डेमो आपको दिखाता है कि सीएसएस 2 डी परिवर्तन गुणों के साथ कैसे काम किया जाए।

ग्राहक मॉडल

यह डेमो दिखाता है कि ब्राउज़र एक जटिल एसवीजी ऑब्जेक्ट के साथ कैसे काम करता है। सभी तालिका तत्वों को एसवीजी तत्वों का उपयोग करके इकट्ठा किया जाता है।

आइकन संपादक

आइकन संपादक पूरी तरह से एचटीएमएल 5 तकनीक पर बनाया गया है। लगता है और काम करता है - महान।

Addon प्रदर्शन सलाहकार

नवीनतम परीक्षण ब्राउज़र के लिए ऐड-ऑन को अवरुद्ध करने के लिए तंत्र का प्रदर्शन करने के उद्देश्य से है यदि वे डाउनलोड को धीमा कर देते हैं।

WebVizBench

HTML5 की नई विशेषताओं को प्रदर्शित करने के लिए तीसरे पक्ष के डेवलपर्स द्वारा सबसे दिलचस्प प्रदर्शन परीक्षण लिखा गया था। यह एक वास्तविक रेडियो स्टेशन के लिए एक साइट है। डेवलपर्स ने इंटरनेट एक्सप्लोरर 9 में एचटीएमएल 5 की क्षमताओं को अपने आधार के रूप में लिया और एक सुंदर ग्राफिक्स बेंचमार्क बनाया।







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

परीक्षण

डेवलपर्स ने HTML5 सिमेंटिक एलिमेंट्स सपोर्ट के लिए परीक्षण जोड़े हैं:







CSS3 2D रूपांतरण :







DOM स्तर 3 की घटनाएँ :







EcmaScript 5 ऑब्जेक्ट्स ऑब्जेक्ट :

निष्कर्ष

IE9 पूर्वावलोकन 6 के नए संस्करण ने स्क्रिप्ट को संसाधित करते समय दो अतिरिक्त मानकों और अतिरिक्त प्रदर्शन के लिए समर्थन पेश किया। इसके अलावा, नए दृश्य परीक्षण और डेमो जारी किए गए थे।



यह कहा जाता है कि IE9 की अगली रिलीज़ पहले से ही रिलीज़ के लिए एक उम्मीदवार होगी, जिसके बाद ब्राउज़र का अंतिम संस्करण होगा। आशा करते हैं कि हम MIX11 सम्मेलन में वसंत में अंतिम संस्करण देखेंगे।

उपयोगी लिंक:

• डेवलपर्स के लिए इंटरनेट एक्सप्लोरर 9 बीटा गाइड ( लिंक );
• Internet Explorer 9 प्लेटफ़ॉर्म पूर्वावलोकन 6
• इंटरनेट एक्सप्लोरर 9 बीटा
• IE टेस्टड्राइव
• IE9 डेवलपर ब्लॉग
• WebVizBench ब्राउज़र प्रदर्शन बेंचमार्क।