सामग्री
- 01. दीपगृह
- 02. पॉलिमर
- 03. एपीआय एक्सप्लोरर
- 04. फडफड
- 05. गूगल गिटहब
- 06. कठपुतळी
- 07. वर्कबॉक्स
- 08. कोडलेब
- 09. रंग साधन
- 10. डिझाईन स्प्रिंट्स
- 11. लोक + एआय मार्गदर्शक
- 12. गूगल सहाय्यक
- 13. पेजस्पेड अंतर्दृष्टी
- 14. Google वर एएमपी
- 15. गूगल देवटूल
- 16. मटेरियल डिझाइन
वेबवर काम करण्याचा अर्थ सहसा असा होतो की आपण Google सह काही आकारात किंवा स्वरूपात काम करत असाल. आणि Google Chrome स्पर्धेच्या अगोदरचे मार्ग म्हणून पहात असल्याने डिझाइनर आणि विकसक ब्राउझरसह त्यांचे प्रकल्प कसे कार्य करतील याचा विचार करण्याची गरज आहे. ते कसे दिसेल? हे कोणत्या तंत्रज्ञानाचे समर्थन करते, ते किती सुरक्षित आहे आणि ते कसे कार्य करेल?
सुदैवाने, कोणतीही साइट किंवा अॅप सर्वोत्कृष्ट होईल याची खात्री करण्यासाठी Chrome साधने प्रदान करते. डेव्हटूल डिझाइनर आणि विकसकांना वेबपृष्ठाबद्दल अंतर्दृष्टी प्राप्त करण्यास सक्षम करतात: आपण डीओएममध्ये फेरफार करू शकता, सीएसएस तपासू शकता, थेट संपादनासह डिझाइनवर प्रयोग करू शकता, जावास्क्रिप्ट डीबग करू शकता आणि कार्यप्रदर्शन तपासू शकता. (ही Google वेब साधने कशी वापरायची याबद्दल येथे पहा आणि आपण सुरवातीपासून प्रारंभ करत असल्यास आमच्या शीर्ष वेब बिल्डर्सची सूची देखील पहा).
परंतु गुगल केवळ ब्राउझरपेक्षा अधिक ऑफर करते. आपल्याकडे आपल्या डिझाइन आणि विकास जीवनातील जवळजवळ प्रत्येक गोष्टीस मदत करण्यासाठी साधने आणि संसाधने आहेत. कामगिरी कशी सुधारली पाहिजे हे जाणून घेऊ इच्छिता? लाईटहाऊस मदतीसाठी येथे आहे. अधिक चांगले परफॉरमिंग मोबाइल साइट तयार करू इच्छिता? मग एएमपीला नमस्कार म्हणा. आपण सुंदर पीडब्ल्यूए तयार करण्याचा विचार करीत आहात? मग फडफड, मटेरियल डिझाइन आणि वर्कबॉक्स आत येण्यास तयार आहेत.
Google साधने, संसाधने, ग्रंथालये आणि फ्रेमवर्क वापरण्याचे सौंदर्य म्हणजे आपल्याला माहिती आहे की ते क्रोम ब्राउझरसह कार्य करतील - जी ग्रहातील सर्वात लोकप्रिय ब्राउझर आहे. अधिक साधनांसाठी आमची वेब डिझाइन टूल्स राऊंडअप पहा.
01. दीपगृह
साइटच्या यशस्वीतेसाठी कामगिरी हा मुख्य घटक आहे आणि वेबपृष्ठांची गुणवत्ता सुधारण्यासाठी लाइटहाउस हे गूगलचे साधन आहे (योग्य वेब होस्टिंग सेवा देखील मदत करेल). मग आपण लाइटहाउस कसे वापराल आणि ते काय करू शकेल? त्याच्या सर्वात सोप्या स्वरुपात, आपण ऑडिट टॅबमधून लाइटहाउस चालवू शकता आणि सूचित केलेल्या सुधारणांसह अंतिम अहवाल तयार करण्यासाठी कार्यप्रदर्शन, accessक्सेसीबीलिटी आणि एसईओ यासह टिक बॉक्सच्या व्यतिरिक्त डेस्कटॉप किंवा मोबाइलसह पर्यायांच्या निवडीमधून निवडू शकता.
02. पॉलिमर
पॉलिमर वेब घटकांसह त्यांच्या कार्यासाठी सुप्रसिद्ध आहे परंतु ग्रंथालये, साधने आणि मानकांच्या संग्रहात आता या प्रकल्पाचा विस्तार केला आहे. यात काय समाविष्ट आहे? लिटेलिमेंट हे एक संपादक आहे जे वेब घटकांची व्याख्या करणे सुलभ करते, तर लिट-एचटीएमएल एक एचटीएमएल टेंप्लेटिंग लायब्ररी आहे जी वापरकर्त्यांना जेएसमध्ये पुढील-जनरल एचटीएमएल टेम्प्लेट लिहिण्यास सक्षम करते. तसेच, आपल्याला पीडब्ल्यूए स्टार्टर किट, मूळ पॉलिमर लायब्ररी आणि वेब घटकांचे संच देखील आढळतील.
03. एपीआय एक्सप्लोरर
Google कडे विकसकांसाठी एपीआयची एक विस्तृत लायब्ररी उपलब्ध आहे परंतु आपल्याला जे आवश्यक आहे ते शोधणे सोपे काम नाही. येथूनच Google चे एपीआय एक्सप्लोरर मदतीचा हात देण्यासाठी ऑफर करते. एक मोठी यादी आहे ज्यातून स्क्रोल केली जाऊ शकते परंतु द्रुत प्रवेशासाठी, एपीआय सूची फिल्टर करण्यासाठी एक शोध बॉक्स आहे. एपीआय कसे वापरावे यावरील अधिक तपशीलांसह प्रत्येक प्रविष्टी संदर्भ पृष्ठाशी दुवा साधते.
04. फडफड
आपण एकाच कोडबेसवरून मोबाईल, वेब आणि डेस्कटॉपसाठी चांगले दिसणारे अनुप्रयोग तयार करण्याचा विचार करत असाल तर आपल्यासाठी फडफडू शकते. साइट फडफड्यांसह काम करण्यास आणि तयार करण्याचा संपूर्ण संदर्भ आहे. काय करावे याचा सुगावा लागला नाही का? दस्तऐवज वापरकर्त्यास स्थापनेपासून निर्मितीपर्यंत, भरपूर नमुने आणि शिकवण्या देऊन सहाय्य करतात.
05. गूगल गिटहब
बहुतेकांना माहित असेलच की कोड आणि फाइल्स संग्रहित आणि सामायिक करण्यासाठी गिटहब एक होस्टिंग प्लॅटफॉर्म / रेपॉजिटरी आहे. आणि आनंदाने गूगलच्या व्यासपीठावर त्याचे स्वतःचे स्थान आहे ज्यामध्ये सुमारे 260 रेपॉजिटरीज आहेत. आपल्या शोध वेळेत कपात करण्यासाठी फिल्टरचा वापर करा आणि आपण ज्या प्ले करू इच्छिता त्यामध्ये किंवा आपण योगदान देऊ इच्छित असलेल्या रेपॉजिटरीच्या जवळ जा.
06. कठपुतळी
नोडमध्ये अंगभूत, पप्पीटीर एक उच्च-स्तरीय एपीआय ऑफर करते जे आपल्याला हेडलेस क्रोममध्ये प्रवेश करण्यास सक्षम करते - प्रभावीपणे यूआयशिवाय Chrome, जे विकासक नंतर कमांड लाइनद्वारे नियंत्रित करू शकतात. तर आपण पप्पेटियरसह काय करू शकता? पृष्ठांचे स्क्रीनशॉट आणि पीडीएफ तयार करणे, फॉर्म सबमिशन स्वयंचलित करणे आणि स्वयंचलित चाचणी वातावरण तयार करण्यासाठी काही पर्याय उपलब्ध आहेत.
07. वर्कबॉक्स
जर आपण पीडब्ल्यूए तयार करू इच्छित असाल तर हा एक प्रारंभिक बिंदू आहे. वर्कबॉक्स वेब अ‍ॅप्सवर ऑफलाइन समर्थन जोडण्यासाठी जावास्क्रिप्ट लायब्ररीचा संग्रह प्रदान करतो. सखोल मार्गदर्शकांची निवड सर्व्हर वर्कर फाईल कशी तयार करावी आणि नोंदणी कशी करावी हे दर्शविते, मार्ग विनंत्या, प्लगइन वापरा आणि वर्कबॉक्ससह बंडलर कसे वापरावे. आणि तेथे तपासण्यासाठी कॅशिंग धोरणाचे उदाहरण देखील आहेत.
08. कोडलेब
Google उत्पादनासाठी व्यावहारिक मार्गदर्शनाची आवश्यकता आहे? कोडलेब्स “एक मार्गदर्शित, ट्यूटोरियल, हँड्स-ऑन कोडिंग अनुभव” प्रदान करतात. आपल्यास हवे असलेले शोधणे द्रुत आणि सुलभ बनवून ही साइट सुबकपणे श्रेणी आणि कार्यक्रमांमध्ये विभागली गेली आहे. यात अ‍ॅनालिटिक्स, अँड्रॉइड, सहाय्यक, संवर्धित वास्तव, फ्लटर, जी सूट, शोध, टेन्सरफ्लो आणि व्हर्च्युअल रिअलिटीचा समावेश आहे. एक पर्याय निवडा आणि आपल्याला लहान अनुप्रयोग तयार करण्यासाठी आवश्यक कोड आणि दिशानिर्देश मिळवा.
09. रंग साधन
कलर टूल हे एक सरळ साधन आहे जे आपल्याला प्रवेशयोग्यता तपासण्याव्यतिरिक्त पॅलेट तयार करण्यास, सामायिक करण्यास आणि लागू करण्यास सक्षम करते. मटेरियल पॅलेटमधून वापरकर्ते पूर्वनिर्धारित पॅलेट निवडू शकतात. फक्त रंग निवडा आणि नंतर तो प्राथमिक रंगसंगतीवर लागू करा, दुय्यम पर्यायावर स्विच करा आणि पुन्हा निवडा. शेवटी, दोन्ही योजनांसाठी मजकूर रंग निवडा. वैकल्पिकरित्या, आपले रंग निवडण्यासाठी सानुकूल वर स्विच करा. नंतर पॅलेट निर्यात करण्यापूर्वी सर्व काही चांगले आहे हे तपासण्यासाठी प्रवेशयोग्यतेवर स्विच करा.
10. डिझाईन स्प्रिंट्स
डिझाईन स्प्रिंट किट त्यांच्यासाठी आहे जे डिझाइन स्प्रिंटमध्ये कसे भाग घ्यावे किंवा कसे चालवायचे हे शिकत आहेत. हे प्रथम-वेळेपासून अनुभवी स्प्रिंट फॅसिलिटेटर्सपर्यंतच्या सर्व ज्ञानाच्या तळांवर कव्हर करते असे दिसते. कार्यपद्धती जाणून घ्या किंवा संक्षिप्त लेखन, डेटा गोळा करणे आणि संशोधन तसेच पोस्ट-स्प्रिंट काय करावे यासह थेट नियोजन टप्प्यात जा. साधने, टेम्पलेट्स, पाककृती आणि आपली स्वतःची पद्धत सबमिट करण्यासाठी पर्याय यासारख्या बर्‍याच संसाधनांचा समावेश आहे. तसेच, आपणास संसाधने संचयित करण्यासाठी आणि सामायिक करण्याची कुठेतरी आवश्यकता असेल जेणेकरून आपली मेघ संचयन निवड योग्य आहे हे सुनिश्चित करा.
11. लोक + एआय मार्गदर्शक
हे मार्गदर्शक Google वर लोक + एआय संशोधन उपक्रमाचे कार्य आहे आणि मानवी-केंद्रीत एआय उत्पादने तयार करू इच्छिणा .्यांना मदतीची अपेक्षा करीत आहे. वापरकर्त्याची आवश्यकता, डेटा संग्रहण आणि मूल्यमापन, मानसिक मॉडेल्स, विश्वास, अभिप्राय आणि आकर्षक अपयश या विषयावर विस्तृत मार्गदर्शक पुस्तिका सहा अध्यायांमध्ये विभागली गेली आहे. प्रत्येक अध्यायात व्यायाम, कार्यपत्रके आणि ती करण्यासाठी आवश्यक साधने आणि स्त्रोत आहेत.
12. गूगल सहाय्यक
हे Google सहाय्यकाचे विकसक व्यासपीठ आहे, आपली सामग्री आणि सेवा Google सहाय्यकासह समाकलित कसे करावे याबद्दल मार्गदर्शन प्रदान करते. हे आपले मोबाइल अॅप कसे वाढवायचे, शोध आणि सहाय्यकासाठी समृद्ध मार्गाने सामग्री सादर करणे, कंट्रोल लाइट्स, कॉफी मशीन आणि घराच्या आसपासची इतर साधने आणि स्मार्ट स्पीकर्स, प्रदर्शन आणि फोनसाठी व्हॉईस आणि व्हिज्युअल अनुभव कसे तयार करावे हे दर्शविते.
13. पेजस्पेड अंतर्दृष्टी
पेजस्पेड अंतर्दृष्टी वेब सामग्रीचे विश्लेषण करते आणि नंतर त्यास अधिक वेगाने कसे लोड करावे याबद्दल सल्ले देतात. फक्त एक URL जोडा, विश्लेषण बटण दाबा आणि जादू होण्याची प्रतीक्षा करा. पेजस्पेड एपीआय कार्य कसे करते आणि त्याचा वापर कसा सुरू करावा याविषयी अधिक अंतर्दृष्टी मिळविण्यासाठी दस्तऐवज तपासा.
14. Google वर एएमपी
एएमपी हे वेगवान-लोड मोबाइल पृष्ठे तयार करण्याचे Google चे एक साधन आहे (जे आशेने) शोध रँकिंगच्या शीर्षस्थानी जाईल. वेगवान, वापरकर्ता-प्रथम साइट्स तयार कसे करावे, Google उत्पादनांमध्ये एएमपी समाकलित कसे करावे, एएमपी पृष्ठे जलद बनविण्यासाठी Google एएमपी कॅशे वापरा आणि इतर Google उत्पादनांसह एएमपी पृष्ठे मुद्रित करा.
15. गूगल देवटूल
प्रत्येक डिझाइनर आणि विकसकाला माहित आहे (किंवा कमीतकमी माहित असावे) की Chrome थेट ब्राउझरमध्ये तयार केलेल्या साधनांच्या संचासह येतो. एखादे पृष्ठ तयार करणार्‍या घटकांची तपासणी करण्यासाठी, सीएसएस तपासण्यासाठी, माशीवर पृष्ठांचे संपादन करण्यास आणि बरेच काही करण्यासाठी Chrome ची DevTools आदर्श आहेत.
एलिमेंट्स टॅब हे डेवूलसची ओळख आहे. हे एचटीएमएल कोड प्रदर्शित करते जे निवडलेले पृष्ठ बनवते. निवडलेल्या पृष्ठावरून प्रत्येक डिव्ह किंवा टॅगच्या गुणधर्मांची अंतर्दृष्टी मिळवा आणि थेट संपादन प्रारंभ करा. हे डिझाइनसह प्रयोग करण्यासाठी योग्य आहे. लेआउट तपासा - आपण फ्लेक्सबॉक्स किंवा ग्रिड वापरत असाल किंवा नाही - आणि उदाहरणासह संबंधित फॉन्टकडे लक्ष द्या आणि अ‍ॅनिमेशनची तपासणी करा.
इतरत्र, आपण सीएसएस पाहू आणि बदलू शकता. एलिमेंट्स पॅनेलवरील स्टाईल टॅब, डीओएम ट्रीमध्ये सध्या निवडलेल्या घटकांना लागू असलेल्या सीएसएस नियमांची यादी करतो. डिझाइनसह प्रयोग करण्यासाठी गुणधर्म चालू आणि बंद (किंवा नवीन मूल्ये जोडा) स्विच करा. थेट डिझाइनमध्ये कोणतेही बदल लागू करण्यापूर्वी प्रत्येक गोष्ट अपेक्षेप्रमाणे कार्य करते याची खात्री करण्यासाठी हे एक अचूक साधन आहे.
आपण जावास्क्रिप्ट डीबग करू शकता, वेबसाइट वेग अनुकूल करू शकता आणि नेटवर्क गतीची तपासणी करू शकता. आपला कार्यप्रवाह त्वरित गतिमान करण्यासाठी आपण वापरू शकता ही एक द्रुत टिप. स्त्रोत टॅबकडे जा, नवीन स्निपेट क्लिक करा आणि वारंवार वापरलेला कोड जोडा. कोड स्निपेटला नाव द्या आणि सेव्ह करा. आवश्यकतेनुसार पुन्हा करा. आता आपण हा कोड स्निपेट पुन्हा लिहिण्याऐवजी हस्तगत करू शकता.
प्रत्येक चांगल्या ब्राउझरप्रमाणेच, Chrome सतत विकसित होत आहे आणि प्रत्येक नवीन रिलीझमध्ये नवीन वैशिष्ट्ये आणली जातात. Chrome स्थिती प्लॅटफॉर्मवर काय चालले आहे ते शोधा
16. मटेरियल डिझाइन
विकासास Google चे आवडते मूल म्हणून पाहिले जाऊ शकते परंतु आपण जे काही बनवित आहात, तयार करीत किंवा तयार करीत आहात, त्यास चांगले दिसणे आवश्यक आहे आणि वापरकर्त्यास एक अनुभव देणे आवश्यक आहे ज्यामुळे ते त्याचा वापर करू इच्छितात. मटेरियल ही गूगल स्थिरतेत अगदी अलीकडील व्यतिरिक्त आहे परंतु एक डिझाइन सिस्टम आहे जी डिझाइन किटच्या महत्त्वपूर्ण तुकड्यात परिपक्व झाली आहे.
कोणत्याही चांगल्या डिझाइन सिस्टमप्रमाणेच, त्याकडे स्वतःचे मार्गदर्शक तत्त्वांचा सेट आहे, ज्यास आपण अधिक रोमांचक सामग्रीमध्ये जाण्यापूर्वी पाहणे आवश्यक आहे. भिन्न घटक कसे वापरावे, मटेरियल थिसिंग काय आहे, थीम कशी अंमलात आणावी आणि accessक्सेसीबीलिटीसह वापरण्यायोग्य मार्गदर्शकाचे विहंगावलोकन मिळवा. इतरत्र, मटेरियल फाऊंडेशनची अंतर्दृष्टी आहे, ज्यात लेआउट, नेव्हिगेशन, रंग, टायपोग्राफी, ध्वनी, प्रतिकृति, गती आणि परस्परसंवाद यासारख्या डिझाइनची प्रमुख क्षेत्रे समाविष्ट आहेत. प्रत्येक श्रेणी त्याचे कार्य आणि काय करीत नाही आणि जेथे आपण सावधगिरी बाळगणे आवश्यक आहे हे प्रकट करते. काय अपेक्षित करावे याची कल्पना देण्यासाठी लेआउट श्रेणी समजून घेणारा लेआउट, पिक्सेल डेन्सिटी, कॉलम, गटर्स आणि समास, ब्रेकपॉइंट्स, यूआय क्षेत्रे आणि नावे ठेवण्यासाठी असलेल्या स्पेसिंग पद्धती यासहित प्रतिसाद लेआउटसह कसे कार्य करावे हे समजून घेण्याचे विभाग देते.
डिझाईन विभागाच्या पलीकडे घटक आहेत, जे डिझाइन तयार करण्यासाठी आवश्यक भौतिक इमारत ब्लॉक्स प्रदान करतात. येथे काय समाविष्ट आहे? बटणे, बॅनर, कार्डे, संवाद, डिव्हिडर्स, याद्या, मेनू, प्रगती निर्देशक, स्लाइडर, स्नॅकबार (स्क्रीनच्या तळाशी असलेल्या अॅप प्रक्रियेबद्दलचे हे संक्षिप्त संदेश आहेत), टॅब, मजकूर फील्ड आणि टूलटिप्स. निःसंशयपणे घटकांचे विस्तृत संग्रह.
अँड्रॉइड, आयओएस, वेब आणि फडफडय़ा विविध प्लॅटफॉर्मवर कसे तयार करावे याबद्दल तपशील आणि प्रशिक्षणांसह डेव्हलपर विसरले नाहीत. आणि अखेरीस, तेथे एक पृष्ठ आहे जे आपल्या निवडलेल्या डिझाइनला मदत करण्यासाठी अनेक स्रोतांना समर्पित आहे.
हा लेख मूळतः नेट मासिकात आला. अंक 326 खरेदी करा.
