ওয়েব ডিজাইন কি? ওয়েব ডেভেলপমেন্ট কি? এদের পার্থক্য কি?? কি শিখবেন? কিভাবে শিখবেন? রেস্পন্সিব ডিজাইন কি? বিস্তারিত জানুন...
▬▬▬▬۩۞۩▬▬▬▬
ওয়েবসাইটের বিভিন্ন অংশ ও গঠন
====================
একটি ওয়েবসাইটকে বিভিন্ন অংশে ভাগ করা যায়। একটি ওয়েবসাইটের বৈশিষ্ট্য অনুযায়ী একে কখন Hierarchical, Network বা Linear অথবা এগুলোর সম্মিলিত উপায়ে বিভিন্নভাবে ভাগ করা হয়ে থাকে। এখানে এই কৌশলগুলো আলোচনা করব।
Hierarchical
• এই কৌশল ব্যবহার করে ওয়েবসাইটকে বিভিন্ন অংশে ভাগ করা হয়ে থাকে যাতে একজন ভিজিটর সহজেই বুঝতে পারে কোন অংশে তার প্রয়োজনীয় তথ্য আছে। এই কৌশলে ওয়েবপেইজগুলোকে এমনভাবে লিঙ্ক করা হয় যাতে এগুলো বিভিন্ন শাখায় ভাগ করা থাকে। Yahoo.com ওয়েবসাইটটি এই কৌশল ব্যবহার করে বিভিন্ন অংশে ভাগ করা হয়েছে।
Network
• এখানে সবগুলো ওয়েবপেইজের সাথেই সবগুলোর লিঙ্ক থাকে অর্থাৎ একটি মেনু পেইজের সাথে যেমন অন্যান্য পেইজের লিঙ্ক থাকবে তেমন প্রতিটি পেইজ তাদের নিজেদের সাথেও মেইন পেইজের লিঙ্ক থাকবে। ফ্রেম ব্যবহার করে তৈরী করা ওয়েবপেইজগুলো এই নেটওয়ার্কের মাধ্যমে লিঙ্ক করা হয়ে থাকে যাতে একটি ছোট ফ্রেমের মধ্যে অন্যান্য পেইজের লিঙ্কগুলো মেনু আকারে রাখা হয়। এই ফ্রেমটি সাধারণত স্থির থাকে এবং কোন একটি লিঙ্ক নির্বাচন করলে ঐ পেইজটি একটি অপেক্ষাকৃত বড় ফ্রেমের মধ্যে দেখায়।
Linear
• যখন কোন ওয়েবসাইটের বিভিন্ন পেইজে ভিজিটে একটি নির্দিষ্ট ক্রমানুসারে চালনা করার প্রয়োজন হয় তখন Linear গঠনটি ব্যবহার করা হয়। কোন পেইজের পর কোন পেইজে যাওয়া যাবে তা ওয়েবপেইজের ডিজাইনার ঠিক করে থাকে। পেইজগুলোতে Next,Previous বা Back এবং Top, Last ইত্যাদি কয়েকটি লিঙ্কের মাধ্যমে ভিজিটর এক পেইজ দেখতে পারে। এই কৌশলের মাধ্যমে কোন শিক্ষামূলক বিষয়বস্তু যেমন বই,ম্যানুয়াল ইত্যাদি সাইটে পাব্লিশ করা হয়ে থাকে।
Combination
• কখনও কোন একটি কৌশল ব্যবহার করে একটি ওয়েবসাইট তৈরী করা হয় না। বরং একাধিক ডিজাইনের সমন্বয়ে একটি ওয়েবসাইট ডিজাইন করা হয়ে থাকে। Hierarchical টেকনিক ব্যবহার করে সাইট ডিজাইন করলে তা খুব বেশি দর্শনীয় হয় না। আবার শুধু নেটওয়ার্ক টেকনিক ব্যবহার করে তৈরী করা সাইট হার্ড-ডিস্কে বেশি জায়গা দখল করে। তাই একাধিক কৌশল ব্যবহার করে সাইট তৈরী করা হয়। তবে এক ওয়েবপেইজ থেকে আরেক ওয়েবপেইজে যাওয়ার জন্য যা ব্যবহার করা যেমন লিঙ্ক, বাটন, মেনু ইত্যাদি(এদেরকে বলা হয় Navigational টুল) অবশ্যই স্পষ্ট হতে হবে। যদি লিঙ্কগুলো কোন পেইজের উপরে বাম দিকে দেয়া হয় তবে একই লিঙ্ক পেইজের নিচেও দেওয়া উচিত।
ওয়েব ডিজাইন ও ডেভেলপমেন্ট প্রাথমিক কথা
▬▬▬▬۩۞۩▬▬▬▬
ওয়েব ডিজাইন কি
ওয়েব ডিজাইন হচ্ছে একটা ওয়েবসাইটের জন্য বাহ্যিক অবয়ব তৈরী করা। ওয়েব ডিজাইনারের মুল কাজ একটা সাইটের জন্য টেমপ্লেট বানানো, এখানে কোন এপ্লিকেশন থাকবেনা। যেমন লগিন সিস্টেম, নিউজলেটার সাইনআপ, পেজিনেশন, ফাইল আপলোড করে ডেটাবেসে সেভ করা, ইমেজ ম্যানিপুলেশন, যদি সাইটে বিজ্ঞাপন থাকে তাহলে প্রতিবার পেজ লোড হওয়ার সময় বিজ্ঞাপনের পরিবর্তন এগুলি এপ্লিকেশন, ওয়েব এপ্লিকেশন।এসব তৈরী করতে হয় প্রোগ্রামিং ল্যাংগুয়েজ দিয়ে। কোন প্রকার এপ্লিকেশন ছাড়া একটা সাইট তৈরী করা এটাই ওয়েব ডিজাইন, এধরনের ডিজাইনকে বলতে পারেন স্টাটিক ডিজাইন। ওয়েব ডিজাইনের জন্য এই ধারনাটি সাধারনত ব্যবহৃত হচ্ছে।
যেভাবে ওয়েব ডিজাইন শিখবেন
▬▬▬▬۩۞۩▬▬▬▬
বিভিন্ন ওয়েব সাইটের টিউটোরিয়াল থেকে ওয়েব ডিজাইন ভালভাবে শিখতে পারবেন। বাংলা ইংরেজি অনেক সাইট আছে এসব শেখার। ওয়েব ডিজাইন শেখা বেশ সহজ, কয়েকমাসেই শেখা সম্ভব। ভালভাবে শিখতে পারলে ওয়েব ডিজাইনের উপর প্রচুর চাকরি এবং ফ্রিল্যান্সিং এ হাজার হাজার কাজ পাওয়া যায়।
ওয়েব ডেভেলপমেন্ট কি
▬▬▬▬۩۞۩▬▬▬▬
ওয়েব ডেভেলপমেন্ট হচ্ছে ওয়েবসাইটের জন্য এপ্লিকেশন তৈরী করা। উপরে যে এপ্লিকেশনগুলির উল্লেখ করেছি এধরনের আরো হাজারো এপ্লিকেশন আছে, ওয়েব ডেভেলপারকে এসব এপ্লিকেশন তৈরী করতে হবে। যদি ফ্রিল্যান্সিং করেন তাহলে ক্লাইন্টের চাহিদা অনুযায়ী এমনও এপ্লিকেশন তৈরী করা লাগতে পারে যার অস্তিত্ব পৃথিবীতে নেই ।এই বিষয়টি বেশি চ্যালেন্জিং এবং ডাইনামিক। অর্থ্যাৎ আপনাকে এপ্লিকেশন ডিজাইন করতে হবে। তাই ওয়েব ডেভেলপমেন্ট কে আরও সুনির্দিষ্ট করে বলা যায় ওয়েব এপ্লিকেশন ডেভেলপমেন্ট।
এবার আসুন আমরা জানি কোনটা শিখবেন,
---------------------------------
ওয়েব ডিজাইন নাকি ডেভেলপমেন্ট?
▬▬▬▬۩۞۩▬▬▬▬
আমাদের দেশের অনেককেই দেখা যায় ডিজাইন ও ডেভেলপমেন্ট এর মধ্যে পার্থক্য বুঝে না। অথচ দুইটা সম্পূর্ণ আলাদা জিনিস। একটা দৃশ্যমান হয় আর আরেকটা প্রাণ দেয়। যেমন, ফেসবুক দেখতে কেমন, কোথায় ছবি থাকবে, কোথায় চ্যাট বক্স থাকবে, কোথায় হোম বাটন থাকবে, কোনটার রং কেমন হবে ইত্যাদি হচ্ছে ওয়েব ডিজাইন এর কাজ । আর ফেসবুক এ স্ট্যাটাস লিখে দিলেই তা সবার কাছে পৌঁছে যাবে, ইমেইল পাসওয়ার্ড দিয়ে লগিন ক্লিক করলেই লগিন হয়ে যাবে, লাইক এ ক্লিক করলে একটা লাইক যোগ হবে এবং মালিকের কাছে লাইক এর নোটিফিকেশন চলে যাবে, ইত্যাদি ডেভেলপমেন্ট এর কাজ । এখন কথা হচ্ছে আপনি যদি ডেভেলপার হতে চান তাহলে আপনাকে অবশ্যই ওয়েব ডিজাইন সম্পর্কে মোটামুটি ধারণা থাকতে হবে, নইলে কাজ করতে অনেক সময় সমস্যা হতে পারে।
নিচে ওয়েব ডিজাইন ও ডেভেলপ শিখতে হলে যা যা লাগবে ও জানতে হবে তা ধারাবাহিক ভাবে দেয়া হলো।
ওয়েব ডিজাইন ও ডেভেলপমেন্ট শিখতে হলে যা যা লাগবে:
==============================
১। প্রথমেই আপনাকে ডিজাইন ও ডেভেলপমেন্ট কি সে সম্বন্ধে ধারণা থাকতে হবে। ব্যাপারটা ভালোভাবে বুঝতে হবে ।
২। প্রচুর ধৈর্য্য শক্তি ও মনোযোগ থাকতে হবে। ঠিক এই একটা কারণে অনেককে পিছিয়ে যেতে দেখেছি।
৩। সৃজনশীল চিন্তা করার যোগ্যতা থাকতে হবে। অবশ্য কাজ করতে করতে সৃজনশীলতা অর্জন করা যায়।
৪। পর্যাপ্ত সময় লাগবে। সময় না থাকলে আপনি কোনোভাবেই এ ক্ষেত্রে সফল হতে পারবেন না।
৫। ইংরেজী জানতে হবে। তবে জানাটা মোটামুটি হলেও চলবে। কারণ পরবর্তীতে কাজ করার সময় ক্লায়েন্টদের চাহিদা বুঝতে এটা আপনাকে সাহায্য করবে।
৬। পরিশ্রম করার মানসিকতা থাকতে হবে।
৭। এছাড়া কিছু গুরুত্বপূর্ণ সফটওয়্যার থাকতে হবে। যেমন, নোটপ্যাড++, সাবলাইম টেক্সট ২ বা এডবি ড্রিমওয়েবার। তবে আমার ব্যক্তিগত পরামর্শ প্রাথমিক শিক্ষানবীশ অবস্থায় শুধু নোটপ্যাড++ ব্যবহার করাই উত্তম।
ওয়েব ডিজাইন শিখতে হলে যা যা জানতে হবে:
▬▬▬▬۩۞۩▬▬▬▬
১। HTML বা HyperText Markup Language জানতে হবে। এটার কাজ মূলত কিছু ট্যাগ ব্যবহার করে ওয়েব পেজ গঠন করা । এগুলো মানুষ পড়তে পারে । প্রোগ্রামিং ভাষা এর মত হাবিজাবি হ-জ-ব-র-ল ভাষা না । এগুলো তে কিছু পরিচিত শব্দ ব্যবহার করা হয় । এইচটিএমএল কে ওয়েবপেজ এর কংকাল বলা হয় । এটি ওয়েবপেজ এর গঠন তৈরি করে ।
২। CSS বা Cascading Style Sheet জানতে হবে । এটি দিয়ে মুলত ওয়েবপেজ গুলো ডিজাইন করা হয় । শুধু এইচটিএমএল দিয়ে ওয়েবপেজ বানালে তা শুধু কিছু লেখা মাত্র দেখা যাবে। কিন্তু সেই ওয়েবপেজ কে সুন্দর রুপ দিতে হলে আপনার দরকার হবে সিএসএস। এইচটিএমএল হচ্ছে ওয়েব পেজ এর কংকাল আর সিএসএস হচ্ছে তার উপরে মাংস, চামড়া ইত্যাদি। বুঝতেই পারছেন, সিএসএস ছাড়া এইচটিএমএল একটি কংকাল এর মতই দেখাবে । সিএসএস এইচটিএমএল এর গঠনে রুপ দেয় ।
৩। Adobe photoshop: এটা তো সবাই জানেন এটা দিয়ে কি করে! এখানে যে মুল কাজটি শিখতে হবে তাহল পিএসডি থেকে এইচটিএমএল টেমপ্লেট (PSD to HTML) বানানো তবে কোন ওয়েব সাইটের ব্যানার, ব্যাকগ্রাউন্ড ইমেজ, বাটন ইত্যাদি create করতেও এটা লাগবে!
৪। HTML5 ও CSS3 জানতে হবে। এগুলো মূলত যথাক্রমে HTML ও CSS এর নতুন ভার্সন। এগুলো শিখতে হলে অবশ্যই প্রথমে HTML ও CSS সম্বন্ধে জানতে হবে।
৫। এছাড়া সিএসএস ফ্রেমওয়ার্ক, রেস্পন্সিভ ডিজাইন ইত্যাদি শিখতে হবে ।
ওয়েব ডেভেলপমেন্ট শিখতে হলে যা যা জানতে হবে:
▬▬▬▬۩۞۩▬▬▬▬
১। ওয়েব ডিজাইন সম্পর্কে প্রাথমিক ধারণা থাকতে হবে।
২। JavaScript জানতে হবে। এটি একটি ক্লায়েন্ট সাইড স্ক্রিপটিং ভাষা । এটিকে ব্রাউজার এর ভাষা ও বলা হয় । জাভাস্ক্রিপ্ট শিখলে আপনি চলে যাবেন ওয়েব ডিজাইন এর একটি নতুন অধ্যায়ে। ভালো মানের ওয়েব ডিজাইনার হতে হলে আপনাকে অবশ্যই জাভাস্ক্রিপ্ট শিখতে হবে ।
৩। jQuery জানতে হবে। একটি জাভাস্ক্রিপ্ট লাইব্রেরী । জেকুয়েরি আপনার ওয়েবসাইট এ জাভাস্ক্রিপ্ট এর ব্যবহার সহজ করে দেয় । যে প্রোগ্রাম টি করতে আপনার ১০০ লাইন এর জাভাস্ক্রিপ্ট লিখতে হবে, জেকুয়েরি দিয়ে আপনি সেটা এক লাইন এ করতে পারেন । আপনি যদি জাভাস্ক্রিপ্ট পারেন, তবে জেকুয়েরি শেখা আপনার জন্য সহজ হবে । জেকুয়েরি শিখতে হলে আপনাকে এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট জানতে হবে ।
৪। PHP জানতে হবে। পিএইচপি (PHP:Hypertext Preprocessor ) একটা সার্ভার সাইড,ক্রস প্লাটফর্ম, HTML-embedded স্ক্রিপ্টিং ভাষা। স্ক্রিপ্টিং হচ্ছে প্রোগ্রামের আরেকটা সমার্থক শব্দ। এটা হচ্ছে কিছু instruction এর সেট যেটা run করলে স্বয়ংক্রিয় ভাবে কিছু কাজ হয়।“সার্ভার সাইড” বলতে বুঝানো হচ্ছে এই স্ক্রিপ্ট গুলোকে ইউজারের কম্পিউটার থেকে নিয়ন্ত্রনের বদলে সার্ভার থেকে handle করা। যখন কেউ পিএইচপি ওয়েব পেজ ভিজিট করবে তখন ওয়েব সার্ভার পিএইচপি কোডগুলিকে কিছু Process করবে যেমন: যেটা দেখানো দরকার (Picture,Content etc) সেটা দেখাবে আর যেটাকে লুকানো দরকার (math calculation,file operation etc) তা লুকাবে এবং শেষে HTML এ রুপান্তর করে ইউজারের ওয়েব ব্রাউজারে পাঠাবে।
৫। ডেটাবেস সম্পর্কে জানতে হবে। পিএইচপি দিয়ে কিভাবে ডেটাবেস সংযোগ করতে হয়, এসকিউয়েল দিয়ে ডেটাবেস বানানো অর্থ্যাৎ ডেটাবেস চালিত সাইট তৈরী করতে জানতে হবে।
৬। পিএইচপি এর যেকোন একটা ফ্রেমওয়ার্ক যেমন কোডইগনাইটার (আরও আছে যেমন কেক পিএইচপি, জেন্ড ফ্রেমওয়ার্ক, সিমফনি, ওয়াই আইআই, কোহানা ইত্যাদি একটা শিখলেই চলবে) সম্পর্কে জানতে হবে। কোন ফ্রেমওয়ার্ক ছাড়াও ওয়েব এপ্লিকেশন তৈরী করতে পারবেন তবে এতে বেশি সময় লাগবে এবং বেশি কোড লিখতে হবে।
৭। XML জানতে হবে। এর অর্থ হচ্ছে eXtensible Markup Language.এটা ডেটা বহন (Transport) এবং সংরক্ষন করার জন্য ব্যাবহার করা হয়। এটা জানা খুব গুরত্বপূর্ন কিন্তু শেখা খুব সহজ। এর সাহায্যে সহজেই নিজের মত করে ডেটাকে সংগায়িত করা যায়। নিজের মত করে মানে এর ভিতরের লেখা এবং বাইরের ট্যাগ নিজের মত করে করা যায়। XML শেখার আগে আপনাকে HTML এবং Javascript জানতে হবে।
এছাড়া ওয়েব ডেভেলপিং এ নিজেকে উন্নততর করতে আরো যেসব বিষয়ে জানা লাগবে:
CMS সম্পর্কে জানতে হবে। CMS হচ্ছে “কন্টেন্ট ম্যানেজমেন্ট সিস্টেম”. অর্থাৎ, এটি দিয়ে কোন কোডিং ছাড়াই ওয়েবসাইট নিয়ন্ত্রন করা যায় । ধরুন আপনার এমন একটি ওয়েবসাইট দরকার যেটিতে আপনি প্রতিদিন নতুন কিছু যোগ করবেন । এখন প্রতিদিন ওয়েবসাইট এর কোড এডিট করে নতুন কিছু যোগ করা সম্ভব নয় । সে ক্ষেত্রে আপনি বিভিন্ন CMS ব্যবহার করতে পারেন । এসব CMS গুলো এমন ভাবে কোড করা থাকে, যেন পরবর্তীতে আপনাকে কোন কোডিং করতে হয় না । সহজেই আপনি আপনার ওয়েবসাইট নিয়ন্ত্রন করতে পারবেন । অনেক জনপ্রিয় ওয়েবসাইট এবং ব্লগ CMS দিয়ে তৈরি । কিছু জনপ্রিয় CMS হচ্ছে ওয়ার্ডপ্রেস, জুমলা, ড্রুপাল ইত্যাদি । ওয়ার্ডপ্রেস টা এর মধ্যে সবচেয়ে বেশি জনপ্রিয় । কারণ এটি ব্যবহার করা খুব সহজ এবং ইউজার ফ্রেন্ডলি । ওয়েব ডিজাইনার হতে হলে আপনাকে অবশ্যই কমপক্ষে একটি CMS এর উপর ভাল ধারণা থাকতে হবে ।
=============================
যেভাবে ওয়েব ডেভেলপমেন্ট শিখবেন
▬▬▬▬۩۞۩▬▬▬▬
বাংলা ইংরেজি অনেক সাইট আছে এসবের টিউটোরিয়াল থেকে শিখতে পারবেন। এছাড়া Wrox বা Apress পাবলিকেশনের অনেক ভাল ভাল বই আছে সেগুলির সাহায্য নিতে হবে। ওয়েব ডেভেলপমেন্ট শেখার সবচেয়ে কার্যকরী কৌশলটি হল "বসে যান এবং একটা প্রজেক্ট তৈরী করুন" হতে পারে একটা ফোরাম, ব্লগ, ইউজার ম্যানেজমেন্ট সিস্টেম বা এই ধরনের কোন প্রজেক্ট। raw PHP দিয়ে করুন। এরপর সিএমএস বা ফ্রেমওয়ার্ক ডেভেলপমেন্টে যান।
ওয়েব ডেভেলপমেন্ট শিখতে অনেক সময় লাগবে, শেখা কঠিন এবং প্রচুর ধৈর্য্য সাথে আগ্রহ লাগবে। চাকরি ক্ষেত্রে বা ফ্রিল্যান্সিং এ ওয়েব ডেভেলপারের চাহিদা আকাশছোয়া। ভালো ডেভেলপার হতে পারলে আর পেছন ফিরে তাকাতে হবে না।
▬▬▬▬۩۞۩▬▬▬▬
ওয়েব ডিজাইন এবং ডেভেলপমেন্টের মাঝে আসলে পার্থক্য কতটুকু!
ফ্রন্টএন্ড ডেভেলপমেন্ট বা ওয়েব ডিজাইন:
========================
ফ্রন্টএন্ড বলতে ওয়েব ডেভেলপমেন্টের সেই অংশটিকেই বুঝায় যা আপনি দেখতে পারেন বা যার সাথে সরাসরি ইউজারের ইন্টারেক্ট হচ্ছে। ফ্রন্টএন্ড মূলত দুই প্রকারের:
১. ফ্রন্টএন্ড ডিজাইন এবং
২. ফ্রন্টএন্ড ডেভেলপমেন্ট
একটা সময় ছিল যখন ডেভেলপমেন্ট বলতে শুধু ব্যাকএন্ড ডেভেলপমেন্টকেই বুঝাত। কিন্তু সময়ের বিবর্তনে ওয়েব ডিজাইনের সীমা ফটোশপ, এইচটিএমএল এবং সিএসএস এর গন্ডি পেরিয়ে জাভাস্ক্রিপ্ট এবং জেকোয়েরিকেও ছুঁয়েছে। একটি ওয়েবসাইটের লোডিং টাইম কমিয়ে আরো ইন্টার্যায়ক্টিভ করতেই এগুলো ব্যবহার হয়। তাই যখন শুনবেন একজন ডেভেলপার “ওয়েব ডিজাইন” নিয়ে আলোচনা করছেন, বুঝে নিবেন ডিজাইনের পাশাপাশি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টও অন্তর্ভূক্ত আছে।
এখন আসি ফ্রন্টএন্ড বিষয়ক আসল কথায়। আগেই বলেছি, ব্রাউজারে যা দেখছেন তার সবকিছুই আসলে এইচটিএম, সিএসএস এবং জাভাস্ক্রিপ্ট এর কম্বিনেশন। যা কম্পিউটারের ব্রাউজার দ্বারা নিয়ন্ত্রিত হয়। এর মাঝে ফর্ম, ড্রপডাউন মেন্যু, বাটন, ট্রানসিশন, স্লাইডার, কন্টাক্ট ফর্ম অন্যতম।
আর ফ্রন্টএন্ড এ দেয়া তথ্যগুলো যখন সংরক্ষণের প্রশ্ন আসে তখনই প্রয়োজন হয় ব্যাকএন্ড টেকনোলোজির।
ব্যাকএন্ড ডেভেলপমেন্ট বা ওয়েব ডেভেলপমেন্ট:
ব্যাকএন্ড সাধারণত তিনটি অংশের সমন্বয়ে গঠিত:
১. সার্ভার
২.অ্যাপ্লিকেশন এবং
৩.ডাটাবেজ।
ফেসবুকে লগইন করার পর যে অংশটুকু দেখতে পান সেটি হল ফ্রন্টএন্ড, সেখানে একটি ছবি আপলোড করলে অ্যাপ্লিকেশন সেগুলোকে ব্যাকএন্ড এর ডাটাবেজ এ জমা করে। হয়তো প্রশ্ন জাগতে পারে, ডাটাবেজ জিনিসটা কি! আসলে ডাটাবেজকে তুলনা করতে পারেন বিশান আকৃতির একটি এক্সেল শীটের সাথে যা হয়তো অ্যারিজোনার কোন এক কম্পিউটারে(সার্ভারে) জমা আছে।
তারমানে আপনার সকল ইনফরমেশন বা তথ্য সার্ভারের ডাটাবেজে সংরক্ষিত হচ্ছে। আর যখনি আপনি লগইন করছেন, সেই সংরক্ষিত তথ্যগুলোই প্রদর্শিত হয়। আর এই পুরো কাজটিই নিয়ন্ত্রিত হয় ব্যাকএন্ড অ্যাপ্লিকেশনের মাধ্যমে। যারা এই অ্যাপ্লিকেশনগুলো তৈরী করে দেন তাদেরকেই বলা হয় ওয়েব ডেভেলপার(ব্যাকএন্ড)।
এই অ্যাপ্লিকেশনগুলো তৈরী করতে পিএইচপি, রুবি, পাইথন এই প্রোগ্রামিং ল্যাঙ্গুয়েজগুলো বেশি ব্যবহৃত হয়। প্রোগ্রামিংয়ের কাজটিকে আরো সোজা করতে “রুবি অন রেইল” বা “লারাভেল” এর মত ফ্রেমওয়ার্ক গুলো ব্যবহৃত হয়।
সিএমএস:
অনেক ওয়েব প্রফেশনালরা সিএমএস নিয়ে কাজ করেন। অনেকের মনে প্রশ্ন জাগতে পারে যে, এই সিএমএস জিনিসটা আসলে কি? ফ্রন্টএন্ড এবং ব্যাকএন্ড এর সম্মলিত ব্যবহারের একটি ভাল উদাহরণ হল সিএমএস, যেমন ওয়ার্ডপ্রেস। পিএইচপি দিয়ে তৈরী এই ওপেন সোর্স প্রোগ্রামটি ডাটাবেস সহ সার্ভারে ইনস্টল করতে হয়।
এই ওপেন সোর্স ফ্রেমওয়ার্কটিতে ওয়েবসাইটের প্রয়োজনীয় প্রোগ্রামগুলো আগে থেকেই তৈরী করা থাকে, নতুনভাবে আর তৈরী করতে হয়না। সিএসএস, জেকোয়ারী এবং জাভাস্ক্রিপ্ট ব্যবহার করে একজন ডিজাইনারকে শুধু এর আউটলুক এবং ফাংশনালিটিগুলোকে নিজের ব্যবহার উপযোগী করে সাজিয়ে নিতে হয়।
আশা করি ফ্রন্টএন্ড, ব্যাকএন্ড এবং সিএমএস ডেভেলপিং সম্পর্কিত বিষয়গুলো আপনাদের কাছে পরিষ্কার হয়ে এসেছে। পাশাপাশি ওয়েব ডিজাইন এবং ডেভেলপমেন্ট এর মাঝে পার্থক্য কি সেটাও বুঝতে পেরেছেন।
কেন এবং কিভাবে ডিজাইন করবেন মোবাইল রেসপন্সিভ ওয়েবসাইট?
▬▬▬▬۩۞۩▬▬▬▬
বিশ্বের প্রতিটি দেশে মোবাইল ইন্টারনেট ব্যবহার অনেকাংশে বেড়ে গেছে। এমনকি আমাদের দেশেও আমরা দেখছি প্রচুর পরিমাণ মানুষ মোবাইল ইন্টারনেট ব্যবহার করছে। এক পরিসংখ্যানে দেখা গেছে ২০১৫ সালের মধ্যে মার্কিন যুক্তরাষ্ট্রে মোবাইল ইন্টারনেট ব্যবহারকারীর সংখ্যা ডেস্কটপ ব্যবহারকারীদেরকে ছাড়িয়ে যাবে, তারপর রয়েছে ট্যাবলেট, এমনকি আজকাল টেলিভিশনেও মানুষ ইন্টারনেট ব্যবহার করতে শুরু করেছে। আর এ সকল কারণে বড় বড় কোম্পানিগুলো গ্রাহক আকৃষ্ট করবার লক্ষ্যে তাদের ওয়েবসাইটটিতে গ্রাহক যে কোন মাধ্যম ব্যবহার করে ভিজিট করলে যেন অভূতপূর্ব অভিজ্ঞতা অর্জন করতে পারে সেদিকে নজর দিতে শুরু করেছে। এক্ষেত্রে কিভাবে রেসপন্সিভ ডিজাইন (প্রতিক্রিয়াশীল নকশা) আমাদেরকে সাহায্য করতে পারে?
এর সাহায্য নিয়ে আমরা এমন একটি ওয়েব সাইট তৈরি করতে পারবো, যা বিভিন্ন স্ক্রিনের আকার লক্ষ্য করে নিজের প্রস্থ কম-বেশী করতে পারবে। প্রতিক্রিয়াশীল ডিজাইন ফ্লেক্সিবল গ্রিড এবং ক্লেভার স্টাইল ব্যবহার করে একই বিষয়বস্তু ব্যবহারকারীর কাছে প্রদর্শন করে থাকে, কিন্তু প্রদর্শন করে ব্যবহারকারীর ডিভাইসের আকার অনুযায়ী নিজের বিষয়বস্তুর (কনটেন্ট) বিন্যাস (ফরম্যাট) পরিবর্তন করবার মাধ্যমে।
কেন আপনি প্রতিক্রিয়াশীল সাইট-এর ডিজাইন করবেন?
▬▬▬▬۩۞۩▬▬▬▬
একজন গ্রাহক যখন আপনার কাছে তাদের ওয়েবসাইটের মোবাইল সমাধান চাইতে আসেন তখন অনেকগুলো পথই আপনার বিবেচনায় চলে আসে। তবে কোন পদ্ধতিটি আপনি গ্রহণ করবেন তা নির্ভর করবে গ্রাহকের ব্যবসায়ীক প্রয়োজনীয়তা এবং তাদের বাজেট; এর সাথে সাথে আপনাকে খেয়াল রাখতে হবে তাদের কোনো উপস্থিত সমাধান রয়েছে কিনা অথবা তাদের কোন সাইট ইতোমধ্যে রয়েছে কিনা। মোবাইল ওয়েবসাইট করতে হলে প্রতিক্রিয়াশীল ওয়েবসাইটই করতে হবে এটা ভাববার কোন কারণ নেই। তবে আপনি যদি স্ক্র্যাচ থেকে একটি ওয়েবসাইট তৈরি করতে শুরু করেন তাহলে একে একটি গুরুতর বিকল্প হিসেবে বিবেচনা করা উচিত হবে।
আপনি স্ক্র্যাচ থেকে শুরু করতে যাচ্ছেন:
======================
একটি সম্পূর্ণ নতুন ওয়েবসাইট অথবা ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ প্রক্রিয়া নয়। ওয়েবসাইটটি প্রকাশিত না হওয়া পর্যন্ত আপনার পক্ষে জানা সম্ভব নয় যে সাইটটি জনপ্রিয়তা পাবে কিনা, আর তাই মূল ওয়েবসাইটের সাথে আবার পৃথকভাবে একটা মোবাইল ওয়েবসাইট অথবা অ্যাপ্লিকেশন তৈরি করবার প্রকল্প হাতে নেয়া সময় অপচয় এবং অর্থ নষ্ট। তার চাইতে মূল ওয়েবসাইটটি জনপ্রিয়তা পাবার পর আপনি তৈরি করতে পারেন মোবাইল ওয়েবসাইট বা অ্যাপ্লিকেশন।
আপনি সাশ্রয়ী হতে চাইছেন:
========================
সলিড প্রতিক্রিয়াশীল (রেসপন্সিভ) সমাধানের জন্য ডিজাইন এবং অগ্রগামী-উন্নয়ন (ফ্রন্ট-এন্ড ডেভেলপমেন্ট) ক্ষেত্রে অতিরিক্ত সময়ের প্রয়োজন হবে, কিন্তু অ্যাপ্লিকেশন ডেভেলপমেন্টের ক্ষেত্রে ব্যাপারটা ততোধিক প্রভাব ফেলে না। একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করতে খুব বেশী হলে ২০-৩০ ভাগ সময় বেশি লাগে। কিন্তু তার পরেও দেখা যাচ্ছে মোবাইলের জন্য সম্পূর্ণরূপে আরেকটি ওয়েবসাইট তৈরি করবার চাইতে অনেক কম সময় লাগছে। এছাড়া এভাবে ডিজাইন করবার ফলে আপনাকে ডেভেলপ, পরিচালনা এবং রক্ষণাবেক্ষণ করতে হচ্ছে মাত্র একটি ওয়েবসাইট আর তার ফলে এ সবকিছুর পেছনে যে খরচ, তা কমে যাচ্ছে বহুলাংশে।
আপনি চান নতুন ডিভাইসগুলোর সাথে ওয়েবসাইটটি কাজ করবে:
============================
মোবাইলের জন্য নির্দিষ্ট ওয়েবসাইটটিকে চিনতে হবে নতুন ডিভাইস: আর তাই নতুন কোন ডিভাইস বের হবার সাথে সাথে আপনাকে আপডেট করতে হবে ওয়েবসাইটটিকে। আর এ মুহূর্তে যে পরিমাণে নতুন ডিভাইস বাজারে নামছে এর সাথে দৌড়ানো প্রায় অসম্ভব একটা বিষয়। এদিকে প্রতিক্রিয়াশীল ওয়েবসাইট শুধু চেনে ব্রাউজারের প্রস্থ সেহেতু নতুন কোন আপডেটের প্রয়োজন পড়ছে না। ফলে বুঝতেই পারছেন এটি অনেক বেশি ভবিষ্যৎ বান্ধব এবং আকার পরিবর্তনযোগ্য।
প্রস্তুত – প্রক্রিয়া
=============
এবার আশা যাক কিভাবে আমরা একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করব। আমরা ব্যাপারটা শিখব ম্যাকডোনাল্ড নামে একটা হোটেলের ওয়েবসাইট তৈরি করবার মাধ্যমে। ওয়েবসাইটটিতে দেয়া হয়েছে নতুন একটি সাইট স্ট্রাকচার, হোটেলের বিস্তৃত বিষয়বস্তু এবং নতুন একটা বুকিং ইঞ্জিন। এই ওয়েব সাইটটি তৈরিতে যে পদক্ষেপগুলো গ্রহণ করা হয়েছিলো সেগুলো এখানে দেয়া হল। এছাড়া প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির ক্ষেত্রে কি ধরণের বিষয় আপনাকে চিন্তা করতে হতে পারে সেটাও জানতে পারবেন এখান থেকে।
প্রয়োজনীয় পদক্ষেপগুলো:
গবেষণা/স্কোপিং: প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করবার জন্য আপনার অতিরিক্ত কি প্রয়োজন পড়বে।
অয়্যারফ্রেমিং: ভিন্ন ভিন্ন স্ক্রিনের প্রস্থকে মাথায় রেখে সাইটের গ্রিড স্ট্রাকচার এবং লেআউট কিরকম হবে বিবেচনা করুন ।
অনুভব করুন (লুক অ্যান্ড ফিল): কি ধরণের স্টাইল ব্যবহার করবেন তা ভাবুন।
সাইট নির্মাণ: HTML ও CSS এ কি কি সমস্যার সম্মুখীন হতে পারেন সে সম্পর্কে একটু চিন্তা করে নিন।
আসুন জেনে নেই ‘ওয়েব ডিজাইন’ ক্যারিয়ার কাদের জন্য?
===========================
অনেকেই মনে করে সিএসই (CSE) ব্যাকগ্রাউন্ড না হলে ওয়েব ডিজাইন শেখা কষ্টকর, এটা একশ ভাগ ভুল কথা। কম্পিউটার সায়েন্স নিয়ে যারা পড়াশোনা করে তাদের ক্যারিয়ার পাথ টা আসলে হওয়া উচিত একজন সফটওয়্যার ইঞ্জিনিয়ার। কিন্তু, খুব কম সংখ্যক’ই সফটওয়্যার ইঞ্জিনিয়ার হবার সুযোগটি পায়, কারন আমাদের দেশে কাজের সুযোগ সীমিত। গুগল, মাইক্রোসফট এর মত বড় বড় কোম্পানিতে বিভিন্ন দেশে বাংলাদেশের সেরা মেধাবীরা অনায়াসেই চাকরি পেয়ে যায়। কিন্তু এ দেশে বাকিরা ওয়েব ডেভেলপার হিসেবে কোম্পানি গুলোতে জয়েন করে ওয়েব অ্যাপ্লিকেশন, সফটওয়্যার ডেভেলপমেন্ট, ডেক্সটপ এপ্লিকেশন অথবা কোন টিম লিড হিসেবে কাজ করে। একজন ওয়েব ডেভেলপার কে আমরা প্রোগ্রামার’ও বলি।
তাহলে ওয়েব ডিজাইনার এর কাজ কি? কে হয় এই ওয়েব ডিজাইনার?
একটা সহজ উদাহরণ দিয়ে বিষয়টি এভাবে বলা যায়, ওয়েব ডিজাইনার হচ্ছে বাড়ি বানানোর পর চুন কাম থেকে শুরু করে সকল ইন্টেরিওর এর কাজগুলো যে করে। প্রোগ্রামার বাড়ি তৈরির জন্য ফাউন্ডেশন তোলা থেকে শুরু করে যাবতীয় স্ট্রাকচার টা দাড় করায়, যেটাকে আমরা একটা ওয়েব সাইটের প্রোগ্রামিং/কোডিং বলে থাকি যা ব্যাকএন্ড এ থাকে। আর ওয়েব সাইটের ফ্রন্ট এন্ড এ যা দেখি তা হচ্ছে ওয়েব ডিজাইন/ইউআই (ইউজার ইন্টারফেস) নামে পরিচিত।
কে শিখতে পারবে ওয়েব ডিজাইন?
========================
যে কেউ নূনতম শিক্ষিত, যার কম্পিটার এর বেসিক নলেজটুকু জানা আছে । এর জন্য এমনটি নয় যে অনেক ইংলিশ ভালো জানতে হবে কিংবা অনেক সফটওয়্যার জানতে হবে।
ওয়েব ডিজাইন শেখার জন্য যা প্রয়োজন : আগেই বলা হয়েছে।
এর সম্ভাবনাময় দিক গুলো :
===================
একজন ভালো ওয়েব ডিজাইনার এর চাহিদা অনেক। ওয়েব ডিজাইনার হয়ে কখনো চাকরির জন্য মাসের পর মাস বেকার বসে থাকতে হয় না। আসলে বসে থাকার প্রয়োজন’ও পরে না কারণ এটা আন্তর্জাতিক মানের একটি পেশা। অনলাইন এ ফ্রিলান্সিং কিংবা অফসাইট এ কন্ট্রাকচুয়াল কাজের অনেক সুযোগ এখানে আছে। বছর বছর প্রমোশন না থাকলেও, বেতনের বৃদ্ধির হারটা অনেক উর্ধগতি। এই পেশায় অভিজ্ঞতা দিয়ে মুল্য বিচার করা হয়। যার যত বেশি কাজের অভিজ্ঞতা বাড়তে থাকে তার যোগ্যতাও তত বেশি।
সফল ওয়েবসাইট তৈরীর জন্য প্রয়োজনীয় রেসিপি
=================================
সন্দেহ নেই, জীবনের সর্বক্ষেত্রে, আমরা বেশির ভাগ মানুষই সফলতা চাই। সফলতার সংজ্ঞা একেকজনের কাছে একেক রকম হতে পারে, তবে আপনি যে কাজই করুন না কেন সে কাজটি আপনাকেসহ আপনার চারপাশে যারা আছে তাদেরকেও আনন্দ দেবে এবং এটা নিঃসন্দেহে একটা বড় সফলতা। এবার ওয়েব সাইটের কথায় আসি। ধরুন আপনি একটি ওয়েব সাইট পরিচালনা করেন। আপনার একান্তই ব্যক্তিগত সাইট অথবা আপনার প্রতিষ্ঠান বা সংস্থার সাইট। আপনি নিশ্চয়ই চাইবেন এ ওয়েব সাইটটটি সবার কাছে আদরণীয় হোক, পরিণত হোক সবার গন্তব্যে? অন্তত যেসব মানুষের উদ্দেশে আপনি এটি পরিচালনা করছেন তাদেরতো বটেই! আগেভাগেই স্বীকার করে নেয়া ভাল, এটা সহজ কোনো কাজ নয়। তবে অসম্ভব কিছুও নয়। আসুন আমরা জেনে নিই, কোন কোন কৌশল অবলম্বন করলে আপনার ওয়েব সাইটটিকে করতে পারবেন সবার কাছে জনপ্রিয়, আদরণীয় ও গ্রহণীয়। একটা একটা করে শুনি ওয়েব সফলতার রেসিপি’গুলোর কথা।
১। আপনার কাজের জন্য নিখাদ আবেগ
একটা ওয়েব প্রজেক্ট দাঁড় করাতে সময় ও নিষ্ঠা লাগে। বহু নির্ঘুম রাত ও দিনের পরিশ্রমে তিল তিল করে দাঁড়ায় এটি। এতে সম্পৃক্ত আছে অসংখ্য ছোটবড় কাজ যেগুলো মনের আবেগ আর সবটুকু আন্তরিকতা ঢেলে দিয়ে করতে হয়। এ কারণেই কাজটার পেছনে নিজের আবেগকে পুরোপুরি ঢেলে দিতে হবে। নিজেকে প্রশ্ন করুন সে আবেগ, আন্তরিকতা আর সিরিয়াসনেস আপনার আছে কিনা।
২। বিষয় সম্বন্ধে স্পষ্ট জ্ঞান
আপনি একটা ইমেইল অ্যাপ্লিকেশন অথবা একটা ওয়েব প্রকাশনা, যাই তৈরি করুন না কেন, আপনার বিষয়ের আগাপাশতলা সম্বন্ধে আপনার জ্ঞান থাকতে হবে। হিসাবটা সহজ: আপনার বিষয়ে আপনার যথেষ্ট জ্ঞান থাকাটা আপনার বিশ্বাসযোগ্যতা তৈরির জন্য জরুরি। ইন্টারনেট ব্যবহারকারীরা ওয়েবের বিভিন্ন সম্পদ ও সেবা সম্বন্ধে খুবই সন্দেহপরায়ন থাকেন। আপনি যে বিশ্বাসযোগ্য এটি যদি তাদের কাছে প্রমাণ করতে পারেন তাহলে আর কিছু দেখতে হবে না। কিন্তু এই বিশ্বাসযোগ্যতা তৈরির জন্য আপনার বিষয়জ্ঞান পরিপূর্ণ হতে হবে।
৩। আপনার ইন্ডাস্ট্রিতে কী হচ্ছে খেয়াল রাখুন
আপনার চারপাশে কি হচ্ছে না হচ্ছে সেদিকে নজর রাখা খুবই জরুরি। এটা হচ্ছে নিজের বিষয় বা ক্ষেত্রে নিজেকে আপডেটেড রাখারই একটি অংশ এবং আপনার অডিয়েন্সও আপনার কাছে এটাই চায়। একটা জিনিস মনে রাখতে হবে। ওয়েব খরস্রোতা নদীর মতই নয়িত পরিবর্তনশীল। পরিবর্তনের বন্যায় ঘটে চলা নতুন নতুন ঘটনা সম্বন্ধে নিজেকে অবহিত রাখতে হবে। একদিন আগের তথ্যও বাতিল বলে প্রত্যাখ্যান করতে বাধবে না অনেকেরই। এ কারণে নিজেকে আপটুডেট-ই কেবল নয়, আপ-টু-দ্য-সেকেন্ড’রাখুন।
৪। মন দিয়ে অডিয়েন্সের কথা শুনুন
আপনার সাইটের ব্যবহারকারী বা ভিজিটরদের অনেক কিছুই বলার আছে। আপনার উন্নতির সঙ্গে তাদের উন্নতিও একসূত্রে বাঁধা। তাদের চাহিদা পূরণে আপনি সবসময়ই সচেষ্ট থাকেন এটাই তারা চান। ইন্টারনেটে কারো সমালোচনা করা সহজ বলে এখানে প্রচুর সমালোচনাকারীর খোঁজ মেলে। কিন্তু এদের মধ্যেই এমন অনেকে আছেন যাদের পরামর্শ ও আইডিয়াগুলো আপনার উপকারই করবে, আপনি যদি নিষ্ঠার সঙ্গে সেগুলো মেনে চলেন।
৫। আপনার ইন্ডাস্ট্রির মানুষজনের সঙ্গে যোগাযোগ বাড়ান
ওয়েব আমাদের সুযোগ করে দেয় দূর দূরান্তেও মানুষের কাছাকাছি আসার। একটা কথা বুঝতে হবে, সংযোগ মানেই উৎপাদনশীলতা, যোগাযোগ মানেই প্রবৃদ্ধি ও প্রগতি। কাজেই যত বেশি সম্ভব মানুষের সঙ্গে যোগাযোগ ও মিথস্ক্রয়িা বাড়াতে হবে। বিশেষ করে আপনি যে সেক্টরে কাজ করেন সে সেক্টরের বভিন্নি ব্যক্তি ও প্রতিষ্ঠান, তাদেও অবস্থান যেখানেই হোক না কেন, তাদের কাছে আপনার পৌঁছাতে হবে। সে আপনার প্রতিদ্বন্দ্বী বা বন্ধু যাই হোক না কেন। মনে রাখতে হবে, একজন আরেকজনের বিপক্ষে নয়, বরং একজন আরেকজনের সঙ্গে মিলে কাজ করলেই সবার জন্য সুবিধা। অন্যান্য ওয়েব সাইটের ডিসকাশন ফোরামে অংশ নিন, কারো সঙ্গে দলবদ্ধ হয়ে কাজ করার সুযোগ আছে কিনা খয়োল রাখুন। যোগাযোগের সামান্যতম সুযোগকেও অবহেলা করবেন না।
৬। ঝুঁকি নিন
অনেক ক্ষেত্রে প্রবৃদ্ধির অন্যতম বাধা হচ্ছে পরিবর্তনের ভয়। অনেকেই যে কোনো পরিবর্তনকে ভয় পান এবং এড়িয়ে চলতে চান। কিন্তু পরিবর্তনের প্রতি এই ভয় উদ্ভাবনের স্রোতকে আটকে রাখে। ওয়েবের দুনিয়াটাই এমন যে এখানে ঝুঁকি নিতে হয়। সব সময়, সব ক্ষেত্রে ঝুঁকি এড়ানোর মানসিকতা ওয়েব প্রজেক্টের সফলতার জন্য ক্ষতিকর। ওয়েবের ভুবনে যেখানে সবকিছুই চোখের পলকে পরিবর্তিত হয়ে যায় সেখানে কিছু একটাতে আটকে থাকার মানসিকতা আপনাকে অনেক পিছিয়ে দেবে। কাজেই প্রয়োজন হলে ঝুঁকি নিতে দ্বিধা করবেন না। এ ঝুঁকি আপনার জন্য বিশাল কোনো পুরস্কারও নিয়ে আসতে পারে।
৭। সঠিক সময় ব্যবস্থাপনা করুন
সময় এবং কাজের সঠিক ব্যবস্থাপনা যে না করে আগে বা পরে তাকে পস্তাতেই হয়। আপনার ওয়েব প্রজেক্টের গতিশীলতা বা প্রবৃদ্ধি নির্ভর করছে আপনি কতটা ভালভাবে আপনার সময়, শ্রম, সম্পদ আর কাজের ব্যবস্থাপনা করলেন। সুষ্ঠু ব্যবস্থাপনার কল্যাণে অনেক কঠিন বিপদকেও সামলানো যায়, সামান্য সম্পদও অসামান্য বলে বিবেচিত হয়। মনে রাখবেন, আপনার এবং আপনার কাজের বাধাহীন প্রবৃদ্ধির অন্যতম নিয়ামক হচ্ছে সময়। আপনার বাজেট এবং প্রযুক্তির মত এটাকে বড় একটি সম্পদ হিসেবে বিবেচনা করতে হবে।
৮। চোখ কান খোলা রাখুন
অলসতা এবং অবহেলা যে কোনো সময় মারাত্মক বিপদ ডেকে আনতে পারে। চোখ কান খোলা রাখুন। বিপদের আশঙ্কাকে যেমন অবহেলা করবেন না, তেমনি সুযোগের সম্ভাবনাকেও নয়। প্রবৃদ্ধির অন্যতম পূর্বশর্ত হচ্ছে ছোটখাট সুযোগকে কাজে লাগিয়ে বড় সুযোগ সৃষ্টি করা। বিভিন্নি প্রকাশনায় লেখালেখি করুন, প্যানেলে যোগ দিন, ব্লগ- এ লিখুন, অন্যান্য কর্মকাণ্ডে অংশ নিন। এরইমধ্যে নানারকম সুযোগ পেয়ে যাবেন আপনার নিজেকে এবং নিজের কাজকে প্রমোট করার। কোনো কিছুকেই অবহেলা করবেন না, তাহলে আর আফসোস করে পরে বলতে হবে না: আহা, আমিওতো ওটা করলে পারতাম!
নতুন ওয়েবসাইট তৈরির ক্ষেত্রে আবশ্যক ১০টি বিষয় সম্পর্কে জেনে নিন
▬▬▬▬۩۞۩▬▬▬▬
একটি ওয়েবসাইট ডিজাইন ও ডেভেলপমেন্ট হয়ে গেলে সেটির ডিজাইন কিংবা কনটেন্টের পরির্বতন করা বেশ ঝামেলার। তাই ওয়েবসাইট তৈরি করার শুরুতেই বেশ কিছু বিষয় ভালোভাবেই যুক্ত করা উচিত। এসব বিষয়গুলো ছাড়া ওয়েবসাইট অসম্পূর্ণ মনে হয়। এখানে নতুন ওয়েবসাইট তৈরির ক্ষেত্রে আবশ্যক ১০টি বিষয় সম্পর্কে জানানো হলো।
লোগো
একটি লোগো সংশ্লিষ্ঠ প্রতিষ্ঠান কিংবা ব্লগের পরিচয় বহন করে। প্রতিনিয়তই লোগো পাল্টানো সম্ভব না। তাই দায়সারাভাবে টেক্সট, লোগো মেকার অথবা ক্লিপআর্টের মাধ্যমে লোগো না তৈরি করে, ভালোমানের ডিজাইনার দিয়ে একটি সুন্দর ও প্রফেশনাল লোগো তৈরি করতে হবে। সেটি সাইটের হেডারে যথাযথ স্থানে বসাতে হবে, যাতে ভিজিটররা সহজেই লোগোটি দেখতে পারে।
ট্যাগলাইন
সংক্ষিপ্ত কথার মাধ্যমে ঐ ওয়েবসাইটটির সেবা বা কি ধরণের ওয়েবসাইট তা বোঝানোর জন্য ট্যাগলাইন ব্যবহার করা হয়। তাই একটি ছোট, সহজেই আকর্ষন করে এবং যাতে একজন ভিজিটার ট্যাগলাইন দেখেই সাইটি সম্পর্কে ধারণা করতে পারে এমন ট্যাগলাইন ব্যবহার করতে হবে।
পোর্টফোলিও
এটি মূলত ব্যক্তিগত কিংবা সেবাভিত্তিক প্রতিষ্ঠানের ক্ষেত্রে যুক্ত করতে হয়। তাই আপনার কিংবা আপনার প্রতিষ্ঠানের আগের কিছু কাজ বা সেবা পোর্টফোলিও হিসেবে যুক্ত করতে হবে। আপনি একজন প্রফেশনাল ওয়েব ডিজাইনার হলে আপনার ওয়েবসাইটে আগের করা কিছু কাজের নমুনা পোর্টফোলিও হিসেবে যুক্ত করতে পারেন। এছাড়া কোম্পানির ওয়েবসাইট হলে ঐ কোম্পানির ভালো কিছু ক্লায়েন্টের জন্য করা কাজ বা সেবা যুক্ত করা যেতে পারে।
সার্ভিস পেইজ
আপনি কিংবা আপনার প্রতিষ্ঠান কি ধরণের সেবা দিচ্ছে তা সার্ভিস পেইজে যুক্ত করতে হবে। কাঙ্খিত ক্রেতা যাতে ওয়েবসাইট দেখেই আপনার সেবা নিতে আগ্রহী হয় তেমনিভাবে সেবাগুলোর বিবরণ দিতে হবে। আপনার সেবা বা পণ্য নিলে ক্রেতারা কেনো লাভবান হবেন সেটি বর্ণনা দিতে হবে।
অ্যাবাউট আস পেইজ
আপনি কিংবা আপনার কোম্পানি কি, আপনার কোম্পানির মিশন, ভিশন, অতীত, আপনার কোম্পানির সদস্যদের সম্পর্কে এখানে তুলে ধরতে হবে। এককথায় আপনার কিংবা কোম্পানির সম্পর্কে যাতে এই পেইজ থেকে পুরো ধারণা দেওয়া যায় সেভাবে উপস্থাপন করতে হবে অ্যাবাউট/অ্যাবাউট আস পেইজ।
কনট্যাক্ট পেইজ
ভিজিটর আপনার কিংবা কোম্পানির ওয়েবসাইট দেখে যোগাযোগ করার ইচ্ছা পোষন করতে পারে। তাই কনট্যাক্ট পেইজে আপনার কিংবা আপনার প্রতিষ্ঠানের নাম, ঠিকানা, ইমেইল, ফোন নাম্বারসহ যোগাযোগের অন্যান্য মাধ্যমে যেমন ফেইসবুক পেইজ/আইডি, টুইটার অ্যাকাউন্ট, স্কাইপ অ্যাকাউন্ট ইত্যাদি যুক্ত করতে হবে। সম্ভব হলে গুগল ম্যাপের মাধ্যমে ঠিকানা দেখিয়ে দেওয়া যেতে পারে। এছাড়া ভিজিটর যাতে সহজেই মেইল অথবা মেসেজ পাঠাতে পারে তার জন্য একটি কনট্যাক্ট ফরমও বসানো যেতে পারে।
টেস্টিমোনিয়াল
ব্যবসায় কিংবা সেবার ক্ষেত্রে এটি একটি গুরুত্বপূর্ণ বিষয়। আপনার পুরাতন ক্লায়েন্ট আপনার কাজ, পণ্য বা সেবা নিয়ে কেমন উপকৃত হয়েছে, তাদের মন্তব্য কি এটা টেস্টিমোনিয়াল পেইজে যুক্ত করতে হবে। আপনার সন্তুষ্ঠ ক্লায়েন্টের এমন মন্তব্যের মাধ্যমে আরও নতুন ক্লায়েন্ট পাওয়ার সুযোগ তৈরি হবে।
সাইটম্যাপ
একটি ওয়েবসাইটকে সার্চ ইঞ্জিনের কাছে সম্পূর্ণরুপে সপে দেওয়ার জন্য সাইটম্যাপ জরুরী। এর ফলে সার্চ ইঞ্জিন সহজেই আপনার ওয়েবসাইটের সকল পেইজ, পোস্ট দ্রুত ইনডেস্ক করতে পারবে ও সার্চ ইঞ্জিন ব্যবহারকারীদের কাছে তুলে ধরতে পারবে। ওয়েবসাইটের ফুটার কিংবা উপরের মেনুতে একটি পেইজের মাধ্যমে সাইটম্যাপ যুক্ত করা যেতে পারে।
সোশ্যাল মিডিয়া লিংক
হালের যোগাযোগ মাধ্যম হিসেবে ফেইসবুক, টুইটার, লিংকডইন, ইউটিউবের কোনও জুড়ি নেই। আপনার কিংবা আপনার প্রতিষ্ঠানের সঙ্গে অনেকেই আপডেটের থাকতে চাইবেন। আপনিও চাইবেন যাতে আপনার এসব সোশ্যাল মিডিয়ার মাধ্যমে ভিজিটররা সযুক্ত থাকতে পারে, তাদের কাছে আপনার সেবা পৌছে যাক। এজন্য সাইটের হেডার, ফুটার অথবা সাইডবারে সোশ্যাল মিডিয়া লিংকগুলো যুক্ত করতে হবে। মনে রাখতে হবে এগুলোতে যাতে সহজেই ভিজিটর দেখতে ও ক্লিক করতে পারেন।
সার্চ সুবিধা
বিশেষ করে আপনার সাইটটি যদি একটি ব্লগ, নিউজপেপার কিংবা কনটেন্ট ভিত্তিক ওয়েবসাইট হয় সেক্ষেত্রে সার্চ সুবিধা যুক্ত করতে হবে। ভিজিটর হয়তোবা পুরাতন কোনও পোস্ট দেখতে চাইবেন। সেক্ষেত্রে একটার পর একটা পেইজ কিংবা পোস্ট ক্লিক করে খুঁজে পাওয়া ভোগান্তিকর। তাই ভিজিটররা যাতে সহজেই একটি লেখা বা কনটেন্ট খুঁজে পেতে পারে তার জন্য হেডারে কিংবা সহজেই দেখা যায় এমন স্থানে সার্চ অপশন যুক্ত করতে হবে।
▬▬▬▬۩۞۩▬▬▬▬
তথ্যসূত্রঃ ইন্টেরনেটের বিভিন্ন সাইট
▬▬▬▬۩۞۩▬▬▬▬
▬▬▬▬۩۞۩▬▬▬▬
ওয়েবসাইটের বিভিন্ন অংশ ও গঠন
====================
একটি ওয়েবসাইটকে বিভিন্ন অংশে ভাগ করা যায়। একটি ওয়েবসাইটের বৈশিষ্ট্য অনুযায়ী একে কখন Hierarchical, Network বা Linear অথবা এগুলোর সম্মিলিত উপায়ে বিভিন্নভাবে ভাগ করা হয়ে থাকে। এখানে এই কৌশলগুলো আলোচনা করব।
Hierarchical
• এই কৌশল ব্যবহার করে ওয়েবসাইটকে বিভিন্ন অংশে ভাগ করা হয়ে থাকে যাতে একজন ভিজিটর সহজেই বুঝতে পারে কোন অংশে তার প্রয়োজনীয় তথ্য আছে। এই কৌশলে ওয়েবপেইজগুলোকে এমনভাবে লিঙ্ক করা হয় যাতে এগুলো বিভিন্ন শাখায় ভাগ করা থাকে। Yahoo.com ওয়েবসাইটটি এই কৌশল ব্যবহার করে বিভিন্ন অংশে ভাগ করা হয়েছে।
Network
• এখানে সবগুলো ওয়েবপেইজের সাথেই সবগুলোর লিঙ্ক থাকে অর্থাৎ একটি মেনু পেইজের সাথে যেমন অন্যান্য পেইজের লিঙ্ক থাকবে তেমন প্রতিটি পেইজ তাদের নিজেদের সাথেও মেইন পেইজের লিঙ্ক থাকবে। ফ্রেম ব্যবহার করে তৈরী করা ওয়েবপেইজগুলো এই নেটওয়ার্কের মাধ্যমে লিঙ্ক করা হয়ে থাকে যাতে একটি ছোট ফ্রেমের মধ্যে অন্যান্য পেইজের লিঙ্কগুলো মেনু আকারে রাখা হয়। এই ফ্রেমটি সাধারণত স্থির থাকে এবং কোন একটি লিঙ্ক নির্বাচন করলে ঐ পেইজটি একটি অপেক্ষাকৃত বড় ফ্রেমের মধ্যে দেখায়।
Linear
• যখন কোন ওয়েবসাইটের বিভিন্ন পেইজে ভিজিটে একটি নির্দিষ্ট ক্রমানুসারে চালনা করার প্রয়োজন হয় তখন Linear গঠনটি ব্যবহার করা হয়। কোন পেইজের পর কোন পেইজে যাওয়া যাবে তা ওয়েবপেইজের ডিজাইনার ঠিক করে থাকে। পেইজগুলোতে Next,Previous বা Back এবং Top, Last ইত্যাদি কয়েকটি লিঙ্কের মাধ্যমে ভিজিটর এক পেইজ দেখতে পারে। এই কৌশলের মাধ্যমে কোন শিক্ষামূলক বিষয়বস্তু যেমন বই,ম্যানুয়াল ইত্যাদি সাইটে পাব্লিশ করা হয়ে থাকে।
Combination
• কখনও কোন একটি কৌশল ব্যবহার করে একটি ওয়েবসাইট তৈরী করা হয় না। বরং একাধিক ডিজাইনের সমন্বয়ে একটি ওয়েবসাইট ডিজাইন করা হয়ে থাকে। Hierarchical টেকনিক ব্যবহার করে সাইট ডিজাইন করলে তা খুব বেশি দর্শনীয় হয় না। আবার শুধু নেটওয়ার্ক টেকনিক ব্যবহার করে তৈরী করা সাইট হার্ড-ডিস্কে বেশি জায়গা দখল করে। তাই একাধিক কৌশল ব্যবহার করে সাইট তৈরী করা হয়। তবে এক ওয়েবপেইজ থেকে আরেক ওয়েবপেইজে যাওয়ার জন্য যা ব্যবহার করা যেমন লিঙ্ক, বাটন, মেনু ইত্যাদি(এদেরকে বলা হয় Navigational টুল) অবশ্যই স্পষ্ট হতে হবে। যদি লিঙ্কগুলো কোন পেইজের উপরে বাম দিকে দেয়া হয় তবে একই লিঙ্ক পেইজের নিচেও দেওয়া উচিত।
ওয়েব ডিজাইন ও ডেভেলপমেন্ট প্রাথমিক কথা
▬▬▬▬۩۞۩▬▬▬▬
ওয়েব ডিজাইন কি
ওয়েব ডিজাইন হচ্ছে একটা ওয়েবসাইটের জন্য বাহ্যিক অবয়ব তৈরী করা। ওয়েব ডিজাইনারের মুল কাজ একটা সাইটের জন্য টেমপ্লেট বানানো, এখানে কোন এপ্লিকেশন থাকবেনা। যেমন লগিন সিস্টেম, নিউজলেটার সাইনআপ, পেজিনেশন, ফাইল আপলোড করে ডেটাবেসে সেভ করা, ইমেজ ম্যানিপুলেশন, যদি সাইটে বিজ্ঞাপন থাকে তাহলে প্রতিবার পেজ লোড হওয়ার সময় বিজ্ঞাপনের পরিবর্তন এগুলি এপ্লিকেশন, ওয়েব এপ্লিকেশন।এসব তৈরী করতে হয় প্রোগ্রামিং ল্যাংগুয়েজ দিয়ে। কোন প্রকার এপ্লিকেশন ছাড়া একটা সাইট তৈরী করা এটাই ওয়েব ডিজাইন, এধরনের ডিজাইনকে বলতে পারেন স্টাটিক ডিজাইন। ওয়েব ডিজাইনের জন্য এই ধারনাটি সাধারনত ব্যবহৃত হচ্ছে।
যেভাবে ওয়েব ডিজাইন শিখবেন
▬▬▬▬۩۞۩▬▬▬▬
বিভিন্ন ওয়েব সাইটের টিউটোরিয়াল থেকে ওয়েব ডিজাইন ভালভাবে শিখতে পারবেন। বাংলা ইংরেজি অনেক সাইট আছে এসব শেখার। ওয়েব ডিজাইন শেখা বেশ সহজ, কয়েকমাসেই শেখা সম্ভব। ভালভাবে শিখতে পারলে ওয়েব ডিজাইনের উপর প্রচুর চাকরি এবং ফ্রিল্যান্সিং এ হাজার হাজার কাজ পাওয়া যায়।
ওয়েব ডেভেলপমেন্ট কি
▬▬▬▬۩۞۩▬▬▬▬
ওয়েব ডেভেলপমেন্ট হচ্ছে ওয়েবসাইটের জন্য এপ্লিকেশন তৈরী করা। উপরে যে এপ্লিকেশনগুলির উল্লেখ করেছি এধরনের আরো হাজারো এপ্লিকেশন আছে, ওয়েব ডেভেলপারকে এসব এপ্লিকেশন তৈরী করতে হবে। যদি ফ্রিল্যান্সিং করেন তাহলে ক্লাইন্টের চাহিদা অনুযায়ী এমনও এপ্লিকেশন তৈরী করা লাগতে পারে যার অস্তিত্ব পৃথিবীতে নেই ।এই বিষয়টি বেশি চ্যালেন্জিং এবং ডাইনামিক। অর্থ্যাৎ আপনাকে এপ্লিকেশন ডিজাইন করতে হবে। তাই ওয়েব ডেভেলপমেন্ট কে আরও সুনির্দিষ্ট করে বলা যায় ওয়েব এপ্লিকেশন ডেভেলপমেন্ট।
এবার আসুন আমরা জানি কোনটা শিখবেন,
---------------------------------
ওয়েব ডিজাইন নাকি ডেভেলপমেন্ট?
▬▬▬▬۩۞۩▬▬▬▬
আমাদের দেশের অনেককেই দেখা যায় ডিজাইন ও ডেভেলপমেন্ট এর মধ্যে পার্থক্য বুঝে না। অথচ দুইটা সম্পূর্ণ আলাদা জিনিস। একটা দৃশ্যমান হয় আর আরেকটা প্রাণ দেয়। যেমন, ফেসবুক দেখতে কেমন, কোথায় ছবি থাকবে, কোথায় চ্যাট বক্স থাকবে, কোথায় হোম বাটন থাকবে, কোনটার রং কেমন হবে ইত্যাদি হচ্ছে ওয়েব ডিজাইন এর কাজ । আর ফেসবুক এ স্ট্যাটাস লিখে দিলেই তা সবার কাছে পৌঁছে যাবে, ইমেইল পাসওয়ার্ড দিয়ে লগিন ক্লিক করলেই লগিন হয়ে যাবে, লাইক এ ক্লিক করলে একটা লাইক যোগ হবে এবং মালিকের কাছে লাইক এর নোটিফিকেশন চলে যাবে, ইত্যাদি ডেভেলপমেন্ট এর কাজ । এখন কথা হচ্ছে আপনি যদি ডেভেলপার হতে চান তাহলে আপনাকে অবশ্যই ওয়েব ডিজাইন সম্পর্কে মোটামুটি ধারণা থাকতে হবে, নইলে কাজ করতে অনেক সময় সমস্যা হতে পারে।
নিচে ওয়েব ডিজাইন ও ডেভেলপ শিখতে হলে যা যা লাগবে ও জানতে হবে তা ধারাবাহিক ভাবে দেয়া হলো।
ওয়েব ডিজাইন ও ডেভেলপমেন্ট শিখতে হলে যা যা লাগবে:
==============================
১। প্রথমেই আপনাকে ডিজাইন ও ডেভেলপমেন্ট কি সে সম্বন্ধে ধারণা থাকতে হবে। ব্যাপারটা ভালোভাবে বুঝতে হবে ।
২। প্রচুর ধৈর্য্য শক্তি ও মনোযোগ থাকতে হবে। ঠিক এই একটা কারণে অনেককে পিছিয়ে যেতে দেখেছি।
৩। সৃজনশীল চিন্তা করার যোগ্যতা থাকতে হবে। অবশ্য কাজ করতে করতে সৃজনশীলতা অর্জন করা যায়।
৪। পর্যাপ্ত সময় লাগবে। সময় না থাকলে আপনি কোনোভাবেই এ ক্ষেত্রে সফল হতে পারবেন না।
৫। ইংরেজী জানতে হবে। তবে জানাটা মোটামুটি হলেও চলবে। কারণ পরবর্তীতে কাজ করার সময় ক্লায়েন্টদের চাহিদা বুঝতে এটা আপনাকে সাহায্য করবে।
৬। পরিশ্রম করার মানসিকতা থাকতে হবে।
৭। এছাড়া কিছু গুরুত্বপূর্ণ সফটওয়্যার থাকতে হবে। যেমন, নোটপ্যাড++, সাবলাইম টেক্সট ২ বা এডবি ড্রিমওয়েবার। তবে আমার ব্যক্তিগত পরামর্শ প্রাথমিক শিক্ষানবীশ অবস্থায় শুধু নোটপ্যাড++ ব্যবহার করাই উত্তম।
ওয়েব ডিজাইন শিখতে হলে যা যা জানতে হবে:
▬▬▬▬۩۞۩▬▬▬▬
১। HTML বা HyperText Markup Language জানতে হবে। এটার কাজ মূলত কিছু ট্যাগ ব্যবহার করে ওয়েব পেজ গঠন করা । এগুলো মানুষ পড়তে পারে । প্রোগ্রামিং ভাষা এর মত হাবিজাবি হ-জ-ব-র-ল ভাষা না । এগুলো তে কিছু পরিচিত শব্দ ব্যবহার করা হয় । এইচটিএমএল কে ওয়েবপেজ এর কংকাল বলা হয় । এটি ওয়েবপেজ এর গঠন তৈরি করে ।
২। CSS বা Cascading Style Sheet জানতে হবে । এটি দিয়ে মুলত ওয়েবপেজ গুলো ডিজাইন করা হয় । শুধু এইচটিএমএল দিয়ে ওয়েবপেজ বানালে তা শুধু কিছু লেখা মাত্র দেখা যাবে। কিন্তু সেই ওয়েবপেজ কে সুন্দর রুপ দিতে হলে আপনার দরকার হবে সিএসএস। এইচটিএমএল হচ্ছে ওয়েব পেজ এর কংকাল আর সিএসএস হচ্ছে তার উপরে মাংস, চামড়া ইত্যাদি। বুঝতেই পারছেন, সিএসএস ছাড়া এইচটিএমএল একটি কংকাল এর মতই দেখাবে । সিএসএস এইচটিএমএল এর গঠনে রুপ দেয় ।
৩। Adobe photoshop: এটা তো সবাই জানেন এটা দিয়ে কি করে! এখানে যে মুল কাজটি শিখতে হবে তাহল পিএসডি থেকে এইচটিএমএল টেমপ্লেট (PSD to HTML) বানানো তবে কোন ওয়েব সাইটের ব্যানার, ব্যাকগ্রাউন্ড ইমেজ, বাটন ইত্যাদি create করতেও এটা লাগবে!
৪। HTML5 ও CSS3 জানতে হবে। এগুলো মূলত যথাক্রমে HTML ও CSS এর নতুন ভার্সন। এগুলো শিখতে হলে অবশ্যই প্রথমে HTML ও CSS সম্বন্ধে জানতে হবে।
৫। এছাড়া সিএসএস ফ্রেমওয়ার্ক, রেস্পন্সিভ ডিজাইন ইত্যাদি শিখতে হবে ।
ওয়েব ডেভেলপমেন্ট শিখতে হলে যা যা জানতে হবে:
▬▬▬▬۩۞۩▬▬▬▬
১। ওয়েব ডিজাইন সম্পর্কে প্রাথমিক ধারণা থাকতে হবে।
২। JavaScript জানতে হবে। এটি একটি ক্লায়েন্ট সাইড স্ক্রিপটিং ভাষা । এটিকে ব্রাউজার এর ভাষা ও বলা হয় । জাভাস্ক্রিপ্ট শিখলে আপনি চলে যাবেন ওয়েব ডিজাইন এর একটি নতুন অধ্যায়ে। ভালো মানের ওয়েব ডিজাইনার হতে হলে আপনাকে অবশ্যই জাভাস্ক্রিপ্ট শিখতে হবে ।
৩। jQuery জানতে হবে। একটি জাভাস্ক্রিপ্ট লাইব্রেরী । জেকুয়েরি আপনার ওয়েবসাইট এ জাভাস্ক্রিপ্ট এর ব্যবহার সহজ করে দেয় । যে প্রোগ্রাম টি করতে আপনার ১০০ লাইন এর জাভাস্ক্রিপ্ট লিখতে হবে, জেকুয়েরি দিয়ে আপনি সেটা এক লাইন এ করতে পারেন । আপনি যদি জাভাস্ক্রিপ্ট পারেন, তবে জেকুয়েরি শেখা আপনার জন্য সহজ হবে । জেকুয়েরি শিখতে হলে আপনাকে এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট জানতে হবে ।
৪। PHP জানতে হবে। পিএইচপি (PHP:Hypertext Preprocessor ) একটা সার্ভার সাইড,ক্রস প্লাটফর্ম, HTML-embedded স্ক্রিপ্টিং ভাষা। স্ক্রিপ্টিং হচ্ছে প্রোগ্রামের আরেকটা সমার্থক শব্দ। এটা হচ্ছে কিছু instruction এর সেট যেটা run করলে স্বয়ংক্রিয় ভাবে কিছু কাজ হয়।“সার্ভার সাইড” বলতে বুঝানো হচ্ছে এই স্ক্রিপ্ট গুলোকে ইউজারের কম্পিউটার থেকে নিয়ন্ত্রনের বদলে সার্ভার থেকে handle করা। যখন কেউ পিএইচপি ওয়েব পেজ ভিজিট করবে তখন ওয়েব সার্ভার পিএইচপি কোডগুলিকে কিছু Process করবে যেমন: যেটা দেখানো দরকার (Picture,Content etc) সেটা দেখাবে আর যেটাকে লুকানো দরকার (math calculation,file operation etc) তা লুকাবে এবং শেষে HTML এ রুপান্তর করে ইউজারের ওয়েব ব্রাউজারে পাঠাবে।
৫। ডেটাবেস সম্পর্কে জানতে হবে। পিএইচপি দিয়ে কিভাবে ডেটাবেস সংযোগ করতে হয়, এসকিউয়েল দিয়ে ডেটাবেস বানানো অর্থ্যাৎ ডেটাবেস চালিত সাইট তৈরী করতে জানতে হবে।
৬। পিএইচপি এর যেকোন একটা ফ্রেমওয়ার্ক যেমন কোডইগনাইটার (আরও আছে যেমন কেক পিএইচপি, জেন্ড ফ্রেমওয়ার্ক, সিমফনি, ওয়াই আইআই, কোহানা ইত্যাদি একটা শিখলেই চলবে) সম্পর্কে জানতে হবে। কোন ফ্রেমওয়ার্ক ছাড়াও ওয়েব এপ্লিকেশন তৈরী করতে পারবেন তবে এতে বেশি সময় লাগবে এবং বেশি কোড লিখতে হবে।
৭। XML জানতে হবে। এর অর্থ হচ্ছে eXtensible Markup Language.এটা ডেটা বহন (Transport) এবং সংরক্ষন করার জন্য ব্যাবহার করা হয়। এটা জানা খুব গুরত্বপূর্ন কিন্তু শেখা খুব সহজ। এর সাহায্যে সহজেই নিজের মত করে ডেটাকে সংগায়িত করা যায়। নিজের মত করে মানে এর ভিতরের লেখা এবং বাইরের ট্যাগ নিজের মত করে করা যায়। XML শেখার আগে আপনাকে HTML এবং Javascript জানতে হবে।
এছাড়া ওয়েব ডেভেলপিং এ নিজেকে উন্নততর করতে আরো যেসব বিষয়ে জানা লাগবে:
CMS সম্পর্কে জানতে হবে। CMS হচ্ছে “কন্টেন্ট ম্যানেজমেন্ট সিস্টেম”. অর্থাৎ, এটি দিয়ে কোন কোডিং ছাড়াই ওয়েবসাইট নিয়ন্ত্রন করা যায় । ধরুন আপনার এমন একটি ওয়েবসাইট দরকার যেটিতে আপনি প্রতিদিন নতুন কিছু যোগ করবেন । এখন প্রতিদিন ওয়েবসাইট এর কোড এডিট করে নতুন কিছু যোগ করা সম্ভব নয় । সে ক্ষেত্রে আপনি বিভিন্ন CMS ব্যবহার করতে পারেন । এসব CMS গুলো এমন ভাবে কোড করা থাকে, যেন পরবর্তীতে আপনাকে কোন কোডিং করতে হয় না । সহজেই আপনি আপনার ওয়েবসাইট নিয়ন্ত্রন করতে পারবেন । অনেক জনপ্রিয় ওয়েবসাইট এবং ব্লগ CMS দিয়ে তৈরি । কিছু জনপ্রিয় CMS হচ্ছে ওয়ার্ডপ্রেস, জুমলা, ড্রুপাল ইত্যাদি । ওয়ার্ডপ্রেস টা এর মধ্যে সবচেয়ে বেশি জনপ্রিয় । কারণ এটি ব্যবহার করা খুব সহজ এবং ইউজার ফ্রেন্ডলি । ওয়েব ডিজাইনার হতে হলে আপনাকে অবশ্যই কমপক্ষে একটি CMS এর উপর ভাল ধারণা থাকতে হবে ।
=============================
যেভাবে ওয়েব ডেভেলপমেন্ট শিখবেন
▬▬▬▬۩۞۩▬▬▬▬
বাংলা ইংরেজি অনেক সাইট আছে এসবের টিউটোরিয়াল থেকে শিখতে পারবেন। এছাড়া Wrox বা Apress পাবলিকেশনের অনেক ভাল ভাল বই আছে সেগুলির সাহায্য নিতে হবে। ওয়েব ডেভেলপমেন্ট শেখার সবচেয়ে কার্যকরী কৌশলটি হল "বসে যান এবং একটা প্রজেক্ট তৈরী করুন" হতে পারে একটা ফোরাম, ব্লগ, ইউজার ম্যানেজমেন্ট সিস্টেম বা এই ধরনের কোন প্রজেক্ট। raw PHP দিয়ে করুন। এরপর সিএমএস বা ফ্রেমওয়ার্ক ডেভেলপমেন্টে যান।
ওয়েব ডেভেলপমেন্ট শিখতে অনেক সময় লাগবে, শেখা কঠিন এবং প্রচুর ধৈর্য্য সাথে আগ্রহ লাগবে। চাকরি ক্ষেত্রে বা ফ্রিল্যান্সিং এ ওয়েব ডেভেলপারের চাহিদা আকাশছোয়া। ভালো ডেভেলপার হতে পারলে আর পেছন ফিরে তাকাতে হবে না।
▬▬▬▬۩۞۩▬▬▬▬
ওয়েব ডিজাইন এবং ডেভেলপমেন্টের মাঝে আসলে পার্থক্য কতটুকু!
ফ্রন্টএন্ড ডেভেলপমেন্ট বা ওয়েব ডিজাইন:
========================
ফ্রন্টএন্ড বলতে ওয়েব ডেভেলপমেন্টের সেই অংশটিকেই বুঝায় যা আপনি দেখতে পারেন বা যার সাথে সরাসরি ইউজারের ইন্টারেক্ট হচ্ছে। ফ্রন্টএন্ড মূলত দুই প্রকারের:
১. ফ্রন্টএন্ড ডিজাইন এবং
২. ফ্রন্টএন্ড ডেভেলপমেন্ট
একটা সময় ছিল যখন ডেভেলপমেন্ট বলতে শুধু ব্যাকএন্ড ডেভেলপমেন্টকেই বুঝাত। কিন্তু সময়ের বিবর্তনে ওয়েব ডিজাইনের সীমা ফটোশপ, এইচটিএমএল এবং সিএসএস এর গন্ডি পেরিয়ে জাভাস্ক্রিপ্ট এবং জেকোয়েরিকেও ছুঁয়েছে। একটি ওয়েবসাইটের লোডিং টাইম কমিয়ে আরো ইন্টার্যায়ক্টিভ করতেই এগুলো ব্যবহার হয়। তাই যখন শুনবেন একজন ডেভেলপার “ওয়েব ডিজাইন” নিয়ে আলোচনা করছেন, বুঝে নিবেন ডিজাইনের পাশাপাশি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টও অন্তর্ভূক্ত আছে।
এখন আসি ফ্রন্টএন্ড বিষয়ক আসল কথায়। আগেই বলেছি, ব্রাউজারে যা দেখছেন তার সবকিছুই আসলে এইচটিএম, সিএসএস এবং জাভাস্ক্রিপ্ট এর কম্বিনেশন। যা কম্পিউটারের ব্রাউজার দ্বারা নিয়ন্ত্রিত হয়। এর মাঝে ফর্ম, ড্রপডাউন মেন্যু, বাটন, ট্রানসিশন, স্লাইডার, কন্টাক্ট ফর্ম অন্যতম।
আর ফ্রন্টএন্ড এ দেয়া তথ্যগুলো যখন সংরক্ষণের প্রশ্ন আসে তখনই প্রয়োজন হয় ব্যাকএন্ড টেকনোলোজির।
ব্যাকএন্ড ডেভেলপমেন্ট বা ওয়েব ডেভেলপমেন্ট:
ব্যাকএন্ড সাধারণত তিনটি অংশের সমন্বয়ে গঠিত:
১. সার্ভার
২.অ্যাপ্লিকেশন এবং
৩.ডাটাবেজ।
ফেসবুকে লগইন করার পর যে অংশটুকু দেখতে পান সেটি হল ফ্রন্টএন্ড, সেখানে একটি ছবি আপলোড করলে অ্যাপ্লিকেশন সেগুলোকে ব্যাকএন্ড এর ডাটাবেজ এ জমা করে। হয়তো প্রশ্ন জাগতে পারে, ডাটাবেজ জিনিসটা কি! আসলে ডাটাবেজকে তুলনা করতে পারেন বিশান আকৃতির একটি এক্সেল শীটের সাথে যা হয়তো অ্যারিজোনার কোন এক কম্পিউটারে(সার্ভারে) জমা আছে।
তারমানে আপনার সকল ইনফরমেশন বা তথ্য সার্ভারের ডাটাবেজে সংরক্ষিত হচ্ছে। আর যখনি আপনি লগইন করছেন, সেই সংরক্ষিত তথ্যগুলোই প্রদর্শিত হয়। আর এই পুরো কাজটিই নিয়ন্ত্রিত হয় ব্যাকএন্ড অ্যাপ্লিকেশনের মাধ্যমে। যারা এই অ্যাপ্লিকেশনগুলো তৈরী করে দেন তাদেরকেই বলা হয় ওয়েব ডেভেলপার(ব্যাকএন্ড)।
এই অ্যাপ্লিকেশনগুলো তৈরী করতে পিএইচপি, রুবি, পাইথন এই প্রোগ্রামিং ল্যাঙ্গুয়েজগুলো বেশি ব্যবহৃত হয়। প্রোগ্রামিংয়ের কাজটিকে আরো সোজা করতে “রুবি অন রেইল” বা “লারাভেল” এর মত ফ্রেমওয়ার্ক গুলো ব্যবহৃত হয়।
সিএমএস:
অনেক ওয়েব প্রফেশনালরা সিএমএস নিয়ে কাজ করেন। অনেকের মনে প্রশ্ন জাগতে পারে যে, এই সিএমএস জিনিসটা আসলে কি? ফ্রন্টএন্ড এবং ব্যাকএন্ড এর সম্মলিত ব্যবহারের একটি ভাল উদাহরণ হল সিএমএস, যেমন ওয়ার্ডপ্রেস। পিএইচপি দিয়ে তৈরী এই ওপেন সোর্স প্রোগ্রামটি ডাটাবেস সহ সার্ভারে ইনস্টল করতে হয়।
এই ওপেন সোর্স ফ্রেমওয়ার্কটিতে ওয়েবসাইটের প্রয়োজনীয় প্রোগ্রামগুলো আগে থেকেই তৈরী করা থাকে, নতুনভাবে আর তৈরী করতে হয়না। সিএসএস, জেকোয়ারী এবং জাভাস্ক্রিপ্ট ব্যবহার করে একজন ডিজাইনারকে শুধু এর আউটলুক এবং ফাংশনালিটিগুলোকে নিজের ব্যবহার উপযোগী করে সাজিয়ে নিতে হয়।
আশা করি ফ্রন্টএন্ড, ব্যাকএন্ড এবং সিএমএস ডেভেলপিং সম্পর্কিত বিষয়গুলো আপনাদের কাছে পরিষ্কার হয়ে এসেছে। পাশাপাশি ওয়েব ডিজাইন এবং ডেভেলপমেন্ট এর মাঝে পার্থক্য কি সেটাও বুঝতে পেরেছেন।
কেন এবং কিভাবে ডিজাইন করবেন মোবাইল রেসপন্সিভ ওয়েবসাইট?
▬▬▬▬۩۞۩▬▬▬▬
বিশ্বের প্রতিটি দেশে মোবাইল ইন্টারনেট ব্যবহার অনেকাংশে বেড়ে গেছে। এমনকি আমাদের দেশেও আমরা দেখছি প্রচুর পরিমাণ মানুষ মোবাইল ইন্টারনেট ব্যবহার করছে। এক পরিসংখ্যানে দেখা গেছে ২০১৫ সালের মধ্যে মার্কিন যুক্তরাষ্ট্রে মোবাইল ইন্টারনেট ব্যবহারকারীর সংখ্যা ডেস্কটপ ব্যবহারকারীদেরকে ছাড়িয়ে যাবে, তারপর রয়েছে ট্যাবলেট, এমনকি আজকাল টেলিভিশনেও মানুষ ইন্টারনেট ব্যবহার করতে শুরু করেছে। আর এ সকল কারণে বড় বড় কোম্পানিগুলো গ্রাহক আকৃষ্ট করবার লক্ষ্যে তাদের ওয়েবসাইটটিতে গ্রাহক যে কোন মাধ্যম ব্যবহার করে ভিজিট করলে যেন অভূতপূর্ব অভিজ্ঞতা অর্জন করতে পারে সেদিকে নজর দিতে শুরু করেছে। এক্ষেত্রে কিভাবে রেসপন্সিভ ডিজাইন (প্রতিক্রিয়াশীল নকশা) আমাদেরকে সাহায্য করতে পারে?
এর সাহায্য নিয়ে আমরা এমন একটি ওয়েব সাইট তৈরি করতে পারবো, যা বিভিন্ন স্ক্রিনের আকার লক্ষ্য করে নিজের প্রস্থ কম-বেশী করতে পারবে। প্রতিক্রিয়াশীল ডিজাইন ফ্লেক্সিবল গ্রিড এবং ক্লেভার স্টাইল ব্যবহার করে একই বিষয়বস্তু ব্যবহারকারীর কাছে প্রদর্শন করে থাকে, কিন্তু প্রদর্শন করে ব্যবহারকারীর ডিভাইসের আকার অনুযায়ী নিজের বিষয়বস্তুর (কনটেন্ট) বিন্যাস (ফরম্যাট) পরিবর্তন করবার মাধ্যমে।
কেন আপনি প্রতিক্রিয়াশীল সাইট-এর ডিজাইন করবেন?
▬▬▬▬۩۞۩▬▬▬▬
একজন গ্রাহক যখন আপনার কাছে তাদের ওয়েবসাইটের মোবাইল সমাধান চাইতে আসেন তখন অনেকগুলো পথই আপনার বিবেচনায় চলে আসে। তবে কোন পদ্ধতিটি আপনি গ্রহণ করবেন তা নির্ভর করবে গ্রাহকের ব্যবসায়ীক প্রয়োজনীয়তা এবং তাদের বাজেট; এর সাথে সাথে আপনাকে খেয়াল রাখতে হবে তাদের কোনো উপস্থিত সমাধান রয়েছে কিনা অথবা তাদের কোন সাইট ইতোমধ্যে রয়েছে কিনা। মোবাইল ওয়েবসাইট করতে হলে প্রতিক্রিয়াশীল ওয়েবসাইটই করতে হবে এটা ভাববার কোন কারণ নেই। তবে আপনি যদি স্ক্র্যাচ থেকে একটি ওয়েবসাইট তৈরি করতে শুরু করেন তাহলে একে একটি গুরুতর বিকল্প হিসেবে বিবেচনা করা উচিত হবে।
আপনি স্ক্র্যাচ থেকে শুরু করতে যাচ্ছেন:
======================
একটি সম্পূর্ণ নতুন ওয়েবসাইট অথবা ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ প্রক্রিয়া নয়। ওয়েবসাইটটি প্রকাশিত না হওয়া পর্যন্ত আপনার পক্ষে জানা সম্ভব নয় যে সাইটটি জনপ্রিয়তা পাবে কিনা, আর তাই মূল ওয়েবসাইটের সাথে আবার পৃথকভাবে একটা মোবাইল ওয়েবসাইট অথবা অ্যাপ্লিকেশন তৈরি করবার প্রকল্প হাতে নেয়া সময় অপচয় এবং অর্থ নষ্ট। তার চাইতে মূল ওয়েবসাইটটি জনপ্রিয়তা পাবার পর আপনি তৈরি করতে পারেন মোবাইল ওয়েবসাইট বা অ্যাপ্লিকেশন।
আপনি সাশ্রয়ী হতে চাইছেন:
========================
সলিড প্রতিক্রিয়াশীল (রেসপন্সিভ) সমাধানের জন্য ডিজাইন এবং অগ্রগামী-উন্নয়ন (ফ্রন্ট-এন্ড ডেভেলপমেন্ট) ক্ষেত্রে অতিরিক্ত সময়ের প্রয়োজন হবে, কিন্তু অ্যাপ্লিকেশন ডেভেলপমেন্টের ক্ষেত্রে ব্যাপারটা ততোধিক প্রভাব ফেলে না। একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করতে খুব বেশী হলে ২০-৩০ ভাগ সময় বেশি লাগে। কিন্তু তার পরেও দেখা যাচ্ছে মোবাইলের জন্য সম্পূর্ণরূপে আরেকটি ওয়েবসাইট তৈরি করবার চাইতে অনেক কম সময় লাগছে। এছাড়া এভাবে ডিজাইন করবার ফলে আপনাকে ডেভেলপ, পরিচালনা এবং রক্ষণাবেক্ষণ করতে হচ্ছে মাত্র একটি ওয়েবসাইট আর তার ফলে এ সবকিছুর পেছনে যে খরচ, তা কমে যাচ্ছে বহুলাংশে।
আপনি চান নতুন ডিভাইসগুলোর সাথে ওয়েবসাইটটি কাজ করবে:
============================
মোবাইলের জন্য নির্দিষ্ট ওয়েবসাইটটিকে চিনতে হবে নতুন ডিভাইস: আর তাই নতুন কোন ডিভাইস বের হবার সাথে সাথে আপনাকে আপডেট করতে হবে ওয়েবসাইটটিকে। আর এ মুহূর্তে যে পরিমাণে নতুন ডিভাইস বাজারে নামছে এর সাথে দৌড়ানো প্রায় অসম্ভব একটা বিষয়। এদিকে প্রতিক্রিয়াশীল ওয়েবসাইট শুধু চেনে ব্রাউজারের প্রস্থ সেহেতু নতুন কোন আপডেটের প্রয়োজন পড়ছে না। ফলে বুঝতেই পারছেন এটি অনেক বেশি ভবিষ্যৎ বান্ধব এবং আকার পরিবর্তনযোগ্য।
প্রস্তুত – প্রক্রিয়া
=============
এবার আশা যাক কিভাবে আমরা একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করব। আমরা ব্যাপারটা শিখব ম্যাকডোনাল্ড নামে একটা হোটেলের ওয়েবসাইট তৈরি করবার মাধ্যমে। ওয়েবসাইটটিতে দেয়া হয়েছে নতুন একটি সাইট স্ট্রাকচার, হোটেলের বিস্তৃত বিষয়বস্তু এবং নতুন একটা বুকিং ইঞ্জিন। এই ওয়েব সাইটটি তৈরিতে যে পদক্ষেপগুলো গ্রহণ করা হয়েছিলো সেগুলো এখানে দেয়া হল। এছাড়া প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির ক্ষেত্রে কি ধরণের বিষয় আপনাকে চিন্তা করতে হতে পারে সেটাও জানতে পারবেন এখান থেকে।
প্রয়োজনীয় পদক্ষেপগুলো:
গবেষণা/স্কোপিং: প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করবার জন্য আপনার অতিরিক্ত কি প্রয়োজন পড়বে।
অয়্যারফ্রেমিং: ভিন্ন ভিন্ন স্ক্রিনের প্রস্থকে মাথায় রেখে সাইটের গ্রিড স্ট্রাকচার এবং লেআউট কিরকম হবে বিবেচনা করুন ।
অনুভব করুন (লুক অ্যান্ড ফিল): কি ধরণের স্টাইল ব্যবহার করবেন তা ভাবুন।
সাইট নির্মাণ: HTML ও CSS এ কি কি সমস্যার সম্মুখীন হতে পারেন সে সম্পর্কে একটু চিন্তা করে নিন।
আসুন জেনে নেই ‘ওয়েব ডিজাইন’ ক্যারিয়ার কাদের জন্য?
===========================
অনেকেই মনে করে সিএসই (CSE) ব্যাকগ্রাউন্ড না হলে ওয়েব ডিজাইন শেখা কষ্টকর, এটা একশ ভাগ ভুল কথা। কম্পিউটার সায়েন্স নিয়ে যারা পড়াশোনা করে তাদের ক্যারিয়ার পাথ টা আসলে হওয়া উচিত একজন সফটওয়্যার ইঞ্জিনিয়ার। কিন্তু, খুব কম সংখ্যক’ই সফটওয়্যার ইঞ্জিনিয়ার হবার সুযোগটি পায়, কারন আমাদের দেশে কাজের সুযোগ সীমিত। গুগল, মাইক্রোসফট এর মত বড় বড় কোম্পানিতে বিভিন্ন দেশে বাংলাদেশের সেরা মেধাবীরা অনায়াসেই চাকরি পেয়ে যায়। কিন্তু এ দেশে বাকিরা ওয়েব ডেভেলপার হিসেবে কোম্পানি গুলোতে জয়েন করে ওয়েব অ্যাপ্লিকেশন, সফটওয়্যার ডেভেলপমেন্ট, ডেক্সটপ এপ্লিকেশন অথবা কোন টিম লিড হিসেবে কাজ করে। একজন ওয়েব ডেভেলপার কে আমরা প্রোগ্রামার’ও বলি।
তাহলে ওয়েব ডিজাইনার এর কাজ কি? কে হয় এই ওয়েব ডিজাইনার?
একটা সহজ উদাহরণ দিয়ে বিষয়টি এভাবে বলা যায়, ওয়েব ডিজাইনার হচ্ছে বাড়ি বানানোর পর চুন কাম থেকে শুরু করে সকল ইন্টেরিওর এর কাজগুলো যে করে। প্রোগ্রামার বাড়ি তৈরির জন্য ফাউন্ডেশন তোলা থেকে শুরু করে যাবতীয় স্ট্রাকচার টা দাড় করায়, যেটাকে আমরা একটা ওয়েব সাইটের প্রোগ্রামিং/কোডিং বলে থাকি যা ব্যাকএন্ড এ থাকে। আর ওয়েব সাইটের ফ্রন্ট এন্ড এ যা দেখি তা হচ্ছে ওয়েব ডিজাইন/ইউআই (ইউজার ইন্টারফেস) নামে পরিচিত।
কে শিখতে পারবে ওয়েব ডিজাইন?
========================
যে কেউ নূনতম শিক্ষিত, যার কম্পিটার এর বেসিক নলেজটুকু জানা আছে । এর জন্য এমনটি নয় যে অনেক ইংলিশ ভালো জানতে হবে কিংবা অনেক সফটওয়্যার জানতে হবে।
ওয়েব ডিজাইন শেখার জন্য যা প্রয়োজন : আগেই বলা হয়েছে।
এর সম্ভাবনাময় দিক গুলো :
===================
একজন ভালো ওয়েব ডিজাইনার এর চাহিদা অনেক। ওয়েব ডিজাইনার হয়ে কখনো চাকরির জন্য মাসের পর মাস বেকার বসে থাকতে হয় না। আসলে বসে থাকার প্রয়োজন’ও পরে না কারণ এটা আন্তর্জাতিক মানের একটি পেশা। অনলাইন এ ফ্রিলান্সিং কিংবা অফসাইট এ কন্ট্রাকচুয়াল কাজের অনেক সুযোগ এখানে আছে। বছর বছর প্রমোশন না থাকলেও, বেতনের বৃদ্ধির হারটা অনেক উর্ধগতি। এই পেশায় অভিজ্ঞতা দিয়ে মুল্য বিচার করা হয়। যার যত বেশি কাজের অভিজ্ঞতা বাড়তে থাকে তার যোগ্যতাও তত বেশি।
সফল ওয়েবসাইট তৈরীর জন্য প্রয়োজনীয় রেসিপি
=================================
সন্দেহ নেই, জীবনের সর্বক্ষেত্রে, আমরা বেশির ভাগ মানুষই সফলতা চাই। সফলতার সংজ্ঞা একেকজনের কাছে একেক রকম হতে পারে, তবে আপনি যে কাজই করুন না কেন সে কাজটি আপনাকেসহ আপনার চারপাশে যারা আছে তাদেরকেও আনন্দ দেবে এবং এটা নিঃসন্দেহে একটা বড় সফলতা। এবার ওয়েব সাইটের কথায় আসি। ধরুন আপনি একটি ওয়েব সাইট পরিচালনা করেন। আপনার একান্তই ব্যক্তিগত সাইট অথবা আপনার প্রতিষ্ঠান বা সংস্থার সাইট। আপনি নিশ্চয়ই চাইবেন এ ওয়েব সাইটটটি সবার কাছে আদরণীয় হোক, পরিণত হোক সবার গন্তব্যে? অন্তত যেসব মানুষের উদ্দেশে আপনি এটি পরিচালনা করছেন তাদেরতো বটেই! আগেভাগেই স্বীকার করে নেয়া ভাল, এটা সহজ কোনো কাজ নয়। তবে অসম্ভব কিছুও নয়। আসুন আমরা জেনে নিই, কোন কোন কৌশল অবলম্বন করলে আপনার ওয়েব সাইটটিকে করতে পারবেন সবার কাছে জনপ্রিয়, আদরণীয় ও গ্রহণীয়। একটা একটা করে শুনি ওয়েব সফলতার রেসিপি’গুলোর কথা।
১। আপনার কাজের জন্য নিখাদ আবেগ
একটা ওয়েব প্রজেক্ট দাঁড় করাতে সময় ও নিষ্ঠা লাগে। বহু নির্ঘুম রাত ও দিনের পরিশ্রমে তিল তিল করে দাঁড়ায় এটি। এতে সম্পৃক্ত আছে অসংখ্য ছোটবড় কাজ যেগুলো মনের আবেগ আর সবটুকু আন্তরিকতা ঢেলে দিয়ে করতে হয়। এ কারণেই কাজটার পেছনে নিজের আবেগকে পুরোপুরি ঢেলে দিতে হবে। নিজেকে প্রশ্ন করুন সে আবেগ, আন্তরিকতা আর সিরিয়াসনেস আপনার আছে কিনা।
২। বিষয় সম্বন্ধে স্পষ্ট জ্ঞান
আপনি একটা ইমেইল অ্যাপ্লিকেশন অথবা একটা ওয়েব প্রকাশনা, যাই তৈরি করুন না কেন, আপনার বিষয়ের আগাপাশতলা সম্বন্ধে আপনার জ্ঞান থাকতে হবে। হিসাবটা সহজ: আপনার বিষয়ে আপনার যথেষ্ট জ্ঞান থাকাটা আপনার বিশ্বাসযোগ্যতা তৈরির জন্য জরুরি। ইন্টারনেট ব্যবহারকারীরা ওয়েবের বিভিন্ন সম্পদ ও সেবা সম্বন্ধে খুবই সন্দেহপরায়ন থাকেন। আপনি যে বিশ্বাসযোগ্য এটি যদি তাদের কাছে প্রমাণ করতে পারেন তাহলে আর কিছু দেখতে হবে না। কিন্তু এই বিশ্বাসযোগ্যতা তৈরির জন্য আপনার বিষয়জ্ঞান পরিপূর্ণ হতে হবে।
৩। আপনার ইন্ডাস্ট্রিতে কী হচ্ছে খেয়াল রাখুন
আপনার চারপাশে কি হচ্ছে না হচ্ছে সেদিকে নজর রাখা খুবই জরুরি। এটা হচ্ছে নিজের বিষয় বা ক্ষেত্রে নিজেকে আপডেটেড রাখারই একটি অংশ এবং আপনার অডিয়েন্সও আপনার কাছে এটাই চায়। একটা জিনিস মনে রাখতে হবে। ওয়েব খরস্রোতা নদীর মতই নয়িত পরিবর্তনশীল। পরিবর্তনের বন্যায় ঘটে চলা নতুন নতুন ঘটনা সম্বন্ধে নিজেকে অবহিত রাখতে হবে। একদিন আগের তথ্যও বাতিল বলে প্রত্যাখ্যান করতে বাধবে না অনেকেরই। এ কারণে নিজেকে আপটুডেট-ই কেবল নয়, আপ-টু-দ্য-সেকেন্ড’রাখুন।
৪। মন দিয়ে অডিয়েন্সের কথা শুনুন
আপনার সাইটের ব্যবহারকারী বা ভিজিটরদের অনেক কিছুই বলার আছে। আপনার উন্নতির সঙ্গে তাদের উন্নতিও একসূত্রে বাঁধা। তাদের চাহিদা পূরণে আপনি সবসময়ই সচেষ্ট থাকেন এটাই তারা চান। ইন্টারনেটে কারো সমালোচনা করা সহজ বলে এখানে প্রচুর সমালোচনাকারীর খোঁজ মেলে। কিন্তু এদের মধ্যেই এমন অনেকে আছেন যাদের পরামর্শ ও আইডিয়াগুলো আপনার উপকারই করবে, আপনি যদি নিষ্ঠার সঙ্গে সেগুলো মেনে চলেন।
৫। আপনার ইন্ডাস্ট্রির মানুষজনের সঙ্গে যোগাযোগ বাড়ান
ওয়েব আমাদের সুযোগ করে দেয় দূর দূরান্তেও মানুষের কাছাকাছি আসার। একটা কথা বুঝতে হবে, সংযোগ মানেই উৎপাদনশীলতা, যোগাযোগ মানেই প্রবৃদ্ধি ও প্রগতি। কাজেই যত বেশি সম্ভব মানুষের সঙ্গে যোগাযোগ ও মিথস্ক্রয়িা বাড়াতে হবে। বিশেষ করে আপনি যে সেক্টরে কাজ করেন সে সেক্টরের বভিন্নি ব্যক্তি ও প্রতিষ্ঠান, তাদেও অবস্থান যেখানেই হোক না কেন, তাদের কাছে আপনার পৌঁছাতে হবে। সে আপনার প্রতিদ্বন্দ্বী বা বন্ধু যাই হোক না কেন। মনে রাখতে হবে, একজন আরেকজনের বিপক্ষে নয়, বরং একজন আরেকজনের সঙ্গে মিলে কাজ করলেই সবার জন্য সুবিধা। অন্যান্য ওয়েব সাইটের ডিসকাশন ফোরামে অংশ নিন, কারো সঙ্গে দলবদ্ধ হয়ে কাজ করার সুযোগ আছে কিনা খয়োল রাখুন। যোগাযোগের সামান্যতম সুযোগকেও অবহেলা করবেন না।
৬। ঝুঁকি নিন
অনেক ক্ষেত্রে প্রবৃদ্ধির অন্যতম বাধা হচ্ছে পরিবর্তনের ভয়। অনেকেই যে কোনো পরিবর্তনকে ভয় পান এবং এড়িয়ে চলতে চান। কিন্তু পরিবর্তনের প্রতি এই ভয় উদ্ভাবনের স্রোতকে আটকে রাখে। ওয়েবের দুনিয়াটাই এমন যে এখানে ঝুঁকি নিতে হয়। সব সময়, সব ক্ষেত্রে ঝুঁকি এড়ানোর মানসিকতা ওয়েব প্রজেক্টের সফলতার জন্য ক্ষতিকর। ওয়েবের ভুবনে যেখানে সবকিছুই চোখের পলকে পরিবর্তিত হয়ে যায় সেখানে কিছু একটাতে আটকে থাকার মানসিকতা আপনাকে অনেক পিছিয়ে দেবে। কাজেই প্রয়োজন হলে ঝুঁকি নিতে দ্বিধা করবেন না। এ ঝুঁকি আপনার জন্য বিশাল কোনো পুরস্কারও নিয়ে আসতে পারে।
৭। সঠিক সময় ব্যবস্থাপনা করুন
সময় এবং কাজের সঠিক ব্যবস্থাপনা যে না করে আগে বা পরে তাকে পস্তাতেই হয়। আপনার ওয়েব প্রজেক্টের গতিশীলতা বা প্রবৃদ্ধি নির্ভর করছে আপনি কতটা ভালভাবে আপনার সময়, শ্রম, সম্পদ আর কাজের ব্যবস্থাপনা করলেন। সুষ্ঠু ব্যবস্থাপনার কল্যাণে অনেক কঠিন বিপদকেও সামলানো যায়, সামান্য সম্পদও অসামান্য বলে বিবেচিত হয়। মনে রাখবেন, আপনার এবং আপনার কাজের বাধাহীন প্রবৃদ্ধির অন্যতম নিয়ামক হচ্ছে সময়। আপনার বাজেট এবং প্রযুক্তির মত এটাকে বড় একটি সম্পদ হিসেবে বিবেচনা করতে হবে।
৮। চোখ কান খোলা রাখুন
অলসতা এবং অবহেলা যে কোনো সময় মারাত্মক বিপদ ডেকে আনতে পারে। চোখ কান খোলা রাখুন। বিপদের আশঙ্কাকে যেমন অবহেলা করবেন না, তেমনি সুযোগের সম্ভাবনাকেও নয়। প্রবৃদ্ধির অন্যতম পূর্বশর্ত হচ্ছে ছোটখাট সুযোগকে কাজে লাগিয়ে বড় সুযোগ সৃষ্টি করা। বিভিন্নি প্রকাশনায় লেখালেখি করুন, প্যানেলে যোগ দিন, ব্লগ- এ লিখুন, অন্যান্য কর্মকাণ্ডে অংশ নিন। এরইমধ্যে নানারকম সুযোগ পেয়ে যাবেন আপনার নিজেকে এবং নিজের কাজকে প্রমোট করার। কোনো কিছুকেই অবহেলা করবেন না, তাহলে আর আফসোস করে পরে বলতে হবে না: আহা, আমিওতো ওটা করলে পারতাম!
নতুন ওয়েবসাইট তৈরির ক্ষেত্রে আবশ্যক ১০টি বিষয় সম্পর্কে জেনে নিন
▬▬▬▬۩۞۩▬▬▬▬
একটি ওয়েবসাইট ডিজাইন ও ডেভেলপমেন্ট হয়ে গেলে সেটির ডিজাইন কিংবা কনটেন্টের পরির্বতন করা বেশ ঝামেলার। তাই ওয়েবসাইট তৈরি করার শুরুতেই বেশ কিছু বিষয় ভালোভাবেই যুক্ত করা উচিত। এসব বিষয়গুলো ছাড়া ওয়েবসাইট অসম্পূর্ণ মনে হয়। এখানে নতুন ওয়েবসাইট তৈরির ক্ষেত্রে আবশ্যক ১০টি বিষয় সম্পর্কে জানানো হলো।
লোগো
একটি লোগো সংশ্লিষ্ঠ প্রতিষ্ঠান কিংবা ব্লগের পরিচয় বহন করে। প্রতিনিয়তই লোগো পাল্টানো সম্ভব না। তাই দায়সারাভাবে টেক্সট, লোগো মেকার অথবা ক্লিপআর্টের মাধ্যমে লোগো না তৈরি করে, ভালোমানের ডিজাইনার দিয়ে একটি সুন্দর ও প্রফেশনাল লোগো তৈরি করতে হবে। সেটি সাইটের হেডারে যথাযথ স্থানে বসাতে হবে, যাতে ভিজিটররা সহজেই লোগোটি দেখতে পারে।
ট্যাগলাইন
সংক্ষিপ্ত কথার মাধ্যমে ঐ ওয়েবসাইটটির সেবা বা কি ধরণের ওয়েবসাইট তা বোঝানোর জন্য ট্যাগলাইন ব্যবহার করা হয়। তাই একটি ছোট, সহজেই আকর্ষন করে এবং যাতে একজন ভিজিটার ট্যাগলাইন দেখেই সাইটি সম্পর্কে ধারণা করতে পারে এমন ট্যাগলাইন ব্যবহার করতে হবে।
পোর্টফোলিও
এটি মূলত ব্যক্তিগত কিংবা সেবাভিত্তিক প্রতিষ্ঠানের ক্ষেত্রে যুক্ত করতে হয়। তাই আপনার কিংবা আপনার প্রতিষ্ঠানের আগের কিছু কাজ বা সেবা পোর্টফোলিও হিসেবে যুক্ত করতে হবে। আপনি একজন প্রফেশনাল ওয়েব ডিজাইনার হলে আপনার ওয়েবসাইটে আগের করা কিছু কাজের নমুনা পোর্টফোলিও হিসেবে যুক্ত করতে পারেন। এছাড়া কোম্পানির ওয়েবসাইট হলে ঐ কোম্পানির ভালো কিছু ক্লায়েন্টের জন্য করা কাজ বা সেবা যুক্ত করা যেতে পারে।
সার্ভিস পেইজ
আপনি কিংবা আপনার প্রতিষ্ঠান কি ধরণের সেবা দিচ্ছে তা সার্ভিস পেইজে যুক্ত করতে হবে। কাঙ্খিত ক্রেতা যাতে ওয়েবসাইট দেখেই আপনার সেবা নিতে আগ্রহী হয় তেমনিভাবে সেবাগুলোর বিবরণ দিতে হবে। আপনার সেবা বা পণ্য নিলে ক্রেতারা কেনো লাভবান হবেন সেটি বর্ণনা দিতে হবে।
অ্যাবাউট আস পেইজ
আপনি কিংবা আপনার কোম্পানি কি, আপনার কোম্পানির মিশন, ভিশন, অতীত, আপনার কোম্পানির সদস্যদের সম্পর্কে এখানে তুলে ধরতে হবে। এককথায় আপনার কিংবা কোম্পানির সম্পর্কে যাতে এই পেইজ থেকে পুরো ধারণা দেওয়া যায় সেভাবে উপস্থাপন করতে হবে অ্যাবাউট/অ্যাবাউট আস পেইজ।
কনট্যাক্ট পেইজ
ভিজিটর আপনার কিংবা কোম্পানির ওয়েবসাইট দেখে যোগাযোগ করার ইচ্ছা পোষন করতে পারে। তাই কনট্যাক্ট পেইজে আপনার কিংবা আপনার প্রতিষ্ঠানের নাম, ঠিকানা, ইমেইল, ফোন নাম্বারসহ যোগাযোগের অন্যান্য মাধ্যমে যেমন ফেইসবুক পেইজ/আইডি, টুইটার অ্যাকাউন্ট, স্কাইপ অ্যাকাউন্ট ইত্যাদি যুক্ত করতে হবে। সম্ভব হলে গুগল ম্যাপের মাধ্যমে ঠিকানা দেখিয়ে দেওয়া যেতে পারে। এছাড়া ভিজিটর যাতে সহজেই মেইল অথবা মেসেজ পাঠাতে পারে তার জন্য একটি কনট্যাক্ট ফরমও বসানো যেতে পারে।
টেস্টিমোনিয়াল
ব্যবসায় কিংবা সেবার ক্ষেত্রে এটি একটি গুরুত্বপূর্ণ বিষয়। আপনার পুরাতন ক্লায়েন্ট আপনার কাজ, পণ্য বা সেবা নিয়ে কেমন উপকৃত হয়েছে, তাদের মন্তব্য কি এটা টেস্টিমোনিয়াল পেইজে যুক্ত করতে হবে। আপনার সন্তুষ্ঠ ক্লায়েন্টের এমন মন্তব্যের মাধ্যমে আরও নতুন ক্লায়েন্ট পাওয়ার সুযোগ তৈরি হবে।
সাইটম্যাপ
একটি ওয়েবসাইটকে সার্চ ইঞ্জিনের কাছে সম্পূর্ণরুপে সপে দেওয়ার জন্য সাইটম্যাপ জরুরী। এর ফলে সার্চ ইঞ্জিন সহজেই আপনার ওয়েবসাইটের সকল পেইজ, পোস্ট দ্রুত ইনডেস্ক করতে পারবে ও সার্চ ইঞ্জিন ব্যবহারকারীদের কাছে তুলে ধরতে পারবে। ওয়েবসাইটের ফুটার কিংবা উপরের মেনুতে একটি পেইজের মাধ্যমে সাইটম্যাপ যুক্ত করা যেতে পারে।
সোশ্যাল মিডিয়া লিংক
হালের যোগাযোগ মাধ্যম হিসেবে ফেইসবুক, টুইটার, লিংকডইন, ইউটিউবের কোনও জুড়ি নেই। আপনার কিংবা আপনার প্রতিষ্ঠানের সঙ্গে অনেকেই আপডেটের থাকতে চাইবেন। আপনিও চাইবেন যাতে আপনার এসব সোশ্যাল মিডিয়ার মাধ্যমে ভিজিটররা সযুক্ত থাকতে পারে, তাদের কাছে আপনার সেবা পৌছে যাক। এজন্য সাইটের হেডার, ফুটার অথবা সাইডবারে সোশ্যাল মিডিয়া লিংকগুলো যুক্ত করতে হবে। মনে রাখতে হবে এগুলোতে যাতে সহজেই ভিজিটর দেখতে ও ক্লিক করতে পারেন।
সার্চ সুবিধা
বিশেষ করে আপনার সাইটটি যদি একটি ব্লগ, নিউজপেপার কিংবা কনটেন্ট ভিত্তিক ওয়েবসাইট হয় সেক্ষেত্রে সার্চ সুবিধা যুক্ত করতে হবে। ভিজিটর হয়তোবা পুরাতন কোনও পোস্ট দেখতে চাইবেন। সেক্ষেত্রে একটার পর একটা পেইজ কিংবা পোস্ট ক্লিক করে খুঁজে পাওয়া ভোগান্তিকর। তাই ভিজিটররা যাতে সহজেই একটি লেখা বা কনটেন্ট খুঁজে পেতে পারে তার জন্য হেডারে কিংবা সহজেই দেখা যায় এমন স্থানে সার্চ অপশন যুক্ত করতে হবে।
▬▬▬▬۩۞۩▬▬▬▬
তথ্যসূত্রঃ ইন্টেরনেটের বিভিন্ন সাইট
▬▬▬▬۩۞۩▬▬▬▬
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন