কন্টেন্ট বিন্যাস জন্য গাইড

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

এই কারণেই আমি কাজটির সর্বাধিকতর সরলকরণের জন্য কোনও সামগ্রীর বিন্যাসকে কীভাবে বিবেচনা করা উচিত এবং এর ফলাফলটি সর্বোত্তম হয় তার কয়েকটি প্রাথমিক ব্যাখ্যা দিতে যাচ্ছি।

এই গাইডের উদ্দেশ্যটি হ'ল প্রোগ্রামিং বা ওয়েব বিকাশের জ্ঞান ছাড়াই যে কেউ আমাকে একটি মানের বিন্যাস দিতে পারে এবং সিদ্ধান্তে পৌঁছা পর্যন্ত একাধিক কথোপকথনের মাধ্যমে ধারণাটি বের করার চেষ্টা করতে আমার খুব বেশি সময় ব্যয় করতে হবে না।

পদক্ষেপ 1: টেমপ্লেট

আমাদের প্রস্তাবটি "আঁকতে" একটি টেমপ্লেট থাকার জন্য, আমরা যা করতে যাচ্ছি তা হল এক্সএনএমএক্সে ফোলিও নেওয়া এবং আমরা এটির দৈর্ঘ্য এক ভাগ করে ফোল্ড করব।

পদক্ষেপ 2: সামগ্রী ব্লক করে

আসুন কল্পনা করুন যে আমাদের বেশ কয়েকটি ধরণের সামগ্রী রয়েছে: ভিডিও, চিত্র, পাঠ্য। প্রতিটি বিষয়বস্তু একটি আয়তক্ষেত্রাকার বা বর্গক্ষেত্র ব্লক। আমাদের পছন্দের টেমপ্লেটের উপরে থেকে নীচে পর্যন্ত আমাদের ব্লকগুলি ফিট করতে হবে। আমরা তিন ধরণের সামগ্রী চিত্রিত করব।

ভিডিও ব্লক

আমরা ধরে নেব যে ভিডিওটি সাধারণত একটি ইউটিউব ভিডিও হবে, আমরা এটি নীচে টেমপ্লেটে উপস্থাপন করি:

2 ইমেজ

চিত্র ব্লক

এটি চিত্রটি ল্যান্ডস্কেপ বা প্রতিকৃতি কিনা তার উপর নির্ভর করে যেমন আমরা সম্মত হব।

পাঠ্য ব্লক

আমরা কীভাবে টেক্সট চাইব তার উপর নির্ভর করে চিত্রটি ব্লকের মতোই আমরা একটি ব্লক বা অন্য একটি রাখব। আমরা সমান্তরাল লাইন দিয়ে এটি প্রতিনিধিত্ব করি।

পাঠ্য ব্লকগুলি অন্তর্ভুক্ত অনুচ্ছেদ এবং এমনকি সমেত পাঠ্য ব্লক হতে পারে পাঠ্য উপাদানগুলির তালিকা

আমি দুটি উদাহরণ স্থাপন করতে যাচ্ছি: একটি ল্যান্ডস্কেপ চিত্রের পাশের পাঠ্যের একটি ব্লক, এবং অন্য একটি প্রতিকৃতি চিত্রের পাশে:

3 ইমেজ

শিরোনাম ব্লক

শিরোনামগুলি পৃথক ব্লকগুলিতে যায় দীর্ঘায়িত ব্লক যা সাধারণত সম্পূর্ণ লাইন দখল করে।

বাটন ব্লক

যদি আমরা লোকদের ক্লিক করতে এবং তাদের ওয়েবের অন্য অংশে নিয়ে যেতে বা কিছু তথ্য (বা কোনও ফর্ম) সহ একটি উইন্ডো উপস্থিত করতে চাই তবে

অন্যান্য ব্লক

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

অবশেষে, এখানে উল্লিখিত সমস্ত ধরণের ব্লক সহ একটি টেমপ্লেটের উদাহরণ রয়েছে:

4 ইমেজ

ব্লকগুলি প্রসারিত করা হচ্ছে

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

5 ইমেজ

পদক্ষেপ 3: সামগ্রী তৈরি করা

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

আমরা আগের উদাহরণটি অনুসরণ করব। এক্সএনএমএক্স ছবিতে আমরা নীচের ব্লকগুলি দেখতে পারি:

  • এক্সএনএমএক্সএক্স শিরোনাম ব্লক
  • এক্সএনইউএমএক্স পাঠ্য ব্লক
  • এক্সএনএমএক্সএক্স ভিডিও ব্লক
  • এক্সএনইউএমএক্স ইমেজ ব্লক
  • এক্সএনএমএক্সএক্স বোতাম ব্লক
  • মোট: এক্সএনএমএক্স ব্লকস

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

পদক্ষেপ এক্সএনইউএমএক্স: ব্লকগুলির সাথে সামগ্রীতে ফিট করা

আসুন ধরে নেওয়া যাক আমরা কাগজের উপর ইতিমধ্যে নকশা আঁকিয়েছি এবং সমস্ত সামগ্রী ব্লক তৈরি করেছি। এখন শেষ পদক্ষেপটি এটি একত্রিত করা। এর জন্য আমরা সবকিছু একত্রিত করতে বেশ কয়েকটি সরঞ্জাম ব্যবহার করব এবং এটি ওয়েব ডিজাইনারের কাছে প্রেরণ করুন.

ভিডিও ব্লক

ভিডিওগুলি দুটি উপায়ে পাস করা যেতে পারে:

  1. MP4 ভিডিও ফর্ম্যাটে একটি সরঞ্জামের মাধ্যমে WeTransfer.
  2. পূর্বনির্ধারিত বিকল্প: এগুলি ইউটিউব মার্চ চ্যানেলে আপলোড করা এবং ভিডিওতে ইউটিউব লিঙ্কে পাস করা।

লেআউটে কেবলমাত্র একটি ভিডিও থাকলে কোনও সমস্যা হবে না। তবে যদি বেশ কয়েকটি ভিডিও থাকে তবে আমরা সেগুলি কাগজে যে লেআউট তৈরি করেছি তাতে কোনওভাবে সেগুলি সংযুক্ত করতে হবে।

উদাহরণস্বরূপ। তিনটি ভিডিও আছে তা কল্পনা করুন। বিন্যাসে আমরা প্রথম ভিডিওতে একটি 1 নম্বর, দ্বিতীয় ভিডিওতে একটি 2 নম্বর এবং তৃতীয় ভিডিওতে একটি 3 নম্বর আঁকব। এবং তারপরে সমস্ত ডকুমেন্টেশন প্রেরণ করার সময় আমরা এরকম কিছু রাখব:

  • ভিডিও এক্সএনএমএক্স: শিরোনাম সহ অহিংস বাক্যাংশ সম্পর্কে ভিডিও: "অহিংসার সবচেয়ে গুরুত্বপূর্ণ বাক্যাংশ"
  • ভিডিও এক্সএনএমএক্স: শিরোনামযুক্ত পতাকার রঙগুলি সম্পর্কে ভিডিও: "অহিংসার পতাকা"
  • ভিডিও এক্সএনইউএমএক্স: যে দলটি আর্জেন্টিনায় শিরোনাম নিয়ে মার্চ করতে চলেছে তার ভিডিও: "আর্জেন্টিনার বেস দল"

এটি প্রতিটি বিভাগের সাথে সম্পর্কিত কোন ভিডিওর সাথে তা সহজেই জানা যাবে।

চিত্র ব্লক

এই ক্ষেত্রে, সমস্ত চিত্র অবশ্যই IMGUR প্ল্যাটফর্মে আপলোড করা উচিত: https://imgur.com/upload

এবং তারপরে সেই চিত্রগুলির লিঙ্কগুলি পাস করুন। আদর্শটি হ'ল ভিডিওগুলির মতো চিত্রগুলি ঠিক একটি এক্সএনএমএক্স, একটি এক্সএনএমএক্স, একটি এক্সএনএমএক্স এবং আরও কিছু দিয়ে চিহ্নিত করা। উদাহরণস্বরূপ, আসুন কল্পনা করুন যে দক্ষিণ আফ্রিকার পথে আমাদের 1 চিত্র রয়েছে। চারটিকে একই বলা হয়: "সুডাফ্রিকা.জেপিজি"। তারপরে আমরা ধারাবাহিক নামগুলি সেই বিন্দুতে রেখেছি যেখানে তারা লেআউটে থাকবে এবং যে কাগজের সাথে তারা মিলবে সেই সংখ্যাটি আঁকবে। উদাহরণ:

  • দক্ষিণ আফ্রিকা-1.jpg
  • দক্ষিণ আফ্রিকা-2.jpg
  • দক্ষিণ আফ্রিকা-3.jpg
  • দক্ষিণ আফ্রিকা-4.jpg

বোতাম, শিরোনাম এবং পাঠ্য ব্লক

শেষ অবধি, এই ব্লকগুলিকে একটি ওয়ার্ড ডকুমেন্টে বা Google ডক্সে অগ্রাধিকার হিসাবে লেখা উচিত।

ফর্ম্যাটটি খুব সহজ: ওয়ার্ড ডকুমেন্টে আমরা ব্লকের (শিরোনাম, বোতাম, বা পাঠ্য) প্রকারটি সংযোজন করব যার পরে এটি বিন্যাসে সামঞ্জস্য করবে।

উদাহরণ:

  • 1 শিরোনাম:…
  • 2 শিরোনাম:…
  • এক্সএনএমএক্সএক্স পাঠ্য:…
  • এক্সএনএমএক্সএক্স পাঠ্য:…
  • এক্সএনইউএমএক্স বোতাম:…
  • এক্সএনইউএমএক্স বোতাম:…

তারপরে আমি সম্পূর্ণ র্যান্ডম পাঠ্য সহ একটি উদাহরণ নথি রেখেছি যাতে এটি 4 চিত্রের উদাহরণ অনুসরণ করে কীভাবে এটি কাঠামোগত হবে তা দেখা যায়:

আমরা প্রতিটি বিভাগের সাথে সামঞ্জস্য করা নম্বরগুলি একবার রাখলে লেআউটটি এমনভাবে দেখা উচিত:

6 ইমেজ

4 পদক্ষেপ: সমস্ত পাঠান Send

একবার আমরা সমস্ত কাজ শেষ করে ফেললে আপনাকে কেবল সেই ব্যক্তির কাছে পাঠাতে হবে যিনি লেআউটের দায়িত্বে থাকবেন

এটা সহজভাবে নিতে হবে

  1. লেআউট সহ কাগজে স্কেচগুলি
  2. বিষয়বস্তু
    • ইউটিউব বা ওয়েট ট্রান্সফার ভিডিও লিঙ্ক
    • ছবিগুলির লিঙ্কগুলি
    • গুগল ডক্স বা ওয়ার্ড ফাইলে নথির লিঙ্ক

নোটারি গুরুত্বপূর্ণ ফাইনাল

সর্বোপরি আদর্শটি হ'ল পৃষ্ঠার শিরোনাম 1 শিরোনামের সাথে একটি অসামান্য চিত্র অন্তর্ভুক্ত করা হবে। এজন্য শিরোনাম 1 সর্বদা শুরুতে উপস্থিত হওয়া উচিত।

শিরোনাম চিত্রটিতে অবশ্যই 960 x 540 পিক্সেল আকার থাকতে হবে। এই চিত্রটি বাকী চিত্রগুলির মতো ইমগুর দ্বারা প্রেরণ করা যেতে পারে

চূড়ান্ত ফলাফল

এবং অবশেষে এই সমস্ত তথ্য সহ, পৃষ্ঠাটি সেট আপ করা হবে। এই উদাহরণটি অনুসরণ এবং শেষ করার জন্য, আমরা পূর্বে উত্থাপিত সমস্ত পরামিতিগুলি অনুসরণ করে চূড়ান্ত ফলাফল সহ পৃষ্ঠাটি হ'ল:

চূড়ান্ত পৃষ্ঠা