HTML5 সম্পর্কে কিছু প্রশ্ন এবং উত্তর যা Top HTML5 Developer দের জেনে রাখা প্রয়োজন

আসসালামুয়ালাইকুম ওয়া রহমাতুল্লাহি ওয়া বারকাতুহ

আশা করছি সবাই ভাল আছেন। আমিও ভাল আছি। আবার টিউন করতে বসলাম। আসলে একটা টিউন করতে কি কম প্যারা যায়  

তবুও টিউন করতে ভাল লাগে। কেননা হাত তো আর বসে থাকে না। শুধু টিটিকে চায়  

টিউনটার শিরোনাম দেখেই বুঝতে পারছেন আজকে আমি কি বিষয় নিয়ে লিখবো ...

আজকের বিষয়টা অনেক গুরুত্বপূর্ণ। ধৈর্য যদি থাকে তবে অনেক কিছু জানতে পারবেন। আশা করি 

সবাই টিউনটা পড়ে লাভবান হবেন। Enjoy

একটা জিনিস ভেবে দেখুন, আজকে HTML এর বয়স প্রায় ২০ এর কাছাকাছি। এই ২০ বছরে এটাকে প্রায় চার বার আপগ্রেড করা হয়েছে (HTML5 ছাড়া)। যদিও আপগ্রেড করা তত সহজ কাজ নয়। তবুও W3C, যারা HTML এর অফিসিয়াল মেইনটেইনার, তারা নতুন ফিচারগুলা আনতে অনেকটা স্লো ছিল। তাই ডেভেলোপাররা কিছু একটা করার চেষ্টা শুরু করেছিল। কেননা এতে অনেক প্রবলেম ছিল। মূলত ডেভেলোপারদের জন্যই, যাদেরকে একটা ওয়েব পেজ তৈরী করতে অনেকটা যুদ্ধ করতে হত। তাছাড়া এটাতে cross-browser কম্পিটিবিলিটি ইস্যু এবং ঘন্টার পর ঘন্টা সময়ের অপচয় হত।
বর্তমান টেকনোলোজির যুগে Front-End-Developer দের জন্য HTML5 একটা অবিচ্ছেদ্য অংশ হয়ে দাড়িয়েছে। আপনারা জানেন যে, এটা কোনো প্রোগ্রামিং ল্যাংগুয়েজ না, কিন্তু বর্তমানে ওয়েব অ্যাপলিকেশন, ডেস্কটপ অ্যাপলিকেশন এবং মোবাইল অ্যাপ্লিকেশনের জন্য এটা একটা গুরুত্বপূর্ণ অংশ। এই HTML5 যেমন সফটওয়্যার ডেভেলপমেন্ট কমিউনিটিতে যেমন গুরুত্বপূর্ণ অবদান রাখছে তেমনি এর অনেক চ্যালেঞ্জও আছে।

কিছু প্রশ্নের মাধ্যমে আপনি আপনার candidate এর HTML5 এর শক্ত জ্ঞ্যান সম্পর্কে অবহিত হতে পারবেন। কিছু প্রশ্ন এবং উত্তর নিম্নে দেয়া হল --

প্রশ্নঃ সাধারনত HTML4 এবং XHTML এর উপর রিপ্লেস করে HTML5 ডিজাইন করা হয়েছে  ,  কিন্তু HTML5 ব্যবহারের সুবিধাগুলো কি কি এবং ব্যবহারের উদ্দেশ্যগুলো বলুন।
উত্তরঃ মূলত HTML এর 5 ভার্সনে অনেক উন্নতমানের কন্টেন্ট (সাধারণত গ্রাফিক্স এবং ভিডিও) আছে যেগুলা ব্যবহার করার জন্য ব্যবহারকারীকে অতিরিক্ত প্লাগিনস (যেমনঃ flash,silverlight) ব্যবহার করতে হয় না। তাছাড়া স্ট্রাকচারাল ইলিমেন্ট tag ব্যবহারের ফলে এতে কিছু ভাল সাপোর্ট আছে। Error Handling ও সজতর  করেছে। ব্যাকওয়ার্ড কম্পিটিবিলিটি ইস্যুটাও অনেক ভালভাবে হ্যন্ডেল করতে পারছে। কিন্তু এটার সবচেয়ে বড় উদ্দেশ্য হচ্ছে, এটা বিগত ভার্সনগুলোর চেয়ে সবচেয়ে ভালভাবে Cross-Platform সাপোর্ট নিশ্চিত করেছে অর্থাৎ এটা ডেস্কটপ কম্পিউটার,ল্যাপটপ, ট্যাবলেট, এমনকি স্মারটফোনেও সুন্দরভাবে কাজ করছে। অনেকগুলা নতুন ফিচার এতে যুক্ত করা হয়েছে। গ্রাফিক্স,অডিও,ভিডিও ইত্যাদি ইমবেড করতে যথাক্রমে <canvas>,<audio>,<video> ইত্যাদি ট্যাগ ব্যবহার করা হয়। geolocation নামক এক্সটেনশন যা javascript API তে ব্যবহার করা হয়, ড্র্যাগ এন্ড ড্রপ ফিচার, লোকাল স্টোরেজ এবং caching ফিচার আছে। তাছাড়া বর্তমান ওয়েব অ্যাপলিকেশনগুলোতে স্ট্রাকচারাল লজিক আনার জন্য কিছু নতুন ট্যাগ এবং ফর্ম কন্ট্রোল ব্যবহার করা হচ্ছে।


প্রশ্নঃ Semantic HTML কি ? নতুন Semantic HTML5 ইলিমেন্টগুলা বলুন।
উত্তরঃ Semantic HTML হলো তাই যাতে tags গুলা সঠিক উপস্থাপনাগুলোর পরিবর্তে অর্থ উপস্থাপনা করা হয়। যেমনঃ HTML5 বোল্ড টেক্সট ব্যবহারের জন্য <b> ট্যাগের পরিবর্তে <strong> ট্যাগ ব্যবহার করতে এবং ইটালিক টেক্সটের জন্য <i> এর পরিবর্তে <em> ব্যবহার করতে বলে। এই ট্যাগগুলা হুবহু বোল্ড এবং ইটালিক টেক্সট জেনারেট করে। কিন্তু সঠিক তথ্য উপস্থাপনার পরিবর্তে সেগুলা একটা অর্থও প্রকাশ করে।

HTML5 এর কিছু Semantic ইলিমেন্ট নিম্নে দেয়া হল--
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

কিছু HTML5 ফর্ম কন্ট্রোল ট্যাগ নিম্নে দেয়া হলো--
<calender>
<date>
<time>
<email>
<url>
<search>


প্রশ্নঃ HTML5 অনুসারে সম্ভাবনাময় ডেভেলপারদের ব্যর্থতার কারনগুলা বলুন।
উত্তরঃ পুরানো অভ্যাসগুলাই সাধারণত মৃত্যুর কারন হয়ে দাঁড়ায়। অনেক ডেভেলপার HTML5 এ ওয়েব অ্যাপলিকেশন তৈরীর জন্য  পুরোনো ট্যাগগুলা ব্যবহার করে। সবচেয়ে উৎকৃষ্ট উদাহরন হচ্ছে, যখন ডেভেলপাররা একটা লেআউট সেটাপ করার জন্য <table>,<span>,<div> ইত্যাদি ট্যাগ ব্যবহার করে, যেখানে <header>,<footer>,<article>,<aside>  ইতাদি semantic ট্যাগগুলা ব্যবহার করা বেশি উপযোগী ছিল। তাছাড়া পূর্বেও আমি বলেছি  যে তারা <b>,<i> ট্যাগগুলার পরিবর্তে নতুন semantic ট্যাগ <strong>,<em> ব্যবহার করে না। এই পুরোনো বিষয়গুলা পরবর্তীতে জটিল হয়ে যায় ফলে সেগুলা বিভিন্ন ব্রাউজারে বিভিন্ন আচরন করে। আর তাই HTML5 ডকুমেন্ট লেখার সময় ডেভেলপারদের অবশ্যই নতুন semantic ট্যাগগুলা ব্যবহার করা উচিত, পুরানো অভ্যাসগুলা বন্ধ করা উচিত।


প্রশ্নঃ কিভাবে HTML5 ইলিমেন্টগুলা বিভিন্ন কম্বিনেশনে ব্যবহার করা যেতে পারে উদাহরণস্বরূপ <header>,<footer>,<section>,<article>
উত্তরঃ নতুন HTML5 ইলিমেন্টগুলা সম্ভাবনার নতুন দ্বার উন্মোচন করেছে এবং অনেক মজার জিনিস আছে এতে। উদাহরণস্বরূপ স্বীকৃত জ্ঞ্যান হওয়া সত্ত্বেও যেখানে শুধুমাত্র একটা <header> এবং একটা <footer> থাকে সেখানে নতুন HTML5 ডকুমেন্ট মাল্টিপল <header> এবং <footer> সমর্থন করে। এই উভয় ট্যাগ ডিজাইন করা হয়েছে তাদের প্যারেন্ট ইলিমেন্টকে রক্ষা করার জন্য অর্থাৎ <body> ট্যাগই যে হেডার এবং ফুটার বহন করে তা নয় বরং <article> এবং <section> ইলিমেন্টও সেগুলা বহন করে। আরেকটা উদাহরণ হচ্ছে, নতুন <section> এবং <article> ইলিমেন্টের ব্যবহার এবং তাদের মিশ্রণ। <section> সাধারণত <article> ইলিমেন্ট বহন করে পাশাপাশি <article> ও <section> ইলিমেন্ট বহন করে। এইটা ব্যাখ্যা দেয়ার জন্য একটা উদাহরণ দেয়া যায়। ধরুন আপনার ওয়েব পেজে social network interaction এর জন্য <section> ট্যাগ ব্যবহার করে একটা dashboard আছে এবং লেটেস্ট নিউজ আর্টিকেলের একটা <section> আছে যেখানে বিভিন্ন <article> ইলিমেন্ট আছে। বিপরীতভাবে, একটা <article> ও পাঠকদের টিউমেন্টের জন্য একটা <section> বহন করতে পারে।


প্রশ্নঃ কিভাবে HTML5, এইচটিএমএল স্ট্রাকচারকে সহজবোধ্য করে, উদাহরণ সহ বলুন।
উত্তরঃ  প্রথমত, HTML5 স্পেসিফিকেশন doctype ডিক্লারেশনকে সহজবোধ্য করছে। document type ডিক্লারেশন ব্রাউজারকে বলে যে, কোন ধরনের ডকুমেন্ট তারা আশা করে।
পুরাতন XHTML doctype ডিক্লারেশন নিম্নবর্ণিত ছিল--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML4 doctype দেখতে নিম্নরূপ--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

যেখানে HTML5 doctype খুবই সাধারন
<!DOCTYPE html>
HTML5 এর আরেকটা উদ্দেশ্য হচ্ছে কিভাবে আমরা ডকুমেন্টে character encoding ডিকলার করতে পারি। HTML5 এ charset এর ব্যবহার নিম্নে দেয়া হল --
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
...
</head>
<body>
...
</body>
</html>
এটা বেশি সজজবোধ্য যেখানে HTML4 এ পূর্বে  charset meta অ্যাট্রিবিউট ছিল না।
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
</head>
<body>
সবচেয়ে বড় বিষয় হচ্ছে, HTML5 ডকুমেন্ট ভেলিড হওয়ার জন্য <html>,<body>,<head> ইত্যাদি ট্যাগগুলা গুরুত্বপূর্ণ নয়। নিচের উদাহরণটি W3C Markup Validation Service সম্বন্ধে স্বচ্ছ ধারনা দিবে।
<!DOCTYPE html>
<title>My title</title>
<header>My header</header>
<p>Wall of text</p>
এই উদাহরণের সবচেয়ে গুরুত্বপূর্ণ অংশ যেটা কাজ করেছে  সেটা হচ্ছে HTML5 এর doctype। এটা ছাড়া ব্রাউজার ডিটেক্ট করতে পারবে না যে এটা HTML5 ডকুমেন্ট কি না।


প্রশ্নঃ যদিও বর্তমানে সকল ব্রাউজারগুলো HTML5 এর একই specifications গুলা অনুসরন করে তবুও কেন cross-browser support গুরুত্বপূর্ণ, বিস্তারিত বলুন।
উত্তরঃ HTML5 specifications হচ্ছে কিছু নিয়ম যা একটা ডকুমেন্ট valid কিনা তা নির্ধারণ করে। তাছাড়া এগুলা কিছু পদ্ধতি যোগান দেয় এজন্য যে কিভাবে ব্রাউজারগুলো সেই ডকুমেন্টগুলোর সাথে ইন্টারপ্রেট করতে পারে। দুর্ভাগ্যবশত বাস্তবতা এই যে, কোনো ব্রাউজারগুলোই সম্পূর্ণভাবে HTML5 specifications গুলো অনুসরন করে না। প্রধান ব্রাউজারগুলো বেশিরভাগ specifications গুলো সাপোর্ট করে, কিন্তু HTML5 specifications এর ব্রাউজার ইন্টারপ্রিটেশনে কিছু পার্থক্য দেখা যায়। ফলে এটা ডেভেলপারদের জন্য নিশ্চিত করা গুরুত্বপূর্ণ যে, তারা যে কন্টেন্টগুলো তৈরী করবে সবগুলো যেন সব ব্রাউজারে ডিসপ্লে করানো যায়। তাই specifications গুলো থাকা সত্ত্বেও ডেভেলপারদের cross-browser support গুলো মেনে চলা উচিত।


প্রশ্নঃ Real world অনুসারে HTML5 এর সমস্যা এবং সীমাবদ্ধতা গুলো বলুন।
উত্তরঃ বর্তমানে ওয়েব পেজ এবং অ্যাপলিকেশনগুলো বেশি করে ব্যবহার করছি আমরা এবং আমাদের কাছে সবচেয়ে গুরুত্বপূর্ণ যে, কিভাবে ইউজারগন সেই পেজ এবং অ্যাপ্লিকেশনগুলোতে ভালভাবে অ্যাক্সেস করতে পারে। HTML এর যুগ আর নেই। বর্তমানে HTML5 আমাদেরকে নতুন ইউজার ইন্টারফেস দিয়েছে যাতে ইউজারগন ওয়েবে ভালভাবে অ্যাক্সেস করতে পারে। যদিও এতে অনেক প্রবলেম আছে। অন্যতম সমস্যা হচ্ছে, পূর্ববর্তী ডেভেলপার এবং ডিজাইনাররা তাদের ওয়েব পেজ এবং অ্যাপলিকেশন গুলোতে খুব বেশি খেয়াল রাখে না। এর প্রধান কারন ছিল যে পূর্ববর্তী ওয়েবে HTML5 এর accessibility interface features গুলো ছিল না। এমনকি এখন ডেভেলপাররা যদিও তাদের অ্যাপলিকেশনগুলোতে additional accessibility options গুলো ইমপ্লিমেন্ট করতে চায়, তবুও তারা browser support নামক প্রবলেম ফেস করে যাচ্ছে। HTML5 accessibility ব্রাউজারের প্রায় কমন accessibility features গুলো track করে থাকে। accessibility features গুলো ইমপ্লিমেন্ট করার জন্য ডেভেলপারদের অতিরিক্ত সময় ইনভেস্ট করা প্রয়োজন হয়ে পরে। এটা একটা key factor হতে পারে যে, ক্লায়েন্টের সময় শেষ হবার আগেই ব্যবহার করা প্রয়োজন হতে পারে যদি তারা চায় যে তাদের ওয়েব পেজ এবং অ্যাপলিকেশনগুলো আজকের টেকনোলজির সাথে তাল মিলিয়ে চলতে পারে।


প্রশ্নঃ HTML5 web storage বলতে কি বোঝেন, এর security গুলো ব্যাখ্যা করুন, localStorage এবং sessionStorage এর মধ্যকার পার্থক্যগুলো বলুন।
উত্তরঃ web storage এর সহায়তায়, HTML5 সাধারনত ব্যবহারকারীর ব্রাউজারে লোকালভাবে ওয়েব পেজ গুলোতে ডাটা জমা করে রাখে। পূর্বের ভার্সনগুলোতে, ডেভেলপারগন শুধুমাত্র cookies ব্যবহার করত। কিন্তু নতুন web storage সিস্টেম অধিক দ্রুতগামী এবং নিরাপত্তাযুক্ত। এটা cookies এর চেয়ে ভিন্ন। কারন প্রত্যেকবার server request এ web storage এর ডাটাগুলোকে যুক্ত করা হয় না। শুধুমাত্র যখন চাওয়া হয়, তখনই এটাকে ব্যবহার করা হয়। name এবং value দ্বারা জোড়া হিসেবে ডাটাগুলোকে জমা রাখা হয়। cookies এর চেয়ে এটার অন্যতম সুবিধা হচ্ছে এটার storage limit। web storage সর্বচ্চ 5MB পর্যন্ত হতে পারে এবং এটার কন্টেন্টগুলো কখনই সার্ভারে ট্রান্সফার করা হয় না। সীমিত হওয়ার জন্য, একটা ওয়েব পেজ শুধুমাত্র নিজেই তার ডাটাগুলোতে অ্যাক্সেস করতে পারে। এটা নোট করে রাখা গুরুত্বপূর্ণ যে, যেহেতু cookies এর চেয়ে web storage এ অধিক নিরাপত্তা আছে সেখানে অনেক কিছুই আমাদের মনে রাখতে হবে। cookies এর চেয়ে এটা ভাল কেননা কন্টেন্টগুলো সাধারণত পাঠানো হয় না। কিন্তু localStorage লুকানো হয় না। এই কারনেই security tokens এর মত সেনসিটিভ ডাটাগুলো সেখানে store করে রাখা উচিত নয়। তাই ওয়েব অ্যাপলিকেশনগুলোর কখনই web storage এর ডাটাগুলোর উপর নির্ভর করে থাকা উচিত না কেননা অসৎ ব্যক্তিরা যে কোনো সময়ে সহজেই localStorage এবং sessionStorage এর ডাটাগুলো মডিফাই করতে পারে। localStorage এবং sessionStorage এর মধ্যকার পার্থক্যগুলো সাধারণত lifetime এবং storage এর পাল্লার সাথে জড়িত। localStorage এর মাধ্যমে store করে রাখা ডাটাগুলো হচ্ছে স্থায়ী। এটা সবসময় ব্যবহারকারীর কম্পিউটারে জমা হয়ে থাকে যতক্ষণ না একটা ওয়েব অ্যাপলিকেশন এটা delete করে অথবা ব্যবহারকারী ব্রাউজারকে ডিলেট করার জন্য বলে। অপরপক্ষে sessionStorage এরও একটা lifetime আছে যেখানে ব্রাউজারের একটা tab যদি ওপেন থাকে তখন কোনো script যদি চালানো হয় তা store হয়ে থাকে। যখন tab ক্লোজ করে দেয়া হয়, তখন sessionStorage এর মাধ্যমে জমা হয়ে থাকা ডাটাগুলো ডিলেট হয়ে যায়। তাছাড়া আমরা জানি, the localStorage, sessionStorage is window scoped। উদাহরণস্বরূপ একজন ব্যবহারকারী যদি তার ব্রাউজারে দুইটা tab ওপেন রাখে এবং সেই দুইটা ট্যাবে যদিও একই address থেকে একই ডকুমেন্ট প্রদর্শন করে, তবুও সেই দুই tab এর sessionStorage ডাটা ভিন্ন হবে। মূলত একটা Tab এ চলমান script অপর tab এর চলমান script পড়তে অথবা অভাররাইট করতে পারে না যদিও উভয় ট্যাব same page এবং script ভিজিট করে।


প্রশ্নঃ web workers বলতে কি বোঝেন।
উত্তরঃ JavaScript হচ্ছে একটা সিঙ্গেল থ্রেডেড ল্যাঙ্গুয়েজ। ফলে একই সময়ে একের অধিক script গুলো রান করতে পারে না। web workers হচ্ছে অনেকগুলো script রান করার জন্য নতুন একটা API যেখানে স্বাধীনভাবে অনেকগুলো স্ক্রিপ্ট ব্রাউজারের background একটা সিঙ্গেল থ্রেডেই রান করানো যায়। ফলাফলস্বরূপ, ওয়েব পেজগুলো কমপ্লিট করতে তাদের web workers জন্য অপেক্ষা করার কোনো প্রয়োজন নেই যা পারফরমেন্স এবং রেস্পন্সিভনেস উন্নত করে কারন ব্যবহারকারীরা পেজের সাথে ভালোভাবে সক্রিয় থাকতে পারে যখন web workers গুলো ব্রাউজারের background এ স্থিরভাবে চলতে থাকে। web workers এর একটা ভাল উদাহরণ হচ্ছে, long-running script গুলো যারা ভারী কম্পিউটেশন করে থাকে।
পরিশেষে বলা যায়, উপরের জ্ঞ্যানগুলো একজন top HTML5 Developer এর জন্য খুবই প্রয়োজন। ফলে সত্যিকারের HTML5 Developer পাওয়া একটা চ্যালেঞ্জ হয়ে দাঁড়িয়েছে। এই ধরনের ডেভেলপার দ্বারাই টিমের productivity বাড়ানো সম্ভব।

আরও অনেক রিসোর্স দেয়া যেত। কিন্তু সময়ের অভাবে আর দিতে পারলাম না।
আমার জন্য কিচ্ছু করতে হবে না। শুধু দোয়া করবেন মন ভরে