1. शुरू करने से पहले
इस कोडलैब में, Gemini Code Assist की मदद से किसी वेबसाइट पर मटीरियल डिज़ाइन लागू करने का तरीका बताया गया है. मटीरियल डिज़ाइन लागू करने के बाद, डिज़ाइन को बेहतर बनाया जाएगा. साथ ही, लोगों के अनुभव को बेहतर बनाने और नई सुविधाएं जोड़ने के लिए, उसमें बदलाव किए जाएंगे. इस वर्कशॉप के आखिर तक, आपके पास Gemini की मदद से, मटीरियल डिज़ाइन या उससे मिलती-जुलती लाइब्रेरी का इस्तेमाल करके, इस्तेमाल में आसान और लोगों के लिए काम के वेब पेज बनाने की क्षमता होगी. इसके लिए, आपको सीएसएस लिखने की ज़रूरत नहीं होगी.
ज़रूरी शर्तें
- एचटीएमएल, सीएसएस, और JavaScript की जानकारी
- वेब डिज़ाइन की बुनियादी जानकारी
आपको ये सब सीखने को मिलेगा
- Gemini Code Assist की मदद से, स्टाइलिंग लाइब्रेरी लागू करने का तरीका
- सीएसएस में मैन्युअल तरीके से बदलाव करने के बजाय, Gemini Code Assist की मदद से डिज़ाइन को बेहतर बनाने का तरीका
- अपनी पसंद की स्टाइल में कोड जनरेट करने के लिए, Gemini Code Assist को असरदार तरीके से प्रॉम्प्ट करने का तरीका
आपको इन चीज़ों की ज़रूरत पड़ेगी
- Google Cloud प्रोजेक्ट का ऐक्सेस. इसमें, Google Cloud के लिए Gemini की सुविधा चालू हो
- स्टाइल करने के लिए कोई वेब पेज या कम से कम कोई ऐसा फ़ोल्डर जिसमें वेब पेज बनाया जा सके
2. सेटअप
इस कोडलैब के लिए, दो चीज़ें ज़रूरी हैं: Gemini की सुविधा चालू वाले Google Cloud प्रोजेक्ट का ऐक्सेस और स्टाइल करने के लिए कोई वेब पेज. किसी नए प्रोजेक्ट में Gemini की सुविधा चालू करने के लिए, Cloud Console में सबसे ऊपर दाईं ओर मौजूद Gemini बटन पर क्लिक करें. इसके बाद, नीचे दिए गए पैनल में, 'चालू करें' पर क्लिक करें.
स्टाइल करने के लिए, आपके पास मौजूद कोई भी वेब पेज इस्तेमाल किया जा सकता है. इसके अलावा, Gemini की सुविधा चालू होने की वजह से, उससे आपके लिए कोई वेब पेज जनरेट करने के लिए कहा जा सकता है. अगर Gemini को Write me a web page with a form to gather profile information जैसा अनुरोध भेजा जाता है, तो नतीजा कुछ ऐसा दिखेगा:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
3. मटीरियल डिज़ाइन लागू करना
सबसे पहले, Gemini से हमारे वेब पेज पर मटीरियल डिज़ाइन लागू करने के लिए कहें. इसके लिए, इस तरह का प्रॉम्प्ट इस्तेमाल करें:Can you apply material design styles to this page?
ध्यान दें: इस कोडलैब में दिए गए सभी प्रॉम्प्ट, उदाहरण के तौर पर दिए गए हैं. इन्हें अपने प्रॉम्प्ट के लिए प्रेरणा के तौर पर इस्तेमाल किया जा सकता है. साथ ही, बेहतर नतीजे पाने के लिए, अपने प्रोजेक्ट के हिसाब से कॉन्टेक्स्ट शामिल करें.
जवाब कुछ ऐसा होना चाहिए:
इस लैब के लिए, मटीरियल डिज़ाइन का इस्तेमाल किया गया है. हालांकि, Gemini से अपनी पसंद की लाइब्रेरी लागू करने के लिए कहा जा सकता है. अगर Gemini, मटीरियल का कोई ऐसा वर्शन इंपोर्ट करता है जो आपकी उम्मीद के मुताबिक नहीं है, तो अपने प्रॉम्प्ट में, अपनी पसंद का वर्शन डालें.
4. डिज़ाइन को बेहतर बनाना
Gemini, किसी वेब पेज के डिज़ाइन को बेहतर बनाने में भी आपकी मदद कर सकता है. इसके लिए, आपको सीएसएस में मैन्युअल तरीके से बदलाव करने की ज़रूरत नहीं होगी. Gemini से इस डिज़ाइन को बेहतर बनाने के लिए कहने के लिए, अपना प्रॉम्प्ट बनाएं. इस तरह के टास्क में बेहतर नतीजे पाने के लिए, उन एलिमेंट के बारे में बताएं जिनमें आपको बदलाव करना है. साथ ही, उनके लिए अपनी पसंद के नतीजे के बारे में भी कम शब्दों में बताएं:
Can we center the content on this page?
Gemini से हमारे पेज में काम के एलिमेंट भी जोड़े जा सकते हैं. Gemini से फ़ॉर्म में ज़्यादा फ़ील्ड जोड़ने या कोई अतिरिक्त सुविधा जोड़ने के लिए कहें:
Can we add some more fields to this form, like phone number, email address?
5. संगठन
Gemini से, नतीजों को हमारे प्रोजेक्ट के लिए सबसे सही जगह पर व्यवस्थित करने के लिए भी कहा जा सकता है. इस मामले में, हमारा मकसद इस फ़ाइल में डिज़ाइन को बेहतर बनाना है. इसलिए, style टैग सबसे सही है. Gemini से, अपने जवाबों को स्टाइल टैग में रखने के लिए कहें, ताकि आपको एक साथ कई बदलाव न करने पड़ें:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. सुलभता
मटीरियल डिज़ाइन में बताया गया है कि सुलभता और इस्तेमाल में आसानी, डिज़ाइन के ज़रूरी एलिमेंट हैं. इसे ध्यान में रखते हुए, Gemini से यह पक्का करने के लिए कहें कि हमारे इनपुट सही टाइप का इस्तेमाल कर रहे हों. इससे यह पक्का होगा कि स्क्रीन रीडर जैसे सुलभता टूल, उन्हें सही तरीके से पिक अप कर पाएं.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. नतीजा
यह कोडलैब पूरा करने के लिए बधाई! आपने सीखा कि किसी वेब पेज पर मटीरियल डिज़ाइन लागू करने के लिए, Gemini का इस्तेमाल कैसे करें. आपने यह भी सीखा कि डिज़ाइन को बेहतर कैसे बनाएं और जनरेट किए गए कोड को व्यवस्थित कैसे करें. इस नई स्किल की मदद से, मटीरियल डिज़ाइन या उससे मिलती-जुलती लाइब्रेरी का इस्तेमाल करके, इस्तेमाल में आसान और लोगों के लिए काम के वेब पेज बनाए जा सकते हैं. इसके लिए, आपको कम से कम सेटअप करना होगा.