HTML5, সর্বশেষ এবং জনপ্রিয় ওয়েব ডিজাইনিং ল্যাঙ্গুয়েজ, হঠাৎ করেই ডিজাইনিং বিশ্বকে এক তরঙ্গে নিয়ে গেছে। আগে আমাদের HTML ছিল এখন HTML5 আছে। যাইহোক, যদি আমরা উভয়ের মধ্যে প্রধান পার্থক্য দেখি, আমরা বুঝতে পারি যে একটি জিনিস, যা আসলে HTML5 কে HTML এর থেকে আলাদা এবং ভাল করে তা হল প্রতিক্রিয়াশীলতা .
একটি ওয়েবপৃষ্ঠার প্রতিক্রিয়াশীলতা মানে ওয়েব পৃষ্ঠাটি মাধ্যম অনুযায়ী ব্রাউজারে লোড হওয়ার পরে প্রাপ্ত আউটপুট বা প্রতিক্রিয়া৷
HTML এর সাথে, অনেক সীমাবদ্ধতা ছিল, যা একটি নতুন সংস্করণের প্রয়োজন দেখা দেয়। ওয়েব ডিজাইনারদের পরিবর্তনশীল প্রযুক্তির সাথে ওয়েব পেজ তৈরি করার নমনীয়তা ছিল না।
সর্বশেষ প্রযুক্তি ব্যবহারকারীদের ডেস্কটপ, ল্যাপটপ, মোবাইল ফোন, আইপ্যাড ইত্যাদিতে ওয়েব পৃষ্ঠাগুলি অ্যাক্সেস করতে দেয়। তাছাড়া, এই সমস্ত ডিভাইসগুলি বিভিন্ন মাত্রার সাথে আসছে। ওয়েব ডিজাইনাররা একটি সমাধান খুঁজছিলেন, যা সবার জন্য উপযুক্ত। প্রতিক্রিয়া হিসাবে, HTML5 একটি উত্তর হিসাবে এসেছে।
তরল বিন্যাস
HTML5 হল HTML, CSS এবং JavaScript এর একটি তোড়া। এটি ব্যবহারকারীদের জলের মতো তরল বা নমনীয় লেআউট সহ ওয়েব পৃষ্ঠাগুলি তৈরি করতে দেয়৷ আমরা জানি, জল তার পাত্রের আকার নেয়, একইভাবে, তরল বিন্যাস ডিজাইনারদের তাদের বিষয়বস্তু নির্দিষ্ট পাত্রে ভাসতে দেয়। একই ওয়েবসাইট, iPAD-এ খোলা হলে তার মাত্রা অনুযায়ী সামঞ্জস্য করা হবে, এবং একই URL মোবাইলে অ্যাক্সেস করা হলে, তার মাত্রার সাথে মানানসই হবে।
আমাদের ওয়েব ডিজাইনারদের আরেকটি আবেদন ছিল বিষয়বস্তুর সাথে সম্পর্কিত। আমরা যদি মোবাইলের স্ক্রিনে আলাদা এবং ল্যাপটপের স্ক্রিনে আলাদা কন্টেন্ট চাই? আমাকে একটি খুব সহজ উদাহরণ ব্যবহার করে এই ধারণার পিছনে মনস্তাত্ত্বিক তত্ত্ব ব্যাখ্যা করা যাক। ধরুন, আপনি আপনার অফিসে আছেন এবং হঠাৎ আপনার দল একটি আউটডোর লাঞ্চ পার্টির পরিকল্পনা করছে। আপনি আপনার ফোনটি টেনে আনুন যা একটি ওয়েবপৃষ্ঠা খোলে আশেপাশের রেস্তোরাঁগুলি (যেমন zomato, dineout ইত্যাদি) দেখার জন্য এখন সেগুলিকে আপনার মানদণ্ড অনুযায়ী ফিল্টার করুন এবং আপনার প্রয়োজনীয়তার জন্য সবচেয়ে উপযুক্ত একটি চয়ন করুন৷ এখন, যদি আপনার দল আসন্ন সপ্তাহান্তে একটি লাঞ্চ পার্টিতে যাওয়ার পরিকল্পনা করে। এই পরিস্থিতিতে, আপনি সম্ভবত আপনার ল্যাপটপ খুলুন; একই ওয়েবসাইটের ওয়েবপেজ খুলুন, পৃষ্ঠার চারপাশে দেখেন, ওয়েবসাইটের অফার, ফ্রিল এবং অ্যাড-অনগুলি চেক করেন৷
এই উদাহরণের সাহায্যে, আমরা অনুমান করি যে ব্যবহারকারী, যিনি মোবাইলে একটি ওয়েবপেজ খুলছেন, সম্ভবত তাড়াহুড়ো করবেন এবং ডিজাইনিংয়ের চারপাশে দেখার সময় পাবেন না। ব্যবহারকারী ডিজাইনার UI এর পরিবর্তে কার্যকারিতা খুঁজবেন। যাইহোক, যখন একই ওয়েবপৃষ্ঠা ল্যাপটপ/ডেস্কটপ ব্রাউজারে দেখা হয়, তখন ব্যবহারকারীর ডিজাইনিং অংশের প্রশংসা করার সময় থাকতে পারে।
প্রতিক্রিয়াশীলতা ওয়েব ডিজাইনারদের ডিভাইসের স্ক্রীন এরিয়ার সাথে মানানসই করতে এবং ছবি বা ট্যাগগুলিকে লুকিয়ে/দেখাতে পৃষ্ঠাটিকে চাপ দিতে বা প্রসারিত করতে দেয়৷
প্রতিক্রিয়াশীল ওয়েব ডিজাইন হল ব্যবহারকারীর ডিভাইসের স্ক্রীন রেজোলিউশন অনুযায়ী লেআউট সামঞ্জস্য অনুযায়ী একটি ওয়েবপেজ তৈরি করার ধারণা। এটি ওয়েব ডিজাইনারদের লেআউটটি পরিবর্তন করতে এবং প্রাসঙ্গিক তথ্য প্রথমে উপস্থাপন করতে দেয়:ঘন্টা, ফোন নম্বর, দিকনির্দেশ এবং সম্ভবত মেনুতে একটি লিঙ্ক। এদিকে আপনার ডেস্কে ফিরে এসে, রেস্তোরাঁর পৃষ্ঠায় সমস্ত ঘণ্টা এবং বাঁশি রয়েছে যা আপনি আপনার ফোনে ব্রাউজ করার সময় খেয়াল করেননি।
রেসপন্সিভ ওয়েব ডিজাইনিং (RWD) এর লেআউটগুলি সীমিত মানের (যেমন পিক্সেল, পয়েন্ট ইত্যাদি) পরিবর্তে নমনীয় বা তরল লেআউট প্যারামিটার (যেমন ems এবং শতাংশ) ব্যবহার করে করা হয়।
আপনার পৃষ্ঠাগুলিতে প্রতিক্রিয়াশীলতার অনুমতি দেওয়ার জন্য, পৃষ্ঠার কাঠামো পরিবর্তন করা হয় এবং HTML5 এর মৌলিক ধারণাটি ছবিতে আসে। HTML5 এ কোড লেখার প্রাথমিক নির্দেশিকা হল:
- কন্টেন্ট HTML ফাইলে যায়
- লুক এবং প্লেসমেন্ট CSS ফাইলে যায়
- জাভাস্ক্রিপ্ট ফাইলে বৈধতা যায়
তাই, প্রতিক্রিয়া পাওয়ার জন্য, আমাদের ডিভাইসের স্ক্রীনের আকার পরিবর্তনের সাথে CSS ফাইলগুলিকে প্রতিস্থাপন করতে হবে, যখন আমাদের বিষয়বস্তু (যা HTML পৃষ্ঠাগুলিতে রয়েছে) একই থাকে৷
RWD কৌশল
রেসপন্সিভ ওয়েব ডিজাইনিং প্রথাগত গ্রেসফুল ডিগ্রেডেশনের পরিবর্তে প্রগতিশীল বর্ধন ব্যবহার করে।
গ্রেসফুল ডিগ্রেডেশন সর্বশেষ এবং সবচেয়ে উন্নত ব্রাউজারগুলির জন্য সামঞ্জস্যপূর্ণ ওয়েব পৃষ্ঠাগুলি তৈরি করার উপর জোর দেয়। সামনের দিকে, পুরানো ব্রাউজারগুলির জন্য সমর্থন প্রদান করা হয়েছে তবে প্রত্যাশিত সমস্যাগুলি প্যাকেজের অংশ হবে৷
যেখানে, প্রগতিশীল বর্ধন ব্রাউজারের পরিবর্তে বিষয়বস্তুর উপর ফোকাস করে। এই ধারণাটিকে বিষয়বস্তু হিসাবে গ্রহণ করুন, যেমন চিনাবাদাম M&M চকলেটের ক্ষেত্রে।
- চিনাবাদাম:সমৃদ্ধ শব্দার্থিক html এ মার্ক আপ করা সামগ্রী
- সমৃদ্ধ ক্রিমি CSS দিয়ে প্রলিপ্ত
হার্ড ক্যান্ডি শেল হিসাবে JS যোগ করা হয়েছে
RWD ফ্রেমওয়ার্ক
একটি HTML5 ফ্রেমওয়ার্ক হল পূর্বনির্ধারিত পুনঃব্যবহারযোগ্য CSS এবং JS ফাইল এবং পৃষ্ঠার বিষয়বস্তু হিসাবে ডামি টেক্সট সহ পূর্ব-নির্মিত টেমপ্লেট। তারা উদীয়মান বিকাশকারীদের মৌলিক ডিজাইনিং দিয়ে শুরু করতে সহায়তা করে। লেআউট সংজ্ঞায়িত করা হয় এবং ডিজাইন তৈরি করা হয়।
প্রতিক্রিয়াশীলতা বাস্তবায়নের জন্য বাজারে একাধিক কাঠামো উপলব্ধ রয়েছে। সবচেয়ে জনপ্রিয় এবং কার্যকর করা সহজ হল – Twitter Bootstrap . তালিকায় যোগ করার জন্য, ফাউন্ডেশন, কঙ্কাল, বয়লারপ্লেট, কিকস্টার্ট এবং আরও অনেক কিছু। এই ফ্রেমওয়ার্কগুলির বেশিরভাগ প্রাথমিক লেআউট বিকাশের জন্য গ্রিড সিস্টেম বেস ব্যবহার করে৷
Twitter বুটস্ট্র্যাপ মোবাইল-প্রথম পদ্ধতি ব্যবহার করে, ব্যবহারে বিনামূল্যে এবং ইনস্টল করা সহজ। জেনেরিক সিএসএস ফাইলটি প্যাকেজের অংশ, একটি ওয়েব পৃষ্ঠার বেশিরভাগ উপাদান এবং নিয়ন্ত্রণের ডিজাইনে সহায়তা করার জন্য। ওয়েব পেজ তৈরিতে আপনাকে সাহায্য করার জন্য বিভিন্ন ধরনের লেআউট পাওয়া যায়।
রেসপনসিভ ওয়েব ডিজাইনিং হল মোস্ট ওয়ান্টেড টেকনোলজি এবং ধীরে ধীরে এবং ধীরে ধীরে যেকোন ওয়েবসাইটের জন্য স্ট্যান্ডার্ড প্রয়োজনীয়তা হয়ে উঠছে। বাস্তবায়নের জন্য অনলাইনে উপলভ্য প্রচুর সমর্থন রয়েছে এবং খেলার জন্য একাধিক সরঞ্জাম উপলব্ধ।
