Практикум 9
-
Upload
pavel-kallinikov -
Category
Education
-
view
38 -
download
0
Transcript of Практикум 9
![Page 1: Практикум 9](https://reader031.fdocuments.net/reader031/viewer/2022021920/58d1b70d1a28ab98278b5675/html5/thumbnails/1.jpg)
Курс «Профессиональная разработка электронного учебного контента»
Практикум 9. Пошаговая инструкция Задание практикума. Создать интерактивный элемент учебного контента на основе одного из рассмотренных в теме 9 сервисов.
1. В этой инструкции мы приведем пример использования сервиса JuxtaposeJS. Регистрироваться в
сервисе не надо, можно сразу приступать к работе используя только главную и единственную
страницу сервиса. Сервис позволяет создать слайдер из двух изображений, которые показывают две
фазы одного процесса по принципу «было-стало», либо двух похожих изображений, различающихся в
деталях, на которые и требуется обратить внимание.
2. Сначала подготовим два изображения. Эти изображения не должны сильно отличаться друг от друга,
иначе эффекта сравнения не получится! Изображения нужно привести к одному и тому же масштабу, к
одному размеру как по горизонтали, так и по вертикали, а также вырезать таким образом, чтобы при
наложении друг на друга общие детали изображения (фон, основные контуры и т.п.) совпали бы с
максимальной точностью. Этот предварительный пункт надо выполнить с максимальной
тщательностью, т.к. от него зависит конечный эффект применения эффекта сравнения.
3. Пример подготовленных изображений – два полотна Франсиско Гойи «Обнажённая маха» и «Одетая
маха», которые были созданы автором максимально похожими друг на друга.
![Page 2: Практикум 9](https://reader031.fdocuments.net/reader031/viewer/2022021920/58d1b70d1a28ab98278b5675/html5/thumbnails/2.jpg)
4. Размещаем подготовленные изображения в интернете так, чтобы были доступны их прямые адреса. В
нашем случае это https://static.biblioclub.ru/user_files/18/Maha-1.jpg и
https://static.biblioclub.ru/user_files/18/Maha-2.jpg
5. На странице сервиса записываем адреса изображений в поля 1 и 2.
![Page 3: Практикум 9](https://reader031.fdocuments.net/reader031/viewer/2022021920/58d1b70d1a28ab98278b5675/html5/thumbnails/3.jpg)
6. В полях, обозначенных зелёными рамками записываем названия или обозначения изображений.
![Page 4: Практикум 9](https://reader031.fdocuments.net/reader031/viewer/2022021920/58d1b70d1a28ab98278b5675/html5/thumbnails/4.jpg)
7. В поле Slider Start Position выставляем значение в процентах, которое будет определять, где будет
находиться граница слайдера при первичном воспроизведении. 50% соответствует середине
изображения.
8. Остальные настройки (флажки) слайдера устанавливаем в соответствии со скриншотом, который
приведён ниже. Позже можно будет попробовать использовать иные настройки. Для проверки
результата и завершения работы нажимаем на кнопку Update preview.
![Page 5: Практикум 9](https://reader031.fdocuments.net/reader031/viewer/2022021920/58d1b70d1a28ab98278b5675/html5/thumbnails/5.jpg)
9. Далее можно просмотреть результат
10. Под окном предпросмотра располагается кнопка Publish. Если результат устраивает, нажимаем на неё,
если нет – возвращаемся к выполнению пп. 2-9.
![Page 6: Практикум 9](https://reader031.fdocuments.net/reader031/viewer/2022021920/58d1b70d1a28ab98278b5675/html5/thumbnails/6.jpg)
11. После публикации под кнопкой возникают поля с кодами слайдера. Код из поля 1 можно взять для
вставки в страницу вашего курса или блога. Код из поля 2 – это просто ссылка на слайдер, который
появится на отдельной странице.
12. Работа над Практикумом 9 закончена. Теперь скопируйте ссылку из поля 2 и поместите ее в
сообщение в группе курса в Facebook.