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