вторник, 3 июля 2018 г.

Универсальный конструктор Удоба. Часть 4. Лента времени


Лента времени - хороший способ визуализировать информацию. Это временная шкала, на которую в хронологической последовательности наносятся даты событий. К каждому эпизоду можно добавить изображения, видео, ссылки на веб-ресурсы. С помощью лент времени (цифровых хроник) можно рассказать о биографии и творчестве писателя, истории родного города и о многом другом.

На просторах Интернета более десятка онлайн-сервисов для создания таких цифровых хроник. Теперь среди них появился ещё один - простой, функциональный, на русском языке. Находится он на сайте "Удоба"

Примерно вот такую ленту времени можно смастерить с помощью этого инструмента. Для просмотра лучше развернуть её на весь экран (кнопка вверху справа).



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


Регистрация


Удоба – бесплатный сервис для создания интерактивных публикаций (тесты, викторины, опросы, презентации, игры), в том числе и лент времени на основе англоязычного конструктора H5P. График создается на основе шаблона, который называется Timeline. 

Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем "Войти на сайт" или "Войти" (справа).


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


Теперь нужно создать библиотеку, в которую мы будем добавлять созданные в сервисе работы. В правом меню нажимаем кнопку "Моя библиотека" и далее - "Создать библиотеку".


В открывшейся библиотеке выбираем опцию "Интерактивный контент" и переходим к созданию ленты времени.



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


Из списка шаблонов выбираем тот, который называется “Timeline”.


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


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

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

В разделе "Объект" на обложку ленты времени можно добавить ссылки на различные медиа: контент из Twitter и Flickr, видео из YouTube и Vimeo, Google-карты и аудио из SoundCloud. Медиаобъекты добавляются по ссылке из Сети (копируем ссылку и вставляем в графу "Медиа").




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



Теперь наносим на график временные точки. У каждого события на ленте времени указываем даты начала и окончания в формате ГГГГ, ММ, ДД. Например, дата 4 октября 1916 года будет выглядеть вот так: 1916,10,04 (без пробелов). Минимальное требование сервиса - указать год начала события.


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


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

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


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


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



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


Ссылку на ленту времени можно взять вверху из строки браузера в режиме просмотра (View). Для того, чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу  “Embed” (не забудьте указать в открывшемся окошке размеры работы в пикселях, чтобы она вписалась в блог).



Что ещё почитать по теме?

2 комментария:

  1. Марина Анатольевна, за вашими мастерилками не угнаться. Только новенькое и интересное покажите, а тут еще лучше и полезнее. Очень круто, интересно. Вы успеваете отдыхать или у вас такой запас прочности "северный". СПАСИБО. Срочно буду пробовать

    ОтветитьУдалить
    Ответы
    1. Спасибо за добрые слова! У нас, у северян, очень большой запас прочности. :) Наверное, и правда помогает. скоро Сова улетит на каникулы, а пока спешит порадовать читателей новыми мастерилками.

      Удалить

Этот пост ждёт ваших комментариев.
Не знаете, как оставить комментарий?
Тогда эта инструкция для вас!

- Нажмите на стрелку рядом с окошком "Подпись комментария".
- Выберите "Имя/URL".
- Напишите своё имя, строчку URL можно оставить пустой.
- Нажмите "Продолжить" и комментируйте.

Заранее спасибо!