आकर्षक दिखने वाली वेबसाइटें, अपने तरीके से, इंटरनेट युग की एक मिनी-मास्टरपीस हैं। कस्टमाइज़ेशन उतना आसान या जटिल हो सकता है जितना आप चाहें, WordPress थीम को संशोधित करने से लेकर साइट की दिखावट को शुरू से अंत तक विकसित करने तक।
बाद में, आप उन एलिमेंट्स का सामना करने की संभावना रखते हैं जिनका आप आनंद लेते हैं और रंग जिन्हें आप अपने प्रोजेक्ट्स में पुनः उपयोग करना चाहते हैं। इस लेख में हम आपको आपकी इच्छित हर चीज़ वेबसाइटों को बताने के लिए आवश्यक चीजें दिखाएंगे।
रंग क्या है?
ColorZilla
मूल रूप से Firefox के लिए बनाया गया, ColorZilla तब से Chrome और इसके संबंधित ब्राउज़रों पर भी उपलब्ध हो गया है।
इंस्टॉलेशन पर, आपको दोनों ब्राउज़रों के UI में एक अतिरिक्त बटन मिलेगा। यह बटन आपको ऑनलाइन किसी भी चीज़ का रंग पता लगाने की क्षमता देता है। आप जल्दी से महसूस करेंगे कि ColorZilla केवल रंगों की पहचान करने से कहीं अधिक करता है क्योंकि इसमें पैलेट के लिए समर्थन भी शामिल है।
फ़ॉन्ट क्या है?
WhatFont? (Chrome)
सख्ती से कहें तो, आपको किसी वेबसाइट का फ़ॉन्ट पता लगाने के लिए WhatFont? एक्सटेंशन की आवश्यकता नहीं है, लेकिन यह अब तक का सबसे तेज़ तरीका है। विकल्प स्टाइलशीट खोलना और इसके माध्यम से शिकार करना होगा।
WhatFont? इंस्टॉल करें और आपको अपने ब्राउज़र UI में एक नया आइकन दिखाई देगा। जब तक आप ब्राउज़र को पूरी तरह से रीस्टार्ट नहीं करते, आपको उस पेज को रीफ्रेश करना होगा जहां आप फ़ॉन्ट की पहचान करना चाहते हैं। एक बार जब आप ऐसा कर लेते हैं, तो अपने ब्राउज़र में बटन पर क्लिक करें।
वेबपेज के ऊपरी-दाएं कोने में एक नया बटन दिखाई देना चाहिए, और जब आप टेक्स्ट पर माउस घुमाते हैं, तो फ़ॉन्ट नाम प्रदर्शित होना चाहिए। फ़ॉन्ट पर क्लिक करने से आकार से संबंधित अतिरिक्त जानकारी मिलेगी। यह "स्टैक" में अन्य फ़ॉन्ट की पहचान भी करेगा जो सुविधाजनक है यदि आप देखना चाहते हैं कि वेब डेवलपर्स अपने इच्छित टाइपफेस के लिए क्या विकल्प मानते हैं।
Font Finder (Firefox)
Chrome के WhatFont? के समान ही Firefox-एक्सक्लूसिव एक्सटेंशन।
एक्सटेंशन इंस्टॉल करें, और आपके पास राइट-क्लिक कॉन्टेक्स्ट मेनू में एक नया विकल्प होगा।
जब आपको कुछ पहचानना हो, तो उसे हाइलाइट करें, फिर अपने लिए उपलब्ध विकल्प लाएं। "Analyse Selection" आपको वह सब कुछ बताएगा जो आप कभी जानना चाहते थे।
यह जो विवरण प्रदान करता है वह जबड़े छोड़ने वाला है। यदि टेक्स्ट को "(स्टैक)" के रूप में चिह्नित किया गया है तो यह स्टैक में पहले फ़ॉन्ट को चुनेगा जो आपके पास इंस्टॉल है। स्टैक आमतौर पर एक सामान्य शब्द के साथ समाप्त होता है, जैसे ऊपर के उदाहरण में "sans-serif"। संभावना नहीं है कि स्टैक में अन्य फ़ॉन्ट में से एक इंस्टॉल नहीं है, तो यह आपके सिस्टम के डिफ़ॉल्ट sans-serif फेस पर वापस आ जाएगा।
आप "Adjust Element" विकल्प के माध्यम से एलिमेंट को कस्टमाइज़ भी कर सकते हैं। एक बार जब एक्सटेंशन आपको फ़ॉन्ट परिवार दर्ज करने के लिए प्रेरित करता है, तो आप मनमानी कर सकते हैं। हमारे उदाहरण में हमने Wikipedia पर लगभग हर फ़ॉन्ट को कुछ अलग में बदल दिया, जिससे विचित्र मैश-अप प्रदर्शित हुआ। ये परिवर्तन स्थायी नहीं हैं और पेज रीलोड होने पर गायब हो जाते हैं।
"Replace font (entire DOM)" आपको पेज पर फ़ॉन्ट के हर उदाहरण को बदलने की अनुमति देता है। Roboto का प्रशंसक नहीं (जिसे हम अपने मुख्य sans-serif के रूप में उपयोग करते हैं)? इस विकल्प को हाइलाइट करें, पेज पर मौजूद फ़ॉन्ट की सूची से "Roboto" पर क्लिक करें, और उस फ़ॉन्ट का नाम इनपुट करें जिसे आप देखना पसंद करेंगे। फिर से, यह स्थायी नहीं है, लेकिन यह आपको अपनी पसंदीदा वेबसाइटों के डिज़ाइन के साथ खेलने की अनुमति देता है, भले ही अस्थायी रूप से।
साइट माप
Page Ruler (Chrome)
"एक रूलर? वास्तव में?" हम आपको पूछते सुनते हैं। Page Ruler एक स्क्रीन रूलर है जो यह सुनने से थोड़ा अलग है। वास्तव में, हम किसी भी प्रारंभिक संदेह को पूरी तरह से समझेंगे।
वेब पर पोजिशनिंग मायने रखती है। पेज के एलिमेंट्स को बस सही ढंग से स्पेस किया जाना चाहिए, या वे उतने आकर्षक नहीं होंगे जितने हो सकते हैं। हालांकि यह जानकारी जानने के लिए विशेष रूप से गूढ़ है, Page Ruler इसे संभव बनाता है।
इसे किसी अन्य एक्सटेंशन की तरह इंस्टॉल करें, और आपके ब्राउज़र UI में एक और बटन होगा। ध्यान दें कि आपको एक्सटेंशन को आज़माने के लिए एक वेब पेज खोलना होगा - सुरक्षा कारणों से आप Chrome के बिल्ट-इन वेब पेज में से एक का उपयोग नहीं कर पाएंगे।
एक बार जब आप बटन पर क्लिक करते हैं, तो आपको एड्रेस बार के ठीक नीचे सूचना की एक अतिरिक्त पट्टी मिलेगी, और आप माउस का उपयोग करके एक आकृति क्लिक और ड्रैग कर सकते हैं, जिसके आयामों की गणना की जाएगी और उपरोक्त बार के साथ प्रदर्शित किया जाएगा। इसके अलावा आपके पास ग्रिड को सक्षम या अक्षम करने का विकल्प भी है, हालांकि यह सटीकता में मदद कर सकता है।
चाहें तो आप आयत के रंग को उसके डिफ़ॉल्ट नीले से बदल सकते हैं। आपके द्वारा चुने गए रंग की परवाह किए बिना, यह स्वचालित रूप से पारदर्शिता की एक डिग्री जोड़ देगा ताकि आप इसके नीचे की सामग्री देख सकें।
Page Ruler को इसकी विशेषताओं के लिए विशेष रूप से न्यूनतम दृष्टिकोण के लिए कुछ श्रेय मिलना चाहिए, सभी आवश्यक जानकारी को विंडो के शीर्ष पर एक छोटी पट्टी में पैक करना।
MeasureIt (Firefox और Chrome)
MeasureIt Page Ruler के समान कार्य करता है और Firefox और Chrome दोनों के लिए उपलब्ध है।
एक बार इंस्टॉल हो जाने पर, बटन पर क्लिक करें, और आप एक आयत बनाने के लिए क्लिक और ड्रैग कर पाएंगे। आयत के साथ एक पिक्सेल काउंट होगा, जिसका अर्थ है कि आप पोजिशनिंग के लिए सटीक माप प्राप्त कर सकते हैं।
यदि आप केवल माउस से माप को सही करने के बारे में चिंतित हैं, तो आप हाइलाइट किए गए क्षेत्र के आकार को एरो कीज़ का उपयोग करके समायोजित कर सकते हैं, जिससे सटीकता जितना लगता है उससे कहीं अधिक आसान हो जाती है। हम सेटिंग्स में "Area" विकल्प की जांच करने का सुझाव देंगे; यह सॉफ़्टवेयर के काम करने के तरीके को नहीं बदलता है और केवल आपको एक विचार दे रहा है कि आपके द्वारा खींची गई आयत कितना क्षेत्र लेती है।
हम शर्त लगाते हैं कि आप आश्चर्यचकित होंगे जब आप देखेंगे कि स्क्रीन पर कितने पिक्सेल हैं और हाइलाइट होने पर वे कितना क्षेत्र बनाते हैं। यदि कुछ नहीं, तो यह निश्चित रूप से "स्क्रीन रियल एस्टेट" शब्द को परिप्रेक्ष्य में रखेगा।
निष्कर्ष
इन एक्सटेंशन से सर्वश्रेष्ठ प्राप्त करने में थोड़ा समय लगता है, लेकिन वे कुछ बेहतरीन जानकारी को आसान पहुंच के भीतर रखते हैं। आप जल्दी से उनके साथ पकड़ में आ जाएंगे, लेकिन यदि आपको फ़ॉन्ट बदलना मुश्किल लगता है, तो याद रखें कि नाम सटीक होने चाहिए। "Comic Sans" काम नहीं करेगा, जबकि "Comic Sans MS" (जैसा कि Office में दिखाई देता है) करेगा।
याद रखें कि इन सभी एक्सटेंशन को आपके द्वारा दी गई जानकारी में इस तरह की सटीकता की आवश्यकता होती है, और आप उनका अधिकतम लाभ उठाने के लिए अच्छी तरह से सुसज्जित होंगे।
