StoryMap JS
 | Название сервиса: StoryMap JS В итоге получается мультимедийный продукт, совмещающий в себе карту, на которой показано место события и слайд с рассказом, иллюстрированный фотографией, видео или аудио. Для работы в сервисе необходим аккаунт Google. Возможность организации групповой работы в сервисе Возможности сервиса для образовательной деятельности |
Где можно делиться материалами с сервиса
Интерактивную карту можно встроить на страницу сайта или блога (пример размещения в блоге: http://moya-pesochnitsa.blogspot.ru/2016/02/storymap.html), а также получить прямую ссылку на созданную работу и поделиться ею в социальных сетях (Facebook, Twitter, Google+).
Алгоритм работы в сервисе
Создание карты | ||
 | Чтобы создать интерактивную карту, заходим на сайт https://storymap.knightlab.com/ и нажимаем «Make a storymap now». | |
 | Далее подключаем сервис к аккаунту Google, нажав «Login with your Google account». | |
 | Чтобы создать проект, нажимаем «New». | |
 | Далее выбираем формат будущей работы — «Map». | |
 | Даём название проекту. Название можно будет изменить в процессе работы, переименовав титульный слайд. | |
Создание слайдов | ||
 | После создания проекта откроется рабочее поле для редактирования. Слева находится список слайдов, из которых состоит интерактивная карта. Сверху находится карта с маршрутом. В центре — поле для добавления текста и медиаобъектов. Доступно два режима работы с картой: «Edit» — режим редактирования и «Preview» — режим просмотра. Новый слайд создается с помощью кнопки «Add Slide», расположенной в левой вертикальной колонке. | |
 | К каждому слайду проекта можно добавить карту, медиаобъекты и тексты. Исключение составляет только титульный слайд (первый среди слайдов, отделён от остальных горизонтальной чертой): для него добавление карты необязательно. Чтобы добавить карту, вводим в поисковую строку название населённого пункта или другого объекта. Кириллица поддерживается. Выбираем из списка необходимый объект — на карте появляется метка. На каждом слайде может быть только одна метка на карте. Чтобы добавить медиа, вносим в соответствующее поле ссылку. В качестве медиаобъектов могут выступать фото, видео и аудио из Instagram, Twitter, YouTube, Vine, Soundcloud, материалы из Wikipedia или Storify. Фото и изображения можно загрузить с ПК (Upload an image). В графе «Credit» можно добавить подписи к изображениям или видео. Небольшой сопроводительный текст к медиа можно добавить в поле «Caption». | |
 | Справа находится раздел для редактирования текста слайдов. Верхнее поле — для заголовка, ниже — поле для редактирования текста. Можно изменить шрифт (сделать его полужирным или наклонным), добавить ссылку на веб-ресурс или вставить произвольный html. Кнопка «Slide Options» вызывает меню с настройками фоновой иллюстрации для слайда или его цвета. | |
 | Фоновое изображение можно загрузить с ПК, а цвет фона поменять, используя предложенную палитру цветов. | |
Дополнительные настройки карты | ||
 | На верхней панели инструментов находятся кнопки для управления созданным проектом. Кнопка «Mу Maps» в правом верхнем углу служит для навигации между разными материалами, если создано несколько интерактивных карт. «Save» помогает сохранить созданную карту. «Publish Changes» публикует изменения. Кнопка «Options» позволяет настроить проект с точки зрения просмотра и оформления. | |
 | Вкладка «Display»: «StoryMap Size» — изменение размера карты. «Language» — выбор языка из выпадающего списка. Fonts — выбор шрифта из выпадающего списка. «Treat As» — выбор режима показа слайдов. Конструктор в режиме«Cartography» самостоятельно определяет масштаб слайда. Сделано это для мягкого эффекта перехода. Если нужно задать точный масштаб, включаем режим «Image». При этом линии маршрутов и точки на карте будут доступны только при наведении курсора. «Call To Action» — добавление текста на кнопку титульного слайда для начала просмотра. По умолчанию — «Начать просмотр». «Map Type»— выбор типа карты из выпадающего списка (контурные или топографические карты), также можно подключить свои, произвольные (custom). | |
 | Вкладка «Sharing» служит для распространения созданной карты в Сети. В поле «Description» прописывается текст, с которым карта будет публиковаться в социальных сетях. Для Facebook — 300 символов, для Twitter — 140 минус без учета длины ссылки. В поле «Featured Image» можно загрузить фотографию для публикации. Оптимальный размер — 1200 х 630 пикселей. Добавить изображение можно по ссылке или с ПК. | |
Публикация и распространение | ||
 | Чтобы поделиться созданной работой в Сети, нажимаем «Share» в правом верхнем углу. В открывшемся окне можно получить прямую ссылку на созданную карту или код для встраивания её в блоги и на сайты. Здесь же находятся кнопки для распространения карты в социальных сетях (Facebook, Twitter, Google+). | |
Примеры работ
- Города-герои [Электронный ресурс] // StoryMap JS. — Режим доступа: https://s3.amazonaws.com/uploads.knightlab.com/storymapjs/d8dcf04b29dd1caa99cf3b61ae4b3e7e/goroda-geroi/index.html
- Путешествие по Карпатам [Электронный ресурс] // StoryMap JS. — Режим доступа: http://s3.amazonaws.com/uploads.knightlab.com/storymapjs/bf3baae30cab35dca6e1e3d208a86c1f/karpatyrocks/index.html
- Международные олимпиады по информатике [Электронный ресурс] // StoryMap JS. — Режим доступа: https://s3.amazonaws.com/uploads.knightlab.com/storymapjs/4a434740085d1f01dc1eee6eb66130d6/mezhdunarodnye-olimpiady-po-informatike-ioi/index.html
Полезные ссылки
- Как рассказывать историю при помощи интерактивной карты [Электронный ресурс] // Medium. — Режим доступа:https://goo.gl/molN9S
- Ница А. StoryMap: как создать карту, которая расскажет историю: видеоурок [Электронный ресурс] // YouTube. — Режим доступа: https://youtu.be/07L_152sPXg
- Сухачева А. StoryMap JS: инструмент для создания интерактивной карты [Электронный ресурс] // Новый репортер. — Режим доступа: http://newreporter.org/2015/02/10/storymap-js-instrument-dlya-sozdaniya-interaktivnoj-karty/