১. শুরু করার আগে
এই কোডল্যাবটি দেখায় কিভাবে একটি ওয়েবসাইটে ম্যাটেরিয়াল ডিজাইন প্রয়োগ করতে জেমিনি কোড অ্যাসিস্ট ব্যবহার করতে হয়। ম্যাটেরিয়াল ডিজাইন প্রয়োগ করার পর, আপনি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং নতুন কার্যকারিতা যোগ করতে ডিজাইনটিতে পরিবর্তন আনবেন। এই ওয়ার্কশপের শেষে, আপনি CSS লেখার প্রয়োজন ছাড়াই ম্যাটেরিয়াল ডিজাইন বা অনুরূপ কোনো লাইব্রেরি ব্যবহার করে জেমিনি দিয়ে ব্যবহারযোগ্য ও ব্যবহারকারী-বান্ধব ওয়েব পেজ তৈরি করতে সক্ষম হবেন।
পূর্বশর্ত
- HTML, CSS, এবং Javascript সম্পর্কে ধারণা
- ওয়েব ডিজাইন সম্পর্কে প্রাথমিক ধারণা
আপনি যা শিখবেন
- জেমিনি কোড অ্যাসিস্ট দিয়ে স্টাইলিং লাইব্রেরি কীভাবে প্রয়োগ করবেন
- ম্যানুয়ালি CSS পরিবর্তন করার পরিবর্তে Gemini Code Assist ব্যবহার করে কীভাবে একটি ডিজাইনে পুনরাবৃত্তি করা যায়
- আপনার পছন্দসই শৈলীতে কোড অবদান রাখতে জেমিনি কোড অ্যাসিস্টকে কীভাবে কার্যকরভাবে উৎসাহিত করবেন
আপনার যা প্রয়োজন
- Gemini for Google Cloud সক্ষম করা একটি Google Cloud প্রজেক্টে অ্যাক্সেস
- স্টাইল করার জন্য একটি ওয়েব পেজ, অথবা অন্তত একটি ফোল্ডার যেখানে এটি তৈরি করা যাবে।
২. সেটআপ
এই কোডল্যাবের জন্য দুটি জিনিস প্রয়োজন: জেমিনি (Gemini) সক্রিয় করা একটি গুগল ক্লাউড প্রজেক্টে অ্যাক্সেস, এবং আমাদের স্টাইল করার জন্য একটি ওয়েব পেজ। ক্লাউড কনসোলের উপরের ডানদিকে থাকা জেমিনি বাটনে ক্লিক করে এবং নিচের প্যানেলে থাকা ‘enable’ অপশনে ক্লিক করে আপনি একটি নতুন প্রজেক্টে জেমিনি সক্রিয় করতে পারেন।
ওয়েব পেজটি স্টাইল করার জন্য, আপনার হাতের কাছে থাকা যেকোনো ওয়েব পেজ ব্যবহার করতে পারেন। বিকল্পভাবে, যেহেতু জেমিনি (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>
৩. উপকরণ বাস্তবায়ন
এই ধরনের একটি নির্দেশনার মাধ্যমে জেমিনিকে আমাদের ওয়েবপেজে ম্যাটেরিয়াল ডিজাইন প্রয়োগ করতে বলে শুরু করুন:
Can you apply material design styles to this page?
দ্রষ্টব্য: এই কোডল্যাবে প্রদত্ত সমস্ত প্রম্পটই উদাহরণ মাত্র। আপনার নিজের উক্তির জন্য অনুপ্রেরণা হিসেবে এগুলো নির্দ্বিধায় ব্যবহার করতে পারেন, এবং সর্বোত্তম ফলাফলের জন্য আপনার প্রজেক্টের প্রাসঙ্গিকতা অন্তর্ভুক্ত করুন।
উত্তরটি এইরকম হওয়া উচিত:
এই ল্যাবের জন্য ম্যাটেরিয়াল ডিজাইন ব্যবহার করা হয়েছে, কিন্তু আপনি জেমিনিকে আপনার পছন্দের লাইব্রেরিটি প্রয়োগ করতে বলতে পারেন। যদি জেমিনি আপনার প্রত্যাশিত সংস্করণের চেয়ে ভিন্ন কোনো ম্যাটেরিয়াল সংস্করণ ইম্পোর্ট করে, তবে আপনার প্রম্পটে কাঙ্ক্ষিত সংস্করণটি সরবরাহ করার চেষ্টা করুন।
৪. ডিজাইনের পুনরাবৃত্তি
ম্যানুয়ালি CSS কোড লেখার প্রয়োজন ছাড়াই, জেমিনি একটি ওয়েবপেজের ডিজাইন উন্নত করতেও আপনার সাথে কাজ করতে পারে। এই ডিজাইনটি উন্নত করার জন্য জেমিনিকে অনুরোধ করতে আপনার নিজের মতো করে একটি নির্দেশিকা তৈরি করুন। এই ধরনের কাজে সেরা ফলাফল পেতে, আপনি যে উপাদানগুলো পরিবর্তন করতে আগ্রহী এবং সেগুলোর কাঙ্ক্ষিত ফলাফল যতটা সম্ভব সংক্ষেপে বর্ণনা করার উপর মনোযোগ দিন:
Can we center the content on this page?
আপনি জেমিনিকে দিয়ে আমাদের পেজে কার্যকরী উপাদানও যোগ করাতে পারেন। ফর্মে আরও ফিল্ড যোগ করতে বা অতিরিক্ত কার্যকারিতা যোগ করতে জেমিনিকে বলুন:
Can we add some more fields to this form, like phone number, email address?
৫. সংগঠন
আপনি জেমিনিকে তার ফলাফলগুলো আমাদের প্রোজেক্টের জন্য সবচেয়ে সুবিধাজনক স্থানে সাজিয়ে নিতেও বলতে পারেন। এক্ষেত্রে, যেহেতু এই একটি ফাইলের মধ্যেই ডিজাইনটির পুনরাবৃত্তি করা মূল লক্ষ্য, তাই একটি style ট্যাগই সবচেয়ে উপযুক্ত। জেমিনিকে তার প্রতিক্রিয়াগুলো একটি স্টাইল ট্যাগের মধ্যে সীমাবদ্ধ রাখতে বলুন, যাতে কাজ করার সময় আপনাকে একাধিক ফাইলে এর পরিবর্তনগুলো প্রয়োগ করতে না হয়:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
৬. প্রবেশগম্যতা
ম্যাটেরিয়াল ডিজাইনে যেমন বলা হয়েছে , অ্যাক্সেসিবিলিটি এবং ইউজেবিলিটি হলো ডিজাইনের অপরিহার্য উপাদান। এই বিষয়টি মাথায় রেখে, আমাদের ইনপুটগুলো সঠিক টাইপ ব্যবহার করছে কিনা তা নিশ্চিত করতে জেমিনিকে বলুন। এর ফলে স্ক্রিন রিডারের মতো অ্যাক্সেসিবিলিটি টুলগুলো ইনপুটগুলো সঠিকভাবে গ্রহণ করতে পারবে।
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
৭. উপসংহার
এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন! আপনি শিখেছেন কীভাবে একটি ওয়েবপেজে ম্যাটেরিয়াল ডিজাইন প্রয়োগ করতে জেমিনি ব্যবহার করতে হয়। আপনি আরও শিখেছেন কীভাবে ডিজাইনের পুনরাবৃত্তি করতে হয় এবং তৈরি হওয়া কোডকে গুছিয়ে রাখতে হয়। এই নতুন দক্ষতা আপনাকে ন্যূনতম সেটআপের মাধ্যমে ম্যাটেরিয়াল ডিজাইন বা অনুরূপ লাইব্রেরি ব্যবহার করে ব্যবহারযোগ্য ও ব্যবহারকারী-বান্ধব ওয়েব পেজ তৈরি করতে সাহায্য করবে।