মাল্টি-ডিভাইস ওয়েবে LEGO® ইট নিয়ে আসা
বিল্ড উইথ ক্রোম, ডেস্কটপ ক্রোম ব্যবহারকারীদের জন্য একটি মজার পরীক্ষা যা মূলত অস্ট্রেলিয়ায় চালু হয়েছিল , 2014 সালে বিশ্বব্যাপী উপলব্ধতা, THE LEGO® MOVIE™ এর সাথে টাই-ইন এবং মোবাইল ডিভাইসের জন্য নতুন যোগ করা সমর্থন সমন্বিত করে পুনরায় প্রকাশ করা হয়েছিল৷ এই প্রবন্ধে আমরা প্রকল্প থেকে কিছু শিক্ষা শেয়ার করব, বিশেষ করে শুধুমাত্র ডেস্কটপ অভিজ্ঞতা থেকে একটি মাল্টি-স্ক্রিন সমাধানে যাওয়ার বিষয়ে যা মাউস এবং টাচ ইনপুট উভয়কেই সমর্থন করে।
ক্রোমের সাথে বিল্ডের ইতিহাস
বিল্ড উইথ ক্রোমের প্রথম সংস্করণটি 2012 সালে অস্ট্রেলিয়ায় লঞ্চ করা হয়েছিল৷ আমরা সম্পূর্ণ নতুন উপায়ে ওয়েবের শক্তি প্রদর্শন করতে এবং ক্রোমকে সম্পূর্ণ নতুন দর্শকদের কাছে নিয়ে আসতে চেয়েছিলাম৷
সাইটের দুটি প্রধান অংশ ছিল: "বিল্ড" মোড যেখানে ব্যবহারকারীরা লেগো ইট ব্যবহার করে সৃষ্টিগুলি তৈরি করতে পারে এবং Google মানচিত্রের লেগো-ফাইড সংস্করণে সৃষ্টিগুলি ব্রাউজ করার জন্য "এক্সপ্লোর" মোড।
ব্যবহারকারীদের সেরা LEGO নির্মাণের অভিজ্ঞতা দিতে ইন্টারেক্টিভ 3D অপরিহার্য ছিল। 2012 সালে, WebGL শুধুমাত্র ডেস্কটপ ব্রাউজারগুলিতে সর্বজনীনভাবে উপলব্ধ ছিল, তাই বিল্ডকে শুধুমাত্র ডেস্কটপ অভিজ্ঞতা হিসাবে লক্ষ্য করা হয়েছিল। সৃষ্টিগুলি প্রদর্শনের জন্য ব্যবহৃত Google মানচিত্রগুলি অন্বেষণ করুন, কিন্তু যথেষ্ট কাছাকাছি জুম করার সময় এটি 3D তে সৃষ্টিগুলি দেখানো মানচিত্রের একটি WebGL বাস্তবায়নে স্যুইচ করে, এখনও বেসপ্লেট টেক্সচার হিসাবে Google মানচিত্র ব্যবহার করে৷ আমরা এমন একটি পরিবেশ তৈরি করার আশা করেছিলাম যেখানে সমস্ত বয়সের LEGO উত্সাহীরা সহজেই এবং স্বজ্ঞাতভাবে তাদের সৃজনশীলতা প্রকাশ করতে পারে এবং একে অপরের সৃষ্টিগুলি অন্বেষণ করতে পারে৷
2013 সালে, আমরা বিল্ড উইথ ক্রোমকে নতুন ওয়েব প্রযুক্তিতে প্রসারিত করার সিদ্ধান্ত নিয়েছি। এই প্রযুক্তিগুলির মধ্যে ছিল Android এর জন্য Chrome-এ WebGL, যা স্বাভাবিকভাবেই বিল্ড উইথ ক্রোমকে একটি মোবাইল অভিজ্ঞতায় বিকশিত হতে দেয়। শুরু করার জন্য, আমরা মোবাইল অ্যাপের তুলনায় ব্রাউজারের মাধ্যমে যে অঙ্গভঙ্গি আচরণ এবং স্পর্শকাতর প্রতিক্রিয়ার মুখোমুখি হতে পারি তা বোঝার জন্য "বিল্ডার টুল" এর হার্ডওয়্যার নিয়ে প্রশ্ন করার আগে আমরা প্রথমে স্পর্শ প্রোটোটাইপ তৈরি করেছি।
একটি প্রতিক্রিয়াশীল ফ্রন্ট-এন্ড
আমাদের স্পর্শ এবং মাউস ইনপুট উভয়ের সাথে ডিভাইসগুলিকে সমর্থন করতে হবে। যাইহোক, ছোট টাচ স্ক্রিনে একই UI ব্যবহার করা স্থানের সীমাবদ্ধতার কারণে একটি সাবঅপ্টিমাল সমাধানে পরিণত হয়েছে।
বিল্ডে প্রচুর ইন্টারঅ্যাক্টিভিটি চলছে: জুম ইন এবং আউট করা, ইটের রঙ পরিবর্তন করা এবং অবশ্যই ইট নির্বাচন করা, ঘোরানো এবং স্থাপন করা। এটি এমন একটি টুল যেখানে ব্যবহারকারীরা প্রায়শই অনেক সময় ব্যয় করে, তাই এটি গুরুত্বপূর্ণ যে তারা প্রায়শই ব্যবহার করে এমন সবকিছুতে তাদের দ্রুত অ্যাক্সেস থাকে এবং তাদের এটির সাথে ইন্টারঅ্যাক্ট করতে স্বাচ্ছন্দ্য বোধ করা উচিত।
একটি অত্যন্ত ইন্টারেক্টিভ টাচ অ্যাপ্লিকেশন ডিজাইন করার সময়, আপনি দেখতে পাবেন যে স্ক্রীনটি দ্রুত ছোট মনে হয় এবং ইন্টারঅ্যাক্ট করার সময় ব্যবহারকারীর আঙ্গুলগুলি স্ক্রীনের অনেক অংশ কভার করে। বিল্ডারের সাথে কাজ করার সময় এটি আমাদের জন্য স্পষ্ট হয়ে ওঠে। ডিজাইন করার সময় আপনাকে গ্রাফিক্সের পিক্সেলের পরিবর্তে প্রকৃত পর্দার আকার বিবেচনা করতে হবে। প্রকৃত বিষয়বস্তুর জন্য নিবেদিত যতটা সম্ভব স্ক্রীন রিয়েল এস্টেট পেতে বোতাম এবং নিয়ন্ত্রণের সংখ্যা কমিয়ে আনা গুরুত্বপূর্ণ হয়ে ওঠে।
আমাদের লক্ষ্য ছিল স্পর্শ ডিভাইসে বিল্ডকে প্রাকৃতিক অনুভূতি তৈরি করা, শুধুমাত্র আসল ডেস্কটপ বাস্তবায়নে টাচ ইনপুট যোগ করা নয়, এটিকে সত্যিই স্পর্শের জন্য উদ্দেশ্য করে অনুভব করা। আমরা UI এর দুটি ভিন্নতা নিয়ে শেষ করেছি, একটি বড় স্ক্রীন সহ ডেস্কটপ এবং ট্যাবলেটগুলির জন্য এবং একটি ছোট স্ক্রীন সহ মোবাইল ডিভাইসগুলির জন্য৷ যখন সম্ভব, একটি একক বাস্তবায়ন ব্যবহার করা এবং মোডগুলির মধ্যে একটি তরল স্থানান্তর করা সর্বোত্তম। আমাদের ক্ষেত্রে, আমরা নির্ধারণ করেছি যে এই দুটি মোডের মধ্যে অভিজ্ঞতার মধ্যে এমন একটি উল্লেখযোগ্য পার্থক্য ছিল যে আমরা একটি নির্দিষ্ট ব্রেকপয়েন্টের উপর নির্ভর করার সিদ্ধান্ত নিয়েছি। দুটি সংস্করণে অনেকগুলি বৈশিষ্ট্য মিল রয়েছে এবং আমরা শুধুমাত্র একটি কোড বাস্তবায়নের মাধ্যমে বেশিরভাগ জিনিসগুলি করার চেষ্টা করেছি, তবে UI এর কিছু দিক দুটির মধ্যে আলাদাভাবে কাজ করে।
আমরা মোবাইল ডিভাইসগুলি সনাক্ত করতে ব্যবহারকারী-এজেন্ট ডেটা ব্যবহার করি এবং তারপরে ছোট পর্দার মোবাইল UI ব্যবহার করা উচিত কিনা তা নির্ধারণ করতে আমরা ভিউপোর্টের আকার পরীক্ষা করি। একটি "বড় স্ক্রীন" কেমন হওয়া উচিত তার জন্য একটি ব্রেকপয়েন্ট বেছে নেওয়া একটু কঠিন, কারণ প্রকৃত পর্দার আকারের একটি নির্ভরযোগ্য মান পাওয়া কঠিন। সৌভাগ্যবশত, আমাদের ক্ষেত্রে, আমরা একটি বড় স্ক্রীন সহ একটি টাচ ডিভাইসে ছোট স্ক্রীন UI প্রদর্শন করলে এটি আসলেই কোন ব্যাপার না, কারণ টুলটি এখনও সূক্ষ্ম কাজ করবে, শুধুমাত্র কিছু বোতামগুলিকে একটু বেশি বড় মনে হতে পারে। শেষ পর্যন্ত, আমরা ব্রেকপয়েন্ট 1000 পিক্সেল সেট করেছি; আপনি যদি 1000 পিক্সেলের (ল্যান্ডস্কেপ মোডে) একটি উইন্ডো থেকে সাইটটি লোড করেন, তাহলে আপনি বড় স্ক্রীন সংস্করণ পাবেন।
আসুন দুটি পর্দার আকার এবং অভিজ্ঞতা সম্পর্কে একটু কথা বলি:
মাউস এবং স্পর্শ সমর্থন সহ বড় স্ক্রিন
বড় স্ক্রীন সংস্করণটি মাউস সমর্থন সহ সমস্ত ডেস্কটপ কম্পিউটারে এবং বড় স্ক্রীনের (যেমন Google নেক্সাস 10) সহ ডিভাইসগুলিকে স্পর্শ করতে পরিবেশন করা হয়। এই সংস্করণটি মূল ডেস্কটপ সমাধানের কাছাকাছি কোন ধরনের নেভিগেশন নিয়ন্ত্রণ উপলব্ধ, কিন্তু আমরা স্পর্শ সমর্থন এবং কিছু অঙ্গভঙ্গি যোগ করেছি। আমরা উইন্ডোর আকারের উপর নির্ভর করে UI সামঞ্জস্য করি, তাই যখন কোনও ব্যবহারকারী উইন্ডোটির আকার পরিবর্তন করেন, তখন এটি কিছু UI সরিয়ে ফেলতে বা পুনরায় আকার দিতে পারে। আমরা CSS মিডিয়া প্রশ্ন ব্যবহার করে এটি করি।
উদাহরণ: যখন উপলব্ধ উচ্চতা 730 পিক্সেলের কম হয়, তখন এক্সপ্লোর মোডে জুম-স্লাইডার নিয়ন্ত্রণ লুকানো থাকে:
@media only screen and (max-height: 730px) {
.zoom-slider {
display: none;
}
}
ছোট পর্দা, স্পর্শ সমর্থন শুধুমাত্র
এই সংস্করণটি মোবাইল ডিভাইস এবং ছোট ট্যাবলেটে (টার্গেট ডিভাইস নেক্সাস 4 এবং নেক্সাস 7) পরিবেশন করা হয়। এই সংস্করণের জন্য মাল্টি-টাচ সমর্থন প্রয়োজন।
ছোট পর্দার ডিভাইসগুলিতে, আমাদের সামগ্রীকে যতটা সম্ভব স্ক্রীন রিয়েল এস্টেট দিতে হবে, তাই আমরা স্থান সর্বাধিক করার জন্য কয়েকটি পরিবর্তন করেছি, বেশিরভাগ ক্ষেত্রে কদাচিৎ ব্যবহৃত উপাদানগুলিকে দৃষ্টির বাইরে সরিয়ে দিয়ে:
- বিল্ড ইট নির্বাচনকারী বিল্ডিং করার সময় একটি রঙ নির্বাচককে ছোট করে।
- আমরা মাল্টি-টাচ অঙ্গভঙ্গি দিয়ে জুম এবং ওরিয়েন্টেশন নিয়ন্ত্রণ প্রতিস্থাপন করেছি।
- ক্রোম ফুলস্ক্রিন কার্যকারিতা কিছু অতিরিক্ত স্ক্রীন রিয়েল এস্টেট পেতেও সহায়ক।
ওয়েবজিএল কর্মক্ষমতা এবং সমর্থন
আধুনিক টাচ ডিভাইসগুলিতে বেশ শক্তিশালী GPU রয়েছে, কিন্তু তারা এখনও তাদের ডেস্কটপ সমকক্ষগুলি থেকে অনেক দূরে, তাই আমরা জানতাম যে আমাদের পারফরম্যান্সের সাথে কিছু চ্যালেঞ্জ হবে, বিশেষ করে এক্সপ্লোর 3D মোডে যেখানে আমাদের একই সময়ে অনেকগুলি সৃষ্টি করতে হবে৷
সৃজনশীলভাবে, আমরা জটিল আকার এবং এমনকি স্বচ্ছতার সাথে কয়েকটি নতুন ধরনের ইট যোগ করতে চেয়েছিলাম -- বৈশিষ্ট্য যা সাধারণত GPU-তে খুব ভারী হয়। যাইহোক, আমাদের পিছনের দিকে-সামঞ্জস্যপূর্ণ হতে হবে এবং প্রথম সংস্করণ থেকে ক্রিয়েশনকে সমর্থন করা চালিয়ে যেতে হবে, তাই আমরা কোনো নতুন বিধিনিষেধ সেট করতে পারিনি, যেমন সৃষ্টিতে মোট ইটের সংখ্যা উল্লেখযোগ্যভাবে হ্রাস করা।
বিল্ডের প্রথম সংস্করণে আমাদের ইটগুলির সর্বোচ্চ সীমা ছিল যা একটি সৃষ্টিতে ব্যবহার করা যেতে পারে। কতগুলি ইট বাকি ছিল তা নির্দেশ করে একটি "ইট-মিটার" ছিল। নতুন বাস্তবায়নে আমাদের কাছে কিছু নতুন ইট ছিল যা ইট-মিটারকে স্ট্যান্ডার্ড ইটের চেয়ে বেশি প্রভাবিত করে, এইভাবে মোট ইটের সংখ্যা কিছুটা কমিয়ে দেয়। এটি এখনও শালীন কর্মক্ষমতা বজায় রেখে নতুন ইট অন্তর্ভুক্ত করার একটি উপায় ছিল।
এক্সপ্লোর 3D মোডে একই সময়ে অনেক কিছু চলছে; বেস প্লেট টেক্সচার লোড করা, ক্রিয়েশন লোড করা, অ্যানিমেটিং এবং রেন্ডারিং ক্রিয়েশন ইত্যাদি। এর জন্য GPU এবং CPU উভয়ের থেকে অনেক কিছু প্রয়োজন, তাই আমরা এই অংশগুলিকে যতটা সম্ভব অপ্টিমাইজ করার জন্য Chrome DevTools-এ প্রচুর ফ্রেম প্রোফাইলিং করেছি। মোবাইল ডিভাইসে আমরা ক্রিয়েশনের একটু কাছাকাছি জুম করার সিদ্ধান্ত নিয়েছি যাতে আমাদের একই সময়ে অনেকগুলো ক্রিয়েশন রেন্ডার করতে না হয়।
কিছু ডিভাইস আমাদের কিছু WebGL শেডারগুলিকে আবার দেখতে এবং সরল করতে দিয়েছিল, কিন্তু আমরা সবসময় এটি সমাধান করার এবং এগিয়ে যাওয়ার একটি উপায় খুঁজে পেয়েছি৷
নন-ওয়েবজিএল ডিভাইসগুলিকে সমর্থন করে
ভিজিটরের ডিভাইস WebGL সমর্থন না করলেও আমরা সাইটটিকে কিছুটা ব্যবহারযোগ্য করতে চেয়েছিলাম। কখনও কখনও একটি ক্যানভাস সমাধান বা CSS3D বৈশিষ্ট্য ব্যবহার করে একটি সরলীকৃত উপায়ে 3D উপস্থাপন করার উপায় আছে। দুর্ভাগ্যবশত আমরা WebGL ব্যবহার না করে বিল্ড এবং এক্সপ্লোর 3D বৈশিষ্ট্যের প্রতিলিপি করার জন্য একটি ভাল যথেষ্ট সমাধান খুঁজে পাইনি।
সামঞ্জস্যের জন্য, সমস্ত প্ল্যাটফর্মে সৃষ্টির ভিজ্যুয়াল স্টাইল অবশ্যই একই হতে হবে। আমরা সম্ভাব্যভাবে একটি 2.5D সমাধানের জন্য চেষ্টা করতে পারতাম, কিন্তু এটি কিছু উপায়ে সৃষ্টিগুলিকে আলাদা দেখাবে। বিল্ড উইথ ক্রোমের প্রথম সংস্করণের সাথে তৈরি করা ক্রিয়েশনগুলি একই রকম দেখাবে এবং সাইটের নতুন সংস্করণে প্রথমটির মতোই মসৃণভাবে চালানো হবে তাও আমাদের বিবেচনা করতে হয়েছিল।
এক্সপ্লোর 2D মোড এখনও নন-ওয়েবজিএল ডিভাইসগুলিতে অ্যাক্সেসযোগ্য, যদিও আপনি নতুন সৃষ্টি তৈরি করতে বা 3D তে অন্বেষণ করতে পারবেন না। সুতরাং ব্যবহারকারীরা এখনও প্রকল্পের গভীরতা সম্পর্কে ধারণা পেতে পারেন এবং তারা যদি ওয়েবজিএল-সক্ষম ডিভাইসে থাকে তবে এই সরঞ্জামটি ব্যবহার করে তারা কী তৈরি করতে পারে। WebGL সমর্থন ছাড়া সাইটটি ব্যবহারকারীদের কাছে ততটা মূল্যবান নাও হতে পারে, কিন্তু এটি অন্তত একটি টিজার হিসেবে কাজ করে এবং তাদের এটি চেষ্টা করার জন্য জড়িত করা উচিত।
WebGL সমাধানের জন্য ফলব্যাক সংস্করণ রাখা কখনো কখনো সম্ভব হয় না। অনেক সম্ভাব্য কারণ আছে; কর্মক্ষমতা, চাক্ষুষ শৈলী, উন্নয়ন এবং রক্ষণাবেক্ষণ খরচ, এবং তাই। যাইহোক, যখন আপনি কোনো ফলব্যাক বাস্তবায়ন না করার সিদ্ধান্ত নেন, আপনার অন্ততপক্ষে নন-ওয়েবজিএল-সক্ষম দর্শকদের যত্ন নেওয়া উচিত, ব্যাখ্যা করা উচিত কেন তারা সম্পূর্ণভাবে সাইটটি অ্যাক্সেস করতে পারে না এবং কীভাবে তারা একটি ব্যবহার করে সমস্যার সমাধান করতে পারে তার নির্দেশনা দিতে হবে। WebGL সমর্থনকারী ব্রাউজার।
সম্পদ ব্যবস্থাপনা
2013 সালে, গুগল চালু হওয়ার পর থেকে সবচেয়ে উল্লেখযোগ্য UI পরিবর্তন সহ Google মানচিত্রের একটি নতুন সংস্করণ প্রবর্তন করে। তাই আমরা নতুন Google Maps UI-এর সাথে মানানসই করার জন্য বিল্ড উইথ ক্রোমকে পুনরায় ডিজাইন করার সিদ্ধান্ত নিয়েছি, এবং এটি করতে গিয়ে অন্যান্য বিষয়গুলিকে পুনরায় ডিজাইনে নিয়েছি। নতুন নকশা পরিষ্কার কঠিন রং এবং সাধারণ আকারের সাথে তুলনামূলকভাবে সমতল। এটি আমাদেরকে অনেক UI উপাদানে বিশুদ্ধ CSS ব্যবহার করতে সক্ষম করেছে, ছবির ব্যবহার কমিয়েছে।
এক্সপ্লোরে আমাদের প্রচুর ছবি লোড করতে হবে; সৃষ্টির জন্য থাম্বনেইল ছবি, বেসপ্লেটের জন্য মানচিত্রের টেক্সচার এবং অবশেষে প্রকৃত 3d সৃষ্টি। আমরা ক্রমাগত নতুন ছবি লোড করার সময় যাতে কোনও মেমরি লিকেজ না হয় তা নিশ্চিত করার জন্য আমরা অতিরিক্ত যত্ন নিই।
3D সৃষ্টিগুলি একটি PNG চিত্র হিসাবে প্যাকেজ করা একটি কাস্টম ফাইল বিন্যাসে সংরক্ষণ করা হয়। 3D ক্রিয়েশন ডেটাকে একটি ইমেজ হিসাবে সংরক্ষণ করা আমাদেরকে মূলত ডেটাকে সরাসরি শেডারগুলিতে প্রেরণ করতে সক্ষম করে যা সৃষ্টিগুলিকে রেন্ডার করে৷
সমস্ত ব্যবহারকারীর তৈরি চিত্রগুলির জন্য ডিজাইনটি আমাদের সমস্ত প্ল্যাটফর্মে একই চিত্রের আকার ব্যবহার করার অনুমতি দেয়, এইভাবে স্টোরেজ এবং ব্যান্ডউইথের ব্যবহার কমিয়ে দেয়।
স্ক্রিন ওরিয়েন্টেশন পরিচালনা
পোর্ট্রেট থেকে ল্যান্ডস্কেপ মোডে বা অন্য দিকে যাওয়ার সময় স্ক্রিনের আকৃতির অনুপাত কতটা পরিবর্তিত হয় তা ভুলে যাওয়া সহজ। মোবাইল ডিভাইসের জন্য মানিয়ে নেওয়ার সময় আপনাকে এটি শুরু থেকেই বিবেচনা করতে হবে।
স্ক্রোল সক্ষম করা একটি ঐতিহ্যবাহী ওয়েবসাইটে, আপনি একটি প্রতিক্রিয়াশীল সাইট পেতে CSS নিয়ম প্রয়োগ করতে পারেন যা বিষয়বস্তু এবং মেনুগুলি পুনরায় সাজায়। যতক্ষণ আপনি স্ক্রোল কার্যকারিতা ব্যবহার করতে পারেন এটি মোটামুটি পরিচালনাযোগ্য।
আমরা বিল্ডের সাথেও এই পদ্ধতিটি ব্যবহার করেছি, তবে আমরা কীভাবে লেআউটটি সমাধান করতে পারি তাতে আমরা কিছুটা সীমিত ছিলাম, কারণ আমাদের সর্বদা বিষয়বস্তু দৃশ্যমান থাকা দরকার এবং এখনও বেশ কয়েকটি নিয়ন্ত্রণ এবং বোতামগুলিতে দ্রুত অ্যাক্সেস থাকতে হবে। নিউজ সাইটের মতো খাঁটি বিষয়বস্তুর সাইটগুলির জন্য, একটি তরল লেআউট অনেক অর্থবহ, কিন্তু আমাদের মতো একটি গেম অ্যাপের জন্য এটি একটি সংগ্রাম ছিল৷ ল্যান্ডস্কেপ এবং পোর্ট্রেট অভিযোজন উভয় ক্ষেত্রেই কাজ করে এমন একটি লেআউট খুঁজে পাওয়া একটি চ্যালেঞ্জ হয়ে দাঁড়িয়েছে এবং এখনও বিষয়বস্তুর একটি ভাল ওভারভিউ এবং ইন্টারঅ্যাক্ট করার একটি আরামদায়ক উপায় রেখেছিল৷ শেষ পর্যন্ত আমরা বিল্ডকে শুধুমাত্র ল্যান্ডস্কেপে রাখার সিদ্ধান্ত নিয়েছি এবং আমরা ব্যবহারকারীকে তাদের ডিভাইস ঘোরাতে বলি।
অন্বেষণ উভয় ওরিয়েন্টেশনে সমাধান করা অনেক সহজ ছিল। একটি সামঞ্জস্যপূর্ণ অভিজ্ঞতা পেতে আমাদের কেবলমাত্র 3D এর জুম স্তর সামঞ্জস্য করতে হবে।
বেশিরভাগ বিষয়বস্তুর বিন্যাস CSS দ্বারা নিয়ন্ত্রিত হয়, তবে কিছু ওরিয়েন্টেশন-সম্পর্কিত জিনিস জাভাস্ক্রিপ্টে প্রয়োগ করা প্রয়োজন। আমরা দেখেছি যে ওরিয়েন্টেশন শনাক্ত করার জন্য window.orientation ব্যবহার করার জন্য কোন ভাল ক্রস-ডিভাইস সমাধান ছিল না, তাই শেষ পর্যন্ত আমরা ডিভাইসের ওরিয়েন্টেশন শনাক্ত করতে window.innerWidth এবং window.innerHeight তুলনা করছিলাম।
if( window.innerWidth > window.innerHeight ){
//landscape
} else {
//portrait
}
স্পর্শ সমর্থন যোগ করা হচ্ছে
ওয়েব সামগ্রীতে স্পর্শ সমর্থন যোগ করা যুক্তিসঙ্গতভাবে সোজা। বেসিক ইন্টারঅ্যাক্টিভিটি, যেমন ক্লিক ইভেন্ট, ডেস্কটপ এবং টাচ-সক্ষম ডিভাইসে একই কাজ করে, কিন্তু যখন আরও উন্নত ইন্টারঅ্যাকশনের কথা আসে তখন আপনাকে টাচ ইভেন্টগুলিও পরিচালনা করতে হবে: টাচস্টার্ট, টাচমুভ এবং টাচএন্ড। এই নিবন্ধটি এই ইভেন্টগুলি কীভাবে ব্যবহার করতে হয় তার মূল বিষয়গুলি কভার করে৷ ইন্টারনেট এক্সপ্লোরার টাচ ইভেন্টগুলিকে সমর্থন করে না, তবে পরিবর্তে পয়েন্টার ইভেন্ট ব্যবহার করে (পয়েন্টারডাউন, পয়েন্টারমুভ, পয়েন্টারআপ)। পয়েন্টার ইভেন্টগুলি স্ট্যান্ডার্ডাইজেশনের জন্য W3C-তে জমা দেওয়া হয়েছে কিন্তু আপাতত শুধুমাত্র ইন্টারনেট এক্সপ্লোরারে প্রয়োগ করা হয়েছে।
এক্সপ্লোর 3D মোডে আমরা স্ট্যান্ডার্ড Google মানচিত্র বাস্তবায়নের মতো একই নেভিগেশন চেয়েছিলাম; মানচিত্রের চারপাশে প্যান করতে একটি আঙুল এবং জুম করতে দুটি আঙুল চিমটি ব্যবহার করে৷ কারণ সৃষ্টিগুলি 3D-এ রয়েছে আমরা দুটি আঙুল ঘোরানোর অঙ্গভঙ্গিও যোগ করেছি। এটি সাধারণত এমন কিছু যা স্পর্শ-ইভেন্ট ব্যবহারের প্রয়োজন হবে।
একটি ভাল অনুশীলন হল ভারী কম্পিউটিং এড়ানো, যেমন ইভেন্ট হ্যান্ডলারগুলিতে 3D আপডেট করা বা রেন্ডার করা। পরিবর্তে, একটি ভেরিয়েবলে টাচ ইনপুট সংরক্ষণ করুন এবং অনুরোধ অ্যানিমেশনফ্রেম রেন্ডার লুপে ইনপুটে প্রতিক্রিয়া দিন। এটি একই সময়ে একটি মাউস বাস্তবায়ন করা সহজ করে তোলে, আপনি শুধু একই ভেরিয়েবলে সংশ্লিষ্ট মাউস মান সংরক্ষণ করেন।
ইনপুট সঞ্চয় করার জন্য একটি অবজেক্ট শুরু করে শুরু করুন এবং টাচস্টার্ট ইভেন্ট লিসেনার যোগ করুন। প্রতিটি ইভেন্ট হ্যান্ডলারে আমরা বলি event.preventDefault()। এটি ব্রাউজারটিকে টাচ ইভেন্ট প্রক্রিয়া করা থেকে বিরত রাখতে, যা কিছু অপ্রত্যাশিত আচরণের কারণ হতে পারে যেমন পুরো পৃষ্ঠাটি স্ক্রোল করা বা স্কেল করা।
var input = {dragStartX:0, dragStartY:0, dragX:0, dragY:0, dragDX:0, dragDY:0, dragging:false};
plateContainer.addEventListener('touchstart', onTouchStart);
function onTouchStart(event) {
event.preventDefault();
if( event.touches.length === 1){
handleDragStart(event.touches[0].clientX , event.touches[0].clientY);
//start listening to all needed touchevents to implement the dragging
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchend', onTouchEnd);
document.addEventListener('touchcancel', onTouchEnd);
}
}
function onTouchMove(event) {
event.preventDefault();
if( event.touches.length === 1){
handleDragging(event.touches[0].clientX, event.touches[0].clientY);
}
}
function onTouchEnd(event) {
event.preventDefault();
if( event.touches.length === 0){
handleDragStop();
//remove all eventlisteners but touchstart to minimize number of eventlisteners
document.removeEventListener('touchmove', onTouchMove);
document.removeEventListener('touchend', onTouchEnd);
//also listen to touchcancel event to avoid unexpected behavior when switching tabs and some other situations
document.removeEventListener('touchcancel', onTouchEnd);
}
}
আমরা ইভেন্ট হ্যান্ডলারে ইনপুটের প্রকৃত স্টোরেজ করছি না বরং আলাদা হ্যান্ডলারে করছি: হ্যান্ডেলড্র্যাগস্টার্ট, হ্যান্ডেলড্র্যাগিং এবং হ্যান্ডেলড্র্যাগস্টপ। এর কারণ হল আমরা মাউস ইভেন্ট হ্যান্ডলারদের থেকেও এগুলিকে কল করতে সক্ষম হতে চাই। মনে রাখবেন যে যদিও অসম্ভাব্য, ব্যবহারকারী একই সময়ে স্পর্শ এবং মাউস ব্যবহার করতে পারে। সেই কেসটি সরাসরি পরিচালনা করার পরিবর্তে, আমরা নিশ্চিত করি যে কিছুই বিস্ফোরিত না হয়।
function handleDragStart(x ,y ){
input.dragging = true;
input.dragStartX = input.dragX = x;
input.dragStartY = input.dragY = y;
}
function handleDragging(x ,y ){
if(input.dragging) {
input.dragDX = x - input.dragX;
input.dragDY = y - input.dragY;
input.dragX = x;
input.dragY = y;
}
}
function handleDragStop(){
if(input.dragging) {
input.dragging = false;
input.dragDX = 0;
input.dragDY = 0;
}
}
টাচমুভের উপর ভিত্তি করে অ্যানিমেশন করার সময় শেষ ইভেন্ট থেকে ডেল্টা মুভ সংরক্ষণ করা প্রায়শই দরকারী। উদাহরণস্বরূপ, আমরা এক্সপ্লোরে সমস্ত বেস প্লেট জুড়ে চলার সময় ক্যামেরার বেগের জন্য একটি প্যারামিটার হিসাবে এটি ব্যবহার করেছি, যেহেতু আপনি বেস প্লেটগুলি টেনে আনছেন না বরং আপনি আসলে ক্যামেরাটি সরান৷
function onAnimationFrame() {
requestAnimationFrame( onAnimationFrame );
//execute animation based on input.dragDX, input.dragDY, input.dragX or input.dragY
/*
/
*/
//because touchmove is only fired when finger is actually moving we need to reset the delta values each frame
input.dragDX=0;
input.dragDY=0;
}
এমবেডেড উদাহরণ: স্পর্শ ইভেন্ট ব্যবহার করে একটি বস্তু টেনে আনা। বিল্ড উইথ ক্রোমে এক্সপ্লোর 3D মানচিত্র টেনে আনার মতো অনুরূপ বাস্তবায়ন: http://cdpn.io/qDxvo
মাল্টি-টাচ অঙ্গভঙ্গি
অনেকগুলি ফ্রেমওয়ার্ক বা লাইব্রেরি আছে, যেমন Hammer বা QuoJS , যেগুলি মাল্টি-টাচ অঙ্গভঙ্গিগুলির পরিচালনাকে সহজ করার যত্ন নিতে পারে, কিন্তু আপনি যদি বেশ কয়েকটি অঙ্গভঙ্গি একত্রিত করতে এবং সম্পূর্ণ নিয়ন্ত্রণ পেতে চান, তবে কখনও কখনও এটি স্ক্র্যাচ থেকে করা ভাল।
চিমটি এবং ঘোরানোর অঙ্গভঙ্গি পরিচালনা করতে আমরা যখন দ্বিতীয় আঙুলটি স্ক্রিনে রাখা হয় তখন আমরা দুটি আঙ্গুলের মধ্যে দূরত্ব এবং কোণ সংরক্ষণ করি:
//variables representing the actual scale/rotation of the object we are affecting
var currentScale = 1;
var currentRotation = 0;
function onTouchStart(event) {
event.preventDefault();
if( event.touches.length === 1){
handleDragStart(event.touches[0].clientX , event.touches[0].clientY);
}else if( event.touches.length === 2 ){
handleGestureStart(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY );
}
}
function handleGestureStart(x1, y1, x2, y2){
input.isGesture = true;
//calculate distance and angle between fingers
var dx = x2 - x1;
var dy = y2 - y1;
input.touchStartDistance=Math.sqrt(dx*dx+dy*dy);
input.touchStartAngle=Math.atan2(dy,dx);
//we also store the current scale and rotation of the actual object we are affecting. This is needed to support incremental rotation/scaling. We can't assume that an object is always the same scale when gesture starts.
input.startScale=currentScale;
input.startAngle=currentRotation;
}
টাচমুভ ইভেন্টে, আমরা তারপরে সেই দুটি আঙ্গুলের মধ্যে দূরত্ব এবং কোণকে ক্রমাগত পরিমাপ করি। শুরুর দূরত্ব এবং বর্তমান দূরত্বের মধ্যে পার্থক্য তারপর স্কেল সেট করতে ব্যবহৃত হয়, এবং প্রারম্ভ কোণ এবং বর্তমান কোণের মধ্যে পার্থক্যটি কোণ সেট করতে ব্যবহৃত হয়।
function onTouchMove(event) {
event.preventDefault();
if( event.touches.length === 1){
handleDragging(event.touches[0].clientX, event.touches[0].clientY);
}else if( event.touches.length === 2 ){
handleGesture(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY );
}
}
function handleGesture(x1, y1, x2, y2){
if(input.isGesture){
//calculate distance and angle between fingers
var dx = x2 - x1;
var dy = y2 - y1;
var touchDistance = Math.sqrt(dx*dx+dy*dy);
var touchAngle = Math.atan2(dy,dx);
//calculate the difference between current touch values and the start values
var scalePixelChange = touchDistance - input.touchStartDistance;
var angleChange = touchAngle - input.touchStartAngle;
//calculate how much this should affect the actual object
currentScale = input.startScale + scalePixelChange*0.01;
currentRotation = input.startAngle+(angleChange*180/Math.PI);
//upper and lower limit of scaling
if(currentScale<0.5) currentScale = 0.5;
if(currentScale>3) currentScale = 3;
}
}
আপনি সম্ভাব্যভাবে প্রতিটি টাচমুভ ইভেন্টের মধ্যে দূরত্ব পরিবর্তনটিকে টেনে আনার উদাহরণের মতো একইভাবে ব্যবহার করতে পারেন, কিন্তু আপনি যখন একটি অবিচ্ছিন্ন আন্দোলন চান তখন সেই পদ্ধতিটি প্রায়শই বেশি কার্যকর হয়।
function onAnimationFrame() {
requestAnimationFrame( onAnimationFrame );
//execute transform based on currentScale and currentRotation
/*
/
*/
//because touchmove is only fired when finger is actually moving we need to reset the delta values each frame
input.dragDX=0;
input.dragDY=0;
}
আপনি যদি চান তবে চিমটি করার সময় এবং অঙ্গভঙ্গি ঘোরানোর সময় আপনি বস্তুটিকে টেনে আনা সক্ষম করতে পারেন। সেক্ষেত্রে আপনি ড্র্যাগিং হ্যান্ডলারের ইনপুট হিসাবে দুটি আঙ্গুলের মধ্যে কেন্দ্র বিন্দু ব্যবহার করবেন।
এমবেডেড উদাহরণ: 2D তে একটি বস্তু ঘোরানো এবং স্কেলিং। এক্সপ্লোরে মানচিত্রটি কীভাবে প্রয়োগ করা হয় তার অনুরূপ: http://cdpn.io/izloq
একই হার্ডওয়্যারে মাউস এবং টাচ সাপোর্ট
বর্তমানে বেশ কিছু ল্যাপটপ কম্পিউটার আছে, যেমন Chromebook পিক্সেল, যা মাউস এবং টাচ ইনপুট উভয়কেই সমর্থন করে। আপনি সতর্ক না হলে এটি কিছু অপ্রত্যাশিত আচরণের কারণ হতে পারে।
একটি গুরুত্বপূর্ণ বিষয় হল যে আপনি শুধুমাত্র স্পর্শ সমর্থন সনাক্ত করা এবং তারপর মাউস ইনপুট উপেক্ষা করা উচিত নয়, বরং একই সময়ে উভয় সমর্থন করা উচিত।
আপনি যদি আপনার টাচ ইভেন্ট হ্যান্ডলারগুলিতে event.preventDefault() ব্যবহার না করেন তবে বেশিরভাগ নন-টাচ অপ্টিমাইজ করা সাইটগুলি এখনও কাজ করে রাখার জন্য কিছু ইমুলেটেড মাউস ইভেন্টগুলি গুলি করা হবে। একটি উদাহরণ হিসাবে, স্ক্রিনে একক ট্যাপের জন্য এই ইভেন্টগুলি দ্রুত ক্রম এবং এই ক্রমে গুলি করা হতে পারে:
- স্পর্শ শুরু
- স্পর্শ মুভ
- স্পর্শ
- মাউসওভার
- মাউসমুভ
- মাউসডাউন
- মাউসআপ
- ক্লিক
আপনার যদি একটু বেশি জটিল মিথস্ক্রিয়া থাকে, এই মাউস ইভেন্টগুলি কিছু অপ্রত্যাশিত আচরণের কারণ হতে পারে এবং আপনার বাস্তবায়নকে বিভ্রান্ত করতে পারে। টাচ ইভেন্ট হ্যান্ডলারগুলিতে event.preventDefault() ব্যবহার করা এবং পৃথক ইভেন্ট হ্যান্ডলারে মাউস ইনপুট পরিচালনা করা প্রায়শই ভাল। আপনাকে সচেতন হতে হবে যে টাচ ইভেন্ট হ্যান্ডলারগুলিতে event.preventDefault() ব্যবহার করা কিছু ডিফল্ট আচরণকেও প্রতিরোধ করবে, যেমন স্ক্রলিং এবং ক্লিক ইভেন্ট।
"বিল্ড উইথ ক্রোম-এ আমরা জুমিং ঘটতে চাই না যখন কেউ সাইটটিতে ডবল-ট্যাপ করে, যদিও এটি বেশিরভাগ ব্রাউজারে স্ট্যান্ডার্ড। তাই আমরা ভিউপোর্ট মেটা ট্যাগ ব্যবহার করি ব্রাউজারকে বলার জন্য যে যখন কোনও ব্যবহারকারী ডাবল-ট্যাপ করে তখন জুম না করে। ট্যাপ। এটি 300ms ক্লিক বিলম্বকেও সরিয়ে দেয়, যা সাইটের প্রতিক্রিয়াশীলতাকে উন্নত করে। (ডাবল-ট্যাপ জুমিং সক্ষম হলে একটি একক ট্যাপ এবং ডাবল ট্যাপের মধ্যে পার্থক্য করতে ক্লিক বিলম্ব রয়েছে।)
<meta name="viewport" content="width=device-width,user-scalable=no">
মনে রাখবেন যে এই বৈশিষ্ট্যটি ব্যবহার করার সময় সমস্ত স্ক্রীন আকারে সাইটটিকে পাঠযোগ্য করে তোলা আপনার উপর নির্ভর করে, কারণ ব্যবহারকারী কাছাকাছি জুম করতে সক্ষম হবে না।
মাউস, টাচ এবং কীবোর্ড ইনপুট
এক্সপ্লোর 3D মোডে আমরা মানচিত্রটি নেভিগেট করার তিনটি উপায় চেয়েছিলাম: মাউস (টেনে আনা), স্পর্শ (টেনে আনা, জুম করতে চিমটি করা এবং ঘোরানো) এবং কীবোর্ড (তীর কী দিয়ে নেভিগেট করা)। এই সমস্ত নেভিগেশন পদ্ধতিগুলি কিছুটা আলাদাভাবে কাজ করে, কিন্তু আমরা তাদের সকলের ক্ষেত্রে একই পদ্ধতি ব্যবহার করেছি; ইভেন্ট হ্যান্ডলারে ভেরিয়েবল সেট করুন এবং অনুরোধ অ্যানিমেশনফ্রেম লুপে এটিতে কাজ করুন। অনুরোধ অ্যানিমেশনফ্রেম লুপটি নেভিগেট করতে কোন পদ্ধতি ব্যবহার করা হয় তা জানতে হবে না।
উদাহরণ হিসাবে, আমরা তিনটি ইনপুট পদ্ধতির সাথে মানচিত্রের গতিবিধি (dragDX এবং dragDY) সেট করতে পারি। এখানে কীবোর্ড বাস্তবায়ন রয়েছে:
document.addEventListener('keydown', onKeyDown );
document.addEventListener('keyup', onKeyUp );
function onKeyDown( event ) {
input.keyCodes[ "k" + event.keyCode ] = true;
input.shiftKey = event.shiftKey;
}
function onKeyUp( event ) {
input.keyCodes[ "k" + event.keyCode ] = false;
input.shiftKey = event.shiftKey;
}
//this needs to be called every frame before animation is executed
function handleKeyInput(){
if(input.keyCodes.k37){
input.dragDX = -5; //37 arrow left
} else if(input.keyCodes.k39){
input.dragDX = 5; //39 arrow right
}
if(input.keyCodes.k38){
input.dragDY = -5; //38 arrow up
} else if(input.keyCodes.k40){
input.dragDY = 5; //40 arrow down
}
}
function onAnimationFrame() {
requestAnimationFrame( onAnimationFrame );
//because keydown events are not fired every frame we need to process the keyboard state first
handleKeyInput();
//implement animations based on what is stored in input
/*
/
*/
//because touchmove is only fired when finger is actually moving we need to reset the delta values each frame
input.dragDX = 0;
input.dragDY = 0;
}
এমবেডেড উদাহরণ: নেভিগেট করতে মাউস, টাচ এবং কীবোর্ড ব্যবহার করে: http://cdpn.io/catlf
সারসংক্ষেপ
বিভিন্ন স্ক্রীন মাপের টাচ ডিভাইস সমর্থন করার জন্য Chrome-এর সাথে বিল্ড অ্যাডাপ্ট করা একটি শেখার অভিজ্ঞতা। স্পর্শ ডিভাইসগুলিতে এই স্তরের ইন্টারঅ্যাক্টিভিটি করার খুব বেশি অভিজ্ঞতা ছিল না এবং আমরা পথ ধরে অনেক কিছু শিখেছি।
সবচেয়ে বড় চ্যালেঞ্জ হল ব্যবহারকারীর অভিজ্ঞতা এবং ডিজাইন কিভাবে সমাধান করা যায়। প্রযুক্তিগত চ্যালেঞ্জগুলি ছিল অনেকগুলি স্ক্রীনের আকার, স্পর্শ ইভেন্ট এবং কর্মক্ষমতা সংক্রান্ত সমস্যাগুলি পরিচালনা করা।
যদিও স্পর্শ ডিভাইসগুলিতে WebGL শেডারগুলির সাথে কিছু চ্যালেঞ্জ ছিল, এটি এমন কিছু যা প্রত্যাশার চেয়ে প্রায় ভাল কাজ করেছে৷ ডিভাইসগুলি আরও বেশি শক্তিশালী হয়ে উঠছে এবং WebGL প্রয়োগগুলি দ্রুত উন্নতি করছে৷ আমরা মনে করি যে আমরা অদূর ভবিষ্যতে অনেক বেশি ডিভাইসে WebGL ব্যবহার করব।
এখন, যদি আপনি ইতিমধ্যেই না করে থাকেন, যান এবং দুর্দান্ত কিছু তৈরি করুন !