AMP এর মাধ্যমে ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি

AMP (Accelerated Mobile Pages) এর মাধ্যমে ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি করা সম্ভব, যা ব্যবহারকারীদের জন্য একটি engaging এবং মজাদার অভিজ্ঞতা প্রদান করতে পারে। AMP প্ল্যাটফর্মে ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি করতে বেশ কিছু টুল এবং টেকনিক ব্যবহার করা যেতে পারে। এখানে বিভিন্ন AMP কম্পোনেন্ট এবং টেকনিক ব্যবহার করে কিভাবে ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি করা যায়, তা ব্যাখ্যা করা হয়েছে।

AMP এর মাধ্যমে ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি করার জন্য কিছু গুরুত্বপূর্ণ টুল এবং টেকনিক

১. AMP Forms (AMP ফর্ম)

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

ব্যবহার উদাহরণ:

<amp-form method="post" action-xhr="/submit-form">
    <form>
        <label for="name">Your Name</label>
        <input type="text" name="name" id="name" required>
        <button type="submit">Submit</button>
    </form>
    <div submit-success>
        <template type="amp-mustache">
            Thanks, {{name}}! Your form has been submitted.
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            Sorry, there was an error submitting your form.
        </template>
    </div>
</amp-form>

বিশদ বর্ণনা:

• amp-form: এটি একটি AMP কম্পোনেন্ট যা ফর্ম ব্যবহার করার জন্য ডিজাইন করা হয়েছে।
• action-xhr: এটি ফর্মের ডাটা সাবমিট করার জন্য একটি URL নির্দেশ করে।
• submit-success এবং submit-error: এই টেমপ্লেটগুলি ব্যবহারকারীর সফল বা ত্রুটিপূর্ণ সাবমিশনের জন্য ব্যবহৃত হয়।

২. AMP Bind (ইন্টারঅ্যাকটিভ কন্টেন্ট)

AMP Bind ব্যবহার করে আপনি ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি করতে পারেন। এটি ডাইনামিক কন্টেন্টের পরিবর্তন করতে সাহায্য করে যেমন টেক্সট, ছবি, বা ভিডিও। AMP-bind একটি বিশেষ AMP API যা পেজের কন্টেন্ট ইন্টারঅ্যাক্টিভ করতে ব্যবহৃত হয়। আপনি সহজেই ব্যবহারকারীর ইনপুট বা আচরণ অনুসারে কন্টেন্ট পরিবর্তন করতে পারেন।

ব্যবহার উদাহরণ:

<amp-state id="userData">
    <script type="application/json">
        {
            "name": "John Doe",
            "age": 25
        }
    </script>
</amp-state>

<button on="tap:AMP.setState({userData: {name: 'Jane Doe'}})">Change Name</button>

<h1>{{userData.name}}</h1>

বিশদ বর্ণনা:

• amp-state: এটি একটি স্টেট তৈরি করে যা ডেটা হোল্ড করার জন্য ব্যবহৃত হয়।
• AMP.setState: এটি একটি AMP-এভেন্ট হ্যান্ডলার যা স্টেট পরিবর্তন করে। এখানে বাটনে ক্লিক করলে নাম পরিবর্তিত হবে।

৩. AMP Story (ইন্টারঅ্যাক্টিভ স্টোরি)

AMP Story ব্যবহার করে আপনি ইন্টারঅ্যাক্টিভ স্টোরি তৈরি করতে পারেন যা একাধিক পেজের মাধ্যমে দৃশ্যমান হয়। আপনি ছবির সাথে ভিডিও, টেক্সট, এনিমেশন এবং ইন্টারঅ্যাক্টিভ উপাদান যোগ করতে পারেন।

ব্যবহার উদাহরণ:

<amp-story standalone title="Interactive Story" publisher="Your Publisher Name" publisher-logo-src="logo.png" poster-portrait-src="poster.jpg">
    <amp-story-page id="page1">
        <amp-story-grid-layer template="fill">
            <amp-img src="image1.jpg" width="720" height="1280" layout="responsive"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
            <h1>Welcome to the Story</h1>
            <p>This is the first page of the interactive story.</p>
        </amp-story-grid-layer>
    </amp-story-page>

    <amp-story-page id="page2">
        <amp-story-grid-layer template="fill">
            <amp-img src="image2.jpg" width="720" height="1280" layout="responsive"></amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
            <h1>Next Page</h1>
            <p>Interactive content in this page</p>
        </amp-story-grid-layer>
    </amp-story-page>
</amp-story>

বিশদ বর্ণনা:

• amp-story: এটি AMP স্টোরির কন্টেইনার, যেখানে একাধিক পেজ থাকতে পারে।
• amp-story-page: একটি একক পৃষ্ঠা যা পেজের কন্টেন্ট ধারণ করে।
• amp-story-grid-layer: এটি কন্টেন্ট লেয়ারের জন্য ব্যবহৃত হয়। এখানে আপনি ছবি, ভিডিও, টেক্সট এবং অন্যান্য উপাদান যোগ করতে পারেন।

৪. AMP Carousel (ইন্টারঅ্যাক্টিভ ইমেজ গ্যালারি)

AMP Carousel ব্যবহার করে আপনি ইমেজ বা কন্টেন্টের গ্যালারি তৈরি করতে পারেন যেখানে ব্যবহারকারী ছবি বা কন্টেন্ট পরিবর্তন করতে পারে।

ব্যবহার উদাহরণ:

<amp-carousel width="600" height="400" layout="responsive" type="slides">
    <amp-img src="image1.jpg" width="600" height="400" layout="responsive"></amp-img>
    <amp-img src="image2.jpg" width="600" height="400" layout="responsive"></amp-img>
    <amp-img src="image3.jpg" width="600" height="400" layout="responsive"></amp-img>
</amp-carousel>

বিশদ বর্ণনা:

• amp-carousel: এটি একটি গ্যালারি বা স্লাইডার তৈরি করতে ব্যবহৃত হয়। এখানে আপনি ইমেজ বা অন্যান্য কন্টেন্ট ইনপুট করতে পারেন যা ব্যবহারকারী স্লাইড করতে পারে।
• type="slides": এটি গ্যালারির স্লাইডিং মুডকে সক্রিয় করে।

৫. AMP Lightbox (ইন্টারঅ্যাক্টিভ লাইটবক্স)

AMP Lightbox ব্যবহার করে আপনি ইমেজ বা ভিডিও লাইটবক্স হিসেবে প্রদর্শন করতে পারেন। এটি বিশেষভাবে ইমেজ বা ভিডিও দেখতে সহজ করে তোলে।

ব্যবহার উদাহরণ:

<amp-lightbox id="lightbox" layout="nodisplay">
    <div>
        <amp-img src="image.jpg" width="800" height="600" layout="responsive"></amp-img>
    </div>
</amp-lightbox>

<button on="tap:lightbox.toggle">Open Lightbox</button>

বিশদ বর্ণনা:

• amp-lightbox: এটি একটি লাইটবক্স তৈরি করে, যা ইমেজ বা ভিডিও প্রদর্শন করার জন্য ব্যবহৃত হয়।
• on="tap:lightbox.toggle": এটি ব্যবহারকারীর ট্যাপ ইভেন্টের মাধ্যমে লাইটবক্সের টগল করার জন্য ব্যবহৃত হয়।

AMP এর মাধ্যমে ইন্টারঅ্যাক্টিভ কন্টেন্ট তৈরি করার উপকারিতা

1. দ্রুত লোডিং: AMP পেজগুলি খুব দ্রুত লোড হয়, যা ব্যবহারকারীদের জন্য একটি সুগম অভিজ্ঞতা তৈরি করে।
2. মোবাইল-ফ্রেন্ডলি: AMP ডিজাইন করা হয়েছে মোবাইল ব্যবহারকারীদের জন্য, যা গুগল সার্চে উচ্চ র‌্যাঙ্কিং পাওয়ার সম্ভাবনা বাড়ায়।
3. ইন্টারঅ্যাকটিভ এবং এনগেজিং: AMP আপনাকে ইন্টারঅ্যাকটিভ কন্টেন্ট যেমন ফর্ম, এনিমেশন, গ্যালারি, ভিডিও, ইত্যাদি তৈরি করতে সক্ষম করে, যা ব্যবহারকারীদের আরও বেশি ইন্টারঅ্যাক্ট করতে উৎসাহিত করে।
4. SEO সুবিধা: AMP পেজ গুগল সার্চে ভালো র‌্যাঙ্ক পায়, কারণ এগুলি দ্রুত লোড হয় এবং মোবাইল-ফ্রেন্ডলি।

সারাংশ

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

AMP Bind এবং State Management AMP (Accelerated Mobile Pages) প্রজেক্টের গুরুত্বপূর্ণ অংশ যা ডায়নামিক কন্টেন্ট এবং ইন্টারঅ্যাকটিভ ফিচার যোগ করতে সাহায্য করে। এগুলি ব্যবহার করে AMP পেজগুলোতে ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে কনটেন্ট পরিবর্তন বা আপডেট করা যায়।

AMP Bind:

AMP Bind একটি নতুন প্রযুক্তি যা AMP পেজে ইন্টারঅ্যাকটিভ কন্টেন্ট এবং ডায়নামিক ডাটা বাইন্ডিংয়ের সুবিধা প্রদান করে। এটি AMP পেজে ডেটার পরিবর্তন ট্র্যাক এবং ইউজারের ইন্টারঅ্যাকশনের মাধ্যমে কনটেন্ট আপডেট করার সুযোগ দেয়।

AMP Bind এর প্রধান বৈশিষ্ট্য:

• ডাটা বাইন্ডিং: AMP Bind আপনাকে HTML ট্যাগের মধ্যে ডাটা বাইন্ড করতে সাহায্য করে। উদাহরণস্বরূপ, একটি প্যারাগ্রাফ বা টেক্সট এলিমেন্টের কন্টেন্ট বাইন্ড করা যায়, যা পরিবর্তন হলে পেজের কন্টেন্টও স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়।
• ডায়নামিক কন্টেন্ট: ইউজারের ইনপুট বা ইন্টারঅ্যাকশনের ভিত্তিতে কন্টেন্ট পরিবর্তন করা যায়, যেমন একটি স্লাইডার মুভ করলে টেক্সট পরিবর্তন হওয়া বা একটি বাটনে ক্লিক করলে কন্টেন্ট পরিবর্তিত হওয়া।
• ইউজার ইন্টারঅ্যাকশন: বিভিন্ন ইভেন্ট (যেমন ক্লিক, ইনপুট চেঞ্জ ইত্যাদি) ব্যবহার করে পেজের কন্টেন্ট আপডেট করা যায়।

AMP Bind এর কিভাবে কাজ করে?

AMP Bind ব্যবহার করতে হলে কিছু নির্দিষ্ট ট্যাগ এবং অ্যাট্রিবিউট ব্যবহার করতে হয়। প্রধান ট্যাগ হল amp-bind এবং bind।

যেমন:

1. HTML এ amp-bind স্ক্রিপ্ট যোগ করা:

   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

2. ডাটা বাইন্ডিং:
   • এটি ব্যবহার করে আপনি একটি ইনপুট ফিল্ডের মানকে একটি ডিভ বা প্যারাগ্রাফের মধ্যে বাইন্ড করতে পারেন।

<p [text]="message">Hello, World!</p>

<input type="text" on="input-debounced:AMP.setState({message: event.value})">

এই কোডটি নিশ্চিত করে যে ইনপুট ফিল্ডের মান পরিবর্তন হলে তা প্যারাগ্রাফে প্রদর্শিত হবে।

3. ডাটা স্টেট পরিবর্তন:
   • AMP Bind এ স্টেট পরিবর্তনের জন্য AMP.setState() ব্যবহার করা হয়, যা ডাটা বাইন্ডিং আপডেট করতে সহায়তা করে।

<button on="tap:AMP.setState({clicked: true})">Click me</button>

<p [text]="clicked ? 'You clicked the button!' : 'Please click the button'"></p>

এই কোডে, একটি বাটনে ক্লিক করলে "You clicked the button!" টেক্সট দেখাবে, অন্যথায় "Please click the button" দেখাবে।

State Management in AMP:

AMP পেজে State Management ব্যবহারের মাধ্যমে আপনি কনটেন্টের অবস্থা বা স্টেট নিয়ন্ত্রণ করতে পারেন, যা পেজে ডায়নামিক ইন্টারঅ্যাকশনের সময় প্রয়োজনীয়।

State Management এর কাজ:

• স্টেট তৈরি এবং আপডেট: AMP পেজে স্টেট তৈরি এবং আপডেট করার জন্য AMP.setState() ফাংশন ব্যবহার করা হয়।
• স্টেট বাইন্ডিং: স্টেটের পরিবর্তন অনুযায়ী HTML এলিমেন্টের কন্টেন্ট পরিবর্তন করা যায়। AMP Bind ব্যবহারের মাধ্যমে আপনি স্টেট পরিবর্তনের সাথে কন্টেন্ট পরিবর্তন করতে পারবেন।

State Management এর উদাহরণ:

1. স্টেট ডিফাইন করা:

   <amp-state id="appState">
     <script type="application/json">
    {
      "message": "Hello, AMP!",
      "clicked": false
    }
     </script>
   </amp-state>

এখানে appState নামে একটি স্টেট ডিফাইন করা হয়েছে, যেখানে দুটি ফিল্ড—message এবং clicked রাখা হয়েছে।

2. স্টেটের মান পরিবর্তন করা:
   • একটি বাটনে ক্লিক করলে স্টেটের clicked ফিল্ড True হয়ে যাবে এবং message স্টেট আপডেট হবে।

<button on="tap:AMP.setState({clicked: true, message: 'Button clicked!'})">Click me</button>

<p [text]="message"></p>

3. স্টেটের মান অনুযায়ী কন্টেন্ট আপডেট:
   • স্টেটের মানের ভিত্তিতে পেজের কন্টেন্ট পরিবর্তন করতে ব্যবহার করা হয় বাইন্ডিং।

<p [text]="clicked ? 'Button was clicked!' : 'Please click the button'"></p>

এতে, যখন ব্যবহারকারী বাটনে ক্লিক করবেন, clicked স্টেট True হয়ে যাবে এবং টেক্সট আপডেট হয়ে যাবে।

AMP Bind এবং State Management এর সুবিধা:

1. ইন্টারঅ্যাকটিভ কন্টেন্ট: AMP Bind এর মাধ্যমে আপনি অ্যাপ্লিকেশনের মতো ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরি করতে পারেন, যেখানে ইউজারের ইন্টারঅ্যাকশনের ভিত্তিতে কন্টেন্ট পরিবর্তিত হয়।
2. ডায়নামিক পেজ: এটি স্ট্যাটিক পেজগুলির পরিবর্তে ডায়নামিক পেজ তৈরির সুযোগ দেয়, যেখানে বিভিন্ন অবস্থা এবং ডেটার ভিত্তিতে কন্টেন্ট আপডেট হয়।
3. পারফরম্যান্স: AMP পেজে Bind এবং State Management ব্যবহারের মাধ্যমে পেজের পারফরম্যান্স ভালো থাকে, কারণ AMP JS এর সাথে স্টেট ব্যবস্থাপনা খুবই কার্যকর।

সামগ্রিকভাবে, AMP Bind এবং State Management আপনাকে AMP পেজে ডায়নামিক কন্টেন্ট এবং ইন্টারঅ্যাকশন তৈরি করার সুবিধা দেয়, যা মোবাইল ডিভাইসে দ্রুত এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।

AMP Form Component (amp-form) হলো AMP এর একটি বিশেষ কম্পোনেন্ট যা ব্যবহারকারীদের দ্বারা পূর্ণ করা ফর্মের ডেটা প্রসেস করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর ইনপুট গ্রহণ করে এবং ফর্ম সাবমিশনের জন্য অ্যাসিনক্রোনাস রিকোয়েস্ট প্রেরণ করতে সহায়তা করে, যেন পেজের রেন্ডারিং ব্লক না হয় এবং দ্রুত লোডিং নিশ্চিত হয়।

AMP Form Component এর ব্যবহার

AMP ফর্ম কম্পোনেন্টটি ব্যবহার করে ফর্ম তৈরি করার জন্য কিছু নির্দিষ্ট নিয়ম এবং কনফিগারেশন রয়েছে। এই কম্পোনেন্টটি সাধারণ HTML ফর্মের মতোই কাজ করে, তবে এতে কিছু সীমাবদ্ধতা এবং উপাদান রয়েছে যা বিশেষভাবে AMP প্ল্যাটফর্মের জন্য তৈরি।

AMP Form Component এর মূল উপাদান:

1. ফর্মের সংজ্ঞা:
   • AMP ফর্মের জন্য <form> ট্যাগে amp-form অ্যাট্রিবিউট যোগ করতে হবে।
2. ডেটা সাবমিশন:
   • ফর্ম সাবমিশনের জন্য, action-xhr অ্যাট্রিবিউট ব্যবহার করা হয়, যা অ্যাসিনক্রোনাস HTTP রিকোয়েস্ট প্রেরণ করে ফর্মের ডেটা সার্ভারে পাঠাতে সহায়তা করে। এটি সাধারণ POST বা GET রিকোয়েস্ট প্রেরণ করতে ব্যবহৃত হয়।
3. response:
   • ফর্মের সাবমিশনের পর সার্ভার থেকে প্রাপ্ত রেসপন্সের ভিত্তিতে পেজের কিছু অংশ আপডেট করা যায়। এর জন্য target এবং submit-success / submit-error অ্যাট্রিবিউট ব্যবহার করা হয়।

AMP Form Example:

এখানে একটি সাধারণ AMP ফর্মের উদাহরণ দেয়া হলো:

<!DOCTYPE html>
<html amp>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AMP Form Example</title>
    
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    
    <style amp-custom>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #4CAF50;
        }
        .form-container {
            max-width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Submit Your Information</h1>
    
    <div class="form-container">
        <form method="POST" action-xhr="/submit-form" target="_blank">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" required>
            
            <label for="email">Email</label>
            <input type="email" name="email" id="email" required>
            
            <button type="submit">Submit</button>
        </form>

        <!-- Success message -->
        <div submit-success>
            <template type="amp-mustache">
                <p>Thank you for your submission, {{name}}! We will get back to you soon.</p>
            </template>
        </div>

        <!-- Error message -->
        <div submit-error>
            <template type="amp-mustache">
                <p>Sorry, something went wrong. Please try again.</p>
            </template>
        </div>
    </div>
</body>
</html>

এই AMP ফর্মের প্রধান উপাদান:

1. <form> ট্যাগের action-xhr অ্যাট্রিবিউট:
   • action-xhr অ্যাট্রিবিউটটি ফর্মের ডেটা প্রেরণের জন্য ব্যবহৃত হয়। এই অ্যাট্রিবিউটটি সাধারণত সার্ভারে রিকোয়েস্ট পাঠায়, এবং অ্যাসিনক্রোনাস ভাবে সার্ভার থেকে রেসপন্স নেয়।
   • method="POST": এখানে POST পদ্ধতিতে ডেটা প্রেরণ করা হচ্ছে।
   • target="_blank": সাবমিশন শেষে সার্ভারের রেসপন্স নতুন উইন্ডোতে প্রদর্শন হবে।
2. submit-success এবং submit-error:
   • submit-success এবং submit-error ব্লক ফর্ম সাবমিশনের পর সার্ভার থেকে রেসপন্স অনুযায়ী সফল বা ব্যর্থ সাবমিশন মেসেজ দেখায়।
   • এই ব্লকগুলিতে AMP Mustache টেমপ্লেট ব্যবহার করা হয়, যা রেসপন্সের ডেটা ডাইনামিকভাবে টেমপ্লেটের মধ্যে প্রবাহিত করে।
3. amp-form স্ক্রিপ্ট:
   • <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>: AMP ফর্ম ব্যবহারের জন্য এই স্ক্রিপ্টটি লোড করতে হয়। এটি AMP ফর্মের কার্যকারিতা নিশ্চিত করে।

AMP ফর্ম কম্পোনেন্টের সুবিধা:

• অ্যাসিনক্রোনাস সাবমিশন: ফর্মের ডেটা পাঠানো হয় অ্যাসিনক্রোনাস ভাবে, অর্থাৎ পেজটি রিফ্রেশ না হয়ে ডেটা সার্ভারে পাঠানো হয়।
• সার্ভার রেসপন্সের উপর ভিত্তি করে কাস্টম মেসেজ: সাবমিশন সফল হলে কাস্টম সফল বা ত্রুটি মেসেজ দেখানো সম্ভব।
• ব্যবহারকারী অভিজ্ঞতা উন্নত: দ্রুত লোড হওয়া এবং ইন্টারঅ্যাকটিভ ফর্ম সবার জন্য ভালো অভিজ্ঞতা প্রদান করে।

AMP ফর্মের কিছু সীমাবদ্ধতা:

• JavaScript সীমাবদ্ধতা: AMP ফর্মে কাস্টম JavaScript ব্যবহার করা যায় না, তাই ফর্ম সাবমিশনের জন্য শুধুমাত্র action-xhr ব্যবহৃত হয়।
• ডেটা প্রক্রিয়াকরণ: সার্ভারে ডেটা প্রক্রিয়াকরণ খুবই গুরুত্বপূর্ণ, কারণ ফর্মের ডেটা সার্ভার থেকে ব্যাকএন্ড সিস্টেমে পাঠানো হয়।

এভাবে AMP ফর্ম কম্পোনেন্ট ব্যবহার করে আপনি ওয়েবসাইটে সহজ এবং দ্রুত সাবমিশন ফর্ম তৈরি করতে পারেন যা মোবাইল ডিভাইসে দ্রুত লোড হয়।

AMP Lightbox এবং Modal Dialogs (amp-lightbox) হল AMP (Accelerated Mobile Pages) এর একটি উপাদান যা ওয়েব পেজে ইন্টারেক্টিভ এবং গ্রাফিকাল উপাদান প্রদর্শন করতে সাহায্য করে, যেমন ছবি, ভিডিও, বা কনটেন্ট যা একে অন্যের উপরে "ওভারলে" (overlay) হিসাবে প্রদর্শিত হয়। এটি বিশেষভাবে মোবাইল ডিভাইসে সঠিকভাবে কাজ করার জন্য ডিজাইন করা হয়েছে, যাতে পেজের লোডিং সময় এবং পারফরম্যান্সে কোনো সমস্যা না হয়।

AMP Lightbox এবং Modal Dialogs (amp-lightbox)

amp-lightbox হল AMP এর একটি কম্পোনেন্ট যা মোবাইল ডিভাইসে আলোচিত বা ছবি, ভিডিও বা অন্য যেকোনো কনটেন্টকে পূর্ণ পর্দায় প্রদর্শন করতে সাহায্য করে। এই উপাদানটি "lightbox" অথবা "modal dialogs" হিসাবে কাজ করে। আপনি এটি ব্যবহার করে পেজের মূল কন্টেন্টের ওপর একটি পপ-আপ উইন্ডো তৈরি করতে পারেন, যাতে ব্যবহারকারীরা আরো বিশদ তথ্য দেখতে পারে বা কোনো নির্দিষ্ট কনটেন্ট এক্সপ্লোর করতে পারে।

amp-lightbox কম্পোনেন্টের ব্যবহার

AMP Lightbox একটি AMP কম্পোনেন্ট যা ছবির লাইটবক্স, ভিডিও, বা অন্যান্য মিডিয়া কনটেন্টকে একটি পপ-আপ মোডে প্রদর্শন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি ব্যবহারকারীদের জন্য আরও মজার এবং ইনটারেক্টিভ অভিজ্ঞতা তৈরি করতে পারবেন।

AMP Lightbox এর মূল বৈশিষ্ট্য:

1. এটোমেটিক সাইজিং এবং স্কেলিং: লাইটবক্সটি নিজে থেকেই স্কেল হয়, এবং ব্যবহারকারীর স্ক্রীনের আকার অনুযায়ী সাইজ তৈরি করে।
2. মোবাইল-ফ্রেন্ডলি: এটি মোবাইল ডিভাইসে সম্পূর্ণ অপ্টিমাইজড এবং পারফরম্যান্সে কোনো ক্ষতি ছাড়াই কাজ করে।
3. সহজ ইনস্টলেশন: এটি খুবই সহজভাবে AMP HTML এর মধ্যে ইনস্টল করা যায় এবং কোনো অতিরিক্ত কোডিং করার দরকার হয় না।
4. এনিমেশন এবং ট্রানজিশন: লাইটবক্স ওপেন বা ক্লোজ হওয়ার সময় সুন্দর এনিমেশন এবং ট্রানজিশন দেখানো যায়, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।

amp-lightbox কম্পোনেন্ট কিভাবে ব্যবহার করবেন?

১. প্রথমে AMP কম্পোনেন্ট ইমপোর্ট করুন:

আপনার AMP পেজের <head> সেকশনে amp-lightbox কম্পোনেন্টটি যোগ করতে হবে। এই কম্পোনেন্টটি AMP লাইব্রেরির অংশ, তাই আপনাকে AMP লাইব্রেরি ইমপোর্ট করতে হবে।

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
</head>

২. AMP Lightbox উপাদান তৈরি করুন:

এখন আপনি লাইটবক্স উপাদানটি ব্যবহার করতে পারবেন। এর জন্য amp-lightbox ট্যাগ ব্যবহার করুন এবং আপনার কনটেন্টের জন্য হোস্টিং উপাদানটি সাজান।

<amp-lightbox id="lightbox1" layout="nodisplay">
  <div class="lightbox-content">
    <p>এখানে আপনি ছবি বা ভিডিও যোগ করতে পারেন</p>
    <img src="your-image.jpg" alt="Lightbox Image">
  </div>
</amp-lightbox>

এখানে layout="nodisplay" ব্যবহার করা হয়েছে, যাতে এটি সরাসরি প্রদর্শিত না হয়। এটি তখনই দৃশ্যমান হবে যখন আমরা কোনো ইন্টারঅ্যাকশনের মাধ্যমে এটি ট্রিগার করব।

৩. Lightbox Trigger বা Button তৈরি করুন:

এখন আপনি একটি বাটন বা লিংক তৈরি করতে পারেন, যা ব্যবহারকারী ক্লিক করলে লাইটবক্সটি দেখাবে। এর জন্য amp-bind ব্যবহার করতে পারেন, অথবা শুধু AMP এর সাধারণ on="tap: ইভেন্ট হ্যান্ডলার ব্যবহার করে লাইটবক্সটিকে সক্রিয় করতে পারেন।

<button on="tap:lightbox1.toggleVisibility()">লাইটবক্স দেখুন</button>

এখানে on="tap:lightbox1.toggleVisibility()" দিয়ে আমরা একটি ইভেন্ট ট্রিগার করছি, যা lightbox1 এর ভিজিবিলিটি পরিবর্তন করবে।

AMP Lightbox এর বৈশিষ্ট্যগুলির কিছু উদাহরণ

1. ইমেজ লাইটবক্স:

   • আপনি একটি ছবির লাইটবক্স তৈরি করতে পারেন, যা ক্লিক করার পর পূর্ণ স্ক্রীনে দেখা যাবে।

   <amp-lightbox id="image-lightbox" layout="nodisplay">
     <div class="lightbox-content">
       <img src="image.jpg" alt="Full Screen Image">
     </div>
   </amp-lightbox>
   
   <button on="tap:image-lightbox.toggleVisibility()">ইমেজ দেখুন</button>

2. ভিডিও লাইটবক্স:

   • আপনি একটি ভিডিও লাইটবক্সও তৈরি করতে পারেন, যেখানে ক্লিক করার পর ভিডিও প্লে হবে।

   <amp-lightbox id="video-lightbox" layout="nodisplay">
     <div class="lightbox-content">
       <amp-video src="video.mp4" width="640" height="360" layout="responsive" controls></amp-video>
     </div>
   </amp-lightbox>
   
   <button on="tap:video-lightbox.toggleVisibility()">ভিডিও দেখুন</button>

3. টেক্সট ও অন্যান্য কনটেন্ট:

   • আপনি শুধু টেক্সট বা অন্যান্য কনটেন্টও লাইটবক্সে প্রদর্শন করতে পারেন, যা সাধারণত ব্যবহৃত হয় ফর্ম বা টুলটিপ হিসাবে।

   <amp-lightbox id="info-lightbox" layout="nodisplay">
     <div class="lightbox-content">
       <p>এই লাইটবক্সে আপনি কোন তথ্য বা বার্তা প্রদর্শন করতে পারেন।</p>
     </div>
   </amp-lightbox>
   
   <button on="tap:info-lightbox.toggleVisibility()">তথ্য দেখুন</button>

AMP Lightbox এর সুবিধা

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

এভাবে amp-lightbox কম্পোনেন্ট ব্যবহার করে আপনি AMP পেজে ইন্টারেক্টিভ, দ্রুত এবং মোবাইল ফ্রেন্ডলি লাইটবক্স এবং মডাল ডায়ালগ তৈরি করতে পারেন।

AMP Carousel এবং **AMP Image Gallery (যেমন amp-carousel এবং amp-image-lightbox) দুটি গুরুত্বপূর্ণ AMP কম্পোনেন্ট যা ওয়েব পেজে ইন্টারঅ্যাকটিভ ছবি বা ভিডিও প্রদর্শন করতে ব্যবহৃত হয়। এগুলি বিশেষভাবে ডিজাইন করা হয়েছে যাতে পেজের লোডিং টাইম কম থাকে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।

1. AMP Carousel (amp-carousel)

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

AMP Carousel এর বৈশিষ্ট্য:

• এটি স্লাইডশো বা carousel তৈরি করতে সাহায্য করে, যেখানে ব্যবহারকারী একে একে বিভিন্ন কন্টেন্ট দেখতে পারেন।
• amp-carousel এলিমেন্ট বিভিন্ন ধরনের কন্টেন্ট যেমন ছবি, ভিডিও, অথবা HTML এলিমেন্ট স্লাইড করার জন্য ব্যবহার করা যায়।
• এটি রেসপন্সিভ, যা বিভিন্ন ডিভাইসে সঠিকভাবে কাজ করে।

AMP Carousel ব্যবহার করার উদাহরণ:

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

• type="slides": এটি carousel এর ধরন নির্দেশ করে, যেখানে ব্যবহারকারী একে একে স্লাইড করতে পারেন।
• layout="responsive": এটি এলিমেন্টকে রেসপন্সিভ বানায়, যাতে এটি স্ক্রীনের আকার অনুযায়ী নিজেকে মানিয়ে নেবে।

AMP Carousel এর অন্যান্য বৈশিষ্ট্য:

• নেভিগেশন: ব্যবহারকারীরা স্বাভাবিকভাবে স্লাইডের মাধ্যমে নেভিগেট করতে পারেন, অথবা আপনি স্লাইড নেভিগেট করতে previous এবং next বাটন ব্যবহার করতে পারেন।
• স্বয়ংক্রিয় স্লাইডিং: amp-carousel স্লাইডের অটো প্লে ফিচারও সাপোর্ট করে, যাতে স্লাইডগুলো স্বয়ংক্রিয়ভাবে চলতে থাকে।

2. AMP Image Gallery (amp-image-lightbox)

amp-image-lightbox একটি AMP কম্পোনেন্ট যা একটি ইমেজ গ্যালারি তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত একটি গ্যালারির ছবিতে ক্লিক করলে সেটি একটি lightbox এ পূর্ণ স্ক্রীনে প্রদর্শিত হয়। এটি ব্যবহারকারীদের একটি ছবি দেখতে ও জুম ইন বা আউট করার জন্য একটি ইন্টারঅ্যাকটিভ উপায় প্রদান করে।

AMP Image Gallery এর বৈশিষ্ট্য:

• এটি ইমেজ গ্যালারি তৈরি করতে সাহায্য করে, যেখানে ব্যবহারকারীরা ছবিতে ক্লিক করার মাধ্যমে সেগুলিকে পূর্ণ স্ক্রীনে দেখতে পারেন।
• একাধিক ছবি প্রদর্শন করতে amp-img ট্যাগ এবং লাইটবক্সের জন্য amp-image-lightbox ব্যবহার করা হয়।
• এটি পেজের লোডিং সময় কমাতে সাহায্য করে এবং ওয়েব পেজে দ্রুত এবং কার্যকরী ছবি প্রদর্শনের সুযোগ দেয়।

AMP Image Gallery ব্যবহার করার উদাহরণ:

<amp-image-lightbox id="lightbox" layout="nodisplay"></amp-image-lightbox>

<amp-img src="image1.jpg" width="600" height="400" alt="Image 1" 
         on="tap:lightbox" role="button"></amp-img>
<amp-img src="image2.jpg" width="600" height="400" alt="Image 2" 
         on="tap:lightbox" role="button"></amp-img>
<amp-img src="image3.jpg" width="600" height="400" alt="Image 3" 
         on="tap:lightbox" role="button"></amp-img>

• on="tap:lightbox": যখন ব্যবহারকারী ছবিতে ক্লিক করবেন, তখন lightbox সক্রিয় হবে এবং ছবিটি পূর্ণ স্ক্রীনে প্রদর্শিত হবে।
• role="button": এই অ্যাট্রিবিউটটি ইমেজের উপরে ক্লিক করতে পারার জন্য একটি বাটন হিসেবে সেট করে।

AMP Image Gallery এর অন্যান্য বৈশিষ্ট্য:

• Lightbox Modal: ব্যবহারকারী কোনো ছবিতে ক্লিক করলে তা পূর্ণ স্ক্রীনে দেখানো হয়, এবং তারা ছবি স্ক্রল করতে পারে।
• নেভিগেশন: লাইটবক্সে ব্যবহারকারী পরবর্তী বা পূর্ববর্তী ছবিতে নেভিগেট করতে পারেন।
• জুমিং: অনেক ইমেজ গ্যালারি প্যাকেজে ইন-বিল্ট জুমিং ফিচার থাকে, যেখানে ব্যবহারকারী ইমেজের উপর জুম ইন এবং আউট করতে পারেন।

AMP Carousel এবং AMP Image Gallery এর তুলনা

AMP Carousel এবং AMP Image Gallery এর ব্যবহার ক্ষেত্র

1. AMP Carousel:
   • পণ্য গ্যালারি: ই-কমার্স সাইটে পণ্যের ছবি প্রদর্শন করার জন্য।
   • বিজ্ঞাপন স্লাইডশো: স্লাইডিং বিজ্ঞাপন বা কনটেন্ট প্রদর্শন।
   • ফটো গ্যালারি: ছবি বা ভিডিও স্লাইড করতে।
2. AMP Image Gallery:
   • প্রকৃতি ফটোগ্রাফি: উচ্চমানের ছবি প্রদর্শন করতে গ্যালারি।
   • বিশেষ ইভেন্ট বা ফটোগ্রাফি শো: ইভেন্ট বা ফটোগ্রাফি পোর্টফোলিও প্রদর্শন।
   • গ্যালারি প্রদর্শনী: পূর্ণ স্ক্রীনে ছবিগুলির আলোচনায় ক্লিক করে নেভিগেট করা।

উপসংহার

amp-carousel এবং amp-image-lightbox উভয়ই AMP কম্পোনেন্ট যা ওয়েব পেজে ছবি, ভিডিও বা কন্টেন্ট প্রদর্শনের ক্ষেত্রে দ্রুত এবং ইন্টারঅ্যাকটিভ উপায় প্রদান করে। AMP Carousel স্লাইডিং কন্টেন্ট এবং AMP Image Gallery ছবির পূর্ণ স্ক্রীন ভিউ তৈরি করতে ব্যবহৃত হয়। এটি দ্রুত লোডিং নিশ্চিত করার মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, বিশেষ করে মোবাইল ডিভাইসে।