Как создать ленту времени (таймлайн): обзор Timeline JS и Sutori
- Ваш материал имеет биографический характер, рассказывает об истории того или иного явления.
- Необходимо восстановить хронологию сложного процесса и показать логику его развития в составляющих его событиях.
Благодаря таймлайнам, вы можете связать уже имеющиеся на вашем ресурсе информационные и даже аналитические сообщения, которые выходили в разное время по выбранной вами теме или проблематике. Это, с одной стороны, привлечет к ним новую волну читательского интереса, с другой — еще больше удержит внимание посетителя на странице.
Мы можем создавать их разными инструментами — начиная от графических редакторов и заканчивая плагинами к популярным CMS. Мы рассмотрим наиболее популярные онлайн-сервисы.
Примеры его использования можно посмотреть непосредственно на главной странице сервиса, кроме того, там же есть и официальное видеоруководство на английском языке.
Для того, чтобы приступить к работе, нажимаем зеленую кнопку по центру экрана «Make a Timeline». Автоматически перемещаемся к инструкции по созданию таймлайна на английском языке.
В открывшемся окне Google Диска нажимаем «Использовать этот шаблон» в левом верхнем углу, и копия его появляется в вашем аккаунте. Для того, чтобы у вас все получилось, разработчики просят не удалять существующие колонки и не переименовывать заголовки. Обратите внимание, что только заголовки, остальное – наоборот, демонстрационный контент, который нужно заменить на ваши данные.
Headline – это заголовок события, которое вы привязали к конкретной дате. Text – его краткое описание. Сюда в формате html можно, например, вставить ссылку на уже опубликованные на вашем сайте материалы.
Media – ссылка на иллюстрацию: фото, видеоматериал, точка на карте Google или запись в Twitter. Причем media отображается не просто ссылкой, но полнофункциональным материалом как встроенный мультимедийный embed-элемент. Сredit – источник, сaption – подпись к нему.
Вот и все: заполнения этих полей будет достаточно. Теперь таблицу необходимо превратить, собственно, в таймлайн. Прежде всего, для этого ее нужно опубликовать через привычное меню Google Таблиц «Файл» — «Опубликовать в интернете». Однако, копировать появившуюся после этого ссылку не нужно, просто закрываем окно «Публикация в интернете» и вместо нее берем ссылку из адресной строки браузера. Она-то нам и нужна.

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

Вряд ли Sutori можно назвать ресурсом для создания таймлайнов в том виде, в каком их можно делать на Timeline JS. Здесь вы просто нанизываете разные типа контента – от текста до видео и обсуждений – на вертикальную ось, по которой продвигается читатель. Временная привязка здесь не обязательна. Однако визуально проект будет выглядеть именно как основанный на хронологии.
Полученный результат можно встроить в страницу сайта или блога, а также поделиться им по ссылке в социальных сетях.
Инструкция актуальна на октябрь 2017 года.
С помощью этой технологии были реализованы следующие проекты
скриншоты
Знаете похожие технологии? Расскажите о своем опыте, нам интересно!
Читайте также