কম্পোনেন্ট ডিজাইন
ওয়েব অ্যাপ্লিকেশনের জন্য গ্রাফিকাল উপাদানের নকশা
ক্যানভাসের খালি জায়গায় উপাদানগুলি রাখা সম্ভব হবে, তবে অবিলম্বে সবকিছু ঝরঝরে এবং সুশৃঙ্খল করার চেষ্টা করা ভাল। অতএব, শুরু করার জন্য, আমরা ওয়ার্কস্পেস ডিজাইন করব। ক্যানভাসে একটি কম্পোনেন্ট ( Container ) যোগ করা যাক যেখানে আমরা অন্যান্য সমস্ত উপাদান রাখব। যোগ করার পরে, আপনাকে গিয়ার আইকনে ক্লিক করতে হবে এবং এই ধারকটির কনফিগারেশনে এগিয়ে যেতে হবে।
ধারক সেটিংস
এর উপলব্ধ সেটিংস মাধ্যমে যান.
- Name - যে নামটির অধীনে আমরা অ্যাপ্লিকেশনটির ব্যবসায়িক প্রক্রিয়াগুলিতে এই ধারকটিকে উল্লেখ করতে পারি৷ উদাহরণস্বরূপ, যদি আমরা এই ধারকটির কিছু সেটিংস পরিবর্তন করতে ব্যবসায়িক প্রক্রিয়া তৈরি করতে চাই।
- Direction - প্রদত্ত পাত্রের ভিতরের উপাদানগুলিকে যে দিকে রাখা হবে। অনুভূমিকভাবে, যদি আপনি এগুলিকে একের পর এক সারিতে সাজাতে চান, বা বিপরীতভাবে, উল্লম্বভাবে, যখন উপাদানগুলি একে অপরের নীচে চলে যায়।
- Wrap - উপাদানগুলির আউটপুট সেট করা। তারা কি একই লাইনে থাকা উচিত (নওর্যাপ), নাকি তাদের মোড়ানো (মোড়ানো) করা যেতে পারে।
- Alignment - ধারকটির উপাদানগুলি কীভাবে সারিবদ্ধ করা উচিত (অনুভূমিক এবং উল্লম্ব প্রান্তিককরণের জন্য পৃথক সেটিং)।
- Size - ধারক আকার। এটি উপলব্ধ স্থানের শতাংশ হিসাবে সেট করা যেতে পারে বা পিক্সেলগুলিতে কঠোরভাবে নির্দিষ্ট আকার থাকতে পারে।
- Max Width - সর্বাধিক অনুমোদিত প্রস্থ (যদি এটি কঠোরভাবে সেট করা না হয় এবং বিষয়বস্তুর উপর নির্ভর করে পরিবর্তিত হয়)।
- Margin/Padding - কন্টেইনার সীমানা থেকে ইন্ডেন্ট। বাহ্যিক বা অভ্যন্তরীণ, যথাক্রমে।
- Image, Gradient or Overlay (Background color) - পছন্দসই পটভূমি সেট করার ক্ষমতা। আপনি একটি নির্দিষ্ট রঙ চয়ন করতে পারেন (বা গ্রেডিয়েন্ট সহ বিভিন্ন রঙের সংমিশ্রণ) বা একটি পটভূমি চিত্র নির্বাচন করতে পারেন।
- Border - ফ্রেম নির্বাচন এবং এর চেহারা (রঙ, বেধ, বৃত্তাকার ব্যাসার্ধ)।
- Visible - উপাদানটির দৃশ্যমানতা (পাশাপাশি সমস্ত নেস্টেড উপাদান)।
নির্বাচিত সেটিংস স্ক্রিনশটে দেখা যাবে। অবশ্যই, আপনি আপনার অনন্য নকশা চয়ন করে পরীক্ষা এবং তাদের পরিবর্তন করতে পারেন।
তৈরি করা পাত্রে আরেকটি যোগ করা যাক। আমরা এতে প্রয়োজনীয় ইনপুট ক্ষেত্র যোগ করব। এটিকে উল্লম্ব, কেন্দ্র-সারিবদ্ধ, 40% প্রস্থ এবং বাম প্যাডিং-বামে (প্যাডিং-বাম 20px) সেট করুন।
অ্যাপ্লিকেশন উপাদান
এর পরে, উপাদানগুলি নিজেরাই পাত্রে যুক্ত করুন। আমাদের ব্যবসায়িক প্রক্রিয়া দুই নম্বর টাইপ float গ্রহণ করে। এগুলি প্রবেশ করতে, আপনাকে দুটি Input উপাদান ( float ), একটি বোতাম ( Button ) যোগ করতে হবে, যা গণনা প্রক্রিয়া শুরু করবে এবং তাদের Label স্বাক্ষর করার জন্য একটি ছোট ভিজ্যুয়াল সমন্বয় করতে হবে।
আসুন আরও একটি ব্লক যোগ করি যেখানে আমরা সাধারণভাবে (সমষ্টি, বিয়োগ, ইত্যাদি) গণনা করার পরিকল্পনায় স্বাক্ষর করব। আসুন উল্লম্বভাবে, কেন্দ্রীভূত এবং ডান-সারিবদ্ধ ( end/center ) সাজানো উপাদানগুলির সাথে প্রস্থকে 30% এ সেট করি। আসুন পাত্রে 5টি Label উপাদান যুক্ত করি এবং অবিলম্বে তাদের পাঠ্যটি পছন্দসইটিতে পরিবর্তন করি।
ভিজ্যুয়াল ডিজাইনের শেষ ধাপ হল গণনার ফলাফল প্রদর্শন করতে অন্য একটি পাত্র যোগ করা। আমরা পূর্ববর্তী পাত্রের সাথে সাদৃশ্য দ্বারা এটি যোগ করেছি, তবে আমরা বাম দিকে একটি ছোট প্যাডিং দিয়ে ডানদিকে প্রান্তিককরণ সেট করেছি। এই ধারকটির বৈশিষ্ট্য হল এটি প্রাথমিকভাবে অদৃশ্য হবে ( Visible সুইচটি বন্ধ)। যখন আমরা গণনার ফলাফল পাব তখনই এটি চালু করা যাক। আসুন এটিতে 5টি Label উপাদান যুক্ত করি, এবং আমাদের তাদের পাঠ্য পরিবর্তন করার দরকার নেই কারণ ব্লকটি এখনও অদৃশ্য (মূল জিনিসটি হল তাদের Name সেট করা যাতে আপনি ব্যবসায়িক প্রক্রিয়া তৈরি করার সময় প্রয়োজনীয় উপাদান সনাক্ত করতে পারেন)।
সবকিছু সঠিকভাবে সম্পন্ন হলে, আমরা ওয়েব ডিজাইনারে নিম্নলিখিত ফলাফল দেখতে পাব:
এবং এটি প্রকাশিত অ্যাপে:
