Интерактивный плакат

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

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

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

https://h5p.org/h5p/embed/44927

С помощью 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.