Содержание темы 3 Подготовка исходных текстовых, графических и медийных материалов для создания интерактивного изображения. Загрузка высококачественного изображения в сервис. Работа в сервисе StoryMapJS. Разметка изображения. Загрузка данных. Настройка внешнего вида. Получение кода и вставка результатов работы в свой ресурс. Другие сервисы для создания интерактивных изображений.

1. Каллиников П.Ю.
Тема 3. Сервис StoryMapJS
(режим «гигапиксельной» иллюстрации)
ВЕБИНАР 30.05.2017 15.00 MSK
Профессиональная разработка
электронного учебного контента II ―
2017
Мы общаемся здесь:
https://www.facebook.com/groups/1786212415024629/
Материалы курса располагаются здесь:
http://contentium.tilda.ws/page175655.html

2. Наш курс
ВЕБИНАРЫ
• 23 мая в 15.00 MSK
• 25 мая в 15.00 MSK
• 30 мая в 15.00 MSK
• 1 июня в 15.00 MSK
• 6 июня в 15.00 MSK
• 8 июня в 15.00 MSK
• 13 июня в 15.00 MSK
• 15 июня в 15.00 MSK
• 20 июня в 15.00 MSK
• 22 июня в 15.00 MSK

3. Сервис «историй» StoryMapJS

4. Сервис «историй» StoryMapJS: РЕЖИМ
ГИГАПИКСЕЛЬНОЙ ИЛЛЮСТРАЦИИ

5. StoryMapJS: фрагмент гигапиксельной
иллюстрации

6. «Гигапиксельная иллюстрация».
Искусство

7. «Гигапиксельная иллюстрация».
Биологические объекты

8. «Гигапиксельная иллюстрация».
Биологические объекты
http://www.michaelbachhofer.com/files/gigapixel/you_are_b
eautiful..._klein_watermarked.jpg

9. «Гигапиксельная иллюстрация».
Панорамы. Эдинбург
https://commons.wikimedia.org/wiki/File:Edinburgh_from_arthurs_seat.JPG

10. «Гигапиксельная иллюстарция».
Астрономические объекты.
Млечный путь

11. «Гигапиксельная иллюстарция».
Астрономические объекты.
Туманность «Карина» (NGC 3372)
https://commons.wikimedia.org/wiki/File:A_Different_Slant_on_Carina.jpg

12. «Гигапиксельная иллюстарция».
Астрономические объекты. Плутон
http://1.f.ix.de/imgs/18/1/5/9/3/1/3/5/crop_p_color2_enhanced_release-
75429143f987f1b9.jpeg

13. «Гигапиксельная иллюстарция».
Математические объекты
https://commons.wikimedia.org/wiki/File:BW_Mandelbrot-Set-Whole_de-called-
Apfelmaennchen.jpg

14. «Гигапиксельная иллюстарция».
Коллективные фотографии

15. «Гигапиксельная иллюстарция».
Коллективные фотографии

16. «Гигапиксельная иллюстарция».
Коллективные фотографии

17. «Гигапиксельная иллюстрация». Схемы

18. «Гигапиксельная иллюстрация». Плакаты

19. StoryMapJS: создание интерактивной
иллюстрации

20. StoryMapJS: вход в аккаунт и создание
нового проекта

21. StoryMapJS: вход в аккаунт и создание
нового проекта

22. StoryMapJS: вход в аккаунт и создание
нового проекта

23. StoryMapJS: делаем проект
«гигапиксельным»

24. StoryMapJS: делаем проект
«гигапиксельным»

25. StoryMapJS: окно настроек меняет вид

26. StoryMapJS: заполнение исходных
данных проекта

27. StoryMapJS: заполнение исходных
данных проекта

28. StoryMapJS: технология Zoomify

29. StoryMapJS: технология Zoomify

30. StoryMapJS: папка Zoomify

31. StoryMapJS: подготовка иллюстрации
в Photoshop

32. StoryMapJS: подготовка иллюстрации
в Photoshop

33. StoryMapJS: подготовка иллюстрации
в Photoshop

34. StoryMapJS: загрузка папки на сервер
Загружаем полученную папку с
файлами «плиток» изображения:
1. На свой сайт или
2. В DropBox или
3. В GoogleDrive

35. StoryMapJS: пример с GoogleDrive

36. StoryMapJS: пример с GoogleDrive

37. StoryMapJS: пример с GoogleDrive

38. StoryMapJS: заполнение исходных
данных проекта

39. StoryMapJS: начальный экран проекта

40. StoryMapJS: заполненный проект

41. StoryMapJS: слайд проекта

42. StoryMapJS: слайд проекта (просмотр)

43. StoryMapJS: слайд проекта (результат)

44. Слайд: установка фокуса и масштаба

45. Слайд: заголовок и описание

46. Слайд: медиаресурсы

47. StoryMapJS: готовый проект
https://uploads.knightlab.com/storymapjs/49a802780d7083c2dff3c830f23ffcbf/iavle
nie-khrista-narodu-gigapikselnoe-izobrazhenie/index.html

48. Практикум 3
Создать интерактивное изображение с разметкой и
описанием 7–12 кадров в сервисе StoryMapJS
Для простоты можно воспользоваться папкой
изображения «Менины» (7844x9000):
http://contentium.ru/Velaskes-Meniny/
Но!
Если справитесь сами – задание зачитывается как х2
Где взять гигапиксельные изображения?
https://commons.wikimedia.org/wiki/Category:Gigapixel_
images_from_the_Google_Art_Project

49. © 2016, Каллиников Павел Юрьевич
+7 (903) 546-81-84 моб
 komail@gmail.com
https://www.facebook.com/kallinikov
Вопросы?