Разработка веб-сайта для фитнес-клуба

Размещено на http://www.allbest.ru/

4

Профессиональное образовательное учреждение

«КОЛЛЕДЖ СОВРЕМЕННОГО УПРАВЛЕНИЯ»

Специальность: Прикладная информатика (по отраслям)

Разработка, внедрение и адаптация программного обеспечения отраслевой направленности

Курсовая работа

Тема: «Разработка веб-сайта для фитнес-клуба»

Обучающийся: Ермакова Маргарита Максимовна

Руководитель работы: Черецкий Матвей Викторович

Москва, 2024

ЗАДАНИЕ

для курсовой работы

Обучающийся Ермакова Маргарита Максимовна

Группа ПИ 41-20-9

«Разработка, внедрение и адаптация программного обеспечение отраслевой направленности»

Тема задания «Разработка веб-сайта для фитнес-клуба»

Перечень вопросов, подлежащих разработке

1. Теоретические основы проектирования веб сайтов

2. Проектирование, разработка и запуск веб-сайта для фитнес-клуба

Работа должна состоять из:

Титульный лист

Содержание

Введение

Основная часть (разделы и подразделы; главы)

Заключение

Список использованных источников

Литература

1. Указание 10 и более количества используемой литературы, авторов.

2. Литература за последние пять лет.

Дата выдачи работы «02» февраля 2024 г. Срок сдачи работы «15» марта 2024г.

Преподаватель: Черецкий М.В.



СОДЕРЖАНИЕ

ВВЕДЕНИЕ

ГЛАВА 1. ЗНАКОМСТВО С САЙТАМИ

1.1 Веб-сайты, понятие и назначения

1.2 Языки программирования, используемые для создания веб-сайтов

ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА ФИТНЕС КЛУБА

2.1 Написание кода

2.2 Реализация веб-сайта для фитнес-клуба «TopFit»

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ПРИЛОЖЕНИЕ



ВВЕДЕНИЕ

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

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

Разбирая подробнее, веб-сайты считаются важным и неотъемлемым инструментом в современном мире. Они учувствуют в:

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

Маркетинге и продажах: Веб-сайт предоставляет площадку для распространения информации о продуктах и услугах, а также эффективное средство для увеличения продаж и привлечения клиентов.

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

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

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

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

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

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

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

Предметом данной курсовой работе является процесс разработки дизайна, функциональности, пользовательский опыт, маркетинг и создание веб-сайта для фитнес-клуба.

Объектом работы считается разрабатываемый сайт, его интерфейс и функциональные возможности.

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

При разборе и анализе поставленной цели были выявлены следующие задачи:

Изучение потребностей клиентов;

Анализ конкурентов;

Определение визуального оформления;

Определение функциональности;

Разработка сайта по имеющимся данным;

Тестирование и оптимизация;

Документирование.

В своей работе я использовала такие методы исследования как наблюдение, сравнение и тестирование.

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



ГЛАВА 1. ЗНАКОМСТВО С САЙТАМИ

1.1 Веб-сайты, понятие и назначения

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

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

Более того, веб-сайты стали неотъемлемой частью современного бизнеса. На это повлияли возможности, которые прёдоставляет сайт:

- Привлечение клиентов;

- Повышение узнаваемости бренда;

- Взаимодействие с аудиторией и т.д.

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

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

Предоставление информации.

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

Электронная коммерция.

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

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

Коммуникация и обратная связь.

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

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

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

Самовыражение и контент-маркетинг.

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

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

Предоставление онлайн-сервисов.

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

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

Укрепление бренда и позиционирования.

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

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

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

Веб-сайт обеспечивает бренду глобальное присутствие, привлечение и удержание аудитории не только в локальном регионе, но и по всему миру.

Образовательные и информационные ресурсы

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

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

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

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

Понимание назначения и роли веб-сайтов в различных аспектах от информационного предоставления до онлайн продаж помогает нам понять их значимость.



1.2 Языки программирования, используемые для создания веб-сайтов

Язык программирования - это специальный язык, используемый программистами для написания набора инструкций, которые компьютер может выполнить. Он определяет правила и понятия, по которым создается программа, которая управляет работой компьютера, приложениями и устройствами.

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

Языки программирования - невероятно важный компонент нашей жизни в цифровом пространстве, поскольку они:

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

- Эффективно решают задачи, автоматизируют процессы и упрощают повседневные действия;

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

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

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

Различные языки программирования используются для разработки разных компонентов сайта, к примеру таких как frontend (клиентская часть веб-приложения или веб-сайта, которая взаимодействует с пользователем непосредственно в браузере) и backend (часть веб-приложения или веб-сайта, которая обращается к серверу).

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

HTML (HyperText Markup Language)

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

CSS (Cascading Style Sheets)

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

JavaScript

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

PHP

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

Он широко используется в создания CMS (Система Управления Содержимым), электронной коммерции, пользовательских систем и других онлайн-приложений.

Python

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

Ruby

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

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

Java

Java - это универсальный объектно-ориентированный язык программирования с огромным сообществом разработчиков по всему миру. Он широко используется в различных сферах: от разработки мобильных приложений, игровых и веб-приложений, до создания корпоративных приложений и встраиваемого программного обеспечения.

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

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



ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА ФИТНЕС КЛУБА

2.1 Написание кода

Для начала я создала общую папку, внутри которой разместила главную html страницу и общие папки, предназначенные для хранения файлов: css страниц, шрифтов, изображений, js файлов и дополнительных страниц сайта.

Рис. 1 Содержимое общей папки

На странице index, что является главной или стартовой страницей, я создала базовую разметку с тегами <DOCTYPE>, <html>, <head> и <body>.

Рис 2. Базовая разметка

В шапке, теге <head>, я указала название сайта, подключила необходимые css страницы и вставила логотип сайта отображающеюся во вкладке браузера.

Рис 3. Содержание тега head

В теге <body> у меня размещён контент сайта, структурированно разделенный на отдельные секции: header, icons, programs, coach, footer.

Рис 4. Содержание тега body

Тег <header>, «шапка» моего веб-сайта, содержит меню для десктопной версии, меню для мобильной версии и начальный экран с названием сайта.

Я использовала теги <li> и <a> для ссылок, тег <button> для кнопки, и <h1> для названия сайта на начальной странице.



Рис 5. Содержание тега header

Внутри <div> с классом “icons” у меня размещены позитивные стороны фитнес клуба, его преимущества как:

- большое количество разнообразных тренажёров;

- круглосуточный режим работы;

- наличие современных душевых и комфортных раздевалок;

- большая и удобная подземная парковка.



Рис 6. Содержание тега icons

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

Каждую программу я обернула в отдельный <div>, добавила фоновое изображение, название и небольшое описание с положительными изменениями от занятий.

Всего показано 6 видов программ:

Тренажерный зал

Персональные тренировки

Yoga

Cardio

Total Free

Total Pro

А также я сделала <div> программы ссылкой на дополнительные информационные страницы. При клике на программу, пользователи будет перебрасывать на страницу с информацией именно по той программе, на которую нажали.

Вернуть на главную страницу можно нажав на рисунок звезды на самом верху станицы.

Рис 7. Содержание тега programs

Следующая секция с карточками тренеров, её я сделала в виде слайдера.

Карточка содержит фотографию тренера, его/её имя и фамилию, описание с программами которые проводит и кнопку «Записаться».

Каждая карточка обернута в <div>, в свою очередь все они также обернуты в общий <div> имеющий класс “swiper-wrapper”.

В этом общем контейнере находятся не только карточки, но и:

- кнопка с перелистыванием направо;

- кнопка с перелистыванием налево;

- анимация с указанием количества карточек, и какая сейчас открыта.

Также в этой секции находиться всплывающие окно при нажатии на кнопку «Записаться».

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

После отправки данных всплывающие окно закрывается.

Рис 8. Содержание тега coach

И последняя секция на веб-сайте в теге <footer> - это нижняя часть или «подвал».

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

Рис 9. Содержание тега footer



2.2 Реализация веб-сайта для фитнес-клуба «TopFit»

После завершения этапа написания кода, веб-сайт для фитнес-клуба «TopFit» выглядит так:

Рис. 10 Главная страница

Рис. 11 Главная страница

Рис. 12 Главная страница

Рис. 13 Главная страница

Рис. 14 Главная страница

Рис. 15 Модальное окно



Рис 16. Дополненная информационная страница

Рис 17. Дополненная информационная страница



ЗАКЛЮЧЕНИЕ

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

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

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

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

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



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Роббинс Д. HTML5. Карманный справочник / Д. Роббинс - Москва: Издательство Вильямс, 2019. - 192 с.

2. Титтел Э., Минник К. HTML5 и CSS3 для чайников / Э. Титтел, К. Минник - Москва: Издательство Диалектика, 2019. - 400 с.

3. Дронов В. HTML и CSS. 25 уроков для начинающих/ В. Дронов - СПб.: Издательство БХВ-Петербург, 2020. - 381 с.

4. Дронов В. JavaScript. Дополнительные уроки для начинающих / В. Дронов - СПб.: Издательство БХВ-Петербург, 2022. - 344 с.

5. Фрэйн Б. Отзывчивый дизайн на HTML5 и CSS3 для любых устройств / Б. Фрэйн - СПб.: Издательство Питер, 2020. - 336 с.

6. Квинт И. HTML, XHTML и CSS на 100% / И. Квинт - СПб.: Издательство Питер, 2010. - 440 с.

7. Кириченко А.В., Хрусталев А.А. HTML5 + CSS3. Основы современного WEB-дизайна / А.В. Кириченко, А.А. Хрусталев - Москва: Издательство Наука и Техника, 2019. - 352 с.

8. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS / Э. Робсон, Э. Фримен - СПб.: Издательство Питер, 2019. - 720 с.



ПРИЛОЖЕНИЕ

Программирование сайта для фитнес-клуба «TopFit» выполнялось в редакторе Visual Studio Code.

Размещено на Allbest.ru