Создать интерактивную карту – 10 бесплатных инструментов для создания карт / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Как создать интерактивную карту с сервисами ESRI • sdelano.media

Наверное, один из наиболее интересных типов историй Storymaps. По сути — это сервис для публикации мультимедийных страниц. Конечно, сравнивать его, например, с «Тильдой» было бы не очень уместно, просто потому лонгриды — это совсем не главный для ERSI формат. Однако со своей задачей Cascade справляется неплохо. В настоящий момент приложение работает только в браузерах Chrome и Safari.

Создаваемая страница строится в Cascade по привычному по «Тильде» и подобным сервисам алгоритму — из блоков, все они по умолчанию верстаются во всю ширину страницы. Каждый новый элемент добавляется по клику на значке «+» по центру экрана.

Типов блоков здесь всего четыре — текст, в широком смысле — медиа, заголовок и immersive section. С текстом доступны все базовые операции форматирования. По клику на «Media» можно добавить множество вариантов контента — от интерактивных карт (включая те, которые уже были созданы пользователями на сервисе ранее), до видео и embed. Интересно, что поверх этого контента также доступно наложение текстового поля, причем с различными эффектами его появления на странице и некоторыми возможностями оформления. Более того, в рамках блока «Media» можно добавить сразу несколько элементов, в том числе и различных типов — например, карту, видео и встроенную страницу сайта. В этом случае они будут пролистываться в горизонтальной плоскости.

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

Если же по традиции зайти в раздел «Settings» и пройти по вкладке «Bookmarks», то к созданной истории очень легко добавить верхнее меню. В него будут внесены заголовки всех блоков. Меню автоматически фиксируется на самом верхнем поле страницы и не смещается при пролистывании.

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

Остается только разместить подготовленную страницу через embed на вашем сайте. Да-да, эта функция здесь тоже есть.

Создание интерактивной карты офиса / Positive Technologies corporate blog / Habr

За последние пару лет число сотрудников нашей компании увеличилось практически в три раза и сейчас приближается к трем сотням. Это влечет за собой некоторое количество организационных проблем. В частности, из-за того что компания занимает множество различных помещений в бизнес-центре, остро встает вопрос ориентирования сотрудников (особенно это касается новичков) в офисном пространстве.

Ежедневно мы сталкиваемся с проблемой «Как найти в офисе Васю?» или, наоборот, мучаемся вопросом «Как зовут парня, который сидит в том углу?». В итоге пара энтузиастов решила положить этому конец. Так началась история разработки интерактивной карты нашего офиса. Об этом мы сегодня и расскажем.

Задумка карты родилась около года назад, а разработка ведется с перерывами, поскольку делается это, в основном, в нерабочее время, «чисто для фана». Однако уже сейчас карта делает жизнь в офисе значительно проще. На данный момент она выглядит вот так.

Разработчики изначально предполагали следующие сценарии использования карты.

  1. Поиск рабочего места коллеги. Есть строка для поиска, туда «вбивается» фамилия нужного коллеги (можно искать и по имени, но уж слишком много у нас тезок), и на карте показывается местоположение его рабочего места.
  2. Идентификация. Если человек недавно работает в какой-то комнате и еще не успел выучить имен соседей, он может найти свою комнату на карте и, кликнув на определенный стол, узнать имя того, кто его занимает.
  3. Навигация. Порой объяснить, где именно в офисе ты сидишь задача непростая. Чтобы облегчить ее, предполагалось реализовать возможность отправлять ссылку на свое местоположение — http://portal.yourdomain.ru/map#username. При клике на нее карта прокручивается к нужному этажу и помещению, показывая искомое рабочее место.

На данный момент реализованы все три сценария.

Делать карту изначально решили с использованием API Яндекс.Карт. Все, что требовалось от карты, API Яндекс.Карт позволял: загрузить свое изображение, сделать базовую работу с картой («зум», перемещение) и реализовать работу с объектами на карте. В качестве средства совместной работы над проектом изначально было выбран Dropbox, поскольку изменения в коде происходили нечасто. Сперва казалось, что нужна система контроля версий, однако в дальнейшем необходимость в ней отпала. Сейчас разработку ведет один человек.

В итоге карта должна была быть размещена на корпоративном портале.

Трудности

Но гладко все бывает только на бумаге, и уже на первом этапе разработки карты мы столкнулись с серьезной проблемой. Удалось достать план лишь одного этажа, поэтому в первой версии карты был только он. Схемы для остальных этажей позднее пришлось рисовать самостоятельно: они появятся в следующей версии карты.

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

Разработка

Изначально нанесение данных на карту производилось вручную. Сначала с корпоративного портала скачивался Excel-файл со списком всех сотрудников (с того этажа, для которого был план), который затем конвертировался в CSV с нужными полями: фамилия, имя, должность, электронный адрес сотрудника. После этого в CSV-файл дописывались координаты стола на карте. Этот файл играл роль базы данных, из которой по Python-скриптом формировался JavaScript-массив с данными о пользователях.

Поскольку карта была реализована в статическом варианте, просматривать ее можно было только в режиме read-only; возможность «переезда» сотрудника с места на место изначально не учитывалась.

Новая карта

После того как первая версия была выпущена, и мы начали собирать «хотелки» коллег, «Яндекс» существенно обновил свой картографический API. Делать новую версию мы решили уже с переездом на API версии 2.0.

Пришлось разбираться с ним и делать новую версию карты. В итоге удалось реализовать следующие обновления.

  1. Добавились недостающие этажи: мы самостоятельно нарисовали схемы для нужных этажей, после чего добавили их на карту.
  2. Изменили работу со столами и сотрудниками, разделив понятия «сотрудник» и «стол». Раньше связь «стол — сотрудник» была жесткая, и чтобы поменять двух коллег местами, нужно было физически двигать столы на карте. Сейчас достаточно указать, что за столом сидит другой человек: столы двигать не придется.
  3. Кроме того, заметно упростился сам механизм работы со столами: мы отказались от статической карты и сделали простое веб-приложение. Это позволило автоматически сохранять положение столов и положение коллег за столами.
  4. В новом API работа карты не привязана к домену, что позволяет организовать работу на двух (или больше) доменах (не только portal.yourdomain.ru/map, но и portal/map).

Планы

Работа над улучшением карты не останавливается, идей много. Вот самые интересные из них.
  1. Добавление новых сущностей. В офисе есть много интересных вещей: столовые, кофемашины, «переговорки», места для стендап-митингов… Было бы полезно нанести все это на карту.
  2. Интеграция карты с Active Directory и Exchange позволила бы реализовать массу полезных функций. Было бы интересно подкачивать данные о сотруднике из Exchange (например, его расписание). Совместив данные расписания сотрудника с графиком занятости переговорных комнат, можно отображать на карте информацию о рабочем месте сотрудника (на месте ли он, и если нет, то в какой из «переговорок» его искать; это было бы особенно полезно в случае с руководителями).

Вот так интересный сайд-проект группы энтузиастов внутри компании вырастает в сервис, полезный каждому сотруднику. Кстати, проект отлично переносится и масштабируется, что особенно актуально для нашей компании в преддверии переезда в новый офис. Чтобы запустить карту на новом месте нужно будет всего лишь загрузить новый план этажей и заново «рассадить» сотрудников.

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

Кстати, авторы и разработчики карты присутствуют на Хабре: MikeOzornin и evgekon.

8 JavaScript библиотек для визуализации данных в виде интерактивных карт / Habr

Визуализация данных стала неотъемлемой частью жизни практически каждого веб-разработчика. Если построение графиков, диаграмм, карт и дашбордов до сих пор никогда не были вашей головной болью, просто немного подождите: наверняка и вы скоро вступите в наш «клуб».

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

На всякий случай сразу уточню: вообще, JavaScript-библиотеки для создания карт можно разделить на два типа. Одни просто позволяют отображать географическое положение одного или нескольких объектов. Для подобной задачи можно использовать карты типа Google Maps или OpenStreetMaps в качестве источника. В принципе, таких решений достаточно, и результат их работы примерно таков:

Другой тип – и о нем я хочу сегодня поговорить – JavaScript-библиотеки, с помощью которых можно делать именно визуализацию данных посредством создания красивых интерактивных карт. Они показывают либо связи между величинами в разных географических регионах, либо перемещение каких-либо объектов относительно их местоположения, и т.п. – всё то, что крайне важно в плане анализа данных и business intelligence.

JavaScript-библиотеки для интерактивных карт-визуализаций


amMap (от amCharts)


amMap – специальная JavaScript (HTML5) библиотека для построения карт, разработанная командой amCharts. Она не нуждается в каких-либо внешних зависимостях и позволяет довольно просто делать красивые choropleth, bubble, dot (point), connector и flow карты, поддерживая много полезных интерактивных фич.

В частности, amMap дает возможность легко «погружаться» в тот или иной выбранный участок карты с помощью drill down или, например, использовать любые картинки в качестве маркеров – довольно любопытная вещь.

Для начала работы с amMap нужно скачать ZIP-файл с бинарниками. Кстати, в нем уже лежит по 455 карт в каждом из поддерживаемых форматов (JavaScript/SVG). Документация у amMap не очень большая и сводится по большей части к набору вопросов и ответов.

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно (брендированные карты) или платно (от $140).

AnyMap (от AnyChart)


AnyMap – одна из популярных JavaScript (HTML5) библиотек для визуализации данных, созданных компанией AnyChart. Как и в случае с amMap, для создания карты с ее помощью не требуется больших усилий, равно как и подключения каких-либо внешних ресурсов или сторонних библиотек (jQuery и т.д.). AnyMap также поддерживает все базовые типы серий, который только могут понадобиться: choropleth, bubble, dot, connector, flow.

В число основных интерактивных фич AnyMap входят drill down для более плотного изучения отдельных районов, событийная модель для обработки событий (пользовательской интерактивности), цветовая шкала для автоматического раскрашивания карты по заданным настройкам.

Забегая немного вперед, скажу, что, на мой взгляд, AnyMap больше похожа на D3, нежели на amMap или Highmaps. Она как бы сочетает в себе возможности «коробочных» решений и в то же время является хорошо расширяемой и контролируемой со стороны разработчика, позволяет полностью кастомизировать визаулизации путем добавления или изменения различных элементов и легко создать собственные карты.

Бинарники AnyMap находятся в ZIP-файле и содержат множество примеров, а на CDN у AnyChart доступны сотни карт в самых разных форматах: GeoJSON, TopoJSON, SHP, SVG. Также стоит заметить, что у этой библиотеки богатая документация и обширное описание API, кстати, довольно легкое для понимания и – опять же – с большим количеством сэмплов.

Описание API: есть.
Зависимости:

нет.
Лицензия: бесплатно (брендированные карты) или платно (от $79).

D3.js (от Mike Bostock)


D3.js – мощная в плане возможных результатов библиотека для визуализации данных с открытым исходным кодом. В отличие от других упомянутых JavaScript-библиотек, D3 – это, скорее, фреймворк, который дает максимальную свободу творчества. Хотя создание интерактивных карт здесь не так очевидно, как, скажем, в решениях от amCharts, AnyChart или Highcharts.

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

Фактически в D3 доступно множество фич, среди которых полная кастомизация поведения, событийная модель и т.д. В целом, я бы сказал, что это – идеальное решение для веб-приложений. Хотя, к сожалению, D3 не предоставляет собственных карт. Это значит – их придется самостоятельно искать в открытых источниках, но вряд ли сейчас это большая проблема.

Документации как таковой у D3 нет, однако есть хорошо расписанное API и множество различных туториалов, примеров и прочих полезных материалов буквально по всему Интернету.

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно.

Google GeoCharts (от Google)


У гиганта Google есть своя JavaScript-библиотека для визуализации данных – Google Charts. Она содержит возможности и для построения интерактивных карт-визуализаций, называющихся здесь geocharts, видимо, чтобы их не путали с обычными картами, которые нужны только для отображения местоположения объектов.

Карта в Google Geocharts только одна, и это – карта мира. Однако можно выбрать регион, на который при рисовании будет сделан фокус с помощью зума.

К сожалению, здешний API не поддерживает прокрутку (scrolling), изменение масштаба (zoom), перетаскивание (drag). Также Google не предлагает иных типов серий для карт, кроме choropleth и bubble. Однажды данные недостатки довольно сильно меня, мягко скажем, опечалили, но в этом был и положительный момент: в конечном счете мне пришлось начать искать и изучать всяческие другие библиотеки, и вот я сейчас делюсь результатами этого микроисследования с вами.

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

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно.

Highmaps (от Highsoft)


Highmaps – «младшая сестра» Highcharts и Highstock, популярных библиотек разработки компании Highsoft. Ее ключевые преимущества – открытый код со всеми его плюсами, небольшой размер, высокая скорость отрисовки и широкий набор интерактивных возможностей, таких как drill down и т.п.

Среди поддерживаемых в Highmaps серий – choropleth и bubble. Кроме того, с помощью этой библиотеки можно рисовать линии для обозначения дорог, рек и коннекторов. Хотя сделать, скажем, flow-карту здесь не так просто, как в тех же amMap и AnyMap.

Также стоит отметить, что ни Highcharts, ни Highmaps не работают без jQuery, так что для их использования эта зависимость должна быть подключена (или, конечно, есть еще вариант поискать другую библиотеку для визуализации данных — ха-ха).

Положительный момент – Highmaps имеет большое количество карт в форматах SVG и GeoJSON. Также у нее обильная документация, которая позволяет довольно быстро и успешно разобраться во всевозможных настройках.

Описание API: есть.
Зависимости: jQuery.
Лицензия: бесплатно (брендированные карты) и платно (от $390).

jQuery Mapael (от Vincent Broute)


jQuery Mapael – еще одна очень достойная, хорошо сделанная библиотека с открытым исходным кодом, предназначенная для создания динамических векторных карт. Она основана на jQuery и Raphael JS, так что эти зависимости нужно иметь в виду при построении поддерживаемых ею choropleth, bubble или connector карт.

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

Описание API: есть.
Зависимости: jQuery и Raphael.
Лицензия: бесплатно.

jVectorMap (от Kirill Lebedev)


Библиотека для интерактивных карт jVectorMap имеет открытый исходный код, как и ряд других перечисленных в статье. Она не будет работать без jQuery. Хотя кому-то может показаться, что такая внешняя зависимость делает данную (или любую другую) библиотеку не слишком легко-универсальной, это не должно стать большой проблемой в наше время, ведь jQuery с большим отрывом занимает первое место среди JavaScript-библиотек для сайтов и по популярности, и по доле рынка.

К сожалению, выбор доступных типов серий здесь не слишком велик: в jVectorMap предлагаются только choropleth и marker карты, но в то же время – отдадим этой библиотеке должное – они сделаны весьма добротно. Кроме того, тут можно использовать в качестве маркеров любые картинки, а также имеются drill down и ряд других интерактивных фич.

У jVectorMap довольно небольшое описание API и нет документации в привычном по крайней мере для меня виде. Однако имеется маленький, но все равно очень полезный туториал Getting Started. Свои карты используются, но только в формате GeoJSON.

Описание API: есть.
Зависимости: jQuery.
Лицензия: бесплатно и платно (от $39).

Kartograph (от Gregor Aisch)


Kartograph – еще одно открытое решение со всеми вытекающими из этого преимуществами. Данную библиотеку характеризует обилие визуальных эффектов, таких как тени, размытие и т.д.

Интересно также, что вдобавок к традиционным choropleth и bubble типам серий здесь еще есть 3D columns (или, как их иногда называют, вертикальные 3D bars).

Готовой коллекции карт в Kartograph нет. Но библиотека работает с любыми картами в формате SVG. Также она предлагает утилиту Kartograph.py для создания карт.

Хотя Kartograph имеет зависимости и не будет работать без Raphael JS (используется как движок для рисования) и jQuery, эта библиотека делает процесс создания карт действительно довольно понятным и беспроблемным, тогда как документация и описание API данной библиотеки, соединенные в одну статью, позволяют вполне легко и удобно заполучить нужные интерактивные карты для ваших проектов.

Описание API: есть.
Зависимости: jQuery и Raphael.
Лицензия: бесплатно.

Заключение


Все перечисленные мною JavaScript-библиотеки для визуализации данных с помощью интерактивных карт – кросс-браузерные. (Ну, в XXI веке иначе, наверное, и быть уже не может.) Некоторые из них даже поддерживают старые браузеры, такие как Internet Explorer 6. (Хотя вот это, я надеюсь, очень скоро уже перестанет быть важным, в конце 2010-х.)

Все бесплатные библиотеки, которые я упомянул, довольно-таки неплохо справляются с созданием интерактивных карт. Но зато они не обеспечивают такую широкую поддержку, как коммерческие, да и – положа руку на сердце – не так уж сильны в кастомизации (ну, кроме D3, конечно).

Говоря о коммерческих библиотеках – кстати, обычно ими можно пользоваться бесплатно для некоммерческих и личных целей, – я не могу не отметить AnyMap и Highmaps за их обстоятельные документации и описания API, равно как и за большие пулы всяческих примеров/демо JavaScript-карт с добротной интерактивностью.

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

Всем хорошего дня!

Технология создания интерактивной карты в программе PowerPoint — Дидактор

Применение интерактивных карт на учебных занятиях очень эффективно. Оно позволяет оперативно решать с ребятами различные учебные задачи, быстро «перемещаться» в пространстве и во времени.

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

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

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

Итак, начинаем создавать интерактивную карту.

 

Шаг первый. Вставляем основную карту. В приведенном ниже примере это будет карта России.

Внимание! Для интерактивной карты целесообразнее настраивать не объект, а целый слайд. Поэтому целесообразно выполнить следующий шаг по смене слайдов.

Шаг второй. В главном меню выполняем следующий алгоритм: Анимация – Смена слайдов. В смене слайдов находим режим «прямоугольник наружу». С ним эффект смены карт наиболее рационален. В «Смене слайдов» убираем также галочки с режимов «по щелчку» и «автоматически». Это касается всех слайдов нашей разработки.

Шаг третий. Теперь нам необходимо создать гиперссылки. Ими будут выделенные объекты – тот или иной регион, даже населённый пункт. В прикрепленном файле, в нашем конкретном случае выделим Краснодарский край и Карелию. Выделяем их замкнутой полилинией.

Алгоритм выполнения следующий: Вставка – Фигуры – Полилиния (можно и Рисованная кривая).

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

Обратите внимание! Необходима сплошная заливка, чтобы гиперссылка появлялась не только по контуру, но и по всему объекту. Поэтому обязательно замкните линию, чтобы получить целый объект.

Когда на экране у вас появится выделенная область, независимо от полученного цвета заливки настраиваем формат полученного рисунка на 100%-ную прозрачность. Таким образом, объект гиперссылки невидим, внешне наша карта ничем не отличается от обычной. Но между тем, все выделенные нами регионы являются гиперссылками.

Шаг четвёртый. На отдельных слайдах размещаем необходимые нам карты регионов. Напомню, что смена всех слайдов в режиме «прямоугольник наружу».

Шаг пятый. Каждый из выделенных объектов делаем гиперссылками на соответствующие карты. Рекомендуемое действие гиперссылки «по наведению указателя мыши». В таком режиме наиболее эффективна работа интерактивной карты.

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

При необходимости можем продолжить углубление содержания, то есть от карты региона перейти к карте города (населённого пункта). Отсюда – к отдельным объектам. Например, показать вид школы из космоса. Или перейти по гиперссылке к фото отдельных объектов.

Шаг шестой. Не забываем на всех картах разместить «кнопки возврата» и на главную карту, и на карту, например, региона. То есть на остальных картах может быть несколько кнопок возврата: например, одна кнопка — с населенного пункта на карту региона, другая – на карту России.

Итак, наша карта готова. Хотелось бы подчеркнуть, что для всех других слайдов необходимо также выбирать качественные карты или изображения. То есть вряд ли будет уместно, например, из большой карты России вырезать отдельный регион, увеличить его и разместить на отдельном слайде. Как правило, мы получим мало узнаваемый, размытый объект.

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

Интерактивные карты могут быть использованы и в дидактических играх-путешествиях по виртуальным, вымышленным странам.  В таком случае необходимо красочно прорисовать необходимые зоны, объекты.  Однако здесь могут быть другие проблемы с гиперссылками.

Если на такой  карте  вы  рисовали  какие-то  символы,  делали надписи и т.п., то  группировка  их в один объект (область какой-то страны например)  не поможет вам сделать его гиперссылкой.  Вряд ли уместно  давать гиперссылку  на отдельные  элементы.  Тут вновь может помочь  гиперссылка на основе  невидимой автофигуры.

См. пример Виртуальной страны.

См. Интерактивную карту

Обзор онлайн-сервисов для создания интерактивных визуальных историй – EduNeo

учитель в ЦДО "Ростовская санаторная школа-интернат №28" .

Эксперт: в области географии, педагогики, методики дистанционного обучения

Closr.it – онлайн-сервис, с помощью которого можно создавать визуальные истории на основе изображений.

Узнать предсказание на 2018 год: Выбери шар на интерактивной Елочке.

Принцип работы сервиса

Сервис дает возможность загрузить изображение и расставить на нем метки с описанием. Изображение становится интерактивным: перемещаясь по изображению и изменяя масштаб, зритель может рассмотреть детали и узнать дополнительную информацию. 

Особенности сервиса:

  • англоязычный;
  • требуется регистрация, также есть возможность входа через социальные сети Facebook и Goggle +;
  • бесплатный.
  • есть возможность обратной связи – зрители могу комментировать метки;
  • имеется возможность поделиться созданной работой в Facebook, Twitter, Goggle +, отправить по почте, поделиться ссылкой или встроить на свой сайт или блог (с помощью HTML-кода).

Возможность организации групповой работы в сервисе

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

 Инструкция по работе с сервисом (на русском языке).

Примеры визуальных историй М.Коломийцева (предмет – география)

Особенности рельефа

Строение вулкана

Работа с контурной картой

ArcGIS Online – сервис, позволяющий на основе основе большого количества разнообразных карт создавать визуальные истории.

Принцип работы сервиса

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

Особенности сервиса:

  • содержит огромное количество разнообразных карт от физических до политический, имеются спутниковые снимки, исторические карты и пр.;
  • язык: русский;
  • необходима регистрация. Имеется возможность входа через социальные сети Facebook, Goggle +.;
  • позволяет создать пробную бесплатную версию, в дальнейшем необходима оплата;
  • есть возможность делиться материалами в социальных сетях или получить код для встраивания на сайт;
  • существует приложение ArcGIS Online для мобильных устройств: для Android и  для ОС IOS

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

Инструкция по работе с сервисом вот здесь.

Возможность групповой организации работы в сервисе

Бесплатный персональный аккаунт в сервисе не дает возможность групповой работы в сервисе. Однако можно организовать совместную работу по сбору информации для создания будущего виртуального путешествия и разработки маршрута.   

Возможности сервиса для образовательной деятельности

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

Примеры работ М. Коломийцева (предмет – география)

Путешествие по Кавказу  

Служба в армии

Презентация Служба в армии

Второе плавание Х. Колумба

Презентация Второе плавание Х. Колумба

Известный онлайн-сервис ThingLink – для создания интерактивных плакатов. Имеется возможность создавать интерактивные видео и картинки 360*, но только для платных аккаунтов.

Принцип работы сервиса. Позволяет добавлять в редактируемые изображения метки. В метки можно добавить: текст, видео (с популярных хостингов, например Youtube), картинки, ссылки на стороние ресурсы.

Особенности работы сервиса

  • язык: английский;
  • необходима регистрация, возможен вход через социальные сети;
  • созданные плакаты в ThingLink могут быть доступны для редактирования другим пользователям. Необходимо зайти в настрой;
  • есть бесплатный тариф с ограниченным функционалом, и годовые. Цена для индивидуального преподавателя: 35 долларов в год;
  • работает со всеми современными веб-браузерами, а также с iPad, iPhone и Android;
  • есть возможность поделиться плакатом в социальных сетях или встроить в блог/сайт;
  • степень освоения: легкая. Интуитивно понятный интерфейс.

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

Инструкция по работе с сервисом.

Пример работы М. Коломийцева

Интерактивный плакат по географии

Работа с контурной картой

Круговорот воды в природе

Узнать предсказание на 2018 год: Выбери шар на интерактивной Елочке.

 

 

 

 

 

Другие статьи автора

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *