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