Timeline JS

   

Название сервиса: Timeline JS
Описание: бесплатный сервис для создания ленты времени
Язык: английский
Ссылка:  https://timeline.knightlab.com/

Он позволяет отобразить временную шкалу, состоящую из двух отдельных блоков. Первый блок – это временная шкала с событиями, которые привязаны к конкретным датам. Второй блок – это слайдер, который отображает подробный контент каждого события. В качестве контента события можно использовать тексты, фото, аудио, видео, карты и документы.
Для работы в сервисе необходим аккаунт Google.
Возможность организации групповой работы в сервисе
Поскольку лента времени создаётся на основе таблицы Google, есть возможность пригласить соавторов для работы с ней по адресам электронной почты. Учитель может организовать групповую работу учащихся по созданию ленты времени.

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

Где можно делиться материалами с сервиса
 Ленту времени можно встроить на страницу сайта или блога (пример: http://moya-pesochnitsa.blogspot.com/2016/01/timeline.html)

 

Алгоритм работы в сервисе

Сохранение шаблона

   Заходим на сайт https://timeline.knightlab.com/ и нажимаем «Make a Timeline».
     
  Чтобы получить шаблон для создания ленты времени, нажимаем «Get the Spreadsheet Template».
     
  Открывается шаблон Google таблицы, на основе которого будет создаваться лента времени. Для начала работы необходимо сохранить его на свой Google диск, для этого нажимаем «Использовать этот шаблон» вверху слева.

Заполнение шаблона

  В ячейках шаблона уже содержатся различные данные, их можно удалять из таблицы и вставлять вместо них свои сведения.
Внимание! В таблице нельзя удалять и переименовывать столбцы и объединять ячейки.
  • Какие сведения можно вносить в таблицу?
  • Столбцы A-D – время начала события. А – год (Year), B – месяц (Month), C – день (Day), D – время (Time) в формате 00:00:00. Столбец А обязателен для заполнения (исключение — если в столбце P стоит надпись «title» (титульный слайд).
  • Столбцы E-H – время окончания события. E – год (End Year), F – месяц (End Month), G – день (End Day), H – время (End Time) в формате 00:00:00.
  • Столбец I (Display Date) — временной интервал события, например: январь — май.
  • Столбец J (Headline) – заголовок события.
  • Столбец K (Text) – текстовое описание для события.
     
 
  • Столбец L (Media) – медиаконтент события. В качестве медиаконтента можно использовать:
— изображения или фото (добавляются по Интернет-ссылке),
— видео – из видеохостингов Vimeo, DailyMotion, Vine и YouTube, — аудио — из хостинга Sound Cloud,
— сообщения из Twitter,
— Google-карты,
— статьи из «Википедии»,
— публикации Storify,
— документы из DocumentCloud.
  • Столбец M (Media Credit) – автор медиаконтента или источник медиафайла (в том числе ссылки на Интернет-ресурсы).
  • Столбец N (Media Caption) – заголовок или краткое описание, которое отображается под медиаконтентом (допускается использование ссылок).Столбец О (Media Thumbnail) – путь к миниатюре изображения (ссылка), используемого в кратком описании события на временной шкале. Рекомендуемый размер изображения — не более 32 х 32 px.
  • Столбец Р – для установки стартовой страницы ленты времени (title). По умолчанию значение «title» стоит напротив первого события ленты времени; при этом данное событие отображается при загрузке страницы и исключается из временной шкалы.
  • Столбец Q (Group) позволяет разбить события по отдельным группам. Для этого тем событиям, которые связаны между собой, в этом поле нужно присвоить тег — любое слово, которое будет отображаться на таймлайне слева, в начале дорожки, где будут отображаться все события с этим тегом. Тегов в одной ленте времени может быть несколько.
  • Столбец R (Background) – фон для каждого слайда событий. В качестве фона можно указывать цвет (в формате шестнадцатеричного цифрового кода) или ссылку на изображение, которое будет использоваться в качестве фона. Если ячейку оставить незаполненной, то фон слайда будет белым.
  • Чтобы узнать цифровой код выбранного фонового цвета, можно воспользоваться «Палитрой web цветов»: http://earninguide.biz/webmaster/palette.php
     
  Чтобы добавить новые строки в таблицу, нажимаем внизу слева на кнопку «Добавить строки внизу» а рядом в скобках указываем необходимое количество строк.
     
  Чтобы пригласить учащихся к совместной работе над лентой времени, нажимаем справа вверху «Настройки доступа» и в открывшееся окно вносим адреса электронной почты участников, которых хотим пригласить к совместной работе. Нажимаем«Готово».

Публикация и распространение

  После того, как таблица будет заполнена, нажимаем «Файл» — «Опубликовать в Интернете».
     
  Нажимаем «Опубликовать» и копируем ссылку на созданную Google таблицу.
     
  Полученную ссылку вставляем на сайт сервиса — в раздел 3. А в разделе 4 получаем код для встраивания ленты времени на страницу сайта или блога.
     
  Для предварительного просмотра ленты времени нажимаем «Preview».
     
                 В разделе «Optional settings» находятся дополнительные настройки для созданной ленты времени: можно поменять язык публикации, изменить шрифт, установить порядок показа и масштабирования слйдов. Для того, чтобы открыть список настроек, нажимаем «show».

 

Примеры работ

  1. Биография А.С. Пушкина [Электронный ресурс] // Моя песочница. — Режим доступа: http://moya-pesochnitsa.blogspot.com/2016/01/timeline.html
  2. Лента времени турнира юных химиков в Мариуполе [Электронный ресурс] // Лаборатория творчества: блог учителя химии. — Режим доступа: http://lab-chim.blogspot.ru/2015/11/blog-post.html
  3. Хронология развития человечества [Электронный ресурс] // Contenton. — Режим доступа: http://www.contenton.ru/futurum/index-0.html#0

Полезные ссылки

  1. Гавриленко В. Timeline JS — сервис для визуализации хронологических событий [Электронный ресурс] // WebforMyself. — Режим доступа: http://webformyself.com/timeline-js-servis-dlya-vizualizacii-xronologicheskix-sobytij/
  2. Сакоян А. Интерактивный встраиваемый таймлайн [Электронный ресурс] // Журналистика данных. — Режим доступа: http://www.datadrivenjournalism.ru/2015/10/interactive-timeline/
  3. Хэйсайн К. Приложения для журналистов: Timeline JS [Электронный ресурс] // onMedia. — Режим доступа: http://onmedia.dw-akademie.com/russian/?p=5309

 

Авторизация

Для участия в мероприятии, загрузки выполненных работ,
просмотра итогов мероприятий вам необходимо авторизоваться
Забыли пароль?
войти через

Оставить отзыв

captcha
Закрыть