StoryMap JS

Автор инструкции по работе с сервисом

 

Орешко Марина Анатольевна,

 

 заведующая сектором литературного краеведения Библиотеки-музея имени Н.Н. Блинова г. Мурманск

Название сервиса: StoryMap JS

Описание: бесплатный сервис для создания интерактивной карты на основе текста, изображений, аудио и видео.

Язык: английский

Ссылка: https://storymap.knightlab.com/

В итоге получается мультимедийный продукт, совмещающий в себе карту, на которой показано место события и слайд с рассказом, иллюстрированный фотографией, видео или аудио. Для работы в сервисе необходим аккаунт 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+).

Примеры работ

Полезные ссылки

  • Как рассказывать историю при помощи интерактивной карты [Электронный ресурс] // 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/