Вытягиваем историю в линию
Как создать интерактивный таймлайн
Таймлайн — один из самых простых, эффектных и понятных мультимедийных элементов. Во главе угла этого формата стоит хронология. Проверьте, остается ли понятной ваша история, если разбить ее на временные отрезки и факты, не пересекающиеся друг с другом.
инструменты
Как создать таймлайн:
сервисы Timeline JS и Sutori
Таймлайны позволяют увлекательно рассказать истории, основанные на хронологии. Как их можно создать и в каких сервисах?
Такая подача информации может быть уместна, если:
– ваш материал имеет биографический характер, рассказывает об истории того или иного явления;
– необходимо восстановить хронологию сложного процесса и показать логику его развития в составляющих его событиях.

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

Мы можем создавать их разными инструментами — начиная от графических редакторов и заканчивая плагинами к популярным CMS. Мы рассмотрим наиболее популярные онлайн-сервисы.
Timeline JS
Лидером серивсов по созданию таймлайнов является Timeline JS. Рецепт популярности прост: он бесплатен и достаточно прост и универсален, то есть позволяет встраивать полученный результат в страницу любого веб-сайта.

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

Для того, чтобы приступить к работе, нажимаем зеленую кнопку по центру экрана «Make a Timeline». Автоматически перемещаемся к инструкции по созданию таймлайна на английском языке.
Видео-инструкция к сервису
Для ввода данных нам потребуется таблица на Google Диске. Для того, чтобы в ней находились все нужные для Timeline JS колонки, куда нам останется только ввести нашу информацию, нажимаем здесь кнопку «Get the Spreadsheet Template» и получаем необходимый шаблон.

В открывшемся окне Google Диска нажимаем «Использовать этот шаблон» в левом верхнем углу, и копия его появляется в вашем аккаунте. Для того, чтобы у вас все получилось, разработчики просят не удалять существующие колонки и не переименовывать заголовки. Обратите внимание, что только заголовки, остальное – наоборот, демонстрационный контент, который нужно заменить на ваши данные.
Кратко разберем назначение столбцов в таблице
Прежде всего, нужно ввести даты событий – для этой цели отведены первые четыре столбца: год, месяц, день и точное время. Если они имели какую-либо протяженность во времени, можно также указать время их окончания, в том же формате. Следующий столбец – для указания дат в особенном формате, который не соответствует рамкам предыдущих колонок, например: «январь – февраль».

Headline – это заголовок события, которое вы привязали к конкретной дате. Text – его краткое описание. Сюда в формате html можно, например, вставить ссылку на уже опубликованные на вашем сайте материалы.

Media – ссылка на иллюстрацию: фото, видеоматериал, точка на карте Google или запись в Twitter. Причем media отображается не просто ссылкой, но полнофункциональным материалом как встроенный мультимедийный embed-элемент. Сredit – источник, сaption – подпись к нему.

Вот и все: заполнения этих полей будет достаточно. Теперь таблицу необходимо превратить, собственно, в таймлайн. Прежде всего, для этого ее нужно опубликовать через привычное меню Google Таблиц «Файл» — «Опубликовать в интернете». Однако, копировать появившуюся после этого ссылку не нужно, просто закрываем окно «Публикация в интернете» и вместо нее берем ссылку из адресной строки браузера. Она-то нам и нужна.
Иллюстрация к инструкции
Затем возвращаемся на сайт сервиса к пункту 3 инструкции: «Generate your timeline». В поле Google Spreadsheat URL вставляем ссылку на таблицу. Справа от него можно указать желаемые ширину и высоту создаваемого таймлайна, а под заголовком «Optional settings» — и некоторые дополнительные настройки.

Дальше остается только скопировать получившийся в поле под номером 4 «Embed your timeline» код и вставить его в нужную страницу вашего сайта или блога в режиме «текст» или «источник».
Sutori
Несмотря на то, что Timeline JS является безусловным лидером по популярности в Рунете для создания таймлайнов, рассмотрим и функционал другого сервиса.

Главная страница Sutori однозначно отсылает нас к сфере образования, да и при создании аккаунта у вас спросят, студент вы или преподаватель, либо регистрируетесь просто для себя. Регистрацию также можно заменить входом через другой образовательный сервис Edmodo.
Иллюстрация к инструкции
Вряд ли Sutori можно назвать ресурсом для создания таймлайнов в том виде, в каком их можно делать на Timeline JS. Здесь вы просто нанизываете разные типа контента – от текста до видео и обсуждений – на вертикальную ось, по которой продвигается читатель. Временная привязка здесь не обязательна. Однако визуально проект будет выглядеть именно как основанный на хронологии.

Полученный результат можно встроить в страницу сайта или блога, а также поделиться им по ссылке в социальных сетях.
СМОТРИМ ВГЛУБЬ
Создание мультимедийной истории
Современные технологии мультимедийного сторителлинга дарят гигантский набор инструментов. Тем не менее мы заимствуем приемы из журналов, газет, кино, телевидения. Таким образом логика повествования выстраивается согласно кино- и телережиссерами стандартам монтажа. В мультимедийной среде мы тоже используем эти понятия: «композиция», «монтаж», «сюжет». Однако они обретают другой смысл.
Автор
Оксана Силантьева
Что мы делаем для выстраивания мультимедийной истории? Мы обычно собираем материал, определяем фактуру пишем текст – прям как в газете или журнале. Потом мы разбавляем в этот текст фото и видео. Это распространенный метод среди журналистов, которые приходят в онлайн-СМИ из печатных изданий. Доминирует текст и его при желании можно разбавить другими «дополнительными» форматами. Однако такой подход нельзя назвать грамотным. Из хорошо структурированной истории, практически как из хорошей песни, элементов не выкинешь. Каждая часть мультимедийной истории должна поддерживать общую идею материала.
Доминировать должен не текст, а план проекта,
в котором одинаково важны смысл и форма
Нельзя забывать, что пользователь воспринимает экран монитора целиком. Когда я вижу, что редактор пытается втиснуть мультимедийную историю в дизайн ленты новостей, мне хочется его стукнуть. История оказывается зажатой между не относящимися к ней модулями и баннерами. И все это потому, что «сайт так запрограммирован». Такие сайты нужно переделывать специально под мультимедийные истории – должны создаваться другие шаблоны, другие модульные сетки. История сама продиктует, какие форматы необходимо использовать.
Грамотный сторителлер не будет утрамбовывать историю
между двумя рекламными баннерами
Как проверить баланс между сюжетом и формой?

Задайте себе два вопроса:
– Связан ли рассказ логически?
– Вызывает ли рассказ эмоции у читателя?

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

Словно кинорежиссеры, прибегающие к кинематографическим приемам для более эффективного транслирования эмоций главного героя на экран и к зрителю, нам нужно научиться аккуратно вшивать новые форматы в ткань мультимедийного повествования.
Иногда кажется, что все идеи придуманы до нас, песни спеты, слова — написаны. Наверное, в мире есть люди, которые фонтанируют идеями с утра до вечера. Но чаще всего, поглощенные рутиной или непонятные руководством, мы перестаем фантазировать и изобретать. Чтобы пробудить свою креативность, попробуйте следовать советам людей, которые в этом деле доки. Предыдущие три совета вы сможете прочитать, если возьмете задание категории «Наблюдение за 200».
ЗАРЯЖАЕМ КРЕАТИВНОСТЬ. совет №4
Блиц-свидания
Если в вашем окружении есть отзывчивые люди, попробуйте метод блиц-свиданий с идеями. Это похоже на обычные блиц-свидания, когда желающие познакомиться меняются местами и общаются друг с другом по 10 минут, только менее странные и неловкие. Представьте каждому собеседнику свою идею, постарайтесь ответить на все вопросы — это поможет найти креативный способ решения проблемы и завести новых друзей.

Кассиус Киани
продуктовый дизайнер
Что ещё почитать по теме:
Опыт коллег
Упаковка контента
СМИ о 9/11: шесть инструментов мультимедиа
В 2011 году боевики-смертники захватили четыре самолета и направили их на башни Всемирного торгового центра и Пентагон. Погибло 2997 человек. Мы посмотрели, какими средствами пользовались СМИ для освещения трагедии.
Что делать СМИ, когда ничего не происходит?
Семь вариантов контента, который ваша редакция может делать, когда в регионе кончились новости — посмотрите на старые материалы по-новому.
Made on
Tilda