Приз в номинации «Самая красивая лента времени» по праву достаётся сервису Tiki-Toki.
С помощью этого несложного инструмента можно создать красочную и стильную цифровую хронику с использованием самого разнообразного медиаконтента: текстов, гиперссылок, аудио и видео.

«Что же тут необычного?» — скажете вы. Дело в том, что просматривать готовую работу можно в трех разных форматах: как набор карточек-слайдов (по типу презентации),

как обычную ленту времени, слева направо, следуя по временным отсечкам,

и, наконец, в формате 3D, двигаясь по виртуальной тропинке внутрь экрана и щёлкая по объектам. Для переключения в режим 3D ищите специальную кнопку в левом нижнем углу.
А это мой небольшой пример, созданный в этом волшебном сервисе. Как вы уже догадались, наверное, посвящён мой таймлайн жизни и творчеству Михаила Александровича Шолохова. 

Жаль только, что в бесплатном аккаунте можно создать всего одну такую ленту времени. Хотя кто нам мешает зарегистрироваться с ещё одного почтового ящика? 🙂

Регистрация и первые шаги

Заходим на сайт сервиса и нажимаем либо кнопку «Sign Up Now», либо кнопку «Free Sign Up».

Открывается регистрационная форма. Вот такая. 

Для регистрации нужно указать никнейм, адрес электронной почты, возраст, придумать пароль. Ставим крестик в поле «I agree to terms and conditions». Далее нажимаем на кнопку «Sign up for fre account», чтобы создать учетную запись.

Дело сделано! Сразу высвечивается приветственная надпись и приглашение «Create new timeline» (Создать новую ленту времени). Заполняем начальные данные будущего таймлайна.

  • Title – Заголовок.
  • Start Date — начальная дата таймлайна.
  • End Date — конечная дата.
  • Background Image – ссылка на фотографию, которая послужит фоном к ленте времени.
  • Background colour – цвет фона.
  • Highlight colour – цвет выделения (рамки, плашки и т.п.).

Даты приводятся в формате: ДД/ММ/ГГГГ, например: 01/02/1984. Выбираем нужную дату из календаря и подтвержаем выбор, нажав «Confirm».

Далее нажимаем кнопку «Create new timeline» (Создать новую ленту времени).

Создание ленты времени

Минута ожидания — и заготовка для будущего шедевра готова. Открылась фоновая картинка с временными отсечками внизу.

Самое пристальное внимание — в правый верхний угол, где находится административная панель для добавления событий и медиаконтента. Рядом на чёрном фоне — подсказки для работы.

При желании их можно перевести на русский язык: в браузере Google Chrome щёлкаем правой клавишей в любое место на сайте и выбираем опцию «Перевести на русский язык». Вуаля — и работать стало значительно легче!

Создание категорий

Для лучшей навигации по ленте времени можно создать категории, которые позволят группировать события. Название категории будет отображаться над каждым событием ленты времени. Например, для своей хроники я выбрала две категории: «Жизнь» и «Творчество».

Сделать это очень просто. В административной панели выбираем вкладку «My timelines» — «Categories» и затем нажимаем на команду «Create new category».

В поле «Title» (Заголовок) вносим название создаваемой категории. В поле «Colour» выбираем нужную подсветку (все категории могут быть разноцветными).

В поле «Order» вводим нужное нам число. Введенное число определяет приоритетный порядок выдачи категории на экране. Чем меньше число вы укажите, тем раньше будет назначена данная категории к создаваемому событию.

В поле «Size» вводим нужное нам число. Это поле определяет размер категории (количество событий, которое она объединяет). По умолчанию — 10 событий.

В поле «Rows» вводим нужное нам число. Число в данном поле определяет количество строк, которые закладываются в макет при создании события. По умолчанию на каждую категорию приходится 3 строки.

Поле «Layout» — для изменения оформления категории (стандартное и не очень), хотя особых изменений замечено в итоге не было.

Создание событий

Самая интересная вкладка в административной панели – это «Stories». Именно здесь происходит добавление событий и медиаобъектов в ленту времени. Выбираем раздел «My timelines», вкладку «Stories». Нажимаем на «Create new story» — создаём новое событие на ленте времени и приступаем к заполнению его карточки.

Нас интересуют 3 основные вкладки — Basic Info, Media, Extra Info. Начнем с первой и самой главной вкладки – Basic Info.

  • Title — Заголовок истории.
  • Start Date – начальная дата (обязательно).
  • End Date — конечная дата (необязательно).
  • Intro – вступление, краткая аннотация события.
  • Category – категория (необязательно).
  • Link — ссылка на веб-сайт с более подробной информацией по теме, она отобразится в виде кнопки с надписью «Find out more» (при нажатии на эту кнопку сервис перенаправит нас на эту страницу) в окне подробного отображения истории.

Чтобы добавить дату, вызываем календарь — нажимаем на квадратик справа. В результате открывается окно ввода даты. Здесь  мы можем выбрать год и эпоху (AD – Anno Domini, пер. с лат. «нашего бога, нашей эры», BC – Before Christ, пер. с англ. «до Христа, до нашей эры»), а щелкая по стрелкам, можно выбирать нужный нам месяц, выделяя нужный квадрат с числом, можно выбрать нужное число (день) месяца.

Для подтверждения выбора нажимаем «Confirm».

Также в этом окошке можно выбирать и формат даты.

Когда первая вкладка заполнена, обязательно нажимаем «Save» для сохранения!

Переходим к вкладке «Media». После нажатия на надпись «Add new media» открывается окно для заполнения.

«Source» — это поле для ссылок на медиафайлы (фото, видео, аудио). Изображения добавляются только по ссылке (загрузка с ПК — платная опция). Видео добавляется по ссылке из YouTube и Vimeo. Аудиофайлы добавляются по ссылке с сайта SoundCloud.

Если при вставке изображения нажать на значок «лупа» справа, то откроется дополнительное окно, где можно отцентровать картинку и представить её в наиболее выгодном свете. Для этого нажимаем кнопку «Image positioning».

Можно просто подвигать картинку «мышью», а можно воспользоваться инструментами вверху: расположить изображение определенным образом по вертикали и по горизонтали.

В поле «Type» из выпадающего списка выбираем тот тип фала, который собираемся подгрузить к истории ленты времени (Image — изображение, Video — видео, Audio — аудиофайл).

В строке «Index» указываем нужное нам число. Если Вы добавляете несколько изображений к истории, то необходимо на каждый добавляемый медиафайл указать свой индекс. Чем меньше число индекса, тем раньше будет размещено изображение.

В строке «Caption» (Описание) добавляем описание к файлу.

Если добавляем видео или аудио, то появится новое окошко — «Thumb»: здесь можно добавить картинку по ссылке для обложки медиа.

В последнюю важную вкладку «Extra info» вносится основная текстовая информация. В поле «Full text» вводим основной текст, описывающий событие.

В текст можно внедрить гиперссылки. Они должны вписываться в таком формате: [Текст_ссылки](https://www.tiki-toki.com/).

Сохранили изменения? Теперь переходим к созданию нового события…

Создание временного периода

С помощью сервиса можно создать продолжительный временной период с отдельной фоновой картинкой и особым оформлением.

Для этого открываем вкладку «Spans» и нажимаем на кнопку «Create new span».

Указываем название периода, выбираем цвет фона и текста. Если необходимо, загружаем изображение для фона и устанавливаем цвет дополнительного слоя поверх него (оверлэя). Оверлэй можно отключить, выбрав в разделе «Style» опцию «Image only».

Настройки

Чтобы настроить ленту времени, переходим во вкладку «Settings».

Здесь можно изменить название ленты времени, поменять фон и цвет выделения объектов (BG color, Color 2), загрузить новую картинку для фона (BG image) и установить новые временные рамки таймлайна (Start date, End date)

В разделе «Intro» можно добавить небольшую аннотацию к ленте времени (не более 25 слов), а в разделе «About» дать более подробное описание таймлайна. Кстати, в него можно и ссылки добавить, всё в том же формате: [Текст_ссылки](https://www.tiki-toki.com/).

Дополнительно по ссылке для ленты времени можно добавить обложку (Intro img). Здесь же кнопки для регулирования просмотра: увеличение (Zoom) и начало показа — с начала или с конца ленты времени (Begin at).

Более подробные настройки вызываются нажатием кнопок «3D settings» и «Advanced settings».

Так выглядит окошко для настройки «3D settings».

Для понятности перевела его на русский язык.

А это дополнительные настройки (Advanced settings). 

С переводом становится понятнее.

Самая интересная настройка здесь — «Game mode». Если в выпадающем списке напротив неё выбрать опцию «Enabled», то можно включить игровой режим: при просмотре таймлайна в левом нижнем углу появится значок «Game mode» и зрители смогут поиграть с лентой, расставляя события в хронологическом порядке.

Так выглядит игра. Сервис по одному добавляет на игровое поле события, а игрок расставляет их по порядку, передвигая «мышью».

Как поделиться?

Полученной лентой времени можно поделиться только с помощью ссылки. Встроить её на страницу сайта или блога бесплатно не получится.

Ссылку на готовую работу можно взять из строки браузера вверху.

Внизу административной панели есть кнопка «Print»: она поможет скачать ленту времени в формате PDF и распечатать её.