четверг, 4 марта 2021 г.

Сервис Bookwidgets: успеть за 30 дней. Часть 4. Слайдеры, интерактивные плакаты и фотогалереи

Вот и заканчивается мой ну очень длинный обзор конструктора Bookwidgets. К сожалению, бесплатная демо-версия у этого чудо-сервиса рассчитана только на 30 дней. Но если постараться, можно многое успеть и порадовать себя и учеников интересной игрой или увлекательным заданием. Платная подписка обойдется примерно в 9 долларов за месяц.

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

О том, как зарегистрироваться и освоиться в сервисе, читаем здесь. Работать очень просто: выбираем шаблон, открываем конструктор, заполняем графы и генерируем готовое задание. 


До и после

Виджет «До и после» помогает сравнивать два изображения. С помощью ползунка создаётся постепенный переход между двумя фотографиями. Конструктор умеет создавать горизонтальный / вертикальный разделитель или прозрачность.

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

А вот такой же слайдер, только с вертикальным разделителем.

Как это сделано? Всё очень просто. Загружаем две фотографии. Выбираем вид разделения (вертикальный, горизонтальный, прозрачный), устанавливаем стартовую позицию ползунка-регулировщика (по умолчанию он будет стоять посередине - значение 50). Просматриваем и берём ссылку через кнопку "Поделиться".

Кстати, подобные слайдеры можно сделать с помощью сервиса Juxtapose. Он предлагает варианты с вертикальным и горизонтальным разделением.  


Изображение с зоной

По-другому этот шаблон можно назвать "Интерактивный плакат". Выбираем изображение, а на него наносим интерактивные метки с дополнительной информацией, которая будет появляться при нажатии на эти метки.

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

Нажимаем "Добавить зону". Переходим к добавлению маркеров. Их шесть.


Кратко расскажу обо всех.

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

В разделе "Отметка зоны" выбираем вид маркера: изображение (в виде снежинки), подпись (в виде кружка) или "скрытая зона" (невидимый маркер). Для маркера можно загрузить свою картинку, если "снежинка" не понравилась (Файл изображения маркера). В разделе "Параметр всплывающего окна" выбираем вариант его появления: справа / слева, сверху / снизу от маркера.

Самое главное - правильно разместить маркер на картинке. Для этого щёлкаем по ней в разделе "Положение".


И с помощью "мыши" перемещаем маркер на нужное место. Нажимаем "Готово". И переходим к следующему маркеру.


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


Всё то же самое проделываем в случае со всплывающим видео. Его загружаем с ПК или с Google Диска. Лучше выбирать видео "полегче", чтобы оно хорошо проигрывалось. Как выяснилось, надо обязательно проставить примерную высоту и ширину всплывающего окна, иначе видеоролик уйдет далеко за пределы фоновой картинки. Я выбрала вариант 560 на 315.


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

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


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


Чтобы добавить звуковой файл на плакат, загружаем его с ПК с расширением .m4a (мне пришлось переформатировать из mp3). Все остальные действия остаются прежними: выбираем положение маркера и его вид...


В итоге всех манипуляций у меня получился такой плакат в виде обложки книги. 

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


Карусель изображений

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

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


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


Чтобы добавить маркер на картинку, нажимаем "Добавить зону". К изображению можно прикрепить "круг с текстом" и "круг с изображением".

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


"Круг с изображением" добавить ещё проще: загружаем картинку, выбираем местоположение маркера на фоновом изображении и придумываем подпись.


В итоге получилась вот такая фотогалерея.


Плитки советов

Еще один интересный шаблон - разновидность интерактивной фотогалереи. На фоновой картинке находится несколько плиток с изображениями. К плиткам можно прикрепить небольшой текст и видео.

Вот так это выглядит.

    

А как сделать такое чудо?

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


Чтобы добавить "плитки" переходим в одноимённую вкладку. Нажимаем "Добавить плитку" и загружаем изображение для неё. 

К плитке можно прикрепить описание, звук с расширением .m4a, видео по ссылке из YouTube (ссылка должна быть примерно такого типа: www.youtube.com/watch?v=LLJIef-e-7g, берется из строки браузера). Можно настроить автопоказ: тогда все файлы будут открываться и проигрываться автоматически.


Так "плитку" за "плиткой" укладываем на фоновую подложку. И не забываем "Поделиться"!

***

О сервисе Bookwidgets можно рассказывать бесконечно. Здесь есть шаблоны для встраивания страниц, создания календаря-планировщика, интерактивного графика и электронной таблицы (должно заинтересовать математиков) и многое-многое другое... В общем, простор для фантазии огромный. Приятных вам творческих экспериментов!

Что ещё почитать по теме?


Комментариев нет:

Отправить комментарий

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

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

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