AMP

Подготовка

Предварительные требования

Чтобы завершить этот урок, вам понадобятся:

  • Базовые знания HTML, CSS и JavaScript
  • Базовое понимание основных концепций AMP (см. урок Преобразование HTML в AMP)
  • Браузер (на ваш выбор)
  • Текстовый редактор (на ваш выбор)

Подготовка среды разработки

Шаг 1. Скачайте код

  1. Скачайте код для данного урока, упакованный в виде zip-файла, со следующего URL-адреса: https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip

  2. Распакуйте содержимое zip-файла. В каталоге amp-pets-story находятся изображения, видео, аудио и файлы данных, которые мы будем использовать для создания нашей истории. Файл pets.html — это стартовая точка нашей истории. Полную версию истории можно найти в файле pets-completed.html.

Шаг 2. Запустите страницу-пример

Чтобы протестировать историю-пример, ее файлы необходимо открывать с веб-сервера. Существует несколько способов создать временный локальный веб-сервер для тестирования. Вот несколько вариантов; выберите тот, который вам лучше всего подходит:

После настройки локального веб-сервера посмотрите, как наша завершенная веб-история будет выглядеть в конце этого урока, перейдя по следующему URL-адресу:

http://localhost:8000/pets-completed.html

ВАЖНО! Убедитесь, что URL-адрес выдается с localhost; в противном случае веб-история может загружаться неправильно, и вы можете столкнуться с ошибками, например с такими, как: "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

Просмотрите готовую историю, чтобы получить представление о том, что мы будем создавать.