Вот и заканчивается мой ну очень длинный обзор конструктораBookwidgets.К сожалению, бесплатная демо-версия у этого чудо-сервиса рассчитана только на 30 дней.
В четвертой части обзора я расскажу о том, как с помощьюBookwidgetsможно создавать слайдеры, интерактивные плакаты и фотогалереи.
Для начала напомню, как можно зарегистрироваться в сервисе.
Регистрация
Заходим на сайт сервиса и нажимаем «Start for free». В дальнейшем, чтобы попасть в личный кабинет, выбираем «Sign in».
Теперь, как обычно, заполняем регистрационную форму: указываем адрес и придумываем пароль (не менее 8 символов). Можно зарегистрироваться с помощью аккаунта Google.
После этого в почтовом ящике окажется письмо от BookWidgets с просьбой подтвердить адрес электронной почты. Подтверждаем.
Рабочий кабинет
Вот мы и в личном кабинете. Все упражнения, создаваемые с помощью сервиса, будут называться виджетами. Чтобы перейти к их созданию, выбираем в меню слева «Виджеты» или сразу нажимаем «Создать виджет».
Открываем список шаблонов для работы. Для удобства все они рассортированы по разделам:
Тест и проверка
Игры
Изображения и видео
Математика
Встроенные сторонние сервисы
Прочее
Работать очень просто: выбираем шаблон, открываем конструктор, заполняем графы и генерируем готовое задание. Давайте попробуем.
До и после
Виджет «До и после» помогает сравнивать два изображения. С помощью ползунка создаётся постепенный переход между двумя фотографиями. Конструктор умеет создавать горизонтальный / вертикальный разделитель или прозрачность.
Мой небольшой пример. Мне кажется, интересно получилось — с прозрачностью. Ползунок двигаем влево и вправо, просматривая то одну, то другую фотографию.
Как это сделано? Всё очень просто. Загружаем две фотографии. Выбираем вид разделения (вертикальный, горизонтальный, прозрачный), устанавливаем стартовую позицию ползунка-регулировщика (по умолчанию он будет стоять посередине — значение 50).
Просматриваем и берём ссылку через кнопку «Поделиться».
Изображение с зоной
По-другому этот шаблон можно назвать «Интерактивный плакат». Выбираем изображение, а на него наносим интерактивные метки с дополнительной информацией, которая будет появляться при нажатии на эти метки.
Для начала загружаем фоновую картинку. В разделе «Правило масштабирования изображения» выбираем нужную опцию, чтобы картинка изображалась корректно. У меня было большое изображение, поэтому я выбрала вариант «Покрывать всю картинку и сохранять пропорции». Можно пощёлкать по всем вариантам и через «предварительный просмотр» выбрать подходящий.
Нажимаем «Добавить зону». Переходим к добавлению маркеров. Их шесть.
Кратко расскажу обо всех.
Маркер «Всплывающий текст» прикрепляет к изображению текстовый фрагмент. Можно форматировать текст, прикреплять к нему гиперссылки, изображения, видео, аудио и таблицы.
В разделе «Отметка зоны» выбираем вид маркера: изображение (в виде снежинки), подпись (в виде кружка) или «скрытая зона» (невидимый маркер).
Для маркера можно загрузить свою картинку, если «снежинка» не понравилась (Файл изображения маркера). В разделе «Параметр всплывающего окна» выбираем вариант его появления: справа / слева, сверху / снизу от маркера.
Самое главное — правильно разместить маркер на картинке. Для этого щёлкаем по ней в разделе «Положение».
И с помощью «мыши» перемещаем маркер на нужное место. Нажимаем «Готово». И переходим к следующему маркеру.
Для добавления маркера с всплывающим изображением загружаем картинку, которая, собственно, и будет всплывать. Выбираем вид маркера, отмечаем его местоположение на картинке и регулируем параметр всплывающего окна.
Всё то же самое проделываем в случае со всплывающим видео. Его загружаем с ПК или с Google Диска. Лучше выбирать видео «полегче», чтобы оно хорошо проигрывалось.
Как выяснилось, надо обязательно проставить примерную высоту и ширину всплывающего окна, иначе видеоролик уйдет далеко за пределы фоновой картинки. Я выбрала вариант 560 на 315.
Чтобы добавить всплывающее окошко с встроенной веб-страницей, достаточно вставить подходящую ссылку. Размеры окна уже по умолчанию отрегулированы, но цифры можно исправить вручную.
Кстати, вместо ссылки на сайт, можно вставить ссылку на любой виджет, уже созданный в сервисе. Для этого нажимаем кнопку «Выберите виджет» и добавляем любую работу из личного кабинета.
Чтобы добавить звуковой файл на плакат, загружаем его с ПК или из Google Диска. Все остальные действия остаются прежними: выбираем положение маркера и его вид…
В итоге всех манипуляций у меня получился такой плакат в виде обложки книги.
Поиск слов
Шаблон «Карусель изображений» соединяет «два в одном»: фотогалерею и интерактивный плакат. Загружаем несколько фотографий и добавляем к ним, если необходимо, всплывающие окошки с дополнительной информацией. На выходе получаем практически мини-виртуальную экскурсию.
Загружаем первое изображение. Выбираем нужный масштаб из выпадающего списка и цвет фона для заливки. Придумываем подпись.
Дополнительно можно прикрепить к картинке ссылку на Google-карту. Для этого нажимаем на соответствующую кнопку. Чтобы добавить карту (а точнее, какой-то объект на карте), нужно знать координаты: широту и долготу. Взять их можно в сервисе Google-карта: находим нужный объект, нажимаем на маркер правой клавишей и копируем цифровой код, например такой: 69.06602942008347, 33.29472558722734. Вставляем его в окошко «Широта, Долгота», придумываем подпись.
Чтобы добавить маркер на картинку, нажимаем «Добавить зону». К изображению можно прикрепить «круг с текстом» и «круг с изображением».
Это конструктор для добавления текста. Вставляем текстовый фрагмент, отмечаем местоположение маркера на картинке (щёлкаем по стрелке в разделе «Положение») и переходим к следующему маркеру (Добавить зону) или к следующей картинке (возвращаемся назад).
«Круг с изображением» добавить ещё проще: загружаем картинку, выбираем местоположение маркера на фоновом изображении (Положение) и придумываем подпись.
Еще один интересный шаблон — разновидность интерактивной фотогалереи. На фоновой картинке находится несколько плиток с изображениями. К плиткам можно прикрепить небольшой текст и видео.
Для начала загружаем картинку и определяемся с масштабом.
Чтобы добавить «плитки» переходим в одноимённую вкладку. Нажимаем «Добавить плитку» и загружаем изображение для неё.
К плитке можно прикрепить описание, звук, видео по ссылке из YouTube (ссылка должна быть примерно такого типа: www.youtube.com/watch?v=LLJIef-e-7g, берется из строки браузера) и веб-ссылку.
Можно настроить автопоказ: тогда все файлы будут открываться и проигрываться автоматически.
Так «плитку» за «плиткой» укладываем на фоновую подложку. И не забываем «Поделиться»!
*** О сервисе Bookwidgets можно рассказывать бесконечно. Здесь есть шаблоны для встраивания страниц, создания календаря-планировщика, интерактивного графика и электронной таблицы (должно заинтересовать математиков) и многое-многое другое… В общем, простор для фантазии огромный.
