36
сложности. Контентом сайта удобно управлять, так как он изначально
рассчитан на информационный контент [24].
Таким образом, рассмотрев современные методы и технологии
разработки веб-сайтов, были выбраны следующие инструменты и технологии:
− для ООО «Комп-Рид» разрабатывается веб-сайт в формате интернет-
магазина;
− модель организации электронной коммерции – «B2C»;
− используемые языки: HTML – язык разметки, PHP – язык сценариев;
− для разработки страниц сайта и его дизайна выбрана CMS-система
WordPress;
− для обработки изображений, создания логотипа и баннера для сайта
выбран графический редактор Adobe PhotoShop CS.
37
ГЛАВА 2. ПРОЕКТНАЯ ЧАСТЬ
2.1 Постановка задачи
Для торгового предприятия ООО «Комп-Рид» по продаже компьютерных
комплектующих необходимо разработать web-сайт в сети Интернет,
осуществляющий функции Интернет-магазина и взаимодействующий с
записями базы данных.
Цель создания сайта – автоматизации функций взаимодействия торгового
предприятия с покупателями товаров и расширение целевой аудитории.
Назначение создания web-сайта:
реклама магазина, информирование о его местонахождении;
ознакомление потенциальных покупателей с ассортиментом товаров;
расширение целевой аудитории и клиентской базы компании;
прием заказов покупателей на приобретение товаров;
сокращение затрат на рекламу, информирование клиентов, на создание
и печать прайс-листов.
Пользователи web-сайта магазина (аудитория сайта):
юридические лица (индивидуальные предприниматели, организации);
отделы автоматизации в организациях, занимающихся закупкой
компьютерной и оргтехники;
частные лица.
Web-сайт торговой компании должен предоставлять пользователям
доступ к информации:
о компании;
о номенклатуре и стоимости товаров компьютерного магазина;
о предоставляемых услугах по сборке компьютеров, прокладке сетей,
установке и настройке программного обеспечения и проч.;
отзывы клиентов;
возможность заказа товаров компьютерного магазина через Интернет.
Web-сайт должен предоставлять возможность покупателям выбрать
38
конкретные товары магазина, выбрать параметры заказа, осуществить заказ.
Задача автоматизации работы предприятия ООО «Комп-Рид» состоит из
нескольких основных подзадач:
создание интернет-сайта с удобным интерфейсом как для работников
предприятия, так и для потенциальных клиентов;
полное отображение необходимой информации о товарах и услугах;
оперативное размещение рекламы магазина;
отсутствие необходимости обслуживания со стороны специально
обученного персонала;
отсутствие высоких требований к аппаратным компонентам – для
отсутствия высоких дополнительных затрат на модернизацию парка ЭВМ
компании;
легкая возможность модернизации сайта – простота и открытость АС
является одним из основных требований для страховки компании от
невозможности разработчика данной АС далее работать и обслуживать её;
выявление и анализ потенциальных рисков – взлом информационной
системы, доступ к данным информационной системы, влияние низкой скорости
доступа на работу модулей системы и т.п.
Разрабатываемый web-сайт предприятия ООО «Комп-Рид» должен
состоять из:
1) графической оболочки с системой навигации;
2) контента (содержимого) web-сайта предприятия;
3) базы данных, хранящей данные о товарах, об оказываемых услугах
(работах) предприятия.
Графическая оболочка сайта должна содержать графическую часть
(логотипы компании, привлекательный визуальный ряд), навигационное меню
сайта, поисковую область, область меню, контентную область для того, чтобы
посетитель сайта с первой страницы мог получить вводную информацию о
компании, а также ознакомиться с ее последними новостями.
39
2.2. Разработка структуры электронного магазина
2.2.1 Разработка страниц сайта
На этапе разработки веб-приложения выполняется:
1) получение всех информационных материалов;
2) уточнение требований к дизайну и информационному наполнению
(фирменная цветовая гамма, образы, слоган и т.д.);
3) согласование дизайн-проекта. Визуальное представление первой
страницы и 2-3 уровней сайта без верстки.
4) HTML-верстка и программирование (CGI, CSS, JavaScript и т.д.) [5].
Разработаем интерфейс и структуру интернет-магазина по продаже
комплектующих «Комп-Рид». Структура веб-сайта – это логическая разметка и
физическая связка страниц сайта, а так же расположение видимых элементов
дизайна, обусловленная стандартами разработки сайтов.
Разработка структуры сайта включает все, что касается его содержимого
и информационной стратегии, определяющей, как должна быть организована
информация на сайте, чтобы пользователи сайта могли найти ее легко и быстро.
Структуру практически любого веб-сайта можно разбить на четыре части:
главная страница, страницы категорий, конечные страницы и служебные
страницы.
Физическая структура веб-сайта представляет собой папку (web-узел), в
которой располагаются:
Каталоги (папки), в которых хранятся все файлы;
Страницы – html-страницы, файлы css-стилей;
Фотографии, картинки, видео, логотипы, которые лучше хранить в
отдельной папке [28, с.231].
После тщательного отбора необходимой информации компьютерного
магазина «Comp-Reed», было произведено ее разбиение на смысловые разделы
для создания Интернет-магазина «Comp-Reed». Каждому смысловому разделу
соответствует свой набор страниц web-сайта.
40
Разработана следующая структура веб-сайта интернет-магазина (рис. 2.1).
Рисунок 2.1. Макет web-сайта предприятия
1. На главной странице (index.html) отображается краткая основная
информация о предприятии (компьютерный магазин «Comp-Reed»), меню
сайта, контактная информация.
2. Страница «Каталог» (catalog.html) содержит основные разделы
товарных групп магазина с их краткой характеристикой. По ссылкам можно
перейти на страницы с выбором конкретных товаров товарной группы:
1) Страница «Комплектующие» (detal.html) Данная страница содержит
ссылки на подгруппы комплектующих:
материнские платы (plate.html);
процессоры (processor.html);
Главная
страница
Каталог
Корзина
Оплата и доставка
Контакты
Сборка ПК
О компании
Услуги
Аксессуары
Настройка и ремонт ПК
Комплектующие
Материнские платы
Процессоры
Память
…
Заправка картриджей
41
память (memory.html);
прочие разделы.
2) Страница «Услуги» (service.html). Данная страница содержит ссылки
на страницы описания услуг:
сборка ПК (sbor.html);
настройка и ремонт ПК (remont.html);
прочие разделы.
3) Страница «Аксессуары» (accessory.html) – страница выбора мелких
товаров цифровой техники, расходных материалов и карт памяти: флеш-
накопители, SD-карты, наушники, веб-камеры и проч.
3. Страница «Оплата и доставка» (oplata.html) содержит информацию о
способах доставки товаров Интернет-магазина, правилах заказа товаров и их
оплаты.
4. Страница «О компании» (company.html) содержит информацию о
деятельности предприятия, его целях, достижениях, дальнейшие планы и
перспективы, описание основных заказчиков, описание услуг.
5. Страница «Контакты» (contact.html) содержит контаткную
информацию и реквизиты предприятия, способ проезда.
6. Страница «Корзина» (product.html) На данной странице отображается
список товаров, выбранных пользователем. Для каждого товара отображаются:
Фото-превью, Название, Цена, Кол-во, Стоимость. Пользователь имеет
возможность изменить количество каждого товара, при этом рассчитывается
общая цена покупки.
На данной странице имеется также форма заказа для отправки заказа в
магазин.
2.2.2. Разработка дизайна сайта Интернет-магазина
Разработка дизайна сайта включает в себя создание графических
элементов макета сайта и элементов навигации.
42
Разработка дизайна web-сайта Интернет-магазина «Comp-Reed»
проводилась в соответствии со следующими требованиями:
1) дизайн сайта должен соответствовать конкретной целевой аудитории и
учитывать её специфику, а также специфику деятельности компьютерного
магазина;
2) все страницы должны быть оформлены в одном стиле, чтобы у
посетителя создавалось впечатление от сайта, как от источника информации, а
не разрозненных разноплановых страниц;
3) система навигации должна быть легкой и простой, интуитивно
понятной посетителям сайта;
4) сайт компании должен быть удобным для просмотра на мониторах
разного размера и качества;
5) дизайн сайта должен обеспечивать возможность быстрой загрузки
сайта даже на медленных каналах связи. Для обеспечения высокой скорости
загрузки страниц количество графических элементов дизайна должно быть
минимальным.
Под компоновкой макета принято понимать условное (схематическое)
расположение блоков информации на будущем Web-сайте. Всего можно выде-
лить четыре блока информации:
1) «шапка» — занимает верхнюю часть сайта в окне браузера (обычно не
больше 1/4 видимой части экрана без прокрутки) и может содержать:
– логотип;
– слоганы, лозунги, девизы;
– рекламную информацию (баннеры и текстовые блоки) и др.;
2) меню навигации— оно может быть вертикальным, горизонтальным,
содержать подменю и т. д. и т. п.
3) содержательная часть — здесь отображается основная и самая главная
составляющая любого Web-сайта — информация: новости и каталог продук-
ции, контактные данные и гостевая книга и т. д.;
4) «подвал» — нижняя часть сайта в окне браузера, не является
43
обязательным блоком, он лишь подчеркивает четкую структуру сайта и
выделяет содержательную часть относительно других блоков информации. Он
может содержать:
– информацию об авторском праве разработчиков Web-сайта (полный
текст или ссылка на него);
– координаты для связи;
– дублирующую навигацию (текстовую);
– рекламную информацию (баннеры и текстовые блоки) и др.
В верхней части сайта будет расположен графический рекламный баннер
и название фирмы, являющиеся более яркими по сравнению с остальным
дизайном сайта, что обеспечит возможность их легкого запоминания.
В верхней части сайта будет расположен графический рекламный баннер
и название фирмы, являющиеся более яркими по сравнению с остальным
дизайном сайта, что обеспечит возможность их легкого запоминания.
Графическая оболочка внутренних страниц сайта должна иметь
графическую шапку, навигационное меню, ссылку «На главную», поле для
отображения контента выбранной страницы сайта; внизу страницы – ссылка на
контактную информацию предприятия.
С помощью графического редактора Adobe Photoshop CS разработан
баннер компьютерного магазина (рисунок 2.2) – графическое изображение
рекламного характера с контактами реального магазина.
Рисунок 2.2. Разработка графического баннера для сайта
Наличие навигационной системы сайта позволяет посетителю визуально
определять ценность информации, скрытой в самых отдаленных уголках того
или иного интернет-проекта, посредством изучения тематических заголовков.
44
Каждый заголовок в сжатой форме характеризует конкретный раздел или
группу подразделов сайта, посвященных определенному вопросу или теме, и
является гиперссылкой на их полный вариант. Совокупность таких заголовков
составляет систему навигации по сайту.
Для обеспечения удобства навигации по сайту было принято решение
использовать горизонтальную и вертикальную панели меню: сверху страниц
сайта и слева на каждой странице (боковая панель).
На верхней горизонтальной панели будет располагаться основное меню,
содержащее ссылки на все разделы сайта, что позволит посетителям с любой
страницы сайта перейти на главную страницу, в любой раздел меню (рисунок
2.3).
Рисунок 2.3. Горизонтальная панель меню
Вертикальная (боковая) панель меню содержит ссылки на разделы
товаров магазина, раскрывающиеся подменю для вывода наименований
подгрупп товаров компьютерного магазина (рис.2.4).
Рисунок 2.4. Вертикальная панель меню
45
Фрагмент программного кода для работы меню с использованием css-
стилей представлен ниже:
<div class="container">
<nav class="clearfix">
<ul role="navigation">
<li><a href="index.html" class="activePage"><span
class="icon">S</span>Каталог</a></li>
<li><a href="oplata.html"><span class="icon">B</span>Оплата и
доставка</a></li>
<li><a href="company.html"><span class="icon">R</span>О
компании</a></li>
Кроме этого, навигация по страницам сайта будет осуществляться с
помощью гиперссылок на страницы сайта, представленные текстовыми
гиперссылками, ссылками-кнопками и ссылками-картинками.
По визуальному оформлению выделяют следующие виды навигации:
1) Текстовые ссылки – наиболее простой в плане реализации вариант
информирования пользователя о том, что его ждет внутри раздела сайта.
2) Графическая система навигации – использование в качестве
гиперссылок фотографических изображений, рисунков, а также анимации.
3) HTML-формы – помогают в экономии места с помощью выпадающих
или открывающихся элементов.
4) Java и Flash технологии – с помощью них можно организовать
определенную реакцию на действия при наведении курсора, нажатии кнопок
мыши или клавиатуры.
При разработке сайта Интернет-магазина «Comp-Reed» использовались
тестовые ссылки и графическая система навигации.
Фрагмент использование ссылок:
<section class="container">
<div class="columns">
<article><figure>