স্পর্শ এবং মাউস

আবার প্রথমবারের মতো একসঙ্গে

Chris Wilson

Paul Kinlan

ভূমিকা

প্রায় ত্রিশ বছর ধরে, ডেস্কটপ কম্পিউটিং অভিজ্ঞতা আমাদের প্রধান ব্যবহারকারী ইনপুট ডিভাইস হিসাবে একটি কীবোর্ড এবং একটি মাউস বা ট্র্যাকপ্যাডকে কেন্দ্র করে। গত দশকে, তবে, স্মার্টফোন এবং ট্যাবলেটগুলি একটি নতুন মিথস্ক্রিয়া দৃষ্টান্ত এনেছে: স্পর্শ। টাচ-সক্ষম উইন্ডোজ 8 মেশিনের প্রবর্তনের সাথে, এবং এখন দুর্দান্ত টাচ-সক্ষম Chromebook পিক্সেল প্রকাশের সাথে, স্পর্শ এখন প্রত্যাশিত ডেস্কটপ অভিজ্ঞতার অংশ হয়ে উঠছে। সবচেয়ে বড় চ্যালেঞ্জগুলির মধ্যে একটি হল অভিজ্ঞতা তৈরি করা যা শুধুমাত্র টাচ ডিভাইস এবং মাউস ডিভাইসেই কাজ করে না, কিন্তু এই ডিভাইসগুলিতেও কাজ করে যেখানে ব্যবহারকারী উভয় ইনপুট পদ্ধতি ব্যবহার করবে - কখনও কখনও একই সাথে!

এই নিবন্ধটি আপনাকে বুঝতে সাহায্য করবে কিভাবে স্পর্শ ক্ষমতা ব্রাউজারে তৈরি করা হয়, কিভাবে আপনি এই নতুন ইন্টারফেস মেকানিজমকে আপনার বিদ্যমান অ্যাপে একীভূত করতে পারেন এবং কিভাবে মাউস ইনপুট দিয়ে স্পর্শ সুন্দরভাবে খেলতে পারে।

ওয়েব প্ল্যাটফর্মে স্পর্শের অবস্থা

আইফোন প্রথম জনপ্রিয় প্ল্যাটফর্ম যা ওয়েব ব্রাউজারে তৈরি ডেডিকেটেড টাচ এপিআই ছিল। অন্যান্য বেশ কিছু ব্রাউজার বিক্রেতা iOS বাস্তবায়নের সাথে সামঞ্জস্যপূর্ণ হওয়ার জন্য তৈরি অনুরূপ API ইন্টারফেস তৈরি করেছে, যা এখন "টাচ ইভেন্ট সংস্করণ 1" স্পেসিফিকেশন দ্বারা বর্ণনা করা হয়েছে। টাচ ইভেন্টগুলি ডেস্কটপে Chrome এবং Firefox দ্বারা এবং iOS এবং Chrome-এ Safari এবং Android-এ Android ব্রাউজার, সেইসাথে Blackberry ব্রাউজারের মতো অন্যান্য মোবাইল ব্রাউজার দ্বারা সমর্থিত।

আমার সহকর্মী Boris Smus টাচ ইভেন্টগুলির উপর একটি দুর্দান্ত HTML5Rocks টিউটোরিয়াল লিখেছেন যা আপনি আগে টাচ ইভেন্টগুলি না দেখে থাকলে শুরু করার একটি ভাল উপায়৷ আসলে, আপনি যদি আগে টাচ ইভেন্টের সাথে কাজ না করে থাকেন, তবে আপনি চালিয়ে যাওয়ার আগে এখন সেই নিবন্ধটি পড়ুন। যাও, আমি অপেক্ষা করব।

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

সবচেয়ে গুরুত্বপূর্ণ: ব্যবহারকারীর স্পর্শ এবং একটি মাউস থাকতে পারে

অনেক ডেভেলপার এমন সাইট তৈরি করেছেন যেগুলি স্থিরভাবে সনাক্ত করে যে কোনও পরিবেশ স্পর্শ ইভেন্টগুলিকে সমর্থন করে কিনা এবং তারপরে অনুমান করে যে তাদের শুধুমাত্র স্পর্শ (এবং মাউস নয়) ইভেন্টগুলিকে সমর্থন করতে হবে। এটি এখন একটি ত্রুটিপূর্ণ অনুমান - পরিবর্তে, শুধুমাত্র স্পর্শ ইভেন্ট উপস্থিত থাকার অর্থ এই নয় যে ব্যবহারকারী প্রাথমিকভাবে সেই স্পর্শ ইনপুট ডিভাইস ব্যবহার করছেন৷ Chromebook পিক্সেল এবং কিছু Windows 8 ল্যাপটপের মতো ডিভাইসগুলি এখন মাউস এবং টাচ ইনপুট উভয় পদ্ধতি সমর্থন করে এবং অদূর ভবিষ্যতে আরও অনেক কিছু হবে৷ এই ডিভাইসগুলিতে, অ্যাপ্লিকেশনগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহারকারীদের জন্য মাউস এবং টাচ স্ক্রিন উভয়ই ব্যবহার করা খুবই স্বাভাবিক, তাই "মাউস সমর্থনের প্রয়োজন নেই" এর মতো "টাচ সমর্থন করে" একই নয়। আপনি সমস্যাটিকে "আমাকে দুটি ভিন্ন মিথস্ক্রিয়া শৈলী লিখতে হবে এবং তাদের মধ্যে স্যুইচ করতে হবে" হিসাবে ভাবতে পারবেন না, আপনাকে চিন্তা করতে হবে কিভাবে উভয় মিথস্ক্রিয়া একসাথে পাশাপাশি স্বাধীনভাবে কাজ করবে। আমার ক্রোমবুক পিক্সেল-এ, আমি প্রায়শই ট্র্যাকপ্যাড ব্যবহার করি, কিন্তু আমিও স্ক্রিন স্পর্শ করি - একই অ্যাপ্লিকেশন বা পৃষ্ঠায়, এই মুহূর্তে যা সবচেয়ে স্বাভাবিক মনে হয় আমি তা করি। অন্যদিকে, কিছু টাচস্ক্রিন ল্যাপটপ ব্যবহারকারীরা খুব কমই টাচস্ক্রিন ব্যবহার করলে - তাই টাচ ইনপুটের উপস্থিতি মাউস নিয়ন্ত্রণকে অক্ষম বা বাধা দেবে না।

দুর্ভাগ্যবশত, ব্যবহারকারীর ব্রাউজারের পরিবেশ স্পর্শ ইনপুট সমর্থন করে কি না তা জানা কঠিন হতে পারে; আদর্শভাবে, একটি ডেস্কটপ মেশিনে একটি ব্রাউজার সর্বদা স্পর্শ ইভেন্টগুলির জন্য সমর্থন নির্দেশ করে যাতে একটি টাচস্ক্রিন ডিসপ্লে যে কোনও সময় সংযুক্ত করা যেতে পারে (যেমন যদি KVM এর মাধ্যমে সংযুক্ত একটি টাচস্ক্রিন উপলব্ধ হয়)। এই সমস্ত কারণে, আপনার অ্যাপ্লিকেশনগুলি স্পর্শ এবং মাউসের মধ্যে স্যুইচ করার চেষ্টা করা উচিত নয় - কেবল উভয়কেই সমর্থন করুন!

সমর্থন মাউস এবং স্পর্শ একসাথে

#1 - ক্লিক করা এবং ট্যাপ করা - জিনিসগুলির "প্রাকৃতিক" অর্ডার৷

প্রথম সমস্যা হল টাচ ইন্টারফেসগুলি সাধারণত মাউস ক্লিক অনুকরণ করার চেষ্টা করে - স্পষ্টতই, যেহেতু টাচ ইন্টারফেসগুলিকে এমন অ্যাপ্লিকেশনগুলিতে কাজ করতে হবে যেগুলি আগে শুধুমাত্র মাউস ইভেন্টগুলির সাথে ইন্টারঅ্যাক্ট করেছে! আপনি এটিকে একটি শর্টকাট হিসাবে ব্যবহার করতে পারেন - কারণ "ক্লিক" ইভেন্টগুলি অব্যাহত থাকবে, ব্যবহারকারী মাউস দিয়ে ক্লিক করুক বা স্ক্রীনে তাদের আঙুলে ট্যাপ করুক না কেন। যাইহোক, এই শর্টকাট সঙ্গে কিছু সমস্যা আছে.

প্রথমত, আরও উন্নত টাচ ইন্টারঅ্যাকশন ডিজাইন করার সময় আপনাকে সতর্ক থাকতে হবে: যখন ব্যবহারকারী একটি মাউস ব্যবহার করে তখন এটি একটি ক্লিক ইভেন্টের মাধ্যমে প্রতিক্রিয়া জানাবে, কিন্তু ব্যবহারকারী যখন স্ক্রিনে স্পর্শ করবে তখন স্পর্শ এবং ক্লিক উভয় ঘটনা ঘটবে। একক ক্লিকের জন্য ইভেন্টের ক্রম হল:

1. স্পর্শ শুরু
2. স্পর্শ মুভ
3. স্পর্শ
4. মাউসওভার
5. মাউসমুভ
6. মাউসডাউন
7. মাউসআপ
8. ক্লিক

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

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

দ্বিতীয়ত, যখন একজন ব্যবহারকারী মোবাইল ডিভাইসে একটি ওয়েব পৃষ্ঠার একটি উপাদানে ট্যাপ করে, যে পৃষ্ঠাগুলি মোবাইল ইন্টারঅ্যাকশনের জন্য ডিজাইন করা হয়নি সেগুলি টাচস্টার্ট ইভেন্ট এবং মাউস ইভেন্টের প্রক্রিয়াকরণের (মাউসডাউন) মধ্যে কমপক্ষে 300 মিলিসেকেন্ডের বিলম্ব হয়। এটি ক্রোম ব্যবহার করে করা যেতে পারে, আপনি একটি নন-টাচ সিস্টেমে টাচ ইন্টারফেস পরীক্ষা করতে সাহায্য করতে ক্রোম ডেভেলপার টুলস-এ "এমুলেট টাচ ইভেন্ট" চালু করতে পারেন!

এই বিলম্ব হল ব্রাউজারকে সময় নির্ধারণ করার জন্য ব্যবহারকারী অন্য অঙ্গভঙ্গি করছেন কিনা - বিশেষ করে, ডবল-ট্যাপ জুমিং। স্পষ্টতই, এটি এমন ক্ষেত্রে সমস্যাযুক্ত হতে পারে যেখানে আপনি আঙুলের স্পর্শে তাত্ক্ষণিক প্রতিক্রিয়া পেতে চান। এই বিলম্ব স্বয়ংক্রিয়ভাবে ঘটে এমন পরিস্থিতিতে সীমাবদ্ধ করার চেষ্টা করার জন্য চলমান কাজ চলছে।

এই বিলম্ব এড়ানোর প্রথম এবং সহজ উপায় হল মোবাইল ব্রাউজারকে "বলা" যে আপনার পৃষ্ঠার জুম করার প্রয়োজন নেই - যা একটি নির্দিষ্ট ভিউপোর্ট ব্যবহার করে করা যেতে পারে, যেমন আপনার পৃষ্ঠায় ঢোকানোর মাধ্যমে:

<meta name="viewport" content="width=device-width,user-scalable=no">

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

#2: Mousemove ইভেন্ট স্পর্শ দ্বারা বহিস্কার করা হয় না

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

ব্রাউজারগুলি সাধারণত স্বয়ংক্রিয়ভাবে এইচটিএমএল কন্ট্রোলে টাচ ইন্টারঅ্যাকশনের জন্য উপযুক্ত মিথস্ক্রিয়া বাস্তবায়ন করে - তাই, উদাহরণস্বরূপ, HTML5 রেঞ্জ কন্ট্রোলগুলি তখনই কাজ করবে যখন আপনি স্পর্শ ইন্টারঅ্যাকশন ব্যবহার করবেন। যাইহোক, আপনি যদি নিজের নিয়ন্ত্রণগুলি প্রয়োগ করে থাকেন, তাহলে সেগুলি সম্ভবত ক্লিক-এন্ড-ড্র্যাগ টাইপ ইন্টারঅ্যাকশনগুলিতে কাজ করবে না; প্রকৃতপক্ষে, কিছু সাধারণভাবে ব্যবহৃত লাইব্রেরি (যেমন jQueryUI) এখনও এইভাবে স্থানীয়ভাবে স্পর্শ মিথস্ক্রিয়া সমর্থন করে না (যদিও jQueryUI-এর জন্য, এই সমস্যাটির জন্য বেশ কয়েকটি বানর-প্যাচ সমাধান রয়েছে)। স্পর্শের সাথে কাজ করার জন্য আমার ওয়েব অডিও প্লেগ্রাউন্ড অ্যাপ্লিকেশন আপগ্রেড করার সময় এটি প্রথম সমস্যাগুলির মধ্যে একটি ছিল - স্লাইডারগুলি jQueryUI-ভিত্তিক ছিল, তাই তারা ক্লিক-এন্ড-ড্র্যাগ ইন্টারঅ্যাকশনের সাথে কাজ করেনি। আমি HTML5 পরিসর নিয়ন্ত্রণে পরিবর্তিত হয়েছি এবং তারা কাজ করেছে। বিকল্পভাবে, অবশ্যই, স্লাইডারগুলি আপডেট করার জন্য আমি সহজভাবে টাচমুভ হ্যান্ডলার যোগ করতে পারতাম, কিন্তু এর সাথে একটি সমস্যা আছে...

#3: টাচমুভ এবং মাউসমুভ একই জিনিস নয়

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

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

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

#4: টাচ এবং :হোভার

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

যদিও যথেষ্ট মজার ব্যাপার হল, CSS :hover pseudoclass কিছু ক্ষেত্রে টাচ ইন্টারফেস দ্বারা ট্রিগার করা যেতে পারে - একটি উপাদানে ট্যাপ করলে এটিকে :অ্যাক্টিভ হয় যখন আঙুল নিচে থাকে এবং এটি :hover অবস্থাও অর্জন করে। (ইন্টারনেট এক্সপ্লোরারের সাথে, ব্যবহারকারীর আঙুল নিচে থাকা অবস্থায়ই :হোভার কার্যকর হয় - অন্যান্য ব্রাউজারগুলি পরবর্তী ট্যাপ বা মাউস সরানো পর্যন্ত :হোভার কার্যকর রাখে ইন্টারফেস - একটি উপাদান সক্রিয় করার একটি পার্শ্ব প্রতিক্রিয়া হল :হোভার অবস্থাও প্রয়োগ করা হয়। উদাহরণ স্বরূপ:

<style>
img ~ .content {
  display:none;
}

img:hover ~ .content {
  display:block;
}
</style>

<img src="/awesome.png">
<div class="content">This is an awesome picture of me</div>

একবার অন্য একটি উপাদান ট্যাপ করা হলে উপাদানটি আর সক্রিয় থাকে না, এবং হোভার অবস্থা অদৃশ্য হয়ে যায়, ঠিক যেমন ব্যবহারকারী একটি মাউস পয়েন্টার ব্যবহার করছেন এবং এটিকে উপাদান থেকে সরিয়ে দিয়েছেন। আপনি বিষয়বস্তুটিকে একটি <a> উপাদানে মোড়ানো করতে চান যাতে এটি একটি ট্যাবস্টপ হয় - এইভাবে ব্যবহারকারী মাউস হভার বা ক্লিক, একটি টাচ ট্যাপ বা একটি কীপ্রেসের অতিরিক্ত তথ্য টগল করতে পারে, কোনো জাভাস্ক্রিপ্ট ছাড়াই প্রয়োজনীয় আমি আনন্দের সাথে অবাক হয়েছিলাম কারণ আমি আমার ওয়েব অডিও প্লেগ্রাউন্ডকে টাচ ইন্টারফেসের সাথে ভালভাবে কাজ করার জন্য কাজ শুরু করেছি যে আমার পপ-আউট মেনুগুলি ইতিমধ্যেই স্পর্শে ভাল কাজ করেছে, কারণ আমি এই ধরনের কাঠামো ব্যবহার করতাম!

উপরের পদ্ধতিটি মাউস পয়েন্টার ভিত্তিক ইন্টারফেসের পাশাপাশি টাচ ইন্টারফেসের জন্য ভাল কাজ করে। এটি হোভারে "শিরোনাম" বৈশিষ্ট্যগুলি ব্যবহার করার বিপরীতে, যা উপাদানটি সক্রিয় হলে প্রদর্শিত হবে না:

<img src="/awesome.png" title="this doesn't show up in touch">

#5: স্পর্শ বনাম মাউস স্পষ্টতা

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

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

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

#6: টাচ হ্যান্ডলারগুলিকে ধারণ করে রাখুন, নতুবা তারা আপনার স্ক্রোলকে জ্যাক করে দেবে

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

এই সমস্যাটি এড়াতে অনুসরণ করার জন্য একটি নির্দেশিকা হল নিশ্চিত করা যে আপনি যদি শুধুমাত্র আপনার UI এর একটি ছোট অংশে টাচ ইভেন্ট পরিচালনা করেন, আপনি সেখানে শুধুমাত্র টাচ হ্যান্ডলার সংযুক্ত করেন (যেমন, পৃষ্ঠার <body> এ নয়) ; সংক্ষেপে, আপনার স্পর্শ হ্যান্ডলারের সুযোগ যতটা সম্ভব সীমিত করুন।

#7: মাল্টি টাচ

চূড়ান্ত আকর্ষণীয় চ্যালেঞ্জ হল যে যদিও আমরা এটিকে "টাচ" ইউজার ইন্টারফেস হিসাবে উল্লেখ করছি, প্রায় সর্বজনীনভাবে সমর্থনটি আসলে মাল্টি-টাচের জন্য - অর্থাৎ, APIগুলি একবারে একাধিক টাচ ইনপুট প্রদান করে। আপনি যখন আপনার অ্যাপ্লিকেশনগুলিতে স্পর্শ সমর্থন করতে শুরু করেন, তখন আপনার বিবেচনা করা উচিত যে একাধিক স্পর্শ আপনার অ্যাপ্লিকেশনকে কীভাবে প্রভাবিত করতে পারে।

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

হার্ডওয়্যার কতগুলি টাচ পয়েন্ট সমর্থন করে তা নির্ধারণ করার জন্য বর্তমানে বাস্তবায়িত W3C টাচ এপিআইগুলির কোনও API নেই, তাই আপনার ব্যবহারকারীরা কতগুলি টাচ পয়েন্ট চাইবেন তার জন্য আপনাকে আপনার সর্বোত্তম অনুমান ব্যবহার করতে হবে - বা অবশ্যই, কতগুলি স্পর্শের দিকে মনোযোগ দিন পয়েন্টগুলি আপনি অনুশীলনে দেখেন এবং মানিয়ে নেন। উদাহরণস্বরূপ, একটি পিয়ানো অ্যাপ্লিকেশনে, আপনি যদি দুটির বেশি স্পর্শ পয়েন্ট দেখতে না পান তবে আপনি কিছু "কর্ড" UI যোগ করতে চাইতে পারেন। পয়েন্টার ইভেন্টস এপিআই ডিভাইসের ক্ষমতা নির্ধারণের জন্য একটি API আছে।

টাচিং আপ

আশা করি এই নিবন্ধটি আপনাকে মাউস ইন্টারঅ্যাকশনের পাশাপাশি স্পর্শ বাস্তবায়নে সাধারণ চ্যালেঞ্জগুলির বিষয়ে কিছু নির্দেশনা দিয়েছে। অন্য যেকোনো পরামর্শের চেয়ে বেশি গুরুত্বপূর্ণ, অবশ্যই, আপনাকে মোবাইল, ট্যাবলেট এবং সম্মিলিত মাউস-এবং-টাচ ডেস্কটপ পরিবেশে আপনার অ্যাপটি পরীক্ষা করতে হবে। আপনার কাছে টাচ+মাউস হার্ডওয়্যার না থাকলে, আপনাকে বিভিন্ন পরিস্থিতিতে পরীক্ষা করতে সাহায্য করতে Chrome এর " এমুলেট টাচ ইভেন্ট " ব্যবহার করুন।

টাচ ইনপুট, মাউস ইনপুট, এমনকি একই সময়ে উভয় স্টাইল মিথস্ক্রিয়ার সাথে ভালভাবে কাজ করে এমন আকর্ষক ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করা এই নির্দেশনার অংশগুলি অনুসরণ করা কেবল সম্ভব নয়, তবে তুলনামূলকভাবে সহজ।