В конце 2012 года, на волне популярности iPad, медиажурналисты стали  искать новые форматы и экспериментировать с формой подачи информации.

Наибольшим успехом оказался новый формат сторителлинга — интерактивная история Snowfall редакции New York Times. Так начиналась история лонгридов — интерактивных и эмоциональных медиаисторий с глубоким погружением в тему.

Чтобы создать лонгрид, необязательно обладать навыками программиста, дизайнера и верстальщика. Все эти функции возьмёт на себя российский сервис Tilda.

В бесплатном аккаунте можно создать до 50 отдельных страниц-лонгридов, а можно — и один сайт опять же до 50 страниц. Для работы будут доступны только базовые блоки, но даже с их помощью можно создать весьма симпатичную публикацию.

Для размещения информации и медиа сервис выделяет до 50 мегабайт свободного пространства. Немного, конечно. Поэтому тяжелые фотографии лучше сжимать перед публикацией.

Лонгрид создаётся из отдельных модулей-«кубиков», каждый из которых доведён до совершенства программистами и дизайнерами. А таких модулей внутри сервиса более 500.

Все действия с ними производятся в интуитивно понятном интерфейсе. Например, если вставить текстовый модуль, в нем уже будут подобраны шрифт, цвет, отступы, межстрочный интервал. При необходимости можно внести изменения, но даже без них всё будет выглядеть красиво.

Например, вот так (щёлкайте по ссылке или по картинке).

Регистрация

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

Тут же открывается окошко, в котором предлагается создать проект и придумать ему название. Нажимаем «Создать».

После регистрации на платформе лучше заглянуть в раздел «Тарифы и оплата».

Если вы первый раз на сайте, после регистрации можно активировать на две недели платный тариф Personal. Так можно попробовать все возможности сервиса без ограничений.

Через две недели тариф автоматически перейдет в режим  «Free»  (бесплатный). Платные блоки внутри созданных лонгридов не исчезнут, но только в том случае, если статьи не редактировать.

Шаблоны и блоки

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

Переходим к выбору шаблона. Можно начать с пустой страницы, а можно начать с шаблона (так проще для новичков). Шаблонные страницы Tilda состоят из модулей, которые можно настраивать, менять местами, удалять и добавлять.

Каждый шаблон можно просмотреть перед выбором. Есть универсальные страницы под любое содержимое, есть шаблоны для событий, мастер-классов, концертов, фестивалей, хакатонов, выставок, семинаров, даже для Дня города.

Если в шаблоне понравились многие блоки или приглянулось оформление, можно его взять за основу, а затем отредактировать под себя. Любые блоки из шаблона можно удалить и заменить на свои, оформление тоже можно настроить по-своему.

В категории «Pro» есть несколько шаблонов со сложной версткой, нестандартной типографикой и анимацией. Они рассчитаны на продвинутых пользователей.

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

После этого нужно указать тематику публикации и нажать «Далее».

По желанию указываем задачу: тип, структуру и содержимое нашей будущей страницы. Снова нажимаем «Далее».

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

После запуска генерации нужно немного подождать: сначала ИИ создаст структуру страницы, а затем начнет генерировать каждый блок. Готовый результат, конечно же, можно отредактировать.

Итак, страницу мы создали: или по шаблону, или с помощью нейросети. Теперь приступаем к редактированию.

Внутри каждого шаблона уже есть несколько блоков, которые можно менять и редактировать. Чтобы вызвать меню редактирования каждого блока (модуля), достаточно навести курсор на этот самый модуль.

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

В верхнем левом углу находится выпадающее меню. Используем его, чтобы выбрать один из шаблонов модуля. При наведении курсора на описание шаблона модуля система отображает его миниатюру. У каждого модуля свое обозначение, например, модули обложки обозначены буквами СR.

Обязательно проверяем, чтобы стояли переключатели напротив надписей «Сохранять контент» и «Сохранить настройки». В этом случае мы можем бесконечно менять шаблоны – содержимое не пострадает, а будет перестраиваться под новый шаблон.

Итак, шаблон модуля выбран. Можно его редактировать.

В сервисе два режима редактирования: быстрое и с помощью выпадающего меню. Экспресс-редактирование доступно для текстов: щёлкаем в текст шаблона – и можно стирать и вписывать свое содержание.

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

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

Для масштабных изменений, лучше вызвать меню «Контент». Здесь можно не только изменить текст надписи, но и поменять фоновое изображение… То есть выполнить все возможные манипуляции с содержимым блока. Не забываем нажать «Сохранить и выйти».

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

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

Ещё важно правильно установить расстояние между блоками (сверху и снизу). Лучше, чтобы они были во всех блоках одинаковыми – так сайт будет смотреться аккуратнее. Например, отступ сверху – 3 линии, снизу – 2,5.  Еще проще – сделать отступы везде одинаковыми: и сверху, и снизу.

Сохраняем настройки и возвращаемся к модулю.

Справа вверху находится меню управления модулем. С его помощью можно дублировать, удалить, спрятать или изменить положения модуля на странице.

Какие бывают модули?

Чтобы добавить внутрь лонгрида видео, выбираем одноимённый модуль.

Видеоролики вставляются по ссылке из хостингов YouTube, Vimeo, RuTube и VK. Можно загрузить и свое видео с ПК.

Оформление видео можно завершить в разделе «Настройки»: добавить анимацию, настроить отступы и даже удалить у видео звук.

Еще парочка интересных блоков — «Опрос или голосование» и «Тест» — находится в разделе «Форма». К сожалению, они платные.

«Опрос или голосование» — это модуль В913. Голосование большое – по нескольким номинациям. Внутри каждой номинации может быть до 10 участников голосования. Если у вас только одна номинация, остальные можно удалить.

Редактируется опрос во вкладке «Контент»:

Заголовок — название опроса или голосования.

Описание — расшифровка: о чем опрос и для чего его нужно пройти.

Название кнопки «ответить» — текст на кнопке в конце опроса.

Сообщение об успешной отправке данных — сообщение, которое увидит человек, когда отправит результаты опроса или голосования.

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

.Затем переходим в настройки блока. Выбераем один из вариантов видимости результатов опроса для посетителей сайта:

«Не показывать», «Показывать» или «Показывать, когда проголосовали».

Создатели сервиса просят не использовать блок для проведения серьезных конкурсов с призами. Если нужно голосование на призы, лучше воспользоваться другими сервисами, создать на них форму голосования и добавить ее на сайт как встраиваемый объект.

Блок BF918 («Тест») добавляет интерактивный тест в форме карточек с вопросами. Пройдя тест, пользователь увидит результат и послание, которое вы подготовите. Тест состоит из трех частей:

1. Заголовок, описание и кнопка с призывом пройти тест.
2. Карточки с вопросами, которые последовательно сменяют друг друга после каждого ответа. Карточек может быть неограниченное количество.
3. Карточка с результатом и кнопкой возврата к началу.

Заголовок — пишем вопрос.

Ответ — пишем варианты ответов на вопрос. У каждого вопроса может быть до 6 вариантов ответа.

Описание — комментарий ответа.

Тип вариантов ответа — выбор сколько ответов могут быть правильными: один или несколько.

Номер правильного ответа — укажите номер цифрой (1, 2, 3…6). Если вариантов несколько — перечислите через запятую.

Результаты записываются по порядку от меньшего к большему. «Результат 1» – это результат при наименьшем проценте правильных ответов. Максимальное количество различных результатов – 6.

Например, у нас 10 вопросов и 4 результата: «плохо», «нормально», «хорошо», «отлично»

— «плохо» будет при 0-2 правильных ответах (до 25%);

— «нормально» будет при 3-4 правильных ответах (25-50%);

— «хорошо» будет при 5-7 правильных ответах (50-75%);

— «отлично» будет при 8-10 правильных ответах (75-100%).

Как прокачать Тильду?

Чтобы добавить на страницу встраиваемый объект, выбираем модуль «HTML-код» (блок платный).

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

«Нулевой» блок

Чтобы добавить элемент внутрь блока, нажимаем на «плюс» в левом верхнем углу. Можно добавить текст, изображение, объект, кнопку, видео, tooltip, блок кода, форму или галерею. Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.

В Zero Block поддерживаются все основные манипуляции, выполняемые с помощью мышки: элементы можно перемещать, менять размер, копировать (зажав клавишу Alt), выделять несколько объектов. 

Следующий этап – адаптация блока, чтобы он корректно отображался на всех типах устройств. Создатели сервиса предусмотрели адаптацию для основных типов экранов:

1200 – max (компьютеры)
980 – 1200 (планшет горизонтальный)
640 – 980 (планшет вертикальный)
480 – 640 (смартфон горизонтальный)
320 – 480 (смартфон вертикальный)
Этого достаточно, чтобы дизайн отображался корректно на всех устройствах.

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

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

Публикация

После публикации вам предложат дать название странице (латиницей) и сразу ее просмотреть. 

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

В разделе «Главное» можно поменять название статьи и добавить к ней описание.

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

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

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

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

Внутрь такого листа можно добавить не только тексты, видео и картинки, но и викторины, презентации, встриваемые объекты, диалог-карточки и многое-многое другое. Более 30 разных инфо-блоков.

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

Регистрация

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

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

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

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

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

Первые шаги

Придумываем название рабочего листа и вписываем его в графу  «Заголовок». 

Ниже, в поле «Список содержимого контента» мы будем добавлять информационные блоки.

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

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

Итак, приступаем к редактированию. В разделе «Список содержимого контента» выбираем из выпадающего списка «Контент» нужный инфо-блок.

Вот что можно добавить на лист:

— Аккордеон (большой объём текста, скрытый под заголовками: при нажатии на заголовок открывается текст).
— Слайдер (одно изображение плавно переходит в другое).
— Аудио.
— Онлайн-аудиозапись.
— Игра «Заполни пропуски».
— Диаграмма.
— Коллаж.
— Презентация.
— Диалог-карты.
— Задание «Drag and Drop».
— Задание «Перенеси слова».
— Эссе.
— Игра «Угадай ответ».
— Таблица.
— Текст.
— Встраиваемый объект.
— Изображение.
— Интерактивный плакат.

И ещё в списке контента:

— Задание «Найди горячую точку».
— Фотогалерея.
— Интерактивное видео.
— Ссылка.
— Задание с выделением слов.
— Игра на запоминание.
— Вопрос с несколькими верными вариантами ответа.
— Опросник.
— Набор вопросов.
— Вопрос с одним правильным ответом.
— Викторина на основе утверждений.
— Лента времени.
— Вопрос «Правда или ложь?».
— Видео.
— Вопрос с картинками (Multimedia Choice)

Аккордеон

Слайдер Agamotto

Аудио

Онлайн-аудиозапись

Игра «Заполни пропуски»

Дополнительные опции — в разделах «Общий отзыв» и «Настройки поведения».

Диаграмма

Для создания диаграммы выбираем шаблон “Chart” и устанавливаем её тип: круговая или гистограмма.

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

Коллаж

Для создания коллажа выбираем одноимённый шаблон — “Collage”. Можно создать коллаж из 2-6 фотографий. Изображения масштабируем, нажимая на значки «+» и «-» в левом верхнем углу каждой фотографии.

Сервис помогает установить расстояния между фотографиями, добавить рамки и отрегулировать высоту готовой работы.

Презентация

Чтобы добавить внутрь листа презентацию, выбираем шаблон «Course Presentation».

Подробнее о создании презентации можно прочитать здесь.

Диалог-карты

Диалоговые карточки добавляются с помощью шаблона «Dialog Cards».

Выбираем режим показа карточек (обычный или повторяющийся).

В разделе “Описание задачи” помещаем задание. И начинаем создавать карточки.

Раздел “Текст” — текст на лицевой стороне карточки (вопрос). Раздел “Ответ” — текст для оборотной стороны (ответ). К каждой карточке можно прикрепить изображение и аудиофайл, загрузив его с ПК.

Чтобы перейти к редактированию новой карточки, нажимаем “Добавить диалог”. Карточки можно менять местами, перемещая их “мышью”. Удалить их можно, нажав на значок “крестик” справа.

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

Задание «Drag and Drop» (Тащи и бросай)

Для начала придумываем задание. Например: «Как называется это животное? Перенесите «мышью» на изображение верный ответ».

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

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

Если вариант ответа — это картинка, выбираем значок «Image» (он находится рядом, справа) и повторяем манипуляции (изображение загружается с ПК).

Для дальнейшего редактирования текстов и картинок нажимаем во всплывающем меню на значок «карандаш», для удаления — на значок «корзинка».

Возвращаемся к основной картинке. Нажимаем на значок «карандашик» над ней и попадаем в редактор. Здесь «привязываем» картинку к нужному варианту ответа, отметив его галочкой, и, если надо, устанавливаем прозрачность изображения (чтобы его выделить). Не забываем нажать «Done».

Задание «Перенеси слова»

«Drag the Words» очень похоже на задание «Fill in the Blanks», только слова для заполнения пропусков в тексте нужно брать из предложенного списка.

В разделе “Описание задачи” — задание к упражнению. В разделе  “Текст”  помещаем текст с пропусками, которые нужно заполнить. Нужное слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло — столица *Норвегии*.

Эссе

Эссе (Essay) — это задание, в котором участник должен в ответ на вопрос создать небольшое высказывание-сочинение с использованием ключевых слов (по этим ключевым словам, которые задаёт создатель книги, и будет происходить оценивание и начисление баллов).

Придумываем задание, вспомогательный текст и пример решения. 

Игра «Угадай ответ» (Guess the Answer)

Инфо-блок «Guess the Word» — это вопрос с картинкой. Читатель книги отвечает на вопрос, а затем нажимает на кнопку, чтобы проверить ответ.

Придумываем вопрос, записываем в нужную графу решение, а в разделе  «Медиа» прикрепляем к вопросу картинку (Image) или видео (Video).

Таблица

В интерактивный лист можно добавить небольшую таблицу (Table) в 2 столбика и 2 строки. Данные помещаются в готовый шаблон (просто заменяем названия строк и данные ячеек).

Текст

Текст, добавляемый в книгу, можно форматировать, прикреплять к нему ссылки.

Встраиваемый объект

Изображение (Image)

Изображение в книгу загружается с ПК.

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

Чтобы добавить в лист интерактивный плакат (интерактивное изображение), выбираем шаблон «Image Hotspots».

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

Задание «Найди горячую точку»

Цель такой игры — отвечая на вопрос, найти на изображении правильный ответ, который обозначен невидимой меткой в виде круга или квадрата. Для её создания выбираем шаблон «Find the Hotspot».

В разделе «Фоновое изображение» загружаем загадковую картинку с ПК. По желанию можно её немножко подредактировать (обрезать, повернуть — «Изменить изображение») или указать копирайт (Изменить авторское право).

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

Открывается окно для редактирования. Здесь указываем, правильно или неверно найдена метка и даём обратную связь (“Правильно!” или “Попробуй еще раз!”). Нажимаем “Готово” и перемещаем метку на нужное место.

«Мышкой» можно увеличить или уменьшить её размеры, захватив нужную часть картинки. На изображении может быть несколько меток (“горячих точек”), одна из них обозначает правильный ответ на вопрос.

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

Фотогалерея

Шаблон для создания фотогалереи называется «Image Slider».

Загружаем нужные фотографии в определённом порядке и устанавливаем соотношение сторон слайдера: автоматическое, обычное, нефиксированное. По умолчанию режим автоматический.

Новое изображение добавляется в фотогалерею нажатием на кнопку  «Добавить item».

Интерактивное видео

Шаблон для добавления интерактивного видео так и называется —  «Interactive Video».

Подробнее о нём можно прочитать здесь.

Ссылка

Для добавления гиперссылки выбираем шаблон «Link».

Так выглядит окошко для её добавления.

Задание с выделением слов (Mark the Words)

В этом задании ищем и выделяем в тексте нужные слова.

В графу “Описание задачи” вносим задание. В графу “Область ввода”  вписываем текст со словами, которые нужно найти и отметить. Слова, которые будут правильными ответами на вопрос, отмечаем с двух сторон значком “звездочка”, например: *ответ*.

И в конце — несколько дополнительных настроек.

Игра на запоминание (Memory Game)

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

Чтобы добавить в книгу такую игру, нужно загрузить несколько картинок с ПК — в разделе «Изображение». Дополнительно к ним можно добавить аудиофайлы (с ПК или по ссылке) — в разделе «Звуковая дорожка».

Новую картинку загружаем, нажав на кнопку «Добавить карточка».

В разделах с настройками можно загрузить изображение для оборотной стороны карточек.

Вопрос с несколькими верными вариантами ответа (Multiple Choice)

Вписываем в нужные графы вопросы и варианты ответов, отмечаем галочкой, какие из ответов верные. Правильных ответов может быть сколько угодно: и один, и несколько.

Новый вариант ответа добавляем, нажав на кнопку «Добавить Вариант».

В разделе «Meдиа» к вопросу можно прикрепить картинку, аудио или видео, загрузив их с ПК. По желанию в разделе «Подсказки и обратная связь» даём подсказки отвечающему.

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

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Рпспределять равномерно».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Опросник (Questionnaire)

В интерактивный лист можно встроить опросник с открытыми или закрытыми вопросами. 

В разделе «Библиотека» выбираем тип вопроса и переходим к заполнению шаблона.

Это шаблон для открытого вопроса.

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

Если вопрос обязательный, ставим «галочку», непротив «Required field».

Чтобы добавить новый вопрос, нажимаем на кнопку «Добавить Element». 

Для закрытого вопроса выбираем, сколько ответов на вопрос принимается: один или несколько. Указываем вопрос и варианты ответов.

Новый вопрос добавляем нажатием на кнопку «Добавить вариант».

Викторина с одним правильным ответом (Single Choice Set)

Вписываем в соответствующие графы вопрос и варианты ответов. Первый из вариантов — правильный. Чтобы добавить новый вариант, нажимаем  “Добавить ответ”. А новый вопрос добавляет кнопка “Добавить вопрос”. 

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

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Викторина на основе утверждений (Summary)

В графу “Вводный текст” вписываем задание, например: “Выберите из предложенных утверждений верное”.

В графы “Определение утверждений” вносим утверждения, первое из них — верное. Чтобы добавить новое утверждение, нажимаем “Добавить утверждение”. Если необходимо, в разделе “Подсказка” добавляем подсказку.

Чтобы добавить новый набор утверждений, нажимаем на кнопку внизу “Добавить утверждения”.

В разделе «Общая обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

Лента времени (Timeline)

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

Вопрос «Правда или ложь?»(True/False Question)

Всё просто: в графу “Вопрос” вносим какое-нибудь утверждение и отмечаем, правда это или нет. В разделе “Медиа” можно прикрепить изображение (Image) или видео (Video) к заданию.

Дополнительные настройки показа ищем в разделе «Настройки поведения».

Видео (Video)

Видео добавляется по ссылке из YouTube или с компьютера. В разделах “Визуализация” и “Воспроизведение” скрываются дополнительные видеонастройки. 

Вопрос с картинками (Multimedia Choice)

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

Указываем вопрос и загружаем картинки как варианты ответов. Кстати, вместо картинок можно добавить аудиo или видео. Отмечаем правильные ответы «галочкой» «Правильно».

В разделе «Общая обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

Внизу, в «Поведенческих настройках», есть еще несколько полезных опций.

Викторина с разными типами вопросов (Question Set)

Сначала даём название нашей викторине, загружаем фоновое изображение для обложки.

Можно настроить индикаторы для показа процесса «отвечания» на вопросы викторины (точки или текст, по умолчанию — точки).

А ещё можно указать в процентах количество правильных ответов, необходимых, чтобы считать викторину пройденной (по умолчанию — 50%).

В такой игре предусмотрено восемь типов вопросов, которые нам уже знакомы:

• Multiple Choice — вопрос с одним или несколькими правильными ответами.
• Drag and Drop — подбор пары: текста и изображения, двух изображений.
• Fill in Blanks — заполнение пропусков в тексте или предложении.
• Mark the Words — задание отметить нужные слова в списке или тексте.
• Drag the Words — заполнение пропусков в тексте словами из предложенного списка.
• True/False Question — вопрос «Правда или ложь».
• Essay — эссе.
• Muldimedia Choice — вопрос с картинками.

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

Завершая создание викторины, можно настроить обратную связь, перемешать порядок показа вопросов (Случайные вопросы). 

Публикация

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

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

С помощью сервиса сервис Удоба можно создать интерактивную книгу.

На её страницы добавляются не только тексты, видео и картинки, но и викторины, презентации, встриваемые объекты, диалог-карточки и многое-многое другое. Более 30 разных инфо-блоков.

Регистрация

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

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

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

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

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

Первые шаги

Придумываем название книги и вписываем его в графу «Заголовок». Первая страница уже создана. Чтобы добавить новую, нажимаем на кнопку  «Добавить страница».

Чуть ниже находятся настройки книги. Отмечаем то, что необходимо.

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

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

Итак, приступаем к редактированию. Придумываем название страницы. В разделе «Список содержимого контента» выбираем из выпадающего списка «Контент» нужный инфо-блок.

Вот что можно добавить в книгу:

— Аккордеон (большой объём текста, скрытый под заголовками: при нажатии на заголовок открывается текст).
— Слайдер (одно изображение плавно переходит в другое).
— Аудио.
— Онлайн-аудиозапись.
— Игра «Заполни пропуски».
— Диаграмма.
— Коллаж.
— Презентация.
— Диалог-карты.
— Задание «Drag and Drop».
— Задание «Перенеси слова».
— Эссе.
— Игра «Угадай ответ».
— Таблица.
— Текст.
— Встраиваемый объект.
— Изображение.
— Интерактивный плакат.

И ещё в списке контента:

— Задание «Найди горячую точку».
— Фотогалерея.
— Интерактивное видео.
— Ссылка.
— Задание с выделением слов.
— Игра на запоминание.
— Вопрос с несколькими верными вариантами ответа.
— Опросник.
— Набор вопросов.
— Вопрос с одним правильным ответом.
— Викторина на основе утверждений.
— Лента времени.
— Вопрос «Правда или ложь?».
— Видео.
— Вопрос с картинками (Multimedia Choice)

Аккордеон

Слайдер Agamotto

Аудио

Онлайн-аудиозапись

Игра «Заполни пропуски»

Дополнительные опции — в разделах «Общий отзыв» и «Настройки поведения».

Диаграмма

Для создания диаграммы выбираем шаблон “Chart” и устанавливаем её тип: круговая или гистограмма.

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

Коллаж

Для создания коллажа выбираем одноимённый шаблон — “Collage”. Можно создать коллаж из 2-6 фотографий. Изображения масштабируем, нажимая на значки «+» и «-» в левом верхнем углу каждой фотографии.

Сервис помогает установить расстояния между фотографиями, добавить рамки и отрегулировать высоту готовой работы.

Презентация

Чтобы добавить внутрь книги презентацию, выбираем шаблон «Course Presentation».

Подробнее о создании презентации можно прочитать здесь.

Диалог-карты

Диалоговые карточки добавляются с помощью шаблона «Dialog Cards».

Выбираем режим показа карточек (обычный или повторяющийся).

В разделе “Описание задачи” помещаем задание. И начинаем создавать карточки.

Раздел “Текст” — текст на лицевой стороне карточки (вопрос). Раздел “Ответ” — текст для оборотной стороны (ответ). К каждой карточке можно прикрепить изображение и аудиофайл, загрузив его с ПК.

Чтобы перейти к редактированию новой карточки, нажимаем “Добавить диалог”. Карточки можно менять местами, перемещая их “мышью”. Удалить их можно, нажав на значок “крестик” справа.

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

Задание «Drag and Drop» (Тащи и бросай)

Для начала придумываем задание. Например: «Как называется это животное? Перенесите «мышью» на изображение верный ответ».

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

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

Если вариант ответа — это картинка, выбираем значок «Image» (он находится рядом, справа) и повторяем манипуляции (изображение загружается с ПК).

Для дальнейшего редактирования текстов и картинок нажимаем во всплывающем меню на значок «карандаш», для удаления — на значок «корзинка».

Возвращаемся к основной картинке. Нажимаем на значок «карандашик» над ней и попадаем в редактор. Здесь «привязываем» картинку к нужному варианту ответа, отметив его галочкой, и, если надо, устанавливаем прозрачность изображения (чтобы его выделить). Не забываем нажать «Done».

Задание «Перенеси слова»

«Drag the Words» очень похоже на задание «Fill in the Blanks», только слова для заполнения пропусков в тексте нужно брать из предложенного списка.

В разделе “Описание задачи” — задание к упражнению. В разделе  “Текст”  помещаем текст с пропусками, которые нужно заполнить. Нужное слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло — столица *Норвегии*.

Эссе

Эссе (Essay) — это задание, в котором участник должен в ответ на вопрос создать небольшое высказывание-сочинение с использованием ключевых слов (по этим ключевым словам, которые задаёт создатель книги, и будет происходить оценивание и начисление баллов).

Придумываем задание, вспомогательный текст и пример решения. 

Игра «Угадай ответ» (Guess the Answer)

Инфо-блок «Guess the Word» — это вопрос с картинкой. Читатель книги отвечает на вопрос, а затем нажимает на кнопку, чтобы проверить ответ.

Придумываем вопрос, записываем в нужную графу решение, а в разделе  «Медиа» прикрепляем к вопросу картинку (Image) или видео (Video).

Таблица

В интерактивную книгу можно добавить небольшую таблицу (Table) в 2 столбика и 2 строки. Данные помещаются в готовый шаблон (просто заменяем названия строк и данные ячеек).

Текст

Текст, добавляемый в книгу, можно форматировать, прикреплять к нему ссылки.

Встраиваемый объект

Изображение (Image)

Изображение в книгу загружается с ПК.

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

Чтобы добавить в книгу интерактивный плакат (интерактивное изображение), выбираем шаблон «Image Hotspots».

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

Задание «Найди горячую точку»

Цель такой игры — отвечая на вопрос, найти на изображении правильный ответ, который обозначен невидимой меткой в виде круга или квадрата. Для её создания выбираем шаблон «Find the Hotspot».

В разделе «Фоновое изображение» загружаем загадковую картинку с ПК. По желанию можно её немножко подредактировать (обрезать, повернуть — «Изменить изображение») или указать копирайт (Изменить авторское право).

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

Открывается окно для редактирования. Здесь указываем, правильно или неверно найдена метка и даём обратную связь (“Правильно!” или “Попробуй еще раз!”). Нажимаем “Готово” и перемещаем метку на нужное место.

«Мышкой» можно увеличить или уменьшить её размеры, захватив нужную часть картинки. На изображении может быть несколько меток (“горячих точек”), одна из них обозначает правильный ответ на вопрос.

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

Фотогалерея

Шаблон для создания фотогалереи называется «Image Slider».

Загружаем нужные фотографии в определённом порядке и устанавливаем соотношение сторон слайдера: автоматическое, обычное, нефиксированное. По умолчанию режим автоматический.

Новое изображение добавляется в фотогалерею нажатием на кнопку  «Добавить item».

Интерактивное видео

Шаблон для добавления интерактивного видео так и называется — «Interactive Video».

Подробнее о нём можно прочитать здесь.

Ссылка

Для добавления гиперссылки выбираем шаблон «Link».

Так выглядит окошко для её добавления.

Задание с выделением слов (Mark the Words)

В этом задании ищем и выделяем в тексте нужные слова.

В графу “Описание задачи” вносим задание. В графу “Область ввода”  вписываем текст со словами, которые нужно найти и отметить. Слова, которые будут правильными ответами на вопрос, отмечаем с двух сторон значком “звездочка”, например: *ответ*.

И в конце — несколько дополнительных настроек.

Игра на запоминание (Memory Game)

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

Чтобы добавить в книгу такую игру, нужно загрузить несколько картинок с ПК — в разделе «Изображение». Дополнительно к ним можно добавить аудиофайлы (с ПК или по ссылке) — в разделе «Звуковая дорожка».

Новую картинку загружаем, нажав на кнопку «Добавить карточка».

В разделах с настройками можно загрузить изображение для оборотной стороны карточек.

Вопрос с несколькими верными вариантами ответа (Multiple Choice)

Вписываем в нужные графы вопросы и варианты ответов, отмечаем галочкой, какие из ответов верные. Правильных ответов может быть сколько угодно: и один, и несколько.

Новый вариант ответа добавляем, нажав на кнопку «Добавить Вариант».

В разделе «Meдиа» к вопросу можно прикрепить картинку, аудио или видео, загрузив их с ПК. По желанию в разделе «Подсказки и обратная связь» даём подсказки отвечающему.

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

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Рпспределять равномерно».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Опросник (Questionnaire)

В книгу можно встроить опросник с открытыми или закрытыми вопросами. 

В разделе «Библиотека» выбираем тип вопроса и переходим к заполнению шаблона.

Это шаблон для открытого вопроса.

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

Если вопрос обязательный, ставим «галочку», непротив «Required field».

Чтобы добавить новый вопрос, нажимаем на кнопку «Добавить Element». 

Для закрытого вопроса выбираем, сколько ответов на вопрос принимается: один или несколько. Указываем вопрос и варианты ответов.

Новый вопрос добавляем нажатием на кнопку «Добавить вариант».

Викторина с одним правильным ответом (Single Choice Set)

Вписываем в соответствующие графы вопрос и варианты ответов. Первый из вариантов — правильный. Чтобы добавить новый вариант, нажимаем  “Добавить ответ”. А новый вопрос добавляет кнопка “Добавить вопрос”. 

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

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Викторина на основе утверждений (Summary)

В графу “Вводный текст” вписываем задание, например: “Выберите из предложенных утверждений верное”.

В графы “Определение утверждений” вносим утверждения, первое из них — верное. Чтобы добавить новое утверждение, нажимаем “Добавить утверждение”. Если необходимо, в разделе “Подсказка” добавляем подсказку.

Чтобы добавить новый набор утверждений, нажимаем на кнопку внизу “Добавить утверждения”.

В разделе «Общая обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

Лента времени (Timeline)

В интерактивную книгу можно встроить ленту времени. Подробнее о том, как её создавать и редактировать, можно прочитать здесь.

Вопрос «Правда или ложь?»(True/False Question)

Всё просто: в графу “Вопрос” вносим какое-нибудь утверждение и отмечаем, правда это или нет. В разделе “Медиа” можно прикрепить изображение (Image) или видео (Video) к заданию.

Дополнительные настройки показа ищем в разделе «Настройки поведения».

Видео (Video)

Видео добавляется на страницу книги по ссылке из YouTube или с компьютера. В разделах “Визуализация” и “Воспроизведение” скрываются дополнительные видеонастройки. 

Вопрос с картинками (Multimedia Choice)

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

Указываем вопрос и загружаем картинки как варианты ответов. Кстати, вместо картинок можно добавить аудиo или видео. Отмечаем правильные ответы «галочкой» «Правильно».

В разделе «Общая обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Распределять равномерно».

Внизу, в «Поведенческих настройках», есть еще несколько полезных опций.

Викторина с разными типами вопросов (Question Set)

Сначала даём название нашей викторине, загружаем фоновое изображение для обложки.

Можно настроить индикаторы для показа процесса «отвечания» на вопросы викторины (точки или текст, по умолчанию — точки).

А ещё можно указать в процентах количество правильных ответов, необходимых, чтобы считать викторину пройденной (по умолчанию — 50%).

В такой игре предусмотрено восемь типов вопросов, которые нам уже знакомы:

• Multiple Choice — вопрос с одним или несколькими правильными ответами.
• Drag and Drop — подбор пары: текста и изображения, двух изображений.
• Fill in Blanks — заполнение пропусков в тексте или предложении.
• Mark the Words — задание отметить нужные слова в списке или тексте.
• Drag the Words — заполнение пропусков в тексте словами из предложенного списка.
• True/False Question — вопрос «Правда или ложь».
• Essay — эссе.
• Muldimedia Choice — вопрос с картинками.

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

Завершая создание викторины, можно настроить обратную связь, перемешать порядок показа вопросов (Случайные вопросы). 

Публикация

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

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

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

<iframe src=»https://udoba.org/h5p/embed/50228» width=»925″ height=»698″ 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>

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

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

Сегодня мы с помощью уже хорошо знакомого сервиса  Удоба попробуем создать информационную стену.

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

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

Я с помощью этого шаблона создала виртуальную выставку газет, выходивших на территории Мурманской области в годы войны.

Регистрация

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

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

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

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

Первые шаги

Придумываем название проекта и вписываем его в графу «Заголовок». 

Ниже, в разделе «Properties» — «Panels» мы будем добавлять информационные блоки.

Первый блок уже создан. Рядом с надписью «Изображение» нажимаем на кнопку «Добавить», чтобы загрузить картинку с ПК. 

Чтобы не заполнять обязательное поле «Альтернативный текст», можно выставить галочку напротив надписи «Decorative only» — и оно исчезнет.

Текст для информационного блока можно добавить в поле «Entries». Его можно слегка подредактировать — выбрать размер шрифта для основного текста (Paragraph) и для заголовка (Heading). 

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

В мой работе я использовала самый большой заголовк для названия газеты (Heading 1) и заголовок поменьше для основного текста (Heading 3).

Чтобы добавить ссылку, выделяем текст, к которому хотим её прикрепить, нажимаем на значок с изображением цепочки, в открывшееся поле вставляем ссылку и нажимаем на зелёную галочку. Режим «Open in a new tab» означает, что ссылка откроется в новой вкладке (зелёный цвет означает, что режим включён, серый — отключён).

Первый блок готов. Чтобы добавить новый, нажимаем слева на синюю кнопку «Добавить Panel».

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

Публикация

Лет сорок назад учёные придумали интересный способ запоминания новой информации — с помощью оригинальных флеш-карточек (карточек -«вспышек»). На одной стороне карточки писали вопрос, на другой — ответ, на одной стороне — иностранное слово, на другой — его перевод.

Переворачивая бумажные квадратики снова и снова через определённое время, школьники и студенты запоминали даты, новые термины, иностранную лексику и многое другое.

Сейчас флеш-карточки перекочевали в Интернет, где их можно создавать с помощью различных онлайн-сервисов. Среди них — Удоба.

Как выяснилось, флеш-карточки помогают не только формулы и иностранные слова запоминать, из них можно смастерить интересную викторину. Например, вот такую.

Регистрация

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

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

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

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

Викторина с картинками

Выбираем из выпадающего списка подходящий шаблон — он называется  «Флеш-карты» (Flashcards).

«Описание задачи» — это задание для викторины. Для каждой карточки указываем вопрос и ответ. К карточке можно прикрепить изображение, загрузив его с ПК. В разделе “Подсказка” помещаем добавочные указания для успешного ответа на вопрос. Например: «Фамилия писателя пишется с большой буквы».

Чтобы добавить новую карточку, нажимаем “Добавить карточка”. Карточки можно менять местами, перемещая их “мышью”. Удалить их можно, нажав на значок “крестик” справа.

Аудиовыставка-викторина

А вот ещё идея. С помощью флеш-карточек можно создать выставку-викторину, да не простую, а озвученную. Небольшой пример: прослушайте известное стихотворение и назовите имя автора. Потом переверните карточку — и проверьте себя. 

В разделе “Заголовок” указываем  название проекта. В разделе “Описание задачи” помещаем задание. И начинаем создавать карточки.

Раздел “Текст” — текст на лицевой стороне карточки (вопрос). Раздел “Ответ” — текст для оборотной стороны (ответ).

К каждой карточке можно прикрепить изображение и аудиофайл, загрузив его с ПК.

Чтобы перейти к редактированию новой карточки, нажимаем “Добавить диалог” слева. Карточки можно менять местами, перемещая их “мышью”. Удалить их можно, нажав на значок “крестик” справа.

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

Публикация

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

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

Главное достоинство такого плаката — его интерактивность: читатель может знакомиться с информацией в любом удобном для себя порядке и открывать только интересующие его материалы. 

Регистрация

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

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

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

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

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

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

Выбираем — загружаем

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

Теперь самое интересненькое: прикрепляем метки к изображению. Щёлкая «мышкой», выбираем на картинке место для «горячей точки» (Позиция метки), придумываем ей название (Заголовок) и выбираем тип контента (Элемент содержимого): видео (Video), изображение (Image) или текст (Text).

Самое замечательное в этом сервисе, что к одной метке можно прикрепить сразу несколько типов контента (видео с текстом, изображение и видео, а можно и всё сразу): для этого нажимаем “Добавить item”.

Видеоролики загружаются по ссылке из YouTube или с ПК. У них настройки побогаче.

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

Чтобы добавить новую метку на изображение, нажимаем “Добавить hotspot”. А в заключение нажимаем “Сохранить”.

Публикация

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

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

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

<iframe src=»https://udoba.org/h5p/embed/2832» width=»1014″ height=»622″ 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>

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

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