Upload
pavel-kallinikov
View
28
Download
0
Embed Size (px)
Citation preview
Курс «Профессиональная разработка электронного учебного контента»
Практикум 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.