Создание вашей первой истории AMP: ответ Google на Snapchat и Instagram

С Google, готовым к выпуску AMP Stories в ближайшее время, Contributor Paul Shapiro делится тем, как создать свою собственную историю AMP и получить перед последним трендом контента.Среди множества интересных анонсов в AMP Conf 2018 в Амстердаме было введение AMP Stories, нового формата, подобного Snapchat и Instagram Stories, реализованного через новый компонент ускоренных мобильных страниц (AMP). В отличие от Snapchat и Instagram Stories, которые являются функциями на своих соответствующих платформах, AMP Stories можно найти на странице результатов поисковой машины Google (SERP). Как и в остальных проектах AMP, другие платформы также должны использовать формат. Они предоставляют пользователям очень привлекательный слайд-шоу с богатыми мультимедийными функциями, такими как видео, аудио, изображения и текст в формате, который, как известно, любители мобильных устройств. Вот одноминутное видео, представляющее формат истории ускоренных мобильных страниц (AMP): Взволнован? Я, но, увы, он не выставлялся публике на момент написания этой статьи. Компонент amp-story по-прежнему находится в «экспериментальном» и режиме разработки, и он должен быть включен для пользователя в канале Dev AM AMP, чтобы начать работу. Избранная группа предварительно одобренных издателей, включая Microsoft, Wired и CNN, уже экспериментировала с этим форматом и может быть найдена в Google, перейдя на g.co/ampstories и инициируя поиск соответствующего имени издателя. Например, поиск «Проводной» приведет к появлению серии AMP-историй, которые журнал Wired разработал для своего веб-сайта. Если вы заинтересованы в том, чтобы опробовать AMP Stories на своем собственном веб-сайте, вы можете подать заявку на участие в исследовании происхождения. Мы должны ожидать, что AMP Stories выйдет на рынок общественности в ближайшем будущем, обеспечивая поистине уникальный способ взаимодействия пользователей с поиском Google и вашим контентом. За эти изменения стоит заранее подготовиться. Чтобы помочь вашим системам управления контентом (CMS) подготовиться, я создал учебник, который вы можете использовать.

Преимущества новостей AMP

Существует несколько преимуществ для AMP Stories по сравнению с продуктом Instagram и Snapchat:

Он будет работать с поиском Google и, вероятно, будет отражать намерения на основе ключевых слов, а не зависящие от социальных открытий.

Он не зависит от платформы и может быть форматом, который Twitter или Pinterest решает использовать на своей собственной платформе.

Это сценарий, созревший для полного или полуавтоматического создания истории.

Давайте рассмотрим, как мы можем объединить нашу первую историю AMP.

Ваша первая история AMP

Основа AMP Story, как и следовало ожидать, является страницей AMPHTML. Вы можете использовать шаблон шаблона, подобный приведенному выше, в качестве отправной точки. (Примечание: пробелы, которые вы видите в тегах во всей остальной части этого столбца, не должны включаться, когда вы на самом деле ставите скрипт вместе - их нужно удалить. Используйте более длинные примеры сценариев в качестве модели для правильного синтаксиса.) Поскольку amp-story является расширенным компонентом AMP, вам нужно добавить к нему дополнительный тег: На этом этапе мы готовы начать фактически создание AMP Story.

Создание сэндвича AMP Story

Есть три основных тега, которые составляют AMP Story, и вы соедините их вместе, чтобы создать общий опыт:

Вы начинаете с тега как свой хлеб. Остальные - это ваши холодные порезы. инкапсулируется внутри, а затем инкапсулируется внутри . У вас будет только один тег на данной странице гипертекстовой разметки (HTML). Как и следовало ожидать, представляет собой один «слайд» в истории AMP. Так как у вас, вероятно, будет несколько слайдов в вашей истории AMP - это своего рода точка - у вас будет несколько таких тегов внутри. Наконец, в каждом из них у вас будет один или несколько тегов, тег, основанный на макетах таблицы CSS, используемый для организации различных элементов в каждом отдельном слайде. Это основная концепция построения вашей первой истории AMP. Теперь давайте немного глубже погрузимся в некоторые дополнительные конфигурации и доступные опции.

Мы начинаем с элемента и его закрывающего тега. Это будет единственный элемент, разрешенный на нашей HTML-странице. Нам нужно добавить атрибут standalone, требование, а затем есть несколько необязательных атрибутов, которые могут быть добавлены дополнительно:

форзац-конфиг-Src. Мы можем использовать это, чтобы указать конечную точку нотации объектов javascript (JSON), предоставляющую информацию о параметрах социального обмена и связанных ссылках, которые будут найдены на конечном экране вашей истории AMP. (Мы вернемся к этому.)

фон аудио. Мы можем указать аудиофайл, который будет воспроизводиться на протяжении всей истории. Например, это может быть файл MP3.

В конце концов, ваш тег может выглядеть примерно так:

Нам нужна страница для каждого слайда нашей истории AMP. Каждый элемент имеет требуемый атрибут id, который должен иметь уникальное значение для каждой страницы. Тогда есть два необязательных атрибута, которые мы можем включить:

авто предварительнго после. Мы устанавливаем единицу времени, заставляя один слайд автоматически продвигаться вперед. Например, если мы установим auto-advance-after = "5s", по прошествии пяти секунд, AMP Story перейдет к следующему слайду.

фон аудио. Мы можем установить звуковой файл для воспроизведения во время просмотра этого слайда, в отличие от атрибута, используемого на уровне, который будет воспроизводиться на протяжении всего опыта AMP Story.

Например, это может выглядеть так: Теперь, когда у нас есть один или несколько элементов, мы можем начать указывать их содержимое. Мы можем использовать другие элементы в пределах

, и специального элемента. Эти элементы слоируются снизу вверх, причем первый слой в объектной модели документа (DOM) находится внизу, а последний вверху. Каждый из этих элементов внутри имеет возможность иметь свою собственную отдельную анимацию, применяемую к нему с одним из нескольких атрибутов анимации:

анимировать в. Если вы собираетесь анимировать элемент, это необходимо, поскольку оно представляет собой входную анимацию. Существуют предопределенные анимации, которые могут быть заданы как значения, такие как fade-in и fly-in-left. Полный список см. В документации.

анимировать-в-срок. Вы можете обозначить единицу времени и указать длину продолжительности анимации, если вы хотите сократить или удлинить анимацию.

<Литий> анимировать-в-задержки. Вы можете отложить начало анимации, указав единицу времени.

анимировать-в-после. Вы можете использовать это, чтобы обозначить порядок анимаций в последовательности в заданном. Дайте различные атрибуты идентификатора анимированных элементов, затем укажите указанный id как значение animate-in-after.

Например, это может выглядеть примерно так: Теперь давайте рассмотрим еще более сложное расслоение элементов внутри и взглянем на них.

Среди множества стандартных HTML или ускоренных мобильных HTML-страниц (AMPHTML), которые мы можем включить внутри, есть специальный элемент, который помогает создавать слои, похожие на CSS-сетки, с некоторыми простыми в использовании предварительно разработанными шаблонами. Существует четыре предопределенных шаблона, которые мы можем использовать с:

Fill. Показывает первый ребенок, полный кровотечение. Это действительно приятно использовать с изображением.

Vertical. Элементы слоев вертикально сверху вниз.

Горизонтальный. Эти слои располагаются горизонтально слева направо и могут занимать все вертикальное пространство.

Thirds. Этот шаблон делит экран на три строки равных размеров. Вы можете поместить разные контенты в каждую строку. Строки обозначаются как верхняя, третья, третья и третья.

Как всегда, документация AMP на этом - это глоток свежего воздуха, и у него очень хорошие визуальные представления этих шаблонов, если вам нужна помощь. Например: В приведенном выше примере мы используем два элемента. Первый использует шаблон заполнения для отображения полноэкранного изображения в качестве фона. Второй использует вертикальный шаблон, чтобы складывать заголовок и заголовок над этим изображением. Это простой пример, но вы можете определенно сделать несколько более интересное использование слоев.

Конечная точка файла bookend JSON

Последнее, о чем стоит упомянуть, это то, что мы можем создать конечную точку JSON, называемую bookend, которая позволяет нам указывать некоторый контент для отображения на последнем слайде. Его также можно использовать для указания того, какие варианты совместного доступа доступны для Истории AMP. Это очень просто настроить, если вы знакомы с JSON. Для функциональных возможностей совместного использования мы можем указать объект JSON для общих поставщиков, где мы укажем, какие провайдеры мы будем использовать как истинные: Мы также можем указать в объекте связанной статьи, массив ссылок для отображения, каждый с заголовком, URL-адресом и уменьшенным изображением: Мы помещаем это вместе в один файл JSON и вызываем его в атрибуте bookend-config-src.

Пример объединения всех этих элементов

На этом этапе у вас должны быть все знания, необходимые для создания вашей собственной истории AMP. В качестве примера я создал демоверсию, конвертируя один из дневников ежедневного поиска Барри Шварца в поисковый раунд в формате. Поскольку я не одобрен издателем, демонстрация не будет отображаться в результатах поиска Google. Если вы заинтересованы в создании кода демо, нажмите здесь. Мнения, выраженные в этой статье, принадлежат авторам гостевых изданий, а не обязательно поисковым системам. Здесь перечислены авторы работ.