Einrichtung
Voraussetzungen
Dieses Tutorial setzt Folgendes voraus:
- Grundkenntnisse in HTML, CSS und JavaScript
- ein grundlegendes Verständnis der AMP Kernkonzepte (siehe Tutorial "Konvertiere HTML zu AMP")
- einen Browser deiner Wahl
- einen Texteditor deiner Wahl
Richte deine Entwicklungsumgebung ein
Schritt 1. Lade den Code herunter
-
Lade den Code für das Tutorial als ZIP Datei über die folgende URL herunter: /static/files/tutorials/amp-pets-story.zip
-
Extrahiere den Inhalt der ZIP Datei. Im Verzeichnis amp-pets-story findest du die Bilder, Videos, Audiodateien und Daten, mit denen wir unsere Story erstellen. Die Datei pets.html ist unser Ausgangspunkt für die Story. Die fertige Version der Story findest du in der Datei pets-completed.html.
Schritt 2. Führe die Beispielseite aus
Um unsere Web Story zu testen, müssen wir von einem Webserver aus auf die Dateien zugreifen. Es gibt mehrere Wege, wie du einen temporären lokalen Webserver zu Testzwecken erstellen kannst. Hier sind einige Optionen – wähle die für dich geeignete Variante aus:
Sobald du deinen lokalen Webserver eingerichtet hast, kannst du dir ansehen, wie unsere fertige Web Story am Ende dieses Tutorials aussehen wird. Greife dazu auf diese URL zu:
http://localhost:8000/pets-completed.html
localhost bereitgestellt wird. Andernfalls wird die Web Story möglicherweise nicht korrekt geladen und es treten Fehler wie "source" "must start with "https://" or "//" or be relative and served from either https or from localhost. auf. Klicke dich durch die fertige Story und mache dir ein Bild davon, was wir hier erstellen.
-