Выбор инструментальных средств для разработки сайта

При выборе инструмента для создания сайта необходимо изначально определиться с масштабностью проекта и его целями. Так как необходимо создать промо-сайт, то нет смысла покупать программное обеспечение для разработки в связи с тем, что на рынке ПО представлено большое количество программ: WordPress, 1с-битрикс, Drupal, 1c-Битрикс.

Необходимо рассмотреть преимущества данной системы 1с-Битрикс:

- может быть использована для создания блога или небольшого проекта;

- простота установки и использования;

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

- пользоваться очень легко, благодаря понятному встроенному редактору;

1с Битрикс-система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL для выбор данном CMS необходимо было рассмотреть преимущества данной системы:

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

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

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

- частые обновления и улучшения движка, являются неотъемлемым плюсом для всех пользователей. По миру у движка множество поклонников, которые постоянно ведут работы по улучшению 1с-битрикс;

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

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

HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML).

Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font).”

CSS— Язык для описания внешнего вида, html документа. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других элементов представления внешнего вида веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида данной веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

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

Разработку сайта можно разделить на несколько отдельных шагов:

- определить идею, модель и внешний вид;

- создать дизайн;

- вёрстка страниц;

- наполнение контентом;

- выкладывание на хостинг;

- продвижение.

Для всех этих шагов нужно иметь инструмент, который поможет всё это реализовать. Размышляя над дизайном, всегда следует посмотреть другие похожие сайты, оценить их лучшие и негативные стороны. Для этого был произведён мониторинг следующих сайтов: (Рисунок 1), (Рисунок 2), (Рисунок 3), (Рисунок 4).

Рисунок 1- Вид сайта http://www.mebel-art.net/

Рисунок 2- Вид сайта http://www.obrazstroy.ru/portfolio/mebel/147/1/

Рисунок 3- Вид сайта http://www.bravomebel.ru/catalog/69.html

Рисунок 4- Вид сайта http://mm-32.ru/catalog/myagkaja_mebely/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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-Опубликованные товары

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