Что можно добавить на ленту времени в сервисе timeline js

Примеры и алгоритм создания ленты времени

Оглавление

Примеры ленты времени

Посмотрите примеры лент времени, созданных с помощью сервиса Timeline JS:

Лента времени о женщинах в вычислительной технике (Women in computing) на сайте сервиса timeline:

Создание ленты времени с помощью сервиса Timeline JS

С помощью сервиса Timeline JS можно создать мультимедийную интерактивную ленту времени

На странице сервиса http://timeline.knightlab.com/ вся процедура создания ленты времени описана как 4 шага!

Для создания ленты времени необходимо создать google-таблицу по определенному шаблону, настроить доступ по ссылке для просмотра (опубликовать для просмотра).
Для полученной ссылки на таблицу данных сервис позволяет сгенерировать:
— URL-ссылку на ленту времени
— HTML-код для встраивания на сайт ленты времени.

План работы над созданием ленты времени:

1) Для выбранной темы подобрать события, например:

12 апреля 1961 — совершён первый полёт человека в космос (Юрий Гагарин) на корабле Восток-1.

12 августа 1962 — совершён первый в мире групповой космический полёт на кораблях Восток-3 и Восток-4. Максимальное сближение кораблей составило около 6.5 км.

16 июня 1963 — совершён первый в мире полёт в космос женщины-космонавта (Валентина Терешкова) на космическом корабле Восток-6.

18 марта 1965 — совершён первый в истории выход человека в открытый космос. Космонавт Алексей Леонов совершил выход в открытый космос из корабля Восход-2.

21 июля 1969 — первая высадка человека на Луну (Н. Армстронг) в рамках лунной экспедиции корабля Аполлон-11, доставившей на Землю, в том числе и первые пробы лунного грунта.

2) Для каждого события подобрать материал, опубликованный в открытом доступе в Интернет, например:

Медиа-данные для одного слайда ленты времени

Источник

Timeline JS сервис для визуализации хронологических событий

Дата публикации: 2015-10-29

От автора: в данном уроке я хотел бы представить Вашему вниманию, очень функциональный сервис по созданию интерактивных временных шкал, на которых удобно и наглядно могут располагаться данные по различным событиям. То есть TimelineJS – очень удобный инструмент для визуализации какой-либо хронологии или последовательности событий.

Официальный сайт сервиса Timeline JS располагается по адресу //timeline.knightlab.com/.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

На главной странице Вы сразу же можете увидеть презентацию возможностей и функционала временной шкалы.

Сервис Timeline JS, позволяет отобразить на сайте временную шакалу, состоящую из двух отдельных блоков. Первый блок – это непосредственно временная шкала с событиями, которые привязаны к конкретным датам. И второй блок – это слайдер, который отображает подробный контент каждого события. В качестве контента события можно использовать как обычный текст, так и различные медиа-материалы: видео, аудио, фото, документы и т.д.

Теперь на главной странице, кликаем по ссылке “Make Timeline” и нас перенаправляют на краткую инструкцию по работе с данным сервисом.

При этом, сразу же хотел бы отметить, что сервис Timeline работает с данными, которые добавлены в таблицу он-лайн документов от сервиса Google. Поэтому для начала необходимо создать данную таблицу, которая называется шаблоном для сервиса Timeline. Но с нуля, конечно же, таблицу мы создавать не будем, так как разработчики рекомендуют использовать уже готовый шаблон, который в последствии, будет отредактирован. В пункте первом инструкции присутствует ссылка, на шаблон разработчиков, который, кстати, используется для демо-презентации. Поэтому кликаем по данной ссылке и переходим на страницу готового шаблона.

При этом данный шаблон необходимо скопировать в собственную учетную запись сервиса Google, для этого используем кнопку “Использовать этот шаблон”. После нажатия на данную кнопку, готовый шаблон будет скопирован в Вашу учетную запись Google.

Далее данный шаблон необходимо опубликовать в интернете – для этого переходим в меню Файл, и нажимаем по ссылке “Опубликовать в интернете…”.

При этом, в выпадающем окошке копируем ссылку, на данный документ. Далее возвращаемся на страницу инструкции и в третьем пункте — вставляем в текстовую область скопированную ссылку.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Полученный код я добавляю на тестовую HTML страницу:

Источник

EduNeo

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

Обзор сервисов для создания красивых таймлайнов: особенности и принципы работы

Что такое таймлайн?

Таймлайн – инструмент для создания учебного материала в хронологической последовательности.

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

Таймлайн в образовании может быть полезен в следующих случаях:

1. Учебный материал представляет собой историю того или иного явления, факта, события.
2. Необходимо продемонстрировать технологию процесса.
3. Нужно проиллюстрировать связь между теми или иными элементами учебного материала.
4. Визуализировать подачу учебного материала.
5. Организовать проектную работу обучающимся.

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

Таймлайн могут быть встроены как в конструкторы электронных учебников (например, iSpring Kinetics (Visuals) «Временная шкала»), а могут представлять собой самостоятельные онлайн-сервисы (сайты). Рассмотрим ряд подобных бесплатных сайтов для создания таймлайна.

Timeline JS

Timeline JS –универсальный сервис, подходящий для решения множества учебных задач.

Пример таймлайна в Timeline JS

Особенности:

1. Основан на работе с документами Google Drive; другими словами, вам необходимо иметь аккаунт Google для создания таймлайна.
2. Итоговая хроника большая по размеру и имеет современный дизайн.
3. Сервис поддерживает большое количество медиа форматов.
4. Может использоваться для совместной работы.
5. Полностью бесплатен.

Недостатки:

1. Нет поддержки русского языка.
2. Нет визуального редактора.

Как пользоваться?

После перехода на сайт необходимо нажать на кнопку Make a Timeline, далее – Get Spreadsheet Template и скачать электронную таблицу с примером. Названия существующих столбцов удалять или переименовывать нельзя, вам нужно только подставить свои данные.

Кратко опишем существующие столбцы в таблице. Начнем с одного из последних столбцов Type (тип). Если мы выберем значение Title (заголовок), то нам не нужно строго прописывать время начала и окончания события. Тогда как Era (эра) строго требует заполнения первых восьми столбцов. Другими словами, от Типа (Type) будет зависеть вид и назначение таймлайна. Значение «Title» или «Era» выбирается один раз для всего проекта.

В поле Media можно вставить ссылку на изображение Flickr, Google Drive или просто из интернета, видео Youtube, Vimeo, аудио SoundCloud и др., точку на карте Google или запись в Twitter.

Последний столбец – Background – фоновый цвет в шестизначным формате. Нам не обязательно знать это формат для каждого цвета или оттенка. Достаточно набрать в браузере поисковый запрос «Таблица цветов» и открыть первый же источник с обозначением кода любого цвета.

После окончания работы над таймлайном необходимо выбрать команду «Файл» – «Опубликовать в интернете» в таблице Google. Скопируем появившуюся ссылку и вернемся на сайт Timeline JS. Выберем пункт 3 – «Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you’ve published the spreadsheet.)» – т.е. вставим ссылку на таймлайн в данную область.

Ниже появиться ссылки для публикации – гиперссылка и код для внедрения через inframe. Ссылку или код можно вставить на ваш сайт ли в систему дистанционного обучения.

Sutori

Sutori – интерактивный таймлайн, созданные специально для образования.

Дизайн таймлайна в Sutori

Особенности:

1. Помимо текста и изображения доступны интерактивные элементы: тесты (2-х видов), форум.
2. Можно вставлять большой объем текста (более 1 стр.).
3. События можно объединять в небольшие группы.
4. Поддерживает совместные проекты.
5. Есть бесплатный тариф.

Недостатки:

1. Нет поддержки русского языка.
2. В бесплатном тарифе можно создать только 2 группы.
3. Педагог не видит результатов теста.

Как работать?

После регистрации и авторизации вам предложат создать группу или историю (create a story), т.е. таймлайн. История может иметь свой баннер – картинка в верхней части страницы размером 1536 х 400 пикселей. Чтобы добавить баннер нажмите на кнопку «Add banner» и перетащите изображение в соответствующее поле со своего компьютера или вставьте ссылку на изображение из Интернета.

Далее укажем заголовок таймлайна (Insert a title) и краткое описание (white a short description… ). Для добавления элементов таймлайна нажмите на кнопку с большим плюсом. Нам будет доступны следующие элементы:

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

Heading (дословно – «заголовок») в данном случаи позволят объединять учебные элементы по какому-либо признаку.

Например, таймлайн «Крупнейшие сражения Великой отечественной войны» может содержать в себе два Heading:
1. «Сражения первой половины войны» с такими элементами, как «Битва за Москву», «Битва за Севастополь» «Блокада Ленинграда» и т.д.;
2. «Сражения второй половины войны» с такими элементами, как «Сталинград», «Курская дуга», «Освобождение Варшавы» и т.д.

Как мы писали выше, форумом в данном таймлайне можно пользоваться только в рамках созданной на Suotri группы, что не очень удобно. А вот создать тест можно для всех. Нам доступно два вида тестовых заданий. Первый из них – задание с выбором одного правильного ответа (Multiple choice).

Второй – задание на установление правильного соответствия (Matching quiz).

Тесты используются для самотестирования – педагоги не могут видеть результаты тестирования обучающихся.

Сохраняется таймлайн Suotri автоматически. Чтобы вставить куда-либо полученное творение нужно нажать на кнопке «Share» (поделиться), далее – «Make a public» (открыть публичный доступ), а затем выбираем либо вариант с гиперссылкой, либо вариант со вставкой кода (Embed code). Данные кнопки находятся вверху страницы под баннером.

Timetoast

Timetoast – классический таймлайн с возможностью выбора платного или бесплатного аккаунта.

Дизайн таймлайна в Timetoast

Особенности:

1. Есть бесплатный тариф.
2. События можно объединять временным периодом.
3. Есть два вида представления хроники.

Недостатки:

1. Нет поддержки русского языка.
2. В бесплатном тарифе нет возможности получить код для вставки.
3. В бесплатном тарифе присутствует реклама.

Как работать?

После регистрации и авторизации на данном сайте нажмите на кнопку «Add timeline +» для добавления своей хроники. На следующей странице запишем название (Title), в статусе (Publish status) укажем значение «Public» – публичный доступ (Draft – черновик – на бесплатном аккаунте не доступен), выберем категорию (Category) и загрузим фото (Photo), нажав на кнопку загрузить (Upload). В заключении нажмем Создать таймлайн (Create timeline).

Логика работы в данной хронике требует сначала создать временной период (timespan), внутри которого будут находиться несколько событий (event). Например, «Династия Рюриковичей» – временной период, «Рюрик», «Игорь», «Святослав» – события.

Для создания временного периода нажмем на кнопку add timespan. Запишем заголовок (title), описание (description) и укажем дату начала и дату окончания события (Start data, End data). В заключении нажимаем на кнопку «Создать временной период» (Create timespan). Поле «Описание» ограничено 500 символами, что позволит добавить относительно большой объем информации.

Для добавления события нажимаем на соответствующей кнопке (Add event) и заполняем указанные поля: заголовок (title), описание (description), дата (data), загружаем изображение (photo – upload). В заключении нажимаем на кнопку «Создать событие» (Create event).

После создания таймлайна нажмите на кнопку More – View this timeline для просмотра своей хроники.

В режиме просмотра нам доступно два варианта – классический горизонтальный (timeline) и вертикальный (list). Чтобы получить ссылку на данную хронику нажмите на кнопку внизу страницы созданного проекта и скопируйте полученную гиперссылку.

Подробнее в видеокасте:

Tline

Tline – таймлайн в виде красочной ленты.

Красочные линии от Tline

Особенности:

1. Хроника представляет собой виджет в духе Образования 2.0.
2. Основан на публикации гиперссылок любого содержания.
3. Бесплатен.
4. Есть возможность вставки опроса.
5. Сервис удобен для создания коллекций ссылок на учебные материалы в виде эффектного блока, публикации вебинаров, ближайших мероприятий и т.д.

Недостатки:

1. Нет поддержки русского языка.
2. Это скорее собрание ссылок, нежили полноценный таймлайн.
3. Размеры публикуемых событий относительно небольшие.

Как работать?

После регистрации/авторизации нажмем на кнопу Creat a Timelime для создания своего таймлайна и последовательно заполняем поля.

Логотип и изображение можно либо загрузить с компьютера, либо скопировать Интернет-ссылку. Ниже расположен еще ряд полей:

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

Если мы выберем первый вариант, то нам предстоит заполнить еще ряд полей и загрузить (из Интернета или с компьютера) изображение.

Если мы выберем вариант «Загрузить изображение с компьютера» в предыдущим шаге, то нам также нужно будет дополнить событие рядом информацией:

В качестве Click URL (ссылка, на которую пользователь перейдет) можно использовать:

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

Видеоподкаст по теме:

Myhistro

На последок мы оставили самое сладкое – myhistro, чуть ли не единственный таймлайн на русском языке.

Таймлайн от myHistro

Особенности:

1. Есть поддержка русского языка.
2. Создаваемые события должны иметь привязку к географическому месту.
3. Есть возможность совместной работы.
4. Можно добавлять тесты.
5. Есть возможность экспорта в различные форматы.

Недостатки:

1. Привязка к геолокации накладывает ограничения на создаваемые события.
2. Относительно маленькие размеры медиа файлов.
3. Тесты основаны на знании дат, а не учебного содержания.

Как работать?

После регистрации и авторизации в myhistro нам нужно перейти на вкладку «События» и нажать на кнопку «Создать мое первое событие».

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

В завершении нажимаем кнопку «Выполнено».

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

Далее переходим на вкладку «История» – «Добавить историю». С помощью истории мы объединяем созданные события в одну презентацию. В окне создания истории запишем ее заголовок, описание и добавим изображение. В следующем окне просто перетаскиваем подходящие события из левого столбца (события) в правый (события в этой история) и сохраняем проект.

В окне проекта мы можем переходить к тому или иному событию с помощью клика мыши или запустить слайдшоу (интервал смены событий – 5 секунд). Справа расположен блок экспорта в CSV (электронная таблица, содержит только текст), в формат KML (формат для загрузки в Google Maps), PDF или DVD. В этом же блоке есть кнопка «Добавить тест». В данном случаи при создании теста удаляется та или иная дата и обучающемуся необходимо эту дату воссоздать.

Еще ниже расположен «Код для блога», с помощью которого можно скопировать код и вставить его на свой сайт или в систему электронного обучения. С помощью кнопки «Изменить свойства окна» мы можем поменять ширину и высоту для кода.

Сравнительная таблица сервисов по созданию Таймлайнов

В заключении представим небольшую таблицу со сравнением описанных таймлайнов:

Рисунок 21. Сравнительная таблица

Источник

TimelineJS

О библиотеке

Принципы

Как простой пользователь этой библиотеки постараюсь объяснить всё простым языком. Пользовательский контент в виде текстовок и общей композиции презентации может храниться в двух местах на выбор на выбор:

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

В случае с Google Sheets вы создаете одну ссылку, в которой будет прописан id вашей таблицы. Ссылку можно открывать на всё окно браузера или в iframe.
В случае с JSON проект TimelineJS состоит из трех основных файлов:

Еще в проекте навигационные стрелки на слайде и иконки по-умолчанию на таймлайне исполнены посредством шрифта. Так вот, если вы ведете независимый образ жизни и хотите всё по своему проекту хранить локально, то надо еще эти шрифты (tl-icons в разных форматах) также сохранить локально и прописать к ним пути в timeline.css.

Любой разработчик может обратиться к библиотеке тремя способами:

Навигация по слайдам может осуществляться тремя способами:

Группировка событий

Это визуальное отделение флажков событий на таймлане по своим вертикальным уровням. Для этого нужно, например, в JSON, в разделе "events": [] прописать ключ group, значением которого будет та или иная группа. Например: "group":"Закупщик". В Google таблице также есть столбец Group. В результате таймлайн выглядеть будет примерно так:

Источник

Что можно добавить на ленту времени в сервисе timeline js

Подготовка исходных текстовых, графических и медийных материалов для создания оси времени (TimeLine).

Работа в сервисе TimeLineJS.
Создание и настройка внешнего вида оси времени.
Экспорт результата.

Вставка результатов работы в свой учебный курс.

Сервис StoryLineJS. Другие сервисы для создания осей времени.

Учебные ролики по сервису: см. ниже

Ролик № 1 «Введение» рассказывает об основном функционале сервиса TimeLineJS и знакомит с примерам осей времени, выполненными в этом сервисе
Ролик № 2 «Создаем ось времени за четыре шага» рассказывает о последовательности действий для создания оси времени в сервисе TimeLineJS.
ВНИМАНИЕ, имеются изменения! См. примечание к ролику 2
Ролик № 3 «Таблица событий. Даты» рассказывает о том, как заполнить таблицу событий и привязать их к определенным датам или промежуткам времени
Ролик № 4 «Таблица событий. Тексты и медиа» рассказывает как заполнить таблицу событий основной информацией о них и поместить ссылки на соответствующие медиаматериалы
Ролик № 5 «Таблица событий. Дополнительные поля» рассказывает о полях таблицы событий, позволяющий присвоить событию тип, группу и назначить ему фон

Серия скринкастов, посвященная разработке timeline при помощи TimeLine JS. Ролик 2/5

Внимание! 18 июля 2017 года в сервисе произошли изменения, которые касаются Шага 2 (3:40—4:45). Теперь операцию Файл/Опубликовать в Интернете можно делать только один раз и не брать ссылку из окна публикации. Ссылку для Шага 3 можно взять ПРЯМО ИЗ СТРОКИ АДРЕСА Гугло-таблицы. Прежний способ больше не работает для новых таймлайнов, но старые таймлайны переделывать не надо.

Источник