Добавление аннотаций стало распространенной практикой как в российских, так и в зарубежных сетевых изданиях, популярных, а главное, современных сервисов для этого единицы. Чаще всего используется только один, который, исходя из его популярности, вводит все новые ограничения в бесплатной версии – это Thinglink.

Thinglink

Бесплатный аккаунт на этом сервисе, как пишут сами разработчики, предназначен преимущественно для «тестирования возможностей интерактивных фотографий», хотя основное ограничение здесь – это количество просмотров подготовленной в нем иллюстрации – до 10 000 в месяц. Платная подписка – без ограничений, с функционалом встроенной аналитики, настроек внешнего вида и отсутствием метки thinglink – начинается уже от 20 долларов в месяц на одного пользователя. Для образовательных учреждений, как часто бывает на сервисах подобного рода, есть более выгодное предложение – прежде всего, бесплатный аккаунт подразумевает одновременный доступ еще и для 100 студентов. Да и платная подписка значительно дешевле – 35 долларов, но уже за год.

Впрочем, для того, чтобы попробовать, как работает этот сервис, бесплатного аккаунта на первое время нам хватит. После регистрации сразу начинаем творить. Интерфейс сайта не переведен на русский язык, поэтому нажимаем «Create».

Для начала нам нужно выбрать поле для нашего творчества – то есть, предоставить Thinglink нужную фотографию. Ее можно как загрузить с компьютера, так и импортировать просто по ссылке с любого сайта, либо из Facebook или Flickr. Со своего жесткого диска ее достаточно перетащить из проводника в окно браузера.

После этого начинаем делать метки. Интерфейс сервиса показывает пользователю все возможности – и платные, и бесплатные. Однако те, которые вам недоступны, он либо делает в виде неактивных кнопок, либо вешает на них небольшие пиктограммы замков. Вы увидите это практически сразу после начала работы над изображением.

Пример работы

Алгоритм работы с Thinglink

Первым делом отмечаем точку на изображении – просто кликнув мышью по нужному месту. Далее можно выбрать цвет интерактивной точки. В платном аккаунте возможностей пиктограмм значительно больше.

Добавляем к ней нужный контент. Вариантов того, что мы можем прикрепить к точке на изображении, очень много. Это может быть еще одно небольшое изображение (например, увеличенный фрагмент фотографии), видеозапись с популярных хостингов, ссылка на веб-сайт, произвольный текст, текст с фотографией по ссылке. Иными словами, множество самой разнообразной информации. На платной подписке можно также добавлять аудиозаписи с Soundcloud с непосредственным воспроизведением в pop-up окне, а кроме того, форматировать текст в аннотациях, вставлять в него дополнительные ссылки и списки.

Еще одна возможность прикреплять информацию к точке – это искать ее прямо из рабочего пространства в левом верхнем углу. Сервис ищет материалы самого разного типа по заданному вами ключевому слову. Здесь снова и видео с популярных сервисов, и звук, и другая информация.

После того, как вы добавили все необходимые точки на карту и придумали ей название, можно сохранять и делиться своим творчеством. Для этого после редактирования нажимаем «share» или «поделиться» и получаем окно с возможностью встроить карту в дюжину популярных социальных сетей. Разумеется, есть здесь и embed-код для встраивания в страницу веб-сайта.

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

AnnotatePro

Если для создания аннотированных фотографий вы хотите попробовать что-то другое, кроме Thinglink, можно обратиться к группе сервисов Mockflow. Это целый пакет веб-приложений, в которые в том числе включено AnnotatePro.

Принцип его работы аналогичен уже рассмотренному выше. AnnotatePro значительно менее известно в Рунете, однако вряд ли его можно назвать существенно менее функциональным. Скорее оно несколько отличается рядом функций.

Загружаем изображение и в новом открывшемся окне приступаем к его редактированию.

Пример работы

Количество фигур, меток, которые можно добавить него, здесь значительно больше. При этом не каждая из них может и должна быть интерактивной. В AnnotatePro доступны разнообразные стрелки, геометрические фигуры, даже свой текст, который можно набрать оригинальным шрифтом (скорее всего, для кириллицы большая часть его оформления будет недоступна). Все эти элементы находятся в меню «Components» внизу окна. После добавления на изображение их можно настраивать дальше – цвет, размер, толщину линий. Вообще, среди несомненных плюсов этого сервиса стоит отметить то, что здесь можно настроить под свои вкусы и требование почти все.

Чтобы присвоить клику по «компонентам» определенное действие, нажимаем кнопку «Add Interaction» в левом нижнем углу, после чего нам открывается окно для выбора того, что же мы хотим от конкретной точки. Доступны следующие варианты: текст, ссылка, изображение, youtube ролик, точка на карте и даже презентация c сервиса Slideshare. На готовом изображении лучше всего здесь выглядит, наверное, Youtube – только при наведении курсора на метку с видеозаписью она начинает воспроизводиться на автостарте. Присвоенная ссылка, к сожалению, не превращается в сниппет, текст по умолчанию небольшого кегля и на сером фоне – впрочем, это тоже можно настроить, аналогично поддается изменениям и вставленное в аннотацию изображение.

Что радикально отличает Annotate.Pro от Thinglink – это стикеры. Да-да, здесь можно вставить как надписи вроде «OMG!», так и просто крупные смайлы, а также очки и бороду к портрету. Причем к каждому из этих стикеров – также добавить интерактив.

Наконец, те, кому не хватило вышеперечисленных функций, могут просто порисовать произвольным образом на изображении или добавить к нему эффекты – такие, как пикселизация, лупа, размытие.

После того, как наш творческий замысел реализовался, сохраняем результат кнопкой save в меню сверху слева и через «share» делимся с аудиторией. Возможностей поделиться здесь две – прямая ссылка на страницу на сервисе, либо код для вставки в сайт.

Для самостоятельных

Если вы по тем или иным причинам против использования любых веб-сервисов и предпочитаете все делать на основе возможностей самого веб-сайта, то для многих CMS можно воспользоваться проектом с открытым исходным кодом – Annotorious. Это бесплатное приложение, которое нужно устанавливать на свой сайт. Какие возможности оно предоставляет, можно посмотреть в разделе Demo на ресурсе разработчиков.

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

Инструкция актуальна на октябрь 2017 года.