КуркинАС_презентация

1.

МИНОБРНАУКИ РОССИИ
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«МИРЭА – Российский технологический университет»
РТУ МИРЭА
Институт информационных технологий (ИТ)
Кафедра инструментального и прикладного программного обеспечения (ИиППО)
КУРСОВАЯ РАБОТА
Клиентская часть интернет-ресурса «Букмекерская контора»
Студент: Куркин Александр Сергеевич
Группа: ИКБО-20-24
Руководитель: Братусь Надежда Валерьевна, старший преподаватель
Москва 2025

2. Цель

Разработка клиентской части интернет-ресурса «Букмекерская контора»
Задачи
–
–
–
–
Анализ предметной области
Изучение технологий, применяемых для разработки клиентской части веб-ресурсов
Создание адаптивного интернет-ресурса с удобной навигацией
Тестирование разработанного ресурса, включая проверку адаптивности и корректности
работы интерактивных элементов
2

3. Анализ предметной области

– Онлайн-букмекерские сервисы требуют интуитивного, понятного и адаптивного
интерфейса, так как пользователи активно работают с сайтом как на ПК, так и на
мобильных устройствах.
В рамках анализа были изучены популярные букмекерские платформы (BetBoom, Fonbet,
1xСтавка), оценены их удобство, адаптивность, визуальная подача и организация линий и
live-событий.
– По результатам анализа выявлены ключевые требования к интерфейсу:
– простая и логичная навигация;
– современный визуальный стиль без перегрузки экрана;
– качественная мобильная версия;
– наличие бонусного раздела и понятных подсказок;
– система уведомлений и интерактивных элементов.
– Эти выводы легли в основу проектирования интерфейса BetPro.
3

4. Используемые технологий

– HTML5 – структурная разметка страниц;
– CSS3 – стилизация, адаптивная верстка, переменные CSS, анимации;
– JavaScript – управление интерфейсом, работа с DOM, взаимодействие с элементами;
– JetBrains WebStorm– редактор исходного кода
– Git – система контроля версий
– GitHub – платформа размещения кода
– Браузеры для тестирования: Google Chrome, Mozilla Firefox, Яндекс Браузер
4

5. Логика работы разработанного решения

– Клиентская часть BetPro реализует набор интерактивных механизмов, обеспечивающих
удобное взаимодействие пользователя с веб-сайтом. Основная логика сосредоточена в
JavaScript и включает:
– • Динамическую работу интерфейса при прокрутке — изменение стиля шапки,
появление кнопки «Наверх», плавная анимация возврата к началу страницы.
• Систему уведомлений — открытие/закрытие панели сообщений, анимация иконки при
наличии новых уведомлений, обработка пользовательских событий.
• Адаптивное бургер-меню — переключение вида меню на мобильных устройствах и
перенос кнопки уведомлений между областями шапки.
• Фильтрацию событий Live — отображение карточек матчей по выбранному виду спорта
без перезагрузки страницы.
• Валидацию форм — проверка корректности данных при регистрации и в форме обратной
связи, вывод сообщений об ошибках.
• Адаптивную перестройку компонентов — изменение сеток карточек, галереи и
структуры элементов в зависимости от ширины экрана.
– Логика обеспечивает плавную, интерактивную и удобную работу приложения на разных
устройствах.
5

6. Взаимодействие элементов разработанного решения

– Архитектура клиентской части BetPro построена так, что ключевые элементы интерфейса
работают согласованно и обеспечивают единый пользовательский опыт:
– • Шапка сайта, меню и бургер-меню формируют навигационный каркас. При изменении
ширины экрана JavaScript автоматически перемещает элементы (например, кнопку уведомлений),
чтобы сохранить удобство использования.
– • Карточки событий Live и Линии взаимодействуют с системой фильтрации: выбор вида спорта
мгновенно изменяет набор отображаемых карточек без перезагрузки страницы.
– • Система уведомлений связана с навигацией: панель может открываться на любой странице, а
состояние уведомлений влияет на анимацию иконки.
– • Формы регистрации и обратной связи работают в связке со скриптами валидации: при
неверном вводе поля подсвечиваются, а сообщения об ошибках выводятся динамически.
– • Прокрутка и кнопка «Наверх» интегрированы с поведением шапки: при перемещении по
странице изменяются стили верхней панели, а кнопка плавного возврата активируется только при
необходимости.
– • Адаптивные сетки (карточки, галерея, блоки) взаимодействуют с CSS-медиазапросами и
JavaScript, подстраиваясь под любой размер экрана.
– Совместная работа этих элементов формирует цельный, интерактивный и удобный интерфейс, в
котором каждая часть поддерживает общую логику приложения.
6

7. Демонстрация работы системы

– Скриншоты работы разработанного решения
7

8. Результаты

– Поставленные задачи выполнены в полном объёме
– Разработано 6 страниц сайта
– Написано свыше 1000 строк кода
– Обеспечена межстраничная навигация
– Сайт адаптирован под мобильные устройства
Клиентская часть интернет-ресурса доступна по адресу:
https://bernathrix.github.io/cursovaya/
Исходный код проекта размещён в репозитории GitHub:
https://github.com/Bernathrix/cursovaya
8