Как нарисовать Таймлайн
Все любят таймлайны. Если вы не знаете, что это — то рассказываю. Это такие интерактивные штучки-слайды, перескакивая по которым вы можете понять связь между событиями во времени. Особенно таймлайны полезны при рассказе историй, растянутых во времени и со множеством действующих лиц. Кто, что, когда — вот это все. Удобно.
Вот тут есть интерактивный Таймлайн про Нельсона Манделлу, чтобы было понятно что к чему.
Или вот есть картинка:
Но кажется, что самому создать таймлайн — это долго и нудно. И нужно знать всяческий там хтмл и джава-скрипт. Спешу обрадовать. Не нужно этого знать в подробностях. Достаточно только понимания принципов.
В общем, невозбрано, просто и даже где-то весело, красивенький интерактивненький таймалайн на страничках вашего сайта можно создать с помощью гуглотаблиц и сервиса TimeLine Creator от “Лаборатории лыцарей” по адресу http://timeline.knightlab.com/
По ссылке, на самом деле, все написано. Но на английском. Я же попробую коротко рассказать на русском, как это делается.
Для начала, вам нужно взять, и скопировать себе гуглотабличку. Вот эту. Ну, то есть — открываете и делаете “Файл”->”Создать копию”. Это нужно для примера “как сделано”. Кроме того — в табличке уже скомпонована модель данных, которую очень нежелательно как-то менять. Тупо не будет работать. Менять можно только содержимое ячеек, кроме названия столбцов и их порядка.
И начинаете вбивать контент в свою табличку.
По большому счету — там все ясно и без подробных инструкций, просто отмечу что:
- Столбцы от A до H — это вам для ввода дат на Таймлайне. Поскольку это самые важные данные для данного вида инфографики, там очень все строго — если хотите, чтоб работало, то нужно заполнить хотя бы “начало события”. Это Year-Month-Day-Time. Год — обязательно. Остальные вехи по необходимости. Заполнять таймлайн, кстати, можно в любом порядке — обработчик все равно выстроит события в нужном хронологическом порядке.
- В столбцах Headline и Text нужно написать “Заголовок” и “Текст”.
- Столбец Media нужен, чтоб вы сделали свой таймлайн красивым и всячески высоктехнологичным. Короч, в столбец можно (и нужно!) вставить ссылки на медиаконтет. Картинки, видео, звуки, карты, посты в Твиттере — легко. Просто копируете, и ставите. Нужно только следить, чтоб там не было контента, защищенного паролями всякими. А то можно попасть — у вас все будет работать, а у телезрителей — нет. Потому что доступ к данному контенту у них тупо запрещен.
- Ну, там дальше еще можно подписать контент, разместить ссылочку на источник — вот это всё.
- Столбец Type тоже полезный. Там можно определить тип слайда. Он может быть простым (не заполненным), заголовком Title или что-типа era (не разобрался — сами пробуйте)
- События на таймлайне можно группировать. Это в столбце Group соответственно.
- Еще можно у слайда поменять цвет бэкграунда. В формате #rrggbb
Собственно, все.
Дальше публикуете табличку — “файл”->”опубликовать”. Копируете сгенеренную ссылку и пастите на страничке сервиса http://timeline.knightlab.com/
Как-то так:
Там можно выбрать некоторые опции. Например, “начать с конца” или расположить шкалу времени сверху/снизу. Выбрать шрифт. Указать слайд начала или там указать уровень масштаба от “0” до “10”, где чем меньше цифра, тем больший промежуток на шкале.
Потом жмем кнопу Get link to preview:
Копируем ссылку или готовый код для ифрейма. Ифрейм мы можем просто пастить на любую страничку в режиме “редактировать хтмл”.
Все!
Вот что получилось:
