Почему бы не написать про любимый сервис, претендующий на звание самого универсального моего инструмента, — Удоба?

И действительно, где ещё с помощью одного аккаунта можно создать и игру, и флеш-карточки, и интерактивное изображение, и презентацию, и ленту времени, и видеовикторину, и многое-многое другое… 

 

И всё это совершенно бесплатно и в неограниченном количестве. Готовую работу легко пристроить на страницу сайта или блога.

Сегодня расскажу, как с помощью этого инструмента смастерить ленту времени.

Такой таймлайн получился у меня. Для просмотра лучше развернуть её на весь экран (кнопка вверху справа).

Лента времени состоит из двух блоков. Первый – это временная шкала с событиями, которые привязаны к конкретным датам. Второй блок – это слайдер, который отображает подробный контент каждого события: тексты, фото, ссылки на различные медиа (видео, аудио, контент из соцсетей).

Регистрация

Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем «Создать пользователя».

Заполняем предложенную форму: имя пользователя, адрес электронной почты, пароль, капча… В заключение нажимаем кнопку «Регистрация».

На указанный адрес электронной почты придёт письмо с одноразовой ссылкой для входа на сайт. Переходим по ней.

Осталось нажать «Войти», чтобы перейти к созданию собственной библиотеки на сайте.

Нажимаем на кнопку «Создать библиотеку». 

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

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

Из списка шаблонов выбираем тот, который называется «Шкала времени».

Открывается шаблон. Обязательные для заполнения графы отмечены красной звёздочкой. Придумываем название будущей работе (Заголовок), вписываем аннотацию (поле «Основной текст», в него можно вставлять ссылки) и загружаем фоновое изображение (Добавить).

В графе “Размер приближения по умолчанию” задается уровень масштабирования ленты времени: количество раз, в которое она будет уменьшаться / увеличиваться при нажатии на неё. По умолчанию масштабирования нет (0).

Также можно установить размер ленты времени по высоте (по умолчанию — 600).

В разделе «Объект» на обложку ленты времени можно добавить ссылки на различные медиа: контент из Flickr, видео из YouTube и Vimeo, Google-карты и аудио из SoundCloud, изображения из Интернета по ссылке. Копируем ссылку и вставляем в графу «Медиа».

В гуще событий

Теперь наносим на график временные точки. У каждого события на ленте времени указываем даты начала и окончания в формате ГГГГ, ММ, ДД.

Например, дата 4 октября 1916 года будет выглядеть вот так: 1916,10,04 (без пробелов, через запятую). Минимальное требование сервиса — указать год начала события.

Потом даём название событию, добавляем описание (Основной текст) и, если надо, ключевые слова (Метки).

В разделе “Объект” добавляем ссылки на изображение и другие медиа (контент из Flickr, видео из YouTube и Vimeo, Google-карты и аудио из SoundCloud).

К одному эпизоду можно прикрепить один объект (либо видео, либо картинку, либо что-то другое).

Чтобы добавить на график новое событие, нажимаем “Добавить item”. Количество событий не ограничено.

Так выглядит заполненная карточка события. 

Для отображения на ленте больших временных интервалов можно использовать раздел “Эры”. Указываем даты начала и окончания эры, даем ей название, добавляем описание и ключевые слова (Метки). Чтобы добавить на график новую эру, нажимаем “Добавить item”.

И вот, когда все эпизоды добавлены, выбираем из выпадающего списка “Язык” русский, загружаем обложку для ленты времени и нажимаем “Сохранить”.

Срочно в блог!

Для того, чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу “Вставить”.

Копируем код из открывшегося окошечка. 

Код будет выглядеть примерно вот так:

<iframe src=»https://udoba.org/h5p/embed/6949» width=»1014″ height=»825″ frameborder=»0″ allowfullscreen=»allowfullscreen» allow=»geolocation *; microphone *; camera *; midi *; encrypted-media *» title=»Иван Фёдорович Ушаков»></iframe><script src=»https://udoba.org/sites/all/modules/h5p/library/js/h5p-resizer.js» charset=»UTF-8″></script>

Кстати, из этого кода можно извлечь ссылку для красивого полноэкранного просмотра ленты времени. Эту ссылку я выделила красным.

Чтобы вновь вернуться к редактированию таймлайна, нажимаем на вкладку «Редактировать» вверху над лентой времени.