Как рассказать историю при помощи интерактивной карты
Богато иллюстрированным и анимированным лонгридом уже никого не удивить, но создание такого продукта требует времени и усилий: не обойтись без дизайнера и разработчиков.
Что делать, если всего этого нет, а времени в обрез?
Использовать готовые сервисы!
Мы создали собственные образцы интерактивных карт при помощи инструментов StoryMap и Odyssey.js, чтобы показать: это эффектно, быстро, бесплатно и несложно, то есть — это работает. Во времени мы ограничили себя несколькими часами, дополнительной технической помощи не привлекали: использовали только функционал, предложенный выбранными сервисами. Оба они доступны каждому желающему.
StoryMap от KnigthLab
KnightLab — лучший друг журналиста. Миссия этой инициативы Северо-Западного университета — победа над технологическим неравенством.
В KnightLab полагают, что современная журналистика оказалась под контролем «технократов», которые ничего не смыслят в профессии:
What problem are we solving?
We care deeply about journalism. […] But in 2013, journalism is still struggling with its digitally-focused future. Technologists are winning at media technology innovation, but they do not understand “journalism”. Worse, many journalists barely understand how the Internet works, let alone how to get the most out of storytelling on the web.
Усилия KnightLab направлены на восстановление баланса сил, в помощь технически неподкованным журналистам.
Нужно заметить, что и перед медиа, обладающими возможностью разрабатывать собственные инструменты визуализации контента, стоит вопрос, целесообразно ли это делать с точки зрения затраченных времени и средств. Поэтому конструкторы вроде StoryMap стали большим подспорьем и для крупных СМИ (The Washington Post, The Times), и даже для больших IT-компаний (Yahoo).
Но главное — эти инструменты доступны редакциям онлайн-СМИ, они позволяют им подавать контент нетривиальным способом без применения особых технических навыков и развертываются в краткие сроки.
Способы применения интерактивных карт StoryMap ограничиваются лишь фантазией журналиста: вот проект по сериалу «Игра престолов», а вот — чумовой разбор картины Иеронима Босха. Здесь даже карты в привычном понимании нет, пользователь перемещается по самой картине, рассматривая и изучая ее.
Но перейдем к практической части.
Для своей «истории на карте» мы использовали материалы, собранные во время поездки по украинским Карпатам: по большей части это фотографии из Instagram и несколько видео. На подготовку проекта ушло 3–4 часа— не считая время путешествия.
Посмотрите, как у нас получилось.
Как создать свою карту на StoryMap: пошаговая инструкция
- Магия начинается с главной страницы сервиса — кликайте по Make a storymap now.
2. Для работы с конструктором нужен аккаунт в Google, данные вашего проекта сохраняются в Google Drive.
3. Зададим название проекту, это может быть и черновое имя, его можно изменить в процессе работы, просто переименовав титульный слайд.
4. Теперь выбираем нужный тип визуализации. Если это карты — выбор очевиден. Для экспериментов подойдет вариант Gigapixel. Он позволяет загружать вместо карты произвольную фотографию высокого качества и «путешествовать» по ней.
Так выглядит новый, еще пустой проект:
А так — готовый:
Пройдемся по элементам управления. Их немного.
- Кнопка Mу Maps в правом верхнем углу служит для навигации между разными материалами, если вы создали несколько карт:
2. Кнопка Options позволяет настроить проект:
- StoryMap Size — установки по умолчанию подходят почти всем, их можно изменить в любой момент, в том числе — отдельно для iframe.
- Language — русского нет, но это влияет только на интерфейс сервиса.
- Fonts — на ваше усмотрение.
- Treat As — важный параметр. Конструктор в режиме Cartography самостоятельно определяет масштаб слайда исходя из масштаба находящихся рядом с ним кадров. Сделано это для мягкого эффекта перехода. Если вам нужно задать точный масштаб, включите режим Image. При этом линии маршрутов и точки на карте будут доступны только при наведении курсора.
- Call To Action — можно включить/выключить, вписать произвольный текст. Элемент будет выглядеть как кнопка на титульном слайде.
- Map Type — можно выбрать контурные или топографические карты, а также подключить свои, произвольные.
3. Вкладка Sharing важна для SMM.
В поле Description прописывается текст, с которым ваша карта будет поститься в соцсети. Для Facebook это 300 символов, для Twitter — 140 минус длина ссылки. В поле Featured Image нужно загрузить фотографию для поста. Оптимальный размер — 1200 х 630 пикселей; можно и меньше (600 х 315), но в Facebook лучше всего выглядит именно такой размер.
4. Кнопка Save нужна для сохранения правок, а появляющаяся то и дело Publish Changes — для публикации карты в открытом доступе.
5. Ниже, по центру, расположены кнопки Edit и Preview. Кстати, предпросмотр работает нестабильно, лучше сразу публиковать все изменения (кнопка Public Changes), проверяя проект на отдельной вкладке.
6. Новый слайд создается с помощью Add Slide расположенной в левой вертикальной колонке.
По своей структуре кадры, включая титульный, не отличаются друг от друга.
Управление каждым слайдом состоит из трех блоков: карты, медиа, и текстового поля.
Карта
Пользоваться ею так же просто, как и любой другой онлайн-картой. Есть даже поиск. Слева расположен ползунок масштаба. На каждом слайде может быть только один маркер.
Медиа
Конструктор поддерживает большое число источников контента — эмбеды из Instagram, Twitter, YouTube, Vine, Soundcloud, и материалы из Wikipedia или Storify. Для любителей классики — загрузка фотографии с жесткого диска.
Для мультимедийного контента можно добавить подписи, а также сопроводительный текст в поле Caption. Последней функцией мы не пользовались — предпочли отдельную область для создания подписей:
Здесь все интуитивно понятно: заголовок и поле для редактирования текста, с зачатками wysiwyg и возможностью вставлять ссылки либо произвольный html.
Для любителей графических изысков: кнопкой Slide Options вызывается меню с настройками фоновой иллюстрации для слайда или его цвета. Для примера можно посмотреть на проект Yahoo к ЧМ-14 по футболу. Мы не играли с этим функционалом, потому что и так все оказалось достаточно опрятно.
Вот как выглядит слайд в результате всех манипуляций:
Собственно, все! Чем больше слайдов, тем длиннее маршрут на титульном слайде, автоматически прокладываемый движком.
Важный совет: используйте видео, это поможет разнообразить пользовательский опыт. Треки из Soundcloud или “трансляции” из Spotify тоже хороши для этого.
Готовый проект можно разместить на отдельном домене или вставить при помощи iframe на сайт вашего СМИ. Если пользоваться автоматически сгенерированным линком на StoryMap, могут быть проблемы с шарингом в соцсетях.
И еще раз — ссылка на наш тестовый проект.
Odyssey.js от CartoDB
Сервис CartoDB, позволяющий создавать собственные карты, представил летом 2014 года инструмент Odyssey.js. Он предназначен для быстрой подготовки интерактивных историй.
Map based storytelling made easy
Odyssey.js helps change this reality. The open source library enables creators to build interactive stories, no coding skills required; and makes map-based interactive storytelling easier to develop. It features a sandbox in which anyone can easily outline interactive stories using the human readable markup language Markdown to mix narrative, interaction, and multimedia. The sandbox allows non-coders and coders alike to test the capabilities of the library. The JavaScript library can be used by developers to create complex interactions for map-based storytelling.
Давайте посмотрим на несколько историй, созданных при помощи Odyssey.js. Рекомендуем не открывать несколько ссылок одновременно, это может поднапрячь ваш браузер.
Итак, посмотрите в динамике, как сообщения в Twitter во время празднования Рамадана отражены на карте мира. А вот как Twitter реагирует на финал Уимблдона-2014.
Пролистайте слайды с анонсами 25 крупнейших летних фестивалей в Европе (только не покупайте билеты, ведь это прошлогодние анонсы). Посмотрите, как NY Daily News использовали Odyssey.js в материале о чрезмерно криминальном уикэнде. Окунитесь в ретроспективу о кругосветном плавании HMS Beagle в XIX веке.
Наша пробная история на карте состоит из пяти слайдов, повествующих о поездке в Стамбул. На ее подготовку ушло около часа.
Как создать карту с помощью Odyssey.js
Начнем с небольшого пояснения.
Прежде, чем создавать историю, вы можете ознакомиться с документацией по Odyssey.js и узнать обо всех возможностях продукта. Вкратце, дела обстоят так:
- Вам не нужны никакие специальные технические навыки для создания истории, однако, наличие таких навыков расширит ваши возможности при работе с Odyssey.js
- В процессе подготовки истории вы столкнетесь с языком разметки Markdown, поэтому справочник по синтаксису просмотреть все-таки придется
- Javascript API позволяет провести детальную настройку истории, но для этого вам потребуется помощь специалиста
Теперь, когда вы готовы начать работу над историей, предстоит выбрать темплейт — шаблон, в соответствии с которым, она будет отображена.
- Slides представляет собой подобие презентации в PowerPoint: вы переключаетесь между слайдами. Именно этот темплейт мы выбрали для нашего тестового образца.
- Scroll похож на классический лонгрид. Вы прокручиваете экран вниз, приводя карту и информационные блоки в движение.
- Torque представляет из себя анимированный таймлайн. Таким образом вы можете представить историю в динамике.
Дальнейшая настройка любого из представленных шаблонов устроена одинаково, однако Torque содержит большее количество actions — действий, происходящих во время просмотра истории.
Инструмент настройки вашей истории называется Sandbox. Это редактор, в котором происходит абсолютно все, что вам предстоит сделать. Например:
- Создать слайд
- Выбрать место на карте
- Присвоить точке маркер
- Написать заголовок и сопроводительный текст к слайду
- Добавить к слайду изображение
- Провести настройку слайда
- Создать следующий слайд
Рекомендуем просмотреть короткое видео от создателей Odyssey.js, демонстрирующее работу Sandbox:
Итак, вы приступили к созданию истории и видите в Sandbox заполненный образец из пяти слайдов, демонстрирующий базовые возможности Odyssey.js.
Вместо того, чтобы стирать этот образец, давайте его просто отредактируем.
Прежде всего определимся с типом карты. Базовый комплект Odyssey.js состоит из следующих вариантов:
Слева: CartoDB Light, пустая карта материнского сервиса. Напоминаем, что на CartoDB можете создать свою карту самостоятельно, а в дальнейшем использовать ее на Odyssey.js.
В центре: Nokia Day, обыкновенная карта с обозначением названий улиц, районов, зданий и т.п.
Справа: Stamen Watercolor, художественная карта, представляющая собой сомнительную пользу для журналиста. Впрочем, мы выбрали именно ее. За красоту.
Выбираем тип карты и едем дальше.
Оставим только один слайд из образца от авторов Odyssey.js, чтобы было меньше путаницы, а затем изменим его:
- -baseurl указывает нам на источник карты, не будем ничего менять.
- -title указывает название нашей истории. Назовем ее «Москва».
- -author указывает имя автора истории. Напишем здесь «Журналист»
- #Adding images to your story указывает на заголовок слайда и одновременно является командой разметки, обозначающей его начало. Изменим на «Пробный слайд»
- -center, -zoom указывают на положение карты. Передвинем карту к Москве, так, чтобы крестик по центру экрана указывал на нужное нам место. А затем зафиксируем карту в этой позиции, нажав на кнопку add слева от заголовка #Пробный слайд и выбрав move map to current position.
- Добавим еще и маркер, выбрав в меню add функцию show marker at current position.
- Функция sleep в меню add пригодится нам только если мы будем использовать actions, т.е. динамику. Она выражает время в миллисекундах приостановки карты в данной точке.
- Изменим текст “By default, images are also supported” на «Я передам это Владимиру».
-  указывает на изображение в слайде, где New York является подсказкой, а url — адресом. Изменим подсказку и адрес.
Теперь посмотрим, что получилось:
Отлично, мы переехали из Нью-Йорка в Москву. Удовольствие сомнительное, конечно, но что поделать.
Теперь создадим второй слайд, чтобы у нас получилась короткая история. Пойдем простым путем:
- Скопируем полностью наш первый слайд.
- Изменим заголовок второго слайда.
- Выделив курсором область второго слайда в Sandbox, изменим место на карте, а затем зафиксируем его и добавим новый маркер.
- Изменим текст и изображение.
Итак, у нас готова простенькая история на двух слайдах. Мы можем полистать ее прямо здесь, в режиме редактирования, наблюдая как карта реагирует на переключение слайда. А можем нажать на кнопку share story (бумажный самолет в правом нижнем углу Sandbox) и посмотреть глазами читателя, скопировав url. Здесь же мы можем получить код iframe, необходимый для эмбеда готовой истории на страницу нашего сайта.
Руководствуясь таким подходом, мы подготовили наш тестовый образец с историей о Стамбуле. Для оформления текста пришлось немного покопаться в синтаксисе Markdown.
Если же вам захочется добавить в историю динамики, то рекомендуем подробнее изучить документацию в той ее части, что касается раздела actions.
Что выбрать?
На наш взгляд StoryMap больше подходит для самостоятельной работы журналиста, ограниченной временными рамками. А уж если времени в запасе достаточно, то есть возможность призадуматься над эстетическими достоинствами истории, поработать над графическими решениями. Изучите раздел advanced на сайте продукта, чтобы узнать о всех его возможностях.
С другой стороны, потенциал Odyssey.js по части интеграции в проект представляется более впечатляющим, но требует значительно большего времени и помощи javascript-разработчика. Здесь вы можете работать с собственной картой, как угодно крутить API, редактировать темплейты, в большей степени менять представление вашей истории. Изучите детально документацию продукта.
Больше о медиа, форматах, подаче и распространении контента, инструментах и аналитике — в нашей группе на Facebook.
Подготовили Богдана Серебриян, Сергей Паранько, Мика Стецовский и Оля Сидорова.
