Использование storymapjs в режиме «гигапиксельной»...

59
Каллиников П. Тема 2. Сервис StoryMapJS (карта) Тема 3. Сервис StoryMapJS (иллюстрация) ВЕБИНАР 24.05.2016 15.00 MSK Интерактив PRO — 2016 Мы общаемся здесь: https://www.facebook.com/groups/1143137745736673/ Материалы курса располагаются здесь: http://contentium.tilda.ws/page175655.html

Upload: pavel-kallinikov

Post on 15-Jan-2017

165 views

Category:

Education


11 download

TRANSCRIPT

Page 1: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

Каллиников П.Ю.

Тема 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 в режиме «гигапиксельной» интерактивной картинки

Наш курс

ВЕБИНАРЫ • 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 в режиме «гигапиксельной» интерактивной картинки

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

Page 4: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

Сервис «историй» StoryMapJS: КАРТА

Page 5: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: создание «путешествия»

Page 6: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: создание «путешествия»

Page 7: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: интерфейс страницы создания «путешествия»

Page 8: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: интерфейс страницы создания «путешествия»

Page 9: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: интерфейс страницы создания «путешествия»

Page 10: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: список проектов ползователя

Page 11: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: настройки путешествия

Page 12: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: настройки путешествия

Page 13: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: сохранение результата и публикация

Page 14: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: сохранение результата и публикация

Page 15: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: сохранение результата и публикация

Page 16: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: опубликованный результат

Page 17: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: область управления событиями (слайдами)

Page 18: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: выбор места на карте

Page 19: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: опубликованный результат

Page 20: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: опубликованный результат

Page 21: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: описание медиаресурса

Page 22: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: опубликованный результат

Page 23: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: опубликованный результат

Page 24: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: описание события (слайда)

Page 25: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: опубликованный результат

Page 26: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: настройки слайда

Page 27: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: настройки слайда: выбор фона

Page 28: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: настройки слайда: выбор фона

Page 29: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

Практикум 2

Создать интерактивное путешествие объёмом 10–15 кадров в сервисе StoryMapJS

Page 30: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 31: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 32: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 33: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 34: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 35: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 36: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 37: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 38: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 39: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 40: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 41: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 42: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 43: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 44: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: загрузка папки на сервер

Загружаем полученную папку с файлами частей изображения:

1. На свой сайт или2. В DropBox или3. В GoogleDrive

Page 45: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: пример с GoogleDrive

Page 46: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: пример с GoogleDrive

Page 47: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

StoryMapJS: пример с GoogleDrive

Page 48: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 49: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 50: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 51: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 52: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 53: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 54: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 55: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 56: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

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

Page 58: Использование StoryMapJS в режиме «гигапиксельной» интерактивной картинки

Практикум 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 в режиме «гигапиксельной» интерактивной картинки

© 2016, Каллиников Павел Юрьевич

+7 (903) 546-81-84 моб

[email protected] https://www.facebook.com/kallinikov

Вопросы?