Ansprechende, interaktive AMP-Seiten

Mit AMP können Sie zuverlässige, responsive und leistungsfähige Webseiten erstellen. Mit AMP lassen sich gängige Websiteinteraktionen erstellen, ohne JavaScript zu schreiben. Die amp.dev-Website enthält vorkonfigurierte Schnellstartvorlagen.

Inhalte, die Sie erstellen werden

In diesem Codelab erstellen Sie eine responsive, interaktive AMP-Seite, die viele AMP-Funktionen und erweiterte Komponenten enthält:

  • Responsive Navigation
  • Vollbild-Hero-Image
  • Responsive Bilder
  • Video mit Autoplay
  • Einbettungen wie Instagram
  • Aktionen und Selectors
  • Datenbindung mit amp-bind
  • Visuelle Effekte mit amp-fx-collection und amp-animation

Voraussetzungen

  • Ein moderner Webbrowser
  • Node.js und ein Texteditor oder Zugriff auf CodePen oder einen ähnlichen Onlinespielplatz
  • Grundkenntnisse in den Bereichen HTML, CSS, JavaScript und Google Chrome-Entwicklertools

Bereitstellung von Inhalten

Wir verwenden Node.js, um einen lokalen HTTP-Server für unsere AMP-Seite auszuführen. Informationen zur Installation finden Sie auf der Website von Node.js.

Das Tool der Wahl, Inhalte lokal bereitzustellen, wird über den Node.js-basierten statischen Contentserver bereitgestellt. Führen Sie folgenden Befehl aus, um es zu installieren:

npm install -g serve

Vorlage von amp.dev herunterladen

In den AMP-Vorlagen finden Sie Schnellstart-AMP-Vorlagen und -Komponenten, mit denen Sie schnell moderne AMP-Seiten erstellen können.

Gehen Sie zu AMP-Vorlagen und laden Sie den Code für die einfache Vorlage „Die besten Tierfotos“ des Jahres herunter.

Vorlagencode ausführen

Extrahieren Sie den Inhalt der ZIP-Datei.

Führen Sie den Befehl serve im Ordner article aus, um die Dateien lokal bereitzustellen.

Rufen Sie in Ihrem Browser http://localhost:5000/template/article.amp.html auf. (Der Port kann je nach Version von serve der Version 3.000 oder eine andere Nummer sein. In der Konsole finden Sie die genaue Adresse.

Öffnen Sie einfach die Chrome-Entwicklertools und aktivieren Sie den Gerätemodus.

Vorlagencode zuschneiden

Mittlerweile haben wir eine überwiegend funktionsfähige AMP-Seite aufgebaut. Der Zweck dieses Codelabs ist aber, dass du lernen und üben kannst.

Alle Inhalte auf der <body></body> löschen.

Wir haben nun eine leere Seite übrig, die nur noch einen Standardtext enthält:

In diesem Codelab werden dieser leeren Seite viele Komponenten hinzugefügt und die Vorlage teilweise mit neuen Funktionen neu erstellt.

Eine AMP-Seite ist eine HTML-Seite mit zusätzlichen Tags, die mit Einschränkungen versehen ist.

Die meisten Tags auf einer AMP-Seite sind zwar reguläre HTML-Tags, einige werden jedoch durch AMP-spezifische Tags ersetzt. Mit diesen benutzerdefinierten Elementen, den sogenannten AMP-HTML-Komponenten, können gängige Muster leicht implementiert werden.

Die einfachste AMP-HTML-Datei sieht so aus (auch als AMP-Textbaustein bezeichnet):

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

Sehen Sie sich den Code der leeren Seite an, die Sie bei der Einrichtung erstellt haben. Sie enthält den Standardtext und einige Ergänzungen – vor allem ein <style amp-custom>-Tag, das viele reduzierte CSS-Elemente enthält.

AMP wird nicht anhand des Designs bewertet und erzwingt keine bestimmten Stile. Die meisten AMP-Komponenten haben einen sehr einfachen Stil. Es bleibt den Autoren der Seite überlassen, ihr benutzerdefiniertes CSS bereitzustellen. Hier kommt <style amp-custom> ins Spiel.

Unter AMP-Vorlagen findet ihr jedoch eigene Meinungsvorlagen, die ansprechend gestaltet, browserübergreifend und responsiv sind und dazu beitragen, schnell AMP-Seiten zu erstellen. Der von Ihnen heruntergeladene Vorlagencode enthält die folgenden CSS-Stile in <style amp-custom>.

Zuerst fügen wir einige der aus der Vorlage entfernten Komponenten hinzu, um eine Shell für unsere Seite zu erstellen. Dazu gehören ein Navigationsmenü, ein Bild für den Titel der Seite und der Titel.

Auf der Seite Komponenten für die AMP-Benutzeroberfläche erhalten Sie Hilfe. Wir sehen uns jedoch die Implementierungsdetails nicht genauer an. Spätere Schritte im Codelab bieten viele Möglichkeiten, dies zu tun.

Responsive Navigation hinzufügen

Gehen Sie zu https://ampstart.com/components#navigation, kopieren Sie den für RESPONSIVE MENUBAR angegebenen HTML-Code und fügen Sie ihn in den body Ihrer Seite ein.

Der von AMP Start bereitgestellte Code enthält die erforderliche HTML- und CSS-Klasse, um eine responsive Navigationsleiste für Ihre Seite zu implementieren.

Probieren Sie es aus: Passen Sie die Größe des Fensters an, um zu sehen, wie es auf verschiedene Bildschirmgrößen reagiert.

Dieser Code verwendet CSS-Medienabfragen und die amp-sidebar und amp-accordionAMP-Komponenten.

Hero-Image und Titel hinzufügen

AMP Start bietet sofort einsatzbereite Snippets für ansprechende, responsive Hero-Images und Titel.

Gehen Sie zu https://ampstart.com/components#media, kopieren Sie den HTML-Code für Fullpage Hero und fügen Sie ihn direkt nach dem <!-- End Navbar --> comment in body. in den Code ein.

Aktualisieren Sie jetzt das Bild und den Titel.

Wie Sie vielleicht bemerkt haben, enthält das Code-Snippet zwei verschiedene amp-img-Tags. Eines wird für kleinere Breiten verwendet und sollte auf ein Bild mit einer geringeren Auflösung verweisen, das andere auf größeren Bildschirmen. Sie werden automatisch basierend auf dem media-Attribut umgeschaltet, das AMP auf allen AMP-Elementen unterstützt.

Ersetzen Sie src, width und height, indem Sie verschiedene Bilder und den Titel in „Wunderschönste Wanderungen im pazifischen Nordwesten“ ändern. Ersetzen Sie dazu die vorhandenen <figure>...</figure> durch:

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

Sehen wir uns nun die Seite an:

Zusammenfassung

  • Sie haben für Ihre Seite eine Shell erstellt, einschließlich responsiver Navigation sowie einem Hero-Image und Titel.
  • Du hast mehr über AMP-Vorlagen erfahren und die AMP Start-UI-Komponenten verwendet, um schnell einen Seiten-Shell zu erstellen.

Den ausgefüllten Code für diesen Abschnitt finden Sie unter http://codepen.io/aghassemi/pen/RpRdzV.

In diesem Abschnitt fügen wir unserer Seite responsive Bilder, Videos, eingebettete Inhalte und Text hinzu.

Füge ein main-Element hinzu, das den Inhalt der Seite hostet. Sie werden am Ende von body: hinzugefügt.

<main id="content">

</main>

Überschriften und Absätze hinzufügen

Füge Folgendes in main hinzu:

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

Da es sich bei AMP nur um HTML handelt, gibt es etwas Besonderes an diesem Code, außer den Namen der CSS-Klassen. Was sind px3, mb2 und ampstart-dropcap? Woher kommen sie?

Diese Klassen sind nicht Teil von AMP-HTML. In den AMP Start-Vorlagen wird Basscss verwendet, um ein einfaches CSS-Toolkit bereitzustellen und spezifische AMP-Klassen hinzuzufügen.

In diesem Snippet werden px3 und mb2 von Basscss definiert und jeweils in padding-left-right bzw. margin-unten übersetzt. ampstart-dropcap wird von AMP Start bereitgestellt und vergrößert den ersten Buchstaben eines Absatzes.

Unter http://basscss.com/ und https://ampstart.com/components finden Sie die Dokumentation für diese vordefinierten CSS-Klassen.

So sieht die Seite jetzt aus:

Bilder hinzufügen

AMP-Seiten lassen sich ganz einfach erstellen. In vielen Fällen lässt sich eine AMP-Komponente genauso responsiv erstellen wie ein layout="responsive"-Attribut. Ähnlich wie beim HTML-Tag img unterstützt amp-img auch srcset, um verschiedene Bilder für unterschiedliche Breite des Darstellungsbereichs und Pixeldichten anzugeben.

Füge amp-img ein zu main hinzu:

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

Mit diesem Code wird ein responsives Bild erstellt. Dazu werden layout="responsive" angegeben und width und height. angegeben

Warum muss ich für das responsive Layout Breite und Höhe angeben?

Es gibt zwei Gründe:

  1. Bei AMP wird das Seitenverhältnis anhand der Breite und Höhe berechnet und die Höhe beibehalten, wenn sich die Breite an den übergeordneten Container anpasst.
  2. AMP erzwingt die statische Größe für alle Elemente, um eine positive Nutzererfahrung zu gewährleisten (keine Springen auf der Seite). Außerdem bestimmt das AMP-Element die Größe und Position jedes Elements, um die Seite vor dem Herunterladen der Ressourcen herauszustellen.

Sehen wir uns nun die Seite an:

Automatische Wiedergabe eines Videos hinzufügen

AMP unterstützt viele Videoplayer wie YouTube und Vimeo. AMP hat eine eigene Version des HTML5-Elements video unter der erweiterten Komponente.amp-video Einige dieser Videoplayer, darunter amp-video und amp-youtube, unterstützen auch die stummgeschaltete Autoplay-Funktion auf Mobilgeräten.

Ähnlich wie amp-img kann amp-video durch das Hinzufügen von layout="responsive" responsiv werden

Wir fügen unserer Seite ein automatisch wiedergegebenes Video hinzu.

Fügen Sie main: einen weiteren Absatz und das folgende amp-video-Element hinzu

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

Sehen wir uns das genauer an:

Einbetten hinzufügen

AMP enthält erweiterte Komponenten für viele Einbettungen von Drittanbietern wie Twitter und Instagram. Für Einbettungen, die keine AMP-Komponente haben, gibt es immer amp-iframe.

Fügen Sie unserer Seite ein Instagram-Einbettung hinzu.

Im Gegensatz zu amp-img und amp-video ist amp-instagram keine integrierte Komponente. Das Importskript-Tag muss dabei explizit in den head der AMP-Seite eingefügt werden, bevor die Komponente verwendet werden kann.

Der verwendete AMP-Start-Textbaustein umfasst mehrere Importskript-Tags. Suchen Sie am Anfang des Tags head und achten Sie darauf, dass die folgende Importskript-Zeile enthalten ist:

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

Fügen Sie main: einen weiteren Absatz und das folgende amp-instagram-Element hinzu

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

Sehen wir uns das genauer an:

Diese Inhalte sind im Moment wahrscheinlich ausreichend.

Zusammenfassung

  • Du weißt jetzt über responsive Komponenten in AMP.
  • Sie haben verschiedene Arten von Medien und Text hinzugefügt.

Den ausgefüllten Code für diesen Abschnitt finden Sie unter http://codepen.io/aghassemi/pen/OpXGoa.

Bislang haben wir nur statischen Content für unsere Seite erstellt. In diesem Abschnitt erstellen wir eine interaktive Fotogalerie mit Komponenten wie einem Karussell, einer Lightbox und AMP-Aktionen.

Zwar unterstützt AMP kein benutzerdefiniertes JavaScript, aber es werden dennoch mehrere Bausteine dafür bereitgestellt, dass Nutzeraktionen empfangen und verarbeiten können.

Wenn jedes Bild für unsere fotoorientierte AMP-Seite auf der Seite sichtbar ist, ist dies nicht nutzerfreundlich. Mit amp-carousel können Sie zum Beispiel horizontal wischende Fotos erstellen.

Prüfen Sie zuerst, ob das Skript-Tag für amp-carousel in head enthalten ist:

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

Fügen Sie main: jetzt eine responsive amp-carousel vom Typ slides mit mehreren Bildern hinzu

<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" sorgt dafür, dass immer nur ein Bild sichtbar ist. Außerdem können Nutzer durch die Bilder wischen.

Für die Bilder im Karussell verwenden wir layout="fill", weil ein Folienkarussell immer die Größe mit dem untergeordneten Element ausfüllt. Sie müssen also kein anderes Layout festlegen, das Breite und Höhe erfordert.

Probieren wir es aus und sehen Sie uns an, wie der Code aussieht:

GIF

Fügen Sie nun einen horizontal scrollbaren Container für die Miniaturansichten dieser Bilder hinzu. Wir verwenden <amp-carousel> wieder, jedoch ohne type="slides" und mit einem festen Höhelayout.

Fügen Sie hinter dem vorherigen amp-carousel-Element Folgendes ein:

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

Für die Miniaturansichten haben wir einfach layout="fixed" und Versionen mit niedriger Auflösung der gleichen Fotos verwendet.

Sehen wir uns das genauer an:

Bild ändern, wenn der Nutzer auf eine Miniaturansicht tippt

Dazu müssen Ereignisse wie tap mit Aktionen verknüpft werden, z. B. die Folie wird geändert werden.

Ereignis: Wir können mit dem Attribut on Ereignis-Handler für ein Element installieren und das Ereignis tap wird für alle Elemente unterstützt.

action: amp-carousel stellt eine goToSlide(index=INTEGER)-Aktion bereit, die über den Klickereignis-Handler für jedes Thumbnail-Bild aufgerufen werden kann.

Du kennst jetzt das Ereignis und die Aktion. Als Nächstes geht es darum.

Zuerst müssen wir dem id-Karussell eine Folie hinzufügen, damit wir über den Klickereignis-Handler in den Miniaturansichten darauf verweisen können.

Ändern Sie den vorhandenen Code, um dem ersten Folienkarussell ein id-Attribut hinzuzufügen:

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

  ....

Installieren Sie jetzt den Ereignis-Handler (on="tap:imageSlides.goToSlide(index=<slideNumber>)")) auf jedem Thumbnail-Bild:

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

Beachten Sie, dass wir auch einen tabindex und die ARIA role für die Barrierefreiheit festlegen müssen.

Das war's. Wenn Sie auf die einzelnen Miniaturansichten tippen, wird das entsprechende Bild im Karussell angezeigt.

2, GIF

Die Markierung markieren, wenn der Nutzer darauf tippt

Wenn ja, unter welchen Voraussetzungen? Es gibt keine Aktionen, um CSS-Klassen zu ändern, damit ein Element von den Klickereignis-Handlern aufgerufen wird. Wie können wir das ausgewählte Thumbnail hervorheben?

<amp-selector> rette es!

amp-selector unterscheidet sich von Komponenten, die wir bisher verwendet haben. Es handelt sich nicht um eine Präsentationskomponente, da sie das Layout der Seite nicht beeinflusst. Vielmehr ist sie ein Baustein, auf dem die AMP-Seite die vom Nutzer ausgewählte Option erkennen kann.

Die Funktionsweise von amp-selector ist recht einfach, aber wirkungsvoll:

  • amp-selector kann beliebige HTML-Elemente oder AMP-Komponenten enthalten.
  • Alle untergeordneten Elemente von amp-selector können als Optionen festgelegt werden, wenn sie ein option=<value>-Attribut haben.
  • Wenn ein Nutzer auf ein Element tippt, das eine Option ist, fügt amp-selector diesem Element nur ein selected-Attribut hinzu und entfernt es im Einfachauswahlmodus aus anderen Optionselementen.
  • Sie können den Stil des ausgewählten Elements in Ihrem benutzerdefinierten CSS-Code anpassen, indem Sie das Attribut selected mit einem CSS-Attributselektor ausrichten.

Sehen wir uns an, wie wir diese Aufgabe meistern können.

Skript-Tag für amp-selector zu head hinzufügen:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Thumbnail-Karussell in einem amp-selector umschließen
  2. Wenn du ein option=<value>-Attribut hinzufügen möchtest, kannst du aus jeder Miniaturansicht eine Option erstellen.
  3. Setze die erste Miniaturansicht standardmäßig, indem du das Attribut selected hinzufügst.
<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>

Jetzt müssen wir einen Stil hinzufügen, um das ausgewählte Thumbnail zu markieren.

Fügen Sie den folgenden benutzerdefinierten CSS-Code in <style amp-custom> nach dem komprimierten CSS-Textbaustein aus AMP Start ein:

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

Sehen wir uns das genauer an:

3, GIF

Alles in Ordnung, aber ist dir ein Programmfehler aufgefallen?

Wenn der Nutzer das Präsentationskarussell wischt, wird dies nicht mit dem ausgewählten Thumbnail aktualisiert. Wie können wir die aktuelle Folie im Karussell mit der ausgewählten Miniaturansicht binden?

Im nächsten Abschnitt zeigen wir Ihnen, wie das geht.

Zusammenfassung

  • Du hast jetzt die verschiedenen Arten von Karussells kennengelernt und weiß, wie sie verwendet werden.
  • Mit AMP-Aktionen und -Ereignissen haben Sie die sichtbare Folie im Bildkarussell geändert, wenn der Nutzer auf ein Thumbnail tippt.
  • Sie wissen jetzt, wie amp-selector als Baustein für praktische Anwendungsfälle eingesetzt werden kann.

Den ausgefüllten Code für diesen Abschnitt finden Sie unter: http://codepen.io/aghassemi/pen/gmMJMy.

In diesem Abschnitt verwenden wir amp-bind, um die Interaktivität der Bildergalerie aus dem vorherigen Abschnitt zu verbessern.

Was ist amp-bind?

Mit der AMP-Kernkomponente „amp-bind“ können Sie benutzerdefinierte Interaktivität mit Datenbindung und Ausdrücken erstellen.

amp-bind besteht aus drei Hauptteilen:

  1. Status
  2. Bindung
  3. Mutation

Der Status ist eine Variable für den Anwendungsstatus, die alles von einem einzelnen Wert bis zu einer komplexen Datenstruktur enthält. Alle Komponenten können diese freigegebene Variable lesen und schreiben.

Bindung ist ein Ausdruck, der den Status mit einem HTML-Attribut oder dem Inhalt eines Elements verknüpft.

Mit Mutation wird der Wert des Status infolge einer Nutzeraktion oder eines Ereignisses geändert.

Die Funktion von amp-bind beginnt, wenn eine Mutation auftritt: Alle Komponenten, die eine Bindung für diesen Status haben, werden benachrichtigt und werden automatisch auf den neuen Status aktualisiert.

In Aktion sehen!

Zuvor haben wir AMP-Aktionen (z. B. goToSlide()) verwendet, um ein vollständiges Bildkarussell mit einem tap-Ereignis für Miniaturansichten zu verknüpfen. Außerdem haben wir amp-selector ausgewählt, um das ausgewählte Thumbnail hervorzuheben.

Sehen wir uns an, wie wir diesen Code mit dem amp-bind-Ansatz für die Datenbindung vollständig neu implementieren können.

Bevor wir aber programmieren, möchten wir noch einen Ansatz entwickeln:

1. Was ist unser Bundesstaat?

In unserem Fall ist ziemlich einfach der Wert, der nur die aktuelle Foliennummer ist. selectedSlide ist also unser Zustand.

2. Was sind unsere Bindungen?

Was muss sich ändern, wenn selectedSlide geändert wird?

  • Sichtbare slide des Karussells im Vollbildmodus: 
<amp-carousel [slide]="selectedSlide" ...
  • Das selected-Element in amp-selector muss ebenfalls geändert werden. Damit wird der Fehler behoben, der im vorherigen Abschnitt aufgetreten ist.
<amp-selector [selected]="selectedSlide" ...

3. Welche Mutationen gibt es?

Wann muss sich selectedSlide ändern?

  • Wenn der Nutzer zu einer neuen Folie im Karussell wechselt, wischen Sie:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Wenn der Nutzer ein Thumbnail auswählt:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Für eine Mutation wird AMP.setState verwendet. Das bedeutet, dass wir nicht mehr den gesamten on="tap:imageSlides.goToSlide(index=n)"-Code für das Thumbnail benötigen.

Fassen wir alles zusammen:

Skript-Tag für amp-bind zu head hinzufügen:

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

Ersetzen Sie den vorhandenen Galeriecode durch den neuen Ansatz:

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

Testen wir den Test. Tippe auf eine Miniaturansicht, um die Bildfolien zu verändern. Wischen Sie die Bildfolien. Die hervorgehobene Miniaturansicht ändert sich.

GIF

Text zur Galerie hinzufügen

Wir haben die harte Arbeit bereits getan, um einen Status für unsere aktuelle Folie zu definieren und zu ändern. Jetzt können wir ganz einfach weitere Bindungen für die Aktualisierung anderer Informationen auf Grundlage der aktuellen Foliennummer hinzufügen.

Fügen Sie der Galerie &Bild x/von Y-Text hinzu:

Fügen Sie oberhalb des Folienkarussell-Elements den folgenden Code hinzu:

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

Dieses Mal werden wir mithilfe von [text]= statt des HTML-Attributs an den inneren Text des Elements gebunden.

Jetzt ausprobieren

GIF

Zusammenfassung

  • Du weißt jetzt über amp-bind.
  • Sie haben amp-bind verwendet, um eine verbesserte Version der Bildergalerie zu implementieren.

Den ausgefüllten Code für diesen Abschnitt finden Sie unter http://codepen.io/aghassemi/pen/MpeMdL.

In diesem Abschnitt fügen wir zwei neue Funktionen hinzu, um der Seite eine Animation hinzuzufügen.

Zum Titel einen Parallaxe-Effekt hinzufügen

amp-fx-collection ist eine Erweiterung mit voreingestellten visuellen Effekten, z. B. Parallaxe, die einfach für jedes Element mit Attributen aktiviert werden kann.

Beim Parallaxeneffekt wird beim Scrollen auf der Seite schneller oder langsamer gescrollt, je nachdem, welcher Wert dem Attribut zugewiesen ist.

Der Parallaxe-Effekt lässt sich aktivieren, indem Sie das amp-fx="parallax" data-parallax-factor="<a decimal factor>"-Attribut in ein HTML- oder AMP-Element einfügen.

  • Ein Faktor von größer als 1 führt dazu, dass das Element schneller gescrollt wird, wenn der Nutzer auf der Seite nach unten scrollt.
  • Ein Faktor von weniger als 1 verlangsamt das Element, wenn der Nutzer auf der Seite nach unten scrollt.

Fügen wir unserem Seitentitel Parallaxen mit dem Faktor 1,5 hinzu, um zu sehen, wie er aussieht.

Skript-Tag für amp-fx-collection zu head hinzufügen:

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

Suchen Sie nun das vorhandene Kopfzeilenelement im Code und fügen Sie ihm das Attribut amp-fx="parallax" and data-parallax-factor="1.5" hinzu:

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

Sehen wir uns das Ergebnis an:

GIF

Der Titel scrollt jetzt schneller als der Rest der Seite. Nicht schlecht, oder?

Animation zur Seite hinzufügen

Mit der Funktion amp-animation lassen sich die Web Animations API auf AMP-Seiten einfügen.

In diesem Abschnitt verwenden wir amp-animation, um einen subtilen Zoomeffekt für das Titelbild zu erstellen.

Fügen Sie das Skript-Tag für „amp-animation“ in head ein:

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

Jetzt müssen wir unsere Animation und das Zielelement festlegen, auf das sie angewendet wird.

Animationen sind als JSON-Daten in einem amp-animation-Tag der obersten Ebene definiert.

Fügen Sie den folgenden Code direkt unter dem öffnenden body-Tag auf Ihrer Seite ein.

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

Der Code definiert eine Animation, die 30 Sekunden lang ohne Verzögerung läuft und das Bild auf 30% größer skaliert.

Wir definieren eine fill vorwärts, damit das Bild nach Ende der Animation vergrößert dargestellt wird. target ist der HTML-id des Elements, für das die Animation gilt.

Füge dem Hero-Image-Element auf unserer Seite ein id hinzu, damit amp-animation darauf reagieren kann.

  1. Rufe das vorhandene Hero-Image in deinem Code auf (das hochauflösende Bild mit layout="fixed-height") und füge id="heroimage" dem amp-img-Tag hinzu.
  2. Der Einfachheit halber solltest du auch media="(min-width: 416px)" löschen und auch die anderen amp-img mit niedriger Auflösung entfernen, damit wir uns bei „amp-animation“ vorerst nicht mit mehreren Animationen und Medienabfragen befassen müssen.
<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">

...

Wie Sie vielleicht bemerkt haben, wird das Bild bei Überstieg des übergeordneten Bilds überlaufen. Daher müssen wir den Überlauf ausblenden.

Fügen Sie die folgende CSS-Regel am Ende der bestehenden <style amp-custom> hinzu:

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

Probieren wir es aus und sehen Sie uns an, wie der Code aussieht:

GIF

Dezent!

Aber das hätte ich mit CSS erreicht. Welchen Zweck hat amp-animation?

Das ist in diesem Fall der Fall, aber amp-animation bietet zusätzliche Funktionen, die alleine mit CSS nicht möglich sind. Beispielsweise kann eine Animation basierend auf der Sichtbarkeit ausgelöst werden (und auch basierend auf der Sichtbarkeit pausiert werden) oder durch eine AMP-Aktion. amp-animation basiert ebenfalls auf der Web Animations API, die selbst mehr Funktionen bietet als CSS-Animationen, insbesondere was die Kombinierbarkeit angeht.

Zusammenfassung

  • Du hast mit amp-fx-collection Parallaxeneffekte erstellt.
  • Du weißt jetzt über amp-animation.

Den vollständigen Code für diesen Abschnitt finden Sie unter http://codepen.io/aghassemi/pen/OpXKzo.

Du hast gerade eine tolle, interaktive AMP-Seite erstellt.

Schauen wir mal, was du heute geschafft hast.

Hier der Link zur fertigen Seite: http://s.codepen.io/aghassemi/debug/OpXKzo

... und der endgültige Code: http://codepen.io/aghassemi/pen/OpXKzo

Unbenannt.gif

Die Sammlung von CodePen-Einträgen für dieses Codelab finden Sie hier: https://codepen.io/collection/XzKmNB/

Aber bevor wir gehen...

Wir haben vergessen, wie unsere Seite auf andere Formfaktoren wie das Tablet im Querformat aussieht.

Folgendes lässt sich erkennen:

Unbenannt.gif

Sehr gut!

Vielen Dank für die Aufmerksamkeit!

Nächste Schritte

In diesem Codelab werden nur die Oberflächen von AMP-Seiten genutzt. Es gibt viele Ressourcen und Codelabs, mit denen du tolle AMP-Seiten erstellen kannst:

Wenn Sie Fragen haben oder Probleme auftreten, finden Sie uns auf dem AMP-Slack-Kanal. Dort können Sie auch Diskussionen, Fehlerberichte oder Funktionsanfragen auf GitHub erstellen.