खूबसूरत, इंटरैक्टिव, कैननिकल एएमपी पेज

एएमपी की मदद से, भरोसेमंद और रिस्पॉन्सिव वेब पेज आसानी से बनाए जा सकते हैं. एएमपी से आप JavaScript का इस्तेमाल किए बिना, साइट पर सामान्य इंटरैक्शन बना सकते हैं. amp.dev वेबसाइट में पहले से डिज़ाइन किए गए, क्विक-स्टार्ट टेंप्लेट शामिल हैं.

आप क्या बनाते हैं

इस कोडलैब में, आप पूरी तरह से रिस्पॉन्सिव, इंटरैक्टिव, और खूबसूरत एएमपी पेज बना सकते हैं. इसमें कई एएमपी और #39 वर्शन की सुविधाएं और कॉम्पोनेंट शामिल होते हैं:

  • रिस्पॉन्सिव नेविगेशन
  • फ़ुल पेज हीरो कवर इमेज
  • रिस्पॉन्सिव (डिवाइस के हिसाब से आकार बदलने वाली) इमेज
  • अपने-आप चलने की सुविधा के साथ वीडियो
  • एम्बेड करता है जैसे कि Instagram
  • कार्रवाइयां और सिलेक्टर
  • amp-bind के साथ डेटा बाइंडिंग
  • amp-fx-collection और amp-animation के विज़ुअल इफ़ेक्ट

आपको क्या चाहिए

  • आधुनिक वेब ब्राउज़र
  • Node.js और टेक्स्ट एडिटर के तौर पर या CodePen या इसी तरह के किसी ऑनलाइन खेल के मैदान का ऐक्सेस
  • एचटीएमएल, सीएसएस, JavaScript, और Google Chrome डेवलपर टूल की बुनियादी जानकारी

कॉन्टेंट दिखाने के लिए टूल

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

स्थानीय रूप से कॉन्टेंट दिखाने के लिए हमारे टूल का नाम Node.js पर आधारित स्टैटिक कॉन्टेंट सर्वर उपलब्ध होगा. इसे इंस्टॉल करने के लिए, यह निर्देश चलाएं:

npm install -g serve

amp.dev से टेंप्लेट डाउनलोड करना

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

एएमपी टेंप्लेट पर जाएं और &साल के सबसे अच्छे जानवरों की तस्वीरों और टेंप्लेट के लिए &कोटेशन; सरल लेख &कोटेशन का कोड डाउनलोड करें.

टेंप्लेट कोड चलाना

ZIP फ़ाइल का कॉन्टेंट निकालें.

फ़ाइलों को स्थानीय तौर पर उपलब्ध कराने के लिए, article फ़ोल्डर में serve निर्देश चलाएं.

अपने ब्राउज़र में http://localhost:5000/templates/article.amp.html पर जाएं. serve के वर्शन के हिसाब से, पोर्ट 3000 या कोई अलग नंबर हो सकता है. सही पते के लिए कंसोल देखें.)

इस दौरान, हम Chrome DevTools खोलें और डिवाइस मोड को भी टॉगल करें.

टेंप्लेट कोड में काट-छांट करना

इस समय, हमने ##39 एएमपी पेज बनाना शुरू किया है, लेकिन इस कोडलैब का मकसद आपके सीखना और अभ्यास करना है, इसलिए...

<body></body> में मौजूद सब कुछ मिटाएं.

अब हमने एक खाली पेज छोड़ दिया है, जिसमें सिर्फ़ कुछ छोटे-मोटे बदलाव वाले कोड हैं:

इस कोडलैब के दौरान, आप इस खाली पेज में कई कॉम्पोनेंट जोड़कर, कुछ और फ़ंक्शन वाली टेंप्लेट का कुछ हिस्सा फिर से बनाएंगे.

एएमपी पेज एक एचटीएमएल पेज है. इसमें ज़्यादा टैग होते हैं और भरोसेमंद परफ़ॉर्मेंस के लिए कुछ पाबंदियां होती हैं.

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

सबसे आसान एएमपी एचटीएमएल फ़ाइल इस तरह दिखती है (कभी-कभी इसे एएमपी बॉयलरप्लेट भी कहा जाता है):

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

सेट अप के दौरान बनाए गए उस खाली पेज के कोड पर एक नज़र डालें, जिसमें यह बॉयलरप्लेट और कुछ अतिरिक्त चीज़ें शामिल हैं⁠

डिज़ाइन के बारे में एएमपी की राय नहीं है और यह खास तरह की शैली लागू नहीं करती. ज़्यादातर एएमपी कॉम्पोनेंट का स्टाइल बहुत बुनियादी होता है. अपनी पसंद के सीएसएस देने के लिए, पेज लेखकों के पास रहता है. वह #39; <style amp-custom> खेलता है.

हालांकि, एएमपी टेंप्लेट आसानी से समझे जाने वाले सीएसएस स्टाइल उपलब्ध कराते हैं. इन्हें खूबसूरती से डिज़ाइन किया गया है, क्रॉस-ब्राउज़र, और तेज़ी से शानदार एएमपी पेज बनाने में आपकी मदद करता है. आपने जो टेंप्लेट कोड डाउनलोड किया है उसमें <style amp-custom>. के इन पॉज़िटिव सीएसएस स्टाइल का इस्तेमाल किया गया है

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

हमें #Start Start यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट पेज से मदद मिलेगी, लेकिन हम इन्हें लागू करने के बारे में पूरी जानकारी हासिल करेंगे. कोडलैब के बाद के चरणों में, ऐसा करने के बहुत से मौके मिलेंगे.

रिस्पॉन्सिव नेविगेशन जोड़ना

https://ampstart.com/components#navigation पर जाएं और अपने पेज के body में रिस्पॉन्सिव मेन्यूबार को दिए गए एचटीएमएल कोड को कॉपी करें और चिपकाएं.

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

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

यह कोड सीएसएस मीडिया क्वेरी के साथ-साथ, एएमपी-साइडबार और एएमपी-अकॉर्डियन एएमपी कॉम्पोनेंट का इस्तेमाल करता है.

हीरो इमेज और शीर्षक जोड़ना

एएमपी स्टार्ट, सुंदर, रिस्पॉन्सिव हीरो इमेज और शीर्षकों के लिए, इस्तेमाल के लिए तैयार स्निपेट देता है.

https://ampstart.com/components#media पर जाएं और फ़ुल पेज हीरो के लिए मिले एचटीएमएल कोड को कॉपी करें और उसे अपने कोड में चिपकाएं. यह कोड body. में <!-- End Navbar --> comment के तुरंत बाद डाला जाता है

इमेज और शीर्षक को अभी अपडेट करें.

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

src, width, और height की अलग-अलग इमेज और शीर्षक को &कोटेशन में अपडेट करें;प्रशांत उत्तरी पश्चिम में सबसे खूबसूरत पैदल यात्रा&कोटेशन; मौजूदा <figure>...</figure> को इससे बदलकर:

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

आइए, अभी पेज पर नज़र डालें:

खास जानकारी

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

इस सेक्शन के लिए पूरा किया गया कोड यहां देखा जा सकता है: http://codepen.io/aghassimi/pen/RpRdzV

इस सेक्शन में हम रिस्पॉन्सिव पेज में इमेज, वीडियो, एम्बेड किया गया कॉन्टेंट, और कुछ टेक्स्ट जोड़ेंगे.

चलिए's से main एलिमेंट जोड़ें जो पेज के कॉन्टेंट को होस्ट करेगा. हम इसे body: के आखिर में जोड़ देंगे

<main id="content">

</main>

शीर्षक और पैराग्राफ़ जोड़ना

main में ये चीज़ें जोड़ें:

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

एएमपी सिर्फ़ एचटीएमएल है, इसलिए इस क्लास क्लास के नामों के अलावा इस कोड में कोई खास बात नहीं है. px3, mb2, और ampstart-dropcap क्या हैं? वे कहां से आ रहे हैं?

ये क्लास, एएमपी एचटीएमएल का हिस्सा नहीं हैं. एएमपी स्टार्ट टेंप्लेट, Bassss का इस्तेमाल करके कम लेवल वाली सीएसएस टूलकिट उपलब्ध कराता है और एएमपी स्टार्ट के लिए खास क्लास जोड़ता है.

इस स्निपेट में, px3 और mb2 को Basesss के हिसाब से परिभाषित किया जाता है. साथ ही, इन्हें क्रम से पैडिंग-लेफ़्ट-राइट और मार्जिन-बॉटम में बदला जाता है. ampstart-dropcap को एएमपी शुरू करता है और पैराग्राफ़ के पहले अक्षर को बड़ा करता है.

आप http://basscss.com/ और https://ampstart.com/components पर जाकर, पहले से तय की गई इन सीएसएस क्लास के लिए दस्तावेज़ देख सकते हैं.

आइए, देखें कि पेज अब कैसा दिखता है:

इमेज जोड़ना

एएमपी में रिस्पॉन्सिव पेज बनाना आसान है. कई मामलों में, एएमपी कॉम्पोनेंट को रिस्पॉन्सिव बनाना उतना ही आसान होता है जितना layout="responsive" एट्रिब्यूट जोड़ना. amp-img टैग की तरह ही, amp-img अलग-अलग व्यूपोर्ट की चौड़ाई और पिक्सल डेंसिटी के लिए अलग-अलग इमेज तय करने के लिए, srcset के साथ काम करता है.

main में amp-img जोड़ें:

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

इस कोड से, हम layout="responsive" को तय करके और width और height. देकर एक रिस्पॉन्सिव इमेज बना रहे हैं

रिस्पॉन्सिव लेआउट का इस्तेमाल करते समय मुझे चौड़ाई और ऊंचाई की जानकारी क्यों देनी चाहिए?

दो वजहें:

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

आइए, अभी पेज पर नज़र डालें:

अपने-आप चलने वाला वीडियो जोड़ना

एएमपी कई वीडियो प्लेयर के साथ काम करता है, जैसे कि YouTube और Vimeo. एएमपी के पास amp-video एक्सटेंडेड कॉम्पोनेंट के तहत HTML5 video एलिमेंट का अपना वर्शन होता है. इनमें से कुछ वीडियो प्लेयर, जिनमें amp-video और amp-youtube शामिल हैं, मोबाइल पर भी वीडियो को अपने-आप म्यूट करने की सुविधा देते हैं.

amp-img की तरह ही, layout="responsive" के अलावा amp-video भी रिस्पॉन्सिव हो सकता है

आइए हमारे पेज पर एक वीडियो अपने-आप चलाएं.

main: में एक और पैराग्राफ़ और इस amp-video एलिमेंट को जोड़ें

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

आइए एक नज़र डालें:

एम्बेड करने की सुविधा जोड़ना

एएमपी में Twitter और Instagram जैसे तीसरे पक्ष के एम्बेड किए गए कई पेजों के लिए, बढ़ाए गए कॉम्पोनेंट होते हैं. जिन एएमपी पेजों में एएमपी कॉम्पोनेंट नहीं है उनमें amp-iframe होता है.

आइए हमारे पेज पर Instagram एम्बेड जोड़ते हैं.

amp-img और amp-video से अलग, amp-instagram बिल्ट-इन कॉम्पोनेंट नहीं है. इसे इस्तेमाल करने से पहले, इसके लिए इंपोर्ट स्क्रिप्ट स्क्रिप्ट को एएमपी पेज के head में साफ़ तौर पर शामिल किया जाना चाहिए.

हम एएमपी बॉयलरप्लेट में कई इंपोर्ट स्क्रिप्ट स्क्रिप्ट टैग का इस्तेमाल करते हैं. उन्हें head टैग की शुरुआत में देखें और पक्का करें कि इंपोर्ट स्क्रिप्ट की ये लाइन शामिल हों:

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

main: में एक और पैराग्राफ़ और इस amp-instagram एलिमेंट को जोड़ें

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

आइए एक नज़र डालें:

अभी के लिए यह काफ़ी कॉन्टेंट है.

खास जानकारी

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

इस सेक्शन को पूरा करने के लिए कोड यहां देखा जा सकता है: http://codepen.io/aghassimi/pen/OpXGoa

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

हालांकि, एएमपी कस्टम JavaScript पर काम नहीं करता है, लेकिन उपयोगकर्ता की कार्रवाइयों को पाने और हैंडल करने के लिए उन्हें अब भी कई बिल्डिंग ब्लॉक दिखते हैं.

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

पहले, पक्का करें कि amp-carousel का स्क्रिप्ट टैग head में शामिल हो:

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

अब amp-carousel के लिए slides में कई इमेज वाला एक रिस्पॉन्सिव टाइप slides जोड़ें

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" पक्का करता है कि एक समय में सिर्फ़ एक इमेज दिखती है और वह उपयोगकर्ताओं को स्वाइप करने की सुविधा देता है.

कैरसेल में मौजूद इमेज के लिए हम layout="fill" का इस्तेमाल करते हैं, क्योंकि स्लाइड कैरसेल का साइज़ हमेशा चाइल्ड एलिमेंट से भर जाता है. इसलिए, किसी ऐसे लेआउट के बारे में बताने की ज़रूरत नहीं है जिसे चौड़ाई और ऊंचाई की ज़रूरत हो.

आइए इसे आज़माएं और देखें कि यह कैसा दिखता है:

1.gif

अब इन इमेज के थंबनेल के लिए, हॉरिज़ॉन्टल रूप से स्क्रोल किया जा सकने वाला कंटेनर जोड़ें. हम <amp-carousel> को फिर से इस्तेमाल करेंगे, लेकिन type="slides" के बिना और पहले से तय ऊंचाई वाले लेआउट के साथ.

पिछले amp-carousel एलिमेंट के बाद ये चीज़ें जोड़ें.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

ध्यान दें कि थंबनेल इमेज के लिए, हमने एक ही फ़ोटो के layout="fixed" और कम रिज़ॉल्यूशन वाले वर्शन का इस्तेमाल किया है.

आइए एक नज़र डालें:

जब कोई उपयोगकर्ता थंबनेल पर टैप करे, तो इमेज बदलें

ऐसा करने के लिए, हमें tap जैसे इवेंट को कार्रवाइयां से जोड़ना होगा, जैसे कि स्लाइड बदलना.

इवेंट: हम किसी एलिमेंट पर इवेंट हैंडलर इंस्टॉल करने के लिए, on एट्रिब्यूट का इस्तेमाल कर सकते हैं. साथ ही, सभी एलिमेंट पर tap इवेंट काम करता है.

कार्रवाई: amp-carousel हर goToSlide(index=INTEGER) इमेज पर एक टैप करके इवेंट के हैंडलर को कॉल कर सकता है.

अब हम इवेंट और कार्रवाई के बारे में जानते हैं, तो उन्हें एक-दूसरे से जोड़ दें.

पहले हमें स्लाइड कैरसेल को id देना होगा, ताकि हम थंबनेल पर टैप इवेंट हैंडलर से उसे देख सकें.

स्लाइड कैरसेल (पहला वाला) में id एट्रिब्यूट जोड़ने के लिए, अपना मौजूदा कोड बदलें:

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

अब हर थंबनेल की इमेज पर, इवेंट हैंडलर (on="tap:imageSlides.goToSlide(index=<slideNumber>)")"</s> इंस्टॉल करें:

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

ध्यान दें कि हमें इसे tabindex देना होगा और सुलभता के लिए ARIA role सेट करना होगा.

बस इतना ही. अब हर थंबनेल इमेज पर टैप करने से, स्लाइड कैरसेल में मौजूद उससे जुड़ी इमेज दिखती है.

2.gif

उपयोगकर्ता के टैप करने पर थंबनेल को हाइलाइट करें

क्या यह मुमकिन है? ऐसा लगता है कि टैप इवेंट हैंडलर से एलिमेंट पर कॉल करने के लिए, सीएसएस क्लास बदलने के लिए कोई कार्रवाई नहीं है. हम चुने गए थंबनेल को कैसे हाइलाइट कर सकते हैं?

बचाव के लिए <amp-selector>!

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

amp-selector क्या करता है, यह काफ़ी सरल और असरदार है:

  • amp-selector में कोई भी आर्बिट्ररी एचटीएमएल एलिमेंट या एएमपी कॉम्पोनेंट हो सकता है.
  • amp-selector का कोई भी डिसेंडेंट एलिमेंट, option=<value> एट्रिब्यूट होने पर विकल्प बन सकता है.
  • जब कोई उपयोगकर्ता किसी विकल्प पर टैप करता है, तो amp-selector उस एलिमेंट में selected एट्रिब्यूट को जोड़ देता है. साथ ही, उसे सिंगल-सिलेक्शन मोड में अन्य विकल्प एलिमेंट से हटा देता है.
  • selected एट्रिब्यूट को टारगेट करके, अपने चुने हुए सीएसएस में चुने गए एलिमेंट को स्टाइल दिया जा सकता है. इसके लिए, आपको सीएसएस एट्रिब्यूट चुनने वाला टूल इस्तेमाल करना होगा.

आइए देखें कि इससे हमें काम पूरा करने में कैसे मदद मिलती है.

amp-selector के लिए स्क्रिप्ट टैग को head में जोड़ें:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. amp-selector के थंबनेल को रैप करें
  2. option=<value> एट्रिब्यूट जोड़कर, हर थंबनेल को एक विकल्प बनाएं.
  3. selected एट्रिब्यूट जोड़कर, पहले थंबनेल को डिफ़ॉल्ट रूप से चुनें.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

अब हमें चुने गए थंबनेल को हाइलाइट करने के लिए, स्टाइल जोड़ना होगा.

एएमपी शुरू होने के बाद, छोटे बॉयलरप्लेट करने के बाद, <style amp-custom> में नीचे दी गई कस्टम सीएसएस जोड़ें:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

आइए एक नज़र डालें:

3.gif

सब ठीक लग रहा है, लेकिन क्या आपको कोई गड़बड़ी मिली?

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

अगले सेक्शन में, हम जानेंगे कि कैसे #39.

खास जानकारी

  • आपने अलग-अलग तरह के कैरसेल और उन्हें इस्तेमाल करने के तरीके के बारे में सीखा.
  • जब उपयोगकर्ता थंबनेल इमेज पर टैप करता है, तो इमेज कैरसेल में दिखने वाली स्लाइड को बदलने के लिए, आपने एएमपी कार्रवाइयों और इवेंट का इस्तेमाल किया.
  • आप amp-selector के बारे में जानते हैं. साथ ही, आप जान सकते हैं कि बेहतर इस्तेमाल के उदाहरणों को लागू करने के लिए, उसे बिल्डिंग ब्लॉक के तौर पर किस तरह इस्तेमाल किया जा सकता है.

इस सेक्शन का पूरा कोड यहां मिल सकता है: http://codepen.io/aghassimi/pen/gmMJMy

इस सेक्शन में, हम पिछले यूआरएल से इमेज गैलरी के काम करने के तरीकों को बेहतर बनाने के लिए amp-bind का इस्तेमाल करेंगे.

amp-bind? क्या है

मुख्य एएमपी कॉम्पोनेंट amp-bind की मदद से, आप डेटा बाइंडिंग और एक्सप्रेशन के साथ कस्टम इंटरैक्टिव बना सकते हैं.

amp-bind के तीन मुख्य हिस्से हैं:

  1. राज्य
  2. बाइंडिंग
  3. म्यूटेशन

State एक ऐप्लिकेशन स्टेट वैरिएबल है, जिसमें एक ही वैल्यू से लेकर जटिल डेटा स्ट्रक्चर तक, कुछ भी शामिल होता है. सभी कॉम्पोनेंट, इस शेयर किए गए वैरिएबल को पढ़ सकते हैं और उसमें लिख सकते हैं.

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

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

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

आइए, इसे काम में देखें!

पहले, हम थंबनेल इमेज पर tap इवेंट के साथ पूरी इमेज वाले स्लाइड कैरसेल को जोड़ने के लिए, एएमपी कार्रवाइयों (उदाहरण के लिए, goToSlide()) का इस्तेमाल करते थे. साथ ही, चुने गए थंबनेल को हाइलाइट करने के लिए amp-selector का इस्तेमाल करते थे.

आइए, देखें कि हम डेटा बाइंडिंग के लिए amp-bind वाले तरीके का इस्तेमाल करके, इस कोड को पूरी तरह से फिर से कैसे लागू कर सकते हैं.

हालांकि, कोडिंग शुरू करने से पहले, हम अपना तरीका डिज़ाइन करते हैं:

1. हमारा राज्य क्या है?

हमारे मामले में, बस स्लाइड की संख्या हमारे लिए एक ही मायने रखती है. इसलिए, हमारा राज्य selectedSlide है.

2. हमारी बाइंडिंग क्या हैं?

selectedSlide बदलने पर क्या बदलाव करना है?

  • पूरी इमेज वाले कैरसेल के slide को दिख रहे हैं: 
<amp-carousel [slide]="selectedSlide" ...
  • amp-selector के selected आइटम को भी बदलना होगा. इससे वह गड़बड़ी ठीक हो जाएगी जो हमने पिछले सेक्शन में की थी.
<amp-selector [selected]="selectedSlide" ...

3. हमारे बदलाव क्या हैं?

selectedSlide को कब बदलना है?

  • जब उपयोगकर्ता स्वाइप करके, पूरी इमेज वाले कैरसेल में नई स्लाइड में बदलाव करता है, तो:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • जब उपयोगकर्ता कोई थंबनेल चुनता है:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

चलिए, म्यूट करने के लिए AMP.setState का इस्तेमाल करते हैं. इसका मतलब है कि अब हमें थंबनेल पर अपने सभी on="tap:imageSlides.goToSlide(index=n)" कोड की ज़रूरत नहीं है!

आइए इसे एक साथ रखें:

amp-bind के लिए स्क्रिप्ट टैग को head में जोड़ें:

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

मौजूदा गैलरी कोड को नए तरीके से बदलें:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

इसे आज़माकर देखें. किसी थंबनेल पर टैप करें और इमेज स्लाइड बदल जाएंगी. इमेज स्लाइड को स्वाइप करें और हाइलाइट किया गया थंबनेल बदल जाएगा.

4.gif

गैलरी में टेक्स्ट जोड़ना

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

हमारी गैलरी में x&y का टेक्स्ट शामिल करें

स्लाइड कैरसेल एलिमेंट के ऊपर यह कोड जोड़ें:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

इस बार, हम एचटीएमएल एट्रिब्यूट के साथ जुड़ने के बजाय [text]= का इस्तेमाल करके किसी एलिमेंट के अंदरूनी टेक्स्ट को बाइंड करते हैं.

आइए इसे आज़माएं:

5.gif

खास जानकारी

  • आपने amp-bind के बारे में सीखा.
  • आपने इमेज गैलरी का बेहतर वर्शन लागू करने के लिए, amp-bind का इस्तेमाल किया.

इस सेक्शन को भरने के लिए पूरा कोड यहां दिया गया है: http://codepen.io/aghassimi/pen/MpeMdL

इस सेक्शन में हम'अपने पेज में ऐनिमेशन जोड़ने के लिए दो नई सुविधाओं का इस्तेमाल करेंगे.

शीर्षक में पैरालैक्स इफ़ेक्ट जोड़ें

amp-fx-collection एक एक्सटेंशन है, जो पैरलक्स जैसे प्रीसेट विज़ुअल इफ़ेक्ट का एक संग्रह देता है, जिसे एट्रिब्यूट वाले किसी भी एलिमेंट पर आसानी से चालू किया जा सकता है.

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

पैरालैक्स इफ़ेक्ट को किसी भी एचटीएमएल या एएमपी एलिमेंट में amp-fx="parallax" data-parallax-factor="<a decimal factor>" एट्रिब्यूट जोड़कर चालू किया जा सकता है.

  • एक से ज़्यादा फ़ैक्टर वैल्यू की मदद से, एलिमेंट को तेज़ी से तब स्क्रोल किया जाता है, जब उपयोगकर्ता पेज को नीचे की ओर स्क्रोल करता है.
  • जब उपयोगकर्ता पेज पर नीचे की ओर स्क्रोल करता है, तो एलिमेंट की वैल्यू 1 से कम होने पर, एलिमेंट की स्पीड कम हो जाती है.

यूआरएल को हमारे पेज के शीर्षक में 1.5 के फ़ैक्टर के साथ जोड़ें और देखें कि यह कैसा दिखता है!

amp-fx-collection के लिए स्क्रिप्ट टैग को head में जोड़ें:

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

अब, कोड में मौजूदा हेडर शीर्षक एलिमेंट ढूंढें और उसमें amp-fx="parallax" and data-parallax-factor="1.5" एट्रिब्यूट जोड़ें:

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

नतीजे पर एक नज़र डालें:

6.gif

शीर्षक अब पेज के बाकी हिस्से की तुलना में ज़्यादा तेज़ी से स्क्रोल कर रहा है. कूल!

पेज में ऐनिमेशन जोड़ना

amp-animation एक ऐसी सुविधा है जो एएमपी पेजों पर वेब ऐनिमेशन एपीआई लाती है.

इस सेक्शन में, हम कवर इमेज के लिए एक छोटा ज़ूम-इन इफ़ेक्ट बनाने के लिए amp-animation का इस्तेमाल करेंगे.

head में एएमपी-एनिमेशन के लिए स्क्रिप्ट टैग जोड़ें:

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

अब हमें अपना ऐनिमेशन और वह टारगेट एलिमेंट तय करना होगा जिस पर यह लागू होती है.

ऐनिमेशन, टॉप-लेवल amp-animation टैग में JSON के तौर पर बताए जाते हैं.

नीचे दिए गए कोड को अपने पेज के शुरुआती body टैग के ठीक नीचे डालें.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

यह कोड एक ऐनिमेशन के बारे में बताता है जो बिना किसी देरी के 30 सेकंड के लिए चलता है और इमेज को 30% बड़ा करता है.

ऐनिमेशन के खत्म होने के बाद, इमेज को ज़ूम इन रखने के लिए, हम fill को आगे बढ़ाने के बारे में बताते हैं. target उस एलिमेंट का एचटीएमएल id है जिस पर ऐनिमेशन लागू होता है.

यूआरएल को हमारे पेज के हीरो इमेज एलिमेंट में id जोड़ें, ताकि amp-animation उस पर कार्रवाई कर सके.

  1. अपने कोड में मौजूदा हीरो इमेज (layout="fixed-height" के साथ हाई रिज़ॉल्यूशन वाली इमेज) का पता लगाएं और id="heroimage" को amp-img टैग में जोड़ें.
  2. आसान बनाने के लिए, media="(min-width: 416px)" को भी मिटाएं और दूसरे कम रिज़ॉल्यूशन वाले amp-img को भी हटाएं, ताकि हमें फ़िलहाल एएमपी-एनिमेशन में कई ऐनिमेशन और मीडिया क्वेरी का सामना न करना पड़े.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

जैसा कि आपने ध्यान दिया होगा, इमेज को स्केल करने से वह अपने पैरंट के लिए ओवरफ़्लो हो जाएगा, इसलिए हमें ओवरफ़्लो को छिपाकर उसे ठीक करना होगा.

मौजूदा <style amp-custom> के आखिर में सीएसएस का यह नियम जोड़ें:

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

आइए इसे आज़माएं और देखें कि यह कैसा दिखता है:

7.gif

मामूली!

हालांकि, मैं सीएसएस की मदद से ऐसा कर सकती थी. amp-animation में क्या खास है?

इस स्थिति में यह #39; सही होता है, लेकिन amp-animation ऐसी अतिरिक्त सुविधा चालू करता है जो सिर्फ़ सीएसएस के ज़रिए हो सकता है. उदाहरण के लिए, ऐनिमेशन विज़िबिलिटी के आधार पर ट्रिगर किया जा सकता है (और साथ ही, दिखने के आधार पर भी रोका जा सकता है) या इसे एएमपी कार्रवाई से ट्रिगर किया जा सकता है. amp-animation, वेब ऐनिमेशन एपीआई पर भी आधारित है. इसमें, सीएसएस ऐनिमेशन से ज़्यादा सुविधाएं होती हैं. खास तौर पर, इसमें कंपोज़िशन की सुविधा शामिल होती है.

खास जानकारी

  • आपने amp-fx-collection की मदद से पैरालैक्स इफ़ेक्ट बनाना सीखा.
  • आपने amp-animation के बारे में सीखा.

इस सेक्शन का पूरा कोड यहां देखा जा सकता है: http://codepen.io/aghassimi/pen/OpXKzo

आपने अभी-अभी एक खूबसूरत, इंटरैक्टिव एएमपी पेज बनाया है.

आज की अपनी उपलब्धि पर एक नज़र डालकर जश्न मनाएं.

पूरे किए गए पेज का लिंक यहां दिया गया है: http://s.codepen.io/aghassimi/debug/OpXKzo

... और फ़ाइनल कोड: http://codepen.io/aghassimi/pen/OpXKzo

बिना शीर्षक वाला GIF

इस कोडलैब के लिए कोडपीएन एंट्री का संग्रह यहां देखा जा सकता है: https://codepen.io/collection/XzKmNB/

अरे, जाने से पहले...

हम यह जानना चाहते थे कि हमारा पेज, लैंडस्केप मोड में टैबलेट जैसे किसी दूसरे फ़ॉर्म फ़ैक्टर पर कैसा दिखता है.

आइए देखें:

बिना शीर्षक वाला GIF

शानदार!

आपका दिन शुभ हो.

आगे क्या होगा

यह कोडलैब सिर्फ़ एएमपी में हो रहे यूआरएल को स्क्रैच करता है. एएमपी एएमपी पेजों को बनाने में आपकी मदद करने के लिए, कई संसाधन और कोडलैब (कोड बनाना सीखना) उपलब्ध हैं:

अगर आपके पास कोई सवाल है या आपको कोई समस्या आ रही है, तो कृपया हमें एएमपी Slack चैनल पर ढूंढें या GitHub पर चर्चा, गड़बड़ी की रिपोर्ट या सुविधा के अनुरोध बनाएं.