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

Универсальный конструктор H5P. Часть 2. Интерактивный плакат

Продолжаем экспериментировать с сервисом H5P. Сегодня на очереди создание интерактивных плакатов.

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

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

А вот и мой небольшой пример - "Животные Лапландского заповедника"

С помощью H5P сделать такой плакат не так уж и сложно. Итак, приступим...


Загружаем - выбираем



Если вы впервые заглянули на сайт сервиса, нужно зарегистрироваться (подробнее о регистрации - здесь).

В личном кабинете нажимаем “Create New Content”, придумываем креативное название для будущего плаката (Title) и выбираем из выпадающего списка подходящий шаблон. Называется он “Image Hotspots”. Загружаем с ПК изображение для плаката (не более 16 Mb) и выбираем цвет метки (“горячей точки”).



Всё дело в точках


Теперь самое интересненькое: прикрепляем метки к изображению. Щёлкая "мышкой", выбираем на картинке место для "горячей точки" (Hotspot Position), придумываем ей название (Header) и выбираем тип контента (Content Item): видео (Video), изображение (Image) или текст (Text).

Самое замечательное в этом сервисе, что к одной метке можно прикрепить сразу несколько типов контента (видео с текстом, изображение и видео, а можно и всё сразу): для этого нажимаем “Add item”. По желанию можно выбрать опцию “Cover entire background image”: при нажатии на метку открывшееся окно будет закрывать всё фоновое изображение.


Текст можно редактировать: менять размер, начертание букв (полужирное, наклонное). К словам можно прикреплять ссылки (выделяем нужное слово или словосочетание и нажимаем на значок с цепочкой).

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


Видеоролики загружаются по ссылке из YouTube или с ПК (не более 16 Mb). У них настройки побогаче. В разделе “Visuals” настраиваем параметры видеоплеера.

В разделе “Playback” выбираем опции автоматического воспроизведения и воспроизведения “по кругу”. В разделе “Add video track” можно добавить титры в формате WebVTT (ну это нам вряд ли потребуется, хотя...).


Чтобы добавить новую метку на изображение, нажимаем “Add hotspot”.


В разделе “Text overrides and translations” можно перевести на русский язык надписи, которые будут появляться при работе с интерактивным плакатом. Например, вот так (но это необязательно):


А в заключение нажимаем “Save”.



Мы ребята поделистые...



Во вкладке “View”  наш интерактивный плакат предстаёт во всей красе. Ссылку на работу копируем из строки браузера вверху.

Для того, чтобы получить код для встраивания видео на страницу сайта или блога, нажимаем “Embed”. Размеры плаката лучше подстроить под размеры блога и сайта, вписав высоту и ширину в пикселях. В этом блоге, например, работает формат 650 на 450.


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

Что ещё почитать по теме?
Универсальный конструктор H5P. Часть 1. Викторины
Универсальный конструктор H5P. Часть 3. "Весёлые картинки"
Универсальный конструктор H5P. Часть 4. Лента времени

5 комментариев:

  1. Здравствуйте! Подскажите, пожалуйста, как именно можно поделиться в Facebook? На страницу блога я вставила, все получилось.

    ОтветитьУдалить
    Ответы
    1. Раньше у сервиса были специальные кнопки внизу под готовой работой для соцсетей. Сейчас создатели от них отказались. Поделиться в соцсетях сейчас можно вручную, скопировав ссылку из браузера.

      Удалить
  2. Спасибо Вам за интересные идеи! Очень увлекательно, обязательно буду использовать!

    ОтветитьУдалить
    Ответы
    1. Спасибо! Здорово, что в работе пригодится. Это самое главное.

      Удалить

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

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

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

Related Posts Plugin for WordPress, Blogger...