ПЗ Караулова В.С. (1231750), страница 6
Текст из файла (страница 6)
Информация в карточке товара содержит информацию об определенном товаре. В данном случае это название, дополнительная информация о товаре, артикул, цена, количество для заказа, вес, цвет, размер, страна, кнопка «Добавить в корзину», блок сопутствующих товаров, а так же реализована возможность оставлять отзывы о товаре (рисунок 3.8).
Информация на странице корзины специфична. Она содержит не только данные о выбранных товарах, но и поля для оформления заказа. Поля для оформления в данном магазине следующие:
-
Данные получателя:
-
e-mail;
-
ФИО;
-
телефон;
-
комментарий.
-
Способы оплаты:
-
оплата наличными.
-
Варианты доставки:
-
самовывоз;
-
доставка.
-
Адрес доставки:
-
улица;
-
дом;
-
подъезд.
Из корзины можно удалить какой-либо выбранный товар («Удалить»), очистить всю корзину («Очистить корзину»), очистить поля оформления заказа («Очистить форму»), а так же заказать выбранные товары («Оформить заказ»).
Рисунок 3.8 – Шаблон карточки товара страницы и страницы корзины соответственно
Вспомогательные страницы только информативные. Их контент содержит различную информацию о магазине, доставке, времени работы, дополнительных услугах, а так же контактную информацию. На странице «О нас» реализована возможность оставлять отзывы (рисунок 3.9).
Рисунок 3.9 – Шаблон вспомогательной страницы
3.3.3 Дизайн Интернет-магазина «Строймаг»
Дизайн играет большую роль в любом web-ресурсе. С помощью хорошего дизайна можно добиться увеличения посещаемости и конверсии, доверия к ресурсу. Несомненно, дизайн обязан быть приятным. Хороший дизайн должен взывать желание вернуться на сайт. Другая сторона дизайна – это уместность и удобство использования ресурса. Для Интернет-магазина очень важно суметь сохранить баланс между запоминающимся дизайном и дизайном, который не будет отвлекать покупателя от товаров.
В Интернет-магазине «Строймаг» дизайн следует сложившийся в последнее время тенденции к минимализму. Здесь – простые плоские формы без теней со скругленными углами. Акцент сделан на цветовую схему, которая состоит из 7 пастельных цветов, образующих необычное сочетание (рисунок 3.10).
Рисунок 3.10 – Палитра цветов, использованных в Интернет-магазине «Строймаг»
Для магазина «Строймаг» был разработан логотип, это еще один способ завоевать доверие и внимание посетителя. Логотип так же сделан в стиле минимализма (рисунок 3.11).
Рисунок 3.11 – Логотип Интернет-магазина «Строймаг»
В данном магазине используются четыре шрифта без засечек (рисунок 3.12): Exo 2 (информация в шапке и подвале сайта, на вспомогательных страницах, дополнительная информация о товаре), Didact Gothic (меню, информация о товаре), Lobster (хлебные крошки, описание магазина в подвале сайта, некоторая информация в корзине), Poiret One (логотип и информация в промо-блоке).
Рисунок 3.12 – Используемые шрифты
Эффекты анимации практически не используются. Анимируется только меню каталога, при раскрытии групп товаров, переключение слайдов в промо-блоке и пролистывание рекомендуемых товаров.
Все важные кнопки выделены ярким красным цветом для привлечения внимания. Менее важные блоки, однако, играющие ключевую роль выделены синим цветом, шапка и подвал выделены нейтральным цветом, чтобы не сливаться с фоном. Информативный текст в основном черный, но к некоторой информации для удобства применены эффекты смены цвета или смены стиля написания.
В заключение можно сказать, что дизайн сайта запоминающийся, не навязчивый, разные группы информации выделены разными шрифтами, шрифты читаемые, не мелкие. Дизайн нейтрален и, скорее всего, будет приятен большинству пользователей, магазином удобно пользоваться, практически нет ничего лишнего, важные элементы видно сразу, они легкодоступны. Пример главной страницы показан на рисунке 3.13.
Рисунок 3.13 – Главная страница Интернет-магазина «Строймаг»
Таким образом, дизайн Интернет-магазина «Строймаг» отвечает принципам проектирования Интернет-магазинов.
3.4 Реализация Интернет-магазина «Строймаг»
Ключевым понятием области web-программирования является понятие CMS. CMS (Content Managment System) – система управления содержимым, информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым.
Основные функции CMS:
-
предоставление инструментов для создания содержимого, организация совместной работы над содержимым;
-
управление содержимым: хранение, контроль версий, соблюдение режима доступа, управление потоком документов и т. п.;
-
публикация содержимого;
-
представление информации в виде, удобном для навигации, поиска.
В системе управления содержимым могут находиться самые различные данные: документы, фильмы, фотографии, номера телефонов, научные данные и так далее. Такая система часто используется для хранения, управления, пересмотра и публикации документации. Контроль версий является одним из основных её преимуществ, когда содержимое изменяется группой лиц [19].
3.4.1 Обоснование выбора CMS и способа создания Интернет-магазина
Существует несколько способов создания Интернет-магазина. Первый способ − это аренда CMS c помесячной оплатой. Всё, что нужно, — это оформить сайт и присвоить ему домен. Однако более широкий функционал потребует высокой абонентской платы, при этом ничего не получится доработать на своё усмотрение, так как не будет доступа к исходному коду [20]. Так же существенным недостатком является не уникальный, шаблонный дизайн. Данный способ не подходит для реализации проекта, так как существенно ограничивает функционал и возможности для развития Интернет-магазина.
Второй способ – создание Интернет-магазина с помощью готовой платной или бесплатной CMS. 1С-Битрикс, NetCat, UMI.CMS, HostCMS, PHPShop, Simpla, VaMShop и другие требуют платы за свои продукты. Бесплатные: Joomla, Drupal, MODX, PrestaShop, osCommerce, Magento и многие другие.
Чем больше базовый функционал CMS совпадает с планами, тем меньше потребуется доработок. Популярные CMS имеют меньше ошибок в коде и более широкий выбор модулей, но чем старее система, тем более несовершенный у неё базовый код. В любом случае идеального движка не существует — каждый придётся дорабатывать под себя.
Какими бы полнофункциональными ни были известные CMS, для нетривиального высоконагруженного проекта их возможностей всё равно недостаточно. Постоянные доработки, надстройки, переделки и без того неидеального кода сильно перегрузят систему, в которой разобраться смогут только программисты-основатели.
В таком случае третий способ это формируется внутренняя команда разработки движка с нуля [20].
Очевидно, что проект Интернет-магазина «Строймаг» не высоконагруженный, и вполне подходящий для реализации вторым способом с помощью готовой CMS.
Покупка платной CMS в силу разных причин была отклонена, поэтому выбор сделан из бесплатных CMS.
К числу бесплатных программ относятся Joomla!, Drupal, MODX, OpenCMS, WordPress и многие другие. Это бесплатно распространяемые программы, и использовать их для создания Интернет-магазина может как сам владелец магазина, при наличии, конечно, определенных навыков и знаний в этой области, так и фирмы-разработчики, создающие недорогие сайты.
Ресурс www.ratingruneta.ru предлагает статистику использования CMS в России для решения тех или иных задач. Рассмотрим первые пять по популярности бесплатных CMS в России (таблица 3.1):
Таблица 3.1 – Рейтинг бесплатных CMS
| Среда разработки сайтов | Проектов | |
| 1 | Joomla! | 3 248 |
| 2 | Drupal | 2 594 |
| 3 | MODX | 2 504 |
| 4 | WordPress | 1 761 |
| 5 | TYPO3 | 157 |
Joomla! один из наиболее популярных бесплатных движков для создания сайтов. Он значительно расширяет возможности разработчиков, а значит, может удовлетворить большему количеству запросов будущих владельцев сайта. Для Joomla написано большое количество дополнительных модулей, в том числе и интернет-магазин, что позволяет создавать на данном движке даже самые сложные сайты, а возможность эксперимента с дизайном позволит выделить сайт среди множества других.
Drupal неплохая CMS, но не слишком подходящая для разработки интернет-магазина. Она несколько сложнее и больше подходит для разработки многопользовательских блогов, форумов, энциклопедий и сайтов сообществ. Чтобы получить на выходе сайт, удовлетворяющий всем техническим требованиям, придется довольно долго и кропотливо выстраивать структуру будущего проекта [20].
MODX уже переходит из просто CMS в CMS/CMF (Content Management Framework) − то есть в среду разработки сайта и управления содержимым. В отличие от большинства бесплатных CMS — с помощью системы управления сайтом MODX можно построить сайт абсолютно любой сложности, практически с любым набором функций, при этом система не будет влиять на html-код.
Мощные API-функции и обработчик событий позволяют четко и гладко создавать практически любые веб-приложения для сети Интернет, а также изменять работу ядра системы разработки MODX не вмешиваясь в исходный код. Система разработки сайтов MODX отлично справляется со своими основными задачами — посетители видят чистые, логичные и очень быстрые сайты, в то время как разработчики имеют в распоряжении множество бесплатных дополнительных модулей и огромное, растущее с каждым днем, сообщество [21].
WordPress не самый лучший вариант для создания сложных порталов и Интернет-магазинов. Несмотря на свою популярность во всем мире, она является наиболее удобной для создания блогов и небольших информационных сайтов. Конечно, WordPress имеет множество шаблонов и дополнительных модулей, которые позволяют усовершенствовать сайт, но для создания Интернет-магазина лучше выбирать более универсальные CMS.
Между тем, есть такие системы, которые предназначены специально для интернет-магазинов. В таблице 3.2 представлен рейтинг бесплатных CMS с помощью которых созданы Интернет-магазины.
Таблица 3.2 – Рейтинг бесплатных CMS для создания Интернет-магазинов
| Система разработки сайтов | Проектов | |
| 1 | Joomla! | 467 |
| 2 | Drupal | 344 |
| 3 | MODX | 311 |
| 4 | Opencart | 162 |
| 5 | WordPress | 97 |
Opencart - бесплатный скрипт для интернет площадок. CMS может устанавливаться на любом сервере без ограничений. Свыше 50 000 участников ежедневно улучшают систему, а наличие более 7 000 дополнений, как платных, так и бесплатных, позволяют создать уникальный магазин с множеством удобных функций. Отличный бесплатный движок для начинающих предпринимателей, которые планируют самостоятельно разобраться в тонкостях создания и управления интернет магазином [20].
Выбор CMS для данного проекта делался из популярных CMS, однако это не означает, что они обязательно лучше менее популярных.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
