Timeline – это удобный онлайн-инструмент, который позволяет легко и быстро создавать встраиваемые интерактивные таймлайны, в которые можно добавлять картинки и медиа (видео, гугл-карты, твиты, музыку).
Выглядит это примерно так:
(мы используем в качестве примера шаблон на Timeline.knightlab)
Чтобы создать аналогичный таймлайн, нужно:
- иметь аккаунт в Google (будут использоваться гугл-таблицы)
- выйти на сайт http://timeline.knightlab.com/
Прежде всего, нужно выйти на сайт Timeline и нажать на кнопку Make a timeline.
Затем нажимаем на кнопку Get the spreadsheet template.
После этого в новом окне откроется гугл-таблица с шаблоном. Чтобы использовать этот шаблон, его нужно сохранить на своем гугл-диске, нажав на кнопку “Использовать этот шаблон”. Для этого нужно войти в свой гугл-аккаунт.
Теперь этот шаблон надо отредактировать. Данные, которые в нем содержатся, нужны только как пример. На них можно ориентироваться при заполнении. Чтобы таймлайн работал, достаточно заполнить только два поля – Year и Text. Остальные заполняются в зависимости от желаний и потребностей. Ниже назначение полей будет описано подробнее.
Когда шаблон полностью отредактирован под задачи создаваемого таймлайна, эту таблицу нужно опубликовать (чтобы инструмент Таймлайн имел к ней доступ) и скопировать ссылку на опубликованную таблицу.
Теперь скопированную ссылку нужно вставить в соответствующий раздел на сайте Timeline.
При желании можно изменить настройки ширины, высоты и прочих параметров.
Таймлайн готов. Ниже на странице в поле появится код для его встраивания на страницу. Под ним есть кнопка предпросмотре (preview), с помощью которой можно сразу посмотреть, что получилось.
Теперь немного подробнее о возможностях таймлайна.
В шаблоне есть следующие поля:
- Year. Сюда вписывается год.
- Month. Здесь при желании можно уточнить месяц. Если этого не сделать, то таймлайн отобразит только год и описание события. Если надо к одному году отнести несколько событий, то это можно сделать с помощью полей Month, Date и Time. Месяц обозначается соответствующей цифрой. Например, январь – 1, декабрь – 12.
- Day. Сюда можно вписать конкретную дату. Тоже цифрой (без нулей в начале).
- Time. Это поле может содержать указание времени в течение дня. Время записывается с учетом часов, минут и секунд в таком формате: 05:58:44
Следующая группа полей необязательна к заполнению.
- End Year: год окончания
- End Month: месяц окончания
- End Day: число окончания
- End Time: время окончания
Следующие поля – текстовые.
- Display Date: здесь можно указать, как следует отображать время соответствующего события. Значения этой графы будут отображаться в таймлайне вместо стандартного формата, который обусловлен первыми четырьмя колонками.
- Headline: заголовок. Отображается над текстом.
- Text: описание события.
Раздел медиа:
- Media. Сюда вставляется прямая ссылка на картинку (например, http://www.datadrivenjournalism.ru/wp-content/uploads/2015/01/DDJ_logo-Fin_150x150.png) или код встраивания медиаобъекта. Например, <iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3850384.3551336434!2d23.518984306566935!3d37.58122989001235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sru!4v1444130393214″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>.
- Media Credit: ссылка на источник файла, который использовался в предыдущей колонке.
- Media Caption: подпись к медиа.
- Media Thumbnail. Сюда при желании можно вставить ссылку на маленькое изображение, не больше 32х32 пикселя.
Следующий раздел задает таймлайну дополнительные свойства:
- Type. Указывает статус слайда. Это может быть “заглавный”, то есть открывающий слайд либо слайд, обозначающий эпоху (era). Специфика эпохальных слайдов в том, что они не могут содержать дату и медиа.
- Group. Позволяет визуально группировать связанные между собой события. Для этого тем событиям, которые связаны между собой, в этом поле нужно присвоить тэг – формально, любое слово, которое будет отображаться на таймлайне слева, в начале дорожки, где будут отображаться все события с этим тэгом.
- Background. Это поле отвечает за фон. Можно просто вставить цифровое обозначение цвета (например, #333333) или задать фоновое изображение (вставить прямую ссылку на это изображение).
Подробнее об этом можно почитать в документации самого Таймлайна (http://timeline.knightlab.com/docs/using-spreadsheets.html).
Чтобы подобрать нужный цвет и его цифровое значение, можно использовать онлайн-инструмент Mozilla Color Picker Tool (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool).
Чтобы встроить интерактивную гугл-карту, надо выйти в карты (https://www.google.ru/maps) и найти там нужную локацию. Потом надо вызвать меню (верхний левый угол страницы) и выбрать там пункт “Share or embed map”.
В появившемся окне можно настроить вид карты подходящим образом, выбрать вкладку Embed Map и скопировать код.
