Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

صفحات AMP الأساسية التفاعلية والتفاعلية

يُسهّل AMP إنشاء صفحات ويب موثوقة ومتجاوبة عالية الأداء. تتيح لك صفحات AMP إنشاء تفاعلات شائعة للمواقع الإلكترونية بدون كتابة JavaScript. يتضمّن الموقع الإلكتروني لـ amp.dev نماذج مصمّمة مسبقًا للبدء بسرعة.

العناصر التي سيتم إنشاؤها

في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة AMP تفاعلية وتفاعلية وتفاعلية تشمل العديد من ميزات صفحات AMP والمكوّنات الموسّعة:

التنقّل المتجاوب
صورة غلاف رئيسية كاملة
الصور المتجاوبة
فيديو مزوّد بميزة التشغيل التلقائي
التضمينات مثل Instagram
الإجراءات وأدوات الاختيار
ربط البيانات باستخدام amp-bind
التأثيرات المرئية مع amp-fx-collection وamp-animation

المتطلبات اللازمة

متصفح ويب حديث
Node.js ومحرر النص أو إمكانية الوصول إلى CodePen أو ملعب مشابه على الإنترنت
معرفة أساسية بلغة HTML وCSS وJavaScript وأدوات مطوّري برامج Google Chrome

أدوات عرض المحتوى

وسنستخدم "Node.js" لتشغيل خادم HTTP محلي لعرض صفحة AMP. ارجع إلى موقع Node.js الإلكتروني لمعرفة كيفية تثبيته.

ستكون الأداة التي نقدمها لعرض المحتوى محليًا هي service، وهو خادم محتوى ثابت يستند إلى Node.js. لتثبيته، شغِّل الأمر التالي:

npm install -g serve

تنزيل نموذج من amp.dev

نماذج AMP هي مستودع يضم نماذج AMP ومكوناتها للبدء في إنشاء صفحات AMP عصرية وسريعة الاستجابة.

انتقِل إلى نماذج AMP ونزِّل رمز نموذج "المقالة البسيطة" لمعرفة المزيد من المعلومات عن "صورة حيوانات"

تشغيل رمز النموذج

عليك استخراج محتوى ملف ZIP.

شغِّل الأمر serve داخل مجلد article لعرض الملفات محليًا.

انتقل إلى http://localhost:5000/templates/article.amp.html في متصفحك. (قد يكون المنفذ 3000 أو رقمًا مختلفًا حسب إصدار serve. تحقق من وحدة التحكم للحصول على العنوان الدقيق.)

أثناء استخدامناه، لنفتح أدوات مطوري البرامج في Chrome ونبدّل وضع الجهاز أيضًا.

اقتطاع رمز النموذج

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

يمكنك حذف كل شيء داخل <body></body>.

والآن، اتركنا صفحة فارغة تحتوي على بعض الرموز النموذجية فقط:

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

صفحة AMP هي صفحة HTML تحتوي على علامات إضافية ومع بعض القيود لتحقيق أداء موثوق.

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

يظهر أبسط ملف HTML بتنسيق AMP على النحو التالي (يُشار إليه أحيانًا باسم النموذج النموذجي لصفحات AMP):

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

يمكنك إلقاء نظرة على رمز الصفحة الفارغة التي أنشأتها أثناء الإعداد، والذي يتضمن هذه النصوص النموذجية ويحتوي على بعض الإضافات⁠، والأهم من ذلك، أنّها علامة <style amp-custom> تتضمّن الكثير من رموز CSS المصغّرة.

ولا تتوفر آراء AMP عن التصميم ولا تفرض مجموعة معيّنة من الأنماط. تحتوي معظم مكوّنات AMP على نمط أساسي جدًا. في المقابل، يُترك لمؤلفي الصفحة تقديم رمز CSS مخصّص لهم. هنا يأتي دور <style amp-custom>.

يوفّر نماذج AMP أنماطًا خاصة ومجمّعة من صفحات الأنماط المتتالية (CSS) تتميّز بتصميم أنيق ومتصفح سريع الاستجابة لمساعدتك في إنشاء صفحات AMP أنيقة بسرعة. يحتوي نموذج النموذج الذي تم تنزيله على أنماط CSS المعروضة في <style amp-custom>..

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

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

انتقِل إلى https://ampstart.com/components#Navigation وانسخ رمز HTML المقدّم الخاص بـ "منصّة الردّ" وألصقه في body على صفحتك.

يحتوي الرمز المقدّم من AMP Start على بنية فئة HTML وCSS اللازمة لتنفيذ شريط تنقّل متجاوب لصفحتك.

جرِّب بنفسك: تغيير حجم نافذتك لمعرفة كيفية استجابةها لأحجام الشاشات المختلفة.

يستخدم هذا الرمز طلبات بحث الوسائط في CSS ومكوّنات AMP amp-sidebar وamp-accordion.

إضافة صورة رئيسية وعنوان

يوفر AMP Start مقتطفات جاهزة للاستخدام حول صور وعناوين رئيسية رائعة ومتجاوبة أيضًا.

انتقل إلى https://ampstart.com/components#media وانسخ رمز HTML المتوفّر لـ Fullpage Hero والصقه في الرمز، بعد  comment في body.

لنبدأ تعديل الصورة والعنوان الآن.

لعلك لاحظت وجود علامتي amp-img مختلفتين في مقتطف الرمز. يتم استخدام إحداهما مع العرض بأحجام أصغر، ومن المفترض أن تشير إلى صورة أقل دقة، والأخرى للشاشات الأكبر حجمًا. ويتم تبديلها تلقائيًا استنادًا إلى السمة media التي تتوافق مع صفحات AMP على جميع عناصر AMP.

عدِّل 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>

لنلقِ نظرة على الصفحة الآن:

الملخّص

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

يمكن العثور على الرمز الكامل لهذا القسم هنا: http://codepen.io/aghassimi/pen/RpRdzV

في هذا القسم، سنضيف صورًا وفيديوهات وفيديوهات مضمّنة وبعض النصوص المتجاوبة إلى صفحتنا.

لنبدأ عنصر 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>

نظرًا لأن صفحات AMP هي لغة HTML فقط، ما من شيء مميز في هذا الرمز باستثناء أسماء فئات CSS هذه. ما المقصود بـ px3 وmb2 وampstart-dropcap؟ من أين يأتي؟

هذه الفئات ليست جزءًا من رمز HTML لصفحات AMP. تستخدم نماذج AMP Start Basscss لتقديم مجموعة أدوات CSS ذات مستوى منخفض وإضافة فئات مخصصة لبدء AMP.

في هذا المقتطف، يتم تحديد px3 وmb2 من خلال Basss والترجمة إلى padding-left-right و هامش-down على التوالي. يتم تقديم ampstart-dropcap من خلال "بدء AMP" ويجعل الحرف الأول من الفقرة أكبر.

ويمكنك العثور على مستندات لفئات CSS المحدّدة مسبقًا هذه على http://basscss.com/ وhttps://ampstart.com/components.

لنرى كيف تبدو الصفحة الآن:

إضافة صورة

يمكنك بسهولة إنشاء صفحات متجاوبة في AMP. وفي كثير من الأحيان، يكون جعل مكوّن AMP متجاوبًا مثل إضافة سمة layout="responsive". على غرار علامة HTML img، يتيح amp-img أيضًا srcset تحديد صور مختلفة لارتفاع إطار العرض وكثافات البكسل.

إضافة amp-img إلى main:

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

لماذا يجب تحديد العرض والارتفاع عند استخدام التنسيق المتجاوب؟

لسببَين:

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

لنلقِ نظرة على الصفحة الآن:

إضافة فيديو يتم تشغيله تلقائيًا

تتوافق صفحات AMP مع العديد من مشغّلات الفيديو، مثل YouTube وVimeo. لدى AMP نسخته الخاصة من عنصر video HTML5 ضمن amp-videoالمكوّن الموسَّع. ويتوافق بعض مشغّلات الفيديو هذه، بما في ذلك amp-video وamp-youtube، مع ميزة التشغيل التلقائي على الأجهزة الجوّالة أيضًا.

على غرار amp-img، يمكن أن amp-video سيصبح مستجيبًا بإضافة layout="responsive"

لنبدأ فيديو التشغيل التلقائي على صفحتنا.

إضافة فقرة أخرى والعنصر amp-video التالي إلى main:

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

لنلقِ نظرة على ما يلي:

إضافة تضمين

تحتوي صفحات AMP على مكوّنات موسّعة للعديد من العناصر التابعة لجهات خارجية، مثل Twitter وInstagram. هناك دائمًا amp-iframe للتضمينات التي تفتقر إلى مكوّن AMP.

لنبدأ تضمين Instagram في صفحتنا.

وعلى عكس amp-img وamp-video، فإن amp-instagram ليس مكوّنًا مضمّنًا. يجب تضمين علامة النص البرمجي لاستيرادها بشكل صريح في head من صفحة AMP قبل استخدام المكوّن.

يتضمن نص بدء AMP النموذجي العديد من علامات النص البرمجي للاستيراد. يمكنك البحث عنها في بداية علامة head والتأكّد من تضمين سطر النص البرمجي التالي للاستيراد:

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

إضافة فقرة أخرى والعنصر amp-instagram التالي إلى main:

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

لنلقِ نظرة على ما يلي:

ذلك على الأرجح محتوى كافٍ في الوقت الحالي.

الملخّص

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

يمكن العثور على الرمز الكامل لهذا القسم هنا: http://codepen.io/aghassimi/pen/OpXGoa

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

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

إضافة منصّة عرض بعناصر متغيّرة للصور

لن يؤدي جعل كل صورة لصفحة AMP التي تركّز على الصور مرئية في الصفحة إلى تقديم تجربة رائعة للمستخدم. لحسن الحظ، يمكننا استخدام 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 مع عدة صور إلى main:.

<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"، بما أنّ منصّة العرض بعناصر متغيّرة للشرائح تملأ حجمها دائمًا بالعنصر الفرعي، لذلك لا حاجة لتحديد تنسيق مختلف يتطلب العرض والارتفاع.

لنجرّب ذلك ونلاحظ كيف يبدو:

إضافة منصّة عرض بعناصر متغيّرة للصور المصغّرة

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

action: amp-carousel يعرض الإجراء goToSlide(index=INTEGER) الذي يمكننا استدعاءه من معالج حدث النقر لكل صورة مصغّرة.

الآن وبعد أن تعرّفنا على الحدث والإجراء، لنربطهما معًا.

أولاً، يجب إضافة id لمنصّة العرض بعناصر متغيّرة حتى نتمكّن من الإشارة إليها من معالج أحداث النقر على الصور المصغّرة.

عدِّل الرمز الحالي لإضافة السمة id إلى منصة العرض بعناصر متغيّرة للشرائح (الأولى):

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

  ....

لنبدأ الآن في تثبيت معالج الأحداث (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" في كل صورة صورة مصغّرة:

<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 لتسهيل الاستخدام.

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

ملف GIF.2

تمييز الصورة المصغّرة عندما ينقر المستخدم عليها

هل هذا ممكن؟ ليس هناك أي إجراءات لتغيير فئات CSS لعنصر من أجل استدعاؤه من معالجات أحداث النقر. كيف يمكننا إبراز الصورة المصغّرة التي تم اختيارها؟

<amp-selector> في عملية الإنقاذ!

يختلف amp-selector عن المكونات التي استخدمناها حتى الآن. وهو ليس مكوّنًا للعرض التقديمي، لأنّه لا يؤثر في تنسيق الصفحة، بل هو مكوّن أساسي يسمح لصفحة AMP بمعرفة الخيار الذي اختاره المستخدم.

ما يفعله amp-selector بسيط إلى حد ما ولكنه قوي:

يمكن أن يحتوي amp-selector على أي عناصر HTML أو مكوّنات AMP عشوائية.
يمكن أن يصبح أي عنصر تابع لـ amp-selector خيارًا إذا كان يحتوي على سمة option=<value>.
عندما ينقر المستخدم على عنصر عبارة عن خيار، يُضيف amp-selector سمة selected إلى ذلك العنصر فقط (ويزيله من عناصر خيارات أخرى في وضع التحديد الفردي).
يمكنك تطبيق نمط العنصر المحدّد في خدمة CSS المخصّصة من خلال استهداف السمة selected باستخدام أداة اختيار سمات CSS.

لنرى كيف ساعدنا ذلك في إنجاز المهمة المطلوبة.

أضِف علامة النص البرمجي للنطاق amp-selector إلى head:

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

التفاف منصّة العرض بعناصر متغيّرة للصور المصغّرة في amp-selector
اختَر صورة مصغّرة من خلال إضافة السمة option=<value>.
اضبط الصورة المصغّرة الأولى تلقائيًا من خلال إضافة السمة 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>

والآن، يجب إضافة نمط لتمييز الصورة المصغّرة المحددة.

أضِف نمط CSS المخصّص التالي في <style amp-custom> بعد نموذج CSS المصغّر من AMP Start:

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

لنلقِ نظرة على ما يلي:

يبدو المحتوى جيدًا، ولكن هل لاحظت خطأ؟

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

في القسم التالي، سنتعرّف على كيفية إجراء ذلك.

الملخّص

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

يمكن العثور على الرمز الكامل لهذا القسم هنا: http://codepen.io/aghassimi/pen/gmMJMy

في هذا القسم، سنستخدم amp-bind لتحسين التفاعل مع معرض الصور من القسم السابق.

ما المقصود بـ `amp-bind`؟

يتيح لك مكوِّن AMP الأساسي amp-bind إنشاء تفاعل مخصَّص باستخدام ربط البيانات والتعبيرات.

amp-bind يتضمّن ثلاثة أجزاء رئيسية:

الولاية
تجميع
طفرة

الحالة هي متغير حالة التطبيق الذي يحتوي على أي شيء من قيمة واحدة إلى بنية بيانات معقدة. يمكن لجميع المكوّنات قراءة هذا المتغيّر المشترك وكتابته.

الربط هو تعبير يربط الحالة بسمة HTML أو محتوى أحد العناصر.

التبديل هو إجراء تغيير قيمة الحالة نتيجة بعض إجراءات المستخدم أو حدثه.

تبدأ قوة amp-bind عند حدوث طفرة: سيتم إشعار جميع المكوّنات التي ترتبط بهذه الحالة وسيتم تحديثها تلقائيًا لتعكس الحالة الجديدة.

لنرى ذلك عمليًا.

استخدِم `amp-bind` لإعادة تنفيذ معرض الصور

في السابق، استخدمنا إجراءات AMP (على سبيل المثال goToSlide()) لربط منصّة العرض بعناصر متغيّرة ذات الشريحة الكاملة بالصورة مع حدث tap على الصور المصغّرة واستخدام amp-selector لتسليط الضوء على الصورة المصغّرة المحدّدة.

لنتعرّف على كيفية إعادة تنفيذ هذا الرمز بالكامل باستخدام نهج amp-bind لربط البيانات.

ولكن قبل أن نبدأ في الترميز، لنصمم منهجنا:

1- ما هي ولايتي؟

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

2- ما هي قواعدنا؟

ما الذي يجب تغييره عند تغيير selectedSlide؟

slide منصّة العرض بعناصر متغيّرة المرئية للصورة الكاملة:

<amp-carousel [slide]="selectedSlide" ...

يجب أيضًا تغيير العنصر selected في السمة amp-selector. سيؤدي هذا الإجراء إلى إصلاح الخطأ الذي حدث في القسم السابق.

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

لنجرّب ذلك. انقر على صورة مصغّرة، وستتغيّر شرائح الصور. مرِّر شرائح الصور سريعًا وستتغيّر الصورة المصغّرة التي تم تمييزها.

إضافة نص إلى المعرض

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

لنضّف &نصًا؛ صورة x/of y" إلى معرضنا:

أضف الرمز التالي أعلى عنصر منصّة العرض بعناصر متغيّرة للعروض التقديمية:

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

في هذه المرة، نربط النص الداخلي لأحد العناصر باستخدام [text]= بدلاً من الربط بسمة HTML.

لنجرّب ذلك:

الملخّص

لقد تعرّفت على معلومات عن amp-bind.
استخدمت amp-bind لتنفيذ نسخة محسّنة من معرض الصور.

يمكن العثور على الرمز الكامل لهذا القسم هنا: http://codepen.io/aghassimi/pen/MpeMdL

في هذا القسم، سنستخدم ميزتين جديدتين لإضافة الرسوم المتحركة إلى صفحتنا.

إضافة تأثير اختلاف المنظر إلى العنوان

amp-fx-collection هو امتداد يوفر مجموعة من التأثيرات المرئية المعدّة مسبقًا، مثل اختلاف المنظر الذي يمكن تفعيله بسهولة على أي عنصر له سمات.

مع تأثير اختلاف المنظر، أثناء تمرير المستخدم في الصفحة، يتم تمرير العنصر بشكل أسرع أو أبطأ بناء على القيمة المخصصة للسمة.

ويمكن تفعيل تأثير اختلاف المنظر من خلال إضافة السمة amp-fx="parallax" data-parallax-factor="<a decimal factor>" إلى أي عنصر HTML أو عنصر AMP.

وتجعل قيمة أكبر من 1 العنصر الذي يتم تمريره بشكل أسرع عندما يمرّر المستخدم لأسفل الصفحة.
وتؤدي قيمة المعامل الأقل من 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>

لنلقِ نظرة على النتيجة:

يعمل التمرير الآن في العنوان بشكل أسرع من بقية الصفحة. رائع!

إضافة صورة متحركة إلى الصفحة

amp-animation هي ميزة تُجلب واجهة برمجة تطبيقات Web Animations إلى صفحات AMP.

في هذا القسم، سنستخدم amp-animation لإنشاء تأثير تكبير بسيط لصورة الغلاف.

أضِف علامة النص البرمجي لـ amp-animation إلى head:

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

والآن، نحتاج إلى تحديد الرسوم المتحركة والعنصر المستهدف الذي تنطبق عليه.

يتم تحديد الصور المتحركة بتنسيق JSON داخل علامة amp-animation للمستوى الأعلى.

أدرِج الرمز التالي مباشرةً تحت علامة 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 هي رمز HTML id للعنصر الذي تنطبق عليه الصورة المتحركة.

لنضيف id إلى عنصر الصورة الرئيسية في صفحتنا حتى يتمكن amp-animation من العمل عليه.

حدِّد مكان الصورة الرئيسية الحالية (الصورة العالية الدقة التي تتضمّن layout="fixed-height") في الرمز وأضِف id="heroimage" إلى العلامة amp-img.
ولتبسيط الأمر، يمكنك أيضًا حذف media="(min-width: 416px)" وإزالة amp-img الأخرى المنخفضة الدقة حتى لا نضطر إلى التعامل مع طلبات الرسوم المتحركة والوسائط المتعددة في amp-animation في الوقت الحالي.

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

...

وكما لاحظت، فإن تغيير حجم الصورة سيجعلها تفوق حجمها الأساسي، لذا نحتاج إلى إصلاح ذلك من خلال إخفاء التجاوز.

أضف قاعدة CSS التالية إلى نهاية <style amp-custom> الحالية:

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

لنجرّب ذلك ونلاحظ كيف يبدو:

دقيق!

كان بإمكاني تنفيذ ذلك باستخدام CSS على أيّ حال. ما هي وجهة amp-animation؟

هذا صحيح، ولكنّ amp-animation وفّر وظائف إضافية لا يمكن تنفيذها باستخدام CSS وحدها. على سبيل المثال، يمكن تشغيل الحركة بالاستناد إلى مستوى الرؤية (وإيقافها مؤقتًا استنادًا إلى مستوى الرؤية أيضًا) أو يمكن تشغيلها باستخدام إجراء AMP. تستند خدمة amp-animation أيضًا إلى واجهة برمجة تطبيقات Web Animations، التي توفّر بحدّ ذاته ميزات أكثر من الصور المتحركة بتنسيق CSS، لا سيما في ما يتعلّق بالقابلية للتركيب.

الملخّص

لقد تعلّمتَ كيفية إنشاء تأثيرات اختلاف المنظر باستخدام amp-fx-collection.
لقد تعرّفت على معلومات عن amp-animation.

يمكن العثور على الرمز الكامل لهذا القسم هنا: http://codepen.io/aghassimi/pen/OpXKzo

لقد انتهيت للتو من إنشاء صفحة AMP تفاعلية وتفاعلية.

لنحتفل معًا بإلقاء نظرة على ما أنجزته اليوم.

إليك رابط إلى الصفحة النهائية: http://s.codepen.io/aghassimi/debug/OpXKzo

... والرمز النهائي: http://codepen.io/aghassimi/pen/OpXKzo

بلا عنوان.gif

يمكن العثور على مجموعة إدخالات CodePen لهذا الدرس التطبيقي هنا: https://codepen.io/collection/XzKmNB/

قبل البدء...

لقد نسينا التحقق من مظهر صفحتنا على عوامل النموذج الأخرى، مثل الجهاز اللوحي في الوضع الأفقي.

لنرى ما يلي:

بلا عنوان.gif

ممتازة

يَوْمْ سَعِيدْ.

الخطوات التالية

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

إذا كانت لديك أسئلة أو واجهت مشاكل، يُرجى البحث معنا على قناة AMP Slack أو إنشاء مناقشات أو تقارير أخطاء أو طلبات ميزات على GitHub.

صفحات AMP الأساسية التفاعلية والتفاعلية

العناصر التي سيتم إنشاؤها

المتطلبات اللازمة

أدوات عرض المحتوى

تنزيل نموذج من amp.dev

تشغيل رمز النموذج

اقتطاع رمز النموذج

إضافة التنقّل المتجاوب

إضافة صورة رئيسية وعنوان

الملخّص

إضافة عناوين وفقرات

إضافة صورة

إضافة فيديو يتم تشغيله تلقائيًا

إضافة تضمين

الملخّص

إضافة منصّة عرض بعناصر متغيّرة للصور

إضافة منصّة عرض بعناصر متغيّرة للصور المصغّرة

تغيير الصورة عندما ينقر المستخدم على صورة مصغّرة

تمييز الصورة المصغّرة عندما ينقر المستخدم عليها

الملخّص

ما المقصود بـ amp-bind؟

استخدِم amp-bind لإعادة تنفيذ معرض الصور

إضافة نص إلى المعرض

الملخّص

إضافة تأثير اختلاف المنظر إلى العنوان

إضافة صورة متحركة إلى الصفحة

الملخّص

قبل البدء...

الخطوات التالية

ما المقصود بـ `amp-bind`؟

استخدِم `amp-bind` لإعادة تنفيذ معرض الصور