Знакомство с AMP Сторис
Как известно, на конференции в Токио AMP Conference Гугл объявил о создании отдельного блока для AMP Историй. Стоит заранее подготовиться к этим изменениям, чтобы быть в ногу со временем и с началом масштабной интеграции сторис в поиск Гугла быть в тренде.
Преимущества AMP Stories
У формата AMP Stories есть несколько преимуществ по сравнению с продуктами Instagram и Snapchat:
- Он будет работать с поиском в Google и, скорее всего, будет давать показы на основе ключевых слов, а не зависеть от социального открытия.
- Он не зависит от платформы и может быть форматом, который Twitter или Pinterest решат использовать на своей собственной платформе.
- Он готов к написанию скриптов для полного или полуавтоматического создания историй.
Давайте рассмотрим, как мы можем создать нашу первую AMP Story.
Ваша первая история AMP
Основой AMP Story, как и следовало ожидать, является страница AMPHTML.
Вы можете использовать шаблон кода, приведенного выше, в качестве отправной точки.
Примечание: пробелы, которые вы видите в тегах и в остальной части этого столбца, не должны включаться, когда вы на самом деле собираете скрипт — их нужно удалить. Используйте более длинные примеры скриптов в качестве модели для правильного синтаксиса.
Поскольку amp-story является расширенным компонентом AMP, вам необходимо добавить дополнительный тег <script> в свой <head>:
К этому моменту мы готовы приступить к созданию истории AMP.
Создание «бутерброда» AMP Story
Существует три основных тега, которые составляют историю AMP, и вы сортируете их вместе, чтобы создать общее впечатление:
- <amp-story>
- <amp-story-page>
- <amp-story-grid>
Вы начинаете с тега <amp-story> как своего хлеба. Остальные — ваши колбасы. <amp-story -page> инкапсулируется в <amp-story>, а затем <amp-story-grid> инкапсулируется в <amp-story-page>.
У вас будет только один тег <amp-story> на данной странице языка гипертекстовой разметки (HTML).
Как и следовало ожидать, <amp-story-page> представляет собой один «слайд» в истории AMP. Поскольку в вашей AMP Story вы, вероятно, будете иметь несколько слайдов, у вас будет несколько таких тегов в <amp-story>.
Наконец, внутри каждой <amp-story-page> у вас будет один или несколько тегов <amp-story-grid>, тег на основе макетов CSS Grid, используемый для упорядочения различных элементов на каждом отдельном слайде.
Это основная концепция создания вашей первой истории AMP. Теперь давайте углубимся в некоторые дополнительные конфигурации и доступные опции.
<amp-story>
Мы начнем с элемента <amp-story> и его закрывающего тег </amp-story>. Это будет единственный элемент, разрешенный в <body> нашей HTML-странице.
Нам нужно добавить отдельный атрибут, требование <amp-story>, а затем есть несколько дополнительных атрибутов, которые могут быть добавлены дополнительно:
- bookend-config-src. Мы можем использовать это для указания конечной точки javascript object notation (JSON), предоставляющей информацию об опциях совместного использования в социальных сетях и связанных ссылках, которые будут найдены на конечном экране вашей истории AMP. (Мы вернемся к этому.)
- background-audio. Мы можем указать аудиофайл, который будет воспроизводиться на протяжении всего сюжета. Например, это может быть файл MP3.
В конце ваш тег <amp-story> может выглядеть примерно так:
<amp-story page>
Нам нужна <amp-story-page> для каждого слайда нашей истории AMP. Каждый элемент имеет обязательный атрибут id, который должен иметь уникальное значение для каждой страницы.
Тогда есть два необязательных атрибута, которые мы можем включить:
- auto-advance-after. Мы устанавливаем единицу времени, заставляя один слайд автоматически продвигаться. Например, если мы установим auto-advance-after = ”5s”, по истечении пяти секунд история AMP перейдет к следующему слайду.
- фон аудио. Мы можем настроить воспроизведение аудиофайла при просмотре этого конкретного слайда, в отличие от атрибута, используемого на уровне <amp-story>, который будет воспроизводиться на протяжении всего процесса AMP Story.
Например, это может выглядеть так:
Теперь, когда у нас есть один или несколько элементов <amp-story-page>, мы можем начать указывать их содержимое. Мы можем использовать другие элементы внутри <amp-story-page>, такие как <h2>, <p> и специальный элемент <amp-story-grid>. Эти элементы располагаются снизу вверх, причем первый слой в объектной модели документа (DOM) находится внизу, а последний — вверху.
Каждый из этих элементов внутри <amp-story-page> имеет возможность применять свою собственную отдельную анимацию с одним из нескольких атрибутов анимации:
- animate-in. Если вы собираетесь анимировать элемент, это необходимо, так как он представляет собой входную анимацию. Существуют предопределенные анимации, которые можно указывать в качестве значений, например, постепенное увеличение и увеличение слева. Полный список см. в документации.
- animate-in-duration. Вы можете обозначить единицу времени и указать продолжительность вашей анимации, если вы хотите сократить или удлинить анимацию.
- animate-in-delay. Вы можете отложить начало анимации, указав единицу времени.
- animate-in-after. Вы можете использовать это для обозначения порядка анимации в последовательности внутри заданной <amp-story-page>. Задайте атрибуты идентификатора различных анимированных элементов, а затем укажите указанный идентификатор в качестве значения animate-in-after.
Это будет выглядеть примерно так:
Теперь давайте рассмотрим несколько более сложных слоев в <amp-story-page> и рассмотрим <amp-story-grid>.
<amp-story-grid>
Среди множества стандартных элементов HTML или ускоренных мобильных страниц HTML (AMPHTML), которые мы можем включить в <amp-story-page>, есть специальный элемент <amp-story-grid>, который помогает создавать слои, подобные сеткам CSS, с некоторые простые в использовании готовые шаблоны.
Есть четыре предопределенных шаблона, которые мы можем использовать с <amp-story-grid>:
- Fill. Показывает первого ребенка полного кровотечения. Это действительно приятно использовать с изображением.
- Vertical. Слои элементов по вертикали сверху вниз.
- Horizontal. Это слои элементов по горизонтали слева направо и могут занимать все вертикальное пространство <amp-story-page> .
- Thirds. Этот шаблон делит ваш экран на три строки одинакового размера. Вы можете поместить различный контент в каждой строке. Строки обозначаются как верхняя треть, средняя треть и нижняя треть.
Как всегда, документация AMP по этому вопросу — глоток свежего воздуха, и она имеет очень хорошее визуальное представление этих шаблонов, если вам нужна помощь.
Например:
В приведенном выше примере мы используем два элемента <amp-story-grid>. Первый использует шаблон заливки для отображения полноэкранного изображения в качестве фона.
Второй – использование вертикального шаблона для размещения заголовка и подзаголовка поверх этого изображения.
Это простой пример, но вы определенно можете сделать несколько более интересных слоев, используя <amp-story-grid>.
Конечная точка файла JSON
Последнее, что стоит упомянуть, — это то, что мы можем создать конечную точку JSON, называемую bookend, которая позволяет нам указывать контент, отображаемый на последнем слайде.
Его также можно использовать, чтобы указать, какие параметры социального обмена доступны для истории AMP. Это очень просто настроить, если вы знакомы с JSON.
Для функции совместного использования в социальных сетях мы можем указать объект JSON поставщиков общего ресурса, где мы указываем, каких поставщиков мы включим как true:
Мы также можем указать в объекте связанных статей массив отображаемых ссылок, каждая из которых имеет заголовок, URL-адрес и эскиз изображения:
Мы объединяем это в один файл JSON и вызываем его в атрибуте bookend-config-src в <amp-story>.
Пример объединения всего этого
На этом этапе у вас должны быть все знания, необходимые для создания собственной истории AMP. В качестве примера я создал демо, преобразовав один из ежедневных обзоров Барри Шварца на круглом столе поисковой системы в формат.
Вот тут вы сможете увидеть пример полного кода для АМР сторис.
Процесс пока что трудоемкий, надеемся что скоро умные люди напишут шаблоны, которые значительно ускорят этот процесс.
