ত্বরিত মোবাইল পৃষ্ঠাগুলি উন্নত ধারণা

১. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবটি 'Accelerated Mobile Pages Foundations'-এ প্রবর্তিত ধারণাগুলোর ধারাবাহিকতা। এই ল্যাবটি শুরু করার আগে আপনার পূর্ববর্তী কোডল্যাবটি সম্পন্ন করা উচিত অথবা অন্ততপক্ষে AMP-এর মূল ধারণাগুলো সম্পর্কে আপনার আগে থেকেই একটি প্রাথমিক ধারণা থাকা উচিত।

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

আপনি যা শিখবেন

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

আপনার যা যা লাগবে

  • নমুনা কোড
  • ক্রোম (অথবা এর সমতুল্য কোনো ব্রাউজার যা জাভাস্ক্রিপ্ট কনসোল পরীক্ষা করতে পারে)
  • পাইথন (বিশেষত ২.৭) অথবা ক্রোম ২০০ ওকে ওয়েব সার্ভার এক্সটেনশন
  • কোড এডিটর (যেমন অ্যাটম, সাবলাইম, নোটপ্যাড++)

২. নমুনা কোডটি নিন।

আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন:

...অথবা কমান্ড লাইন থেকে গিটহাব রিপোজিটরিটি ক্লোন করুন:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

আপনি একটি ZIP ফাইল ডাউনলোড করবেন, যেটিতে কয়েকটি উদাহরণ রিসোর্স ফাইল এবং শুরুর article.html পৃষ্ঠাটি থাকবে।

ফোল্ডারটি আনজিপ করুন এবং আপনার কম্পিউটারের কমান্ড লাইনের মাধ্যমে ডিরেক্টরিটিতে যান।

৩. নমুনা পৃষ্ঠাটি চালান

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

  • গুগল ক্রোম অ্যাপ "Web Server for Chrome" - এটিই প্রস্তাবিত পদ্ধতি, কারণ এটি সবচেয়ে সহজ এবং ক্রস-প্ল্যাটফর্ম সমাধান। দ্রষ্টব্য: এই পদ্ধতির জন্য গুগল ক্রোম ইনস্টল করা থাকা আবশ্যক।
  • ফায়ারবেস হোস্টিং - এটি একটি বিকল্প ব্যবস্থা, যদি আপনি আমাদের নতুন স্ট্যাটিক অ্যাসেট হোস্টিং প্ল্যাটফর্ম 'ফায়ারবেস হোস্টিং' সম্পর্কেও জানতে আগ্রহী হন। এটি ডিফল্টরূপে SSL-সক্ষম।
  • একটি স্থানীয় HTTP পাইথন সার্ভার - এর জন্য কমান্ড-লাইনে প্রবেশাধিকার প্রয়োজন।

বিকল্প #১: ক্রোমের জন্য ওয়েব সার্ভার

আপনি ক্রোম ওয়েব স্টোরের এই লিঙ্কে 'Web Server for Chrome' অ্যাপটি খুঁজে পেতে পারেন।

4c1bf1095afed87a.png

ক্রোম অ্যাপটি ইনস্টল করার পর আপনাকে 'Choose Folder' বোতামের মাধ্যমে অ্যাপটিকে একটি নির্দিষ্ট ফোল্ডারে নির্দেশ করতে হবে। এই কোড ল্যাবের জন্য, আপনাকে সেই ফোল্ডারটি নির্বাচন করতে হবে যেখানে আপনি কোড ল্যাবের উদাহরণ ফাইলগুলো আনজিপ করেছেন।

এছাড়াও আপনাকে 'Automatically show index.html' অপশনটি টিক দিতে হবে এবং পোর্টটি '8000'-এ সেট করতে হবে। এই পরিবর্তনগুলো কার্যকর হওয়ার জন্য আপনাকে ওয়েব সার্ভারটি রিস্টার্ট করতে হবে।

এই URL-টি অ্যাক্সেস করুন:

http://localhost:8000/article.amp.html

উপরের ইউআরএলটি সফলভাবে লোড হলে আপনি পরবর্তী বিভাগে যেতে পারেন।

বিকল্প #২: ফায়ারবেস হোস্টিং

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

ফায়ারবেস হোস্টিং হলো একটি স্ট্যাটিক হোস্টিং প্রোভাইডার, যা ব্যবহার করে আপনি দ্রুত একটি স্ট্যাটিক ওয়েবসাইট এবং এর অ্যাসেটসমূহ—যেমন HTML, CSS, ও জাভাস্ক্রিপ্ট ফাইল—ডেপ্লয় ও হোস্ট করতে পারেন। ব্যবহারকারীরা কম ল্যাটেন্সির সুবিধা পান, কারণ স্ট্যাটিক কন্টেন্ট বিশ্বজুড়ে অবস্থিত পয়েন্টস অফ প্রেজেন্স (PoP) সহ একটি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN)-এ ক্যাশ করা থাকে।

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

বিকল্প #৩: HTTP পাইথন সার্ভার

যদি আপনি ক্রোম ব্যবহার না করেন অথবা ক্রোম এক্সটেনশনটি ইনস্টল করতে সমস্যায় পড়েন, তাহলে আপনি কমান্ড-লাইন থেকে পাইথন ব্যবহার করেও একটি লোকাল ওয়েব সার্ভার চালু করতে পারেন।

কমান্ড লাইন থেকে পাইথনের বিল্ট-ইন HTTP সার্ভার চালাতে হলে শুধু নিচের কমান্ডটি চালান:

python -m SimpleHTTPServer

এবং এই URL-টি অ্যাক্সেস করুন:

http://localhost:8000/article.amp.html

৪. AMP-এর মূল উপাদানগুলো সম্পর্কে জানুন

AMP-এর কম্পোনেন্ট সিস্টেম আমাদেরকে ন্যূনতম পরিশ্রমে দ্রুত এবং কার্যকরী ফিচার যুক্ত করার সুযোগ দেয়। <head> ট্যাগের মধ্যে থাকা মূল AMP জাভাস্ক্রিপ্ট লাইব্রেরিতে বেশ কয়েকটি কোর কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে:

  • amp-ad - বিজ্ঞাপন প্রদর্শনের জন্য ধারক।
  • amp-img - এইচটিএমএল (HTML) img ট্যাগের বিকল্প।
  • amp-pixel - পেজ ভিউ গণনা করার জন্য ট্র্যাকিং পিক্সেল হিসেবে ব্যবহৃত হয়।
  • amp-video - HTML5 ভিডিও ট্যাগের বিকল্প।

উপরের সমস্ত মূল উপাদান একটি AMP ডকুমেন্টে অবিলম্বে ব্যবহার করা যেতে পারে। আমাদের উদাহরণ কোডটি ইতিমধ্যেই আমাদের পৃষ্ঠায় amp-img ব্যবহার করছে এবং আমরা AMP ফাউন্ডেশনস কোড ল্যাবে দেখেছি এটি AMP লেআউট সিস্টেমের সাথে কীভাবে সম্পর্কিত, তাই চলুন পরবর্তী অধ্যায়ে amp-ad নিয়ে আলোচনা করা যাক!

৫. বিজ্ঞাপন যোগ করা

আপনার নমুনা article.amp.html পৃষ্ঠাটি নিম্নরূপ হওয়া উচিত:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

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

পৃষ্ঠাটি পরিবর্তন করার আগে চলুন ক্রোম ডেভেলপার টুলস খুলে নিই। কোনো ওয়েবসাইটে (বিশেষ করে মোবাইল-কেন্দ্রিক ওয়েবসাইটে) কাজ করার সময়, ব্রাউজারে পরীক্ষা করার জন্য একটি মোবাইল অভিজ্ঞতা অনুকরণ করা সাধারণত একটি ভালো উপায়। Menu > More Tools > Developer Tools এর মাধ্যমে ক্রোমের ডেভেলপার কনসোল খুলে শুরু করুন ।

efc352f418f35761.png

এখন ডেভেলপার কনসোলে জাভাস্ক্রিপ্ট আউটপুটটি পরীক্ষা করুন। নিশ্চিত করুন যে আপনি কনসোল ট্যাবটি নির্বাচন করেছেন:

597d53fae21a0a60.png

এখন ডেভেলপার কনসোলে থাকা ডিভাইস সিমুলেশন বোতামটিতে ক্লিক করুন। এটি পাশাপাশি রাখা একটি ফোন এবং ট্যাবলেটের মাধ্যমে দেখানো হয়:

46d475a36472b495.png

যে মেনুটি প্রদর্শিত হবে, সেখানে ডিভাইসটি "Nexus 5X"-এ সেট করুন:

db6dd4ac5476eed2.png

এখন আমরা মূল পেজটিতে কাজ শুরু করতে পারি। চলুন আমাদের AMP আর্টিকেলটিতে একটি বিজ্ঞাপন যোগ করার চেষ্টা করি!

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

ডাবল ক্লিক বিজ্ঞাপনের এই উদাহরণটি দেখুন:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

আপনি দেখতেই পাচ্ছেন, এটি একটি খুব সাধারণ কনফিগারেশন। ' type অ্যাট্রিবিউটটি লক্ষ্য করুন, এই অ্যাট্রিবিউটটি 'amp-ad' কম্পোনেন্টকে জানিয়ে দেয় যে আপনি কোন বিজ্ঞাপন প্ল্যাটফর্মটি ব্যবহার করতে চান। এই ক্ষেত্রে আমরা 'Double Click'-এর প্ল্যাটফর্মটি চেয়েছিলাম এবং সেই কারণে 'type'-এর মান ছিল ' doubleclick '।

data-slot অ্যাট্রিবিউটটি আরও অনন্য। amp-ad-এ data- দিয়ে শুরু হওয়া যেকোনো অ্যাট্রিবিউট হলো ভেন্ডর-নির্দিষ্ট অ্যাট্রিবিউট। এর মানে হলো, সব ভেন্ডরেরই এই নির্দিষ্ট অ্যাট্রিবিউটটির প্রয়োজন হবে এমন কোনো বাধ্যবাধকতা নেই, কিংবা এটি সরবরাহ করা হলেও তারা যে প্রতিক্রিয়া দেখাবে, এমনটাও নয়। উদাহরণস্বরূপ, উপরের ডাবল ক্লিক উদাহরণটির সাথে A9 প্ল্যাটফর্মের একটি পরীক্ষামূলক বিজ্ঞাপনের তুলনা করুন:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

আপনার আর্টিকেলে <header> ট্যাগের ঠিক পরেই উপরের দুটি উদাহরণই যোগ করে দেখুন। পেজটি রিফ্রেশ করুন এবং দেখবেন দুটি টেস্টিং বিজ্ঞাপন দেখা যাচ্ছে:

5dbcb01bee95147b.png

চলুন ডাবল ক্লিকের সাথে ব্যবহার করার জন্য উপলব্ধ আরও কিছু বিকল্প অন্বেষণ করা যাক। আপনার পৃষ্ঠায় এই দুটি জিওটার্গেটিং বিজ্ঞাপন কনফিগারেশন যোগ করার চেষ্টা করুন:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

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

পৃষ্ঠাটি রিফ্রেশ করে দেখুন। নিচের স্ক্রিনশটটি অস্ট্রেলিয়া থেকে তোলা হয়েছে, তাই কোনো বিজ্ঞাপনই লোড হচ্ছে না:

c53cbc464074deab.png

উপরের জিওটার্গেটিং উদাহরণটি দেখায় যে, amp-ad সব ধরনের অ্যাড প্ল্যাটফর্মের ফিচারের জন্য কতটা নমনীয়।

বর্তমানে সমর্থিত বিজ্ঞাপন নেটওয়ার্কগুলো হলো:

সর্বশেষ সমর্থিত বিজ্ঞাপন প্ল্যাটফর্মগুলো সম্পর্কে তথ্যের জন্য AMP Ad কম্পোনেন্টের ডকুমেন্টেশন পৃষ্ঠাটি অবশ্যই দেখে নিন।

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

৬. বর্ধিত উপাদান দিয়ে বিষয়বস্তু প্রসারিত করুন

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

সুতরাং, চলুন আমাদের AMP ডকুমেন্টটিকে পরবর্তী স্তরে নিয়ে যাই এবং পূর্বে উল্লিখিত মূল উপাদানগুলো ছাড়াও আর কী কী উপাদান উপলব্ধ আছে তা খতিয়ে দেখি।

এই অধ্যায়ে আমরা আরও উন্নত ওয়েব কার্যকারিতা যোগ করার চেষ্টা করব যা সাধারণত সংবাদ নিবন্ধে দেখা যায়:

  • ইউটিউব ভিডিও
  • টুইট
  • প্রবন্ধের উদ্ধৃতি

একটি ইউটিউব ভিডিও এমবেড করুন

চলুন ডকুমেন্টে একটি ইউটিউব ভিডিও যুক্ত করার চেষ্টা করি। নিচের কোডটি একটি ভিডিও যুক্ত করবে, এটি আপনার পেজে যোগ করুন :

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

পৃষ্ঠাটি রিফ্রেশ করুন এবং দেখুন। ভিডিওর পরিবর্তে আপনি এই লেখাটি দেখতে পাবেন: "ভিডিওটি লোড করা যায়নি।"

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

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

<head> ট্যাগে নিম্নলিখিত অনুরোধটি যোগ করুন : 

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

পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনি ইউটিউব ভিডিওটি দেখতে পাবেন:

be536b1d0f366e27.png

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

ইউটিউব উপাদানটি সম্পর্কে আরও জানুন।

একটি টুইট প্রদর্শন করুন

টুইটার থেকে পূর্ব-ফরম্যাট করা টুইট এমবেড করা সংবাদ নিবন্ধের একটি সাধারণ বৈশিষ্ট্য। AMP টুইটার কম্পোনেন্টটি সহজেই এই কার্যকারিতা প্রদান করতে পারে।

প্রথমে আপনার ডকুমেন্টের <head> ট্যাগে নিম্নলিখিত জাভাস্ক্রিপ্ট রিকোয়েস্টটি যোগ করুন: 

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

এখন আপনার আর্টিকেলে টুইটটি এমবেড করতে এই কোডটি যোগ করুন : 

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid অ্যাট্রিবিউটটি হলো এমন একটি কাস্টম অ্যাট্রিবিউটের আরেকটি উদাহরণ, যা কোনো নির্দিষ্ট প্ল্যাটফর্ম ভেন্ডরের জন্য আবশ্যক। এক্ষেত্রে টুইটার data-tweetid অ্যাট্রিবিউটটিকে পেজটিতে এমবেড করার জন্য একটি নির্দিষ্ট টুইটের সাথে সম্পর্কিত বলে শনাক্ত করে।

আপনার ব্রাউজার রিফ্রেশ করুন এবং পৃষ্ঠাটি দেখুন। আপনি টুইটটি দেখতে পাবেন:

b0423604fdf85209.png

টুইটার উপাদানটি সম্পর্কে আরও জানুন।

প্রবন্ধের একটি উদ্ধৃতি হাইলাইট করুন

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

তবে, যেহেতু সব উদ্ধৃতি বা পাঠ্যাংশ একই দৈর্ঘ্যের স্ট্রিং ক্যারেক্টারের হয়ে থাকে না, তাই পৃষ্ঠায় নির্দিষ্ট লেখাটি যে পরিমাণ জায়গা নেবে, তার সাথে বড় ফন্ট সাইজের ভারসাম্য রক্ষা করা কঠিন হতে পারে।

এই ধরনের পরিস্থিতির জন্য AMP-তে বিশেষভাবে amp-fit-text নামে আরেকটি কম্পোনেন্ট রয়েছে। এটি আপনাকে একটি নির্দিষ্ট প্রস্থ ও উচ্চতার এলিমেন্ট এবং একটি সর্বোচ্চ ফন্ট সাইজ নির্ধারণ করার সুযোগ দেয়। কম্পোনেন্টটি উপলব্ধ প্রস্থ ও উচ্চতার মধ্যে উদ্ধৃতির টেক্সটকে মানানসই করার জন্য বুদ্ধিমত্তার সাথে ফন্ট সাইজ পরিবর্তন করে।

চলুন চেষ্টা করে দেখি। প্রথমে, <head> ট্যাগে কম্পোনেন্টের লাইব্রেরিটি যোগ করুন: 

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

আপনার পৃষ্ঠায় নিম্নলিখিতগুলি যোগ করুন : 

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

পৃষ্ঠাটি রিফ্রেশ করুন এবং ফলাফলটি দেখুন!

এবার আরও পরীক্ষা করুন। উদ্ধৃতিটি আরও ছোট হলে কী হবে? 

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

অথবা আরও দীর্ঘ কোনো উদ্ধৃতি দিলে কেমন হয়? 

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

amp-fit-text নিয়ে শেষ পরীক্ষা হিসেবে, #YOLO-এর মতো একটি ছোট টেক্সট তৈরি করে দেখুন যার উচ্চতা অনেক বেশি – যেমন, ৪০০ – এবং max-font-size অ্যাট্রিবিউটের মান ৪২ অপরিবর্তিত রাখুন। এর ফলে পেজটি কেমন দেখাবে? টেক্সটটি কি উল্লম্বভাবে মাঝখানে চলে আসে, নাকি সর্বোচ্চ ফন্ট সাইজের সাথে মানিয়ে নিতে amp-fit-text ট্যাগটির উচ্চতা কমে যায়? AMP-এর লেআউট সিস্টেম সম্পর্কে আপনার যা জানা আছে, তা দিয়ে ডকুমেন্টটি সম্পাদনা করার আগে প্রশ্নটির উত্তর দেওয়ার চেষ্টা করুন!

৭. জটিল ক্যারোসেল

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

আপনার ডকুমেন্টের <head> ট্যাগে নিম্নলিখিত জাভাস্ক্রিপ্ট রিকোয়েস্টটি যোগ করে ক্যারোসেল কম্পোনেন্ট লাইব্রেরিটি অন্তর্ভুক্ত করতে ভুলবেন না: 

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

এরপর আমরা একটি রেসপন্সিভ লেআউট এবং পূর্বনির্ধারিত প্রস্থ ও উচ্চতা সহ একটি সাধারণ ছবির ক্যারোসেল যুক্ত করব। আপনার পেজে নিম্নলিখিত কোডটি যোগ করুন : 

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

আপনার পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনি আপনার পৃষ্ঠায় একটি ক্যারোসেল দেখতে পাবেন:

b55c8919ac22396f.png

ক্যারোসেল কম্পোনেন্টটি বিভিন্ন উপায়ে কনফিগার করা যায়। এর টাইপটি slides পরিবর্তন করে দেখুন এবং ফলাফলটি লক্ষ্য করুন। amp-carousel এর layout অ্যাট্রিবিউট এবং এর ভেতরের ছবিগুলোকেও responsive করতে ভুলবেন না।

এখন এলিমেন্টগুলোর স্ক্রলিং তালিকার পরিবর্তে আপনি একবারে একটি করে এলিমেন্ট দেখতে পাবেন। এলিমেন্টগুলোর মধ্যে দিয়ে যাওয়ার জন্য আনুভূমিকভাবে সোয়াইপ করার চেষ্টা করুন। আপনি যদি তৃতীয় এলিমেন্ট পর্যন্ত সোয়াইপ করেন, তবে আর সামনে সোয়াইপ করতে পারবেন না।

এরপর, loop অ্যাট্রিবিউটটি যোগ করুন । পেজটি রিফ্রেশ করে সাথে সাথে বাম দিকে সোয়াইপ করার চেষ্টা করুন। ক্যারোসেলটি অবিরাম ঘুরতে থাকবে।

সবশেষে, চলুন এই ক্যারোসেলটিকে প্রতি ২ সেকেন্ড পর পর স্বয়ংক্রিয়ভাবে চালু করার ব্যবস্থা করি। পেজটিতে autoplay অ্যাট্রিবিউট এবং `delay` অ্যাট্রিবিউটটি 2000 ভ্যালু দিয়ে এভাবে যোগ করুন : delay="2000" ।

আপনার চূড়ান্ত ফলাফলটি দেখতে অনেকটা এইরকম হবে: 

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

পৃষ্ঠাটি রিফ্রেশ করুন এবং একবার ঘুরিয়ে দেখুন!

ইমেজ ক্যারোসেলগুলো চমৎকার, কিন্তু আমরা যদি আমাদের ক্যারোসেলে আরও জটিল বিষয়বস্তু দেখাতে চাই? চলুন, একটি বিজ্ঞাপন, কিছু লেখা এবং একটি ছবি একসাথে একটি ক্যারোসেলে রেখে বিষয়টিকে একটু ভিন্নভাবে চেষ্টা করে দেখি। amp-carousel কি সত্যিই একসাথে এমন একটি মিশ্রণ সামলাতে পারে? অবশ্যই পারে।

প্রথমে পেজটিতে এই স্টাইলিংটি যোগ করা যাক, যাতে amp-fit-text এবং amp-carousel কম্পোনেন্টগুলো নিরাপদে একসাথে কাজ করতে পারে: 

amp-fit-text {
    white-space: normal;
}

এখন আপনার পেজে নিম্নলিখিত ক্যারোসেল কোডটি যুক্ত করার চেষ্টা করুন: 

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনি এইরকম কিছু দেখতে পাবেন:

1c92ba4977b3c6d1.png

a1b05df74f023f25.png

ক্যারোসেল কম্পোনেন্ট সম্পর্কে আরও জানুন।

৮. এএমপি-অ্যানালিটিক্স দিয়ে ট্র্যাক করুন

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

নিচে প্রথাগত জাভাস্ক্রিপ্ট চালিত গুগল অ্যানালিটিক্স ট্র্যাকিংয়ের একটি উদাহরণ দেওয়া হলো, যা আমরা amp-analytic-এর JSON ফরম্যাটে নতুন করে লিখব। প্রথমে প্রথাগত জাভাস্ক্রিপ্ট পদ্ধতিটি: 

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

উপরের বিষয়টি বেশ সহজ, এটি পেজভিউ ইভেন্টটি ট্র্যাক করার জন্য একটি নোটিফিকেশন পাঠায়।

amp-analytics কম্পোনেন্টে উপরের সবকিছু প্রতিলিপি করতে, আমরা প্রথমে আমাদের ডকুমেন্টের <head>-এ কম্পোনেন্ট লাইব্রেরিটি অন্তর্ভুক্ত করি: 

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

এবং তারপরে আমরা উপাদানটি নিম্নরূপভাবে অন্তর্ভুক্ত করি: 

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

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

JSON ফরম্যাটে 'triggers' কী-টির মধ্যে একগুচ্ছ কী থাকে, যা আমরা ট্র্যাক করব এমন সমস্ত ইভেন্ট ট্রিগারকে প্রতিনিধিত্ব করে। এই ট্রিগারগুলোর কী-গুলো হলো ইভেন্টের বিবরণ, যেমন উপরের উদাহরণে 'default pageview'। 'title' কী-টির ভ্যালুটি দেখা হচ্ছে এমন পেজের নামের সাথে সম্পর্কিত।

উপরের উদাহরণটি আরও বিস্তৃত করে আমরা 'click on #header trigger' নামে আরেকটি ট্রিগার যোগ করতে পারি: 

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

এই ট্রিগারটির কাজ ঠিক এর নামের মতোই। "#header" DOM ​​সিলেক্টরটি ব্যবহার করে আমরা "header" আইডিযুক্ত একটি ট্যাগ কোয়েরি করতে পারি এবং ডিভাইসে সেটিতে "ক্লিক" বা ট্যাপ করার ইভেন্টে, আমরা "examples" ক্যাটাগরি লেবেলসহ "clicked-header" ইভেন্ট অ্যাকশনটি অ্যানালিটিক্স প্ল্যাটফর্মে পাঠাই।

আপনার যদি নিজস্ব কোনো ট্র্যাকিং প্ল্যাটফর্ম থাকে যা আপনি ইন্টিগ্রেট করতে চান, তাহলেও আপনি amp-analytics ব্যবহার করতে পারেন এবং ট্র্যাকিং তথ্যের জন্য আপনার নিজস্ব ব্যক্তিগত URL এন্ডপয়েন্ট নির্ধারণ করতে পারেন। amp-analytics কম্পোনেন্ট সম্পর্কে আরও জানতে এখানে পড়ুন!

৯. আপনার সাইটে নেভিগেট করা

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

  1. আপনার হোম পেজে লিঙ্ক করুন – এটিই সবচেয়ে সহজ উপায়।
  2. ক্যারোসেল কম্পোনেন্টের মাধ্যমে একটি উপ-শিরোনাম মেনু।

হোম পেজ লিঙ্ক

আপনার ব্যবহারকারীদেরকে আপনার ওয়েবসাইটের নিয়মিত নেভিগেশন অপশনগুলোতে নিয়ে আসার সবচেয়ে সহজ উপায় হলো, তাদেরকে সরাসরি আপনার ওয়েবসাইটের মূল ইন্টারফেসে ফিরিয়ে আনা!

<header> ট্যাগে এই HTML লিঙ্কটি যোগ করার চেষ্টা করুন: 

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

এবং আপনার ইনলাইন CSS-এ এই নিয়মটি যোগ করুন : 

.home-button {
  float: left;
}

এখন পৃষ্ঠাটি রিফ্রেশ করুন । আপনি পৃষ্ঠার উপরের-বাম কোণে homepage.html এর দিকে নির্দেশ করা একটি লিঙ্ক দেখতে পাবেন - আপনি যদি এই লিঙ্কে ক্লিক করেন, তবে দ্রুতই বুঝতে পারবেন যে এটি আপনাকে কোথাও নিয়ে যায় না।

c856bc8d86acb31c.png

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

যেমনটি উল্লেখ করা হয়েছে, এটিই সবচেয়ে সহজ উপায় – আপনার ওয়েবসাইটের বিদ্যমান নেভিগেশন ব্যবহার করা। এরপর আমরা দুটি বিকল্প নিয়ে আলোচনা করব।

উপ-শিরোনাম মেনু

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

যেহেতু আমাদের ক্যারোসেল কম্পোনেন্টটি প্রয়োজন, তাই আপনার পেজের <head> ট্যাগে কম্পোনেন্টটির জাভাস্ক্রিপ্ট যোগ করতে ভুলবেন না: 

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

আপনার <header> ট্যাগের ঠিক নিচে এই HTML কোডটি যোগ করে দেখুন: 

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

এবং আপনার ইনলাইন CSS-এ এই নিয়মগুলো যোগ করুন : 

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

এখন পৃষ্ঠাটি রিফ্রেশ করুন । আপনার আর্টিকেলের শিরোনামের নিচে লিঙ্কের একটি মেনু দেখতে পাবেন। এই মেনুটি অনুভূমিকভাবে স্ক্রল করে অনেকগুলো নেভিগেশন লিঙ্ক সংরক্ষণ করা যায়।

cc548326befbbb0e.png

এই সাব-মেনু নেভিগেশনটি আপনার পেজে খুব বেশি জায়গা না নিয়ে প্রচুর লিঙ্ক সংরক্ষণ করার একটি চমৎকার উপায়।

১০. ফন্ট যোগ করা

পূর্বে যেমন আলোচনা করা হয়েছে, AMP ডকুমেন্টে কোনো বাহ্যিক স্টাইলশীট অনুরোধের অনুমতি নেই। তবে, এই নিয়মের একটি ব্যতিক্রম রয়েছে: ফন্ট।

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

চলুন ডকুমেন্টটিতে রেলওয়ে ফন্টের একটি রেফারেন্স যোগ করার চেষ্টা করি: 

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

এখন আপনার CSS আপডেট করে Raleway-এর একটি রেফারেন্স অন্তর্ভুক্ত করুন: 

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

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

১১. অভিনন্দন!

আপনি অ্যাডভান্সড এএমপি কোড ল্যাবটি সম্পন্ন করেছেন এবং সফলভাবে এএমপি-এর অনেক গুরুত্বপূর্ণ উপাদান সম্পর্কে জেনেছেন!

আশা করি, আপনার কাছে এটা স্পষ্ট হয়েছে যে, কীভাবে বিভিন্ন ধরণের অ্যাড প্ল্যাটফর্ম এবং অ্যানালিটিক্স ভেন্ডরদের সমর্থন করার জন্য amp-ad এবং amp-analytics ব্যবহার করা যেতে পারে। উপলব্ধ AMP কম্পোনেন্টগুলোর সম্পূর্ণ তালিকাটি অবশ্যই দেখে নেবেন।

আপনার দক্ষতা আরও বাড়ানোর জন্য নিচে কিছু অতিরিক্ত বিষয় এবং লিঙ্ক দেওয়া হলো, যা আপনি খতিয়ে দেখতে পারেন!