Как сделать интерактивное фото: добавить ссылки и комментарии на фотографию
Впрочем, для того, чтобы попробовать, как работает этот сервис, бесплатного аккаунта на первое время нам хватит. После регистрации сразу начинаем творить. Интерфейс сайта не переведен на русский язык, поэтому нажимаем «Create».
Для начала нам нужно выбрать поле для нашего творчества – то есть, предоставить Thinglink нужную фотографию. Ее можно как загрузить с компьютера, так и импортировать просто по ссылке с любого сайта, либо из Facebook или Flickr. Со своего жесткого диска ее достаточно перетащить из проводника в окно браузера.
После этого начинаем делать метки. Интерфейс сервиса показывает пользователю все возможности – и платные, и бесплатные. Однако те, которые вам недоступны, он либо делает в виде неактивных кнопок, либо вешает на них небольшие пиктограммы замков. Вы увидите это практически сразу после начала работы над изображением.
Добавляем к ней нужный контент. Вариантов того, что мы можем прикрепить к точке на изображении, очень много. Это может быть еще одно небольшое изображение (например, увеличенный фрагмент фотографии), видеозапись с популярных хостингов, ссылка на веб-сайт, произвольный текст, текст с фотографией по ссылке. Иными словами, множество самой разнообразной информации. На платной подписке можно также добавлять аудиозаписи с Soundcloud с непосредственным воспроизведением в pop-up окне, а кроме того, форматировать текст в аннотациях, вставлять в него дополнительные ссылки и списки.
Еще одна возможность прикреплять информацию к точке – это искать ее прямо из рабочего пространства в левом верхнем углу. Сервис ищет материалы самого разного типа по заданному вами ключевому слову. Здесь снова и видео с популярных сервисов, и звук, и другая информация.
После того, как вы добавили все необходимые точки на карту и придумали ей название, можно сохранять и делиться своим творчеством. Для этого после редактирования нажимаем «share» или «поделиться» и получаем окно с возможностью встроить карту в дюжину популярных социальных сетей. Разумеется, есть здесь и embed-код для встраивания в страницу веб-сайта.
Все, ваша работа выполнена. Конечно, мы рассмотрели только сами технические возможности ресурса. Наполнить их содержанием и найти интересные, подходящие именно для ваших целей решения вы сможете только опытным путем. С учетом того, что сервис достаточно прост в освоении, самое время приступить к этим опытам.
Принцип его работы аналогичен уже рассмотренному выше. AnnotatePro значительно менее известно в Рунете, однако вряд ли его можно назвать существенно менее функциональным. Скорее оно несколько отличается рядом функций.
Загружаем изображение и в новом открывшемся окне приступаем к его редактированию.
Чтобы присвоить клику по «компонентам» определенное действие, нажимаем кнопку «Add Interaction» в левом нижнем углу, после чего нам открывается окно для выбора того, что же мы хотим от конкретной точки. Доступны следующие варианты: текст, ссылка, изображение, youtube ролик, точка на карте и даже презентация c сервиса Slideshare. На готовом изображении лучше всего здесь выглядит, наверное, Youtube – только при наведении курсора на метку с видеозаписью она начинает воспроизводиться на автостарте. Присвоенная ссылка, к сожалению, не превращается в сниппет, текст по умолчанию небольшого кегля и на сером фоне – впрочем, это тоже можно настроить, аналогично поддается изменениям и вставленное в аннотацию изображение.
Что радикально отличает Annotate.Pro от Thinglink – это стикеры. Да-да, здесь можно вставить как надписи вроде «OMG!», так и просто крупные смайлы, а также очки и бороду к портрету. Причем к каждому из этих стикеров – также добавить интерактив.
Наконец, те, кому не хватило вышеперечисленных функций, могут просто порисовать произвольным образом на изображении или добавить к нему эффекты – такие, как пикселизация, лупа, размытие.
После того, как наш творческий замысел реализовался, сохраняем результат кнопкой save в меню сверху слева и через «share» делимся с аудиторией. Возможностей поделиться здесь две – прямая ссылка на страницу на сервисе, либо код для вставки в сайт.
Если вы по тем или иным причинам против использования любых веб-сервисов и предпочитаете все делать на основе возможностей самого веб-сайта, то для многих CMS можно воспользоваться проектом с открытым исходным кодом – Annotorious. Это бесплатное приложение, которое нужно устанавливать на свой сайт. Какие возможности оно предоставляет, можно посмотреть в разделе Demo на ресурсе разработчиков.
И, конечно же, можно поискать популярные плагины для вашей платформы, которые, вполне вероятно, позволяют добавлять аннотации и к тексту и к изображениям на сайте.
Инструкция актуальна на октябрь 2017 года.
С помощью этой технологии были реализованы следующие проекты
Знаете похожие технологии? Расскажите о своем опыте, нам интересно!
Читайте также