Курс «Профессиональная разработка электронного учебного контента»

Практикум 9. Пошаговая инструкция Задание практикума. Создать интерактивный элемент учебного контента на основе одного из рассмотренных в теме 9 сервисов.

1. В этой инструкции мы приведем пример использования сервиса JuxtaposeJS. Регистрироваться в

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

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

фазы одного процесса по принципу «было-стало», либо двух похожих изображений, различающихся в

деталях, на которые и требуется обратить внимание.

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

иначе эффекта сравнения не получится! Изображения нужно привести к одному и тому же масштабу, к

одному размеру как по горизонтали, так и по вертикали, а также вырезать таким образом, чтобы при

наложении друг на друга общие детали изображения (фон, основные контуры и т.п.) совпали бы с

максимальной точностью. Этот предварительный пункт надо выполнить с максимальной

тщательностью, т.к. от него зависит конечный эффект применения эффекта сравнения.

3. Пример подготовленных изображений – два полотна Франсиско Гойи «Обнажённая маха» и «Одетая

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

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

нашем случае это https://static.biblioclub.ru/user_files/18/Maha-1.jpg и

https://static.biblioclub.ru/user_files/18/Maha-2.jpg

5. На странице сервиса записываем адреса изображений в поля 1 и 2.

6. В полях, обозначенных зелёными рамками записываем названия или обозначения изображений.

7. В поле Slider Start Position выставляем значение в процентах, которое будет определять, где будет

находиться граница слайдера при первичном воспроизведении. 50% соответствует середине

изображения.

8. Остальные настройки (флажки) слайдера устанавливаем в соответствии со скриншотом, который

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

результата и завершения работы нажимаем на кнопку Update preview.

9. Далее можно просмотреть результат

10. Под окном предпросмотра располагается кнопка Publish. Если результат устраивает, нажимаем на неё,

если нет – возвращаемся к выполнению пп. 2-9.

11. После публикации под кнопкой возникают поля с кодами слайдера. Код из поля 1 можно взять для

вставки в страницу вашего курса или блога. Код из поля 2 – это просто ссылка на слайдер, который

появится на отдельной странице.

12. Работа над Практикумом 9 закончена. Теперь скопируйте ссылку из поля 2 и поместите ее в

сообщение в группе курса в Facebook.