المفاهيم المتقدمة في Accelerated Mobile Pages

1. نظرة عامة

هذا الدرس التطبيقي حول الترميز هو استمرار للمفاهيم المقدَّمة في "أساسيات Accelerated Mobile Pages". يجب أن تكون قد أكملت الدرس التطبيقي السابق قبل بدء هذا الدرس أو أن تكون على دراية بالمفاهيم الأساسية لـ AMP على الأقل.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية تعامل AMP مع الإعلانات والإحصاءات وتضمين الفيديو والإدراج في وسائل التواصل الاجتماعي ومنصّات العرض بعناصر متغيّرة للصور وغير ذلك. لتحقيق ذلك، ستستند إلى المثال الوارد في الدرس التطبيقي حول الترميز: أسس إنشاء صفحات AMP من خلال إضافة هذه الميزات عبر مكوّنات AMP المختلفة.

أهداف الدورة التعليمية

• عرض الإعلانات الصورية باستخدام amp-ad
• تضمين فيديوهات YouTube وبطاقات Twitter وعناصر نصية متجاوبة
• يمكنك إنشاء منصات عرض دوّارة تتضمّن صورًا ومجموعات من المحتوى باستخدام amp-carousel.
• أنماط التتبُّع البسيطة باستخدام amp-analytics
• طرق لإضافة عناصر التنقّل في الموقع إلى صفحتك
• طريقة عمل الخطوط مع AMP

المتطلبات

• الرمز النموذجي
• متصفّح Chrome (أو متصفّح مكافئ يمكنه فحص وحدة تحكّم JavaScript)
• ‫Python (يُفضّل الإصدار 2.7) أو إضافة Chrome 200 OK Web Server
• أداة تعديل الرموز (مثل Atom وSublime وNotepad++)

2. الحصول على الرمز النموذجي

يمكنك إما تنزيل كل الرمز النموذجي على جهاز الكمبيوتر:

تنزيل ملف Zip

...أو استنسِخ مستودع GitHub من سطر الأوامر:

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

سيتم تنزيل ملف ZIP يحتوي على عدة ملفات أمثلة لموارد وصفحة article.html البداية.

فك ضغط المجلد وانتقِل إلى الدليل من خلال سطر الأوامر على الكمبيوتر.

3- تشغيل صفحة العيّنة

لاختبار صفحتنا النموذجية، علينا الوصول إلى الملفات من خادم ويب. تتوفّر عدة طرق لإنشاء خادم ويب محلي مؤقت لأغراض الاختبار. في هذا الدرس العملي، سنقدّم تعليمات بشأن 3 خيارات متاحة:

• تطبيق Google Chrome "خادم الويب لمتصفّح Chrome": هذا هو الأسلوب المقترَح لأنه أبسط حلّ متاح ومتوافق مع جميع الأنظمة الأساسية. ملاحظة: يتطلّب هذا الأسلوب تثبيت Google Chrome.
• استضافة Firebase: خيار بديل إذا كنت مهتمًا أيضًا باستكشاف منصة استضافة الأصول الثابتة الجديدة "استضافة Firebase". يتم تفعيل بروتوكول SSL تلقائيًا.
• خادم HTTP Python محلي: يتطلّب الوصول إلى سطر الأوامر.

ملاحظة: يُنصح بشدة باستخدام HTTPS في بيئات الإنتاج. يوفّر بروتوكول HTTPS العديد من المزايا إلى جانب الأمان، بما في ذلك تحسين محركات البحث. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع هنا.

الخيار 1: Web Server for Chrome

يمكنك العثور على تطبيق "خادم الويب لمتصفّح Chrome" على هذا الرابط في "سوق Chrome الإلكتروني".

بعد تثبيت تطبيق Chrome، عليك توجيه التطبيق إلى مجلد معيّن من خلال الزر "اختيار مجلد" (Choose Folder). في هذا الدرس العملي، عليك اختيار المجلد الذي فككت فيه ضغط ملفات الأمثلة الخاصة بالدرس العملي.

بالإضافة إلى ذلك، يجب وضع علامة في المربّع بجانب الخيار "عرض index.html تلقائيًا" وضبط المنفذ على "8000". يجب إعادة تشغيل خادم الويب لتصبح هذه التغييرات سارية.

يمكنك الوصول إلى عنوان URL هذا من خلال:

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

إذا تم تحميل عنوان URL أعلاه بنجاح، يمكنك الانتقال إلى القسم التالي.

الخيار 2: استضافة Firebase

إذا كنت مهتمًا باستكشاف خدمة استضافة الويب الثابتة الجديدة من Firebase، يمكنك اتّباع التعليمات المتاحة هنا لتفعيل موقعك الإلكتروني بتنسيق AMP على عنوان URL لاستضافة Firebase.

استضافة Firebase هي مستضيف استضافة ثابت يمكنك استخدامه لتفعيل واستضافة موقع إلكتروني ثابت ومواد عرضه بسرعة، بما في ذلك ملفات HTML وCSS وJavaScript. يستفيد المستخدمون من تقليل وقت الاستجابة لأنّ المحتوى الثابت يتم تخزينه مؤقتًا في شبكة توصيل المحتوى (CDN) التي تتضمّن نقاط حضور (PoP) موزّعة في جميع أنحاء العالم.

أخيرًا، يتم دائمًا عرض "استضافة Firebase" عبر طبقة المقابس الآمنة، ما يجعلها خيارًا رائعًا لصفحات AMP والويب بشكل عام. إذا كنت مهتمًا بالتركيز على AMP فقط، يمكنك تجاهل هذا الخيار.

الخيار 3: خادم HTTP Python

إذا كنت لا تستخدم Chrome أو تواجه صعوبة في تثبيت إضافة Chrome، يمكنك أيضًا استخدام Python من سطر الأوامر لتشغيل خادم ويب محلي.

لتشغيل خادم HTTP المضمّن في Python من سطر الأوامر، ما عليك سوى تنفيذ ما يلي:

python -m SimpleHTTPServer

ويمكنك الانتقال إلى عنوان URL هذا:

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

4. التعرّف على مكوّنات AMP الأساسية

يتيح لنا نظام المكوّنات في AMP إنشاء ميزات فعّالة ومتجاوبة بسرعة في مقالاتنا بأقل جهد ممكن. تتضمّن مكتبة JavaScript الأساسية في AMP في علامة <head> عدة مكوّنات أساسية:

• amp-ad: حاوية لعرض إعلان
• amp-img: بديل لعلامة img في HTML
• ‫amp-pixel: يُستخدَم كبكسل تتبُّع لاحتساب عدد مرات مشاهدة الصفحة.
• amp-video: بديل لعلامة الفيديو HTML5

يمكن استخدام جميع المكوّنات الأساسية المذكورة أعلاه على الفور في مستند AMP. يستخدم رمز المثال amp-img في صفحتنا، وقد شرحنا كيفية ارتباطه بنظام تصميم AMP في الدرس التطبيقي حول ترميز أسس إنشاء صفحات AMP، لذا سنتناول 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". عند العمل على موقع إلكتروني (خاصةً موقع إلكتروني مخصّصًا للأجهزة الجوّالة)، من المستحسن عادةً محاكاة تجربة استخدام الأجهزة الجوّالة عند الاختبار في المتصفّح. ابدأ بفتح أدوات المطوّرين في Chrome من خلال Menu > More Tools > Developer Tools:

الآن، افحص ناتج JavaScript في "لوحة بيانات المطوّر". تأكَّد من اختيار علامة التبويب "وحدة التحكّم":

انقر الآن على زر محاكاة الجهاز في "وحدة تحكّم المطوّرين". يتم تمثيله بهاتف وجهاز لوحي موضوعَين بجانب بعضهما البعض:

في القائمة التي تظهر، اضبط الجهاز على "Nexus 5X":

يمكننا الآن البدء في العمل على الصفحة نفسها. لنحاول إضافة إعلان إلى مقالة AMP.

يتم إنشاء جميع الإعلانات في AMP باستخدام المكوّن amp-ad. باستخدام هذا المكوّن، يمكننا ضبط إعلاناتنا بعدة طرق، مثل العرض والارتفاع ووضع التنسيق. ومع ذلك، ستتطلّب العديد من المنصات الإعلانية إعدادات إضافية، مثل رقم تعريف الحساب على الشبكة الإعلانية، أو الإعلان الذي يجب عرضه، أو خيارات استهداف الإعلانات. بالنسبة إلى amp-ad، ما عليك سوى ملء الخيارات المختلفة المطلوبة كسمات HTML.

إليك مثال على إعلان Double Click:

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

كما ترى، هذا إعداد بسيط للغاية. دوِّن سمة type، فهذه السمة تُعلم مكوّن إعلان AMP بمنصة إعلانية التي تريد استخدامها. في هذه الحالة، أردنا منصة Double Click، وبالتالي كانت قيمة النوع doubleclick.

تكون السمة data-slot أكثر تميزًا. أي سمات تبدأ بـ data- في amp-ad هي سمات خاصة بالمورّد. وهذا يعني أنّه ليس بالضرورة أن يطلب جميع البائعين هذه السمة تحديدًا، وليس بالضرورة أن يتفاعلوا معها إذا تم تقديمها. على سبيل المثال، قارِن بين مثال Double Click أعلاه وإعلان اختباري من منصة 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.

لنستكشف بعض الخيارات الإضافية المتاحة للاستخدام مع Double Click. جرِّب إضافة إعدادَي الإعلانات المستهدِفة جغرافيًا التاليَين إلى صفحتك:

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

لا يمكن التحكّم في الاستهداف الجغرافي من رمز الصفحة نفسه. ومع ذلك، تمّت إعداد هذه الإعلانات التجريبية مسبقًا في لوحة بيانات "DoubleClick" لعرضها في بلدان معيّنة فقط، وتحديدًا في المملكة المتحدة والولايات المتحدة الأمريكية.

يُرجى إعادة تحميل الصفحة وإلقاء نظرة. تم أخذ لقطة الشاشة التالية من أستراليا، لذا لا يتم تحميل أي من الإعلانين:

يوضّح مثال الاستهداف الجغرافي أعلاه كيف أنّ amp-ad مرن بما يكفي لجميع أنواع ميزات المنصات الإعلانية.

ملاحظة: قد تلاحظ أنّ علامات amp-ad هذه تتضمّن علامات div إضافية تحتوي على سمة باسم fallback. هل يمكنك تخمين ما تشير إليه السمة الاحتياطية؟ يُعلم هذا العنصر نظام التحميل في AMP بأنّه يجب عرض محتوى هذا العنصر فقط عندما يتعذّر تحميل العنصر الرئيسي بنجاح. وهذا يعني أنّ العنصر الرئيسي يعتمد على العنصر الثانوي، ومن هنا جاء مصطلح "العنصر الاحتياطي".

في ما يلي شبكات المواقع الإعلانية المتاحة حاليًا:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot and Media
• Doubleclick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

يُرجى الاطّلاع على صفحة المستندات الخاصة بمكوّن إعلان AMP للحصول على معلومات حول أحدث المنصات الإعلانية المتوافقة.

في الفصل التالي، سنتعرّف على المزيد من مكوّنات AMP المتقدّمة وكيفية تضمينها في مستندات AMP.

ملاحظة: لا يُسمح بتشغيل جافا سكريبت مقدم من شبكة إعلانات في مستند AMP. وبدلاً من ذلك، يحمّل وقت تشغيل AMP إطار iframe من أصل مختلف (من خلال وضع حماية إطارات iframe) مثل مستند AMP، ويعمل على تنفيذ جافا سكريبت المقدمة من شبكة الإعلانات داخل وضع حماية إطارات iframe هذا.

ملاحظة مهمة: من المحتمل أن تتطور مواصفات amp-ad بشكل ملحوظ بمرور الوقت. وتم تصميم الأسلوب الحالي لتشغيل شكل الإعلان مبدئيًا لتتمكن من عرض الإعلان.

6. توسيع المحتوى باستخدام المكوّنات الموسّعة

أصبح لديك الآن مستند AMP أساسي يتضمّن نصًا وصورة وحتى إعلانًا مضمّنًا في الصفحة، وكلّها عناصر أساسية لسرد قصة وتحقيق الربح من المحتوى. ومع ذلك، غالبًا ما تتضمّن المواقع الإلكترونية الحديثة وظائف أكثر من مجرد صور ونصوص.

لذا، دعونا ننتقل إلى مستوى أعلى في مستند AMP ونستكشف المكوّنات المتاحة بالإضافة إلى المكوّنات الأساسية المذكورة سابقًا.

في هذا الفصل، سنحاول إضافة المزيد من وظائف الويب المتقدّمة التي يتم العثور عليها عادةً في المقالات الإخبارية:

• فيديوهات على YouTube
• مشاركات Tweet
• اقتباسات من المقالات

تضمين فيديو 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 بدون أي مشاكل، سيظلّ هذا الخطأ يظهر لك. لماذا؟ لم يتعذّر تحميل الفيديو، بل تعذّر تحميل المكوّن نفسه.

يُرجى العِلم أنّ بعض المكوّنات غير مضمّنة في ملف JavaScript الأساسي لمكتبة AMP. علينا تضمين طلب JavaScript إضافي لمكوّن YouTube على وجه الخصوص. ستتطلّب جميع المكوّنات باستثناء مجموعة أساسية مراجع JavaScript الإضافية هذه.

أضِف الطلب التالي إلى علامة <head>:

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

أعِد تحميل الصفحة وسيظهر لك فيديو على YouTube:

لقد حدّدنا مرة أخرى عرض الفيديو وارتفاعه لكي يتمكّن نظام تنسيق AMP من احتساب نسبة العرض إلى الارتفاع. بالإضافة إلى ذلك، تم ضبط نوع التنسيق على "متجاوب"، ما يعني أنّ هذا الفيديو سيملأ عرض العنصر الرئيسي.

مزيد من المعلومات حول مكوّن YouTube

ملاحظة: بالإضافة إلى مكوّن YouTube، تتضمّن AMP مكوّن فيديو عامًا بتنسيق HTML5 يحمل الاسم المناسب amp-video ومكوّن AMP مخصّصًا لمشغّل Brightcove Video Cloud أو Perform يحمل الاسم amp-brightcove. يمكنك الاطّلاع على AMP بالمثال للحصول على المزيد من الأمثلة حول تشغيل الفيديوهات، بما في ذلك فيديوهات Facebook وInstagram وVine وTwitter وDailymotion.

ملاحظة: تكون السمة الاحتياطية مفيدة لتقديم المعلومات في حال تعذّر تحميل أحد المكوّنات. ماذا يحدث إذا كان متصفّح المستخدِم لا يتوافق مع مكوّن AMP معيّن؟ من الأفضل إعلام المستخدم بسبب عدم توفّر الوظيفة، ما يساهم في تحسين تجربة المستخدم.

عرض تغريدة

يُعد تضمين تغريدات من Twitter منسَّقة مسبقًا ميزة شائعة في المقالات الإخبارية. يمكن لمكوّن Twitter في AMP توفير هذه الوظيفة بسهولة.

ابدأ بإضافة طلب JavaScript التالي إلى العلامة <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 هي مثال آخر على سمة مخصّصة يطلبها مورّد منصة معيّن. في هذه الحالة، يتعرّف Twitter على السمة data-tweetid على أنّها تتوافق مع تغريدة معيّنة سيتم تضمينها في الصفحة.

أعِد تحميل المتصفح وألقِ نظرة على الصفحة. من المفترض أن تظهر التغريدة:

مزيد من المعلومات عن مكوّن Twitter

ملاحظة: تتضمّن AMP المزيد من المكوّنات لتضمين المحتوى من الشبكات الاجتماعية. يمكنك الاطّلاع على مكوّن Instagram ومكوّن 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 مكونًا عامًا مصمّمًا لتلبية هذه الحاجة. لنبدأ بمثال بسيط، مثل لوحة عرض دوّارة للصور.

تذكَّر تضمين مكتبة مكوِّن لوحة العرض الدوّارة من خلال إضافة طلب JavaScript التالي إلى العلامة <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. أعِد تحميل الصفحة وحاوِل التمرير سريعًا إلى اليسار على الفور. تتكرّر اللوحة الدوّارة بلا حدود.

أخيرًا، لنضبط هذا العرض الدوّار على التشغيل التلقائي بمعدّل كل ثانيتَين. أضِف السمة autoplay إلى الصفحة وسمة التأخير بالقيمة 2000 على النحو التالي: delay="2000".

يجب أن تبدو النتيجة النهائية على النحو التالي:

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

أعِد تحميل الصفحة وجرِّبها.

ملاحظة: ربما لاحظت أنّنا نستخدم نوع التنسيق 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" 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 في وقت سابق من هذا الدرس التطبيقي حول الترميز باستخدام نظام fallback. ما الفرق بين العنصر النائب والعنصر الاحتياطي؟ تظهر عناصر Fallback عندما يتعذّر تحميل العنصر الرئيسي، أي إذا لم يكن هناك إعلان متاح. في المقابل، تظهر عناصر placeholder بدلاً من العنصر الرئيسي أثناء تحميله. بمعنى آخر، يحدّد كل سمة بداية ونهاية عملية تحميل العنصر الأصل.

ملاحظة مهمة: لسوء الحظ، يستخدم مكوّن إعلان AMP إطار iframe وراء الكواليس، ما قد يتعارض مع إيماءات التمرير السريع للوحة العرض الدوّارة نفسها. هذه مشكلة معروفة، وهي قيد التحقيق حاليًا.

8. التتبُّع باستخدام amp-analytics

يتم عادةً دمج منصّات الإحصاء في المواقع الإلكترونية من خلال مقتطفات JavaScript المضمّنة واستدعاءات الوظائف التي تؤدي إلى تشغيل الأحداث التي يتم إرسالها مرة أخرى إلى نظام الإحصاء. توفّر AMP بنية مرنة لإعدادات JSON من أجل تكرار هذه العملية مع العديد من شركاء التحليلات.

في ما يلي مثال على تتبُّع "إحصاءات Google" المستند إلى JavaScript التقليدي والذي سنعيد كتابته بتنسيق JSON الخاص بمكوّن amp-analytics. أولاً، نهج 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-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 مجموعة رموز JavaScript في المثال التقليدي، ما قد يؤدي إلى حدوث أخطاء في حال تعديلها عن طريق الخطأ.

في تنسيق JSON، يتضمّن مفتاح المشغّلات مجموعة من المفاتيح التي تمثّل جميع مشغّلات الأحداث التي سنتتبّعها، ومفاتيح هذه المشغّلات هي أوصاف للحدث، مثل "مشاهدة صفحة على الويب التلقائية" في المثال أعلاه. تتعلّق قيمة مفتاح العنوان باسم الصفحة التي يتم عرضها.

بتوسيع المثال أعلاه، يمكننا إضافة مشغّل آخر "click on #header trigger":

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

يعمل عامل التشغيل هذا تمامًا كما يبدو، فباستخدام أداة اختيار DOM "#header"، يمكننا البحث عن علامة تحمل المعرّف "header"، وعندما يتم "النقر" عليها أو النقر على الجهاز، نرسل إجراء حدث "clicked-header" إلى منصة الإحصاءات مع تصنيف "أمثلة".

إذا كان لديك منصة تتبُّع مخصّصة تريد دمجها، سيظلّ بإمكانك استخدام amp-analytics وتحديد نقاط نهاية عناوين URL المخصّصة لمعلومات التتبُّع. يمكنك الاطّلاع على مزيد من المعلومات عن المكوّن amp-analytics هنا.

ملاحظة: في جميع أمثلة الإحصاءات هذه، يجب استبدال "UA-YYYY-Y" برمز تتبُّع "إحصاءات Google" الخاص بموقعك الإلكتروني.

ملاحظة: إذا كنت مهتمًا بأنظمة تتبُّع أبسط، يمكنك الاطّلاع على amp-pixel. إذا كنت تحتاج فقط إلى تتبُّع مشاهدات الصفحة، سيكون هذا الحل أخف وزنًا من amp-analytics لأنّه يهدف فقط إلى تلبية متطلبات تتبُّع وحدات البكسل التقليدية. مزيد من المعلومات هنا

ملاحظة مهمة: لا يزال مكوّن الإحصاءات قيد التطوير. مع تطوّر مكوّن amp-analytics، ستنضم المزيد من منصات الإحصاءات وسيتم تتبُّع المزيد من أنواع الأحداث. للاطّلاع على أحدث المعلومات، يُرجى قراءة المستند المرجعي.

9. التنقّل في موقعك الإلكتروني

من المتطلبات الشائعة للمواقع الإلكترونية المتوافقة مع الأجهزة الجوّالة تضمين قائمة تنقّل في الموقع. يمكن أن تتخذ هذه القوائم أشكالاً مختلفة. في ما يلي بعض الأمثلة على كيفية عرض عناصر التنقّل في مستند AMP:

1. إضافة رابط يؤدي إلى صفحتك الرئيسية، وهو الخيار الأبسط
2. قائمة عناوين فرعية من خلال مكوّن منصّة العرض الدوّارة

رابط الصفحة الرئيسية

إنّ أبسط طريقة لإتاحة خيارات التنقّل العادية في موقعك الإلكتروني للمستخدمين هي إعادة توجيههم إلى واجهة موقعك الإلكتروني العادية.

جرِّب إضافة رابط HTML هذا إلى العلامة <header>:

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

  News Site
</header>

وأضِف هذه القاعدة إلى CSS المضمّن:

.home-button {
  float: left;
}

الآن، أعِد تحميل الصفحة. من المفترض أن يظهر لك رابط في أعلى يمين الصفحة يشير إلى homepage.html، وإذا نقرت على هذا الرابط، ستلاحظ سريعًا أنّه لا يؤدي إلى أي مكان.

يمكن استبدال هذا الرابط بعنوان URL الخاص بالصفحة الرئيسية لموقعك الإلكتروني لتمكين المستخدمين من الانتقال إلى أجزاء أخرى من موقعك الإلكتروني من خلال شريط التنقّل العادي لموقعك الإلكتروني.

كما ذكرنا، هذه هي أبسط طريقة متاحة، وهي تستفيد من ميزة التنقّل الحالية في موقعك الإلكتروني. بعد ذلك، سنستكشف بديلَين.

قائمة العناوين الفرعية

هناك طريقة أخرى لحلّ هذه المشكلة وهي عرض قائمة التنقّل في موقعك الإلكتروني داخل مستند AMP. لإبقاء المحتوى محصورًا في قسم صغير من صفحتك، يمكننا استخدام لوحة عرض دوّارة لعرض قائمة قابلة للتمرير أسفل عنوان الموقع الإلكتروني.

بما أنّنا نحتاج إلى مكوّن لوحة العرض الدوّارة، احرص على إضافة JavaScript الخاص بالمكوّن إلى العلامة <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 بالمثال: كتالوج شامل لأمثلة على مكوّنات AMP وأنماط المكوّنات
• أمثلة على إعلانات النقر المزدوج: فهرس شامل لأمثلة amp-ad.
• كل ما يهمّك عن ميزة "اقتراحات الصفحات"
• علامات HTML غير مسموح بها
• قواعد CSS والرسوم المتحركة المحظورة
• مزيد من المعلومات عن إطارات iframe
• شبكة توصيل المحتوى (CDN) من AMP
• قائمة بمكوّنات AMP المتاحة