Файл: Орский гуманитарнотехнологический институт.docx

4 Проектирование программного продукта

4.1 Разработка функциональной модели IDEF0

Функциональная модель предназначена для описания процессов обработки данных для «ИП ЭЛЕКОМ».

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

Рисунок 4.1 – Контекстная диаграмма формата IDEF0
Модель IDF0 первого уровня содержит декомпозицию, то есть разделение на четыре основных процесса: поставка нового товара, оформление заказа, слад товаров, выдача клиенту. На рисунке 4.2 показана модель формата IDF0 первого уровня.


Рисунок 4.2 –Диаграмма первого уровня формата IDF0
Опишем основные блоки диаграммы первого уровня. A1-поставка нового товара. А2-оформление заказа. А3-склад товаров. А4-выдача клиенту. Выходными данными являются: счета оплаты, отчеты и товары.

4.2 Разработка структуры сайта

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

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

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

Структура сайта зависит от того, какой вид сайта вообще планируется делать. Если это сайт-визитка, то здесь план-схему сделать проще всего. Здесь будет главная страница, а от неё идут ссылки на разделы.

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

Зачем нужна структура сайта

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

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

Хорошая структура сайта делает его удобным не только для посетителей. Поисковым роботам она тоже облегчит работу, в итоге не будет проблем с индексацией страниц.

Существует несколько видов структур сайта:

• 
  Линейная: самая простая структура — здесь каждая страница ссылается на другую, одна за одной. Пользователь проходит через весь сайт по одному пути — от начала до конца. Такую структуру имеют лендинги, сайты-портфолио, презентации. Тут основная задача провести пользователя по чёткому пути от начала сайта до конца, не давая свернуть с него. Эта же структура может быть и с ответвлениями. Используется, где нужно познакомить пользователя с несколькими продуктами, но навигация по сайту тоже идёт постранично.
  
• 
  Блочная: эта структура встречается крайне редко, потому что подходит далеко не для всех сайтов. В основном — для тех, кто презентует один продукт. Каждый блок описывает какое-то преимущество, и все страницы ссылаются друг на друга. Потому для продвижения такой сайт практически готов, дело за контентом.
  
• 
  Деревовидная: это самый распространённый вид структуры сайта, и понятно почему — она позволяет чётко задать иерархию страниц, связать их с помощью хлебных крошек. Эта схема оптимальна для продвижения сайта, и большинство ресурсов в интернете имеют в своей основе именно её.
  

Структура для интернет-магазина «Элеком» показана на рисунке 4.3.



Рисунок 4.3 – Структура интернет-магазина
На сайте находится одна главная страница, при входе на которую появляется возможность перейти в другие разделы: Корзина, Магазин, Мой аккаунт, Блог.

При входе в раздел корзина можно оформить и оплатить заказ.

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

На странице мой аккаунт можно перейти на вкладки:

• 
  панель управления, в которой можно можно произвести настройку своего аккаунта,
  
• 
  Заказы, где можно посмотреть историю заказов.
  
• 
  Адрес, тут хранится история адресов.
  
• 
  Выход.
  

На странице Блог можно выбрать категорию блога и изучить новую информацию.

4.3 Разработка дизайна и макетов страниц интернет-магазина

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

Главные задачи и функции веб-дизайна:

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

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

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

Описание дизайна интернет-магазина:

• 
  Основная цветовая гамма сайта: белый, черный и красный.
  
• 
  Основной тип, размер и цвет шрифта: Times New Roman, 20pt, черный цвет.
  
• 
  Цвет бренда: синий и красный.
  
• 
  Размер картинки товара: 15 х 15.
  

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

Макет главной страницы магазина показан на рисунке 4.4


Рисунок 4.4 – Макет главной страницы
На странице карточка товара представлена с подробным описанием:

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

Карточка товара показана на рисунке 4.5.


Рисунок 4.5 – Карточка товара
Макет страницы «Корзина» представлен на рисунке 4.6.

Рисунок 4.6 – Макет страницы «Корзина»
Макет страницы «Статьи» показан на рисунке 4.7.

Рисунок 4.7 – Макет страницы «Статьи»

Заключение

Производственная практика (преддипломная) проходила с 18.04.2022 по 14.05.2022 на предприятии ПАО «Гайский ГОК

• 
  В процессе прохождения преддипломной практики была изучена деятельность организации ПАО «Гайский ГОК, основными видами деятельности которой являются:
  
• 
  добыча открытым и подземным способом полезных ископаемых; 
  
• 
  переработка, обогащение и реализация полезных ископаемых; 
  
• 
  доведение их посредством услуг переработчиков до металлов в чистоте; 
  
• 
  производство и сбыт строительных материалов; производство товаров народного потребления и оказание услуг; 
  
• 
  производство, переработка и реализация сельхозпродукции;
  
• 
  строительство и ремонт производственных, жилищно-бытовых и социально-культурных объектов; 
  
• 
  коммерческо-посредническая и внешнеэкономическая деятельность; 
  
• 
  изготовление, ремонт и наладка энерготехнического и энергетического оборудования предприятия; 
  
• 
  выполнение работ по строительству подземных газопроводов, газового оборудования, промышленного, сельскохозяйственных предприятий и жилищно-бытового сектора. 
  

В процессе прохождения производственной практики был изучен язык программирования php и система управления контентом WordPress.

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

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

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

Задачи преддипломной практики выполнены в полном объёме.

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

1. 
   ГОСТ 34.601-90. Информационная технология. Комплекс стандартов на автоматизированные системы. Автоматизированные системы. Стадии создания. – Взамен ГОСТ 24.601-86, ГОСТ 24.602-86; введ. 1992-01-01. – М : Стандартинформ, 2009. – 6 с.
   
2. 
   ГОСТ 34.602-89. Информационная технология. Комплекс стандартов на автоматизированные системы. Техническое задание на создание автоматизированной системы. – Взамен ГОСТ 24.201-85; введ. 1990-01-01. – М : Стандартинформ, 2009. – 19 с.
   
3. 
   Работы студенческие. Общие требования и правила оформления. СТО 02069024.101 – 2015. – Оренбург : Изд-во ОГУ, 2015. – 89 с.
   
4. 
   Методические указания по подготовке и выполнению выпускной квалификационной работы (дипломного проекта) для специальности 09.02.03 «Программирование в компьютерных системах. / Михайличенко Ж.В., Кузниченко М.А. – Орск: Издательство ОГТИ, 2016 – 70 с.
   
5. 
   Сайт «icbcode» [Электронный ресурс] Режим доступа: https://icbcode.ru/blog/10-kriteriev-horoshego-sajta
   
6. 
   Сайт «fundamental» [Электронный ресурс] Режим доступа: https://fundamental-research.ru/ru/article/view?id=36472
   
7. 
   Сайт «docs.cntd.ru» [Электронный ресурс] Режим доступа: https://docs.cntd.ru/document/1200006924
   
8. 
   Сайт «radiodetali» [Электронный ресурс] Режим доступа: https://www.radiodetali.su
   
9. 
   Сайт «chipdip» [Электронный ресурс] Режим доступа: https://www.chipdip.ru/about
   
10. 
    Сайт «dip8.ru» [Электронный ресурс] Режим доступа: https://dip8.ru/company/
    
11. 
    Рудаков А.В. Технология разработки программных продуктов. Практикум: учебное пособие для студ. учреждений сред. проф. образования. – 4-е изд., стер. – М.: Издательский центр «Академия», 2014. – 192 с.
    
12. 
    Сайт «Office.com» [Электронный ресурс] Режим доступа: https://www.cyberforum.ru