Построение интерактивных карт для HTML-документов на уроках информатики

NovaInfo 46, с.303-315, скачать PDF
Опубликовано
Раздел: Педагогические науки
Просмотров за месяц: 28
CC BY-NC

Аннотация

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

Ключевые слова

ПЕДАГОГИКА, ИНТЕРАКТИВНАЯ КАРТА, ИНТЕРНЕТ, ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ, ИНФОРМАТИКА, ПОРТФОЛИО, СТУДЕНЧЕСКИЙ ПРОЕКТ

Текст научной работы

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

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

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

С учетом определения понятий «интерактивная карта» электронные карты можно классифицировать на три основные группы:

  • неинтерактивные программно-зависимые;
  • интерактивные программно-зависимые;
  • интерактивные программно-независимые.

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

Студентам могут быть предложены следующие методические указания к выполнению лабораторной работы по созданию интерактивной карты:

  • Изучите инструкцию по созданию интерактивного тура. Продумайте, что именно вы отразите в виртуальном туре;
  • С помощью любой поисковой системы найдите фотографии требуемых объектов (10 объектов);
  • Подготовьте небольшую аннотацию — пояснение к каждому объекту;
  • Продумайте план размещения объектов;
  • Создайте в графическом редакторе карту или план размещения объектов (можно использовать карту, размещенную в сети Интернет);
  • Зарегистрируйтесь на ресурсе, и разместите объекты на плане с комментариями;
  • Получите код интерактивного тура;
  • Внедрите код в ваш проект;
  • Разместите результаты вашей работы в портфолио.

Наибольший интерес может представлять сервис www.mapsalive.com.

Сервис MapsAlive (живые карты) позволяет создавать различные интерактивные карты и встраивать их в html-документы. На главной странице сайта приведены примеры, наглядно демонстрирующие возможности сервиса.

Главная страница сайта
Рисунок 1. Главная страница сайта

Картой может являться любое изображение: схема, диаграмма, таблица, фотография, географическая карта. Кроме того существует возможность создания и многоуровневых карт. Например, план 1 этажа, 2 и т.п. На карте в определенных ключевых точках пользователю необходимо будет разместить объекты — фотографии или видео с комментариями. Бесплатно, в рамках данного сервиса, можно разместить не более 10 слайдов. При наведении указателем мышки на соответствующую ключевую точку на карте будет отображена фотография или видео с комментариями.

Для регистрации на сайте необходимо зайти на страницу регистрации и выбрать раздел «Get Started» («Начало работы»), внутри которого активизировать ссылку «Sign Up» («Зарегистрироваться») (рис.2).

Форма регистрации
Рисунок 2. Форма регистрации

Пройдя процесс регистрации, необходимо перейти на главную страницу, и зайти в систему («login») при помощи своих регистрационных данных

Опишем основные действия по созданию карты, которые должен выполнить студент. Первое окно «Добро пожаловать» сообщит вам о том, что интерактивную карту в данном сервисе называют туром и предложат воспользоваться мастером помогающим шаг за шагом проделать все основные действия по созданию тура (рис.3).

Окно «Добро пожаловать»
Рисунок 3. Окно «Добро пожаловать»

Студенту предстоит сделать выбор того что он хочет, чтобы его тур содержал: карту или галерею.

Так же задается вопрос:

Вы хотите, чтобы Вам помогли создать этот тур?

  • Показать шаг за шагом инструкции (для новых пользователей)
  • Мне не нужна помощь (для опытных пользователь)

После выбора позиций по «созданию тура» и представления инструкций «шаг за шагом» возникнут настройки нового тура (рис. 4):

В поле «Tour Name» необходимо задать имя тура (тема работы), после этого выбрать размер тура (размер карты), цветовую схему и выбрать способ отображения тура: как отдельной веб-страницы или встроенной в другую веб-страницу.

После того, как все настройки будут выбраны, для продолжения выполнения операций по созданию тура, необходимо нажать на кнопку «Continue to Map Setup».

Настройки тура
Рисунок 4. Настройки тура

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

Настройки карты
Рисунок 5. Настройки карты

Нажав на кнопке «Continue» будет осуществлен переход к окну, в котором необходимо будет загрузить базовую карту — т.е. карту на которой и будут располагаться объеты (рис.6). С помощью проводника ("Выбрать файл") найдите файл с картой и щелкните "Load" («Загрузить»).

Окно выбора карты
Рисунок 6. Окно выбора карты

После этого студент должен будет расставить и описать объекты (Hotpoint) на карте.

Необходимо загрузить все объекты — их фотографии, указать название и дать комментарии. Чтобы добавить новый объект (точку) необходимо в меню выбрать раздел «New», далее выбрать «Hotspot for (точка)» (рис.7).

Раздел по созданию нового объекта карты
Рисунок 7. Раздел по созданию нового объекта карты

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

Окно создания объекта карты
Рисунок 8. Окно создания объекта карты

Нажав ссылку «Save» («Сохранить») студент сохранит созданный объект, может снова выбрать раздел «New» далее выбрать «Hotspot for (точка)» и точно также создать следующий объект.

После создания всех объектов возникает необходимость размещения их на карте. Для этого в разделе «Map» выберем пункт меню «Go to Map». Появиться карта, а под ней миниатюры всех созданных объектов. Над картой размещен раскрывающийся список с названиями всех объектов. Выберете первый и в середине карты появиться маркер. Передвиньте его в то место, где вы хотите разместить ссылку на первый объект и т.д.

После того как все объекты будут расставлены, выберите «Tour Preview» («Просмотр готового тура»). Активизировав просмотр появится возможность проверить визуально результат своей работы и если студент им останется доволен, выбрать в правом верхнем углу экрана ссылку «Publish» («Публикация»), интерактивный тур будет сохранен и опубликован.

Для вставки данного тура на веб-страницу студенческого проект, необходимо получить код созданного ресурса. Для этого необходимо выбрать в верхней части экрана «Show Code Snippets» («Показать фрагмент кода»).

Создадим веб-страницу на которой разместим код. Откройте блокнот и скопируйте полученный код (рис.9).

Пример кода интерактивного тура
Рисунок 9. Пример кода интерактивного тура

Выполните «Файл-Сохранить как..» (рис.10).

Сохранение результата
Рисунок 10. Сохранение результата

Другим примером сервиса по создании интерактивных карт является «MyHistro» — это интернет-сервис для сторителлинга (карта-рассказ) с особой привязкой к географическим картам. Алгоритм создания базируется на принципе: создается история (карта) на которой определяются события (объекты) которые имеют еще ранг демонстрации. Сервис позволяет построить временные ленты, отображающиеся на основе картографического сервиса «Google Maps». Студенты смогут очень легко создавать понятные и эффектные визуальные рассказы, иллюстрирующие как отдельные события, так и целые эпохи или долговременные процессы. Сервис обладает удобным инструментарием для совместного использования, он прост в управлении, и подходит для описания туристических маршрутов, экскурсионных мест, исторических событий и т.п. Главной его особенностью является то что он представлен на русском языке и является совершенно бесплатным.

Очень полезным качеством сервиса является то, что созданные материалы можно просматривать не только в галерее «MyHistro», но и экспортировать в удобном вам формате. Студент может сохранить данные в виде таблицы «CSV», которая будет содержат только текстовые данные о местоположении, времени и описании событий; в формате «KML», что позволит ему загрузить презентацию для просмотра в «Google Maps» или другой картографический сервис; и в формате «PDF». Работой можно поделиться в социальных сетях, получить код для встраивания на странички сайтов.

Студентам предлагаются следующие задания по работе с данным сервисом:

  1. Перейдите на сайт http://www.myhistro.com/;
  2. Выберите русский язык;
  3. Ознакомьтесь с интерфейсом;
  4. Просмотрите готовые истории;
  5. Подготовьте свою историю (пусть это будет описание археологических памятников в определенном туристическом месте, который вы рекламируете): найдите соответствующие фотографии (не менее 10) и описания к ним;
  6. Пройдите процедуру регистрации;
  7. Для создания истории зайдите в раздел «История». Здесь присутствует история по умолчанию (My story). Вы так же можете создать новую историю — Добавить историю (рис.11).
Создание истории в своем профиле
Рисунок 11. Создание истории в своем профиле
  1. Нажмем «Добавить историю». Введите основную информацию, добавьте базовый рисунок или фотографию как обложку истории (рис.12).
Ввод основной информации
Рисунок 12. Ввод основной информации

Сохраните историю.

  1. Теперь необходимо создать точки нашей истории — события. Из главного окна (События) или прямо тут выберите «Создать событие»;
  2. Создай свое первое событие. Опишите его, выберете место на карте. Добавьте главную фотографию. В тексте создайте гиперссылку на страницы «Википедии» в которых упоминаются фамилии или города (рис.13).
Создание события
Рисунок 13. Создание события
  1. Отметьте точку на карте. Укажите ссылку на видео с историей данного места (рис.14).
Создание видеоссылки на событие
Рисунок 14. Создание видеоссылки на событие
  1. Нажмите «Выполнено»;
  2. Добавьте еще 9 событий;
  3. Сохраните историю;
  4. Просмотрите результат;
  5. Экспорт (в режиме просмотра) (рис.15).
Варианты экспорта истории
Рисунок 15. Варианты экспорта истории
  1. Найдите код для вставки на веб-страницу;
  2. Создайте веб-страницу вашего проекта с данной историей;
  3. Результат разместите в вашем портфолио.

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

Читайте также

Список литературы

  1. Create Interactive Maps // Режим доступа: http://www.mapsalive.com/ (дата обращения 03.03.2016)
  2. Аксёнова, В.И. Использование интерактивных карт на уроках географии [Электронный ресурс] / В.И. Аксёнова // Социальная сеть работников образования. – Режим доступа: http://nsportal.ru. (дата обращения 25.03.2016)
  3. Векслер В.А. Принципы регулирования рынка образовательных услуг / Л.Б.Рейдель, В.А.Векслер // Правовая политика и правовая жизнь. 2013. № 2. С. 36-41.
  4. Векслер В.А. Проектирование для системы дополнительного образования информационной модели специалиста // Омский научный вестник. 2007. № 2 (56). С. 178-182.
  5. Векслер В.А. Эргономические требования к электронным образовательным ресурсам // Психология, социология и педагогика. 2015. № 5 (44). С. 37-39.
  6. Истории, отображенные на карте [Электронный ресурс] // Режим доступа: http://www.myhistro.com/ (дата обращения 21.03.2016)
  7. Создание интерактивного тура с помощью MapsAlive [Электронный ресурс] / MapsAlive // Режим доступа: https://sites.google.com/site/herzencomputerscience/laboratornye-raboty-1/virtualnyj-tur-istoria-razvitia-vycislitelnoj-tehniki/sozdanie-interaktivnogo-tura-s-pomosu-mapsalive (дата обращения 20.03.2016)

Цитировать

Векслер, В.А. Построение интерактивных карт для HTML-документов на уроках информатики / В.А. Векслер. — Текст : электронный // NovaInfo, 2016. — № 46. — С. 303-315. — URL: https://novainfo.ru/article/6184 (дата обращения: 19.05.2022).

Поделиться