Практическая часть. Настоящее техническое задание распространяется на разработку презентационного сайта для фабрики мягкой мебели “Дрим парк”

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

2.1 Разработка презентационного сайта для фабрики мягкой мебели “Дрим парк”

Основным назначением программного продукта является:

Представление информации о продукции фирмы “Дрим парк”

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

- доступность информации;

- лёгкость в обращении;

- уникальный дизайн;

- обеспечить удобный пользовательский интерфейс;

- интерактивность с пользователем.

Исходные данные:

Материалы, предоставленные фирмой, для которой делается сайт.

Выходные данные:

Презентационный сайт.

Требования к надёжности

- предусмотреть работу с различными браузерами;

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

2.2 Создание дизайна, локальная вёрстка сайта, теги и свойства

Дизайн сайта – это фактически одежда для сайта, которая обязана как минимум не отпугнуть посетителя, и как максимум – завлечь пользователя и заставить его остаться на данном Интернет-ресурсе. Создание дизайна для сайта проходило в программе photoshop cs5, после анализа других проектов было решено создать дизайн ненавязчивого сайта с получением полной информации для пользователя. Перед началом работы был создан лист размером 1920 X 1566 пикселей, в последствии были выставлены направляющие с учётом последующей вёрстки дизайна. Перед началом создания дизайна блоков сайта, нужно было определиться с фоном, что бы в последствие было легче ориентироваться на общий фон, ввиду большой конкуренции среди других интернет ресурсов, было принято оригинальное решение, сделать фон белым:

Рисунок 5- Фон для сайта

Далее выполнились работы, по определению основного внешнего вида сайта и расположению на нём компонентов. В результате работы создан прототип сайта представленный на рисунке (Рисунок 6).

Рисунок 6 –Вид дизайна сайта.

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

Рисунок 7 –переработанный дизайн для сайта

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

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

Для внедрения рисунка (Рисунок 8) использовались:

- создание листа 200х300 px;

- коррекция цветового тона;

- трансформация;

- вставка.

Рисунок 8 – Изображение девушки, для будущей рекламы.

Картинка редактировалась и подгонялась под нужные размеры в графическом редакторе. Готовое изображение размещалось и помещалось на странице с выравниванием текста (Рисунок 9)

Рисунок 9- Создание банера.

Все слайды для оформления страниц создавались с помощью редактора Photoshop. Слайды создавались из нескольких картинок. Основным являлось изображение представленное на рисунке (Рисунок 10).

Рисунок 10- Картинка с пустым видом

.

Рисунок 11- Доработанное изображение

Далее использовался photoshop был вырезан и вставлен диван, с дороботкой тени, цветовым тоном и корекцие тени. (Рисунок 11).

Так в результате работы с графическим редактором были созданы все слайды для web-страниц. Пример работы можно увидеть нп рисунке ( Рисунок 12).

Рисунок 12-Изображение дивана в тёплых тонах

Были и другие работы, где важным было соблюсти цветовой контраст на изображение, что бы у пользователя не было ощущения обмана (Рисунок 13)

Рисунок 13- Пример создания изображения с правильным подбором цветового тона.

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

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

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

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

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

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

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

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

Непосредственно при запущенном Денвере, в браузере Mozilla Firefox уже продолжилась дальнейшая работа, по созданию контента для сайта.

Денвер - набор дистрибутивов и программная оболочка, предназначенный для создания и отладки сайтов на локальной Windows-машине, без подключения к сети Интернет. Базовый пакет состоит из следующих компонентов:

- Apache 2.4, SSI, SSL, mod rewrite, mod_php.

- PHP 5.6

- MySQL 5.2.3.

- phpMyAdmin 3.6.5.

- Ядро Perl без стандартных библиотек

- Эмулятор sendmail

Для доступа к административной панели управления 1с-битрикс необходимо запустить Денвер и использовать адрес разрабатываемого сайта. Страница авторизации представлена на рисунке (Рисунок 17)

Рисунок 17- Вход в админ панель

На форме вводится логин и пароль для открытия главной страницы администрирования системой - панели управления 1с-битрикс, которая предоставит управление всеми функциями и возможностями пакета. (Рисунок 18)

Рисунок 18 – Панель управления

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

Создание разделов сайта

Раздел - это главный (верхний) объект в иерархии структуры содержимого.

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

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

Создание категорий сайта

Категория - это второй (после раздела) объект в иерархии структуры содержимого. Создание категории похоже на создание раздела.

Для работы с категориями необходимо перейти на страницу «Менеджер категорий».

При открытии страницы «Менеджер категорий» опция фильтрации будет "жестко" привязана к выбранному разделу. (Рисунок 19)

Рисунок 19-менеджер категорий: Материал

Для начала работы было необходимо создать категории товаров (Рисунок 22), что бы впоследствии присвоить их к самим товарам, при работе с данным модулем были созданы следующие категории:

- диваны;

- угловые диваны;

- детские диван;

- комплекты мебели;

- кресла;

- аксессуары.

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

Рисунок 22 -категории товаров

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

- загрузка изображения;

- указание цены;

- указание категории;

- артикула товара (для создания номера-ключа при продаже);

- создание описания товара.

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

Рисунок 23-Опубликованные товары

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