Статья опубликована в рамках: CVIII Международной научно-практической конференции «Научное сообщество студентов XXI столетия. ТЕХНИЧЕСКИЕ НАУКИ» (Россия, г. Новосибирск, 09 декабря 2021 г.)
Наука: Информационные технологии
Скачать книгу(-и): Сборник статей конференции
дипломов
СУЩЕСТВУЮЩИЕ ПОДХОДЫ К РАЗРАБОТКЕ МАКЕТОВ СОВРЕМЕННЫХ WEB ПРИЛОЖЕНИЙ
EXISTING APPROACHES TO THE DEVELOPMENT OF MODERN WEB APPLICATIONS
Nikita Timoshenko
undergraduate, department of information and control systems, Reshetnev Siberian State University of Science and Technology,
Russia, Krasnoyarsk
Sergey Yarovoy
scientific adviser, Cand. tech. sciences, Reshetnev Siberian State University of Science and Technology,
Russia, Krasnoyarsk,
АННОТАЦИЯ
В статье рассмотрены существующие подходы к разработке макета сайта, выявлены их плюсы и минусы, показана зависимость выбора макета в зависимости от задач, стоящих перед разработчиком.
ABSTRACT
The article examines the existing approaches to the development of a site layout, identifies their pros and cons, shows the dependence of the choice of a layout depending on the tasks facing the developer.
Ключевые слова: Макет веб-сайта, Адаптивная верстка, отзывчивая верстка, фиксированная верстка, bootstrap, сравнение существующих макетов веб-сайтов, frontend.
Keywords: Website layout, Responsive layout, responsive layout, fixed layout, bootstrap, comparison of existing website layouts, frontend.
Сейчас наиболее популярной и перспективной технологией по разработке приложений является технология web. Одним из этапов разработки веб-приложения является составление макета сайта. Существует множество подходов к разработке макета. Начинающему разработчику может быть сложно разобраться какой именно подход надо будет использовать. Данная работа призвана помочь сформировать представление о существующих подходах к созданию макетов сайта и помочь в выборе определенного макета в зависимости от стоящих задач.
WEB-разработка — процедура создания WEB-приложения или WEB-сайта.[1] Разработку сайта принято делить на 2 части: frontend и backend. [2]
В данной статье остановимся подробнее на первой составляющей сайта.
Дизайн сайта играет очень важную роль в восприятии предприятия клиентом. Чтобы получить привлекательный и удобный дизайн сайта необходимо четко придерживаться плана по разработке, а также определить для себя какой подход будет использован при создании макета сайта. На данный момент существуют 3 вида макетов: Фиксированный, отзывчивый, адаптивный.[3] Рассмотрим каждый из них.
Фиксированный макет означает, что ваш сайт будет иметь фиксированный размер всех элементов вне зависимости от разрешения устройства, на котором он открыт. При таком подходе программисту не нужно создавать множество макетов сайтов, заботиться о предельных значения. Такой тип макета занимает меньше всего времени, но и является самым неудобным, пример такого сайта изображен на рисунке 1.
Рисунок 1. Пример фиксированного макета при просмотре с разных устройств
Отзывчивый макет сайта предусматривает изменение размера всех элементов в зависимости от разрешения устройства. Технически это реализовывается указанием ширины и длины элементов в процентах от параметров просматривающего устройства. Данный тип макета занимает больше времени, чем фиксированный макет, но и имеет более презентабельный вид и позволяет удобно работать с сайтом на устройствах, имеющих схожее разрешение (рис.2).
Последний вид макета адаптивный. При таком макете сайт имеет несколько готовых макетов, и в зависимости от разрешения пользовательского устройства, выводится именно тот макет, который больше всего подходит и при этом этот макет уже может адаптироваться в рамках определенных программистом. Этот тип макета занимает больше всего времени, но и выглядит хорошо на любых устройствах. На устройствах с большим экраном контент будет свободно просматриваться, будет видна навигация, на телефонах и планшетах сайт будет скрывать меню навигации и будет стараться показаться только наиболее важный контент (рис. 3).[4]
Для реализации адаптивной верстки существуют специальные фреймворки. Фреймворки — это программная среда специального назначения, каркас, цель которого существенно облегчить процесс объединения определенных компонентов при создании программ.[5] Из плюсов можно выделить меньше вероятность потенциальной ошибки, ускоренная разработка макета за счет использования готовых классов и компонентов, отсюда же следуют и минусы - шаблонизированность сайта, теряется уникальность. Также при использовании стандартной версии фреймворка bootstrap в небольших проектах редко используются все доступные возможности данного фреймворка, в таких случаях его использование можно считать нецелесообразным.[6]
Рисунок 2. Пример отзывчивого макета на разных устройствах
Рисунок 3. Адаптированный макет сайта на устройствах с различным разрешением
Таблица 1.
Сравнительная таблица существующих подходов к разработке макета сайта
|
Вид верстки |
Кол-во макетов для 1-го сайта |
Скорость загрузки веб-страницы от 1 до 5 |
Время, затрачиваемое на создание сайта от 1 до 5 |
Гибкость сайта к изменению экрана |
Простота создания от 1 до 5 |
|
Фиксированный |
1 |
4 |
5 |
1 |
5 |
|
Отзывчивый |
1 |
4 |
2 |
4 |
3 |
|
Адаптивный |
От 3 |
3 |
3 |
3 |
4 |
В данной работе были рассмотрены три вида подхода к созданию макета, рассмотрены их плюсы и минусы таблица 1. Исходя из приведенного исследования не стоит думать, что нужно всегда выбирать адаптивный макет. На начальном этапе хорошо подойдет фиксированный макет сайта для создания минимально жизненно способного продукта, затем в развитии продукта, можно будет задуматься над отзывчивым макетом или адаптивным. Возможно, заказчик захочет сэкономить на сайте, но создать полноценное приложение для мобильных устройств и его вполне устроит вариант с адаптивным сайтом. Подбирать макет сайта нужно в зависимости от целей проекта.
Список литературы:
- Что такое веб-разработка [Электронный ресурс]. — Режим доступа: https://sky-rzn.ru/blog/interesnoe/chto-takoe-web/ (дата обращения 01.10.2021)
- Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют [Электронный ресурс]. — Режим доступа: https://tproger.ru/translations/frontend-backend-interaction/ (дата обращения 02.10.2021)
- Создание веб-сайта. Курс молодого бойца [Электронный ресурс]. — Режим доступа: https://habr.com/ru/post/273795/ (дата обращения 02.10.2021)
- Палаш Б. В., Голубничий А. А. АДАПТИВНАЯ ВЕРСТКА // журнал E-scio [Электронный ресурс]. — Режим доступа: https://cyberleninka.ru/article/n/adaptivnaya-verstka (дата обращения 10.10.2021)
- Фреймворк - важный инструмент программиста. Обзор HTML/CSS, PHP, Javascript и Python-фреймворков и библиотек [Электронный ресурс]. — Режим доступа: https://fructcode.com/ru/blog/features-of-popular-frameworks-html-css-php-and-python-frameworks/ (дата обращения 10.10.2021)
- Журавлев Е. С. Использование Bootstrap для разработки сайтов Use Bootstrap for site development, // 73-Й НАУЧНО-ПРАКТИЧЕСКАЯ КОНФЕРЕНЦИЯ СТУДЕНТОВ ПО ИТОГАМ НИР ЗА 2017 ГОД "НАУЧНОЕ ОБЕСПЕЧЕНИЕ АГРОПРОМЫШЛЕННОГО КОМПЛЕКСА" (Краснодар, 25 апреля 2018 г.). Краснодар, 2018 – C. 543-546
дипломов
Оставить комментарий