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

1. نظرة عامة

هذا الدرس التطبيقي حول الترميز هو استمرار للمفاهيم التي تم تقديمها في Accelerated Mobile Pages Foundations. من المفترض أن تكون قد أكملت التمرين المعملي السابق حول الترميز قبل البدء في هذا التمرين، أو أن تكون قد اكتسبت على الأقل فهمًا أساسيًا لمفاهيم AMP الأساسية.

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

المُعطيات

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

المتطلبات

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

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

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

تنزيل Zip

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

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

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

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

3- تنفيذ نموذج الصفحة

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

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

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

الخيار رقم 1: خادم الويب لمتصفح Chrome

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

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

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

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

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

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

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

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

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

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

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

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

لتشغيل خادم HTTP المضمن في بايثون من سطر الأوامر، يجب تنفيذ ما يلي:

python -m SimpleHTTPServer

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

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

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

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

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

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

انقر الآن على زر محاكاة الجهاز في Play 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 بالمنصّة الإعلانية التي تريد استخدامها. في هذه الحالة، أردنا الحصول على منصّة النقرة المزدوجة، وبالتالي كانت قيمة النوع 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> مباشرةً. إعادة تحميل الصفحة من المفترض أن يظهر لك إعلانان تجريبيان:

ملاحظة مهمة: قد تحدث بعض الأخطاء في وحدة تحكّم المطوّرين، مثل "المحتوى المختلط". أو "لا يمكن تحميل طلب XMLHttp". من المحتمل أن تكون الطريقة الأولى مرتبطة بإعلانات 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>

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

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

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

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

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

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• النقطة والوسائط
• النقر مرتان
• Flite
• العصف الذهني
• OpenX
• plista
• خادم الإعلانات الذكي
• Yieldmo
• Revcontent
• TripleLift
• التشوهات
• I-Mobile
• Webediads

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

سوف نستكشف في الفصل التالي مكونات AMP الأكثر تقدمًا وكيفية تضمينها في مستندات AMP.

ملاحظة: لا يُسمح بتشغيل JavaScript المقدّم من شبكة إعلانات داخل مستند AMP. وبدلاً من ذلك، يحمّل وقت تشغيل AMP إطار iframe من مصدر مختلف (من خلال وضع حماية إطار iframe) كمستند AMP وينفّذ JavaScript على شبكة الإعلانات داخل وضع حماية 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

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

ملاحظة: يمكن الاستفادة من السمة الاحتياطية لتقديم المعلومات في حال تعذّر تحميل أحد المكوِّنات. ماذا لو لم يكن متصفّح المستخدم متوافقًا مع مكوّن AMP معيّن؟ يؤدي ذلك إلى تحسين تجربة المستخدم لإبقاء المستخدم على علم بالسبب المحتمل لعدم اكتمال الوظائف.

عرض تغريدة

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

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

ملاحظة مهمّة: يستخدم المكوِّن amp-ad إطار iframe خلف الكواليس والذي يمكن أن يتداخل مع إيماءات التمرير السريع للوحة العرض الدوّارة نفسها. هذه مشكلة معروفة قيد التحقيق.

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

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

في ما يلي مثال على تتبُّع "إحصاءات Google" التقليدي المستند إلى JavaScript والذي سنعيد كتابته بتنسيق JSON في amp-analytic. أولاً، أسلوب 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 control" :

<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" لموقعك الإلكتروني.

ملاحظة: إذا كنت مهتمًا بأنظمة تتبُّع أبسط، يمكنك إلقاء نظرة على 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.
• كل شيء عن اكتشاف الصفحات
• علامات HTML غير المسموح بها
• قواعد CSS المفروض عليها قيود الصور المتحركة
• مزيد من المعلومات حول إطارات iframe
• شبكة توصيل محتوى AMP
• قائمة بمكونات AMP المتاحة