AMP Email এর Components এবং Elements গাইড ও নোট

AMP Email (AMP for Email) হল Accelerated Mobile Pages (AMP) এর একটি বিশেষ অংশ যা ইমেইল ক্লায়েন্টে ইন্টারঅ্যাকটিভ কন্টেন্ট প্রদর্শন করার জন্য তৈরি করা হয়েছে। AMP Email ইমেইলের মাধ্যমে দারুণ ইন্টারঅ্যাকটিভ এবং গতিশীল কন্টেন্ট প্রেরণ করতে সক্ষম, যেমন ডাইনামিক কন্টেন্ট, ফর্ম সাবমিশন, ইউজার ইন্টারঅ্যাকশন এবং আরও অনেক কিছু, যা আগে কেবল ওয়েবসাইটে সম্ভব ছিল। এটি ব্যবহারকারীদের ইমেইলেই দ্রুত অ্যাকশন গ্রহণের সুযোগ দেয়, যেমন একটি শপিং কার্টের আইটেম পরিবর্তন করা, ফর্ম পূর্ণ করা, বা লাইভ আপডেট পাওয়া।

AMP Email এ কিছু বিশেষ কম্পোনেন্ট এবং এলিমেন্ট রয়েছে যা ইমেইলে ইন্টারঅ্যাকটিভিটি যুক্ত করে এবং ব্যবহারের অভিজ্ঞতা উন্নত করে।

AMP Email এর Components এবং Elements

AMP ইমেইলে কয়েকটি গুরুত্বপূর্ণ কম্পোনেন্ট এবং এলিমেন্ট রয়েছে, যা ইমেইলগুলিকে গতিশীল এবং ইন্টারঅ্যাকটিভ করতে ব্যবহৃত হয়। নিচে এর কিছু কম্পোনেন্ট ও এলিমেন্টের তালিকা দেওয়া হলো:

1. <amp-form>

amp-form কম্পোনেন্ট ইমেইলে ফর্ম তৈরি করার জন্য ব্যবহৃত হয়, যা ব্যবহারকারীদের ইনপুট পাঠাতে, যেমন ইমেইল, নাম, পাসওয়ার্ড বা অন্যান্য ফিল্ড। এটি ইন্টারঅ্যাকটিভ এবং ডাইনামিক ফর্ম ব্যবহারের জন্য উপযুক্ত।

উদাহরণ:

<amp-form method="post" action-xhr="https://your-server.com/submit">
  <form>
    <label for="name">নাম:</label>
    <input type="text" name="name" id="name" required>

    <button type="submit">সাবমিট</button>
  </form>
</amp-form>

• method: ফর্মের পাঠানোর পদ্ধতি (যেমন post বা get)।
• action-xhr: ফর্ম সাবমিট হওয়ার পর API কল করা যাবে এখানে।

2. <amp-carousel>

amp-carousel কম্পোনেন্ট ইমেইলে স্লাইডশো বা গ্যালারি তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের ছবি, ভিডিও বা কনটেন্ট স্লাইড করতে সাহায্য করে।

উদাহরণ:

<amp-carousel width="300" height="200" layout="responsive" type="slides">
  <div><img src="image1.jpg" alt="Image 1"></div>
  <div><img src="image2.jpg" alt="Image 2"></div>
  <div><img src="image3.jpg" alt="Image 3"></div>
</amp-carousel>

• type="slides": স্লাইডশো টাইপের জন্য, ছবি বা কনটেন্ট স্লাইড করার জন্য।
• layout="responsive": স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুসারে কনটেন্ট সাইজ ঠিক করে।

3. <amp-accordion>

amp-accordion কম্পোনেন্ট ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ এক্সপ্যান্ডেবল বা কোলাপ্সেবল কন্টেন্ট তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত প্রশ্নোত্তর, ফিচার বা বিশদ তথ্য দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ:

<amp-accordion>
  <section>
    <h4>প্রশ্ন ১</h4>
    <p>এটি প্রশ্ন ১ এর উত্তর।</p>
  </section>
  <section>
    <h4>প্রশ্ন ২</h4>
    <p>এটি প্রশ্ন ২ এর উত্তর।</p>
  </section>
</amp-accordion>

• <section>: প্রত্যেকটি প্রশ্ন-উত্তর বা তথ্যের সেকশন।

4. <amp-bind>

amp-bind ব্যবহারকারীদের ইন্টারঅ্যাকশনের মাধ্যমে AMP ইমেইলের কন্টেন্ট ডাইনামিকভাবে পরিবর্তন করতে সাহায্য করে। এটি ইমেইলের স্টেট পরিচালনা এবং ডাটা বাইন্ডিংয়ের জন্য ব্যবহৃত হয়।

উদাহরণ:

<amp-state id="count">
  <script type="application/json">
    { "value": 0 }
  </script>
</amp-state>

<button on="tap:AMP.setState({ count: count.value + 1 })">একটি সংখ্যা বৃদ্ধি করুন</button>
<p>বর্তমান সংখ্যা: <span [text]="count.value"></span></p>

• <amp-state>: ডাটা স্টোর করার জন্য ব্যবহৃত হয়।
• on="tap:AMP.setState...": ব্যবহারকারী ক্লিক করার মাধ্যমে স্টেট পরিবর্তন।

5. <amp-video>

amp-video কম্পোনেন্ট ইমেইলে ভিডিও প্লে করতে ব্যবহৃত হয়। এটি AMP ফর্ম্যাটে ইমেইলে ভিডিও যুক্ত করার জন্য প্রয়োজনীয় ট্যাগ।

উদাহরণ:

<amp-video width="640" height="360" layout="responsive" controls>
  <source src="your-video.mp4" type="video/mp4">
</amp-video>

• layout="responsive": ভিডিওর সাইজ স্ক্রীনের আকার অনুযায়ী রেসপন্সিভ হয়ে যাবে।

6. <amp-list>

amp-list ব্যবহারকারীদের জন্য একটি ডাইনামিক তালিকা তৈরি করতে ব্যবহৃত হয়, যা API বা অন্য সোর্স থেকে কন্টেন্ট লোড করতে পারে। এটি বিশেষভাবে তথ্য আপডেট বা ডাইনামিক কন্টেন্ট প্রদর্শনের জন্য উপকারী।

উদাহরণ:

<amp-list src="https://example.com/api/items" width="auto" height="100" layout="fixed-height">
  <template type="amp-mustache">
    <div>{{name}}</div>
  </template>
</amp-list>

• src: API বা সোর্স থেকে ডাটা ফেচ করতে ব্যবহৃত হয়।
• <template type="amp-mustache">: ডাটা প্রদর্শনের জন্য HTML টেমপ্লেট।

7. <amp-selector>

amp-selector ব্যবহারকারীদের জন্য একটি সিলেকশন কম্পোনেন্ট তৈরি করে, যেখানে তারা বিভিন্ন অপশন থেকে নির্বাচন করতে পারে।

উদাহরণ:

<amp-selector>
  <div option="1">অপশন ১</div>
  <div option="2">অপশন ২</div>
  <div option="3">অপশন ৩</div>
</amp-selector>

• option: নির্বাচনযোগ্য অপশন।

AMP Email এর অন্যান্য গুরুত্বপূর্ণ টুলস

1. <amp-social-share>: ইমেইলে সোশ্যাল মিডিয়াতে শেয়ার করার বাটন তৈরি করতে ব্যবহৃত হয়।
2. <amp-lightbox>: ইমেইলে ছবি বা ভিডিও লাইটবক্স বা মডাল ডায়ালগ তৈরি করতে ব্যবহৃত হয়।

AMP Email এর সুবিধা

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

এভাবে AMP Email বিভিন্ন ইন্টারঅ্যাকটিভ কম্পোনেন্ট এবং এলিমেন্ট ব্যবহার করে ইমেইলে নতুন ধরনের ইনপুট এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।