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

1. ওভারভিউ

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

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

আপনি কি শিখবেন

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

আপনি কি প্রয়োজন হবে

  • নমুনা কোড
  • ক্রোম (বা একটি সমতুল্য ব্রাউজার যা জাভাস্ক্রিপ্ট কনসোল পরিদর্শন করতে পারে)
  • পাইথন (বিশেষত 2.7) বা Chrome 200 ওকে ওয়েব সার্ভার এক্সটেনশন
  • কোড এডিটর (উদাহরণস্বরূপ Atom, Sublime, Notepad++)

2. নমুনা কোড পান

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

...অথবা কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করুন:

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

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

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

3. নমুনা পৃষ্ঠা চালান

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

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

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

আপনি Chrome ওয়েব স্টোরের এই লিঙ্কে "ক্রোমের জন্য ওয়েব সার্ভার" অ্যাপটি খুঁজে পেতে পারেন৷

4c1bf1095afed87a.png

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

অতিরিক্তভাবে আপনার "স্বয়ংক্রিয়ভাবে index.html দেখান" বিকল্পে টিক দেওয়া উচিত এবং পোর্টটিকে "8000" এ সেট করা উচিত। এই পরিবর্তনগুলি কার্যকর করার জন্য আপনাকে ওয়েব সার্ভারটি পুনরায় চালু করতে হবে৷

এর মাধ্যমে এই URL অ্যাক্সেস করুন:

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

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

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

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

ফায়ারবেস হোস্টিং হল একটি স্ট্যাটিক হোস্টিং প্রদানকারী যা আপনি একটি স্ট্যাটিক ওয়েবসাইট এবং এর সম্পদ দ্রুত স্থাপন ও হোস্ট করতে ব্যবহার করতে পারেন; HTML, CSS, এবং JavaScript ফাইল সহ। ব্যবহারকারীরা কম লেটেন্সি থেকে উপকৃত হয় কারণ স্ট্যাটিক কন্টেন্ট একটি কন্টেন্ট ডেলিভারি নেটওয়ার্কে (CDN) ক্যাশ করা হয় যেখানে বিশ্বজুড়ে অবস্থানের পয়েন্ট (PoPs) রয়েছে।

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

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

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

কমান্ড লাইন থেকে পাইথনের অন্তর্নির্মিত HTTP সার্ভার চালানোর জন্য কেবল নিম্নলিখিতগুলি চালান:

python -m SimpleHTTPServer

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

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

4. মূল AMP উপাদানগুলি শিখুন৷

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

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

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

5. একটি বিজ্ঞাপন যোগ করা

আপনার নমুনা 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>

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

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

efc352f418f35761.png

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

597d53fae21a0a60.png

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

46d475a36472b495.png

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

db6dd4ac5476eed2.png

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

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 কম্পোনেন্টকে জানিয়ে দেয় আপনি কোন বিজ্ঞাপন প্ল্যাটফর্ম ব্যবহার করতে চান। এই ক্ষেত্রে আমরা ডাবল ক্লিকের প্ল্যাটফর্ম চেয়েছিলাম এবং তাই টাইপ মান ছিল 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 বিজ্ঞাপন কম্পোনেন্টের ডকুমেন্টেশন পৃষ্ঠাটি দেখতে ভুলবেন না।

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

6. প্রসারিত উপাদান সহ বিষয়বস্তু প্রসারিত করুন

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

তাই আসুন আমাদের এএমপি ডকুমেন্টকে পরবর্তী স্তরে নিয়ে যাই এবং আগে উল্লেখ করা মূল উপাদানগুলির বাইরে কোন উপাদানগুলি পাওয়া যায় তা অন্বেষণ করি।

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

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

একটি YouTube ভিডিও এম্বেড করুন

আসুন নথিতে একটি YouTube ভিডিও এম্বেড করার চেষ্টা করি। নিম্নলিখিত কোডটি একটি ভিডিও এম্বেড করবে, এটি আপনার পৃষ্ঠায় যুক্ত করবে :

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

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

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

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

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

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

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

be536b1d0f366e27.png

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

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

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

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

আপনার নথির <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-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 একটি অনেক বড় উচ্চতা সহ - উদাহরণস্বরূপ, 400 এর মান - এবং 42-এর সর্বোচ্চ-ফন্ট-সাইজ বৈশিষ্ট্যের মান বজায় রাখা। কী ফলাফল পৃষ্ঠার মত হবে? টেক্সট কি উল্লম্বভাবে কেন্দ্রীভূত হয় নাকি amp-fit-টেক্সট ট্যাগের উচ্চতা সর্বোচ্চ ফন্টের আকারে ফিট করার জন্য সঙ্কুচিত হয়? AMP এর লেআউট সিস্টেম সম্পর্কে আপনি যা জানেন তা জেনে ডকুমেন্টটি সম্পাদনা করার আগে প্রশ্নের উত্তর দেওয়ার চেষ্টা করুন!

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

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

আপনার নথির <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 অ্যাট্রিবিউট যোগ করুন । পৃষ্ঠাটি রিফ্রেশ করুন এবং অবিলম্বে বাম দিকে সোয়াইপ করার চেষ্টা করুন৷ ক্যারোজেল অবিরাম লুপ.

সবশেষে, প্রতি 2 সেকেন্ডের হারে এই ক্যারোজেলটি অটোপ্লে করা যাক। পৃষ্ঠায় autoplay অ্যাট্রিবিউট এবং 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-ক্যারোজেল কি সত্যিই একবারে এই জাতীয় মিশ্রণ পরিচালনা করতে পারে? আপনি বাজি ধরুন।

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

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

8. amp-বিশ্লেষণ দিয়ে ট্র্যাক করুন

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

নিম্নলিখিতটি প্রথাগত জাভাস্ক্রিপ্ট চালিত Google Analytics ট্র্যাকিংয়ের একটি উদাহরণ যা আমরা 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 ফর্ম্যাটে ট্রিগার কী-তে কীগুলির একটি সেট অন্তর্ভুক্ত থাকে যা সমস্ত ইভেন্ট ট্রিগারগুলিকে উপস্থাপন করে যা আমরা ট্র্যাক করব, সেই ট্রিগারগুলির কীগুলি হল ইভেন্টের বিবরণ, উদাহরণস্বরূপ উপরের "ডিফল্ট পৃষ্ঠাদর্শন"৷ শিরোনাম কী মান যে পৃষ্ঠাটি দেখা হচ্ছে তার নামের সাথে সম্পর্কিত।

উপরের উদাহরণটি প্রসারিত করে আমরা আরেকটি ট্রিগার যোগ করতে পারি "#হেডার ট্রিগারে ক্লিক করুন": 

<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>

এই ট্রিগারটি ঠিক যেমন শোনাচ্ছে, DOM নির্বাচক "#header" ব্যবহার করে আমরা "header" আইডি সহ একটি ট্যাগের জন্য অনুসন্ধান করতে পারি এবং ডিভাইসটিতে "ক্লিক" বা ট্যাপ করা হলে আমরা একটি ইভেন্ট অ্যাকশন পাঠাই "ক্লিক-হেডার" ক্যাটাগরি লেবেল "উদাহরণ" সহ বিশ্লেষণ প্ল্যাটফর্মে।

আপনার যদি একটি কাস্টম ট্র্যাকিং প্ল্যাটফর্ম থাকে যার সাথে আপনি সংহত করতে চান তবে আপনি এখনও amp-analytics ব্যবহার করতে পারেন এবং ট্র্যাকিং তথ্যের জন্য আপনার নিজস্ব ব্যক্তিগতকৃত URL শেষ পয়েন্টগুলি সংজ্ঞায়িত করতে পারেন৷ এখানে amp-analytics কম্পোনেন্ট সম্পর্কে আরও পড়ুন!

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

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

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

হোম পেজ লিঙ্ক

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

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

<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> ট্যাগে উপাদানটির JavaScript যোগ করতে ভুলবেন না: 

<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;
}

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

cc548326befbb0e.png

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

10. ফন্ট যোগ করা হচ্ছে

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

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

আসুন ডকুমেন্টে Raleway ফন্টের একটি রেফারেন্স যোগ করার চেষ্টা করি: 

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

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

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

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

11. অভিনন্দন!

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

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

নিম্নলিখিত কিছু অতিরিক্ত বিষয় এবং লিঙ্কগুলি যা আপনি আপনার দক্ষতাকে আরও প্রসারিত করতে অন্বেষণ করতে চাইতে পারেন!