ক্রস-ডিভাইস ওয়েবঅ্যাপ তৈরি করার জন্য একটি অ-প্রতিক্রিয়াশীল পদ্ধতি

Boris Smus

মিডিয়া প্রশ্নগুলি দুর্দান্ত, তবে…

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

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

• সমস্ত ডিভাইস একই জাভাস্ক্রিপ্ট, CSS, এবং সম্পদ (ছবি, ভিডিও) পায়, যার ফলে প্রয়োজনীয় লোড সময়ের চেয়ে বেশি হয়।
• সমস্ত ডিভাইস একই প্রারম্ভিক DOM পায়, সম্ভাব্যভাবে বিকাশকারীদের অত্যধিক জটিল CSS লিখতে বাধ্য করে।
• প্রতিটি ডিভাইসের জন্য তৈরি কাস্টম ইন্টারঅ্যাকশন নির্দিষ্ট করার জন্য সামান্য নমনীয়তা।

Webapps মিডিয়া প্রশ্নের চেয়ে বেশি প্রয়োজন

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

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

আপনি কোন ডিভাইস ক্লাস টার্গেট করছেন?

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

একটি ভাল ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে, আপনাকে জানতে হবে আপনার ব্যবহারকারী কারা এবং তারা কোন ডিভাইস ব্যবহার করছে। আপনি যদি একটি ডেস্কটপ ব্যবহারকারীর জন্য একটি মাউস এবং একটি কীবোর্ড দিয়ে একটি ব্যবহারকারী ইন্টারফেস তৈরি করেন এবং এটি একটি স্মার্টফোন ব্যবহারকারীকে দেন, তাহলে আপনার ইন্টারফেসটি হতাশার কারণ হবে কারণ এটি অন্য একটি স্ক্রীনের আকার এবং অন্য একটি ইনপুট পদ্ধতির জন্য ডিজাইন করা হয়েছে৷

পদ্ধতির বর্ণালীর দুটি চরম প্রান্ত রয়েছে:

1. একটি সংস্করণ তৈরি করুন যা সমস্ত ডিভাইসে কাজ করে। UX এর ফলে ক্ষতিগ্রস্থ হবে, যেহেতু বিভিন্ন ডিভাইসের বিভিন্ন ডিজাইনের বিবেচনা রয়েছে।

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

এখানে একটি মৌলিক ট্রেডঅফ রয়েছে: আপনার যত বেশি ডিভাইসের বিভাগ থাকবে, আপনি তত ভালো একটি ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারবেন, কিন্তু ডিজাইন, বাস্তবায়ন এবং রক্ষণাবেক্ষণ করতে তত বেশি কাজ করতে হবে।

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

একটি সম্ভাব্য সমাধান

এখানে একটি সমঝোতা: ডিভাইসগুলিকে বিভাগগুলিতে শ্রেণীবদ্ধ করুন এবং প্রতিটি বিভাগের জন্য সম্ভাব্য সর্বোত্তম অভিজ্ঞতা ডিজাইন করুন৷ আপনি কোন বিভাগগুলি বেছে নেবেন তা নির্ভর করে আপনার পণ্য এবং লক্ষ্য ব্যবহারকারীর উপর। এখানে একটি নমুনা শ্রেণীবিভাগ রয়েছে যা বর্তমানে বিদ্যমান জনপ্রিয় ওয়েব-সক্ষম ডিভাইসগুলিকে সুন্দরভাবে বিস্তৃত করে৷

1. ছোট পর্দা + স্পর্শ (বেশিরভাগ ফোন)
2. বড় পর্দা + স্পর্শ (বেশিরভাগ ট্যাবলেট)
3. বড় পর্দা + কীবোর্ড/মাউস (বেশিরভাগ ডেস্কটপ/ল্যাপটপ)

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

ফর্ম ফ্যাক্টর-নির্দিষ্ট ওয়েব অ্যাপের উদাহরণ

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

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

পদ্ধতি #1: সার্ভার-সাইড সনাক্তকরণ

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

দুর্ভাগ্যবশত এই প্রতিটি তাদের নিজস্ব চ্যালেঞ্জ উপস্থাপন. WURFL অনেক বড়, এতে 20MB XML রয়েছে, সম্ভাব্যভাবে প্রতিটি অনুরোধের জন্য উল্লেখযোগ্য সার্ভার-সাইড ওভারহেড খরচ হয়। কর্মক্ষমতা কারণে XML বিভক্ত যে প্রকল্প আছে. DeviceAtlas ওপেন সোর্স নয়, এবং ব্যবহার করার জন্য একটি প্রদত্ত লাইসেন্স প্রয়োজন৷

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

পদ্ধতি #2: ক্লায়েন্ট-সাইড সনাক্তকরণ

বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে আমরা ব্যবহারকারীর ব্রাউজার এবং ডিভাইস সম্পর্কে অনেক কিছু জানতে পারি। ডিভাইসটিতে স্পর্শ করার ক্ষমতা আছে কিনা এবং এটি একটি বড় বা ছোট স্ক্রীন কিনা তা আমাদের নির্ধারণ করতে হবে।

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

সিএসএস-এ পিক্সেলের উপর একটি দ্রুত দিক: মোবাইল ওয়েবে সিএসএস পিক্সেল স্ক্রিন পিক্সেলের মতো নয় । iOS রেটিনা ডিভাইসগুলি পিক্সেলের ঘনত্ব দ্বিগুণ করার অভ্যাস চালু করেছে (যেমন আইফোন 3GS বনাম 4, iPad 2 বনাম 3)। রেটিনা মোবাইল Safari UA এখনও ওয়েব ভাঙা এড়াতে একই ডিভাইস-প্রস্থ রিপোর্ট করে। যেহেতু অন্যান্য ডিভাইস (যেমন। অ্যান্ড্রয়েড) উচ্চতর রেজোলিউশন ডিসপ্লে পায়, তারা একই ডিভাইস-প্রস্থের কৌশল করছে।

তবে, এই সিদ্ধান্তকে জটিল করে তোলার জন্য পোর্ট্রেট এবং ল্যান্ডস্কেপ মোড উভয়ই বিবেচনা করা গুরুত্বপূর্ণ। আমরা পৃষ্ঠাটি পুনরায় লোড করতে চাই না বা অতিরিক্ত স্ক্রিপ্টগুলি লোড করতে চাই না প্রতিবার আমরা ডিভাইসটিকে পুনঃনির্দেশিত করি, যদিও আমরা পৃষ্ঠাটিকে ভিন্নভাবে রেন্ডার করতে চাই।

নিম্নলিখিত চিত্রে, প্রতিকৃতি এবং ল্যান্ডস্কেপ আউটলাইন (এবং বর্গাকারটি সম্পূর্ণ করার) ওভারলে করার ফলে স্কোয়ারগুলি প্রতিটি ডিভাইসের সর্বাধিক মাত্রা উপস্থাপন করে:

থ্রেশহোল্ডকে 650px এ সেট করে, আমরা iPhone, Galaxy Nexus কে ছোট টাচ হিসেবে এবং iPad, Galaxy Tab কে "ট্যাবলেট" হিসেবে শ্রেণীবদ্ধ করি। এন্ড্রোজিনাস গ্যালাক্সি নোট এই ক্ষেত্রে "ফোন" হিসাবে শ্রেণীবদ্ধ করা হয়েছে এবং ফোন লেআউট পাবে।

এবং তাই, একটি যুক্তিসঙ্গত কৌশল এই মত দেখতে পারে:

if (hasTouch) {
  if (isSmall) {
    device = PHONE;
  } else {
    device = TABLET;
  }
} else {
  device = DESKTOP;
}

কর্মে বৈশিষ্ট্য সনাক্তকরণ পদ্ধতির একটি ন্যূনতম নমুনা দেখুন।

এখানে বিকল্প পদ্ধতি হল ডিভাইসের ধরন সনাক্ত করতে UA স্নিফিং ব্যবহার করা। মূলত আপনি হিউরিস্টিকসের একটি সেট তৈরি করেন এবং সেগুলিকে আপনার ব্যবহারকারীর navigator.userAgent এর সাথে মেলে। ছদ্ম কোড এই মত কিছু দেখায়:

var ua = navigator.userAgent;
for (var re in RULES) {
  if (ua.match(re)) {
    device = RULES[re];
    return;
  }
}

কর্মে UA- সনাক্তকরণ পদ্ধতির একটি নমুনা দেখুন।

ক্লায়েন্ট-সাইড লোডিংয়ের উপর একটি নোট

আপনি যদি আপনার সার্ভারে UA সনাক্তকরণ করছেন, আপনি যখন একটি নতুন অনুরোধ পাবেন তখন আপনি কোন CSS, JavaScript এবং DOM পরিবেশন করবেন তা নির্ধারণ করতে পারেন। যাইহোক, আপনি যদি ক্লায়েন্ট-সাইড সনাক্তকরণ করছেন, পরিস্থিতি আরও জটিল। আপনার কাছে বেশ কয়েকটি বিকল্প রয়েছে:

1. একটি ডিভাইস-টাইপ-নির্দিষ্ট URL-এ রিডাইরেক্ট করুন যাতে এই ডিভাইসের প্রকারের সংস্করণ রয়েছে।
2. গতিশীলভাবে ডিভাইস প্রকার-নির্দিষ্ট সম্পদ লোড করুন।

প্রথম পদ্ধতিটি সহজবোধ্য, একটি পুনঃনির্দেশ প্রয়োজন যেমন window.location.href = '/tablet' । যাইহোক, অবস্থানটিতে এখন এই ডিভাইসের প্রকারের তথ্য যুক্ত থাকবে, তাই আপনি আপনার URL পরিষ্কার করতে ইতিহাস API ব্যবহার করতে চাইতে পারেন। দুর্ভাগ্যবশত এই পদ্ধতিতে একটি পুনঃনির্দেশ জড়িত, যা ধীর হতে পারে, বিশেষ করে মোবাইল ডিভাইসে।

দ্বিতীয় পদ্ধতিটি বাস্তবায়নের জন্য বেশ কিছুটা জটিল। গতিশীলভাবে CSS এবং JS লোড করার জন্য আপনার একটি ব্যবস্থার প্রয়োজন এবং (ব্রাউজার-নির্ভর), আপনি কাস্টমাইজ করার মতো জিনিসগুলি করতে সক্ষম নাও হতে পারেন <meta viewport> এছাড়াও, যেহেতু কোনও পুনঃনির্দেশ নেই, তাই আপনি মূল HTML এর সাথে আটকে আছেন যা পরিবেশন করা হয়েছিল৷ অবশ্যই, আপনি এটি জাভাস্ক্রিপ্টের সাথে ব্যবহার করতে পারেন, তবে এটি আপনার অ্যাপ্লিকেশনের উপর নির্ভর করে ধীর এবং/অথবা অমার্জিত হতে পারে।

ক্লায়েন্ট বা সার্ভারের সিদ্ধান্ত নেওয়া

এই পদ্ধতির মধ্যে ট্রেডঅফ হল:

প্রো ক্লায়েন্ট :

• UA এর পরিবর্তে পর্দার আকার/ক্ষমতার উপর ভিত্তি করে আরও ভবিষ্যতের প্রমাণ।
• ক্রমাগত UA তালিকা আপডেট করার প্রয়োজন নেই।

প্রো সার্ভার :

• কোন ডিভাইসে কোন সংস্করণ পরিবেশন করা হবে তার সম্পূর্ণ নিয়ন্ত্রণ।
• উন্নত কর্মক্ষমতা: ক্লায়েন্ট পুনঃনির্দেশ বা গতিশীল লোডিং এর কোন প্রয়োজন নেই।

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

ডিভাইস.js উপস্থাপন করা হচ্ছে

Device.js বিশেষ সার্ভার-সাইড কনফিগারেশনের প্রয়োজন ছাড়াই শব্দার্থিক, মিডিয়া ক্যোয়ারী-ভিত্তিক ডিভাইস সনাক্তকরণের জন্য একটি সূচনা বিন্দু, ব্যবহারকারী এজেন্ট স্ট্রিং পার্সিং করার জন্য প্রয়োজনীয় সময় এবং প্রচেষ্টা সংরক্ষণ করে।

ধারণাটি হল যে আপনি আপনার সাইটের কোন সংস্করণগুলি প্রদান করতে চান তা নির্দেশ করে আপনার <head> এর শীর্ষে আপনি সার্চ-ইঞ্জিন-বান্ধব মার্কআপ ( link rel=alternate ) প্রদান করেন।

<link rel="alternate" href="http://foo.com" id="desktop"
    media="only screen and (touch-enabled: 0)">

এর পরে, আপনি হয় সার্ভার-সাইড UA সনাক্তকরণ এবং সংস্করণ পুনঃনির্দেশ পরিচালনা করতে পারেন, অথবা বৈশিষ্ট্য-ভিত্তিক ক্লায়েন্ট-সাইড পুনঃনির্দেশ করতে device.js স্ক্রিপ্ট ব্যবহার করতে পারেন।

আরও তথ্যের জন্য, device.js প্রকল্প পৃষ্ঠা দেখুন, এবং একটি জাল অ্যাপ্লিকেশন যা ক্লায়েন্ট-সাইড পুনঃনির্দেশের জন্য device.js ব্যবহার করে।

সুপারিশ: ফর্ম-ফ্যাক্টর নির্দিষ্ট দৃষ্টিভঙ্গি সহ MVC

এখন পর্যন্ত আপনি সম্ভবত ভাবছেন যে আমি আপনাকে তিনটি সম্পূর্ণ আলাদা অ্যাপ তৈরি করতে বলছি, প্রতিটি ডিভাইসের জন্য একটি। না! কোড শেয়ারিং হল চাবিকাঠি।

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

ক্রস-ডিভাইস গল্পটি আপনার বিদ্যমান MVC কাঠামোর সাথে সুন্দরভাবে ফিট করে। আপনি সহজেই প্রতিটি ডিভাইসের জন্য একটি কাস্টম ভিউ তৈরি করে আলাদা ফাইলগুলিতে আপনার দৃশ্যগুলি সরাতে পারেন৷ তারপর আপনি ভিউ লেয়ার ব্যতীত সমস্ত ডিভাইসে একই কোড পরিবেশন করতে পারেন।

আপনার প্রকল্পের নিম্নলিখিত কাঠামো থাকতে পারে (অবশ্যই, আপনি এমন কাঠামো বেছে নিতে পারবেন যা আপনার আবেদনের উপর নির্ভর করে সবচেয়ে বেশি বোধগম্য হয়):

মডেল/ (ভাগ করা মডেল) item.js item-collection.js

controllers/ (শেয়ারড কন্ট্রোলার) item-controller.js

সংস্করণ/ (ডিভাইস-নির্দিষ্ট স্টাফ) ট্যাবলেট/ ডেস্কটপ/ ফোন/ (ফোন-নির্দিষ্ট কোড) style.css index.html views/ item.js item-list.js

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

একবার আপনি আপনার প্রিয় বিল্ড টুলটি চালালে, আপনি দ্রুত লোড করার জন্য আপনার সমস্ত জাভাস্ক্রিপ্ট এবং সিএসএসকে একক ফাইলে সংযুক্ত করবেন এবং ছোট করবেন, আপনার প্রোডাকশন এইচটিএমএল নিচের মত কিছু দেখাচ্ছে (ফোনের জন্য, device.js ব্যবহার করে):

<!doctype html>
<head>
  <title>Mobile Web Rocks! (Phone Edition)</title>

  <!-- Every version of your webapp should include a list of all
        versions. -->
  <link rel="alternate" href="http://foo.com" id="desktop"
      media="only screen and (touch-enabled: 0)">
  <link rel="alternate" href="http://m.foo.com" id="phone"
      media="only screen and (max-device-width: 650px)">
  <link rel="alternate" href="http://tablet.foo.com" id="tablet"
      media="only screen and (min-device-width: 650px)">

  <!-- Viewport is very important, since it affects results of media
        query matching. -->
  <meta name="viewport" content="width=device-width">

  <!-- Include device.js in each version for redirection. -->
  <script src="device.js"></script>

  <link rel="style" href="phone.min.css">
</head>
<body>
  <script src="phone.min.js"></script>
</body>

মনে রাখবেন যে (touch-enabled: 0) মিডিয়া ক্যোয়ারী অ-মানক (শুধুমাত্র একটি moz বিক্রেতা উপসর্গের পিছনে ফায়ারফক্সে প্রয়োগ করা হয়েছে), কিন্তু ডিভাইস.js দ্বারা সঠিকভাবে পরিচালনা করা হয়েছে ( Modernizr.touch কে ধন্যবাদ)।

সংস্করণ ওভাররাইড

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

স্বাভাবিক পদ্ধতি হল আপনার মোবাইল সংস্করণ থেকে ডেস্কটপ সংস্করণে একটি লিঙ্ক প্রদান করা। এটি বাস্তবায়ন করা যথেষ্ট সহজ, কিন্তু device.js device GET প্যারামিটারের সাথে এই কার্যকারিতা সমর্থন করে।

সমাপ্তি

সংক্ষেপে বলতে গেলে, ক্রস-ডিভাইস একক-পৃষ্ঠা UI তৈরি করার সময়, যেগুলি প্রতিক্রিয়াশীল ডিজাইনের জগতে সুন্দরভাবে ফিট করে না, এটি করুন:

1. সমর্থন করার জন্য ডিভাইস ক্লাসের একটি সেট বেছে নিন, এবং মানদণ্ড যার দ্বারা ডিভাইসগুলিকে ক্লাসে শ্রেণীবদ্ধ করতে হবে।
2. আপনার MVC অ্যাপ তৈরি করুন উদ্বেগের দৃঢ় বিচ্ছেদ, বাকি কোডবেস থেকে ভিউ বিভক্ত করে।
3. ক্লায়েন্ট সাইড ডিভাইস ক্লাস ডিটেকশন করতে device.js ব্যবহার করুন।
4. আপনি প্রস্তুত হলে, আপনার স্ক্রিপ্ট এবং স্টাইলশীটগুলিকে প্রতি ডিভাইস ক্লাসের একটিতে প্যাকেজ করুন।
5. যদি ক্লায়েন্ট-সাইড পুনঃনির্দেশ কর্মক্ষমতা একটি সমস্যা হয়, তাহলে device.js ত্যাগ করুন এবং সার্ভারসাইড UA- সনাক্তকরণে স্যুইচ করুন।