Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

ওয়েব ডিজাইন এর গাইডলাইন বাংলা টিউটোরিয়াল - Web Designar's Guideline Tutorial


একজন সফল ও ভাল মানের ওয়েব ডিজাইনার রুপে নিজেকে তৈরি করতে হলে নির্ধারিত কিছু কিছু ধাপ অনুসরন করতে হয়। আমাদের আজকের এই টিউটোরিয়ালে আমরা একজন ওয়েব ডিজাইনার হিসেবে নিজেকে তৈরি করতে হলে যে সকল ধাপ গুলো অনুসরন করতে হবে অর্থাৎ একজন ওয়েব ডিজাইনার এর গাইডলাইন নিয়ে আলোচনা করব।

ওয়েব ডিজাইন এর গাইডলাইন বাংলা টিউটোরিয়াল


ওয়েব পেজ ও ওয়েবসাইট কি ?

একটি ওয়েব পেজ হলো এইচটিএমএল ( একটি মার্কআপ ল্যাঙ্গুয়েজ ) ব্যবহার করে তৈরি করা এক ধরনের ওয়েব ডকুমেন্ট যা বিভিন্ন কন্টেন্ট যেমন লেখা বা টেক্সট, ছবি বা ইমেজ, ভিডিও ইত্যাদি প্রয়োজনীয় information ধারন করে। ইন্টারনেটে আমরা তথ্য খোজার জন্য আমাদের ওয়েব ব্রাউজারের মাধ্যমে যে পেজগুলো ভিজিট করে থাকি এগুলোর সবগুলোই হলো এক একটি ওয়েবপেজ৷ সকল ওয়েব পেজের একটি নির্দিষ্ট address থাকে জাকে ওয়েব এড্রেসও বলে, যার মাধ্যমে সেই ওয়েব পেজে প্রবেশ করা যায়৷ একটি ওয়েব পেজকে ওয়েব ব্রাউজার এর মাধ্যমে access করা যায়৷
একটি ওয়েব পেজ তৈরি করার পর তাতে ইচ্ছামত বিভিন্ন প্রয়োজনীয় তথ্য এইচটিএমএল ট্যাগ ব্যবহার করে যুক্ত করা যায়।

একটি ওয়েব সাইট হল এরকম কতগুলো এইচটিএমএল ডকুমেন্ট অর্থাৎ ওয়েব পেজের এর সমষ্টি যা ইন্টারনেটে সংযুক্ত কোন কম্পিউটারে ( ইন্টারনেটে সংযুক্ত এই কম্পিউটারকে সার্ভার বলা হয় ) সংরক্ষিত থাকে এবং ইন্টারনেটে সংযুক্ত অন্য কোন কম্পিউটার বা ডিভাইস থেকে তা ব্যবহার করা যায়।

এরকম অসংখ্য ওয়েব পেজ নিয়েও ওয়েব সাইট তৈরি হতে পারে, আবার কয়েকটি ওয়েব পেজ নিয়েও কোন ওয়েব সাইট তৈরি হতে পারে।

বাহ্যিক ভাবে কোন ওয়েবসাইট দেখতে কিরম হবে তা নির্ধারণ করাই অর্থাৎ ওয়েব পেজ তৈরি করে তা দিয়ে ওয়েবসাইট তৈরি করাই হলো ওয়েব ডিজাইন। ধরুন ইউটিউব দেখতে একরকম, ফেসবুক দেখতে আবার অন্যরকম। ওয়েবসাইট গুলোর দেখার ভিন্নতার ব্যাপারটা নির্ভর করে ওয়েবসাইট টি কিভাবে সাজানো বা ডিজাইন করা হয়েছে তার উপর।
একটি ওয়েবসাইট এর লেখার ধরন, রঙ, ছবি, ভিডিও, মেনুবার ইত্যাদি কোথায় কেমন ভাবে থাকবে সর্বপোরি কোন ওয়েবসাইট ব্যবহারকারীরা যেভাবে দেখে সকল কাজই ওয়েব ডিজাইন এর অন্তর্ভূক্ত।

এক কথায় ওয়েব পেজ তথা ওয়েবসাইট তৈরি করা কেই ওয়েব ডিজাইন বলা হয়, তবে ওয়েব ডিজাইনই কিন্তু শেষ নয়, এর পরে আভ্যন্তরীণ বিভিন্ন কাজ করার প্রয়োজন পরে, ওয়েব সাইট এর আভ্যন্তরীণ বা আরালে এর এর কাজ গুলকে বলা হয় ওয়েব ডেভেলপমেন্ট। যে এই কাজ গুলো করে থাকে তাকে ওয়েব ডেভেলপার বলা হয়। আমাদের এই টিউটোরিয়ালে আমরা ওয়েব ডিজাইন নিয়ে আলোচনা করব, তবে ওয়েব দেভলপমেন্ত সম্পর্কে জানতে আমাদের ওয়েব ডেভেলপার গাইডলাইন টিউটোরিয়াল টি দেখুন।
অর্থাৎ ওয়েবসাইট এর কাজ যে সংক্ষেপে প্রধানত ২ ভাগে ভাগ করা যায়, যা নিম্নরূপ –

আবার বিষদ পরিসরে অর্থাৎ কাজ করার ওপর নির্ভর করে ওয়েব ডিজাইনকে ৩ ভাগে ভাগ করা যায়, যা নিম্নরূপ –

নিচে এদের সম্পর্কে বিষদ বিবরন দেখুন।


ওয়েব ডিজাইন বা ফ্রন্ট-ইন্ড ওয়েব ডিজাইন

বাহ্যিক ভাবে কোন ওয়েবসাইট দেখতে কিরম হবে অর্থাৎ একটি ওয়েবসাইট এর লেখার ধরন, রঙ, ছবি, ভিডিও, মেনুবার ইত্যাদি কোথায় কেমন ভাবে থাকবে সর্বপোরি কোন ওয়েবসাইট দেখতে কি রকম হবে তা নির্ধারণ করে তৈরি করাই হল ওয়েব ডিজাইন আর যে এই কাজটি করেন তাকে ওয়েব ডিজাইনার বলা হয়। ওয়েব ডিজাইনকেই ফ্রন্ট এন্ড ওয়েব ডিজাইন বলা হয়।


ওয়েব ডেভেলপমেন্ট বা ব্যাক-ইন্ড ওয়েব ডিজাইন

কোন ওয়েবসাইট এর আভ্যন্তরীণ কাজ গুলো করা কেই ওয়েব ডেভেলপমেন্ট বলা হয় আর এই কাজ করেন যে অর্থাৎ একজন ওয়েব ডেভেলপারকেই ব্যাক এন্ড ওয়েব ডিজাইনার বলা হয়।


ফুল স্টঅ্যাঁক ওয়েব ডিজাইন

ফুল স্টঅ্যাঁক ওয়েব ডিজাইনার হল যে একই সাথে ফ্রন্ট এন্ড এবং ব্যাক এন্ড এর কাজ করতে পারে অর্থাৎ ওয়েব ডিজাইন অর্থাৎ এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট ইত্যাদি এবং ওয়েব ডেভেলপমেন্ট অর্থাৎ পিএইচপি, ডাটাবেজ ইত্যাদি এর কাজ করে তাকেই ফুল স্টঅ্যাঁক ওয়েব ডিজাইনার বলে।


ওয়েব ডিজাইনের গাইডলাইন

ওয়েব ডিজাইন শেখার জন্য অর্থাৎ নিজেকে একজন ওয়েব ডিজাইনার রুপে তৈরি করার জন্য আমাদের নিচের বিষয় গুলো ধারাবাহিক ভাবে জানতে হবে –

ওয়েব ডিজাইন শেখার জন্য অর্থাৎ একজন ওয়েব ডিজাইনার হিসেবে নিজেকে তৈরি করার জন্য এই ধাপ গুলো সম্পর্কে নিচে ধারাবাহিক ভাবে বর্ণনা করা হল –


এইচটিএমএল

এইচটিএমএল বা HTML এর পূর্ণরূপ হল Hyper Text Markup Language. এইচটিএমএল (html) হল ওয়েব ডিজাইন এর মূল ভিত্তি যা দিয়ে ওয়েব পেজ তৈরি করা হয়। আপনি ওয়েব পেজ ডিজাইন করতে সিএসএস, জাভাস্ক্রিপ্ট, যেক্যুয়েরী বা অন্য যা কিছুই ব্যবহার করেন না কেন আপনাকে অবশ্যই এগুলো html এর মাধ্যমে ব্যবহার করতে হবে।

এইচটিএমএল কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, এটি একটি মার্কআপ ল্যাঙ্গুয়েজ যা কতগুলো মার্কআপ ট্যাগ এর সমষ্টি। অর্থাৎ এইচটিএমএলের এই প্রতিটি ট্যাগের আন্তর্জাতিক অর্থাৎ আদর্শিক ভাবে পূর্ব নির্ধারিত সুনির্দিষ্ট কাজ রয়েছে। ব্রাউজারে এইচটিএমএল কোড লোড হবার পর এই কোডগুলো তাদের নির্ধারিত কাজ করে। অর্থাৎ মার্কআপ ট্যাগগুলো ওয়েব পেজে কন্টেন্টের অবস্থান, প্রদর্শন ইত্যাদি নির্ধারণ করে। সহজভাবে কোন কন্টেন্ট কিভাবে প্রদর্শিত হবে,তা এইচটিএমএল ট্যাগ গুলো ব্রাউজারকে বলে দেয় ।

সহজে এবং সম্পূর্ণ ভাবে এইচটিএমএল ৫ সিখতে আমাদের এইচটিএমএল ৫ টিউটোরিয়াল টি দেখুন।


সিএসএস

ওয়েব পেজকে দৃষ্টিনন্দন এবং ইউজার ফ্রেন্ডলি করার জন্যই সিএসএস এর উদ্ভব হয়েছে। এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে খুব সহজে সাজাতে বা styleing করতে সিএসএস ব্যবহার হয়। সিএসএস ব্যবহার করে বেশ কম সময় ও কম পরিশ্রমে অনেক বেশী কাজ করা যায়।

ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, রং, অবস্থান, গতিশীলতা ইত্যাদি নির্ধারণ করার অন্যতম সহজ পদ্ধতি হল সিএসএস। সিএসএস এর ফলে খুব কম সময়ে কম কোড লিখে পুরো ওয়েব সাইটের স্টাইলিং পরিবর্তন করা যায়। css এর পূর্ণরুপ হল Cascading Style Sheet,সিএসএস এর style নির্দিষ্ট করে ওয়েব পেজে কন্টেন্টগুলো কিরকম প্রদর্শিত হবে।

সহজে এবং সম্পূর্ণ ভাবে সিএসএস সিখতে আমাদের সিএসএস টিউটোরিয়াল টি দেখুন।


বেসিক ফটোশপ

ওয়েব ডিজাইন এর জন্য এডোবি ফটোশপ সফটওয়্যার এর সাধারন কিছু কাজ জেনে রাখা ভাল, এই কাজ গুলো হতে পারে ক্রপিং, এরাসার, সাধারন কিছু ব্যানার তৈরি করা, ইত্যাদি।

এডোবি ফটোশপ সফটওয়্যার এর সাধারন কিছু কাজ শেখার জন্য কিছু ওয়েবসাইট এর নাম নিচে দেখুন।

নিচে কয়েকটি ইউটিউব চ্যানেল এর নাম দেখুন, যেখান থেকে ভিডিও দেখে ফটোশপ এর কাজ সেখা যায়।


বুটস্ত্রাপ বা কোন সিএসএস ফ্রেমওয়ার্ক

ওয়েবসাইট কে সহজে রেস্পন্সিভ করে তৈরি করার জন্য সিএসএস এর কোন একটি ফ্রেমওয়ার্ক জানতে হবে। বহুল পরিচিত একটি সিএসএস ফ্রেমওয়ার্ক হল বুটস্ত্রাপ। ফ্রেমওয়ার্ক হল এমন কতগুলো ফাইল যেখানে আগে থেকেই কিছু নির্ধারিত স্টাইল কোড লিখে রাখা হয়েছে, আমাদেরকে সুধু নিরদিস্ত নাম ধরে ব্যবহার করতে হবে।


জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট হল একটি ক্রস প্লাটফর্ম অবজেক্ট অরিয়েন্টেড স্ক্রিপ্টিং ল্যাঙ্গুয়েজ। জাভাস্ক্রিপ্টের একটি বড় সুবিধা হল অনেক ছোট প্রোগ্রাম অরথাত অল্প কিছু প্রোগ্রাম দিয়ে অনেক বড় বড় কাজ করা যায়। জাভাস্ক্রিপ্ট হল একটি ইন্টারপ্রিটেড ল্যাঙ্গুয়েজ, অর্থাৎ যার অর্থ হল এটার জন্য পূর্ববর্তী কোন কম্পাইলেসনেরই প্রয়োজন হয় না।

জাভাস্ক্রিপ্ট হল একটি ক্লাইন্ট সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ বা ব্রাউজার স্ক্রিপ্টিং ল্যাঙ্গুয়েজ। ক্লাইন্ট সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ এর অর্থ হচ্ছে যে ওয়েব ব্রাউজ করবে তার ব্রাউজার এই স্ক্রিপ্টগুলোকে run/execute করবে। স্ক্রিপ্টিং ল্যাংগুয়েজ হল প্রোগ্রামিং ল্যাঙ্গুয়েজের সহজ ও সংক্ষিপ্ত রুপ। একদম প্রথম দিকের ওয়েব প্রোগ্রামিং বলতে যা বোঝায়, জাভাস্ক্রিপ্ট হল তাই। ওয়েব পেজে প্রোগ্রামিং এর জন্যই স্ক্রিপ্টিং ল্যাঙ্গুয়েজের উদ্ভাবন হয়েছে।

সহজে এবং সম্পূর্ণ ভাবে জাভাস্ক্রিপ্ট সিখতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল টি দেখুন।


যেক্যুয়েরী বা জাভাস্ক্রিপ্ট এর কোন ফ্রেমওয়ার্ক

জোকোয়েরি হচ্ছে জাভাস্ক্রিপ্টের একটা ফ্রেমওয়ার্ক বা ফাংশন লাইব্রেরি। এখানে শত শত ফাংশন আগে থেকেই তৈরী করা আছে যা আপনি ব্যবহার করে আপনার সাইটকে আরও প্রানবন্ত করতে পারেন। এই কাজগুলি শুধু raw জাভাস্ক্রিপ্ট ব্যবহার করেও করতে পারবেন তবে এতে অনেক বেশি কোড লিখতে হবে এবং প্রচুর সময় লাগবে।

সহজে এবং সম্পূর্ণ ভাবে যেক্যুয়েরী সিখতে আমাদের যেক্যুয়েরী টিউটোরিয়াল টি দেখুন।


ওয়েব ডিজাইন এর জন্য কি কি প্রয়োজন?

ওয়েব ডিজাইন এর জন্য যা প্রয়োজন তা হল -

এ সম্পর্কে আর বিস্তারির দেখুন আমাদের এইচটিএমএল টিউটোরিয়াল এর মূলপাতায়


কি রকম কম্পিউটার প্রয়োজন?

একটি সাধারন কম্পিউটার ব্যবহার করেই ওয়েব ডিজাইন সেখা যায়। তাছারা যেকোন ট্যাবলেট ব্যবহার করেও ওয়েব ডিজাইন এর কাজ সেখা যায়। এমন কি আপনার হাতের মুঠোফোন বা স্মার্টফোন ব্যবহার করেও আপনি ওয়েব ডিজাইন এর কাজ সিখতে পারবেন, তবে তা বেশ কষ্টকর ও সময়সাপেক্ষ ব্যাপার।
প্রফেসনাল কাজ করার জন্য আপনাকে অবশ্যই একটি ভাল মানের কম্পিউটার ব্যবহার করতে হবে। ইন্টেল সেলেরন প্রসেসর যুক্ত কম্পিউটার ব্যবহার করে ওয়েব ডিজাইন এর কাজ সেখা গেলেও, প্রফেসনাল মানের কাজ করার জন্য আপনাকে কমপক্ষে ডুয়েল কোর বা কোর-টু-ডুউ ব্যবহার করা উচিৎ। ২ জিবি রাম এর কম্পিউটার ব্যবহার করে কাজ সেখা যেতে পারে কিন্তু প্রফেসনাল কাজের জন্য ৮জিবি রাম অন্ততপক্ষে ৪জিবি রাম ব্যবহার করা প্রয়োজন। আর হার্ড ডিস্ক হিসেবে আপনার সাধ্য অনুযায়ী ব্যবহার করতে পারেন, তবে সি ড্রাইভ এর জন্য একটু বেশি স্পেস রাখতে চেষ্টা করবেন আর যদি এসএসডি ব্যবহার করতে পারেন তবে তা খুবই ভাল।