ভূমিকা
7 আগস্ট, 2010-এ, deviantART তার 10 তম জন্মদিন উদযাপন করেছে৷ আমরা deviantART muro নামে একটি HTML5 অঙ্কন টুল চালু করে আমাদের জন্মদিন উদযাপন করেছি। টুলটি একটি স্ট্যান্ড-অ্যালোন ওয়েব অ্যাপ্লিকেশনের পাশাপাশি ফোরাম মন্তব্যে ছবি যোগ করার জন্য একটি হালকা অঙ্কন টুল হিসাবে ব্যবহার করা যেতে পারে।
deviantART সম্প্রদায় এই নতুন অঙ্কন সরঞ্জামটিকে অত্যন্ত উত্সাহের সাথে স্বাগত জানিয়েছে, এবং সরঞ্জামটি নিজেই এখন কিছু শালীন-আকারের ওয়েব বৈশিষ্ট্যের মতো ট্র্যাফিক দেখতে পাচ্ছে৷ এটি চালু হওয়ার পর থেকে, প্রতি 5 সেকেন্ডে একবার deviantART মুরো ব্যবহার করে একটি নতুন অঙ্কন জমা দেওয়া হয়। এগুলি কেবল অঙ্কনগুলির সংখ্যা যা সম্পূর্ণ হয়েছে; আরো অনেক শুরু এবং সংরক্ষণ করা হয়নি.
নিম্নলিখিত নিবন্ধটি আমরা কীভাবে HTML5 ব্যবহার করছি, কেন আমরা যে প্রযুক্তিগুলি ব্যবহার করতে বেছে নিয়েছি এবং একটি প্রধান ওয়েবসাইটের জন্য প্রথম পূর্ণ-বিকশিত HTML5 অ্যাপ্লিকেশনগুলির মধ্যে একটি লেখার সময় যে জিনিসগুলি আবিষ্কার করেছি তার কিছু পটভূমি দেয়৷
আমার অতীত ইতিহাস
2005 সালের শেষের দিকে, আমি ড্র হিয়ার দ্বারা ব্যবহৃত অঙ্কন টুলের জন্য দায়ী ডেভেলপারদের একজন ছিলাম। টুলটি ছিল একটি বুকমার্কলেট দ্বারা চালু করা একটি 'ওয়েব গ্রাফিতি' টুল। এটি যেকোনো ওয়েবপেজে ছবি আঁকতে ব্যবহৃত হতো। এখানে আঁকুন প্রাথমিকভাবে এসভিজি ব্যবহার করে তৈরি করা হয়েছিল (ফায়ারফক্স 1.5 বিটা সবেমাত্র প্রকাশিত হয়েছে; এটি এসভিজি সমর্থনকারী প্রথম ব্রাউজারগুলির মধ্যে একটি ছিল)।
ইন্টারনেট এক্সপ্লোরারে, আমরা পটভূমিতে এসভিজি তৈরি করছিলাম, কিন্তু ভিএমএল ব্যবহার করে অঙ্কনটি রেন্ডার করছিলাম। WebKit সেই সময়ে SVG সমর্থন করে না, তাই আমি ক্যানভাস ব্যবহার করে SVG রেন্ডার করার জন্য আমাদের কোড পোর্ট করেছিলাম (যা সেই সময়ে শুধুমাত্র ওয়েবকিটে দেখা একটি নতুন প্রযুক্তি ছিল)। এক পর্যায়ে, আমি একটি পোর্টও তৈরি করেছিলাম যাতে আমাদের এসভিজি কোডটি পুরানো ব্রাউজারগুলিতে একত্রে আটকানো ডিভ উপাদানগুলির একটি গুচ্ছ ব্যবহার করে রেন্ডার করা যেতে পারে। (অবশ্যই, এটি করা যেতে পারে তা দেখানোর জন্য এটি একটি রসিকতা ছিল এবং এটি ব্যবহারে বেদনাদায়কভাবে ধীর ছিল)।
উত্থানকালে, এখানে আঁকুন প্রতিদিন প্রায় 100টি অঙ্কন করতে ব্যবহৃত হয়েছিল। এটিকে শুধুমাত্র একটি পরীক্ষার চেয়ে বেশি বলা যেতে পারে, যদিও এটিতে একটি প্রধান ওয়েব অ্যাপ্লিকেশনের চূড়ান্ত পোলিশ ছিল না। 2006-এর মাঝামাঝি সময়ে, প্রকল্পটি পরিত্যক্ত করা হয়েছিল, যদিও সাইটটি আজও ঠেকে আছে - বেশিরভাগই শুধু হাসির জন্য।
deviantART muro দ্বারা ব্যবহৃত প্রযুক্তি
আমার পটভূমিতে বিভিন্ন HTML5 প্রযুক্তি ব্যবহার করার কারণে, আমাকে deviantART muro-এর প্রধান বিকাশকারী হতে বলা হয়েছিল। যে কেউ এই নিবন্ধটি পড়ছেন তারা সম্ভবত বুঝতে পারবেন কেন আমরা সিলভারলাইট বা ফ্ল্যাশের মতো প্লাগ-ইন ভিত্তিক প্রযুক্তির পরিবর্তে HTML5 ব্যবহার করার সিদ্ধান্ত নিয়েছি। আমরা এমন কিছু চেয়েছিলাম যা শক্তিশালী এবং এমন কিছু যা উন্মুক্ত মান ব্যবহার করে।
ক্যানভাস এবং SVG এর মধ্যে সিদ্ধান্ত নেওয়া
আমরা ক্যানভাস ব্যবহার করে অঙ্কন স্তর করার সিদ্ধান্ত নিয়েছে। কিছু লোক ভাবতে পারে যে তাদের কখন ক্যানভাস ব্যবহার করা উচিত এবং কখন তাদের SVG ব্যবহার করা উচিত। দুটি প্রযুক্তির সাথে কী করা যেতে পারে তার মধ্যে অনেকগুলি ওভারল্যাপ রয়েছে - এখানে ড্র করে প্রমাণিত হয়েছে, দুটি প্রযুক্তিই একটি অঙ্কন অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা যেতে পারে।
আমি দেখেছি যে SVG দুর্দান্ত যদি আপনি আপনার আঁকা বস্তুর হ্যান্ডলগুলি রাখতে চান। উদাহরণস্বরূপ, যদি আপনি চান যে ব্যবহারকারী একটি লাইন আঁকতে সক্ষম হন এবং তারপরে তার আকৃতি পরিবর্তন করতে লাইনের বিটগুলি টেনে আনতে সক্ষম হন, তবে এটি SVG ব্যবহার করে মোটামুটি তুচ্ছ হবে। কিন্তু একই জিনিস খুব বিশ্রী ক্যানভাস ব্যবহার করে.
আপনি যখন ক্যানভাস ব্যবহার করেন, তখন আপনি ক্যানভাসে জিনিসপত্র ফায়ার করেন এবং তারপরে আপনি এটি ভুলে যান। একটি ফাঁকা ক্যানভাস এবং একটি যা এক ঘন্টার জন্য আঁকা হয়েছিল কোডে ঠিক একই রকম কাজ করে এবং তাদের প্রায় একই মেমরির পদচিহ্ন রয়েছে। যদিও একটি রাস্টার অঙ্কন প্রোগ্রাম সাধারণত আগুনের সাথে সত্যিই ভাল কাজ করে এবং প্রযুক্তি ভুলে যায়, এটি কিছু জিনিসকে কঠিন করে তোলে। উদাহরণস্বরূপ, SVG-এর তুলনায় ক্যানভাসে একটি দ্রুত পূর্বাবস্থার ফাংশন তৈরি করা অনেক কঠিন। SVG-তে, আপনি যে শেষ কয়েকটি লাইন রেখেছেন তার জন্য আপনি কেবল একটি হ্যান্ডেল রাখতে পারেন এবং পূর্বাবস্থায় ফিরিয়ে আনা কেবলমাত্র সেই বস্তুগুলিকে সরিয়ে ফেলার বিষয়। ক্যানভাসের সাহায্যে, একবার একটি রেখা আঁকা হয়ে গেলে, আপনি জানেন না এর নীচে কী ছিল, তাই লাইনটি সরানোর জন্য এটি যে জায়গাটিতে ছিল সেটিকে পুনরায় অঙ্কন করতে হবে৷
একবার আমরা বুলেটটি বিট করে সিদ্ধান্ত নিলাম যে এটি ক্যানভাসের জন্য HTML5 ব্যবহার করবে, আমরা এখানে এবং সেখানে অন্যান্য HTML5 গুডির সামান্য বিট ব্যবহার করার সিদ্ধান্ত নিয়েছি। ব্যবহারকারীর ব্রাশ সেটিংস ট্র্যাক রাখতে আমরা স্থানীয় স্টোরেজ কীভাবে ব্যবহার করেছি তার একটি উদাহরণ। এইভাবে, একবার তাদের বিভিন্ন ব্রাশগুলি তাদের পছন্দ মতো সেট আপ করার পরে, তারা পরের বার আমাদের টুল ব্যবহার করার সময় সেই সেটিংসে ফিরে আসতে পারে। localStorage এর অর্থ হল এই পছন্দগুলি পেতে আমাদের কুকি ব্যবহার করতে হবে না বা কোনো সার্ভার ট্রিপ করতে হবে না।
ক্যানভাস ব্যবহার করে
গত পাঁচ বছরে ক্যানভাস অনেক দূর এগিয়েছে। এখানে আঁকার সাথে, আমরা আসলে আমার ক্যানভাস পোর্ট প্রকাশ করিনি, কারণ পারফরম্যান্সটি ভাল ছিল না। এখন, আমি মনে করি, এটা বলা নিরাপদ যে এটি সম্ভবত আপনার কল্পনার চেয়ে ভাল পারফর্ম করে। ক্যানভাসের একটি বড় অংশ পরিষ্কার করা এবং জটিল আকারগুলি পুনরায় অঙ্কন করা সাধারণত মানুষের উপলব্ধির চেয়ে দ্রুত গতিতে ঘটতে পারে। একমাত্র জিনিস যা আমি মাঝে মাঝে খুব ধীর বলে মনে করি তা হল নমুনা পিক্সেলের জন্য getImageData() ব্যবহার করা। অপারেশনের গতি স্পষ্টতই ক্যানভাসের আকারের উপর নির্ভর করে, কিন্তু, একটি বড় ক্যানভাসে, ভুল সময়ে একটি getImageData() করা ব্যবহারকারীর মনে হতে পারে যে অ্যাপ্লিকেশনটি সাড়া দিতে ধীর গতির।
বিভিন্ন ক্যানভাস টিউটোরিয়াল পড়ার পরে, আমি মূলত মনে করেছিলাম যে এটি একটি হেভিওয়েট জিনিস যা অল্প ব্যবহার করা উচিত, সম্ভবত একটি পৃষ্ঠায় একবার বা দুবার। আমি জানি না সবাই এই বোধটা পায় কিনা, কিন্তু আমি করেছি, তাই যখন আমরা প্রথম deviantART muro কোডিং শুরু করি তখন আমি খুব কম ব্যবহার করছিলাম। যদিও কিছুক্ষণ পরে, আমি দেখেছি যে এমন অনেক ছোট জায়গা রয়েছে যেখানে একটি ক্যানভাস আপনাকে অনেক প্রচেষ্টা বাঁচাতে পারে। উদাহরণস্বরূপ, আমাদের অ্যাপের জন্য মক-আপগুলি নির্দিষ্ট করেছে যে একটি রঙ চয়নকারী থাকা উচিত যা দুটি ওভারল্যাপিং ত্রিভুজ প্রাথমিক এবং মাধ্যমিক রঙগুলি দেখায়:
আমার প্রথম প্রবৃত্তি ছিল ঐতিহ্যবাহী এইচটিএমএল এবং সিএসএস দিয়ে এই ছোট্ট UI গিজমো তৈরি করার উপায় সম্পর্কে চিন্তা করা। যারা সিএসএস হ্যাকিংয়ে দুর্দান্ত তারা নির্দেশ করতে পারে যে কীভাবে এটি সিএসএস-এর মাধ্যমে করা যেতে পারে, তবে দুটি অংশের ত্রিভুজ আকার যা রঙ পরিবর্তন করে তা এতটা স্পষ্ট নয়।
যখন আমার কাছে কেবল একটি ক্যানভাস ব্যবহার করার কথা মনে হয়েছিল, তখন আমি একটি একক DOM উপাদান এবং জাভাস্ক্রিপ্টের কয়েকটি লাইন দিয়ে উইজেট তৈরি করেছি। deviantART মুরো সমস্ত জায়গায় ক্যানভাস নোড ব্যবহার করে। প্রতিটি স্তর একটি ক্যানভাস, এবং স্তরের ক্রম পরিবর্তন করা শুধুমাত্র z-সূচী পরিবর্তন করার বিষয়। জুম 'নেভিগেটর' প্যালেট যেটি অঙ্কন এলাকার একটি হ্রাসকৃত দৃশ্য দেখায় তা হল আরেকটি ক্যানভাস যা মাঝে মাঝে উৎস চিত্র হিসাবে স্তরের ক্যানভাস ব্যবহার করে drawImage() কল করে। এমনকি অঙ্কন এলাকা কার্সার (একটি দুই-টোনযুক্ত বৃত্ত যা ব্রাশের আকার এবং জুমের উপর নির্ভর করে আকার সামঞ্জস্য করে) একটি ক্যানভাস যা মাউসের নীচে ভাসছে।
অন্যান্য HTML5 প্রযুক্তির তুলনায় ক্যানভাস নিয়ে আমরা বেশি উদার হওয়ার কারণ হল যে Google এর এক্সপ্লোরার ক্যানভাস লাইব্রেরি ইন্টারনেট এক্সপ্লোরারে ক্যানভাস অনুকরণ করা সম্ভব করে তোলে। যে আমাকে আমার পরবর্তী বিভাগে বাড়ে.
ইন্টারনেট এক্সপ্লোরার (IE)
আরও বড় ওয়েবসাইটগুলি এখনও HTML5 ব্যবহার করছে না তার প্রধান কারণ হল তারা তাদের ইন্টারনেট এক্সপ্লোরার ব্যবহারকারীদের হারাতে চায় না। আমি নিশ্চিত যে বেশিরভাগ ডেভেলপারের মনের প্রথম প্রশ্নটি যখন তারা শুনে যে deviantART একটি HTML5 অঙ্কন অ্যাপ্লিকেশন তৈরি করেছে তা হল, 'IE সম্পর্কে কী করা হয়েছিল?'
আমরা শুরুতেই সিদ্ধান্ত নিয়েছিলাম যে ইন্টারনেট এক্সপ্লোরারে জিনিসগুলিকে কার্যকর করার ক্ষেত্রে আমরা সর্বোত্তম প্রচেষ্টা করব, কিন্তু আমরা ওয়েব ডেভেলপমেন্টের সর্বনিম্ন সাধারণ ডিনোমিনেটর শৈলীর মাধ্যমে করেছি। যেহেতু ওয়েব সম্প্রদায় এমন পদ্ধতি গ্রহণ করেছে যে একটি সাইট যতক্ষণ না প্রতিটি পরিচিত ব্রাউজারে একই দেখায় ততক্ষণ পর্যন্ত এটি চালু করতে পারে না, ব্যবহারকারীরা বলতে পারে না যে তাদের ব্রাউজারে কখন অভাব রয়েছে৷ গড় ব্যবহারকারীর কাছে, গতির সমস্যাগুলি তাদের ইন্টারনেট সংযোগের জন্য দায়ী করা হয় এবং প্রতিটি পৃষ্ঠা কমবেশি একইভাবে রেন্ডার করে। তাই তারা তাদের ব্যাক বোতামের রঙের মতো স্বেচ্ছাচারী সামান্য ব্যবহারকারী ইন্টারফেসের উপর ভিত্তি করে তাদের প্রিয় ব্রাউজার সম্পর্কে সিদ্ধান্ত নেয়।
আমরা সিদ্ধান্ত নিয়েছি যে আমরা HTML5 স্পেক ব্যবহার করে মনের মধ্যে যে কোনও দুর্দান্ত বৈশিষ্ট্য তৈরি করব, এটি ইন্টারনেট এক্সপ্লোরারে কাজ করার চেষ্টা করব এবং যদি এটি কাজ করতে না পারে তবে আমরা কেবল একটি মডেল পপ আপ করব যা ব্যাখ্যা করে যে বৈশিষ্ট্যটি উপলব্ধ ছিল না কারণ তাদের ব্রাউজার এখনও একটি ওয়েব মান প্রয়োগ করেনি।
আমরা প্রথমে Google এর এক্সপ্লোরার ক্যানভাস (এক্সক্যানভাস) এর সাথে জিনিসগুলি কাজ করার চেষ্টা করেছি। এটি বেশিরভাগ জিনিসের জন্য ক্যানভাসের অনুকরণে আশ্চর্যজনকভাবে ভাল। যদিও এটার একটা খারাপ দিক আছে। ক্যানভাসে তৈরি প্রতিটি স্ট্রোক অন্তর্নিহিত VML অনুবাদে একটি DOM অবজেক্ট। বেশিরভাগ জিনিসের জন্য যা আপনি ক্যানভাস দিয়ে চেষ্টা করতে পারেন, এটি ঠিক আছে, তবে কিছু deviantART মুরোর ব্রাশগুলি প্রচুর স্ট্রোক একসাথে রেখে আকার তৈরি করে। যখন ইন্টারনেট এক্সপ্লোরার VML-এর মুখোমুখি হয় যার মধ্যে হাজার হাজার নোড থাকে - এমনকি একটি দ্রুত মেশিনেও - এটি পড়ে যায় এবং মারা যায়। এই কারণে, প্রচুর অঙ্কন কলের জন্য, আমাদের প্রকৃত VML-এ প্রবেশ করতে হয়েছিল এবং কোড করতে হয়েছিল, এবং কৌশলগুলি ব্যবহার করতে হয়েছিল যেখানে আমরা নোডগুলিকে একত্রিত করেছি এবং কোথায় ফাঁক থাকা উচিত তা নির্দিষ্ট করতে মুভ কমান্ড ব্যবহার করতে হয়েছিল। ইন্টারফেসের অনেক ছোট কন্ট্রোল এবং হোয়াটনোট একটি ক্যানভাস ট্যাগ ব্যবহার করে, কারণ এই ছোট ছোট ব্যবহারগুলি সাধারণত এক্সক্যানভাসের সাথে ভাল কাজ করে।
এক্সক্যানভাসের সাথে কিছু জিনিস কাজ করার পাশাপাশি, আমরা ব্যবহারকারীদের পরামর্শ দিয়েছি যে তারা ইন্টারনেট এক্সপ্লোরারের সংস্করণ ব্যবহার করা চালিয়ে যেতে পারে যদি তারা Google Chrome ফ্রেম প্লাগ-ইন ইনস্টল করে। গুগল ক্রোম ফ্রেম হল একটি প্লাগ-ইন যা ইন্টারনেট এক্সপ্লোরারে গুগল ক্রোমের রেন্ডারিং ইঞ্জিনকে এম্বেড করে। ব্যবহারকারীর দৃষ্টিকোণ থেকে, তারা এখনও সেই ব্রাউজারটি ব্যবহার করছে যার সাথে তারা পরিচিত; কিন্তু, কভারের নীচে, আমাদের পৃষ্ঠাটি Chrome এর HTML5 ক্ষমতা এবং দ্রুত জাভাস্ক্রিপ্টের সাথে রেন্ডার করা হয়।
আমি জানতাম যে Chrome ফ্রেমের সাথে কাজ করার জন্য জিনিসগুলিকে পোর্ট করা সহজ হওয়ার কথা ছিল, কিন্তু আমি বুঝতে পারিনি যে কতটা সহজ। আপনি শুধু একটি অতিরিক্ত মেটা ট্যাগ লাগান এবং… এবং এটিই, জিনিসগুলি IE-তে কাজ করা শুরু করে।
সারসংক্ষেপ
HTML5 স্পেসিফিকেশনে নতুন প্রযুক্তির সাথে কাজ করা খুবই আনন্দের, এবং আমি বলব যে আমি যা ব্যবহার করেছি তা অবশ্যই প্রাইম টাইমের জন্য প্রস্তুত। এমনকি যদি আপনার IE-তে নিশ্ছিদ্রভাবে কাজ করার জন্য জিনিসের প্রয়োজন হয়, তবে ক্যানভাস এবং এক্সক্যানভাসের সমন্বয়ে আপনি করতে পারেন এমন একটি আশ্চর্যজনক পরিমাণ জিনিস রয়েছে। এবং SVG এবং VML এর মধ্যে একটি অনুবাদ স্তর লেখা আশ্চর্যজনকভাবে সম্ভব। একবার আপনি প্রযুক্তি ব্যবহার করা শুরু করলে, এটি সম্পূর্ণ নতুন জগতে পা রাখার মতো।
তথ্যসূত্র
- deviantART muro
- deviantART এর ফোরাম যেখানে আপনি আঁকতে পারেন (লগইন প্রয়োজন)
- এক্সপ্লোরার ক্যানভাস
- গুগল ক্রোম ফ্রেম