Использование StoryMapJS в режиме «гигапиксельной»...
-
Upload
pavel-kallinikov -
Category
Education
-
view
153 -
download
11
Transcript of Использование StoryMapJS в режиме «гигапиксельной»...
![Page 1: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/1.jpg)
Каллиников П.Ю.
Тема 2. Сервис StoryMapJS (карта)Тема 3. Сервис StoryMapJS (иллюстрация)
ВЕБИНАР 24.05.2016 15.00 MSK
Интерактив PRO — 2016
Мы общаемся здесь: https://www.facebook.com/groups/1143137745736673/ Материалы курса располагаются здесь:http://contentium.tilda.ws/page175655.html
![Page 2: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/2.jpg)
Наш курс
ВЕБИНАРЫ • 17 мая в 15.00 MSK• 19 мая в 15.00 MSK• 24 мая в 15.00 MSK• 26 мая в 15.00 MSK• 31 мая в 15.00 MSK• 2 июня в 15.00 MSK
![Page 3: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/3.jpg)
Сервис «историй» StoryMapJS
![Page 4: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/4.jpg)
Сервис «историй» StoryMapJS: КАРТА
![Page 5: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/5.jpg)
StoryMapJS: создание «путешествия»
![Page 6: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/6.jpg)
StoryMapJS: создание «путешествия»
![Page 7: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/7.jpg)
StoryMapJS: интерфейс страницы создания «путешествия»
![Page 8: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/8.jpg)
StoryMapJS: интерфейс страницы создания «путешествия»
![Page 9: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/9.jpg)
StoryMapJS: интерфейс страницы создания «путешествия»
![Page 10: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/10.jpg)
StoryMapJS: список проектов ползователя
![Page 11: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/11.jpg)
StoryMapJS: настройки путешествия
![Page 12: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/12.jpg)
StoryMapJS: настройки путешествия
![Page 13: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/13.jpg)
StoryMapJS: сохранение результата и публикация
![Page 14: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/14.jpg)
StoryMapJS: сохранение результата и публикация
![Page 15: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/15.jpg)
StoryMapJS: сохранение результата и публикация
![Page 16: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/16.jpg)
StoryMapJS: опубликованный результат
![Page 17: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/17.jpg)
StoryMapJS: область управления событиями (слайдами)
![Page 18: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/18.jpg)
StoryMapJS: выбор места на карте
![Page 19: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/19.jpg)
StoryMapJS: опубликованный результат
![Page 20: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/20.jpg)
StoryMapJS: опубликованный результат
![Page 21: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/21.jpg)
StoryMapJS: описание медиаресурса
![Page 22: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/22.jpg)
StoryMapJS: опубликованный результат
![Page 23: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/23.jpg)
StoryMapJS: опубликованный результат
![Page 24: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/24.jpg)
StoryMapJS: описание события (слайда)
![Page 25: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/25.jpg)
StoryMapJS: опубликованный результат
![Page 26: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/26.jpg)
StoryMapJS: настройки слайда
![Page 27: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/27.jpg)
StoryMapJS: настройки слайда: выбор фона
![Page 28: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/28.jpg)
StoryMapJS: настройки слайда: выбор фона
![Page 29: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/29.jpg)
Практикум 2
Создать интерактивное путешествие объёмом 10–15 кадров в сервисе StoryMapJS
![Page 30: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/30.jpg)
Сервис «историй» StoryMapJS: РЕЖИМ ГИГАПИКСЕЛЬНОЙ ИЛЛЮСТРАЦИИ
![Page 31: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/31.jpg)
StoryMapJS: фрагмент гигапиксельной иллюстрации
![Page 32: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/32.jpg)
«Гигапиксельная иллюстрация». Искусство
![Page 33: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/33.jpg)
«Гигапиксельная иллюстрация». Биологические объекты
![Page 34: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/34.jpg)
«Гигапиксельная иллюстарция». Астрономические объекты
![Page 35: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/35.jpg)
«Гигапиксельная иллюстрация». Схемы
![Page 36: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/36.jpg)
StoryMapJS: создание интерактивной иллюстрации
![Page 37: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/37.jpg)
StoryMapJS: вход в аккаунт и создание нового проекта
![Page 38: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/38.jpg)
StoryMapJS: вход в аккаунт и создание нового проекта
![Page 39: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/39.jpg)
StoryMapJS: вход в аккаунт и создание нового проекта
![Page 40: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/40.jpg)
StoryMapJS: заполнение исходных данных проекта
![Page 41: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/41.jpg)
StoryMapJS: подготовка иллюстрации в Photoshop
![Page 42: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/42.jpg)
StoryMapJS: подготовка иллюстрации в Photoshop
![Page 43: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/43.jpg)
StoryMapJS: подготовка иллюстрации в Photoshop
![Page 44: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/44.jpg)
StoryMapJS: загрузка папки на сервер
Загружаем полученную папку с файлами частей изображения:
1. На свой сайт или2. В DropBox или3. В GoogleDrive
![Page 45: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/45.jpg)
StoryMapJS: пример с GoogleDrive
![Page 46: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/46.jpg)
StoryMapJS: пример с GoogleDrive
![Page 47: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/47.jpg)
StoryMapJS: пример с GoogleDrive
![Page 48: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/48.jpg)
StoryMapJS: заполнение исходных данных проекта
![Page 49: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/49.jpg)
StoryMapJS: начальный экран проекта
![Page 50: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/50.jpg)
StoryMapJS: заполненный проект
![Page 51: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/51.jpg)
StoryMapJS: слайд проекта
![Page 52: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/52.jpg)
StoryMapJS: слайд проекта (просмотр)
![Page 53: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/53.jpg)
StoryMapJS: слайд проекта (результат)
![Page 54: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/54.jpg)
Слайд: установка фокуса и масштаба
![Page 55: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/55.jpg)
Слайд: заголовок и описание
![Page 56: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/56.jpg)
Слайд: медиаресурсы
![Page 57: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/57.jpg)
StoryMapJS: готовый проект
https://s3.amazonaws.com/uploads.knightlab.com/storymapjs/49a802780d7083c2dff3c830f23ffcbf/iavlenie-khrista-narodu/index.html
![Page 58: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/58.jpg)
Практикум 3
Создать интерактивное изображение с разметкой и описанием 7–12 кадров в сервисе StoryMapJS
Для простоты можно воспользоваться папкой изображения «Менины»: http://contentium.ru/Velaskes-Meniny/
Но!
Если справитесь сами – задание зачитывается как 2 Где взять гигапиксельные изображения? https://commons.wikimedia.org/wiki/Category:Gigapixel_images_from_the_Google_Art_Project
![Page 59: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки](https://reader036.fdocument.pub/reader036/viewer/2022062310/587b29ad1a28ab057d8b4b07/html5/thumbnails/59.jpg)
© 2016, Каллиников Павел Юрьевич
+7 (903) 546-81-84 моб
[email protected] https://www.facebook.com/kallinikov
Вопросы?