CC BY
0
УДК 004
DOI: 10.24412/2071-6168-2024-12-460-461
РАЗРАБОТКА ИНТЕРАКТИВНОЙ КАРТЫ БУРЯТСКОЙ ГСХА С ИСПОЛЬЗОВАНИЕМ HTML, CSS, JAVASCRIPT
Т.Ж. Базаржапова, Д.А. Шанарова
В статье рассматривается описание разработки интерактивной карты Бурятской ГСХА, ее функционала и возможных областей ее применения. Карта разработана средствами HTML, CSS, JavaScript и с использованием возможностей SVG-графики.
Ключевые слова: Интерактивная карта организации, HTML, CSS, язык программирования JavaScript,
SVG.
Введение. В мире современных технологий традиционные методы презентации и обучения постепенно уступают место более современным и интерактивным решениям. Электронные флипчарты, объединяющие в себе простоту использования обычной маркерной доски с возможностями цифрового мира, становятся все более популярным инструментом для бизнеса, образования и других сфер.
В отличие от своих бумажных предшественников, электронные флипчарты предлагают ряд преимуществ: Интерактивность: возможность рисовать, вставлять изображения, видео и текст делает презентации более живыми и запоминающимися.
Цифровая доступность: сохранение контента в электронном виде позволяет легко делиться им с другими пользователями и использовать повторно.
Экологичность: отказ от бумаги сокращает количество отходов и защищает окружающую среду. Электронные флипчарты используют в разных целях. Так, например, на таких флипчартах удобно разместить интерактивную карту для навигации в здании. В больших организациях бывает сложно найти необходимое помещение, и интерактивная карта может стать хорошим путеводителем.
Целью статьи является описание процесса разработки интерактивной карты ФГБОУ ВО«Бурятской государственной сельскохозяйственной академии имени В.Р. Филиппова», ее функционала и возможных областей ее применения.
Актуальность проекта заключается в том, что такая интерактивная карта позволит визуализировать расположение объектов и облегчит поиск необходимой аудитории для сотрудников, студентов-первокурсников и гостей Академии. Интерактивная карта будет размещена на электронном флипчарте в читальном зале Научной библиотеки Бурятской ГСХА.
Понятие интерактивной карты. Интерактивная карта — это электронная карта, на которой представлена информация, включающая элементы интерактивности, привязанная к географическому контексту. Элементами интерактивности являются все программные модули (функции сайта), с помощью которых пользователь может взаимодействовать с сайтом или другим человеком, посредством этих инструментов.
Помимо информации, воспринимаемой пользователем при чтении карты, интерактивные карты обладают скрытой информацией, которую можно получить, выполнив на карте определенные действия (например, при наведении курсора на объект).
Основные функции и особенности интерактивных карт:
у каждого условного знака на интерактивной карте есть не только его обычная информационная составляющая, но и скрытая, выводящаяся по мере надобности;
можно рассматривать более мелкие участки территории, но с углубленным подходом к информационной составляющей описываемых явлений;
возможность дополнять новыми данными и новыми объектами. формировать маршруты и более углубленно показывать отдельные объекты [1].
Определение требований к интерактивной карте. Карта должна отображать аудитории, их номер, вместимость и описание, часы работы библиотеки, гардеробов и т.д. У пользователя должна быть возможность масштабировать карту, перемещать ее по экрану и переходить с одного этажа на другой. Технические характеристики электронного флипчарта: Дисплей: 65 дюймов 4KU!traHD Тип сенсора: ИК рамка 20 касаний Процессор: IntelCorei5-10400 Оперативная память: DDR4 8 ГБ Жесткий диск: SSD 240 ГБ ОС: Windows 10.
Проектирование и разработка интерактивной карты. Бурятская ГСХА состоит из пяти учебных корпусов, пяти студенческих общежитий, спортивного комплекса со стадионом, профилактория, ветеринарной клиники для мелких животных, столовой и центра тестирования иностранных граждан, находящихся в шаговой доступности.
Схемы этажей были отрисованы в редакторе векторной графики Inkscape [2], поскольку в дальнейшей разработке был использован язык разметки SVG. SVG - это векторный формат, основанный на XML. У SVG-рисунка будет своя DOM, к различным элементам можно будет применять CSS-правила и управлять JavaScript'ом
[3].
На рисунке 1 представлена готовая схема 2 этажа.
На рисунке 2 представлена главная страница сайта. Страница состоит из трех основных компонентов: шапки с логотипом Академии и ссылкой на 3D-тур, блоков с местами интереса и ссылками на этажи и скриптом API Яндекс карт, показывающего расположение корпусов на карте города.
— 1— н
Ц 1 1 и
-1 1 1 1 1-
Рис. 1. Схема второго этажа
ф
Добро пожаловать в Академию!
В гимн ЬГСхЛ 4 ягах а л в «*<м легко ютяутъ Поэтов лап
ишнеу*э6сты пр»дст*»чн окм мео ихгер«*' <ки вы иожогг «ужшД ыи *г*ж просто гмр*лди по иигп* п* *«ту Длдоцьм
¡&у \ ч
ч
.у
/ \
Рис. 2. Главная страница сайта
Нажав на «1 этаж» и перейдя по ссылке, пользователь окажется на странице первого этажа интерактивной карты Бурятской ГСХА.
На рисунке 3 отображена страница первого этажа интерактивной карты Бурятской ГСХА. Страница содержит меню навигации и аудитории, состоящие из элементов <ро^оп>с названиями и подсказками к ним.
АИШШЩ_'
ж
А
Л
к*
р
ж
Рис. 3. Страница первого этажа
461
В блок с классом scheme помещено SVG-изображение схемы первого этажа, поверх которой были расставлены полигоны, каждый со своими соответствующими координатами. После расстановки полигонов были добавлены блоки с названиями и подсказками к каждому помещению. При помощи атрибута data-id выполняется привязка названий и подсказок к конкретным полигонам. В подсказку можно добавить как обычный текст, так и изображение.
Аналогично работают остальные этажи.
Интерактивность карты осуществляется при помощи JavaScript
Функция изменения цвета полигона, при наведении на них курсором.
$('. scheme-item'),hover(
functionOi
$('.scheme polygon[data-id=' + S(this).data('id') + ']').attr('id', 'hover');
},
functionf) i
$('.scheme polygonrdata-id- + S(this).data('id') + ']').attr('id', ");
s
);
Функция открытия подсказки после клика по названию помещения.
Si'.scheme-item').on('click'. function() { $(Vscheme-pop"up')-hide(); $('. scheme polygon').attr{'class',"); var popup = S( this). findC. scheme-popup'); $(popup).css£'top'. '-' - ($(popup).outerHeight(true) + 15) - 'px'); S(popup).css£'left','-' + !($(popup).oute: \V:dthi;rueI / 2) -mfhis).outerWidth(true) / 2)) + 'gx');
SC.scheme polygon[data-id=' + S(this).data('id') + 'l'Vattrfclass'. 'active');
});
Функция открытия подсказки после клика по полигону.
St'.scheme poly gon').click( function!} ( Se. scheme-popup')-hidet);
S(Vscheme-item[data-id=' + $(this).data('id') + ']'). trigger«'click');
5);
Функция сокрытия подсказки после клика вне полигона. $'("bodv").chck(fLmction(e) {
if ($(e..target).closest(''.scheme polygon, .scheme-item").length == 0) { S(" ,scheme-popup").hide(); $('.scheme polygon').attr{'class', ");
}
});
Тестирование и внедрение. На этапе тестирования проведено размещение проекта на электронном флипчарте в читальном зале Научной библиотеки Бурятской ГСХА. В процессе тестирования проверено соответствие отображаемой информации, работа ссылок, SVG-полигонов. При размере по диагонали 65" и рабочем разрешении экрана 3840x2160 проект отображается корректно.
После этапа тестирования, проект был внедрен в работу на электронном флипчарте в читальном зале Научной библиотеки Бурятской ГСХА. В результате введения карты в эксплуатацию пользователи отметили ее удобство и отсутствие проблем с навигацией между корпусами и внутри главного корпуса Академии.
Заключение. В результате выполнения научно-исследовательской работы разработана интерактивная карта главного корпуса Бурятской ГСХА. Проведено тестирование и адаптация под устройство. В дальнейшем для обеспечения первокурсников (и не только) информацией о кабинетах карта планируется дополнить более расширенной информацией (фото, видео, 3D-модель, количество мест, оснащенность аудитории), добавить функцию поиска кабинета, возможность построения маршрута.
Список литературы
1.Баженова, В. А. Основные виды и функции интерактивных карт / В. А. Баженова, Г. А. Манеев // Российские регионы в фокусе перемен : Сборник докладов XVII Международной конференции, Екатеринбург, 17-19 ноября 2022 года. - Екатеринбург: ООО Издательский Дом «Ажур», 2023. - С. 633-635. - EDN PJVQQA.
2.Байрамгалиев, Р. А. Редактирование векторной графики в Inkscape : учебно-методическое пособие / Р. А. Байрамгалиев. — Оренбург : ОГПУ, 2024. — 66 с. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://elanbook.com/book/404135 (дата обращения: 15.10.2024). — Режим доступа: для авториз. пользователей.
3.HTML и SVG: создаём интерактивную карту [электронный ресурс] / URL: https://habr.com/ru/articles/127994/ (Дата обращения: 31.05.24).
Базаржапова Туя Жамьяновна, канд. пед. наук, доцент, [email protected], Россия, Улан-Удэ, Бурятский государственный университет имени Д. Банзарова,
Шанарова Дарья Алдаровна, асситент, [email protected], Россия, Улан-Удэ, Бурятская государственная сельскохозяйственная академия имени В.Р. Филиппова
DEVELOPMENT OF AN AGROCALCULATOR FOR CALCULATING FERTILIZERS USING THE JAVASCRIPT
PROGRAMMING LANGUAGE
T.Zh. Bazarzhapova, D.A. Shanarova
The article describes the development of an interactive map of the Buryat Agricultural Academy, its functionality and possible areas of its application. The map is designed using HTML, CSS, JavaScript and using the capabilities of SVG graphics.
Key words: Interactive organization map, HTML, CSS, JavaScript programming language, SVG.
Bazarzhapova Tuya Zhamyanovna, candidate of pedagogical sciences, docent, [email protected], Russia, Ulan-Ude, Buryat State University named after D. Banzarov,
Shanarova Daria Aldarovna, [email protected], Russia, Ulan-Ude, Buryat State Agricultural Academy named after V.R. Filippov
