Computer >> कंप्यूटर >  >> नेटवर्किंग >> इंटरनेट

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

आकर्षक दिखने वाली वेबसाइटें, अपने तरीके से, इंटरनेट युग की एक लघु-उत्कृष्ट कृति हैं। अनुकूलन आपकी इच्छानुसार आसान या जटिल हो सकता है, जिसमें वर्डप्रेस थीम को संशोधित करने से लेकर शुरू से अंत तक साइट का स्वरूप विकसित करना शामिल है।

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

रंग क्या है?

कलरज़िला

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

मूल रूप से फ़ायरफ़ॉक्स के लिए बनाया गया, ColorZilla तब से क्रोम और उससे संबंधित ब्राउज़रों पर भी उपलब्ध हो गया है।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

स्थापना के बाद, आपको दोनों ब्राउज़रों के लिए UI में एक अतिरिक्त बटन मिलेगा। यह बटन आपको ऑनलाइन किसी भी चीज़ के रंग का पता लगाने की क्षमता देता है। आपको जल्द ही पता चल जाएगा कि ColorZilla केवल रंगों की पहचान करने के अलावा और भी बहुत कुछ करता है क्योंकि इसमें पैलेट के लिए भी समर्थन शामिल है।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

फ़ॉन्ट क्या है?

व्हाट्सएप? (क्रोम)

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

कड़ाई से बोलते हुए, आपको WhatFont की आवश्यकता नहीं है? किसी वेबसाइट के फ़ॉन्ट का पता लगाने के लिए एक्सटेंशन, लेकिन ऐसा करने का यह अब तक का सबसे तेज़ तरीका है। विकल्प यह होगा कि आप स्टाइलशीट खोलें और उसका अध्ययन करें।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

WhatFont स्थापित करें? और आपको अपने ब्राउज़र UI में एक नया आइकन दिखाई देगा। जब तक आप ब्राउज़र को पूरी तरह से पुनरारंभ नहीं करते हैं, आपको उस पृष्ठ को रीफ्रेश करना होगा जहां आप फोंट की पहचान करना चाहते हैं। ऐसा करने के बाद, अपने ब्राउज़र में बटन पर क्लिक करें।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

वेबपेज के ऊपरी-दाएँ कोने में एक नया बटन दिखाई देना चाहिए, और जब आप टेक्स्ट पर माउस ले जाते हैं, तो फ़ॉन्ट नाम प्रदर्शित होना चाहिए। फ़ॉन्ट पर क्लिक करने से साइज़िंग से संबंधित अतिरिक्त जानकारी मिल जाएगी। यह "स्टैक" में अन्य फोंट की भी पहचान करेगा जो सुविधाजनक है यदि आप देखना चाहते हैं कि वेब डेवलपर्स अपने इच्छित टाइपफेस के लिए कौन से विकल्प मानते हैं।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

फ़ॉन्ट खोजक (फ़ायरफ़ॉक्स)

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

Chrome के WhatFont के समान ही Firefox-अनन्य एक्सटेंशन?

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

एक्सटेंशन इंस्टॉल करें, और आपके पास राइट-क्लिक संदर्भ मेनू में एक नया विकल्प होगा।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

जब आपको कोई ऐसी चीज़ मिल जाए जिसे आप पहचानना चाहते हैं, तो उसे हाइलाइट करें, फिर अपने लिए उपलब्ध विकल्पों को सामने लाएं। "विश्लेषण चयन" आपको वह सब कुछ बताएगा जो आप कभी जानना चाहते थे।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

यह जो विवरण प्रदान करता है वह जबड़े छोड़ने से कम नहीं है। यदि टेक्स्ट को "(स्टैक)" के रूप में चिह्नित किया गया है तो यह आपके द्वारा इंस्टॉल किए गए स्टैक में पहला फ़ॉन्ट चुनेगा। स्टैक आमतौर पर एक सामान्य शब्द के साथ समाप्त होता है, जैसे ऊपर के उदाहरण में "सैन्स-सेरिफ़"। अप्रत्याशित घटना में स्टैक में अन्य फोंट में से एक स्थापित नहीं है, यह आपके सिस्टम के डिफ़ॉल्ट बिना-सेरिफ़ चेहरे पर वापस आ जाएगा।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

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

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

"फ़ॉन्ट बदलें (संपूर्ण डोम)" आपको पृष्ठ पर फ़ॉन्ट के प्रत्येक उदाहरण को बदलने की अनुमति देता है। रोबोटो का प्रशंसक नहीं है (जिसे हम अपने मुख्य सैन्स-सेरिफ़ के रूप में उपयोग करते हैं)? इस विकल्प को हाइलाइट करें, पेज पर मौजूद फोंट की सूची से "रोबोटो" पर क्लिक करें, और उस फ़ॉन्ट का नाम इनपुट करें जिसे आप देखना पसंद करेंगे। फिर से, यह स्थायी नहीं है, लेकिन यह आपको अपनी पसंदीदा वेबसाइटों के डिज़ाइन के साथ खेलने की अनुमति देता है, भले ही वह केवल अस्थायी रूप से ही क्यों न हो।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

साइट माप

पेज रूलर (क्रोम)

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

"एक शासक? सच में?" हम सुनते हैं आप पूछते हैं। पेज रूलर एक स्क्रीन रूलर है, जो दिखने में थोड़ा अलग होता है। वास्तव में, हम किसी भी प्रारंभिक संदेह को भी पूरी तरह से समझेंगे।

वेब पर पोजिशनिंग मायने रखती है। किसी पृष्ठ के तत्वों को बस इतना ही स्थान देना होता है, या वे उतने आकर्षक नहीं होते जितने वे हो सकते हैं। हालांकि यह जानकारी जानने के लिए विशेष रूप से गूढ़ है, पेज रूलर इसे संभव बनाता है।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

इसे किसी अन्य एक्सटेंशन की तरह स्थापित करें, और आपके ब्राउज़र UI में एक और बटन होगा। ध्यान दें कि एक्सटेंशन को आज़माने के लिए आपको एक वेब पेज खोलना होगा - आप सुरक्षा कारणों से क्रोम के किसी एक अंतर्निहित वेब पेज का उपयोग नहीं कर पाएंगे।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

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

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

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

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

पेज रूलर अपनी विशेषताओं के लिए विशेष रूप से न्यूनतम दृष्टिकोण रखने के लिए कुछ श्रेय का हकदार है, सभी आवश्यक जानकारी को खिड़की के शीर्ष पर एक छोटे से बार में पैक करना।

MeasureIt (फ़ायरफ़ॉक्स और क्रोम)

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

माप यह पेज रूलर के समान कार्य करता है और फ़ायरफ़ॉक्स और क्रोम दोनों के लिए उपलब्ध है।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

एक बार इंस्टॉल हो जाने पर, बटन पर क्लिक करें, और आप एक आयत बनाने के लिए क्लिक और ड्रैग करने में सक्षम होंगे। आयत के साथ-साथ एक पिक्सेल गणना होगी, जिसका अर्थ है कि आप स्थिति के लिए सटीक माप प्राप्त कर सकते हैं।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

यदि आप केवल एक माउस के साथ माप प्राप्त करने के बारे में चिंतित हैं, तो आप तीर कुंजियों का उपयोग करके हाइलाइट किए गए क्षेत्र के आकार को समायोजित कर सकते हैं, जिससे सटीकता की तुलना में यह बहुत आसान हो जाता है। हम सेटिंग में "क्षेत्र" विकल्प की जाँच करने का सुझाव देंगे; यह सॉफ़्टवेयर के काम करने के तरीके को नहीं बदलता है और आपको केवल उस क्षेत्र का अनुमान दे रहा है जो आपके द्वारा तैयार किया गया आयत लेता है।

वेबसाइट के डिजाइन तत्वों की जांच करने के लिए उपयोगी उपकरण (और वेब डिजाइन के बारीक विवरण जानें)

हम शर्त लगाते हैं कि आपको आश्चर्य होगा जब आप देखेंगे कि ऑन-स्क्रीन कितने पिक्सेल हैं और हाइलाइट किए जाने पर वे किस क्षेत्र का निर्माण करते हैं। यदि और कुछ नहीं, तो उसे निश्चित रूप से "स्क्रीन रियल एस्टेट" शब्द को परिप्रेक्ष्य में रखना चाहिए।

निष्कर्ष

इन एक्सटेंशन से सर्वश्रेष्ठ प्राप्त करने में कुछ समय लगता है, लेकिन वे कुछ बेहतरीन जानकारी को आसान पहुंच में रखते हैं। आप जल्दी से उनके साथ पकड़ में आ जाएंगे, लेकिन अगर आपको फोंट को प्रतिस्थापित करना मुश्किल लगता है, तो याद रखें कि नाम सटीक होने चाहिए। "कॉमिक सैन्स" काम नहीं करेगा, जबकि "कॉमिक सैन्स एमएस" (जैसा कि यह कार्यालय में दिखाई देता है) काम करेगा।

याद रखें कि इन सभी एक्सटेंशन के लिए आपके द्वारा उन्हें दी जाने वाली जानकारी में इस प्रकार की सटीकता की आवश्यकता होती है, और आप उनका पूरा उपयोग करने के लिए सुसज्जित होंगे।


  1. बेरोजगारी को मात देने और अपने सपनों की नौकरी पाने के लिए उपयोगी तकनीकी उपकरण

    बेरोजगारी से निपटना कठिन है। संयुक्त राज्य में लगभग 4.9 प्रतिशत आबादी बेरोजगार है। कुछ डरावना सुनना चाहते हैं? उस संख्या में से लगभग 40 प्रतिशत अब काम की तलाश में नहीं हैं। यह निश्चित रूप से घटनाओं का एक हतोत्साहित करने वाला मोड़ है। हालांकि, यह निराशा का प्रतिनिधित्व नहीं करता है। क्या होगा अगर कु

  1. 3 दृष्टिबाधित और नेत्रहीन लोगों के लिए वेब ब्राउज़ करने के लिए नि:शुल्क टूल

    इंटरनेट सूचना के लिए सबसे अच्छी जगह है, और हर कोई इसका लाभ उठाने के अवसर का हकदार है। हालांकि, दृष्टिबाधित व्यक्ति या नेत्रहीन व्यक्ति के लिए वेब ब्राउज़ करना बहुत मुश्किल हो सकता है, और निश्चित रूप से वे किसी अन्य व्यक्ति की तरह इंटरनेट की दुनिया का पता लगाने के योग्य हैं। ऐसे कई टूल उपलब्ध हैं जो

  1. 5 सर्वश्रेष्ठ नि:शुल्क ऑफ़लाइन ब्राउज़र जो वेब सामग्री को ऑफ़लाइन देखने में आपकी सहायता करते हैं

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