XXVII Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
Веб-приложение "Интерактивная карта Иркутской области"
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
ВВЕДЕНИЕ
Интернет в современном мире является одним из важных и безграничных источников информации. В связи с чем, создание веб-приложений на любую тематику является актуальной темой.
Веб-приложение – это программное обеспечение, которое функционирует в браузере и позволяет пользователям выполнять разнообразные задачи через интернет. При этом доступ имеется как на настольных, так и на мобильных устройствах, а их функциональность охватывает множество областей, таких как социальные сети, почтовые сервисы, интерактивные карты и многое другое.
Современные подростки не представляют своей жизни без гаджетов, они всегда у них под рукой. Поэтому педагоги и родители вынуждены изменять подходы к обучению, менять бумажные носителя на цифровые, разрабатывать интересные способы подачи информации с использованием веб-технологий. По этой причине нами было принято решение разработать и создать веб-приложение «Интерактивная карта Иркутской области». Данное приложение сможет совместить в себе новый способ обучения подростков, а также получение знаний об Иркутской области с целью развития туризма и повышения информационной доступности региона.
Целью исследования является разработка веб-приложения «Интерактивная карта Иркутской области».
Задачи:
1.Ознакомиться с инструментами создания веб-страниц;
2.Найти необходимые данные об Иркутской области;
3.Разработать и создать веб-приложение.
Объектом исследования является карта Иркутской области и веб-технологии.
Предметом исследования являются районы Иркутской области, язык гипертекстовой разметки HTML и таблицы стилей CSS.
Методы: теоретический анализ и обобщение, поисковый, моделирование.
Новизна работы заключается в создании удобного веб-приложения с картой Иркутской области, которая будет содержать информацию о каждом районе области и его достопримечательностях.
Практическая значимость состоит в применении данной технологии в учебных целях на уроках географии, для изучения туристического маршрута по Иркутской области.
Глава 1. Теоретическое обоснование темы.
1.1. Изучение и выбор программного обеспечения.
Для разработки своего веб-приложения нами было использовано следующее программное обеспечение, которое было выбрано на основании своего опыта и сравнении нескольких аналогов бесплатного программного обеспечения в сети Интернет.
HTML (HyperTextMarkupLanguage, язык разметки гипертекста) – это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Существует большое количество другого программного обеспечения, но главным преимуществом HTML является простота и доступность, которая заключается в простом языке разметки, легкости его использования и изучения. Также, одним из важных критериев выбора стала возможность интеграции с другими языками программирования. HTML работает в связке с CSS (CascadingStyleSheets – каскадные таблицы стилей) и JavaScript, что позволяет создавать полнофункциональные и визуально привлекательные веб-сайты[1].
Команды языка HTML называются тэгами и представляют собой ключевые слова в угловых скобках [1]. Регистр букв не имеет значения. Большинство команд являются контейнерами, имеющими открывающий и закрывающий тэги. На рис 1.1показан фрагмент HTMLкода.
Рис. 1.1. Пример HTMLкода
Для цвета фона и декоративных элементов, размера и стиля шрифтов приложения был использован формальный язык описания внешнего вида документа- CSS (CascadingStyleSheets, каскадные таблицы стилей). Так называется набор параметров форматирования, которые применяеются к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид [2]. На рис 1.2 показан фрагмент кода.
Рис. 1.2.Пример CSS кода
Преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML. Каскадные таблицы стилей представляют собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц [3].
1.2. Программные средства для разработки.
Минимальный набор для создания веб-приложения: текстовый редактор и браузер. В текстовом редакторе прописывается сам код, а в браузере выполняется отладка.
Одним из важных инструментов для создания веб-приложения является текстовый редактор. VisualStudioCode - редактор исходного кода, созданный для всех распространенных операционных систем. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб-проектов[4]. Редактор распространяется с бесплатной лицензией, лицензией открытого программного обеспечения. Выделяется удобной подсветкой и форматированием кода.
Opera - веб-браузер и пакет прикладных программ для работы в Интернете, выпускаемый компанией OperaSoftware[5]. Разработан в 1994 году группой исследователей из норвежской компании Telenor. С 1995 года - продукт компании OperaSoftware, образованной авторами первой версии браузера. Суммарная рыночная доля браузеров Opera в январе 2024 года составила 2,17 % - шестое место в мире. В России процент пользователей браузера выше среднемирового. В январе 2025 года доля браузеров Opera в Рунете составила 5,55%.
ImageMapGenerator - с помощью этого инструмента можно на карте найти координаты границ любых участков, например, районов [6]. Карта изображений - это графическое изображение, на котором пользователь может нажимать на различные части изображения и перенаправляться в различные пункты назначения. Карты изображений создаются путем определения каждой из горячих областей в терминах их координат x и y (относительно верхнего левого угла). С каждым набором координат вы указываете ссылку, на которую будут перенаправляться пользователи при щелчке внутри области.
1.3.Информация об Иркутской области.
Опираясь на данные с сайта Иркутской области,в нашей области 33 района[7]: Аларский, Ангарский, Балаганский, Баяндаевский, Бодайбинский, Боханский, Братский, Жигаловский, Заларинский, Зиминский, Иркутский, Казачинско-Ленский, Катангский, Качугский, Киренский, Куйтунский, Мамско-Чуйский, Нижнеилимский, Нижнеудинский, Нукутский, Ольхонский, Осинский, Слюдянский, Тайшетский, Тулунский, Усольский, Усть-Илимский, Усть-Кутский, Усть-Удинский, Черемховский, Чунский, Шелеховский, Эхирит-Булагатский. Для сбора информации о районах необходимо будет посетить сайт каждого района и собрать оттуда краткую информацию о районе, и затем вставить ее на веб-страницу о каждом районе соответственно. На рис 1.3 представлена карта Иркутской области.
Рис. 1.3. Карта Иркутской области по районам
Глава 2. Исследовательская и практическая часть.
2.1. Создание главной веб-страницы.
На главной странице разместим карту Иркутской области, при нажатии на любой район на карте будет открываться веб-страница о районе. Для нахождения границ каждого района будем использовать сайт - https://www.image-map.net с инструментом ImageMapGenerator. Загружаем на сайт фото Иркутской области и вручную обводим каждый район, Байкал тоже обведем, чтобы посвятить ему отдельную страницу (см. рис 2.1). После, сайт сгенерирует нам html-код с координатами на каждый район. На рис 2.2 показан пример ссылки на веб-страницу района вместе с координатами, которые прописываются в атрибуте coords.
Рис. 2.1. Нахождение координат озера Байкал на карте
На этом создание главной страницы завершено. Теперь на главной странице мы имеем карту со ссылками на каждый район и отдельной ссылкой на озеро Байкал.
Рис. 2.2. Ссылка на веб-страницу Усольского района с координатами
2.2. Создание вспомогательных веб-страниц.
Страница каждого района имеет одинаковый вид, но разное наполнение. Поэтому нам достаточно создать одну веб-страницу с информацией о любом из районов, а потом другие страницы создать на ее основе, меняя только наполнение веб-страницы. Проектируем структуру веб-страницы: краткая информация о районе, дата образования, население, площадь, районный центр, официальный сайт и туристические места. Здесь решаем две задачи пишем html-код (см. рис. 2.3) и ищем информацию о районах на официальный ресурсах, например, для Усольского района используем официальный сайт - http://www.usolie-raion.ru/. Страница, созданная при помощи HTML кода показана на р исунке 2.4.
Рис. 2.4. Фрагмент веб-страницы «Усольский район» в браузере
Рис. 2.3. Фрагмент кода веб-страницы «Усольский район».
Для красочности наших страниц нам понадобится CSS. Шрифтом выберем Arial, цвет заголовков второго уровня – h2 сделаем синего цвета, выделим контейнеры с основной информацией (см. рис. 2.5). На рисунке 2.6 показа страница «Усольского района» с добавлением CSS.
Рис. 2.5.Фрагмент CSS кода
Рис. 2.6. Веб-страница после добавления CSS
Заключение
В процессе работы над темой исследования мы получили начальные знания по веб-технологиям, такие как язык гипертекстовой разметки HTML и таблицы стилей CSS, использовали необходимое программное обеспечение: редактор кода VisualStudioCode и браузер Opera, а также получили практические навыки в исследовании предметной области и описании проектного решения.
Помимо этого, нами были решены следующие задачи:
1.Получены начальные знания по веб-разработке;
2.Собрана необходимая информация по районам Иркутской области;
3.Разработано веб-приложение «Интерактивная карта Иркутской области».
Благодаря созданному нами веб-приложению «Интерактивная карта Иркутской области» каждый учитель географии может быстро и интересно познакомить ребят с информацией о нашей области, а также районах. Стоит отметить, продукт выполнен таким образом, что его можно наполнять, развивать и обновлять в будущем.
Список источников
-
Квинт И. HTML, XHTML и CSS – Санкт-Петербург: Издательство«Питер», 2010.
-
Макфарланд Д. Большая книга CSS – Санкт-Петербург: Издательство «Питер», 2010.
-
Никсон Р.HTML5 и CSS3. Мастер-класс– Санкт-Петербург: Издательство «БХВ», 2024.
Интернет-ресурсы
-
https://code.visualstudio.com/docs - ДокументацияVisual Studio Code
-
https://www.opera.com/ru/help - Официальный сайт Opera
-
https://www.image-map.net/ - Генератор HTML - карты
-
https://irkobl.ru/ - Официальный сайт Иркутской области
Приложение
Для демонстрации проекта можно воспользоваться QR-кодом или ссылкой на сайт: https://irkmap.42web.io/