Принципы разработки web-сайтов (на примере ЗАО "Кондитерская фабрика "Саратовская")

·Проигрывание ролика всегда начинается с первой страницы. Другие web - сайты не могут сослаться на определенную страницу или сцену внутри ролика.

 

2.5Системы управления  контентом (CMS)

 

Заказчик сайта должен решить, какую выбрать систему  управления сайтом (CMS - Content Management System). Это очень важный вопрос, от правильного его решения существенно зависит успешность будущего сайта, стоимость его изготовления и последующей эксплуатации. Правильный функционал CMS обеспечивает легкое и быстрое развитие сайта - удобное наращивание и обновление материалов, быстрое изменение структуры сайта. Хорошая CMS делает возможным быстрое добавление заранее не включенных в проект функций (например, фото галерей, видео материалов, форумов и т.д.).

На основе данных, полученных при анализе примерно 1500 интернет-магазинов и интерент-витрин, входящих в Яндекс.Маркет в I квартале 2011 года был составлен рейтинг CMS для интернет-магазинов и интеренет-витрин.

 

Рисунок 2.1 - Рейтинг CMS для  интернет-магазинов и интерент-витрин

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

Лидирует CMS Shop-script, за ней идет 1С-Bitrix, Joomls и PHPShop. Это самые распространенные движки для магазинов и витрин. На них и надо ориентироваться при выборе CMS. Остальные представлены слабо, это - OsCommerce, VaM Shop, Drupal, HostCMS, InSales. В число прочих на диаграмме попали WordPress, Amiro.CMS, S.Builder, uCoz, NetCat, MODx, UMI.CMS, DataLife Engine, ABO.CMS

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

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

 

Глава 3. Разработка web-сайта  для ЗАО «Кондитерская фабрика  «Саратовская»

 

.1 Общая информация о  ЗАО «Кондитерская фабрика «Саратовская»

 

ОАО «Кондитерская фабрика  «Саратовская» существует на рынке  более 20 лет и является стабильной и ответственной компанией. ОАО  «Кондитерская фабрика «Саратовская»  является одним из самых динамичных производителей кондитерской продукции. Ассортимент выпускаемой продукции огромен и разнообразен - пралиновые, помадные, ассорти, укрупненные фруктовые конфеты; батончики; молочная, леденцовая, фруктовая, переслоенная карамель; вафли фигурные, джемовые, с натуральными орехами и фруктами, кремовые; вафельные рулетики; сдобное, затяжное, отсадное печенье; крекер и крекер-сэндвич; зефир в шоколаде и с начинками; ирис; лукум. Ярчайшими хитами компании по праву являются такие марки конфет, как «Шоколад-Бар», «Confashion Bar», «Конфэшн Ассорти», вафли «Влана», «Гламур». Для обеспечения хранения товара имеются склады достаточной площади, постоянно поддерживается температурный режим (+18°С).

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

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

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

Ярким событием в жизни  предприятия стал запуск в 2008 году премиального бренда «Эйфория» - самого шикарного  продукта на российском кондитерском рынке. Из вышесказанного можно сделать  вывод, что ОАО «Кондитерская  фабрика «Саратовская» является надежным партнером для своих  клиентов. Компания имеет стабильную прибыль и активно развивается.

 

.2 Структура информации  и навигации по сайту

 

ОАО «Кондитерская фабрика  «Саратовская» является известным  и надежным предприятием, в связи  с этим появилась насущная необходимость  в собственном web-сайте. Руководство  ОАО «Кондитерская фабрика «Саратовская»  выступило заказчиком данного сайта  и выдвинуло ряд требований, которым  должен удовлетворят данный проект:

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

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

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

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

В корневой папке сайта  находятся несколько подкаталогов:

·Images - для хранения файлов с изображениями ;

·JavaScript - содержит коды скриптов, используемые на сайте;

·CSS - содержит служебные  файлы .css, отвечающие за дизайн сайта;

·Flash - содержит файлы в формате .swf;

·Lib - в этой папке хранятся функции, используемые на сайте

·Admin - содержит файлы необходимые для администрирования сайта.

Файл index.php находится в корневой папке сайта, так как является самым главным файлом сайта. Именно его содержимое выводится в браузере при наборе адреса сайта. Также в корневой папке содержатся другие файлы необходимые для отображения основных страниц сайта.

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

Сайт состоит из веб-страниц, которые сгруппированы в ряд разделов, объединенных гиперссылками:

·Главная

·История

·Продукция

·Проекты

·Дистрибьюторам

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

 

.3 Разработка интерфейса  и дизайна сайта

 

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

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

Особое значение имеет  главная страница, так как именно её клиент видит первой и именно от неё чаще всего зависит, останется  клиент на сайте или же никогда  там больше не появится.

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

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

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

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

Главная страница представлена ниже:

 

Рисунок 3.1 - Главная страница

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

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

Информация, представленная на страницах сайта, не является статичной, все представленные на них данные хранятся на сервере, что в свою очередь  делает сайт динамичным.

Страница "О нас" содержит информацию о сертификатах организации. Данный раздел содержит текстовую и  графическую информацию:

 

Рисунок 3.2 - Просмотр информации о сертификатах компании

 

Страница "Контакты" содержит информацию о местоположении организации (компания отмечена маркером на карте), а так же об адресе, телефонах, факсе, e-mail компании. Данный раздел содержит текстовую и графическую информацию:

Рисунок 3.3 - Страница "Контакты"

 

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

 

Рисунок 3.4 - Страница результатов  поиска

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

Данный список разработан по принципу иерархии.

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

 

Рисунок 3.5 - Страница каталога, категория "ДЛЯ СУШИ"

 

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

 

Рисунок 3.6 - Страница описания товара

 

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

Рисунок 3.7 - Прайс-лист

 

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

Рисунок 3.8 - Страница регистрации

 

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

Рисунок 3.9 - Отображение  страницы каталога для авторизованных пользователей

 

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

 

Рисунок 3.10 - Отображение  страницы предварительного заказа для  пользователя us2

 

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

 

3.4 Информационные технологии, использованные при создании  сайта

 

Верстка выполнена в соответствии с современными стандартами веб-разработки, языком разметки является XHTML версии 1.0, за описание внешнего вида отвечают каскадные таблицы стилей CSS. Серверная часть выполнена с использованием PHP и MySQL. Обзор этих технологий приведен во второй главе.

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