В предыдущих выпусках проекта мы рассказывали, как создать сайт, наполнить его контентом (тексты/фото/видео и т. д.), превратить в интернет-магазин и продвинуть в Сети, чтобы он не затерялся среди сотен тысяч конкурентов. Следующий шаг — развитие веб-проекта. То есть пользователя нужно не только привлечь, но уговорить возвращаться на ваш сайт снова и снова. Понятное дело, что для этого нужно постоянно создавать интересный и полезный контент. Но вот что делать, если ресурсов, аналогичных вашему, много, а вам обязательно нужно стать лучше конкурентов?

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

  • Спецпроект "Свой сайт":

Как и за сколько создать свой веб-сайт

Что делать после создания веб-ресурса

Как привлечь на веб-ресурс посетителей

Как превратить веб-ресурс в торговую площадку

ДОБАВЛЕНИЕ «ЖИВЫХ» ГРАФИКОВ

Google разработала сервис для конструирования интерактивных графиков и диаграмм (developers.google.com/chart). Сервис позволяет подать наборы цифр в более чем 20 вариантах отображения, включая работу с картами (например, нужно обозначить разными цветами страны с наибольшим количеством населения и показать, как менялась популяция за выбранный период), и вид технического счетчика с красными и зелеными зонами (на нем можно показать, например, зависимость давления от температуры). Но чтобы освоить сервис, нужна минимум неделя.

ИНФОГРАФИКА ЗА НЕСКОЛЬКО КЛИКОВ

Большие объемы данных лучше подавать в виде инфографики, но для ее создания нужен дизайнер. А вот если воспользоваться такими сервисами как Piktochart (piktochart.com), Visual (visual.ly) или Infogr (Infogr.am), то графику легко создать самостоятельно. Выбранный шаблон загружается в редактор, где вы можете наполнить его своими данными. Картинки можно взять из библиотеки сервиса или загрузить свои. Все элементы просто перетаскиваются мышью. Для владельцев сайтов сервисы бесплатные, но если вам нужно сохранить графику в разрешении для печати на бумаге, нужно около $30 в месяц.

ПОДПИСИ ПОД ФОТО: НОВАЯ РЕАЛЬНОСТЬ

На бумаге изображения обычно подписывают, а вот в интернете понятие «подпись» можно значительно расширить. Бесплатный для обычных пользователей сервис Thinglink (thinglink.com) позволяет встраивать теги — гиперссылки и текст — прямо на изображение либо его элемент. При наведении мышкой на подписанный таким образом элемент выскакивает допинформация: текст, фото, видео, аудио, ссылка на тематический сайт, статью в «Википедии» и т. п. Обогащенные изображения можно расшаривать как на сайте, так и в соцсетях — Facebook, Twitter, Tumblr, Edmodo, Google+, Pinterest.

«МАШИНА ВРЕМЕНИ» ДЛЯ ВЕБ-РЕСУРСА

Часто возникает необходимость подготовить мультимедийный материал о событиях в хронологическом порядке (например, показать график развития бизнеса). Два удобных сервиса, разработанных для этой задачи, — Timeline JS (timeline.knightlab.com) и Dipity (dipity.com). Они позволяют включить в «ленту времени» не только текст, но и видео YouTube и Vimeo, музыку из SoundCloud, фото из Flickr, твиты или статьи из «Википедии». Кроме того, можно создать даже географическую привязку событий к Google-картам.

СОЗДАНИЕ «ГОВОРЯЩЕЙ» КАРТЫ

С помощью сервиса StoryMap JS (storymap.knightlab.com) можно добавить на сайт интерактивную карту с описанием/фото/видео, привязанных к разным географическим точкам. Например, на сайте продавца кофе можно показать, откуда приезжают зерна ароматного напитка. Карту можно вставить в пост или отправить в качестве ссылки в Twitter, Facebook или Google+. На этом же сервисе есть инструменты Snapmap (карта Instagram-публикаций) и Gigapixel (изображение делится на мелкие детали, к каждой из которых можно добавить описание).

ПОДАЧА ТЕКСТОВ В ВИДЕ ВЕБ-ЖУРНАЛА

Часто стоит задача создать электронную брошюру. Для этих целей и создан сервис Readymag (readymag.com), с помощью которого в несколько кликов на основе готовых шаблонов можно создать Photo Story (журнал, в котором преобладают фотографии и картинки), Short Story (журнал для небольших историй), Cover (обложки) и Text Page (текстовая информация в креативном виде). Создание одного журнала — бесплатно. Помимо стандартных элементов (фон, текст, аудио, видео), есть необычные. Так, в журнал можно добавить ленту Twitter или Facebook, фрейм с кодом, слайд-шоу или геометрические фигуры.

КАК ВСТАВИТЬ КОД?

В большинстве случаев результаты вашего, реализованного с помощью онлайн-сервисов, творчества нужно вставлять к себе на сайт в виде кода. Для этого необходимо вначале нажать кнопку «поделиться/share» (как вариант — «вставить код/embed code»), после этого появится фрагмент html-кода, сформированного сервисом. Его копируют и вставляют на страницу своего сайта в режиме редактирования html (см. на фото вверху).

ИКОНКИ, КНОПКИ И ЛЕНТОЧКИ: ГДЕ ПОЛУЧИТЬ БЕСПЛАТНО

Часто при наполнении сайта контентом возникает необходимость украсить его интерактивными кнопками (с эффектом при наведении). Их можно сконструировать самостоятельно благодаря онлайн-генераторам CSS (CSS3.me, CSS3Maker.com, CSS3Generator.com, Colorzilla.com и т. д.). Также вам могут понадобиться сервисы генерации иконок, пунктов меню и фавиконок (как iconbuilder.ru, iconizer.net, icontool.ru). Еще один полезный инструмент — Ribbon builder (livetools.uiparade.com/ribbon-builder.html) — для создания ленточек и баннеров.