Дарья Смирнова

+47

с 2019

1 подписчик

28 подписок

Дарья Смирнова

Деньги

15.05.2019

Казино, медиа, проекты Илона Маска: во что вкладывает деньги Джордж Сорос

Краткая биография и обзор инвестиций основателя хедж-фонда Soros Fund Management.

Дарья Смирнова

Офлайн

19.04.2019

Всё на красное: сколько можно заработать на винном казино

И что нужно для его открытия.

Дарья Смирнова

Разработка

04.04.2019

Инструкция: пишем первое письмо с помощью AMP

На примере каталога бездомных котов из документации Google.

\n \n\n\n Hello, AMP4EMAIL world.\n\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Основные «опознавательные знаки» AMP-писем:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Они помечаются записями «⚡4email» или «amp4email» в теге <html>.","Тег <head> должен содержать тег <script>, который загружает среду выполнения AMP: <script async src=\"https://cdn.ampproject.org/v0.js\"></script>.","Должен быть загружен бойлерплейт на CSS, он будет скрывать контент до загрузки AMP: <style amp4email-boilerplate>body{visibility:hidden}</style>."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если вы раньше работали с почтовыми рассылками, скрипт в письме может вас насторожить.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Разработчики из Google советуют не беспокоиться: почтовые сервисы, которые поддерживают AMP, обеспечивают высокую безопасность и позволяют выполнять в своих клиентах только проверенные AMP-скрипты для разрешённых компонентов.

"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":" Добавляем изображение "}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Большинство HTML-тегов, которые используются в обычных электронных письмах, могут быть использованы и в AMP-письмах . Однако некоторые теги, например, <img>, заменяются эквивалентами: <amp-img>.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Для тега <amp-img> необходимо задать ширину и высоту изображения. Кроме того, необходимо использовать закрывающий тег </amp-img>. GIF-изображения поддерживаются через <amp-anim>.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Поскольку письма не хранятся на вашем сервере, для указания URL необходимо использовать абсолютный путь c протоколом HTTPS.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Выбрать размер изображения прямо в URL можно через сервис Placekitten, который «заполняет» места для будущих картинок изображениями котят.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Добавьте изображение в письмо, используя такой код:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n \n \n","lang":""}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"7a377bb3-4977-f276-562d-e4a17480af51","width":1560,"height":833,"size":631255,"type":"png","color":"e9dfdf","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":" Делаем письмо отзывчивым "}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Электронная почта может открываться на разных устройствах с разными размерами экранов. Для этого в AMP есть встроенная система макетирования.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Система amp-layout и медиазапросы позволяют легко создавать отзывчивые письма. Чтобы подогнать изображение под нужный размер экрана, добавьте атрибут layout=\"responsive\" в <amp-image>.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Растяните или сожмите окно браузера, и вы увидите, что изображение само меняет размер. Список элементов, доступных в системе amp-layout, можно посмотреть в документации.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"58fce0a9-c654-d50c-0fb8-d3f21250678a","width":1348,"height":664,"size":1682567,"type":"gif","color":"535854","hash":"","external_service":[],"duration":0,"isVideo":false,"has_audio":false}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":" Модифицируем презентацию и макет "}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Одно изображение — хорошо, но что если нужно вставить что-то ещё? AMP поддерживает такие элементы, как аккордеоны (вертикально сложенный список элементов) и боковые панели.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Здесь мы используем тег <amp-carousel> — сделаем для рассылки галерею с котиками, которых можно приютить.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Чтобы вставить карусель, добавьте скрипт amp-carousel внутрь тега <head> .

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n...\n \n...\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Затем поместите ранее добавленное изображение котика между тегами <amp-carousel>.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n \n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Если ничего не изменилось — это хороший знак. Карусель имеет заданный атрибут type=”slides”, который означает, что она будет показывать по одному фото. И поскольку пока вы добавили только одно изображение, навигационные стрелки не появились.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Замените тестовое изображение с Placekitten на нужные изображения внутри <amp-carousel>.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n \n \n \n \n ","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Теперь вы можете листать изображения, кликая по стрелкам с правой и левой сторон карусели.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"41fe3fa0-17c3-394c-0c3f-79baf8822d5e","width":2119,"height":1143,"size":831820,"type":"png","color":"392f26","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":" Делаем письмо стильным "}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

AMP позволяет определять стиль заголовка документа тегом <style amp-custom>. Кроме того, теперь становятся доступны ранее запрещённые классы и псевдоклассы CSS (их список можно посмотреть документации).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Поменяйте текст «Hello, AMP4EMAIL world» на настоящий заголовок.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n

Adorable Adoptable Animals

\n ...\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Выберите стиль заголовка.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n ...\n \n","lang":""}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"9562b825-3481-e683-711f-4653e8314764","width":1560,"height":838,"size":590496,"type":"png","color":"eae1e2","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":" Добавляем динамику "}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

AMP позволяет добавлять различные динамические элементы. Добавим котикам имена и описание, а затем воспользуемся тегом <amp-bind>, чтобы они менялись при клике на следующее изображение в галерее.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Сначала добавьте скрипт amp-bind внутрь тега <head>.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n...\n \n...\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Затем объявите переменную связывания myState как JSON внутри тега <amp-state>. Если фотографий кошек будет четыре, то параметр состояния (\"state\") нужно включить для каждой из них.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n...\n\n \n\n","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Amp-carousel триггерит событие slideChange, с помощью которого мы будем обновлять переменную currentCat, используя AMP.setState.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"

Adorable Adoptable Animals

\n\n\n ","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Благодаря этому коду состояние currentCat фотографии котика соответствует индексу карусели. Таким образом, если мы находимся на слайде event.index=2, состояние будет соответствовать предмету по индексу 2 данного массива.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Единственное, что осталось отобразить, — это имя и описание нашего котика. Добавьте этот код после закрывающего тега amp-carousel.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n

\n Aakash is available for adoption!\n

","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Расширение amp-bind использует выражения и привязки, чтобы динамически менять контент. В примере выше используется привязка [text], которая обновляет текст в теге <span> при каждом изменении состояния (необходимость обновления определяется выражением myState.cats[currentCat].name).

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Не забудьте добавить описание котика в после тега </div>.

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n

About Aakash

Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.

","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Теперь, когда вы меняете фото котиков в карусели, их имена и описания тоже будут меняться.

"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"b594f5de-8c24-cc53-1103-7306ff1380ed","width":1560,"height":837,"size":668311,"type":"png","color":"425a2c","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Полный код:

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n\n\n \n \n \n \n \n \n\n\n

Adorable Adoptable Animals

\n \n \n \n \n \n \n

\n Aakash is available for adoption!\n

About Aakash

Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.

\n \n \n \n\n","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":" Отправляем письмо "}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

В инструменте AMP4Email есть встроенный валидатор. Если разметка валидна, система позволит отправить письмо на почтовый ящик, привязанный к аккаунту Google. Для этого необходимо:

"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Не закрывая вкладку с AMP4Email зайти в свою почту.","Перейти в «Настройки» → «Общие» → «Динамический контент» → «Разработка динамического контента».","В поле «Адрес электронной почты отправителя» ввести amp@gmail.dev","После этого вернуться на вкладку AMP4Email и кликнуть по кнопке «Send»."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Поздравляем! Вы отправили своё первое AMP-письмо.

"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

#инструкции

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":12,"favorites":54,"reposts":0,"views":151,"hits":11611,"reads":null,"online":0},"dateFavorite":0,"hitsCount":11611,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":true,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":true,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/dev/63425-instrukciya-pishem-pervoe-pismo-s-pomoshyu-amp","author":{"id":278577,"name":"Дарья Смирнова","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"1ac00574-2370-3a58-e098-7bf5da958904","width":200,"height":200,"size":12527,"type":"jpg","color":"948e89","hash":"","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5145217,"userId":278577,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5145217"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1521130,"userId":278577,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1521130"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":294422,"userId":278577,"count":0,"shareImage":"https://api.vc.ru/achievements/share/294422"}],"lastModificationDate":1764937683,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":235819,"name":"Разработка","description":"Сообщество разработчиков: публикации о личном опыте, выдающиеся приёмы при решении рутинных задач, полезные материалы для профессионального роста.","uri":"/dev","avatar":{"type":"image","data":{"uuid":"fef5b5fb-e488-5b7f-8445-e3a26a910b44","width":1200,"height":1200,"size":7757,"type":"png","color":"343434","hash":"04042b2b1c1000","external_service":[]}},"cover":{"type":"image","data":{"uuid":"2a214cc5-35cc-58ca-bc07-fc1c892d2101","width":960,"height":280,"size":177,"type":"png","color":"343434","hash":"","external_service":[]}},"lastModificationDate":1642411346,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"dev","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":21}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"cursor":"PuR2GsZKFTvhhGxSAYzn9NSbRrA0Zzqp8pO3vI3Iw0/OL+jFMLaqxEtS4mhH2A==","isAnonymized":true}};