Разработка сайта кондитерского комбината «Кубань» (Описание интерфейса «Обычный пользователь»)

Содержание:

ВВЕДЕНИЕ

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

За последний год в стране появилось почти 6 миллионов новых пользователей, это как четыре Новосибирска. Ещё сильнее выросла дневная аудитория — на 6,7 миллиона человек.

Одним из развивающихся секторов в сети Интернет является электронная коммерция, функции которой позволяют пользователям приобретать товар в глобальной сети. По результатам исследования ACNielsen, проведенного в 2019 году, через Интернет делал покупки каждый десятый житель планеты (627 млн. человек). При этом самым популярным товаром выступают книги (приобретают 212 млн. человек), далее идут DVD и видеоигры (135 млн. человек). Примерно столько же предпочитают оплачивать через Интернет авиабилеты. Еще 128 млн. человек пользуются онлайн-сервисами для покупки одежды и обуви.

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

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

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

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

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

Заданием курсовой работы является разработка сайта кондитерского комбината «Кубань».

Цель курсовой работы – разработка сайта.

Задачи на курсовой проект:

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

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

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

Структура работы: курсовая работа состоит из четырех глав. В заключении подведены основные итоги проделанной работы и сделаны выводы по исследованию.

Техническое задание и выбор средств реализации

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

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

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

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

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

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

Для большинства заказчиков вполне подойдут простые модели проектирования и разработки сайтов.

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

1. Концептуальное.

2. Логическое.

3. Физическое.

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

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

• назначение программы;
• формат входных данных;
• формат выходных данных;
• пользовательский интерфейс и т.п.

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

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

Основная цель разработки сайта состоит в реализации представительства кондитерского комбината в Интернет сегменте.

Исходя из функций определяем несколько типов пользователей, а именно,

• технологии веб разработки;
• технологии front-end разработки;
• технологии разметки (HTML5+CSS3, SASS, SCSS).

Клиентская разработка является достаточно сложной и проблемной частью веб-проекта. К сожалению, в ней до сих пор нет единого стандарта разработки и существует множество технологий, языков и не было стандартов разработки. Сейчас в качестве стандарта предложена связка HTML5+CSS3+JavaScript. Данный стандарт будет поддерживаться с 2021 года всеми видами браузеров, как основной.

В современной разработке клиентской части сайта на этапе проектирования пользовательского интерфейса используется HTML5 в связке с таблицами стилей CSS3.

HTML5 - язык разметки, который отличается от предыдущей версии средствами программирования CANVAS на базе JavaScript, расширенными возможностями работы с медиа, расширенными элементами форм. Этот язык называют языком семантической разметки из-за четкой структуры представления элементов сайта. Появилась возможность разбиения страницы на логические области с помощью новых тегов <HEADER><BODY><FOOTER> и семантического разбиения <SECTION> <ARTICLE><DIV><ASIDE><NAV>

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

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

1. Создание элементов со сглаженными углами.
2. Задание цветов несколькими новыми способами.
3. Оформление границ, фонов, текста.
4. Гибкое оформление фоновых картинок элементов.
5. Создание линейных и сферических градиентов.
6. Создание анимаций и различных эффектов переходов.
7. Добавление к элементам и к тексту тени.
8. Создание различных трансформаций.
9. LESS, SASS, SCSS так называемые препроцессоры.

Для введения в стилевые свойства работы с переменными. Чаще всего используют SCSS, который более логичен при составлении кода и имеет больше возможностей, даже ветвления и циклы. Для разных систем для Windows используются специальные системы Compass или Koala или стандартные средства языка Ruby.

Sass (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Язык Sass имеет два синтаксиса:

1. старый – sass - отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
2. новый — SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.

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

Препроцессор встроен во все современные веб редакторы.

LESS имеет более сложный синтаксис и на сегодня уже устарел.

JavaScript+jQuery+JQueryUI+Ajax

Для реализации клиентской части сайта и создания динамического контента и функционала сайта используют клиентские языки программирования. Таких языков много, все они называются скриптовыми. Стандартом клиентской части считают язык клиентского веб программирования - JavaScript. Основной особенностью клиентского языка программирования является то, что они выполняются браузером и не имеют прямого доступа к файловой системе, а значит, и к базам данных, кроме XML файлов. JavaScript является объектным, объектно-ориентированным и, как объектный язык поддерживает DOM (технологию представления документа в виде группы объектов на некоторой подложке, которая носит название window). Окно может быть только одно, при этом оно обладает свойствами. В окне располагается документ (со своими свойствами), на документе располагаются элементы последовательно. Порядок расположения элементов может быть нарушен при применении CSS стилей, которые, могут управляться командами JavaScript.

Язык развивается и к нему пишутся библиотеки, которые собираются в фреймворки. Наиболее распространенными сегодня являются фреймворки jQuery c фреймворком внутри себя jQuery UI, Bootstrap, Angular. jQuery выполняет функции клиентской части сайта, значительно расширяет и упрощает код благодаря разработанным в нем функциям. jQuery UI построен на базе фреймворка и направлен на оформление основных элементов интерфейсной части сайта (меню, текстовые блоки, галереи и т.д.). Bootstrap используется при оформлении, Angular – при реализации AJAX технологии.

Использование фреймворков - является характерными признаками современного сайта и упрощает работу программиста.

Набор веб инструментов разработчика.

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

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

На следующем этапе практической разработки разрабатывается дизайн сайта.

Описание модулей серверной части программы и их взаимодействие

На серверную часть сайта возлагается основной функционал сайта, поэтому количество языков программирования больше, чем клиентской и нет одной технологии, которая была бы определена в качестве стандарта разработки. Из серверных языков программирования выделяют Ruby, ASP, JSP, Python, Perl. Наиболее распространенным является язык PHP версии 5 с полной поддержкой объектно-ориентированной технологии программирования, которая упрощает работу по повторному использованию кода, улучшает читаемость кода и позволяет реализовать командную разработку сайта. На PHP написано достаточно большое количество фреймворков (каркасов разработки структурных и функциональных элементов сайта). Среди наиболее распространенных фреймворков можно выделить Symphony, Zend, Yii, Doctrine, Smarty, Drupal, Wordpress, Jooomla! и др. Среди этих фреймворков существуют универсальные и специализированные (предназначенные для реализации только некоторых функций и задач веб разработки). Использование фреймворков позволяет значительно ускорить процесс разработки, сделать код более стандартным и читаемым. На базе фреймворков были разработаны CMS (Content Manager System), системы управления контентом сайта, позволяющие создать структуру сайта и добавлять функционал, в зависимости от требований к сайту.

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

Система состоит из отдельных модулей с общим интерфейсом и практически каждый модуль нуждается в настройке (рис.1)

Рисунок 1 Начало управления системой

Рисунок 2 Вид сайта после установки и предварительной настройки

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

Рисунок 3 Подключение дополнительных модулей сайта

Рисунок 4 Результат подключения

Итоговый вид подключенных модулей (рис.5).

Рисунок 5 Продключенные и активированные модули

На следующем этапе сосдаем структуру сайта (рис.6)

Рисунок 6 Создание элемента структуры сайта

Структура состоит из категорий с неограниченным количеством вложений, конечным элементом которых является материал. На рис. 7 представлена примерная структура сайта.

Рисунок 7 Фрагмент структуры сайта

Структура заполняется материалами в редакторе (рис.8)

Рисунок 8 Материалы сайта

Рисунок 9 Графические элементы материалов сайта

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

Рисунок 10 Фрагмент сайта

Описание структуры базы данных и ее функций

В back-end разработке, наиболее распространенной является связка PHP+MySQL.

PHP направлен на организацию полномасштабной работы с базами данных.

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

Рисунок 11 Предварительная структура сайта в MindManager

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

Для определения требований используются специальные редакторы, позволяющие веб-разработчику проектировать элементы продукта в графической форме на языке понятном заказчику. Такими редакторами являются карты мозга. Наиболее распространёнными редакторами карт мозга являются The Brain - составляет многомерные карты, Concept Draw - позволяет разрабатывать двумерные карты и Mind Manager Pro - также позволяет разрабатывать двумерные карты. Нами использовался Mind Manager Pro. В работе не рассматривались все программы, а только наиболее распространенная MindJet MindManager Professional (рис.12).

Рисунок 12 Результат проектирования сайта

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

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

Для создания сайта необходимо определить его структуру и изобразить ее на рисунке.

Mind Manager – одна из самых популярных и наиболее функциональных программ, удобный инструмент для управления картами памяти (mind-map), упрощающий организацию и распространение информации.

Данная программа позволяет моделировать в первом приближении сайт и может рассматриваться как CASE средство проектирования (рис 13).

Рисунок 13 Предварительная модель сайта после автоматической генерации

Проектирование макета сайта и его дизайна.

Для разработки дизайна существует ряд подходов:

Разработка с нуля.

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

WYSIWYG обозначает – «что видишь, то и получишь», т.е. данный редактор позволяет визуализировать процесс создания программного кода, а значит и дизайна сайта в целом, хотя это не совсем так. Данный редактор работает со всеми современными клиентскими и даже частью серверных (рис.14).

Рисунок 14 Использование редактора для прпограммирования функций сайта

Использование специальных фреймворков.

Чаще всего для этих целей используют специальный узкопрофильный фреймворк Smarty, реже Twig или Latte.

Разработка с помощью шаблонизатора.

Для этого способа разработки шаблона используется один из редакторов шаблонов, например Artisteer (рис.15).

Рисунок 15 Разработка шаблона сайта в редакторе Artisteer

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

С помощью программы можно за довольно короткое время создать тему для Wordpress и профессиональные шаблоны для Joomla! и Drupal.

Программа представляет из себя простой и в тоже час мощный механизм для верстки шаблонов Worpress, Drupal и Joomla. Интерфейс в Artisteer очень напоминает MS Office 2007 и разобраться с ним в мини заняло минимум часов, ухе четко, ясно и понятно, те. Программа имеет интерфейс, который схож с интерфейсом продуктов Microsoft.

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

Использование готового шаблона.

Рисунок 16 Стандартное описание блоков шаблона сайта

Еще одним способом установки интерфейсной части сайта является использование готового шаблона с дальнейшей настройкой, что и использовалось в данной работе. В качестве шаблона был взят бесплатный шаблон 3 колор с полным доступам ко всем элементам своего кода (рис.16).

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

Проектирование сайта.

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

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

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

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

На этом этапе определяются общие требования к дизайну веб-интерфейса.

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

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

На этапе проектирования определяется какие модули должны присутствовать на каждой странице веб-интерфейса.

Перед разработкой сайта на основе требований и предварительных моделей структуры и дизайна сайта проектируют сайт. Для этих целей используются редакторы прототипов. Наиболее известный и продвинутый Axure Pro.(Рис.17).

Рисунок 17 Построение прототипа сайта в редакторе Axure Pro

Затем прототип реализуется в шаблоне через программный код и средства визуального редактора (рис.18)

Рисунок 18 «Подгонка» шаблона в редакторе под структуру прототипа

На этом этапе нужно подготовит графические элементы шаблона и графику вообще, для чего использовался редактор Adobe Photoshop (рис.19)

Рисунок 19 Обработка элементов шаблона

Рисунок 20 Сохранение и преобразование в веб формат

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

Существует несколько подходов к разработке сайтов по отношению к месту разработки из которых можно выделить два:

- сайт разрабатывается на локальной машине, устанавливается локальный сервер на машину разработчика, чаще всего Apache и сервер баз данных MySQL (обычно устанавливается уже готовый пакет разработчика XAMPP или WAMP);

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

И в первом и во втором случае перенос сайта предполагает использование специальных программ-клиентов. Из таких программ можно выделить три FileZilla, FireFTP, c-panel.

Данные программы представляют собой не что иное, чем ftp клиенты и имеют стандартный двухпанельный интерфейс (рис.21).

После передачи файлов на сервере устанавливается CMS система.

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

Рисунок 21 Передача файлов на сервер

Описание структуры клиентской части

Описание интерфейса «Обычный пользователь»

После анализа этих систем была выбрана Joomla исходя из соображений, описанных ниже.

Joomla! относится к категории WCMS (Web Content Management Systems - система управления веб содержанием), поскольку ее функциональность администрируется из браузера в Web, хотя чаще иакие системы называют сокращенно CMS (Content Management System).

Joomla! - Наиболее широко распространенная система управления веб содержанием (Web Content Management System - WCMS).

WCMS состоит из клиентской и серверной частей.

Клиентская часть - это веб-сайт, который видят посетители и зарегистрированные пользователи.

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

Юзабилити (от англ. Usability) - простота и удобство использования сайта.

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

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

Страницы с ясной визуальной иерархии имеют три особенности:

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

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

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

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

Описание интерфейса «Администратор»

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

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

Контент (content), или содержание, может принимать различные формы от текста, изображения, ссылки, музыкальным фрагментом, фрагментом приложения вроде Google Map или комбинацией всего перечисленного. Чтобы сохранять контроль над контентом, он структурируется; например, текст разбивается на разные категории, при этом категории также являются контентом, который также требует администрирования.

Компоненты, модули, шаблоны и модули, подключаемые называются расширениями - (Extensions). Они предоставляют дополнительные функции, которых нет в ядре Joomla! и расширяют функциональность всей системы

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

Рисунок 22 Установка системы на сервер

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

Описывается ход разработки приложения:

• этапы разработки (описание + скриншоты);
• выбранные методы, алгоритмы реализации и т.п.

После установки переходим в административную часть и занимаемся настройкой системы (рис.23).

Рисунок 23 Административная панель системы

Инструкция пользователя

Заходим на сайт Кондитерский комбинат «Кубань». Смотрим вкладку «Каталог товаров». Вписываем нужное наименование. К примеру «паста». И нажимаем поиск. Выбираем товар. К примеру, выбираем «Паста с фундуком и какао "Кубанская лакомка", 350 г» и нам представится вся необходимая информация по данному виду продукции.

ЗАКЛЮЧЕНИЕ

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

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

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

Для разработки шаблона использовался редактор автоматизированной системы разработки дизайна сайта Artister и шаблон с адаптивной доработкой.

Затем была определена система разработки сайта CMS Joomla!.

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

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

Сайт был разработан.

Таким образом, все поставленные задачи были выполнены задачи решены.

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

1. Тереза Нейл, Билл Скотт. Проектирование веб-интерфейсов = Designing Web Interfaces. М.: Символ-Плюс, 2017. 352 c.
2. Коггзолл, Джон. РНР 5. Полное руководство: Пер. с англ. — М.: Издательский дом "Вильяме", 2016. 752 с.: ил. — Парал. тит. англ.
3. Томсон Лаура, Веллинг Люк. Разработка Web-приложений на РНР и MySQL: Пер. с англ. — 2-е изд., испр. СПб: ООО ДиаСофтЮП, 2018. 672 с.
4. ВайкАллен. JavaScript. Энциклопедия пользователя: Пер.з англ. К.: ТОВ "ТИД" ДС", 2017. – 480 с.
5. Вильямсон X. Универсальный Dynamic HTML. Иблиотека программиста. СПб.: Питер, 2016. - 304 с.
6. Гудман Д. JavaScript.Библия пользователя, 4-е изд.: Пер. з англ. М.: Изд.дом "Вильямс", 2017. - 960 с.
7. Коггзолл Джон. РНР 5. Полное руководство.: Пер. з англ. М.: Издательский дом "Вильямс", 2016. - 752 с.
8. Грызлов В. Java Script. Изд. 3-е.М.: ДМК Пресс, 2015. 416 с.
9. Хестер Н. Создание Web-страниц в Dreamweaver. М.: НТ Пресс, 2015. – 104 с.
10. Гудман Д. JavaScript и DHTML. Сборник рецептов. Для профессионалов, Питер, 2016. - 122 с.
11. Лещев.Д.Создание интерактивного web-сайта: учебный курс. СПб.:Питер, 2017. - 544 с.
12. Шапошников И. Web-сайт своими руками. БХВ – Санкт-Петербург, 2016. - 398 с.

ПРИЛОЖЕНИЕ

Приложение 1

Форма авторизации