विषय
- 01. प्रकाशस्तंभ
- 02. पॉलिमर
- 03. एपीआई एक्सप्लोरर
- 04. स्पंदन
- 05. गूगल गिटहब
- 06. कठपुतली
- 07. वर्कबॉक्स
- 08. कोडलैब्स
- 09. रंग उपकरण
- 10. डिजाइन स्प्रिंट
- 11. लोग + एआई गाइडबुक
- 12. गूगल असिस्टेंट
- 13. पेजस्पीड इनसाइट्स
- 14. गूगल पर एएमपी
- 15. Google DevTools
- 16. सामग्री डिजाइन
वेब पर काम करने का आमतौर पर मतलब होता है कि आप किसी न किसी रूप में Google के साथ काम कर रहे होंगे। और यह देखते हुए कि Google क्रोम प्रतिस्पर्धा से आगे है, डिजाइनरों और डेवलपर्स को यह सोचने की जरूरत है कि उनका प्रोजेक्ट ब्राउज़र के साथ कैसे काम करेगा। यह कैसा दिखेगा? यह किन तकनीकों का समर्थन करता है, यह कितना सुरक्षित है और यह कैसा प्रदर्शन करेगा?
सौभाग्य से, क्रोम यह सुनिश्चित करने के लिए टूल प्रदान करता है कि कोई भी साइट या ऐप अपने सर्वोत्तम स्तर पर होगा। DevTools डिजाइनरों और डेवलपर्स को वेब पेज में अंतर्दृष्टि प्राप्त करने में सक्षम बनाता है: आप DOM में हेरफेर कर सकते हैं, CSS की जांच कर सकते हैं, लाइव एडिटिंग के साथ डिज़ाइन पर प्रयोग कर सकते हैं, जावास्क्रिप्ट को डीबग कर सकते हैं और प्रदर्शन की जांच कर सकते हैं। (यहां इन Google वेब टूल का उपयोग करने के तरीके के बारे में और देखें, और यदि आप स्क्रैच से शुरू कर रहे हैं तो हमारी शीर्ष वेब बिल्डरों की सूची भी देखें)।
लेकिन Google केवल ब्राउज़र से कहीं अधिक प्रदान करता है। आपके डिजाइन और विकास जीवन के लगभग हर पहलू की सहायता के लिए इसमें उपकरण और संसाधन हैं। जानना चाहते हैं कि प्रदर्शन में सुधार कैसे करें? प्रकाशस्तंभ यहाँ मदद करने के लिए है। बेहतर प्रदर्शन करने वाली मोबाइल साइट बनाना चाहते हैं? फिर एएमपी को नमस्ते कहें। क्या आप सुंदर PWA बनाना चाहते हैं? फिर स्पंदन, सामग्री डिजाइन और वर्कबॉक्स में कदम रखने के लिए तैयार हैं।
Google टूल्स, संसाधनों, पुस्तकालयों और ढांचे का उपयोग करने की सुंदरता यह है कि आप जानते हैं कि वे क्रोम ब्राउज़र के साथ अच्छी तरह से काम करेंगे - ग्रह पर सबसे लोकप्रिय ब्राउज़र। अधिक टूल के लिए, हमारे वेब डिज़ाइन टूल राउंडअप देखें।
01. प्रकाशस्तंभ
साइट की सफलता में प्रदर्शन एक महत्वपूर्ण कारक है और वेब पेजों की गुणवत्ता में सुधार के लिए लाइटहाउस Google का टूल है (सही वेब होस्टिंग सेवा भी मदद करेगी)। तो आप लाइटहाउस का उपयोग कैसे करते हैं और यह क्या कर सकता है? इसके सरलतम रूप में, आप ऑडिट टैब से लाइटहाउस चला सकते हैं और सुझाए गए सुधारों के साथ अंतिम रिपोर्ट तैयार करने के लिए, प्रदर्शन, पहुंच और एसईओ के लिए टिक बॉक्स के अलावा, डेस्कटॉप या मोबाइल सहित विकल्पों के चयन में से चुन सकते हैं।
02. पॉलिमर
पॉलिमर वेब घटकों के साथ अपने काम के लिए प्रसिद्ध है, लेकिन परियोजना ने अब पुस्तकालयों, उपकरणों और मानकों के संग्रह को अपनाने के लिए अपने प्रदर्शनों की सूची का विस्तार किया है। क्या शामिल है? LitElement एक संपादक है जो वेब घटकों को परिभाषित करना आसान बनाता है, जबकि lit-html एक HTML टेम्प्लेटिंग लाइब्रेरी है जो उपयोगकर्ताओं को JS में नेक्स्ट-जेन HTML टेम्प्लेट लिखने में सक्षम बनाता है। साथ ही, आपको एक PWA स्टार्टर किट, मूल पॉलिमर लाइब्रेरी और वेब घटकों के सेट भी मिलेंगे।
03. एपीआई एक्सप्लोरर
Google के पास डेवलपर्स के लिए एपीआई की एक विशाल लाइब्रेरी उपलब्ध है लेकिन आपको जो चाहिए वह ढूंढना कोई आसान काम नहीं है। यह वह जगह है जहां Google का एपीआई एक्सप्लोरर मदद के लिए हाथ बढ़ाता है। एक लंबी सूची है जिसे स्क्रॉल किया जा सकता है लेकिन, त्वरित पहुंच के लिए, एपीआई सूची को फ़िल्टर करने के लिए एक खोज बॉक्स है। प्रत्येक प्रविष्टि एक संदर्भ पृष्ठ से लिंक करती है जिसमें एपीआई का उपयोग करने के तरीके के बारे में अधिक विवरण होता है।
04. स्पंदन
यदि आप एक ही कोडबेस से मोबाइल, वेब और डेस्कटॉप के लिए अच्छे दिखने वाले एप्लिकेशन बनाना चाहते हैं तो फ़्लटर आपके लिए हो सकता है। साइट स्पंदन के साथ काम करने और निर्माण करने के लिए एक पूर्ण संदर्भ है। क्या करना है कोई सुराग नहीं मिला? दस्तावेज़ उपयोगकर्ता को स्थापना से निर्माण तक ले जाते हैं, जिसमें बहुत सारे नमूने और ट्यूटोरियल होते हैं।
05. गूगल गिटहब
जैसा कि ज्यादातर लोग जानते होंगे, GitHub कोड और फाइलों को स्टोर और शेयर करने के लिए होस्टिंग प्लेटफॉर्म/रिपॉजिटरी है। और खुशी की बात यह है कि 260 से अधिक रिपॉजिटरी के माध्यम से झारने के लिए Google के पास प्लेटफ़ॉर्म पर अपना स्थान है। अपने खोज समय को कम करने के लिए फ़िल्टर का उपयोग करें और उस रिपॉजिटरी के करीब पहुंचें जिसके साथ आप खेलना चाहते हैं या इसमें योगदान करना चाहते हैं।
06. कठपुतली
नोड में निर्मित, कठपुतली एक उच्च-स्तरीय एपीआई प्रदान करता है जो आपको हेडलेस क्रोम तक पहुंचने में सक्षम बनाता है - प्रभावी रूप से यूआई के बिना क्रोम, जिसे डेवलपर्स कमांड लाइन के माध्यम से नियंत्रित कर सकते हैं। तो आप कठपुतली के साथ क्या कर सकते हैं? पृष्ठों के स्क्रीनशॉट और पीडीएफ बनाने, फॉर्म जमा करने को स्वचालित करने और एक स्वचालित परीक्षण वातावरण बनाने के लिए कुछ विकल्प उपलब्ध हैं।
07. वर्कबॉक्स
अगर आप PWA बनाना चाहते हैं तो यह एक बेहतरीन शुरुआत है। वेब ऐप्स में ऑफ़लाइन समर्थन जोड़ने के लिए वर्कबॉक्स जावास्क्रिप्ट पुस्तकालयों का एक संग्रह प्रदान करता है। गहन गाइडों का चयन प्रदर्शित करता है कि सेवा कार्यकर्ता फ़ाइल कैसे बनाएं और पंजीकृत करें, रूट अनुरोध, प्लगइन्स का उपयोग करें और वर्कबॉक्स के साथ बंडलर का उपयोग करें। और चेक आउट करने के लिए उदाहरण कैशिंग रणनीतियों का एक सेट भी है।
08. कोडलैब्स
Google उत्पाद के लिए व्यावहारिक मार्गदर्शन की आवश्यकता है? कोडलैब्स "एक निर्देशित, ट्यूटोरियल, व्यावहारिक कोडिंग अनुभव" प्रदान करता है। साइट को बड़े करीने से श्रेणियों और घटनाओं में विभाजित किया गया है, जिससे आप जो चाहते हैं उसे ढूंढना त्वरित और आसान हो गया है। इसमें एनालिटिक्स, एंड्रॉइड, असिस्टेंट, ऑगमेंटेड रियलिटी, स्पंदन, जी सूट, सर्च, टेंसरफ्लो और वर्चुअल रियलिटी शामिल हैं। एक विकल्प चुनें और छोटे एप्लिकेशन बनाने के लिए आवश्यक कोड और दिशा-निर्देश प्राप्त करें।
09. रंग उपकरण
कलर टूल एक सीधा सा टूल है जो आपको एक्सेसिबिलिटी की जांच के अलावा पैलेट बनाने, साझा करने और लागू करने में सक्षम बनाता है। उपयोगकर्ता सामग्री पैलेट से एक पूर्वनिर्धारित पैलेट चुन सकते हैं। बस एक रंग चुनें और फिर इसे प्राथमिक रंग योजना पर लागू करें, द्वितीयक विकल्प पर स्विच करें और फिर से चुनें। अंत में, दोनों योजनाओं के लिए टेक्स्ट रंग चुनें। वैकल्पिक रूप से, अपने रंग चुनने के लिए कस्टम पर स्विच करें। फिर पैलेट को निर्यात करने से पहले, सब कुछ अच्छा है, यह जांचने के लिए एक्सेसिबिलिटी पर स्विच करें।
10. डिजाइन स्प्रिंट
डिज़ाइन स्प्रिंट किट उन लोगों के लिए है जो डिज़ाइन स्प्रिंट में भाग लेना या चलाना सीख रहे हैं। यह फर्स्ट-टाइमर से लेकर अनुभवी स्प्रिंट फैसिलिटेटर तक सभी ज्ञानकोषों को कवर करता है। कार्यप्रणाली के बारे में जानें या सीधे नियोजन चरण में कूदें, जिसमें संक्षेप लिखना, डेटा एकत्र करना और शोध करना, साथ ही स्प्रिंट के बाद क्या करना है। इसमें कई संसाधन जैसे टूल, टेम्प्लेट, रेसिपी और अपनी खुद की विधि सबमिट करने का विकल्प भी शामिल है। इसके अलावा, आपको संसाधनों को स्टोर करने और साझा करने के लिए कहीं और की आवश्यकता होगी, इसलिए सुनिश्चित करें कि आपकी क्लाउड स्टोरेज पसंद बिंदु पर है।
11. लोग + एआई गाइडबुक
यह मार्गदर्शिका Google में People+AI अनुसंधान पहल का कार्य है और मानव-केंद्रित AI उत्पाद बनाने के इच्छुक लोगों को सहायता प्रदान करने की कोशिश करती है। व्यापक गाइडबुक उपयोगकर्ता की जरूरतों, डेटा संग्रह और मूल्यांकन, मानसिक मॉडल, विश्वास, प्रतिक्रिया और सुंदर विफलता को कवर करते हुए छह अध्यायों में विभाजित है। प्रत्येक अध्याय के साथ अभ्यास, कार्यपत्रक और इसे पूरा करने के लिए आवश्यक उपकरण और संसाधन हैं।
12. गूगल असिस्टेंट
यह Google Assistant का डेवलपर प्लेटफ़ॉर्म है, जो आपकी सामग्री और सेवाओं को Google Assistant के साथ एकीकृत करने के बारे में एक गाइड पेश करता है। यह आपको दिखाता है कि आप अपने मोबाइल ऐप का विस्तार कैसे करें, खोज और सहायक के लिए समृद्ध तरीके से सामग्री प्रस्तुत करें, रोशनी, कॉफी मशीन और घर के अन्य उपकरणों को नियंत्रित करें और स्मार्ट स्पीकर, डिस्प्ले और फोन के लिए आवाज और दृश्य अनुभव बनाएं।
13. पेजस्पीड इनसाइट्स
PageSpeed Insights वेब सामग्री का विश्लेषण करती है और फिर इसे तेजी से लोड करने के तरीके के बारे में सुझाव देती है। बस एक यूआरएल जोड़ें, विश्लेषण बटन दबाएं और जादू होने की प्रतीक्षा करें। पेजस्पीड एपीआई कैसे काम करता है और इसका उपयोग कैसे शुरू करें, इस बारे में बेहतर जानकारी प्राप्त करने के लिए दस्तावेज़ देखें।
14. गूगल पर एएमपी
एएमपी तेजी से लोड होने वाले मोबाइल पेज बनाने के लिए Google का टूल है जो (उम्मीद है) खोज रैंकिंग के शीर्ष पर पहुंच जाएगा। तेज़, उपयोगकर्ता-प्रथम साइटें बनाना सीखें, AMP को सभी Google उत्पादों में एकीकृत करें, AMP पृष्ठों को तेज़ बनाने के लिए Google AMP कैश का उपयोग करें और अन्य Google उत्पादों के साथ AMP पृष्ठों का मुद्रीकरण करें।
15. Google DevTools
प्रत्येक डिज़ाइनर और डेवलपर जानता है (या कम से कम पता होना चाहिए) कि क्रोम सीधे ब्राउज़र में निर्मित उपकरणों के एक सेट के साथ आता है। Chrome के DevTools उन तत्वों का निरीक्षण करने के लिए आदर्श हैं जो एक पृष्ठ बनाते हैं, CSS की जाँच करते हैं, मक्खी पर पृष्ठों को संपादित करते हैं और बहुत कुछ।
तत्व टैब DevTools का परिचय है। यह HTML कोड प्रदर्शित करता है जो चयनित पृष्ठ को बनाता है। चयनित पृष्ठ से प्रत्येक div या टैग के गुणों के बारे में जानकारी प्राप्त करें और लाइव संपादन प्रारंभ करें। यह डिजाइनों के साथ प्रयोग करने के लिए एकदम सही है। लेआउट की जांच करें - चाहे आप फ्लेक्सबॉक्स या ग्रिड का उपयोग कर रहे हों - और उदाहरणों के साथ संबंधित फोंट पर एक नज़र डालें और एनिमेशन की जांच करें।
कहीं और, आप CSS को देख और बदल सकते हैं। एलिमेंट्स पैनल पर स्टाइल्स टैब, DOM ट्री में वर्तमान में चुने गए एलिमेंट पर लागू होने वाले CSS नियमों को सूचीबद्ध करता है। डिज़ाइन के साथ प्रयोग करने के लिए गुणों को चालू और बंद करें (या नए मान जोड़ें)। यह सुनिश्चित करने के लिए एकदम सही उपकरण है कि लाइव डिज़ाइन में कोई भी बदलाव लागू करने से पहले सब कुछ अपेक्षित रूप से काम करता है।
आप जावास्क्रिप्ट को डिबग भी कर सकते हैं, वेबसाइट की गति को अनुकूलित कर सकते हैं और नेटवर्क की गति का निरीक्षण कर सकते हैं। यहां एक त्वरित युक्ति है जिसका उपयोग आप अपने कार्यप्रवाह को तुरंत तेज करने के लिए कर सकते हैं। स्रोत टैब पर जाएं, नया स्निपेट क्लिक करें और अक्सर उपयोग किए जाने वाले कोड जोड़ें। कोड स्निपेट को नाम दें और सेव करें। आवश्यकतानुसार दोहराएं। अब आप इसे फिर से लिखने के बजाय इस कोड स्निपेट को पकड़ सकते हैं।
हर अच्छे ब्राउज़र की तरह, क्रोम लगातार विकसित हो रहा है और प्रत्येक नई रिलीज़ नई सुविधाएँ लाती है। जानें कि Chrome स्थिति प्लेटफ़ॉर्म पर क्या हो रहा है
16. सामग्री डिजाइन
विकास को Google के पसंदीदा बच्चे के रूप में देखा जा सकता है लेकिन, आप जो कुछ भी बना रहे हैं, बना रहे हैं या निर्माण कर रहे हैं, उसे अच्छा दिखना चाहिए और उपयोगकर्ता को एक ऐसा अनुभव देना चाहिए जिससे वे इसका उपयोग करना चाहें। सामग्री Google स्थिर के लिए हाल ही में जोड़ा गया है, लेकिन यह एक डिज़ाइन सिस्टम है जो डिज़ाइन किट के एक महत्वपूर्ण टुकड़े में परिपक्व हो गया है।
किसी भी अच्छी डिजाइन प्रणाली की तरह, इसके अपने दिशा-निर्देश हैं, जिन्हें आपको अधिक रोमांचक चीजों में कदम रखने से पहले देखने की जरूरत है। विभिन्न तत्वों का उपयोग कैसे करें, सामग्री थीम क्या है, थीम को कैसे लागू करें और एक्सेसिबिलिटी सहित उपयोगिता गाइड का अवलोकन प्राप्त करें। कहीं और, सामग्री फाउंडेशन में एक अंतर्दृष्टि है, जिसमें लेआउट, नेविगेशन, रंग, टाइपोग्राफी, ध्वनि, आइकनोग्राफी, गति और बातचीत जैसे डिजाइन के प्रमुख क्षेत्र शामिल हैं। प्रत्येक श्रेणी अपने क्या करें और क्या न करें का खुलासा करती है और आपको कहां सावधानी बरतनी चाहिए। क्या उम्मीद की जाए, इसका अंदाजा लगाने के लिए, लेआउट श्रेणी लेआउट, पिक्सेल घनत्व, कॉलम, गटर और मार्जिन, ब्रेकप्वाइंट, यूआई क्षेत्रों और नाम के लिए रिक्ति विधियों सहित एक उत्तरदायी लेआउट के साथ कैसे काम करें, पर अनुभाग प्रदान करती है।
डिज़ाइन अनुभाग से परे घटक है, जो डिज़ाइन बनाने के लिए आवश्यक भौतिक बिल्डिंग ब्लॉक प्रदान करता है। यहाँ क्या शामिल है? बटन, बैनर, कार्ड, डायलॉग, डिवाइडर, सूचियां, मेनू, प्रगति संकेतक, स्लाइडर, स्नैकबार (ये स्क्रीन के निचले भाग में ऐप प्रक्रियाओं के बारे में संक्षिप्त संदेश हैं), टैब, टेक्स्ट फ़ील्ड और टूलटिप्स। निस्संदेह घटकों का एक व्यापक संग्रह।
और विभिन्न प्लेटफार्मों - एंड्रॉइड, आईओएस, वेब और स्पंदन के निर्माण के बारे में विवरण और ट्यूटोरियल के साथ, डेवलपर्स को नहीं भुलाया गया है। और, अंत में, आपके चुने हुए डिज़ाइन को बनाने में मदद करने के लिए संसाधनों के एक मेजबान को समर्पित एक पृष्ठ है।
यह लेख मूल रूप से नेट पत्रिका में छपा था। इश्यू खरीदें 326.
