52
редактировать содержимое, но на структуру страницы никаким образом не
воздействуют.
Система управления предоставляет все необходимые инструменты для
создания содержимого сайта и организации работы над ним; позволяет
управлять содержимым, т.е. хранить, редактировать его, регулировать режим
доступа, удалять и т.д. В качестве содержимого используются разнообразные
данные: документы различных форматов, аудио- и видеоконтент,
графические изображения, таблицы данных и другие [12].
Часто такие системы управления снабжены типичными модулями:
меню, блоги, новости, опросы, организация поиска на сайте, гостевая книга,
счетчик посещений и т.д.
На рисунке Д.1 показана схема создания меню Joomla!, которая создана
на языках PHP и JavaScript и является свободным программным
обеспечением. Joomla! имеет расширенный функционал, встроенную
многоязычность, богатую систему шаблонов, настраиваемые схемы
расположения модулей, а также возможность размещения модулей,
плагинов, шаблонов, написанных отдельно [21].
Еще одним популярным конструктором сайтов является Wix.
Он основан на работе визуального редактора в браузере и не требует
написания кода. В коллекции Wix насчитывается несколько сотен шаблонов
для возможности оформления сайтов на различную тематику, настраивая на
свой вкус размер и начертание текста, цветовую палитру, оформление видео-
и фотоматериалов.
При редактировании шаблона можно использовать основные
инструменты: добавление новых и удаление старых страниц, настройки
дизайна, добавление картинок, надписей, текстов, навигации, возможность
реализации интерактивных кнопок и ссылок и многое другое.
Сайт, созданный с помощью Wix, обслуживается родительской
платформой. Для реализации в сфере коммерческих услуг и организации
53
сбора статистики необходимо воспользоваться платной моделью и
расширенными возможностями по любому из предложенных тарифных
планов.
Для реализации цели выпускной работы по разработке проекта сайта
компании «Гарант» по продаже оргтехники и компьютеров, а также
предоставлению услуг по ее обслуживанию и ремонту, по итогам
исследования различных способов создания сайта выбор был остановлен на
технологии CMS – системе управления сайтом, на платформе Wix. Это
продиктовано возможностями и требованиями заказчика: создание интернет-
магазина за небольшие финансовые затраты [24].
3.2. Проект сайта компании «Гарант»
Компания «Гарант» зарегистрирована в Республике Казахстан, в
г. Шымкенте. Ее деятельность заключается в продаже компьютеров,
оргтехники, комплектующих для них, запчастей для всех видов бытовой
техники и профессиональной аппаратуры, а также в обслуживании
компьютеров и оргтехники и ремонте бытовой техники и электроники. Все
это требовалось отобразить на сайте компании, проект которого
разрабатывался.
В качестве требований, предъявляемых к будущему сайту, было
указано следующее [17]:
Тип сайта: коммерческий, интернет-магазин (товар, услуги,
техническая поддержка).
Доступность: общедоступный.
Логотип: предоставлен заказчиком.
Оформление сайта: на усмотрение исполнителя с последующим
согласованием.
Язык сайта: русский.
Целевая аудитория: для широкого потребителя.
54
Цели и задачи сайта:
- отображение на сайте категорий товаров, их визуализация,
характеристики, цена, возможность заказа товара и его доставки;
- перечень оказываемых услуг по обслуживанию и ремонту;
- возможность скачивания прайс-листа;
- наличие обратной связи;
- раздел часто задаваемых вопросов;
- рекламная лента.
Макет сайта с учетом пожеланий заказчика: Рисунок Е.1.
Предполагаемый домен: shymkent13.ru
Планируемый запуск сайта: 1 июля 2018 года.
Разработка сайта началась с создания шаблона с каркасом сайта,
учитывая пожелания заказчика относительно вкладок и категорий.
Затем по согласованию с заказчиком был выбран дизайн сайта с учетом
неброскости цветовой палитры, но сочности выбранного основного фона
сайта [3]. Итоговый вариант дизайна сайта представлен далее.
По желанию заказчика для привлечения внимания к возможности
скачать прайс-лист на сайте интерактивная кнопка Скачать прайс была
выполнена в динамическом формате спирали и для привлекательности
окрашена в красный цвет. Ее расположение было предложено исполнителем
сделать сквозным, т.е. присутствующим на всех страницах сайта для
быстрого ее нахождения.
Разработка интерфейса сайта заключалась в лаконичности, с целью
интуитивной навигации. Вкладки были структурированы (согласно проекту)
по смежным категориям и свободно раскрывают их содержание.
Разработчиком было предложено не скрывать основное меню после
перехода во вкладку или категорию с целью быстрого и легкого
перемещения по сайту и доступности любой категории сайта для
55
пользователей из текущей позиции нахождения. С этой целью основное
меню остается видимым на всех страницах веб-сайта.
После создания основной структуры сайта и принятия дизайнерского
решения было произведено частичное наполнение сайта графическими
данными и контентом. Большого объема загружаемых данных не
требовалось в связи с частым обновлением предлагаемого товара и
вариьированием его цены. Имеющиеся на сайте товары перед запуском сайта
будут обновлены до актуального состояния.
При оформлении определенного товара была выбрана форма его
описания, а именно, краткое техническое описание в виде общепринятых
сокращений, к примеру: Процессор S-1150 Intel Core i3 4170 TRAY <3.7 GHz,
Dual Core, 5GT/s, 3M Cache, 5. При необходимости более подробное
описание товара может быть предложено при переходе по ссылке на
выбранный товар или при помещении его в корзину потребителя.
Для графического оформления сайта были использованы готовые
изображения с расширением .jpg или .png, если для его размещения
требовалась прозрачность основного фона, а также стильные шрифты для
легкой читабельности текста [26]. Часть графических элементов, к примеру,
кнопка Скачать прайс (рисунок 7), была изготовлена самостоятельно при
помощи программы Adobe Photoshop CS3 [42].
Для размещения рекламы использованы (и будут использоваться)
готовые логотипы компаний-партнеров.
На главной странице были заготовлены блоки, в которых планируется
размещать новинки, акционный товар, объявления и т.д. по категориям. В
данном режиме это: Мониторы, Периферия – Мультимедиа, Оргтехника.
Следующим этапом стало тестирование веб-сайта в тестовом режиме.
Для этого в течение нескольких дней различным категориям людей была
дана ссылка на сервер для ознакомления с сайтом, осуществлением перехода
по категориям, оценке отдельных структурных частей сайта,
56
работоспособности всех ссылок, а также на предмет понятности
конфигурации и структуры сайта.
По итогам тестирования было изменено дизайнерское решение вкладки
Контакты: общая цветовая схема сайта была изменена на белый фон для
удобства сосредоточенности при ознакомлении с информацией страницы,
написанием сообщений, частых вопросов, а также цвет на белый поменяла
страница размещенности товара в корзине также с целью «не отвлекаться от
решения приобрести товар» [30].
Первоначально прайс-лист был оформлен в формате .pdf, но позднее
было решено формировать его в формате .xls для прямого размещения в
ресурсах без операции конвертирования.
Проверка доставки писем-сообщений, отправленных с формы,
выставленной на сайте, подтвердила свою работоспособность. Недошедших
сообщений не зафиксировано [33].
Во вкладку Услуги пользователями-тестерами было предложено
добавление интерактивной кнопки «Вызов мастера на дом» с заполнением
формы заявки, но заказчиком данное предложение временно отклонено
ввиду того, что обслуживающий персонал компании задействован на
обслуживании компаний по договорам, и обслуживание клиентов в частном
порядке в ближайшее время не запланировано.
В данный момент сайт компании «Гарант» подготовлен к запуску с
целью дальнейшего продвижения и сопровождения в итоговом виде.
На главной странице сайта компании «Гарант» размещен логотип
компании, главное меню, контактный телефон и символьное обозначение
основных направлений деятельности компании: продажа с гарантией,
обновление оборудования и программного обеспечения, ремонт и
обслуживание техники. Тут же имеется возможность скачать прайс-лист
товаров, программного обеспечения и комплектующих в формате MS Office
57
Excel, просто кликнув по соответствующей кнопке в правой верхней части
монитора (рисунок 7).
Рисунок 7 – Главная страница сайта компании «Гарант»
В самом низу главной страницы размещен баннер, на котором
планируется в качестве рекламы размещать активные ссылки на веб-сайты
партнеров (рисунок 8).
Рисунок 8 – Рекламный баннер сайта компании «Гарант»
Главное меню имеет несколько вкладок: Компьютеры, Оргтехника,
Комплектующие, Услуги, Контакты.
При наведении на вкладку Компьютеры появляется предложение
выбора: Desktop и Notebook, т.е. выбор категории стационарных компьютеров
58
или ноутбуков. При выборе требуемой категории открывается
соответствующая страница, на которой представлен ассортимент товаров
выбранной категории в виде иконок с описанием характеристик товара и его
стоимостью (рисунок 9).
Рисунок 9 – Активизация категории Notebook с описанием
характеристик товара и его стоимостью
Во вкладке Оргтехника представлены категории Телефоны, факсы и
Принтеры, сканеры с наличием изображения товара, его описания и цены
(рисунок 10).
Рисунок 10 – Активизация категории Телефоны, факсы
с наименованием моделей товара и его стоимостью
Вкладка Комплектующие содержит три категории: Видеокарты,
Материнские платы, Процессоры, так же как и предыдущие категории
дающие информацию о товаре и их стоимости (рисунок 11).
59
Информацию об интересующем товаре можно просмотреть в качестве
быстрого просмотра, при клике на всплывающем меню при наведении
курсора на иконку с товаром. При этом информация о товаре появляется
сразу, без перенаправления на новую страницу.
Рисунок 11 – Активизация категории Материнские платы с
наименованием моделей товара и его стоимостью
Информацию о товаре также можно просматривать на индивидуальной
странице товара, к примеру, product-page/принтер-epson-l132-a4 (рисунок
Ж.1). На странице помимо фотоизображения товара размещена его цена, а
также дается возможность увеличенного просмотра модели путем наведения
на значок лупа (на фото помечен зеленым цветом). Товар можно купить или
«запомнить», нажав на кнопку Добавить в корзину, при этом указать
количество экземпляров для покупки (по умолчанию установлена 1 единица
товара). При запуске сайта, позже, планируется указать способы безналичной
оплаты товара, разместив данную информацию на главной странице, а также
на странице магазина.
Тут же, в электронном магазине есть возможность перемещения по
товарам категории, нажимая указатели Назад / Вперед (выделено красным
цветом), а также имеется навигация по сайту в разрезе уровней (выделено
синим цветом).
Вкладка Услуги содержит описание спектра услуг, предоставляемого
компанией «Гарант» в пределах города (рисунок 12). Этот перечень может
60
изменяться при появлении новых видов услуг либо при упразднении какой-
либо из них.
Рисунок 12 – Вкладка Услуги сайта компании «Гарант»
Вкладка Контакты реализует переход на часто задаваемые вопросы. В
ней же размещена форма обращения к администрации магазина (рисунки 13,
14), а также размещена ссылка на Google-карту с указанием места
расположения магазина в городе Шымкент (рисунок И.1).
Рисунок 13 – Вкладка Контакты сайта компании «Гарант»
Обращение к администрации сайта отслеживается ежедневно в
периоды 9.00-9-30 и 18.00-18.30.
В категории Контакты планируется разместить сведения о
специалистах, занимающихся конкретными видами работ: продажей товара,
61
обновлением программного обеспечения, обслуживанием техники, ремонтом
компьютеров и цифровой аппаратуры, указав их личные данные и
контактные сведения (электронную почту, номера мобильных телефонов,
странички в социальных сетях, при их наличии).
Рисунок 14 – Форма для обращения к администрации магазина
компании «Гарант»
При заказе товара из других городов Республики Казахстан возможна
доставка по адресу назначения при условии внесения дополнительной
оплаты услуг пересылки в зависимости от курьерской службы. Каждая
операция по оформлению доставки за пределы города Шымкент
сопровождается оформлением почтового отправления трек-кодом. Проверить
статус оформленной посылки можно, пройдя по ссылке www.post.kz
(рисунок 15) [29].
Рисунок 15 – Услуги АО «Казпочта» для отслеживания
почтового отправления