Как рассказать историю при помощи таймлайна
Чтобы подготовить биографическую или историческую справку редакция тратит много времени, а вот понадобится ли она читателю, да и понравится ли — большой вопрос. Обычно справки — это длинный текст, нашпигованный датами, именами и фактами. Читателю скучно, окно его внимания для вас закрывается — вместе со вкладкой вашего сайта в браузере пользователя.
Но есть инструмент, который изящно решает эту проблему: интерактивный таймлайн.
Мы уже рассказывали о Knight Lab — лаборатории журналистких инноваций при Северо-Западном университете (Чикаго), и их Story Map. Инструмент помогает создавать эффектные интерактивные карты. Это отличный способ рассказать историю, по-новому подать подборку фактов, фотографий или новостной сюжет. Похожие возможности дает и Timeline, только в этом случае история разворачивается не в пространстве, а во времени.
Инструмент идеально подходит для:
1. Биографий и некрологов.
Пример — жизнь Нельсона Манделы от Time
2. Хроники события.
Пример — президентские выборы-2012 во Франции от Le Monde.
С таймлайном сухой текст становится наглядным последовательным повествованием, которое — и для редакции это главное! — удерживает внимание читателя. Успех обеспечивает мультимедийный «обвес», которым можно снабдить каждую точку хроники.
Использовать можно: карты Google Maps, треки из SoundCloud, ролики Youtube и Vimeo, твиты, превью любого сайта и ссылки на Википедию.
Технически подготовка таймлайна занимает от силы полчаса. Гораздо больше времени нужно, чтобы собрать контент.
Для примера мы подготовили таймлайн к грядущему дню рождения Мика Джаггера. Сравните: вот биография Джаггера в старом добром текстовом формате.
Давайте посмотрим, что нужно сделать, чтобы превратить ее в интерактивную.
Перед стартом: три важных момента
- Таймлайн — это не статья. Много текста здесь не нужно, наоборот, текста как раз нужно совсем немного. Формат дает возможность донести вашу мысль при помощи фото, видео и аудио-треков, цитат — и этим он ценен. Ваша задача в том, чтобы найти качественный«обвес», а не писать обстоятельные тексты.
- Мысленно вставьте готовый таймлайн в ваш сайт. Он будет отменно смотреться на всю ширину экрана, но если у вашего сайта трехколоночная структура — можно даже не начинать. Технически все сработает, но визуально будет ад: медиа-контент ужмется до совсем небольших превью, в текстах появятся скролы. Решение: посоветуйтесь с дизайнерами и верстальщиками, как можно подвигать блоки и отобразить таймлан на всю ширину.
- Таймлайн позволяет рассказывать несколько историй параллельно, так что если хотите показать причудливые сплетения судеб или развитие разныех аспектов одного события — сможете разбить временную шкалу на несколько частей.
Практикум: как сделать собственный таймлайн
Итак, вначале вам нужно подготовить список событий. Заводите его сразу же в Google Spreadsheet, не придется потом копировать информацию из одного документа в другой. Еще один позитивный момент использования Google Docs — над таймланом могут работать одновременно несколько авторов благодаря возможностям совместного редактирования.
На сайте Timeline можно получить шаблон таблицы и работать в нем:
По клику на кнопку “Google Spreadsheet Template” у вас откроется таблица со всеми нужными столбцами и примером их заполнения. Она же автоматически сохранится в вашем Google Drive.
Для каждого события в таймлайне можно заполнить 10 полей в таблице, в обязательном порядке нужны всего 3 или 4.
Пройдемся по всем опциям:
- Дата начала события (Start date). Формат: месяц/день/год, месяц указывайте без 0, то есть июнь — это 6, а не 06. Можно указать только год, а вот использовать месяц/год возможности нет
- Дата окончания события (End date). Формат тот же, но эту цифру можно не указывать — она не влияет на размещение точки события на временной шкале, отображается только в подзаголовке слайда.
- Заголовок слайда (Нeadline). Обратите внимание: Timeline использует разные шрифты для английских и русских заголовков.
Вместе смотрится диковато, а от мелькания шрифтов на разных слайдах начинает кружиться голова. Поэтому для поля Headline рекомендуем выбрать и использовать один язык.
4. Текст слайда (Text). Оптимальная длина текста в слайде, которую мы установили для себя опытным путем — до 300 знаков. Легко читается, плюс никаких проблем со скролом.
5. Медиа (Media). Сюда вставляем ссылки на медиа-материалы для каждого слайда, если таковые есть — можно оставить и «голый» текст. Где получить линки, которые нужно вставлять в эту колонку?
Google Maps. Вначале отыщите нужное место на карте, а затем кнопку в форме шестеренки в левом нижнем углу. Выбирайте опцию «Поделитесь с друзьями или получите код карты». Вам нужна именно ссылка, а не код. Кстати, использовать можно также Оpen Street Maps и карты Stamen.
Фотографии и изображения могут быть размещены где угодно, главное, чтобы они находились в открытом доступе. Просто скопируйте ссылку на изображение.
Sound Cloud и YouTube. Найдите кнопку «Поделиться» под треком или видео, скопируйте найденный линк. Для вставки видео из Vimeo нужно скопировать ссылку из адресной строки браузера, кнопки «Поделиться» нет.
Чтобы получить превью сайта или статьи в Википедии, вставьте в поле «Медиа» нужную ссылку. Если, собрав таймлайн, вместо превью вы видите заставку сервиса Pagepeeker.сom, просто кликните по этому блоку — видимо, нужный скриншот не сразу подгрузился.
Цитата. Используйте стандартный html-тег. Вот как должно выглядеть содержимое ячейки:
< blockquote > Текст цитаты. </ blockquote > Подпись к цитате
Твит. Скопируйте в поле «Медиа» адрес твита. Обратите внимание: картинки в таймлайн не подтягиваются, только текст.
6. Media Credit (Cсылка на источник). Это поле для копирайта: если необходимо, указываем, откуда был взят контент
7. Мedia Caption (Подпись к эмбеду). Текст, приведенный в этом поле, отобразится под фото, видео или любым другим эмбедом, который вы используете.
8. Media Thumbnail (Превью для медиа). Эта опция помогает разнообразить внешний вид ленты: на ярлычке события появится небольшая картинка. Вам нужно вставить в поле Media Caption ссылку на фото или логотип. Картинка должна быть размером 32×32 px.
9. Type (Тип события). Эта опция назначает первый слайд, с которого таймлайн будет открываться (укажите в ячейке значение “title”), а также создать на временной шкале отбивки, если вы хотите разбить историю на несколько крупных периодов (значение “era”). Строки со значением “era” как слайды не отображаются, они выводятся только на временной шкале. Для них нужно указать только дату и заголовок:
10. Tags (теги). Как раз они разбивают таймлайн на несколько связанных друг с другом повествований. Каждый тег создает такую строку на временной шкале, сюда будут попадать отмеченные тегом события. В примере ниже используются теги «Джаггер» и «Ричардс».
Заполнили таблицу? Считайте, дело сделано. Осталось только опубликовать его и разместить на вашем сайт.
Публикация таймлайна
В найстройках вашей таблицы в Google Spreadsheet выберите опцию “File” — “Publish to the web”. Проверьте, что флаг “Automatically republish when changes are made” выставлен: доводя таймлайн до совершенства, вы сможете сразу видеть «на бою» все изменения, внесенные в таблицу. Кликайте на «Опубликовать», копируйте полученную ссылку и отправляйтесь на сайт Timeline.
Здесь нужно вставить полученную ссылку в поле напротив цифры «3» (Google Spreadsheet URL) и немного поколдовать в настройках:
Size: размеры, в которых ваш таймлайн будет вставляться на сайт. Ширина задается в процентах, высота — в пикселях.
Language: язык, на котором будут подписаны все кнопки и элементы управления таймлайна.
Map Type: здесь задаются тип и вид карты, если вы используете таковую на слайдах в таймлайне.
Fonts: выбор шрифтов для заголовка и текста.
В Misc (Разное) выставьте флаги, если: — ваш сайт работает на движке WordPress (первый флаг); — вы хотите, чтобы пользователь начинал просмотр таймлайна с последнего слайда и продвигался к началу (второй флаг). — вы хотите, чтобы при смене слайдов к урлу добавлялся уникальный параметр, это позволит делиться ссылкой на любой слайд (третий флаг).
— если же хотите стартовать с произвольного слайда, укажите его номер в поле “Start at specific slide number”.
Ниже поля с настройками — кнопки “Preview” и “Link to Preview”. Первая откроет превью вашего таймлайна на этой же странице, вторая — на отдельной вкладке. Проверяйте, как выглядит ваш таймлан, вносите последние правки в контент и настройки. Последние отображаются в коде эмбеда:
Копируйте его и переносите на свой сайт. Ваш таймлайн готов.
Больше о медиа, форматах, подаче и распространении контента, инструментах и аналитике — в нашей группе на Facebook.
Подготовили Богдана Серебриян, Сергей Паранько, Мика Стецовский и Оля Сидорова.
