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

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

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

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

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

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

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

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

Регистрация

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

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

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

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

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

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

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

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

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

В графе “Размер приближения по умолчанию” задается уровень масштабирования ленты времени: количество раз, в которое она будет уменьшаться / увеличиваться при нажатии на неё. По умолчанию масштабирования нет (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>

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

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

Конструктор Fliktop. Часть 2. Цифровые коллекции

Конструктор Fliktop. Часть 2. Цифровые коллекции

Продолжая обзор сервиса FlikTop,  рассказываю, как с его помощью можно создавать цифровые коллекции.

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

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

Регистрация

Заходим на сайт, нажимаем на кнопку «Войти».

Дальше нажимаем на надпись «Зарегистрируйтесь!» внизу.

Для регистрации можно использовать аккаунт Google. 

Если регистрируемся через электронную почту, указываем её адрес и придумываем пароль. Нажимаем на кнопку «Зарегистрироваться».

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

После регистрации сервис предложит начать работу с создания карточек или коллекций.

Создаём коллекцию, добавляем карточки

Чтобы создать цифровую коллекцию, в личном кабинете переходим во вкладку «Коллекции», нажимаем «Создать».

Если у Вас уже созданы какие-либо работы в сервисе, то для создания коллекции надо войти в личный кабинет и нажать наверху на кнопку «Создать». А далее выбрать вариант «Коллекцию».

Выбираем шаблон для коллекции: «Разделы», «Колонки» или «Раскадровка».

Оформляем обложку коллекции: даём ей название, описание, меняем картинку на обложке. 

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

Изначально папка с коллекцией пустая. В нее мы и будем добавлять карточки.

Если карточек нет и мы будем создавать их в процессе работы, то нажимаем на кнопку с изображением «плюса».

Добавить можно карточку или раздел. Посмотрим, как создаётся раздел внутри коллекции. Нажимаем на этот вариант.

Раздел – это коллекция внутри коллекции, для еще лучшей систематизации материала. Придумываем обложку, даем название, нажимаем «Далее». 

Затем устанавливаем настройки и сохраняем, нажав на кнопку «Создать».

Если нам нужно создать карточки для новой коллекции, открываем её в личном кабинете, нажимаем «Создать» — «Карточку», открываем шаблон и начинаем работать.

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

Сегодня расскажу о создании других видов карточек.

Чтобы добавить ссылку на веб-ресурс, среди карточек выбираем шаблон «Ссылка»

Вставляем ссылку на сайт в предложенное поле — и она автоматически преобразуется в карточку. название карточки и её описание можно редактировать.

Для дальнейшей настройки нажимаем «Далее».

Настройки стандартные: устанавливаем видимость карточки и возможность её скопировать, добавляем теги и тематику. Чтобы сохранить новую карточку, нажимаем «Создать».

Похожим образом создаём и другие карточки.

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

Редактируем название карточки, нажимаем «Далее», выставляем настройки и сохраняем, нажав «Создать».

Так же добавляются карточки с фотографиями (в меню  «Загрузки»  выбираем «Фото»).

Это шаблон для добавления аудиофайла (в меню «Загрузки»  выбираем  «Аудио»).

А так добавляется видео (в меню «Загрузки» выбираем «Видео»).

Если файл тяжелее 3 Mb, можно добавить видео со сторонних ресурсов, перейдя в меню «Вставка». Здесь можно добавить видеофайл, загруженный на Google Диск или Dropbox.

А что, если карточки уже были заранее созданы? Как их добавить в коллекцию или в раздел? 

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

Готовой работой можно поделиться в Сети, скопировав ссылку – на коллекцию или на отдельную карточку.

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

Вот мой небольшой пример цифровой коллекции — из гиперссылок, документов и видео. Можно перейти по ссылке или щёлкнуть по картинке.