Skip To Content

Создание Story Map Cascade

На этом уроке вы построите простой путеводитель, знакомящий посетителей с городом Сан Диего (шт. Калифорния, США). Вы хотите сориентировать читателей в основных районах города, и дать им возможность посетить некоторые достопримечательности. Для этой истории вы воспользуетесь готовой веб-картой, показывающей основные районы и достопримечательности города. Для вас также подготовлены фотографии.

Вы создадите это визуально привлекательное приложение Story Map Cascade с основными районами и достопримечательностями города Сан Диего. Приложение Story Map Cascade комбинирует встроенный контент с красивыми захватывающими разделами, которые заполняют экран картами, изображениями, 3D-сценами, видео и прочими интернет-ресурсами. Каскадная история идеально подходит для рассказа сложных историй со свободно настраиваемой структурой, по которой читателям удобно перемещаться. Им просто нужно прокручивать историю мышкой.

Запуск Конструктора приложений

Конструктор Story Map Cascade позволяет включать свои карты, фотографии и текстовые описания, привлекая и информируя читателей. Для целей данного урока вы будете использовать готовую веб-карту города и предоставленные фотографии.

  1. Go to the Esri Story Maps website.
  2. At the top of the page, click Apps.
  3. Прокрутите до раздела Подробное и яркое мультимедийное повествование и найдите опции шаблона Story Map Cascade.

    Шаблон Cascade

  4. Щелкните Построить.
    Примечание:

    Cascade Builder поддерживается только в браузерах Chrome, Firefox и Safari. Просматривать каскадные истории можно в любом браузере.

  5. Если будет предложено, войдите из-под учетной записи ArcGIS и щёлкните Перейти в Конструктор Cascade.
    Примечание:

    If you don't have an ArcGIS account, you can sign up for a free public account.

    Страница-заставка конструктора Cascade

    Откроется страница-заставка конструктора Cascade, на которой уже подготовлено место для заглавной фотографии.

    Всё готово, чтобы вы могли начать строить каскадную карту-историю.

Настройка заставки для Cascade

Теперь вы можете начать настраивать страницу заставки. Страница заставки – это первое, что увидят читатели, надо её сделать привлекательной!

  1. В окне Введите заголовок истории напечатайте Добро пожаловать в Сан Диего.
  2. В подзаголовке можете написать свой текст или воспользоваться этой строчкой: Откройте для себя популярный город-курорт Южной Калифорнии.
  3. Щёлкните кнопку Сохранить в левой части конструктора Cascade.
    Примечание:

    Рекомендуем всегда добавлять на заглавную страницу свой логотип, чтобы читатели сразу видели кто автор истории. Чтобы добавить логотип, щёлкните кнопку Настройки. В появившимся окне щёлкните вкладку Логотип и общий доступ.

  4. Щёлкните кнопку Добавить изображение или видео.

    Откроется панель медиа-файлов, на которой вы можете выбрать изображение для страницы заставки.

    Можете перетащить изображения в конструктор Cascade мышью со своего компьютера, или воспользоваться каким-нибудь фото-хостингом, например Flickr. (Очень важно, чтобы у вас были права на использование фотографий из Интернета.) Рекомендуем загружать на карты-истории собственные фотографии и прочие изображения, чтобы они всегда были доступны. В данном случае, фотографии уже выгружены на Flickr в общий доступ, так что можете ими пользоваться.

  5. Щёлкните вкладку Flickr и щёлкните Учётная запись Flickr.
  6. В окошке Поиск учётной записи введите Esri Story Maps Demo и нажмите Enter.
  7. Выберите альбом Welcome to San Diego.
  8. В альбоме Flickr выберите любое изображение, которое сочтёте подходящим для заставки каскадной истории, например View over San Diego Bay.
    Примечание:

    Если захотите попробовать установить другое изображение, щёлкните значок карандаша в левом нижнем углу и щёлкните Организовать > Изменить медиа. Вы также можете изменить оформление заголовка и подзаголовка в верхней части изображения заставки.

    Карандашик

    Теперь, если вас устраивает заглавная страница, можно создавать введение для карты-истории.

Добавьте какой-нибудь вводный текст и фотографии

Далее можно начать строить первую часть истории, используя текст и медиа-файлы.

  1. Нажмите кнопку со стрелкой внизу страницы.

    Кнопка стрелки

  2. Щелкните кнопку Добавить (+).

    Кнопка Добавить

  3. В появившемся меню выберите Текст.

    Текст

  4. Введите какой-нибудь текст с общими словами о городе Сан-Диего. Можете сочинить его сами или скопировать следующий:

    В городе Сан-Диего почти идеальный климат с бесконечным летом, великолепные пляжи, оживлённый исторический центр, спокойный жилые кварталы и непринуждённая атмосфера.

    Кроме того, есть многокилометровый берег океана, горы и пустыни.

    Мы хотим рассказать вам о городе и заодно показать интересные места, которые, мы надеемся, вам понравятся.

    Можно форматировать текст в приложении Story Map Cascade как заголовки, подзаголовки, обычный и разнонаправленный текст.

  5. Щёлкните внутри абзаца и щёлкните кнопку форматирования слева, чтобы изменить его оформление.
    Примечание:

    Также можно форматировать определённые части текста, выделяя их полужирным, курсивом, подчёркиванием, зачёркиванием, гиперссылками и различными цветами. При выделении текста появляется меню со всеми этими опциями.

    Значок Форматировать текст

  6. Щёлкните кнопку Добавить (+) после последнего параграфа только что добавленного текста и выберите Медиа-ресурсы.
  7. В окне с медиа-ресурсами на вкладке Flickr, где показан всё тот же фотоальбом, выберите другое изображение с видами Сан-Диего, например Sunset Cliffs.
    Примечание:

    Хотя мы рекомендуем использовать свои собственные фотографии или изображения, которые опубликованы в вашей организации как общедоступные, вы также можете использовать эту панель медиафайлов для поиска изображений, выложенных в общий доступ для некоммерческих и образовательных целей. Помимо Flickr, Unsplash тоже представляет коллекции бесплатных фотографий высокого качества. Никогда не забывайте проверять условия использования и ссылаться на правообладателей фотографий и прочих медиаресурсов.

  8. Наведите курсор на только что добавленное изображение.

    Обратите внимание на три появившихся значка. При помощи карандашика вы можете изменить размер фотографии, центрировать или удалить её. При помощи значка-мусорки вы можете быстро удалить фотографию. При помощи значка с плюсиком (кнопка Добавить другое изображение), можно добавить дополнительные изображения.

    Вы добавите некоторые дополнительные фотографии рядом с этой, чтобы создать галерею фотографий.

  9. Щёлкните кнопку Добавить другое изображение.

    Добавить другое изображение

  10. На панели медиа-файлов выберите Downtown San Diego Children's Park.

    Теперь кнопка Добавить другое изображение появилась в галерее справа.

  11. Добавьте изображение Balboa Park - Buildings and Gardens.

    Галерея изображений

    Обратите внимание, что при добавлении нескольких фотографий их размеры устанавливаются автоматически.

  12. Щёлкните Ваш заголовок здесь и введите описание новой галереи, например имя фотографа: Rupert Essinger / Esri.
    Примечание:

    Если вы используете чужие фотографии, хорошим тоном считается всегда ссылаться на автора, упоминать его в благодарностях или давать ссылку на его сайт. Если все фотографии из одного и того же источника, вы можете написать это позже, в разделе об авторах и источниках данных в самом конце своего приложения Cascade.

  13. Щёлкните кнопку Добавить (+) ниже добавленных фотографии и выберите Текст.
  14. Введите ещё какой-нибудь текст о Сан-Диего, например этот:

    Город Сан-Диего расположен на берегу Тихого океана, в 200 км к югу от Лос-Анджелеса и 32 км к северу от города Тихуана, который находится на границе с Мексикой.

    Из Лос-Анджелеса до Сан-Диего можно добраться за два часа, либо на машине, либо по железной дороге Amtrak Pacific Surfliner.

    Теперь в вашем описании есть хорошие фотографии и описательный текст, и вам надо добавить карту. Это даст читателям пространственную привязку для достопримечательностей, которые они увидят на фотографиях.

Добавление карты

Самый лучший способ дать читателям представление о том, где находятся достопримечательности – это интерактивная карта.

  1. Щёлкните кнопку Добавить (+) ниже последнего добавленного текста и выберите Медиа.
  2. В окне с медиа-файлами перейдите на вкладку ArcGIS и щёлкните ArcGIS Online.

    Вкладка ArcGIS на панели медиа-файлов

  3. В поле поиска введите CreateCSDSanDiego owner:StoryMaps и нажмите Enter.
    Примечание:

    Если у вас уже есть готовая ссылка на URL для определённой веб-карты ArcGIS (https://www.arcgis.com/home/item.html?id=346b76ac939f474b80795b7a3427831c), можете получить доступ к ней непосредственно. Вы будете искать часть ID из её URL, в данном случае, 346b76ac939f474b80795b7a3427831c.

  4. Щёлкните веб-карту Welcome to San Diego, автор которой - команда StoryMaps.

    Эта веб-карта создана на ArcGIS Online. Карта появится в вашем каскаде; на ней показано местоположение города Сан Диего на юге Калифорнии.

  5. Наведите курсор на карту и щёлкните значок-карандашик в левом нижнем углу карты.

    Там есть несколько опций для настройки внешнего вида и поведения вашей карты в приложении Cascade, включая размеры, виды и уровни взаимодействия.

  6. Щёлкните голубую галочку в левом нижнем углу карты, чтобы закрыть это окно.

    Голубая галочка

  7. Щёлкните кнопку Добавить (+) ниже добавленной карты и выберите Текст. Введите какой-нибудь текст для завершения вводного раздела, например этот:

    Хотя наибольшую известность округ Сан-Диего получил благодаря береговой линии, здесь есть ещё и горы. Лагуна-маунтинс в 80 км к востоку от города известны восхитительными видами государственного парка Анза-Боррего – огромной пустынной особо охраняемой природной территории, самого большого государственного парка в Калифорнии.

  8. Сохраните изменения.

    В первом разделе приложения Story Map Cascade вы создали привлекательную страницу заставки, написали введение и добавили карту, позволяющую пользователям получить общее представление о территории. Теперь можно добавить новый раздел, дающий более подробную информацию о Сан-Диего.

Начните новый раздел с текста, заголовка и медиа-файла

Следующая часть каскадного приложения посвящена центру города Сан-Диего, для этого надо добавить заголовок и какой-нибудь текст о городе.

  1. Щёлкните кнопку Добавить (+) под последним добавленным параграфом и выберите Заголовок.
  2. На месте Введите название введите Центр города Сан-Диего.
  3. Щёлкните кнопку Добавить медиа-ресурсы в левом нижнем углу только что добавленного раздела заголовка.
  4. На панели медиа-ресурсов щёлките вкладку Flickr и под учётной записью Esri Story Maps Demo откройте альбом Welcome to San Diego.
  5. Выберите фотографию центра города, которая послужит фоном для раздела заголовка, например Downtown San Diego - Children's Park.

    Если вы захотите изменить какая часть фотографии будет видна, можете настроить это в разделах Фон.

  6. Щёлкните значок-карандашик в левом нижнем углу раздела заголовка и выберите Фон.
  7. На предварительном просмотре фотографии справа щёлкните голубой кружок и перемещайте его по изображению, пока не подберёте подходящую часть фотографии.
    Примечание:

    Если захотите сменить фотографию, там есть опция Изменить медиа на вкладке Организовать.

    Размещение фонового изображения

  8. Щёлкните голубую галочку, чтобы закрыть панель Фон.
  9. Щелкните кнопку Добавить (+) под разделом Заголовок.

    Добавление описательного раздела

  10. Выберите Описательный, чтобы добавить описательный раздел, в который можно дописать дополнительную информацию.

    Кнопка Описательный

  11. Введите какой-нибудь текст о центре города Сан-Диего, например этот:

    Начните свой визит в Сан-Диего с его оживлённого центра. Здесь, рядом с Заливом Сан-Диего, находятся конференц-центр, гавань, бейсбольный стадион и ещё много всего интересного.

  12. Щёлкните кнопку Сохранить в левой части конструктора Cascade.

    Этими заголовками в Story Map Cascade очень удобно разбивать историю на разделы. Пользователю понятно, что здесь вы углубляетесь в подробности о городе Сан-Диего.

Добавление разнонаправленного раздела

Разнонаправленный раздел занимает весь экран. По мере того, как читатели будут прокручивать историю, различные виды разнонаправленного раздела будут появляться на дополнительных панелях с описательным текстом. Например, в каждом виде может быть своя фотография или карта, или различные местоположения на одной и той же карте. Вы также можете задать эффекты переходов между видами, чтобы придать гибкость в переходах между последовательностью фотографий, карт или 3D-сцен.

  1. Щёлкните кнопку Добавить (+) под последним добавленным параграфом и выберите Разнонаправленный.

    Конструктор Cascade Builder изменится; появятся элементы управления, помогающие создать разнонаправленный раздел. Вдоль нижней части экрана вы увидите полосу, на которой можно задать виды для данной разнонаправленной секции. Там находится первый вид, уже подготовленный для создания.

  2. Щёлкните Добавить медиа, чтобы выбрать что будет показывать первый вид.
  3. На панели медиа-файлов выберите одну из фотографий центра города из Esri Story Maps Demo учётной записи Flickr альбома Welcome to San Diego, например Downtown San Diego USS Midway.
  4. Поверх добавленной фотографии находится незакреплённая панель с текстом Продолжите вашу историю здесь.

    Панель с текстом Продолжите вашу историю здесь

  5. Введите текст, который должен отображаться под этой фотографией, например следующий:

    Музей-авианосец USS Midway Aircraft Carrier

    Оказавшись в Сан-Диего, не упустите свой шанс посетить знаменитый авианосец! На огромной палубе этого судна можно посмотреть огромную коллекцию различных самолётов, а также полюбоваться великолепными видами Залива Сан-Диего, видом на город и на остров Коронадо. Также у вас будет возможность подняться на капитанский мостик и даже посидеть в кресле командира экипажа! Фото: Руперт Эссингер/ Esri

    Примечание:

    Если вы не видите панель, в которую надо вводить текст, прокрутите чуть вниз – и она появится.

  6. Отформатируйте заголовок, чтобы он получился крупнее описательного текста.
  7. Щелкните значок-карандашик в правом верхнем углу приложения.

    USS Midway, значок-карандашик

    Появится список опций, позволяющих контролировать оформление и местоположение текстовой панели. Например, можно изменить местоположение текстового блока, чтобы он переместился на правую сторону фотографии.

    Ваша разнонаправленная секция уже содержит один вид. Теперь вы добавите ещё один вид, чтобы появилась другая фотография.

  8. На полосе в нижней части экрана щёлкните кнопку Добавить (+) рядом с одним из содержащихся там видов, чтобы добавить ещё один вид, щёлкните Добавить медиа и выберите другую фотографию, например Downtown San Diego - Pantoja Park. Введите какой-нибудь описательный текст для этой фотографии, например следующий:

    Парк Pantoja

    Этот мирный парк – небольшой оазис в окрестностях гавани. Парк очень старый, он был заложен ещё в 1850 году. Памятник Бенито Хуаресу был подарен правительством Мексики. За ним возвышаются здания Бродвея. Photo: Rupert Essinger / Esri

  9. Отформатируйте текст и текстовую панель, чтобы они выглядели приблизительно так же, как на предыдущем виде.
  10. Щёлкните кнопку Сохранить в левой части конструктора Cascade.
  11. Щелкните кнопку Просмотр истории.

    Кнопка Просмотр истории

    Предварительный просмотр каскадной истории откроется в новой вкладке.

  12. Исследуйте свою карту-историю.
  13. Закройте эту вкладку и вернитесь в Конструктор Cascade.

Добавление карты в разнонаправленный раздел

Как и во вводном разделе, интерактивные карты помогут пользователю ознакомиться с Сан-Диего и пространственным расположением самых известных достопримечательностей.

  1. Чтобы добавить новый вид, щёлкните кнопку Добавить (+) на полосе в нижней части экрана.

    Кнопка Добавить

  2. В появившемся новом виде щёлкните Добавить медиа.
  3. На панели с медиафайлами перейдите на вкладку ArcGIS.
  4. На вкладке выберите Эта история (если ещё не выбрано).

    Там показана веб-карта, которую вы уже добавляли в это приложение.

  5. Ещё раз выберите эту веб-карту, чтобы использовать её в виде.

    Но в этом виде вы хотите, чтобы на карте был показан именно центр города.

  6. Щёлкните значок-карандашик в левом нижнем углу карты, чтобы настроить её отображение в данном виде.
  7. Стараясь, чтобы Сан-Диего оставался посередине карты, используйте кнопку увеличения в правом нижнем углу карты (или удерживайте Shift и очертите на карте рамку), чтобы на карте был показан только центр города Сан-Диего.

    Карта приближена к Сан-Диего

    Этот экстент данной веб-карты содержит некоторые районы и достопримечательности Сан Диего, а также маршруты паромов и троллейбусов. Точки достопримечательностей были собраны в файле Microsoft Excel и загружены на веб-карту посредством файлов CSV. Другие слои были созданы в ArcGIS Desktop и загружены на веб-карту в виде шейп-файлов.

  8. Щёлкните голубую галочку, чтобы сохранить такую настройку карты.

    Далее надо добавить текст и фото на панель возле карты.

  9. Вы должны видеть пустую текстовую панель, находящуюся поверх карты, с текстом Продолжите вашу историю здесь.
    Примечание:

    Если вы не видите пустую текстовую панель, слегка прокрутите вниз, она должна появиться.

  10. Щёлкните эту текстовую панель и введите текст, который должен отображаться возле этой карты, например следующий:

    Центр города Сан-Диего

    Расположенный в заливе Сан-Диего, центр города процветает. Всего в нескольких минутах от аэропорта. Совсем рядом находится прекрасный Бальбоа-парк. Щёлкайте зеленые точки, чтобы открыть для себя интересные места, или прокрутите вниз, и мы их вам покажем.

    Примечание:

    Если в вашем тексте тоже что-то написано про зелёные точки, которые надо щёлкать, возможно вы захотите выделить слово зелёные зелёным цветом, как на карте.

  11. Щёлкните кнопку Добавить (+) ниже последнего добавленного текста и выберите Медиа, чтобы добавить фотографию на текстовую панель.

    Добавление фотографии на карту

  12. На панели медиа-файлов выберите одну из фотографий центра города из Esri Story Maps Demo учётной записи Flickr альбома Welcome to San Diego, например Downtown San Diego - Children's Park.
  13. Под фотографией щёлкните Введите название и введите название:

    Детский парк возле конференц-центра

Добавить другой вид

Когда читатели будут прокручивать вниз, вы хотите чтобы при просмотре фотографий центра города карта автоматически перемещалась к Кварталу газовых фонарей. Вы добавите ещё один вид, показывающий эту же карту и настроенный на отображение этого местоположения.

  1. На полосе в нижней части экрана наведите курсор на последний добавленный вид и щёлкните кнопку Дублировать.

    Кнопка Дублировать

    Дублирование создаёт точно такую же копию карты (включая вид и слои), что облегчает построение последовательности видов, проводящих читателей по различным местоположениям на карте. Если вы добавили карту в вид через панель медиа-файлов, вам надо будет ещё раз прописать все настройки карты.

  2. Щёлкните значок-карандашик в левом нижнем углу карты, чтобы настроить её отображение в данном виде.
  3. Приблизьтесь к Кварталу газовых фонарей. Чтобы приблизиться, можно дважды щёлкнуть на карте или использовать соответствующий элемент управления для увеличения, либо удерживая нажатой клавишу Shift прочертить на карте рамку.

    Карта приблизилась к Кварталу газовых фонарей

    Помимо видимых при данном масштабе зелёных точек, карта содержит ещё некоторые слои, например места где можно покушать или трамвайные маршруты. Если хотите, можете включить и эти дополнительные слои.

  4. В списке слоёв в правом верхнем углу включите по своему усмотрению дополнительные слои, например слой Food (еда).
  5. Щёлкните голубую галочку, чтобы сохранить такую настройку карты.

    Вы только что настроили как карта будет отображаться в данном виде. Теперь надо создать для этого вида текстовую панель.

  6. В текстовой панели для этого вида напечатайте текст:

    Квартал газовых фонарей

    Мы приветствуем вас в центре развлечений, ресторанов и вечеринок Сан-Диего. Это самое популярное место в центре города для вечернего времяпровождения.

    Примечание:

    Если вы включили дополнительные слои, например слой с едой, можете добавить и какой-нибудь описательный текст, сообщающий людям о том, что они могут получить дополнительную информацию о ресторанах, если будут щёлкать на голубых точках; не забудьте отформатировать слово голубых соответствующим цветом.

  7. Щелкните кнопку Добавить (+) ниже последнего добавленного абзаца, а затем щёлкните Медиа и выберите фотографию этого места, например Downtown San Diego - Gaslamp.
  8. Под фотографией щёлкните Ваш заголовок здесь и введите следующий текст:

    Вы найдёте оживлённые рестораны, бары и магазины вдоль Пятой авеню, расположенной к северу от конференц-центра, начиная с знака квартала «Gaslamp Quarter».

  9. Повторяйте шаги с 1 по 8, чтобы добавить ещё один вид, приближающий к кварталу Маленькая Италия (Little Italy), который тоже один из самых популярных в центре города. Он расположен примерно в 10 кварталах на северо-запад от Квартала газовых фонарей.
  10. В текстовой панели введите следующий текст:

    Маленькая Италия

    Этот район является более тихой альтернативой беспокойного квартала Гасламп, сочетая в себе итальянские корни с современным дизайном и прекрасными ресторанами. Каждое субботнее утро здесь открывается огромный рынок под открытым небом.

  11. Найдите и добавьте фотографию квартала Little Italy из альбома Welcome to San Diego.
  12. Добавьте следующий текст в качестве описания к фотографии:

    Маленькая Италия сосредоточена вдоль улицы India, между Ash на юге и Hawthorn на севере.

    Теперь вы добавите ещё два вида с фотографиями, а также эффект медленного перехода между ними.

  13. На полосе в нижней части экрана щёлкните кнопку Добавить (+) после последнего добавленного вида, чтобы добавить новый вид, щёлкните Добавить медиа и выберите любую фотографию центра города Сан-Диего из альбома Welcome to San Diego из Flickr.
  14. Добавьте название этого места на текстовую панель фотографии.
  15. Повторите шаги 11 и 12, чтобы добавить ещё одну фотографию.

    Вы можете выбирать различные эффекты перехода между парами видов (если это не карты).

  16. На полосе в нижней части экрана щёлкните кнопку Выбрать переход для последнего добавленного вида.
  17. Выберите переход Медленное затемнение.

    Медленное затемнение

  18. Щёлкните кнопку Сохранить в левой части конструктора Cascade.
  19. Щелкните кнопку Просмотр истории (над кнопкой Сохранить).
  20. Рассмотрите свою историю, а затем закройте эту вкладку и вернитесь в Конструктор Cascade.

    Поздравляем! Вы только что создали приложение Story Map Cascade с двумя разделами о центре города Сан-Диего. Обычно после этого продолжают добавлять к истории разделы о других частях города, которые вы хотите включить, например, Mission Bay, Pacific Beach и La Jolla. Чтобы добавить эти разделы, повторите описанные выше шаги, используя соответствующие фотографии и показывая карту, увеличенную до этих мест. При желании вы можете добавить в конце своей истории раздел об авторах с фотографиями и другой информацией.

Откройте доступ к истории

Если история готова, можно выложить её в общий доступ в пределах организации или для всех.

  1. В верхней части Конструктора Cascade найдите три опции публикации.
  2. Чтобы сделать историю общедоступной, щёлкните кнопку Публичная.

    Кнопка Публичная

    Прежде чем рекламировать свою карту-историю, перейдите в раздел Мои истории сайта Карты-истории. В разделе Мои истории вы можете загрузить образец для истории, а также добавить пару строк краткого описания и теги для поиска. Благодаря этим элементам вашу историю будет проще найти; также они пригодятся для социальных сетей (твитов) и результатов поиска.

В качестве образцов для подражания просмотрите некоторые примеры в Галерее Story Map Cascade. В этой галерее находятся примеры, показывающие как можно использовать приложение Story Map Cascade, шаблоны дизайна которых можно использовать в качестве передового опыта. Вы можете фильтровать галерею по теме или сфере деятельности, либо выполнять поиск по ключевым словам. Посмотрите – возможно вы найдёте какие-нибудь примеры и из своей сферы интересов. Почувствуйте, как информация передается в Cascade, и какие подходы лучше всего работают, чтобы эффективно повествовать в этом приложении.

На следующем уроке вы построите приложение Story Map Journal, знакомящее читателей с Сан Диего.