রেসপন্সিভ ওয়েবসাইট এবং ফ্রেমওয়ার্ক

একটি ওয়েবসাইট সকল ডিভাইসে (যেমন- বড় স্ক্রিনের ডেস্কটপ, ল্যাপটপ, ট্যাবলেট, মোবাইল ইত্যাদি) কোনোরকম জুম করা ছাড়াই যখন এইচটিএমএল(HTML), সিএসএস(CSS) ও মিডিয়া কুয়েরির সাহায্যে সুন্দরভাবে উপস্থাপন বা ডিজাইন করা হয়, তখন ঐ ওয়েবসাইটকে রেসপন্সিভ ওয়েবসাইট বলে।

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

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

এটিই মূলত রেসপন্সিভ ওয়েবসাইট। বর্তমানে প্রচলিত বেশিরভাগ ওয়েবসাইট-ই রেসপন্সিভ ওয়েবসাইট।

আরো পড়ুন: ওয়েব টেকনোলজি ও ইন্ডাস্ট্রির প্রয়োজনীয়তা

ফ্রেমওয়ার্ক (Framework)

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

ফ্রন্ট এন্ড ফ্রেমওয়ার্কের প্রকারভেদ

কোনো ওয়েবসাইটের ইউজার ইন্টারফেস তৈরি করার জন্য যে ফ্রেমওয়ার্ক ব্যবহার করা হয়, তাকে ফ্রন্ট এন্ড ফ্রেমওয়ার্ক বলে। সাধারণত দুই ধরনের ফ্রেমওয়ার্কের সাহায্যে ওয়েবসাইট ডিজাইন করা হয়, যথা-

১। সিএসএস ফ্রেমওয়ার্ক (CSS framework)

জনপ্রিয় সিএসএস (CSS) ফ্রেমওয়ার্কগুলো হলো-

(১) বুটস্ট্রট্র্যাপ(Bootstrap)

বুটস্ট্র্যাপ বা টুইটার বুটস্ট্র্যাপ হলো একটি কম্পোনেন্ট বেসড ফ্রেমওয়ার্ক। রেসপন্সিভ এবং মোবাইল ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে টুইটার বুটস্ট্র্যাপ হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট-এয় সমন্বয়ে তৈরি সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক। Bootstrap প্রতিষ্ঠা লাভ করে Mark Ono এবং Jacob Thornton-এর Twitter-এর হাত ধরে। এটি ২০১১ সালে আগস্টে সর্বসাধারণের জন্য উন্মুক্ত করে দেয়া হয়। ২০১৪ সালে এটি GitHub-এর ১ নাম্বার প্রজেক্ট হিসেবে খ্যাতি লাভ করে।

(২) টেইলউইন্ড

টেইলউইন্ড css হলো সিঙ্গেল ইউটিলিটি বেসড সিএসএস ফ্রেমওয়ার্ক। রেসপন্সিভ এবং মোবাইল ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে বর্তমানে টেইলউইন্ড সিএসএস হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট-এর সমন্বয়ে তৈরি অন্যতম জনপ্রিয় ফ্রেমওয়ার্ক। টেইলউইন্ড সিএসএস-এর ফাউন্ডার Adam Wathan।

(৩) ফাউন্ডেশন

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

(৪) বুলমা

বুলমা সিএসএস একটি ফ্রন্ট এন্ড রেসপন্সিভ ফ্রেমওয়ার্ক, যা পূর্বে থেকে তৈরি করা রেসপন্সিভ ফ্রন্ট এন্ড কম্পোনেন্ট, টেমপ্লেট, বিভিন্ন কোড ইত্যাদি বিনামূল্যে দিয়ে থাকে।

(৫) স্কেলিটন

স্কেলিটন সিএসএস ফ্রন্ট এন্ড রেসপন্সিভ ফ্রেমওয়ার্ক যদিও এরা নিজেদের ফ্রেমওয়ার্ক বলে দাবি করে না, কিন্তু এটি খুবই হালকা ও সহজে ব্যবহারযোগ্য সিএসএস লাইব্রেরি। তাদের মতে, Skeleton is a dead simple, responsive boilerplate.

২। জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক (JavaScript framework):

জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলো হলো-

(১) জেকুয়েরি

জেকুয়েরি (jQuery) জাভাস্ক্রিপ্ট-এর অন্যতম জনপ্রিয় ওপেন সোর্স লাইব্রেরি। এটি সব ধরনের ওয়েব ব্রাউজারে সাপোর্ট করে। এখানে শত শত ফাংশন আগে থেকেই তৈরি করা আছে, যা ব্যবহার করে ওয়েবসাইটকে আরও প্রাণবন্ত করে তোলা যায়। এ কাজগুলো শুধু মূল জাভাস্ক্রিপ্ট ব্যবহার করেও করা যায়, তবে এতে অনেক বেশি কোড লিখতে হবে এবং প্রচুর সময় লাগবে।

(২) রিয়েক্ট, জেএস(React)

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

(৩) রিডাক্স(Redux)

রিডাক্স একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি, যা কোনো অ্যাপ্লিকেশনের স্টেট কন্ট্রোল করার জন্য ব্যবহার করা হয়। এটি সাধারণত রিয়েক্ট বা অ্যাঙ্গুলার, জেএস-এর সাথে ইউজার ইন্টারফেস তৈরির জন্য সহায়ক হিসেবে ব্যবহৃত হয়। এটি অনেক ইউজার ফ্রেন্ডলি এবং এটি দিয়ে তৈরীকৃত অ্যাপ্লিকেশনগুলো স্ট্যাটিক আচরণ করে। ফলে সহজেই ডিবাগ করা যায়। এটি ফেসবুকের ফ্লাস্ক আর্কিটেকচারের মতো, যা Dan Abramov এবং Andrew Clark তৈরি করেছে।

(৪) Vue.js

ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্টের জন্য বর্তমানে যে-সমস্ত নতুন প্রযুক্তি ব্যাপকভাবে ব্যবহৃত হচ্ছে, তার মধ্যে একটি Vue.js আসলে একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, যা ইউজার ইন্টারফেস তৈরির জন্য একটি অনন্য প্ল্যাটফর্ম। Vue.js-এর মূল প্রতিযোগীরা হলো React. js এবং Angular. js।

(৫) অ্যাঙ্গুলার, জেএস(Angular. js)

অ্যাঙ্গুলার, জেএস সিঙ্গেল পেজ অ্যাপ্লিকেশনের জন্য জাভাস্ক্রিপ্টের শক্তিশালী ফ্রি ফ্রন্ট এন্ড ফ্রেমওয়ার্ক। এটি মডেল ভিউ কন্ট্রোলার (MVC) নীতি মেনে চলে। এটি মূলত গুগল ও বিভিন্ন সিঙ্গেল কমিউনিটি এবং কর্পোরেশন নিয়ন্ত্রণ করে।