CC BY
14УДК 004.02
Кореняк Е.А.
магистр кафедры информационных систем в строительстве Донской государственный технический университет (Россия, г. Ростов-на-Дону)
ТЕХНОЛОГИИ РАЗРАБОТКИ В ГРАФИЧЕСКОГО ИНТЕРФЕЙСА ИНТЕРНЕТ-МАГАЗИН ПО ПРОДАЖЕ СПЕЦИАЛИЗИРОВАННОЙ
КОМПЬЮТЕРНОЙ ТЕХНИКИ
Аннотация: в данной статье рассматривается концепт графического интерфейса интернет-магазина по продаже специализированной компьютерной техники. Описаны технологии и их реализация в интернет-магазине.
Ключевые слова: информационная система, программирование, информационные технологии, интернет-магазин.
Создание веб-ресурса - это комплекс мероприятий, объединяющих в себе разработку дизайна, информационное наполнение, применение технологий веб и маркетинга, направленных на удовлетворение потребностей посетителей и владельцев будущего сайта.
Графический интерфейс веб-сайта представляет из себя некий набор
изображений, текста, окон, элементов взаимодействия и тому подобного, что позволяет
пользователю удобно взаимодействовать с веб-ресурсом. Для упрощения его
разработки могут использоваться так называемые фреймворки (Framework).
Framework (фреймворк) - ПО, служащее для облегчения разработки, а также для
объединения различных компонентов программного проекта. Они используются как
для упрощения и «шаблонизации» интерфейса, так и для программирования серверной
части интернет-ресурса. Они позволяют повысить скорость и удобство разработки,
уменьшить затраты на разработку приложения, оптимизировать время, необходимое на
разработку. Кроме того, они позволяют писать чистый код, не требующий
368
существенной переработки в будущем. Их применение необходимо, когда CMS не могут выполнить требования разработки веб-ресурса, либо затраты на сам CMS являются нерациональными по отношению к разработке на фреймворке. К недостаткам фреймворков можно отнести проблемы с безопасностью из-за того, что почти все из них имеют открытый исходный код и сложность освоения, поскольку каждый фреймворк требует отдельного изучения. И хотя возможна разработка приложения без их применения, но она потребует слишком больших затрат сил и времени, а также потребует слишком большого мастерства, если нужно достигнуть результата, не уступающего тому, который был бы при применении фреймворков.
Для упрощения разработки интернет-магазина был выбран Bootstrap - фреймворк для упрощения разработки интерфейса, включающий в себя набор инструментов, шаблонов HTML и CSS, а также инструментов для верстки. Его главным преимуществом считается адаптивность, оптимизация под мобильные устройства, стандартизация элементов интерфейса.
Далее рассмотрим примеры реализации графического интерфейса.
Пример. Разработать графический интерфейс главной страницы интернет-магазина и панели администратора, используя фреймворк Bootstrap.
Решение. Создадим главную страницу интернет-магазина, где будут изображены последние добавленные товары, каталог по категориям, основная информация, переход к корзине и контактам.
На следующем рисунке изображена готовая главная страница сайта.
Рисунок 1- Таблица «товары»
Создадим главную страницу панели администратора интернет-магазина, на которой можно будет просмотреть id товара, его код (артикул), название и цену. Также добавим кнопки для добавления нового товара, кнопки для быстрого перехода к редактированию и удаления позиции.
На следующем рисунке изображена готовая главная страница панели администрирования списка товаров.
] Управление товарами + Добавить товар
Список товаров
товара Артикул Название товара Цена
1839707 Ноутбук Asus Х200МА (Х200МА-КХ315D) 395 or *
2343847 Ноутбук HP Stream 11-d050rir 305 sr x
2028027 ноутбук Asus Х200МА White 270 sr x
2019487 ноутбук Acer Aspfre E3-112-C65X 325 or x
1953212 Ноутбук Acer TravelMate TMB115 275 C? X
1602042 Ноутбук Lenovo Flex 10 370 & X
2028367 ноутбук ASUS X751MA 430 & X
1129365 Samsung Galaxy Tab S 10.5 16GB 780 & X
1128670 Samsung Galaxy Tab S 8.4 16GB 640 or x
Рисунок 2- Панель администрирования списка товаров Список литературы
1. Дронов, В.А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Санкт
- Петербург: БХВ, 2011 - 416 с;
2. Дж. Раскин. Интерфейс: новые направления в проектировании компьютерных систем. СПб.: Символ-Плюс, 2003. с;
3. Дронов, В.А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Санкт
- Петербург: БХВ, 2011 - 416 с;
4. Статья «Сетка Bootstrap 4» URL: https://webdesign-master.ru/blog/html-css/2018-02-04-bootstrap-4.html [Электронный ресурс] (дата обращения: 30.05.2019);
5. Статья «Подборка полезных инструментов и библиотек для веб-разработчиков» URL: https://tproger.ru/digest/web-tools-and-libraries/ [Электронный ресурс] (дата обращения: 30.05.2019)
