Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Accelerated Mobile Pages के बेहतर कॉन्सेप्ट

1. खास जानकारी

यह कोडलैब, Accelerated Mobile Pages की बुनियादी बातों में बताए गए कॉन्सेप्ट के बारे में ज़्यादा जानकारी देता है. इस लैब को शुरू करने से पहले, आपको पिछला कोड लैब पूरा कर लेना चाहिए. इसके अलावा, आपको एएमपी के मुख्य सिद्धांतों की बुनियादी जानकारी होनी चाहिए.

इस कोडलैब में, आपको यह जानने को मिलेगा कि एएमपी, विज्ञापन, Analytics, वीडियो एम्बेड करने, सोशल मीडिया इंटिग्रेशन, इमेज कैरोसेल वगैरह को कैसे मैनेज करता है. इसके लिए, आपको बुनियादी कोडलैब के उदाहरण का इस्तेमाल करना होगा. साथ ही, अलग-अलग एएमपी कॉम्पोनेंट के ज़रिए इन सुविधाओं को जोड़ना होगा.

आपको क्या सीखने को मिलेगा

amp-ad का इस्तेमाल करके डिसप्ले विज्ञापन दिखाना.
YouTube वीडियो, Twitter कार्ड, और रिस्पॉन्सिव टेक्स्ट एलिमेंट एम्बेड करें.
amp-carousel का इस्तेमाल करके, इमेज और कॉन्टेंट के कॉम्बिनेशन वाले कैरसेल बनाएं.
amp-analytics की मदद से, ट्रैकिंग के आसान पैटर्न.
अपने पेज पर साइट नेविगेशन जोड़ने के तरीके.
एएमपी के साथ फ़ॉन्ट कैसे काम करते हैं.

आपको किन चीज़ों की ज़रूरत होगी

सैंपल कोड
Chrome या ऐसा ही कोई ब्राउज़र जो JavaScript कंसोल की जांच कर सकता हो
Python (बेहतर होगा कि 2.7 हो) या Chrome 200 OK वेब सर्वर एक्सटेंशन
कोड एडिटर (उदाहरण के लिए, Atom, Sublime, Notepad++)

2. सैंपल कोड पाना

आपके पास अपने कंप्यूटर पर, पूरा सैंपल कोड डाउनलोड करने का विकल्प होता है:

...या कमांड लाइन से GitHub रिपॉज़िटरी को क्लोन करें:

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

आपको एक ZIP फ़ाइल डाउनलोड करनी होगी. इसमें उदाहरण के तौर पर कई संसाधन फ़ाइलें और शुरुआती article.html पेज शामिल होगा.

फ़ोल्डर को अनज़िप करें और अपने कंप्यूटर पर कमांड लाइन के ज़रिए डायरेक्ट्री पर जाएं.

3. सैंपल पेज चलाना

हमारे सैंपल पेज को टेस्ट करने के लिए, हमें वेब सर्वर से फ़ाइलों को ऐक्सेस करना होगा. जांच के लिए, कुछ समय के लिए लोकल वेब सर्वर बनाने के कई तरीके हैं. इस कोड लैब में, हम उपलब्ध तीन विकल्पों के लिए निर्देश देंगे:

Google Chrome ऐप्लिकेशन "Web Server for Chrome" - हमारा सुझाव है कि आप इस ऐप्लिकेशन का इस्तेमाल करें. यह सबसे आसान तरीका है और यह सभी प्लैटफ़ॉर्म पर उपलब्ध है. ध्यान दें: इस तरीके के लिए, Google Chrome इंस्टॉल होना ज़रूरी है.
Firebase Hosting - अगर आपको हमारे नए स्टैटिक ऐसेट होस्टिंग प्लैटफ़ॉर्म "Firebase Hosting" के बारे में भी जानना है, तो यह विकल्प चुनें. एसएसएल की सुविधा डिफ़ॉल्ट रूप से चालू होती है.
लोकल एचटीटीपी Python सर्वर - इसके लिए, कमांड-लाइन का ऐक्सेस ज़रूरी है.

पहला विकल्प: Web Server for Chrome

आपको Chrome वेब स्टोर पर, इस लिंक पर "Web Server for Chrome" ऐप्लिकेशन मिल सकता है.

Chrome ऐप्लिकेशन इंस्टॉल करने के बाद, आपको "फ़ोल्डर चुनें" बटन की मदद से, ऐप्लिकेशन को किसी फ़ोल्डर पर ले जाना होगा. इस कोड लैब के लिए, आपको वह फ़ोल्डर चुनना चाहिए जिसमें आपने कोड लैब की उदाहरण फ़ाइलों को अनज़िप किया है.

इसके अलावा, आपको "Automatically show index.html" विकल्प पर सही का निशान लगाना चाहिए और पोर्ट को "8000" पर सेट करना चाहिए. इन बदलावों को लागू करने के लिए, आपको वेब सर्वर को रीस्टार्ट करना होगा.

इस यूआरएल को ऐक्सेस करें:

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

अगर ऊपर दिया गया यूआरएल सही से लोड हो जाता है, तो अगले सेक्शन पर जाएं.

दूसरा विकल्प: Firebase Hosting

अगर आपको Firebase की नई स्टैटिक वेब होस्टिंग के बारे में जानना है, तो यहां दिए गए निर्देशों का पालन करके, अपनी एएमपी साइट को Firebase होस्टिंग यूआरएल पर डिप्लॉय करें.

Firebase Hosting, स्टैटिक होस्टिंग की सुविधा देने वाली कंपनी है. इसका इस्तेमाल करके, स्टैटिक वेबसाइट और उसकी ऐसेट को तुरंत डिप्लॉय और होस्ट किया जा सकता है. इनमें एचटीएमएल, सीएसएस, और JavaScript फ़ाइलें शामिल हैं. स्टैटिक कॉन्टेंट को कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) में कैश मेमोरी में सेव किया जाता है. साथ ही, दुनिया भर में मौजूद पॉइंट ऑफ़ प्रेज़ेंस (पीओपी) के साथ इसे डिलीवर किया जाता है. इससे उपयोगकर्ताओं को कम समय में कॉन्टेंट मिलता है.

आखिर में, Firebase होस्टिंग हमेशा एसएसएल के ज़रिए उपलब्ध कराई जाती है. इसलिए, यह एएमपी और वेब के लिए बहुत अच्छी है. अगर आपको सिर्फ़ एएमपी पर फ़ोकस करना है, तो इस विकल्प को अनदेखा करें.

तीसरा विकल्प: एचटीटीपी Python सर्वर

अगर Chrome का इस्तेमाल नहीं किया जाता है या Chrome एक्सटेंशन इंस्टॉल करने में समस्या आ रही है, तो कमांड-लाइन से Python का इस्तेमाल करके भी लोकल वेब सर्वर शुरू किया जा सकता है.

कमांड लाइन से Python के बिल्ट-इन एचटीटीपी सर्वर को चलाने के लिए, बस यह कमांड चलाएं:

python -m SimpleHTTPServer

इसके बाद, इस यूआरएल को ऐक्सेस करें:

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

4. एएमपी के मुख्य कॉम्पोनेंट के बारे में जानें

AMP के कॉम्पोनेंट सिस्टम की मदद से, हम अपने लेखों में कम समय में बेहतर और रिस्पॉन्सिव सुविधाएं जोड़ सकते हैं. <head> टैग में मौजूद मुख्य AMP JavaScript लाइब्रेरी में कई मुख्य कॉम्पोनेंट शामिल होते हैं:

amp-ad - विज्ञापन दिखाने के लिए कंटेनर.
amp-img - यह एचटीएमएल img टैग की जगह इस्तेमाल किया जाता है.
amp-pixel - इसका इस्तेमाल ट्रैकिंग पिक्सल के तौर पर किया जाता है, ताकि पेज व्यू की संख्या का पता लगाया जा सके.
amp-video - यह HTML5 वीडियो टैग की जगह इस्तेमाल किया जाता है.

ऊपर दिए गए सभी मुख्य कॉम्पोनेंट, एएमपी दस्तावेज़ में तुरंत इस्तेमाल किए जा सकते हैं. हमारे उदाहरण कोड में, पेज पर पहले से ही amp-img का इस्तेमाल किया गया है. साथ ही, हमने एएमपी से जुड़े बुनियादी कोडलैब में यह भी देखा कि यह एएमपी लेआउट सिस्टम से कैसे जुड़ा है. इसलिए, अगले चैप्टर में amp-ad के बारे में जानें!

5. विज्ञापन जोड़ना

आपका सैंपल article.amp.html पेज ऐसा होना चाहिए:

<!doctype html>
<html ⚡ lang=&quo>t;e<n&qu>ot;
 < head
    meta charset>=&quo<t;utf-8" /
    meta name="viewport" content="width=device-wid>th,min<imum-scale=1,initial-scale=1"

    l>ink r<el="canonical" href="/article.ht>ml&quo<t;
    link rel=&<quot;s>hortcu<t icon" href=&qu>ot;amp_favicon.png"

    titleNews Article/title

    style amp-boilerplatebody{-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{visibili<ty:vis><ible}}@k><eyframes -amp-start{f>rom{visibility:hidden}to{visibility:visible}}/stylenoscriptstyle amp-boilerplatebo<dy{-we><bkit-anim>ation<:none;-moz-anima>tion: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",
       &q<uot;nam>e&q<uot;:> &q<uot;>John <Doe&qu>ot;
     },
     &quo<t;publi>sher&<quot;: >{
     <  >"@type&<quo>t;: &quo<t>;Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type&<qu>ot;: &qu<ot;ImageObject",
         "url": "https://example.co><m/amptim>es_lo<go.jpg&q>uot<;,
  > <     > "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    /script
  /head
  body
    header
      News Site
    /header
    article
      h1Article Name/h1

      pLorem 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 के सर्च इंजन मेटा डेटा की पुष्टि करने की प्रोसेस, दोनों को पूरा करता है. अगर इस पेज को किसी समाचार वेबसाइट पर डिप्लॉय किया जाता है, तो इसे एएमपी कॉन्टेंट के लिए बनाए गए Google Search के नए कैरसेल में शामिल किया जा सकता है. इसलिए, यह हमारे काम के लिए एक बेहतरीन शुरुआती बिंदु है.

पेज में बदलाव करने से पहले, Chrome डेवलपर टूल खोलें. किसी वेबसाइट (खास तौर पर, मोबाइल पर फ़ोकस करने वाली वेबसाइट) पर काम करते समय, ब्राउज़र में टेस्टिंग करते समय मोबाइल अनुभव को सिम्युलेट करना आम तौर पर एक अच्छा विचार होता है. Chrome में Menu > More Tools > Developer Tools के ज़रिए Developer Console खोलकर, शुरू करें:

अब डेवलपर कंसोल में JavaScript आउटपुट की जांच करें. पक्का करें कि आपने कंसोल टैब चुना हो:

अब डेवलपर कंसोल में, डिवाइस सिम्युलेशन बटन पर क्लिक करें. इसे एक-दूसरे के बगल में रखे फ़ोन और टैबलेट के ज़रिए दिखाया गया है:

इसके बाद दिखने वाले मेन्यू में, डिवाइस को "Nexus 5X" पर सेट करें:

अब हम पेज पर ही काम करना शुरू कर सकते हैं. आइए, अपने एएमपी लेख में एक विज्ञापन जोड़ें!

एएमपी में मौजूद सभी विज्ञापन, amp-ad कॉम्पोनेंट का इस्तेमाल करके बनाए जाते हैं. इस कॉम्पोनेंट का इस्तेमाल करके, हम अपने विज्ञापनों को कई तरीकों से कॉन्फ़िगर कर सकते हैं. जैसे, चौड़ाई, ऊंचाई, और लेआउट मोड. हालांकि, कई विज्ञापन प्लैटफ़ॉर्म को अतिरिक्त कॉन्फ़िगरेशन की ज़रूरत होगी. जैसे, विज्ञापन नेटवर्क के लिए खाता आईडी, कौनसा विज्ञापन दिखाया जाना चाहिए या विज्ञापन को टारगेट करने के विकल्प. amp-ad के लिए, हम एचटीएमएल एट्रिब्यूट के तौर पर ज़रूरी अलग-अलग विकल्प भरते हैं.

Double Click विज्ञापन का यह उदाहरण देखें:

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

जैसा कि आप देख सकते हैं, यह बहुत आसान कॉन्फ़िगरेशन है. type एट्रिब्यूट के बारे में जानें. यह एट्रिब्यूट, amp-ad कॉम्पोनेंट को बताता है कि आपको किस विज्ञापन प्लैटफ़ॉर्म का इस्तेमाल करना है. इस मामले में, हमें Double Click का प्लैटफ़ॉर्म चाहिए था. इसलिए, टाइप की वैल्यू doubleclick थी.

data-slot एट्रिब्यूट ज़्यादा यूनीक है. amp-ad में data- से शुरू होने वाले सभी एट्रिब्यूट, वेंडर के हिसाब से तय किए गए एट्रिब्यूट होते हैं. इसका मतलब है कि सभी वेंडर के लिए इस एट्रिब्यूट की वैल्यू देना ज़रूरी नहीं है. साथ ही, वैल्यू देने पर वे इस पर प्रतिक्रिया दें, यह भी ज़रूरी नहीं है. उदाहरण के लिए, ऊपर दिए गए Double Click के उदाहरण की तुलना, A9 प्लैटफ़ॉर्म के टेस्ट विज्ञापन से करें:

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

ऊपर दिए गए दोनों उदाहरणों को, <header> टैग के ठीक बाद अपने लेख में जोड़ें. पेज को रीफ़्रेश करें. इसके बाद, आपको दो टेस्टिंग विज्ञापन दिखेंगे:

आइए, DoubleClick के साथ इस्तेमाल किए जा सकने वाले कुछ और विकल्पों के बारे में जानें. अपने पेज पर, जियोटारगेटिंग वाले इन दो विज्ञापन कॉन्फ़िगरेशन को जोड़ें:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot>=&q<uot;/3509635>3/amptesting/geo/uk"
  div fallbackNo ad appeared <beca>u<se you&>#3<9;re not browsing from the UK!/div
/amp-ad

amp-ad
  width="300"
  height="250">;
 < type=">doubleclick"
  data-slot="/35096353/amptestin<g/ge>o</us&quo>t;
  div fallbackNo ad appeared because you're not browsing from the US!/div
/amp-ad

माफ़ करें, पेज के कोड से ही जियोटारगेटिंग को कंट्रोल नहीं किया जा सकता. हालांकि, इन टेस्ट विज्ञापनों को DoubleClick डैशबोर्ड में पहले ही कॉन्फ़िगर कर दिया गया है, ताकि ये सिर्फ़ कुछ देशों में दिखें. खास तौर पर, यूनाइटेड किंगडम और अमेरिका में.

पेज को रीफ़्रेश करें और देखें. यह स्क्रीनशॉट ऑस्ट्रेलिया से लिया गया है. इसलिए, कोई भी विज्ञापन लोड नहीं हो रहा है:

ऊपर दिए गए जियोटारगेटिंग के उदाहरण से पता चलता है कि एएमपी-विज्ञापन, सभी तरह के विज्ञापन प्लैटफ़ॉर्म की सुविधाओं के लिए काफ़ी फ़्लेक्सिबल है.

ध्यान दें: आपको दिख सकता है कि इन amp-ad टैग के अंदर, फ़ॉलबैक नाम वाले एट्रिब्यूट के साथ कुछ और div टैग मौजूद हैं. क्या आपको पता है कि फ़ॉलबैक एट्रिब्यूट क्या दिखाता है? यह एएमपी के लोडिंग सिस्टम को यह सूचना देता है कि पैरंट एलिमेंट के लोड न होने पर, सिर्फ़ उस एलिमेंट का कॉन्टेंट दिखाया जाए. इसका मतलब है कि पैरंट एलिमेंट, चाइल्ड एलिमेंट पर वापस आ जाता है. इसलिए, इसे ‘फ़ॉलबैक' कहा जाता है.

फ़िलहाल, इन विज्ञापन नेटवर्क कंपनियों के विज्ञापन दिखाए जा सकते हैं:

विज्ञापन दिखाने वाले नए प्लैटफ़ॉर्म के बारे में जानने के लिए, AMP Ad कॉम्पोनेंट का दस्तावेज़ पेज देखें.

अगले चैप्टर में, हम एएमपी के ज़्यादा बेहतर कॉम्पोनेंट के बारे में जानेंगे. साथ ही, उन्हें एएमपी दस्तावेज़ों में शामिल करने का तरीका जानेंगे.

6. एक्सटेंडेड कॉम्पोनेंट की मदद से कॉन्टेंट को बड़ा करना

अब आपके पास टेक्स्ट, इमेज, और पेज पर एम्बेड किए गए विज्ञापन के साथ एक बुनियादी एएमपी दस्तावेज़ है. ये सभी, कहानी बताने और अपने कॉन्टेंट से कमाई करने के लिए ज़रूरी हैं. हालांकि, आधुनिक वेबसाइटों में सिर्फ़ फ़ोटो और टेक्स्ट के अलावा, कई अन्य सुविधाएं भी शामिल होती हैं.

इसलिए, आइए अपने एएमपी दस्तावेज़ को अगले लेवल पर ले जाएं और जानें कि पहले बताए गए मुख्य कॉम्पोनेंट के अलावा, कौनसे कॉम्पोनेंट उपलब्ध हैं.

इस चैप्टर में, हम वेब की कुछ ऐसी बेहतर सुविधाएं जोड़ने की कोशिश करेंगे जो आम तौर पर समाचार लेखों में मिलती हैं:

YouTube वीडियो
ट्वीट
लेख में शामिल कोटेशन

YouTube वीडियो एम्बेड करना

आइए, दस्तावेज़ में YouTube वीडियो एम्बेड करके देखते हैं. यहां दिया गया कोड, वीडियो को एम्बेड करेगा और उसे आपके पेज में जोड़ देगा:

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width=>&qu<ot;480">
  he<i>ght="270"
  div fall<ba>ck
<    >p<The video co>uld not be loaded./p
  /div
/amp-youtube

पेज को रीफ़्रेश करें और पेज देखें. आपको वीडियो की जगह यह टेक्स्ट दिखेगा: "वीडियो लोड नहीं किया जा सका."

अगर आपका ब्राउज़र बिना किसी समस्या के YouTube वीडियो दिखा सकता है, तब भी आपको यह गड़बड़ी दिखेगी. क्यों? वीडियो लोड नहीं हुआ है, बल्कि कॉम्पोनेंट लोड नहीं हुआ है.

ध्यान रखें कि सभी कॉम्पोनेंट, एएमपी लाइब्रेरी की मुख्य JavaScript फ़ाइल में शामिल नहीं होते हैं. हमें खास तौर पर YouTube कॉम्पोनेंट के लिए, एक और JavaScript अनुरोध शामिल करना होगा. कोर सेट को छोड़कर, सभी कॉम्पोनेंट के लिए JavaScript के इन अतिरिक्त रेफ़रंस की ज़रूरत होगी.

<head> टैग में यह अनुरोध जोड़ें:

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

पेज को रीफ़्रेश करें. इसके बाद, आपको YouTube वीडियो दिखेगा:

हमने एक बार फिर वीडियो की चौड़ाई और ऊंचाई तय की है, ताकि एएमपी लेआउट सिस्टम, आसपेक्ट रेशियो का हिसाब लगा सके. इसके अलावा, लेआउट टाइप को रिस्पॉन्सिव पर सेट किया गया है. इसका मतलब है कि यह वीडियो, अपने पैरंट एलिमेंट की पूरी चौड़ाई में दिखेगा.

YouTube कॉम्पोनेंट के बारे में ज़्यादा जानें.

ध्यान दें: YouTube कॉम्पोनेंट के अलावा, एएमपी में एक सामान्य एचटीएमएल5 वीडियो कॉम्पोनेंट भी शामिल है. इसे amp-video नाम दिया गया है. साथ ही, इसमें Brightcove Video Cloud या Perform प्लेयर के लिए एक एएमपी कॉम्पोनेंट भी शामिल है. इसे amp-brightcove नाम दिया गया है. Facebook वीडियो, Instagram, Vine, Twitter, और Dailymotion जैसे वीडियो चलाने के ज़्यादा उदाहरणों के लिए, " AMP By Example" देखें.

कोई ट्वीट दिखाना

खबरों वाले लेखों में, Twitter से पहले से फ़ॉर्मैट किए गए ट्वीट एम्बेड करना एक सामान्य सुविधा है. AMP Twitter कॉम्पोनेंट, इस सुविधा को आसानी से उपलब्ध करा सकता है.

अपने दस्तावेज़ के <head> टैग में, यहां दिया गया JavaScript अनुरोध जोड़ें:

<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"
  dat>a<-tweetid=&qu>ot;638793490521001985"
/amp-twitter

data-tweetid एट्रिब्यूट, कस्टम एट्रिब्यूट का एक और उदाहरण है. यह किसी प्लैटफ़ॉर्म वेंडर के लिए ज़रूरी होता है. इस मामले में, Twitter data-tweetid एट्रिब्यूट को पेज में एम्बेड किए जाने वाले किसी खास ट्वीट के तौर पर पहचानता है.

अपने ब्राउज़र को रीफ़्रेश करें और पेज देखें. आपको यह ट्वीट दिखेगा:

Twitter कॉम्पोनेंट के बारे में ज़्यादा जानें.

किसी लेख के उद्धरण को हाइलाइट करना

समाचार लेखों में, लेख के खास तौर पर दिलचस्प टेक्स्ट स्निपेट को हाइलाइट करना एक सामान्य बात है. उदाहरण के लिए, किसी खास सोर्स से लिए गए कोटेशन या किसी अहम तथ्य को बड़े फ़ॉन्ट में दोहराया जा सकता है, ताकि पढ़ने वाले का ध्यान खींचा जा सके.

हालांकि, यह ज़रूरी नहीं है कि सभी कोटेशन या टेक्स्ट के स्निपेट में स्ट्रिंग वर्णों की लंबाई एक जैसी हो. इसलिए, बड़े फ़ॉन्ट साइज़ को उस जगह के हिसाब से बैलेंस करना मुश्किल हो सकता है जहां टेक्स्ट को पेज पर दिखाया जाएगा.

एएमपी में, इस तरह की स्थिति के लिए एक और कॉम्पोनेंट शामिल है. इसे amp-fit-text कहा जाता है. इसकी मदद से, किसी एलिमेंट की चौड़ाई और ऊंचाई तय की जा सकती है. साथ ही, फ़ॉन्ट का ज़्यादा से ज़्यादा साइज़ तय किया जा सकता है. यह कॉम्पोनेंट, कोटेशन के टेक्स्ट को उपलब्ध चौड़ाई और ऊंचाई में फ़िट करने के लिए, फ़ॉन्ट के साइज़ को अपने-आप बदलता है.

चलिए, मैं कोशिश करती हूँ। सबसे पहले, कॉम्पोनेंट की लाइब्रेरी को <head> टैग में जोड़ें:

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

अपने पेज पर यह जोड़ें:

<amp-fit-text width="400" height="75" layout="respo>nsive" max-font-size="42&quo<t;
  Big, bol>d article quote goes here.
/amp-fit-text

पेज को रीफ़्रेश करें और नतीजा देखें!

अब और एक्सपेरिमेंट करें. अगर कोटेशन बहुत छोटा हो, तो क्या होगा?

<amp-fit-text width="400" height="75" layout="respo>nsive&quo<t; max-font-s>ize="42"
  #YOLO
/amp-fit-text

या क्या आपको लंबा कोटेशन चाहिए?

<amp-fit-text width="400" height="75" layout="respo>nsive" 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 fl<oating on the> floor. Shall be lifted—nevermore!
/amp-fit-text

amp-fit-text के साथ आखिरी एक्सपेरिमेंट के तौर पर, #YOLO जैसा छोटा टेक्स्ट बनाएं. इसकी ऊंचाई बहुत ज़्यादा होनी चाहिए. उदाहरण के लिए, वैल्यू 400 और max-font-size एट्रिब्यूट की वैल्यू 42 होनी चाहिए. नतीजे के तौर पर मिलने वाला पेज कैसा दिखेगा? क्या टेक्स्ट को वर्टिकल तौर पर बीच में रखा जाता है या amp-fit-text टैग की ऊंचाई को कम करके, फ़ॉन्ट के ज़्यादा से ज़्यादा साइज़ के हिसाब से सेट किया जाता है? आपको एएमपी के लेआउट सिस्टम के बारे में जो भी जानकारी है उसका इस्तेमाल करके, दस्तावेज़ में बदलाव करने से पहले सवाल का जवाब देने की कोशिश करें!

7. ज़्यादा जानकारी वाले कैरसेल

वेब डेवलपमेंट में, कैरसेल एक और सामान्य सुविधा है. एएमपी में एक सामान्य कॉम्पोनेंट शामिल होता है, जिसे इस ज़रूरत को पूरा करने के लिए डिज़ाइन किया गया है. आइए, एक आसान उदाहरण से शुरू करते हैं. जैसे, इमेज का कैरसेल.

अपने दस्तावेज़ के <head> टैग में यह JavaScript अनुरोध जोड़कर, कैरसेल कॉम्पोनेंट लाइब्रेरी को शामिल करना न भूलें:

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

इसके बाद, हम इमेज का एक सामान्य कैरसेल एम्बेड करेंगे. इसमें रिस्पॉन्सिव लेआउट होगा. साथ ही, इसकी चौड़ाई और ऊंचाई पहले से तय होगी. अपने पेज पर यह जोड़ें:

<amp-carousel layout="fixed-height" height="168&qu>ot;< type="carousel" 
  amp-img src="mounta><ins-1.jp>g&q<uot; width="300" height="168"/amp-><img
  am>p-i<mg src="mountains-2.jpg" width="300&quo><t; heigh>t<="168&qu>ot;/amp-img
  amp-img src="mountains-3.jpg" width="300" height="168"/amp-img
/amp-carousel

अपने पेज को रीफ़्रेश करें. इसके बाद, आपको अपने पेज पर एक कैरसेल दिखेगा:

कैरोसेल कॉम्पोनेंट को कई तरह से कॉन्फ़िगर किया जा सकता है. टाइप को slides में बदलकर देखें और नतीजे देखें. amp-carousel एट्रिब्यूट की वैल्यू को responsive पर सेट करना न भूलें. साथ ही, amp-carousel एट्रिब्यूट में मौजूद इमेज के लिए भी layout एट्रिब्यूट की वैल्यू को responsive पर सेट करें.

अब आपको स्क्रोल करने वाली एलिमेंट की सूची के बजाय, एक बार में एक एलिमेंट दिखेगा. एक एलिमेंट से दूसरे एलिमेंट पर जाने के लिए, हॉरिज़ॉन्टल तरीके से स्वाइप करें. तीसरे एलिमेंट पर स्वाइप करने के बाद, आगे स्वाइप नहीं किया जा सकेगा.

इसके बाद, loop एट्रिब्यूट जोड़ें. पेज को रीफ़्रेश करें और तुरंत बाईं ओर स्वाइप करें. कैरसेल लगातार लूप होता रहता है.

आखिर में, इस कैरसेल को हर दो सेकंड में अपने-आप चलने के लिए सेट करते हैं. पेज में autoplay एट्रिब्यूट जोड़ें. साथ ही, डिले एट्रिब्यूट को 2000 की वैल्यू के साथ इस तरह जोड़ें: delay="2000".

आपका फ़ाइनल नतीजा कुछ ऐसा दिखना चाहिए:

<amp-carousel layout="responsive" width="300" height="168" 
         type=">;sl<ides" autoplay delay="2000" loop
  amp-img src="mounta><ins-1.jp>g&q<uot; width="300" height="168" layout="responsive&><quot;/am>p-i<mg
  amp-img src="mountains-2.jpg" width="300" height=><"16>8<" layout>="responsive"/amp-img
  amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"/amp-img
/amp-carousel

पेज को रीफ़्रेश करें और इसे आज़माएं!

ध्यान दें: आपने देखा होगा कि हम कैरसेल में लेआउट टाइप fixed-height का इस्तेमाल कर रहे हैं. carousel टाइप के लिए इसकी ज़रूरत होती है, जबकि slides टाइप के लिए responsive लेआउट टाइप की ज़रूरत होती है. फ़िक्स्ड-हाइट वाले एलिमेंट, उपलब्ध जगह का इस्तेमाल करते हैं. हालांकि, इनकी ऊंचाई में कोई बदलाव नहीं होता. fixed-height के काम करने के लिए, ऊंचाई एट्रिब्यूट की वैल्यू तय होनी चाहिए. साथ ही, चौड़ाई एट्रिब्यूट मौजूद नहीं होना चाहिए या उसे 'अपने-आप' पर सेट होना चाहिए.

इमेज कैरसेल बहुत अच्छे होते हैं, लेकिन अगर हमें अपने कैरसेल में ज़्यादा जटिल कॉन्टेंट दिखाना हो, तो क्या होगा? आइए, एक ही कैरसेल में विज्ञापन, कुछ टेक्स्ट, और इमेज को एक साथ रखकर देखते हैं. क्या amp-carousel एक साथ इस तरह के सभी कॉन्टेंट को मैनेज कर सकता है? ज़रूर.

सबसे पहले, पेज में इस स्टाइल को जोड़ें, ताकि यह पक्का किया जा सके कि amp-fit-text और amp-carousel कॉम्पोनेंट एक साथ सुरक्षित तरीके से काम कर रहे हैं:

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

अब अपने पेज में यह कैरसेल कोड डालें:

<amp-carousel layout="fixed-height" height="250&qu>ot; t<ype="carousel" 
    amp-img src="blocky-mounta><ins-1.jp>g"<; width="300" height="250"/amp-img

    amp-ad width="300" height="250&qu>ot;
     < type="dou>bleclick"
      data-slo<t=&q>uot;/<3509635>3/ampt<esting/image/static"
        div placeholderThi>s advert is still loading./div
    /amp-ad

    <amp-fit-text >w<idth="30>0" height="250" layout="fixed"
        Big, bold article quote goes here.
    /amp-fit-text
/amp-carousel

पेज को रीफ़्रेश करें. इसके बाद, आपको कुछ ऐसा दिखेगा:

कैरसेल कॉम्पोनेंट के बारे में ज़्यादा जानें.

ध्यान दें: हमारे पिछले उदाहरण में, आपने देखा होगा कि amp-ad कॉम्पोनेंट में placeholder एट्रिब्यूट वाला चाइल्ड div एलिमेंट शामिल है. आपको याद होगा कि हमने कोडलैब में पहले भी fallback सिस्टम के साथ amp-ad का ऐसा ही उदाहरण देखा था. प्लेसहोल्डर और फ़ॉलबैक में क्या अंतर है? Fallback एलिमेंट तब दिखते हैं, जब पैरंट एलिमेंट लोड नहीं हो पाता. इसका मतलब है कि कोई विज्ञापन उपलब्ध नहीं था. वहीं, placeholder एलिमेंट, पैरंट एलिमेंट के लोड होने के दौरान उसकी जगह पर दिखते हैं. एक तरह से, हर एट्रिब्यूट पैरंट एलिमेंट की लोडिंग प्रोसेस को बुकेंड करता है.

8. amp-analytics की मदद से ट्रैक करना

आम तौर पर, Analytics प्लैटफ़ॉर्म को वेबसाइटों में इंटिग्रेट करने के लिए, इनलाइन JavaScript स्निपेट और फ़ंक्शन कॉल का इस्तेमाल किया जाता है. इनसे ऐसे इवेंट ट्रिगर होते हैं जिन्हें Analytics सिस्टम को वापस भेज दिया जाता है. AMP, इस प्रोसेस को कई आंकड़ों के पार्टनर के लिए दोहराने के लिए, JSON कॉन्फ़िगरेशन का फ़्लेक्सिबल सिंटैक्स उपलब्ध कराता है.

यहां Google Analytics की ट्रैकिंग के लिए इस्तेमाल की जाने वाली पारंपरिक JavaScript का एक उदाहरण दिया गया है. हम इसे amp-analytics के JSON फ़ॉर्मैट में फिर से लिखेंगे. सबसे पहले, JavaScript का पारंपरिक तरीका:

<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-an><alytics>-0.1.js"/script

इसके बाद, हम कॉम्पोनेंट को इस तरह शामिल करते हैं:

<amp-analytics type="googleanaly>t<ics"
script type="ap>plication/json"
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "re<quest&q>u<ot;: "pag>eview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
/script
/amp-analytics

यह ज़्यादा मुश्किल लग सकता है, लेकिन असल में यह अलग-अलग तरह के इवेंट के बारे में बताने के लिए बहुत ही आसान फ़ॉर्मैट है. इसके अलावा, JSON फ़ॉर्मैट में, JavaScript कोड का वह हिस्सा शामिल नहीं होता जो पारंपरिक उदाहरण में होता है. अगर इसमें गलती से बदलाव कर दिया जाता है, तो समस्याएं हो सकती हैं.

JSON फ़ॉर्मैट में, ट्रिगर की कुंजी में कुंजियों का एक सेट शामिल होता है. यह सेट, उन सभी इवेंट ट्रिगर को दिखाता है जिन्हें हम ट्रैक करेंगे. उन ट्रिगर की कुंजियां, इवेंट के ब्यौरे होती हैं. उदाहरण के लिए, ऊपर दिए गए उदाहरण में "डिफ़ॉल्ट पेजव्यू". टाइटल की वैल्यू, देखे जा रहे पेज के नाम से जुड़ी होती है.

ऊपर दिए गए उदाहरण को बड़ा करके, हम "#हेडर ट्रिगर पर क्लिक करें" नाम का एक और ट्रिगर जोड़ सकते हैं:

<amp-analytics type="googleanaly>t<ics"
script type="ap>plication/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>&quot;: "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
/script
/amp-analytics

यह ट्रिगर ठीक वैसा ही है जैसा इसका नाम है. डीओएम सिलेक्टर "#header" का इस्तेमाल करके, हम "header" आईडी वाले टैग के लिए क्वेरी कर सकते हैं. साथ ही, डिवाइस पर "क्लिक किए गए" या टैप किए गए इवेंट पर, हम "examples" कैटगरी के लेबल के साथ, "clicked-header" इवेंट ऐक्शन को Analytics प्लैटफ़ॉर्म पर भेजते हैं.

अगर आपके पास कोई कस्टम ट्रैकिंग प्लैटफ़ॉर्म है जिसे आपको इंटिग्रेट करना है, तो अब भी amp-analytics का इस्तेमाल किया जा सकता है. साथ ही, ट्रैकिंग की जानकारी के लिए अपने हिसाब से यूआरएल एंडपॉइंट तय किए जा सकते हैं. amp-analytics कॉम्पोनेंट के बारे में ज़्यादा जानने के लिए, यहां क्लिक करें!

9. आपकी साइट पर नेविगेट करना

मोबाइल वेबसाइटों के लिए, साइट नेविगेशन मेन्यू को शामिल करना एक सामान्य ज़रूरत है. ये मेन्यू कई तरह के हो सकते हैं. यहां कुछ उदाहरण दिए गए हैं, जिनसे पता चलता है कि एएमपी दस्तावेज़ पर नेविगेशन कैसे दिखाया जा सकता है:

अपने होम पेज पर वापस जाएं – यह सबसे आसान विकल्प है.
कैरोसेल कॉम्पोनेंट के ज़रिए सब-हेडिंग मेन्यू.

होम पेज का लिंक

अपने उपयोगकर्ताओं को वेबसाइट के सामान्य नेविगेशन विकल्पों को ऐक्सेस करने के लिए, उन्हें वापस अपनी वेबसाइट के सामान्य इंटरफ़ेस पर भेजें!

इस एचटीएमएल लिंक को <header> टैग में जोड़कर देखें:

<header>
  <a href="homepage.>html&<quot;
    amp-img class="home-button" src="icons/home.pn><g" >wid<th>="36"<; heigh>t="36"/amp-img
  /a

  News Site
/header

इसके बाद, इस नियम को अपनी इनलाइन सीएसएस में जोड़ें:

.home-button {
  float: left;
}

अब पेज को रीफ़्रेश करें. आपको पेज के सबसे ऊपर बाएं कोने में homepage.html पर ले जाने वाला लिंक दिखेगा. इस लिंक पर क्लिक करने से आपको पता चलेगा कि यह लिंक कहीं नहीं जाता.

इस लिंक को अपनी वेबसाइट के होम पेज के यूआरएल से बदला जा सकता है. इससे आपके उपयोगकर्ता, आपकी वेबसाइट के नेविगेशन का इस्तेमाल करके, आपकी साइट के अन्य हिस्सों पर जा सकेंगे.

जैसा कि बताया गया है, यह सबसे आसान तरीका है. इसमें आपकी मौजूदा वेबसाइट के नेविगेशन का इस्तेमाल किया जाता है. इसके बाद, हम दो विकल्पों के बारे में जानेंगे.

इस समस्या को हल करने का एक और तरीका है. इसके लिए, आपको अपनी साइट के नेविगेशन मेन्यू को एएमपी दस्तावेज़ में दिखाना होगा. हम आपके पेज के छोटे से सेक्शन में कैरसेल का इस्तेमाल कर सकते हैं, ताकि साइट के हेडर के नीचे स्क्रोल करने लायक मेन्यू दिखाया जा सके.

हमें कैरसेल कॉम्पोनेंट की ज़रूरत है. इसलिए, पक्का करें कि आपने कॉम्पोनेंट के JavaScript को अपने पेज के <head> टैग में जोड़ दिया हो:

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

इस एचटीएमएल स्निपेट को अपने <header> टैग के ठीक नीचे जोड़कर देखें:

...
</header>
<div class="sub->men<u"
  amp-carousel layout="fixed-height" height=>"<;38" type=&qu>ot;carous<el>"<;
    a href=">;#example<1&>quot;<Example 1/a
    a >href="#example2&q<uo>t;Exa<mple 2/a
    a hre>f="#<ex>ample<3"Longer Name>d Example< 3>/a
  <  a href="#ex>ample4&qu<ot>;Ex<ample 4/a
   > <a hr>e<f=">;#example5"Example 5/a
    a href="#example6"Example 6/a
  /amp-carousel
/div
article
...

इसके बाद, इन नियमों को अपने इनलाइन सीएसएस में जोड़ें:

.sub-menu {
  background: black;
}

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

अब पेज को रीफ़्रेश करें. आपको लेख के टाइटल के नीचे, लिंक का मेन्यू दिखेगा. इस मेन्यू को हॉरिज़ॉन्टल तौर पर स्क्रोल किया जा सकता है, ताकि कई नेविगेशन लिंक सेव किए जा सकें.

इस सब-मेन्यू नेविगेशन की मदद से, कई लिंक सेव किए जा सकते हैं. साथ ही, इससे आपके पेज पर ज़्यादा जगह भी नहीं लगती.

10. फ़ॉन्ट जोड़ना

जैसा कि पहले बताया गया है, एएमपी दस्तावेज़ों में बाहरी स्टाइलशीट के अनुरोधों की अनुमति नहीं है. हालांकि, इस नियम का एक अपवाद है: फ़ॉन्ट.

वेब उपयोगकर्ताओं के लिए, फ़ॉन्ट लेख पढ़ने के अनुभव का एक अहम हिस्सा होते हैं. साथ ही, वेब ब्राउज़र बाहरी स्टाइलशीट के अनुरोधों के ज़रिए फ़ॉन्ट फ़ाइलें फ़ेच करते हैं. इसलिए, एएमपी में इस सुविधा को शामिल न करना ज़रूरी है.

आइए, दस्तावेज़ में Raleway फ़ॉन्ट का रेफ़रंस जोड़कर देखते हैं:

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

अब अपनी सीएसएस को अपडेट करके, उसमें Raleway का रेफ़रंस शामिल करें:

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

अपने पेज को रीफ़्रेश करें और पेज का नया लुक देखें. साथ ही, पुष्टि करने वाले व्यक्ति के आउटपुट की जांच करें. आपको पता चलेगा कि इस बाहरी अनुरोध के बारे में कोई शिकायत नहीं है.

ध्यान दें: अपने दस्तावेज़ में फ़ॉन्ट शामिल करने के लिए, किसी अन्य कॉम्पोनेंट की ज़रूरत नहीं होती. हालांकि, amp-font नाम का एक कॉम्पोनेंट मौजूद है. इसका इस्तेमाल वेब फ़ॉन्ट लोड करने के लिए नहीं किया जाता. इसके बजाय, इसका इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि कोई वेब फ़ॉन्ट लोड हुआ है या नहीं. साथ ही, ज़रूरत पड़ने पर सही तरीके से जवाब दिया जा सकता है.

इस सुविधा का इस्तेमाल करके, फ़ॉन्ट पूरी तरह से लोड होने तक अपने टेक्स्ट को छिपाया जा सकता है. इससे उपयोगकर्ता को टेक्स्ट के अस्थायी फ़ॉन्ट से असली फ़ॉन्ट में बदलने का स्नैप नहीं दिखेगा. अगर फ़ॉन्ट लोड नहीं होता है, तो आपको कुछ समय के लिए दिखने वाले फ़ॉन्ट को दिखाना चाहिए. आखिरकार, सबसे खराब स्थिति यह होगी कि उपयोगकर्ता कोई भी टेक्स्ट न पढ़ पाए! amp-font के बारे में ज़्यादा जानने के लिए, यहां जाएं.

11. बधाई हो!

आपने ऐडवांस एएमपी कोडलैब पूरा कर लिया है. साथ ही, आपने एएमपी के कई मुख्य कॉम्पोनेंट के बारे में जान लिया है!

हमें उम्मीद है कि आपको यह समझ आ गया होगा कि अलग-अलग विज्ञापन प्लैटफ़ॉर्म और आंकड़ों की सेवा देने वाली कंपनियों के साथ काम करने के लिए, amp-ad और amp-analytics का इस्तेमाल कैसे किया जा सकता है. एएमपी कॉम्पोनेंट की पूरी सूची देखना न भूलें. यहां यह सूची उपलब्ध है.

यहां कुछ और विषय और लिंक दिए गए हैं. इनसे आपको अपनी स्किल को बेहतर बनाने में मदद मिल सकती है!

AMP By Example - एएमपी कॉम्पोनेंट और कॉम्पोनेंट पैटर्न के उदाहरणों का बड़ा कैटलॉग.
Double Click विज्ञापन के उदाहरण - इसमें amp-ad के उदाहरणों का बड़ा कैटलॉग है.
पेज डिस्कवरी के बारे में पूरी जानकारी
अनुमति न दिए गए एचटीएमएल टैग
सीएसएस के प्रतिबंधित नियम और ऐनिमेशन
iFrame के बारे में ज़्यादा जानकारी
एएमपी सीडीएन
उपलब्ध एएमपी कॉम्पोनेंट की सूची