ওয়েব ডেভেলপমেন্ট: একের ভিতর সব

Web Design VS Web Development ওয়েব ডিজাইন এবং ওয়েব ডেভেলপমেন্ট
ওয়েব ডিজাইন বনাম ওয়েব ডেভেলপমেন্ট
আমার মনে পড়ছে সেই দিনগুলোর কথা যখন আমি ওয়েব ডেভেলপমেন্ট শেখা শুরু করেছিলাম। আমি তখন ডিজাইন আর ডেভেলপমেন্টের মধ্যে গুলিয়ে (পার্থক্য ধরতে না পারা) ফেলতাম। মনে অনেক প্রশ্ন জাগতো, ওয়েব ডিজাইনারের কাজ কি? ওয়েব ডিজাইনার বা ওয়েব ডেভেলাপার কি একই কাজ করে? এগুলোর মানে কি একই?
তখন এই প্রশ্নগুলোর উত্তর না জানলেও এখন আমি উত্তর গুলো বের করেছি। তাই ওয়েব ডিজাইনার এবং ওয়েব ডেভেলাপার সম্পর্কে খুটিনাটি বিষয় গুলোকে পর্যালোচনা করে সূক্ষ্ণ দৃষ্টিতে এই বিষয়টি উপস্থাপন করতে যাচ্ছি।

ওয়েব ডিজাইন

একটি আইডিয়া’কে বাস্তব সম্মত ডিজাইনে রুপান্তরিত করেন একজন ডিজাইনার। মূলত ব্যবহারকারীকে ওয়েবসাইটের মাধ্যমে সুন্দর অভিজ্ঞতা দেওয়া জন্য একজন ডিজাইনার কাজ করে থাকে। ওয়েবসাইট টি দেখতে কেমন হবে এবং কতটা আকর্ষণীয় করে তোলা যায় তার জন্য ডিজাইনার’কে প্রচুর পরিশ্রম করতে হয়।
যেভাবে একজন আর্কিটেক্ট একটি বাড়ি তৈরীর আগে একটি সুন্দর প্ল্যান তৈরী করে ঠিক সেভাবেই একজন ওয়েব ডিজাইনার – ওয়েবসাইটের মডেল লেআউট ডিজাইন করে যাতে করে ওয়েব ডেভেলপার সাইটটি তৈরী করতে পারে।
আমার মতে ওয়েব ডিজাইনার সবচেয়ে কঠিন কাজটিই করে থাকে। সাইটের ডিজাইন আধুনিক, আকর্ষণীয় ও চোখ ধাধানো হতে হবে তা না হলে, ডিজাইনার সম্পূর্ণ ভাবে ব্যর্থ। অনেক ডিজাইনার প্রথম দিক থেকে ডিজাইন স্ট্র্যাটেজি ও গাইডলাইন না মেনেই ডিজাইন করেন, সেক্ষেত্রে পরে সাইট ডেভেলপ করতে বেশ কিছু জটিলতা দেখা দেয়। যেহেতু সাইটটি তৈরীর উদ্দেশ্যই হচ্ছে ইউজারকে একটি নতুন অভিজ্ঞতা দেওয়া তাই ওয়েব ডিজাইনার ও ওয়েব ডেভেলপার উভয়কেই সমান পারদর্শী হতে হয়।
ওয়েব ডিজাইনার প্রথমে একটি আইডিয়া জেনারেট করে; তারপর সেটিকে স্কেচ করে একটি ড্রাফট তৈরী করে। তারপর ওয়ারফ্রেমে সেই ড্রাফটিকে নিয়ে আসে, তারপর মকাপ তৈরী করে এবং সবশেষে ফাইনাল ডিজাইন তৈরী করে। প্রক্রিয়াটি অনেকটা এরকম – স্কেচ (Sketch) > ড্রাফট (Draft) > ওয়ারফ্রেম (Wireframe) > মকাপ (Mock-up) > ফাইনাল ডিজাইন (Final Design)
একজন প্রফেশনাল ওয়েব ডিজাইনার সাইটের ডিজাইন কম্পোনেন্ট, আইকন, টাইপোগ্রাফি ও অন্যান্য ফিচার গুলোর সমন্বয়ে একটি নিখুঁত বা পিক্সেল পারফেক্ট লেআউট তৈরী করেন।
Web Design tools Sketch Framer Adobe XD Figma
ওয়েব ডিজাইন করতে যেসব টুলস ব্যবহার করতে হয়

ওয়েব ডিজাইনারের দায়িত্ব ও কর্মপদ্ধতি:

  • সফটওয়্যার – এডোবি ফটোশপ, স্কেচ, ফ্রেমার, ফিগমা সহ আরো কিছু টুলসের সমন্বয়ে ওয়েবসাইটের ফাইনাল লেআউট ডিজাইন তৈরী করে থাকে।
  • ওয়েব ডিজাইনারকে গ্রাফিক ডিজাইনে অনেক ভালো দক্ষতা দেখাতে হয়।
  • ইউজার এক্সপেরিয়েন্স (UX) এর দিকে ডিজাইনারকে বেশ সজাগ থাকতে হয়, সাইটের লেআউট, বাটন, ইমেজ ও অন্যান্য ফরমেট গুলো সাইটকে আলাদা বৈশিষ্ট্য প্রদান করে।
  • ওয়েব ডিজাইনারকে লেটেস্ট ডিজাইন ট্রেন্ড অনুযায়ী নিজেকে আপ-টু-ডেট রাখতে হয়। এটা খুবই গুরুত্বপূর্ণ কারণ গুগল, ফেসবুক, মাইক্রসফট এর মতো বড় টেক প্রতিষ্ঠান গুলো নিজেদের স্ব-কীয়তা বজায় রাখতে স্বতন্ত্র ডিজাইন প্যাটার্ণ তৈরী করছে।
  • ওয়েব ডিজাইনারের ব্র্যান্ডিং, কালার প্যালেট (Colour palettes), টাইপোগ্রাফি (Typography) সহ আরো জটিল বিষয়ে কাজ করতে হয় তাই এইসব বিষয়ে পূর্ণাঙ্গ জ্ঞান রাখতে হবে।

ওয়েব ডেভেলপমেন্ট

ওয়েব ডেভেলপার ডিজাইনকে একটি লাইভ ওয়েবসাইটে রুপান্তর করেন। ওয়েব ল্যাংগুয়েজ, সফটওয়্যার ও টুলসের সমন্বয়ে ডিজাইন কে ডেভেলপ করে একটি ফাংশনাল ওয়েবসাইট হিসেবে তৈরী করা হয়। ওয়েব ডেভেলপারকে দুইটি ক্যাটাগরীতে ভাগ করা হয়; ফ্রন্ট-এন্ড ডেভেলপার এবং ব্যাক-এন্ড ডেভেলপার
  • ফ্রন্ট-এন্ড ডেভেলপার মূলত ৩ টি প্রধান ল্যাংগুয়েজ নিয়ে কাজ করে থাকে – Hypertext Markup Language (HTML) , Cascading Style Sheets (CSS) ও JavaScript (JS). একজন ডেভেলপার এই ল্যাংগুয়েজ গুলো দিয়ে যেকোনো ধরণের প্রফেশনাল ও মর্ডাণ ওয়েবসাইট তৈরী করতে পারে। মূলত ডিজাইন লেআউট থেকে ছবি, টাইপোগ্রাফি – ফন্ট ফ্যামিলি, এনিমেশন বা মোশন গ্রাফিক্স ব্যবহার করে; অনেকগুলো ইন্টারফেসে নতুন ও অসাধারণ ওয়েবপেজ তৈরী করাই ফ্রন্ট-এন্ড ডেভেলপারের কাজ।
  • ব্যাক-এন্ড ডেভেলপার – যে কিনা সার্ভারের ডাটা এবং রিকোয়েস্ট গুলো কন্ট্রোল করে থাকে। ডাইনামিক ওয়েবসাইটের ব্যাক-এন্ডে অনেকগুলো সার্ভিসের প্রয়োজন পড়ে বা কাজ করে থাকে। আপনি নিশ্চয়ই গুগল ফর্ম পূরণ করেছেন? অথবা, কোনো ওয়েবসাইটে একাউন্ট তৈরী করেছেন? ওয়েবসাইটে কোনো ডেটা ইনপুট করার পর সেটা সেভ হওয়ার জন্য ডেটাবেজের প্রয়োজন পড়ে। ডেটাবেজ কানেকশনের মাধ্যমে সার্ভার নিজ থেকেই ডেটা গুলো সেভ করে রাখে এবং প্রয়োজন মতো ডেটার আউটপুট দেয়। ব্যাক-এন্ড ডেভেলপার সার্ভার সাইড ডেভেলপ করতে PHP, NodeJS, Python বা Ruby ল্যাংগুয়েজ ব্যবহার করে থাকে। এবং ডাটাবেজ কুয়েরী লিখতে SQL বা NoSQL এর মধ্যে (MySQL, MongoDB) ল্যাংগুয়েজ ব্যবহার করে থাকে।
Web Development Language: HTML5, CSS3, React, python, Ruby, PHP, Node JS
ওয়েব ডেভেলাপমেন্ট ল্যাংগুয়েজ

ওয়েব ডেভেলপারের যেসব কাজ করতে হয়

  • ওয়েব ডেভেলপারের মূল কাজ হচ্ছে, ওয়েবসাইটের একচুয়াল ইন্টারফেস বানানো। এই ইন্টারফেস একজন ফ্রন্ট-এন্ড ডেভেলপার HTML, CSS ও JS ল্যাংগুয়েজ দিয়ে তৈরী করে থাকে।
  • ফ্রন্ট-এন্ড ডেভেলপার মডার্ণ স্টাইল ও এডভান্স ডিজাইন করতে CSS প্রিপ্রসেসর, জাভাস্ক্রিপ্ট লাইব্রেরী ও ফ্রেমওয়ার্ক ব্যবহার করে থাকে, যাতে ওয়েবসাইট ডেভেলপমেন্টের কাজ দ্রুত হয়।
  • ফ্রন্ট-এন্ড ডেভেলপার একটি মার্কআপ ডিজাইন ব্যাক-এন্ড ডেভেলপার কে দেয়, যাতে উভয়ই মিলে ডিজাইনটিকে ডাইনামিক ওয়েবসাইটে রূপ দিতে পারে এবং সার্ভার ও ডেটাবেজে প্রয়োজনীয় ডেটা সাজিয়ে রাখতে পারে। 
  • ব্যাক-এন্ড ডেভেলপার PHP/NodeJS ও MySQL ল্যাংগুয়েজ ব্যবহার করে ওয়েবসাইটের ব্যাকবোন তৈরী করে।
  • উভয়ই একই ধরণের ডেভেলপমেন্ট এনভায়রনমেন্ট বা IDE ব্যবহার করে। এবং প্রায় একইরকম সফটওয়্যার/এপ্লিকেশন বা টুলস দিয়ে কোড লিখে ওয়েবসাইট বিল্ড করে থাকে।
  • ওয়েব ডেভেলপার ভার্শন কন্ট্রোল (কোডের হিস্টোরী) করার জন্য গিট ব্যবহার করে থাকে। যাতে খুব সহজেই নতুন করে বিল্ড করা কোডে সমস্যা হলে পূর্ববর্তী ভার্শনে ফিরে যাওয়া যায়।
Who is Full-Stack Developer? ফুল-স্ট্যাক ডেভেলপার কে?
ফুল-স্ট্যাক ডেভেলপার কে?

ফুল-স্ট্যাক ডেভেলপার কি করে?

উপরে ডেভেলপমেন্ট নিয়ে যা কিছু আলোচনা করা হয়েছে, তার সব কিছু নিয়ে যার পরিপূর্ণ জ্ঞান রয়েছে তিনিই ফুল-স্ট্যাক ডেভেলপার। তারমানে ফুল-স্ট্যাক ডেভেলপার হচ্ছেন এমন কেউ, যে কিনা একটি ওয়েবসাইট শুরু থেকে শেষ পর্যন্ত তৈরী করতে পারেন। সাধারণত ফুল-স্ট্যাক ডেভেলপারের ডিজাইন ও ইউজার এক্সপেরিয়েন্স নিয়ে বেসিক ধারণা থাকে। ফুল-স্ট্যাক ডেভেলপার হতে হলে আপনার সবগুলো ল্যাংগুয়েজে এক্সপার্ট হতে হবে ব্যাপারটা এমন নয়। একসাথে অনেক গুলো ল্যাংগুয়েজে এক্সপার্ট বা প্রফেশনাল হওয়া বিষয়টি খুব সহজ নয়। তাছাড়া ওয়েব টেকনোলজি খুব কম সময়ের মধ্যে পরিবর্তিত হচ্ছে।
যেমন, বর্তমানে React.JS বা Angular.JS নিয়ে বেশী কাজ করা হচ্ছে, কিন্তু এমন একটা সময় ছিলো যখন এই ধরণের ফ্রেমওয়ার্ক ছাড়াও ফুল-স্ট্যাক ওয়েব ডেভেলপমেন্ট হতো। কে জানে! বর্তমানে বহুল প্রচলিত ল্যাংগুয়েজ গুলোর জায়গা হয়তো অচীরেই Flutter এর মতো কেউ জায়গা নিয়ে নিবে।
ওয়েব সম্পর্কিত বেসিক সবধরণের জ্ঞান থাকা একজন ফুল-স্ট্যাক ডেভেলপারের জন্য অবশ্যই প্লাস পয়েন্ট। তবুও সব বিষয়ে এক্সপার্ট হওয়ার চেয়ে যেকোনো একটিতে ফোকাস হওয়া বেশী জরুরী। ওয়েব ডেভেলপমেন্টে ফ্রন্ট-এন্ড বা ব্যাক-এন্ড যে বিষয় নিয়ে কাজ করতে বেশী ভালো লাগবে সে বিষয়ে অধিক সময় নিয়ে কাজ করা উচিত।
আশাকরছি, ওয়েব ডেভেলপার এবং ওয়েব ডিজাইনার কে? কি তাদের কাজ দায়িত্ব? এইসকল প্রশ্নের পরিষ্কার উত্তর দিতে পেরেছি। খেয়াল করলে দেখতে পাবেন, এই প্রত্যেকটি দায়িত্ব অনেক গুরুত্বপূর্ণ কারন এদের একজন অন্যজনের পরিপূরক। 
ওয়েব ডেভেলপমেন্ট ক্যারিয়ার গড়তে কি কি শিখতে হবে, তা জানতে আমাদের পূর্বে প্রকাশিত আর্টিকেলটি দেখে নিতে পারেন।
আপনি যদি এই প্রকাশনাটি থেকে উপকৃত হয়ে থাকেন, তাহলে অন্যদের সাথে শেয়ার করুন।
Total
524
Shares
Total
524
Shares
মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।

You May Also Like
প্রেজেন্টেশন কিভাবে শুরু করতে হয় , প্রেজেন্টেশন করার নিয়ম, কিভাবে ভাল প্রেজেন্টেশন দেওয়া যায়
সম্পূর্ণ পড়তে ক্লিক করুন

চমৎকার প্রেজেন্টেশন তৈরির নীলনকশা

প্রেজেন্টেশনের হাতেখড়ি বিশ্ববিদ্যালয় থেকে হলেও কর্মজীবনের প্রায় প্রতিটা ক্ষেত্রেই প্রেজেন্টেশনের ব্যাপক ‌ভূমিকা রয়েছে। একটি চমৎকার প্রেজেনটেশন উপস্থাপন করতে হলে…
Web-Development-career-roadmap Projuktir Avijatri ওয়েব ডেভেলাপমেন্ট ক্যারিয়ার যেভাবে শুরু করতে হবে প্রযুক্তির অভিযাত্রি Front End Back End Developer ক্যারিয়ার Career
সম্পূর্ণ পড়তে ক্লিক করুন

ওয়েব ডেভেলপমেন্টে ক্যারিয়ার গড়তে যা শিখতে হবে

নতুন সব টেকনোজির পাশাপাশি প্রতিদিন অসংখ্য ওয়েবসাইট ইন্টারনেটে যুক্ত হচ্ছে, যার ফলে ওয়েব ডেভেলপারদের চাহিদা ক্রমশ বাড়ছে। ওয়েব…
বায়োইনফরমেটিক্স প্রযুক্তির অভিযাত্রি Projuktir Avijatri what is bioinformatics introduction journal impact factor bioinformatics bangla why learn bioinformatics বায়োইনফরমেটিক্স কি কেন পরিচিতি বায়োইনফরমেটিক্স কেন শিখব
সম্পূর্ণ পড়তে ক্লিক করুন

বায়োইনফরমেটিক্স কি? কেন?

আজ থেকে প্রায় এক বা দুই দশক আগে, মানুষ জীববিজ্ঞান এবং কম্পিউটার বিজ্ঞানকে সম্পূর্ণ ভিন্ন দুইটি ক্ষেত্র হিসেবে…
website for cse students Projuktir Avijatri best website for computer science students useful websites CSE learning websites সিএসই এর চাকরি ক্যারিয়ার কম্পিউটার সায়েন্স এন্ড ইঞ্জিনিয়ারিং চাকরি সফটওয়্যার ইঞ্জিনিয়ারিং ক্যারিয়ার প্রযুক্তির অভিযাত্রি
সম্পূর্ণ পড়তে ক্লিক করুন

যে ওয়েবসাইটে সিএসই শিক্ষার্থীদের সময় ব্যয় করা জরুরী

বর্তমানে “পৃথিবীর সব ধরণের খবরাখবর এক মূহর্তে জানার জন্য ইন্টারনেট প্রধান এবং একমাত্র হাতিহার।” আর সিএসই পড়ুয়া শিক্ষার্থীদের…
why-contribute-open-source
সম্পূর্ণ পড়তে ক্লিক করুন

ওপেন সোর্সে কেন অবদান রাখবেন?

এর আগে আমার প্রকাশিত লেখায় ওপেন সোর্স ও এর ইতিহাস সম্পর্কে আপনাদের ধারণা দিয়েছিলাম। আজকে ওপেন সোর্স প্রজেক্টে…
things-need-to-know-about-design
সম্পূর্ণ পড়তে ক্লিক করুন

ডিজাইন করার আগে যে বিষয়গুলো জানা দরকার

আচ্ছা, আপনি কি জানেন? যে আপনি একজন ডিজাইনার! একটা কথা, এখন অনেকেরই মনে প্রশ্ন জাগতে পারে ‘এটা কীভাবে…