1. शुरू करने से पहले
इस कोडलैब में, Gemini Code Assist का इस्तेमाल करके किसी वेबसाइट पर Material Design को लागू करने का तरीका बताया गया है. मटीरियल डिज़ाइन लागू होने के बाद, आपको डिज़ाइन को दोहराना होगा. साथ ही, उपयोगकर्ता अनुभव को बेहतर बनाने और फ़ंक्शन जोड़ने के लिए बदलाव करने होंगे. इस वर्कशॉप के आखिर तक, आपके पास Gemini का इस्तेमाल करके, काम के और इस्तेमाल में आसान वेब पेज बनाने की क्षमता होगी. इसके लिए, आपको सीएसएस लिखने की ज़रूरत नहीं होगी. साथ ही, Material Design या इसी तरह की किसी लाइब्रेरी का इस्तेमाल किया जा सकेगा.
ज़रूरी शर्तें
- एचटीएमएल, सीएसएस, और JavaScript की जानकारी
- वेब डिज़ाइन की बुनियादी जानकारी
आपको ये सब सीखने को मिलेगा
- Gemini Code Assist की मदद से स्टाइलिंग लाइब्रेरी लागू करने का तरीका
- सीएसएस में मैन्युअल तरीके से बदलाव करने के बजाय, Gemini Code Assist का इस्तेमाल करके डिज़ाइन में बदलाव कैसे करें
- Gemini Code Assist को अपनी पसंद के स्टाइल में कोड जनरेट करने के लिए, असरदार प्रॉम्प्ट कैसे लिखें
आपको इन चीज़ों की ज़रूरत पड़ेगी
- Gemini for Google Cloud की सुविधा चालू किए गए Google Cloud प्रोजेक्ट का ऐक्सेस
- स्टाइल करने के लिए कोई वेब पेज या कम से कम एक ऐसा फ़ोल्डर जिसमें वेब पेज बनाया जा सके
2. सेटअप
इस कोडलैब के लिए, दो चीज़ें ज़रूरी हैं: Gemini की सुविधा चालू किए गए Google Cloud प्रोजेक्ट का ऐक्सेस और एक वेब पेज, जिसे हमें स्टाइल करना है. Cloud Console में सबसे ऊपर दाईं ओर मौजूद Gemini बटन पर क्लिक करके, किसी नए प्रोजेक्ट में 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 से हमारे वेबपेज पर Material Design लागू करने के लिए कहें. इसके लिए, इस तरह का प्रॉम्प्ट इस्तेमाल करें: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. नतीजा
इस कोडलैब को पूरा करने के लिए बधाई! आपने किसी वेबपेज पर Material Design लागू करने के लिए, Gemini का इस्तेमाल करने का तरीका जान लिया है. आपने डिज़ाइन को बेहतर बनाने और जनरेट किए गए कोड को व्यवस्थित करने का तरीका भी सीखा. इस नई स्किल की मदद से, कम से कम सेटअप करके Material Design या इसी तरह की लाइब्रेरी का इस्तेमाल करके, काम के और इस्तेमाल में आसान वेब पेज बनाए जा सकते हैं.