مفاهیم پیشرفته صفحات موبایل تسریع شده

1. بررسی اجمالی

این Codelab ادامه مفاهیم معرفی شده در Accelerated Mobile Pages Foundations است. شما باید قبل از شروع این آزمایشگاه، آزمایشگاه کد قبلی را تکمیل کرده باشید یا حداقل از قبل مفاهیم اصلی AMP را درک کرده باشید.

در این لبه کد، خواهید آموخت که چگونه AMP با تبلیغات، تجزیه و تحلیل، جاسازی ویدیو، ادغام رسانه های اجتماعی، چرخ و فلک های تصویر و موارد دیگر مدیریت می کند. برای دستیابی به این هدف، با افزودن این ویژگی‌ها از طریق اجزای مختلف AMP، از نمونه‌ای از Codelab Foundations استفاده می‌کنید.

چیزی که یاد خواهید گرفت

• نمایش تبلیغات با amp-ad.
• فیلم های یوتیوب، کارت های توییتر و عناصر متنی پاسخگو را جاسازی کنید.
• ساخت چرخ فلک با تصاویر و ترکیبی از محتوا با استفاده از amp-carousel.
• الگوهای ردیابی ساده با آمپر تجزیه و تحلیل.
• راه هایی برای افزودن ناوبری سایت به صفحه شما
• نحوه کار فونت ها با AMP

آنچه شما نیاز دارید

• کد نمونه
• کروم (یا یک مرورگر معادل که می تواند کنسول جاوا اسکریپت را بازرسی کند)
• Python (ترجیحاً 2.7) یا افزونه Chrome 200 OK Web Server
• ویرایشگر کد (به عنوان مثال Atom، Sublime، Notepad++)

2. کد نمونه را دریافت کنید

می توانید تمام کد نمونه را در رایانه خود بارگیری کنید:

دانلود فایل فشرده

... یا مخزن GitHub را از خط فرمان کلون کنید:

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

شما یک فایل ZIP حاوی چندین فایل نمونه منابع و صفحه شروع article.html را دانلود خواهید کرد.

پوشه را از حالت فشرده خارج کرده و از طریق خط فرمان روی رایانه خود به دایرکتوری بروید.

3. صفحه نمونه را اجرا کنید

برای آزمایش صفحه نمونه خود باید به فایل ها از یک وب سرور دسترسی داشته باشیم. راه های مختلفی برای ایجاد یک وب سرور محلی موقت به منظور آزمایش وجود دارد. برای این آزمایشگاه کد، دستورالعمل‌هایی را برای 3 گزینه موجود ارائه می‌کنیم:

• برنامه Google Chrome "Web Server for Chrome" - این رویکرد توصیه شده است زیرا ساده ترین و چند پلت فرم راه حل موجود است. توجه: این روش نیاز به نصب Google Chrome دارد.
• میزبانی Firebase - یک گزینه جایگزین اگر شما نیز علاقه مند به کاوش در پلت فرم جدید میزبانی دارایی ثابت ما "Hosting Firebase" هستید. SSL به طور پیش فرض فعال است.
• یک سرور محلی HTTP Python - به دسترسی به خط فرمان نیاز دارد.

توجه : اکیداً توصیه می شود که از HTTPS در محیط های تولیدی استفاده شود. HTTPS مزایای زیادی فراتر از امنیت از جمله SEO دارد. در اینجا می توانید اطلاعات بیشتری در مورد این موضوع بخوانید.

گزینه شماره 1: وب سرور برای کروم

می‌توانید برنامه «Web Server for Chrome» را در این پیوند در فروشگاه وب Chrome پیدا کنید.

پس از نصب برنامه Chrome، باید برنامه را از طریق دکمه "انتخاب پوشه" به یک پوشه خاص هدایت کنید. برای این آزمایشگاه کد باید پوشه ای را که فایل های نمونه آزمایشگاه کد را از حالت فشرده خارج کرده اید انتخاب کنید.

علاوه بر این باید گزینه "Automatically show index.html" را علامت بزنید و پورت را روی "8000" تنظیم کنید. برای اعمال این تغییرات باید وب سرور را مجددا راه اندازی کنید.

دسترسی به این URL از طریق:

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

اگر URL بالا با موفقیت بارگیری شد، می توانید به بخش بعدی بروید.

گزینه شماره 2: میزبانی Firebase

اگر علاقه مند به کاوش در میزبانی وب استاتیک Firebase هستید، می توانید دستورالعمل های موجود در اینجا را دنبال کنید تا سایت AMP خود را در URL میزبانی Firebase مستقر کنید.

Firebase Hosting یک ارائه دهنده میزبانی ثابت است که می توانید از آن برای استقرار و میزبانی سریع یک وب سایت ثابت و دارایی های آن استفاده کنید. از جمله فایل های HTML، CSS و جاوا اسکریپت. کاربران از تأخیر کمتر بهره می برند زیرا محتوای استاتیک در یک شبکه تحویل محتوا (CDN) با نقاط حضور (PoP) در سراسر جهان ذخیره می شود.

در نهایت، میزبانی Firebase همیشه از طریق SSL ارائه می شود، بنابراین برای AMP و وب به طور کلی عالی است. اگر بیشتر به تمرکز صرف بر روی AMP علاقه دارید، به سادگی این گزینه را نادیده بگیرید.

گزینه شماره 3: سرور پایتون HTTP

اگر از کروم استفاده نمی‌کنید یا برای نصب افزونه کروم مشکل دارید، می‌توانید از پایتون نیز از خط فرمان برای راه‌اندازی یک وب سرور محلی استفاده کنید.

برای اجرای سرور HTTP داخلی پایتون از خط فرمان، به سادگی موارد زیر را اجرا کنید:

python -m SimpleHTTPServer

و به این آدرس اینترنتی دسترسی پیدا کنید:

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

4. اجزای اصلی AMP را یاد بگیرید

سیستم مؤلفه AMP به ما این امکان را می دهد که با کمترین تلاش، به سرعت ویژگی های کارآمد و پاسخگو را در مقالات خود ایجاد کنیم. کتابخانه اصلی AMP JavaScript در تگ <head> شامل چندین مؤلفه اصلی است:

• amp-ad - ظرفی برای نمایش آگهی.
• amp-img - جایگزینی برای برچسب img HTML.
• amp-pixel - به عنوان پیکسل ردیابی برای شمارش بازدیدهای صفحه استفاده می شود.
• amp-video - جایگزینی برای برچسب ویدیوی HTML5.

تمام اجزای اصلی فوق را می توان بلافاصله در یک سند AMP استفاده کرد. کد مثال ما قبلاً از amp-img در صفحه ما استفاده می کند و ما نحوه ارتباط آن را با سیستم طرح بندی AMP در آزمایشگاه کد AMP Foundations بررسی کردیم، بنابراین اجازه دهید amp-ad در فصل بعدی بررسی کنیم!

توجه : جاسازی ویدیوهای HTML5 و پیکسل‌های ردیابی از ویژگی‌های مهم در توسعه وب هستند. اگر علاقه مند به جاسازی این مؤلفه ها هستید، می توانید صفحات مرجع مربوطه آنها را اینجا و اینجا جستجو کنید.

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>

صفحه فوق یک صفحه ساده است، جالب ترین واقعیت این صفحه این است که هم اعتبارسنجی AMP و هم اعتبارسنجی متا داده موتور جستجو Schema.org را می گذراند. اگر این صفحه در یک وب‌سایت خبری مستقر می‌شد، واجد شرایط گنجاندن در چرخ فلک جدید جستجوی Google است که به محتوای AMP اختصاص داده شده است، بنابراین یک نقطه شروع عالی برای کار ما است.

قبل از اینکه صفحه را تغییر دهیم، بیایید ابزار برنامه‌نویس Chrome را باز کنیم. هنگام کار بر روی یک وب سایت (مخصوصاً یک وب سایت متمرکز بر تلفن همراه) معمولاً ایده خوبی است که یک تجربه تلفن همراه را هنگام آزمایش در مرورگر شبیه سازی کنید. با باز کردن Developer Console در Chrome از طریق Menu > More Tools > Developer Tools شروع کنید :

حال خروجی جاوا اسکریپت را در کنسول توسعه دهنده بررسی کنید. مطمئن شوید که تب Console را انتخاب کرده اید:

اکنون روی دکمه شبیه سازی دستگاه در کنسول توسعه دهنده کلیک کنید. با تلفن و تبلتی که کنار هم قرار گرفته اند نشان داده می شود:

در منوی ظاهر شده، دستگاه را روی «Nexus 5X» تنظیم کنید:

حالا می توانیم روی خود صفحه کار را شروع کنیم. بیایید سعی کنیم تبلیغی را به مقاله 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 را می‌خواستیم و بنابراین مقدار نوع آن doubleclick بود.

ویژگی data-slot منحصر به فردتر است. هر ویژگی که با data- در amp-ad شروع می شود، ویژگی های خاص فروشنده است. این بدان معنی است که همه فروشندگان لزوماً به این ویژگی خاص نیاز ندارند و در صورت ارائه آن لزوماً واکنش نشان نمی دهند. به عنوان مثال، مثال دابل کلیک بالا را با یک تبلیغ آزمایشی از پلتفرم A9 مقایسه کنید:

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

سعی کنید هر دو مثال بالا را درست بعد از تگ <header> به مقاله خود اضافه کنید . صفحه را بازخوانی کنید و باید ببینید که دو تبلیغ آزمایشی ظاهر شده است:

مهم : ممکن است برخی از خطاها در کنسول برنامه‌نویس خود داشته باشید، مانند «محتوای ترکیبی» یا «XMLHttpRequest نمی‌تواند بارگیری شود». مورد اول احتمالاً مربوط به تبلیغات A9 است زیرا همه محتوای بارگیری شده ایمن نیستند. این یک الزام قابل توجه برای همه تبلیغات ارائه شده در AMP است.

بیایید برخی از گزینه های موجود برای استفاده با دابل کلیک را بررسی کنیم. سعی کنید این دو پیکربندی تبلیغات جغرافیایی را به صفحه خود اضافه کنید :

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

متأسفانه هدف گذاری جغرافیایی از طریق کد خود صفحه قابل کنترل نیست. با این حال، این آگهی‌های آزمایشی قبلاً در داشبورد دابل کلیک پیکربندی شده‌اند تا فقط در کشورهای خاصی، به‌ویژه بریتانیا و ایالات متحده آمریکا نمایش داده شوند.

صفحه را رفرش کنید و نگاهی بیندازید. اسکرین شات زیر از استرالیا گرفته شده است، بنابراین هیچکدام از آگهی‌ها بارگیری نمی‌شوند:

مثال جغرافیایی بالا نشان می دهد که چگونه amp-ad به اندازه کافی برای همه انواع ویژگی های پلت فرم تبلیغات انعطاف پذیر است.

توجه : ممکن است متوجه شوید که در داخل این تگ‌های amp-ad تگ‌های div اضافی با یک ویژگی به نام fallback روی آن‌ها وجود دارد. آیا می توانید حدس بزنید که ویژگی بازگشتی به چه چیزی اشاره می کند؟ به سیستم بارگیری AMP اطلاع می دهد که فقط زمانی محتویات آن عنصر را نشان دهد که عنصر والد با موفقیت بارگیری نشود. به این معنی که عنصر والد بر روی عنصر فرزند قرار می گیرد - از این رو اصطلاح "بازگشت".

شبکه‌های تبلیغاتی زیر پشتیبانی می‌شوند:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• کریتئو
• نقطه و رسانه
• دابل کلیک کنید
• فلایت
• مغزهای صنعتی
• OpenX
• plista
• سرور تبلیغات هوشمند
• بازدهمو
• Revcontent
• تریپل لیفت
• Teads
• آی موبایل
• وب سایت ها

برای کسب اطلاعات در مورد آخرین پلتفرم های تبلیغاتی پشتیبانی شده، حتماً صفحه مستندات مؤلفه AMP Ad را بررسی کنید.

در فصل بعدی اجزای پیشرفته AMP و نحوه گنجاندن آنها در اسناد AMP را بررسی خواهیم کرد.

توجه : هیچ شبکه تبلیغاتی ارائه شده جاوا اسکریپت مجاز به اجرا در داخل سند AMP نیست. در عوض، زمان اجرا AMP یک iframe را از مبدأ متفاوت (از طریق iframe sandbox) به عنوان سند AMP بارگیری می‌کند و JS شبکه تبلیغاتی را در داخل آن iframe sandbox اجرا می‌کند.

مهم : مشخصات amp-ad احتمالاً در طول زمان به طور قابل توجهی تغییر می کند. رویکرد فعلی برای بوت استرپ قالب طراحی شده است تا بتواند تبلیغات را نشان دهد.

6. محتوا را با اجزای توسعه یافته گسترش دهید

در حال حاضر شما یک سند اصلی AMP با متن، یک تصویر و حتی یک تبلیغ در صفحه دارید - همه عناصر کلیدی برای گفتن یک داستان و کسب درآمد از محتوای شما. با این حال، وب‌سایت‌های مدرن اغلب دارای قابلیت‌های بیشتری نسبت به تصاویر و متن هستند.

بنابراین اجازه دهید سند 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 را بدون مشکل نشان دهد، باز هم این خطا را دریافت خواهید کرد. چرا؟ ویدیو در واقع بارگیری نشد، بلکه خود مؤلفه با شکست مواجه شد.

به یاد داشته باشید، همه مؤلفه ها در فایل جاوا اسکریپت کتابخانه هسته AMP گنجانده نشده اند. ما باید یک درخواست جاوا اسکریپت اضافی مخصوصاً برای مؤلفه YouTube اضافه کنیم. همه مؤلفه ها به جز یک مجموعه هسته به این ارجاعات اضافی جاوا اسکریپت نیاز دارند.

درخواست زیر را به تگ <head> اضافه کنید :

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

صفحه را رفرش کنید و باید ویدیوی یوتیوب را ببینید:

یک بار دیگر عرض و ارتفاع ویدیو را مشخص کرده ایم تا نسبت تصویر توسط سیستم چیدمان AMP محاسبه شود. علاوه بر این، نوع طرح‌بندی روی واکنش‌گرا تنظیم شده است، به این معنی که این ویدیو عرض عنصر اصلی خود را پر می‌کند.

درباره مؤلفه YouTube بیشتر بیاموزید.

توجه : علاوه بر مؤلفه YouTube، AMP شامل یک مؤلفه ویدیوی عمومی HTML5 به نام amp-video و یک مؤلفه AMP اختصاص داده شده به Brightcove Video Cloud یا Perform Player به نام amp-brightcove است . برای نمونه‌های بیشتر پخش ویدیو از جمله ویدیوهای Facebook، Instagram، Vine، Twitter و Dailymotion، « AMP By Example » را بررسی کنید.

توجه : ویژگی fallback برای ارائه اطلاعات در مواردی که یک مؤلفه بارگذاری نمی شود مفید است. اگر مرورگر کاربر از کامپوننت AMP خاصی پشتیبانی نکند چه؟ این یک تجربه کاربری بهتر است که کاربر را از چرایی عدم وجود عملکرد مطلع نگه دارید.

نمایش یک توییت

جاسازی توییت‌های پیش‌فرمت‌شده از توییتر یکی از ویژگی‌های رایج مقالات خبری است. جزء 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 را به عنوان مربوط به توییت خاصی که در صفحه جاسازی می شود، تشخیص می دهد.

مرورگر خود را تازه کنید و به صفحه نگاهی بیندازید. باید مشاهده کنید که توییت ظاهر می شود:

درباره مؤلفه Twitter بیشتر بیاموزید.

توجه : AMP شامل اجزای بیشتری برای جاسازی محتوا از شبکه های اجتماعی است. مؤلفه اینستاگرام و مؤلفه Vine را بررسی کنید.

یک نقل قول مقاله را برجسته کنید

یکی از عناصر رایج در مقالات خبری، برجسته کردن بخش‌های جذاب متن از مقاله است. به عنوان مثال، نقل قول از یک منبع خاص یا یک واقعیت مهم ممکن است با فونت بزرگتر تکرار شود تا توجه خواننده را جلب کند.

با این حال، از آنجایی که همه نقل‌قول‌ها یا تکه‌های متن لزوماً طول کاراکترهای رشته‌ای یکسانی ندارند، می‌توان تعادل بین اندازه فونت بزرگ‌تر و مقدار فضایی که متن خاص در صفحه مصرف می‌کند دشوار باشد.

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 با ارتفاع بسیار بزرگتر ایجاد کنید - به عنوان مثال، مقدار 400 - و مقدار ویژگی max-font-size را 42 حفظ کنید. آیا صفحه حاصل شبیه به آن خواهد بود؟ آیا متن به صورت عمودی در مرکز قرار می گیرد یا ارتفاع تگ amp-fit-text کوچک می شود تا با حداکثر اندازه فونت مطابقت داشته باشد؟ با دانستن آنچه در مورد سیستم چیدمان AMP می دانید، سعی کنید قبل از ویرایش سند به این سوال پاسخ دهید!

7. چرخ فلک های پیچیده

یکی دیگر از ویژگی های رایج در توسعه وب، چرخ فلک است. 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>

صفحه خود را رفرش کنید و باید یک چرخ فلک در صفحه خود ببینید:

جزء چرخ و فلک را می توان به روش های مختلفی پیکربندی کرد. به جای آن نوع را به slides تغییر دهید و به نتیجه نگاه کنید. حتما ویژگی layout amp-carousel و تصاویر داخل آن را نیز تغییر دهید تا responsive باشد.

اکنون به جای فهرست اسکرول عناصر، یک عنصر را در یک زمان مشاهده خواهید کرد. برای حرکت در میان عناصر ، انگشت خود را به صورت افقی بکشید. اگر انگشتتان را به عنصر سوم بکشید، دیگر نمی‌توانید تند بکشید.

بعد، ویژگی loop را اضافه کنید . صفحه را بازخوانی کنید و بلافاصله انگشت خود را به سمت چپ بکشید. چرخ فلک بی انتها حلقه می زند.

در نهایت، اجازه دهید این چرخ فلک را به صورت خودکار با سرعت هر 2 ثانیه پخش کنیم. ویژگی 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>

صفحه را رفرش کنید و به آن بچرخانید!

توجه : ممکن است متوجه شده باشید که ما از نوع طرح بندی fixed-height در چرخ فلک استفاده می کنیم. این یک نیاز از نوع carousel است در حالی که نوع slides به نوع طرح بندی responsive نیاز دارد. عناصر با ارتفاع ثابت فضای موجود را در اختیار آنها قرار می دهند اما ارتفاع را بدون تغییر نگه می دارند. ویژگی ارتفاع باید تعریف شود در حالی که ویژگی عرض نباید وجود داشته باشد یا باید روی خودکار تنظیم شود تا fixed-height کار کند.

چرخ و فلک های تصویری عالی هستند اما اگر بخواهیم محتوای پیچیده تری در چرخ فلک ما ظاهر شود چه؟ بیایید سعی کنیم با قرار دادن یک آگهی، مقداری متن و یک تصویر به طور کلی در یک چرخ فلک، همه چیز را با هم مخلوط کنیم. آیا آمپر کاروسل واقعاً می تواند چنین مخلوطی را به یکباره تحمل کند؟ شما شرط بندی کنید.

ابتدا بیایید این استایل را به صفحه اضافه کنیم تا مطمئن شویم که اجزای 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>

صفحه را رفرش کنید و چیزی شبیه به این خواهید دید:

درباره مؤلفه چرخ فلک بیشتر بیاموزید.

توجه : در آخرین مثال ما ممکن است متوجه شده باشید که مؤلفه amp-ad شامل یک عنصر div فرزند با ویژگی placeholder است. اگر به خاطر داشته باشید ما با سناریوی مشابهی با amp-ad قبلاً در Codelab با سیستم fallback مواجه شده بودیم. تفاوت بین placeholder و backback چیست؟ عناصر Fallback زمانی ظاهر می شوند که عنصر والد بارگیری نمی شود، یعنی اگر هیچ تبلیغی در دسترس نباشد. در حالی که عناصر placeholder به جای عنصر والد در حین بارگذاری ظاهر می شوند. به یک معنا، هر صفت، فرآیند بارگذاری عنصر والد را به پایان می‌رساند.

مهم : متأسفانه مؤلفه amp-ad از یک iframe در پشت صحنه استفاده می کند که می تواند با حرکات کشیدن انگشت چرخ و فلک تداخل داشته باشد. این یک موضوع شناخته شده است که در حال بررسی است.

8. با آمپر تجزیه و تحلیل

پلتفرم های تجزیه و تحلیل معمولاً از طریق قطعات جاوا اسکریپت درون خطی و فراخوانی های تابعی که رویدادهایی را که به سیستم تجزیه و تحلیل ارسال می شوند، راه اندازی می کنند، در وب سایت ها ادغام می شوند. AMP یک دستور پیکربندی JSON منعطف را برای تکرار این فرآیند برای چندین شریک تجزیه و تحلیل فراهم می کند.

در زیر نمونه‌ای از ردیابی Google Analytics سنتی مبتنی بر جاوا اسکریپت است که ما آن را در قالب JSON amp-analytic بازنویسی خواهیم کرد. ابتدا رویکرد سنتی جاوا اسکریپت:

<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 اینجا بخوانید!

توجه : در تمام این مثال‌های تحلیلی، «UA-YYYY-Y» باید با کد رهگیری Google Analytics وب سایت شما جایگزین شود.

توجه : اگر به سیستم‌های ردیابی ساده‌تر علاقه دارید، ممکن است بخواهید نگاهی به amp-pixel بیندازید. اگر فقط نیاز به ردیابی بازدیدهای صفحه دارید، راه حلی سبک تر از آمپر تحلیلی است، زیرا هدف آن تنها رفع الزامات ردیابی پیکسلی سنتی است. بیشتر در مورد آن اینجا بخوانید!

مهم : جزء تجزیه و تحلیل هنوز در حال پیشرفت است. همانطور که مولفه تجزیه و تحلیل تقویت کننده توسعه می یابد، پلتفرم های تجزیه و تحلیل بیشتری وارد بازار می شوند و انواع بیشتری از رویدادها برای ردیابی وجود خواهد داشت. برای آخرین اطلاعات سند مرجع را بخوانید.

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 اشاره می کند - اگر روی این پیوند کلیک کنید به سرعت متوجه می شوید که به جایی نمی رسد.

این پیوند را می توان با URL صفحه اصلی وب سایت شما جایگزین کرد تا کاربران شما بتوانند از طریق ناوبری معمولی وب سایت شما به قسمت های دیگر سایت شما حرکت کنند.

همانطور که گفته شد، این ساده ترین روش موجود است – استفاده از ناوبری موجود در وب سایت شما. در ادامه دو گزینه را بررسی خواهیم کرد.

منوی عنوان فرعی

روش دیگر برای حل این مشکل این است که منوی ناوبری سایت خود را در سند AMP ارائه دهید. برای حفظ بخش کوچکی از صفحه شما، می‌توانیم از یک چرخ فلک برای ارائه یک منوی قابل پیمایش در زیر هدر سایت استفاده کنیم.

از آنجایی که ما به کامپوننت چرخ فلک نیاز داریم، حتما جاوا اسکریپت جزء را به تگ <head> صفحه خود اضافه کنید :

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

سعی کنید این قطعه HTML را درست زیر تگ <header> خود اضافه کنید :

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

حالا صفحه را رفرش کنید . شما باید منویی از پیوندها را ببینید که در زیر عنوان مقاله شما ظاهر می شود. این منو را می توان به صورت افقی پیمایش کرد تا بسیاری از پیوندهای ناوبری را ذخیره کند.

این پیمایش زیر منو راهی عالی برای ذخیره تعداد زیادی لینک بدون مصرف فضای زیاد در صفحه شما است.

10. اضافه کردن فونت

همانطور که قبلاً بحث شد، هیچ درخواست شیوه نامه خارجی در اسناد AMP مجاز نیست. با این حال، یک استثنا برای این قانون وجود دارد: فونت.

فونت ها بخش مهمی از تجربه خواندن مقاله برای کاربران وب هستند و از آنجایی که مرورگرهای وب فایل های فونت را از طریق درخواست های صفحه سبک خارجی واکشی می کنند، این استثنا در AMP ضروری است.

بیایید سعی کنیم یک مرجع به فونت Raleway به سند اضافه کنیم :

<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-font وجود دارد. در واقع از آن برای بارگیری فونت های وب استفاده نمی شود، در عوض می توانید از آن برای تشخیص اینکه آیا یک فونت وب با موفقیت بارگیری شده است یا خیر استفاده کنید و در صورت لزوم به درستی پاسخ دهید.

شما می توانید از این ویژگی برای مخفی کردن متن خود استفاده کنید تا زمانی که فونت شما به طور کامل بارگذاری شود تا کاربر نبیند که متن از فونت موقت خود به فونت واقعی آن تغییر می کند. در صورتی که فونت از کار بیفتد، ممکن است بخواهید به جای آن فونت موقت را آشکار کنید. به هر حال، بدترین سناریو این است که کاربر نتواند هیچ متنی را بخواند! اطلاعات بیشتر در مورد amp-font را اینجا بخوانید.

11. تبریک!

شما آزمایشگاه کد AMP پیشرفته را به پایان رسانده اید و بسیاری از مؤلفه های کلیدی AMP را با موفقیت کاوش کرده اید!

امیدواریم برای شما روشن باشد که چگونه می توان از amp-ad و amp-analytics برای پشتیبانی از انواع پلتفرم های تبلیغاتی مختلف و فروشندگان تجزیه و تحلیل استفاده کرد. مطمئن شوید که لیست کامل اجزای AMP موجود را بررسی کنید.

در زیر برخی از موضوعات و پیوندهای اضافی وجود دارد که ممکن است بخواهید برای تقویت مهارت های خود بیشتر کشف کنید!

• AMP By Example - کاتالوگ گسترده ای از نمونه ها برای اجزای AMP و الگوهای اجزا.
• نمونه های تبلیغات دابل کلیک - کاتالوگ گسترده ای از نمونه های تبلیغات amp.
• همه چیز درباره کشف صفحه
• برچسب های HTML غیر مجاز
• قوانین و انیمیشن های CSS محدود
• اطلاعات بیشتر در مورد iFrames
• AMP CDN
• لیست اجزای AMP موجود