דפי 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 מוסבר איך להתקין אותו.

הכלי הנבחר שלנו להצגת תוכן באופן מקומי יהיה שרת, שרת תוכן סטטי המבוסס על 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 שפועל בעיקר, אבל המטרה של קוד ה-Lab הזה היא לאפשר לכם ללמוד ולתרגל...

מחיקת כל מה שנמצא בתוך <body></body>.

עכשיו אנחנו נותרים דף ריק שמכיל רק חלק מהמקורות הבאים:

באמצעות קוד ה-Lab הזה יש להוסיף רכיבים רבים לדף הריק הזה, וכך ליצור מחדש באופן חלקי את התבנית עם פונקציונליות רבה יותר.

דף 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 Start, אבל לא נפרט יותר את פרטי ההטמעה. השלבים הבאים ב-Codelab יספקו לכם הרבה הזדמנויות לעשות זאת.

הוספת ניווט רספונסיבי

נכנסים לכתובת https://ampstart.com/components#Navigation ומעתיקים את קוד ה-HTML שמוצג ל-RESPONSIVE MENUBAR ב-body של הדף.

הקוד שנשלח באמצעות AMP Start כולל את המבנה הנדרש של סיווג HTML ו-CSS כדי להטמיע סרגל ניווט רספונסיבי בדף.

רוצים לנסות? משנים את גודל החלון כדי לראות איך הוא מגיב לגדלים שונים של מסכים.

קוד זה משתמש בשאילתות מדיה של CSS וברכיבי ה-AMP amp-sidebar ו-amp-accorion.

הוספה של תמונה ראשית וכותרת

AMP Start מספק גם קטעי טקסט מוכנים לשימוש לתמונות ולכותרות ראשיות ויפהפיות.

עליך לעבור אל https://ampstart.com/components#media ולהעתיק את קוד ה-HTML שסופק עבור Fullpage Hero בקוד שלך, מיד אחרי <!-- End Navbar --> 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/aghassemi/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? מאיפה הם מגיעים?

הכיתות האלה לא מהוות חלק מ-AMP HTML. בתבניות AMP Start נעשה שימוש ב-Basscs כדי לספק ערכת CSS ברמה נמוכה ולהוסיף מחלקות ספציפיות ל-AMP Start.

בקטע הקוד הזה, px3 ו-mb2 מוגדרים על ידי ה-Basscs ומתרגמים ל-מרווח פנימי משמאל ול-שוליים-תחתיים בהתאמה. הכלי ampstart-dropcap מופעל על ידי AMP Start ומוסיף את האות הראשונה בפסקה.

ניתן למצוא תיעוד של כיתות ה-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.

למה צריך לציין רוחב וגובה כשמשתמשים בפריסה רספונסיבית?

שתי סיבות:

  1. AMP משתמש ברוחב ובגובה כדי לחשב את יחס הגובה-רוחב ולשמר את הגובה הנכון בהתאם לשינוי הרוחב כדי להתאים לקונטיינר ההורה שלו.
  2. גרסת AMP אוכפת את הגודל הסטטי של כל הרכיבים כדי להבטיח חוויית משתמש טובה (ללא דילוגים בדף), וכדי לקבוע את הגודל והמיקום של כל רכיב לצורך פריסת הדף לפני הורדת המשאבים.

כעת נבחן את הדף:

הוספת סרטון להפעלה אוטומטית

AMP תומך בנגני וידאו רבים כמו YouTube ו-Vimeo. ל-AMP יש גרסה משלו של רכיב ה-HTML5 video שכלולה ברכיב המורחב.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, תמיד יש פרמטר amp-iframe.

רוצה להוסיף הטמעה של Instagram לדף שלנו?

בניגוד ל-amp-img ול-amp-video, amp-instagram הוא לא רכיב מובנה. כדי שניתן יהיה להשתמש ברכיב הייבוא, צריך להוסיף לו את תג הסקריפט לייבוא באופן מפורש ב-head של דף ה-AMP.

תבנית ה-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/aghassemi/pen/OpXGoa

עד עכשיו יצרנו רק תוכן סטטי לדף שלנו. בקטע הזה, ניצור גלריית תמונות אינטראקטיבית באמצעות רכיבים כמו קרוסלה, lightbox ו-AMP.

למרות ש-AMP לא תומך ב-JavaScript מותאם אישית, הוא עדיין חושף כמה אבני בניין כדי לקבל ולטפל בפעולות משתמש.

הצגת כל דף ה-AMP בדף התמונות תאפשר לנו ליצור חוויית משתמש מעולה. למרבה המזל, אנחנו יכולים להשתמש באמפר קרוסלה כדי ליצור שקפים שנשלפים לרוחב בתמונות.

קודם צריך לוודא שתג הסקריפט של 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", מכיוון שקרוסלה של שקף ממלאת תמיד את גודלה ברכיב הצאצא, כך שאין צורך לציין פריסה אחרת שמחייבת רוחב וגובה.

כדאי לך לנסות ולראות איך זה נראה:

GIF

עכשיו אפשר להוסיף מאגר גלילה אופקית לתמונות הממוזערות האלה. נשתמש שוב ב-<amp-carousel>, אבל ללא type="slides" עם פריסה בגובה קבוע.

יש להוסיף את הערכים הבאים אחרי האלמנט הקודם amp-carousel.

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

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

</amp-carousel>

חשוב לשים לב: עבור התמונות הממוזערות פשוט השתמשנו ב-layout="fixed" וגרסאות ברזולוציה נמוכה יותר של אותן התמונות.

בואו נסתכל:

שינוי התמונה כאשר משתמש מקיש על תמונה ממוזערת

כדי לעשות זאת, אנחנו צריכים לקשר בין אירועים כמו tap לבין פעולות כמו שינוי השקף.

event: אפשר להשתמש במאפיין on כדי להתקין רכיבי handler של אירועים ברכיב, והאירוע tap נתמך בכל הרכיבים.

action: amp-carousel חושף פעולה של goToSlide(index=INTEGER) שאנחנו יכולים לקרוא ל-handler של האירוע בהקשה על כל תמונה ממוזערת.

עכשיו, כשאנחנו יודעים על האירוע והפעולה, קשרו ביניהם.

תחילה אנחנו צריכים לתת לקרוסלה קרוסלת id כדי שנוכל להפנות אותה מה-handler של אירוע ההקשה בתמונות הממוזערות.

אפשר לשנות את הקוד הקיים כדי להוסיף מאפיין 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 לנגישות.

זה הכל. בהקשה על כל תמונה ממוזערת תוצג התמונה המתאימה בקרוסלה.

2.gif

מדגישים את התמונה הממוזערת כשהמשתמש מקיש עליה

האם זה אפשרי? נראה שאין פעולות לשנות את מחלקות ה-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>
  1. גלישת הקרוסלה של התמונה הממוזערת ב-amp-selector
  2. כדי להוסיף כל תמונה ממוזערת, יש להוסיף מאפיין option=<value>.
  3. כדי שהתמונה הממוזערת הראשונה תיבחר כברירת מחדל, מוסיפים את המאפיין selected.
<amp-selector>

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

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

    ...

  </amp-carousel>

</amp-selector>

עכשיו עלינו להוסיף סגנון כדי להדגיש את התמונה הממוזערת שנבחרה.

מוסיפים את שירות ה-CSS המותאם אישית הבא ב-<style amp-custom> אחרי תבנית ה-CSS המוקטנת שמתחילה ב-AMP:

<style amp-custom>
...

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

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

</style>

בואו נסתכל:

3.gif

נראה טוב, אבל הבחנת באג?

אם המשתמש מחליק את הקרוסלה בשקף, התמונה הממוזערת שנבחרה לא מתעדכנת. איך אפשר לקשר את השקף הנוכחי בקרוסלה עם התמונה הממוזערת שנבחרה?

בקטע הבא נסביר איך עושים את זה.

סיכום

  • למדתם על סוגים שונים של קרוסלות ועל אופן השימוש בהן.
  • השתמשתם בפעולות ובאירועים מסוג AMP כדי לשנות את השקף הגלוי בקרוסלת התמונות כשהמשתמש מקיש על תמונה ממוזערת.
  • למדת על amp-selector ועל האופן שבו אפשר להשתמש בו כאבני דרך להטמעה של תרחישי דוגמה מעניינים.

הקוד המלא של קטע זה נמצא כאן: http://codepen.io/aghassemi/pen/gmMJMy

בקטע הזה, נשתמש ב-amp-bind כדי לשפר את האינטראקטיביות של גלריית התמונות בקטע הקודם.

מה זה amp-bind?

רכיב הליבה של AMP amp-bind מאפשר ליצור פונקציונליות מותאמת אישית באמצעות ביטויים ושיוך נתונים.

ל-amp-bind יש שלושה חלקים עיקריים:

  1. מדינה
  2. שירותי כריכה
  3. מוטציה

מדינה היא משתנה של מצב אפליקציה, שמכיל הכול מערך יחיד למבנה נתונים מורכב. כל הרכיבים יכולים לקרוא ולכתוב במשתנה המשותף הזה.

קישור הוא ביטוי שמקשר את המצב למאפיין HTML או לתוכן של רכיב.

השתקה היא הפעולה של שינוי הערך של המדינה כתוצאה מפעולה או אירוע מסוימים של המשתמש.

העוצמה של 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>

זה הזמן לנסות. מקישים על תמונה ממוזערת והשקפים בתמונות משתנים. מחליקים את מגלשות התמונה, והתמונה הממוזערת המודגשת תשתנה.

4.gif

הוספת טקסט לגלריה

כבר השקענו מאמצים רבים כדי להגדיר ולשנות את המצב של השקף הנוכחי. מעכשיו אפשר לספק בקלות קישורים נוספים לעדכון פרטים אחרים, בהתאם למספר השקפים הנוכחי.

&&&39;'s add "Image x/of y" לגלריה שלנו:

צריך להוסיף את הקוד הבא מעל אלמנט הקרוסלה של השקפים:

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

הפעם אנחנו מחייבים את הטקסט הפנימי של רכיב באמצעות [text]=, במקום לקשר למאפיין HTML.

בואו ננסה:

5.gif

סיכום

  • למדת על amp-bind.
  • השתמשת ב-amp-bind כדי להטמיע גרסה משופרת של גלריית התמונות.

הקוד המלא של קטע זה נמצא כאן: http://codepen.io/aghassemi/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>

נבחן את התוצאה:

6.gif

הכותרת נגללת מהר יותר משאר הדף. מגניב!

הוספת אנימציה לדף

amp-animation היא תכונה שמובילה ל-Web אנימציה API בדפי AMP.

בקטע הזה, נשתמש ברכיב amp-animation כדי ליצור אפקט התקרבות לתמונה.

יש להוסיף את תג הסקריפט לאנימציה של AMP ב-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 יוכל לבצע בו פעולות.

  1. עליך למצוא בקוד את התמונה הראשית (התמונה ברזולוציה גבוהה עם layout="fixed-height") ולהוסיף את id="heroimage" לתג amp-img.
  2. כדי לפשט את הדברים, אפשר גם למחוק את media="(min-width: 416px)" ולהסיר גם את amp-img ברזולוציה נמוכה אחרת, כך שלא נצטרך לטפל באנימציות ובשאילתות מדיה רבות בשלב אנימציה.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

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

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

...

כפי שאולי שמתם לב, שינוי התמונה יגרום לגלישתה, ולכן אנחנו צריכים לתקן אותה על ידי הסתרת האפשרויות הנוספות.

מוסיפים את כלל ה-CSS הבא לסוף ה-<style amp-custom> הקיים:

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

כדאי לך לנסות ולראות איך זה נראה:

7.gif

עדין!

אבל בכל זאת יכולתי לעשות את זה עם שירות CSS. מהי הנקודה של amp-animation?

זה נכון במקרה זה, אבל amp-animation מאפשר פונקציונליות נוספת שלא ניתן לבצע באמצעות CSS בלבד. לדוגמה, אפשר להפעיל אנימציה על סמך חשיפה (ולהשהות גם אותה על סמך חשיפה) או להפעיל אותה עם פעולת AMP. האפליקציה amp-animation מבוססת גם על ה-Web אנימציות API, שבעצמו יש יותר תכונות בהשוואה לאנימציות CSS, במיוחד בתחום ההשתלה.

סיכום

  • למדת על יצירת אפקטים של פרלקס באמצעות amp-fx-collection.
  • למדת על amp-animation.

הקוד המלא של קטע זה נמצא כאן: http://codepen.io/aghassemi/pen/OpXKzo

סיימת ליצור דף AMP אינטראקטיבי ואינטראקטיבי.

זה הזמן לבחון את ההישגים שלכם עוד היום.

קישור לדף האחרון: http://s.codepen.io/aghassemi/debug/OpXKzo

... והקוד הסופי: http://codepen.io/aghassemi/pen/OpXKzo

ללא שם.gif

ניתן למצוא את האוסף של רשומות CodePen ב-Codelab הזה כאן: https://codepen.io/collection/XzKmNB/

אוי, לפני שנצא לדרך...

שכחתי לבדוק איך הדף שלנו נראה בגורמי צורה אחרים, כמו טאבלט במצב פריסה לרוחב.

בוא נראה:

ללא שם.gif

מעולה

שיהיה לך יום יפה!

מה עושים עכשיו?

קוד Lab זה משרוט רק את פני השטח של מה שאפשר לעשות ב-AMP. יש הרבה משאבים ומעבדי קוד שיעזרו לכם ליצור דפי AMP מדהימים:

אם יש לך שאלות או נתקלת בבעיות, עליך למצוא אותנו בערוץ AMP Slack או ליצור דיונים, דוחות על באגים או בקשות לתכונות ב-GitHub.