1. Содержащий блок (контейнер)
Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой, а может быть фиксированной.
2. Навигация
Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).
3. Контент
Контент - это основная составляющая веб-страницы. Он занимает главенствующую роль в дизайне страницы, поэтому занимает большее пространство, подкреплён, помимо текста, графикой.
4. Нижний колонтитул
Данный элемент располагается внизу страницы и обычно содержит информацию о правообладателе, контактные и юридические данные, ссылки на основные разделы сайта (зачастую дублирует основную навигацию), ссылки на социальные сети, форму обратной связи[1].
Из всего вышеперечисленного можно сделать вывод, что на странице должно быть максимум нужной информации. В шапке название магазина, чтобы клиент сразу мог увидеть, куда он попал. Под шапкой располагается меню. Минимум вкладок: главная, товары с выпадающим списком категорий, услуги, контакты с выпадающим списком, в котором есть ссылка на адрес магазина и ссылка в социальную сеть.
Так как большинство техники имеет темную цветовую гамму, то для сайта было выбрано именно такое цветовое решение. Серый фон выглядит довольно привлекательно, глаза не устают. Одновременно это решение является довольно-таки стильным. Меню сделано белыми буквами, что сразу его выделяет на странице. Синий цвет в названии магазина в сочетании с серым фоном смотрится неплохо. Такая гамма не только необычна, но также и приятна.
На главной странице отображены последние поступления, чтобы привлечь клиента и сагитировать его на покупку(рис.3.2.1).
Рис.3.2.1 - Дизайн главной страницы
Если перейти на товары, то откроется меню с выбором категорий товара(рис.3.2.2).
Рис.3.2.2 - Товары
Для того чтобы пользователь не запутался, то при нажатии открываются категории, а не все товары. Так как при открытии всей продукции, пользователь запутается. А так, благодаря категориям, он сможет выйти на тот вид товара, который ему интересен.
Нажав на во вкладке «Товары» на подкатегорию «Смартфоны» мы сразу переходим на страницу с выбранной продукцией(рис.3.2.3). Перед клиентом откроется страница со списком товаров. В название статьи будет указано название товара, картинка, а после начальное описание, чтобы заинтересовать клиента данным видом товара. При переходе по ссылке «Подробнее» откроется статься полностью с описанием всех характеристик и ценой.
Рис.3.2.3 - Категория «Смартфоны»
Для удобства пользователя выделена особенная вкладка с «Услугами», которые предоставляет компания(рис.3.2.4). Такая страница удобна тем, что при переходе на нее клиент сразу же понимает, с чем он может обратиться в данную организацию. А также, на этой странице указаны примерные и минимальные ценники на оказание тех или иных услуг.
Рис.3.2.4 - Услуги
На странице Контакты можно увидеть информацию в виде номера телефона, адреса(рис.3.2.5). Эта страница была создана для того, чтобы клиент при возникновении каких-либо вопросов мог просто взять телефон и набрать представителей данной организации, чтобы уточнить, например, могут ли они выполнить конкретную услуги или же уточнить стоимость, чтобы ориентировочно знать, на что стоит рассчитывать по цене.
Рис.3.2.5 - Контакты
На рис.3.2.6 изображена форма обратной связи. Это также связующее звено между клиентом и организацией. Если по какой-либо причине представитель организации не отвечает на телефон или офис закрыт, то заполнение данной формы гарантирует ответ от компании, так как эта форма отправляет все сообщения на электронную почту одному из членов организации.
Рис.3.2.6 - Форма обратной связи
4. ВЫБОР СРЕДСТВ РАЗРАБОТКИ
4.1 Разработка серверной части
Разработка сайта будет иметь 2 этапа: создание на локальном сервере, а затем перенос на готовый сервер.
Локальный сервер обеспечивает доступ к ресурсу через браузеры. Набор программ и скриптов преобразует информацию баз данных типа MySQL и языков программирования типа Perl и PHP в HTML- и CSS-код, который «понимают» веб-обозреватели.
С помощью локального сервера происходит подготовка сайта к публичному доступу. Это избавляет живых посетителей и поисковых роботов от взаимодействия с незаполненным и недоработанным сайтом.
Для работы на локальном сервере существует множество программ. Наиболее популярные это Denwer, Open Server, Xammp. При создании сайта на локальном сервере будет использоваться Denwer.
Денвер (Denwer) - это набор программ для создания сайта на локальном компьютере, без выхода в Интернет. Проект включает в себя:
а) Apache, SSI, mod_rewrite, mod_php;
б) PHP4 с поддержкой GD и MySQL;
в) MySQL с поддержкой транзакций (mysqld-max);
г) Систему управления виртуальными хостами, основанную на шаблонах;
д) Систему управления запуском и завершением;
е) Ядро Perl без стандартных библиотек (они поставляются отдельно);
ж) Эмулятор sendmail, поддерживается работа совместно с PHP и Perl;
з) Инсталлятор.
Достоинства Денвера:
а) Возможность создания и отладки работы сайта без покупки хостинга;
б) Готовая сконфигурированная сборка всех необходимых программ;
в) Легкость установки и удаления, полная автономность;
г) Небольшой размер базового пакета установки. Достигается это тщательной «очисткой» всех дистрибутивов от ненужных файлов и мощной архивацией;
д) Автоматическое исправление системных файлов, в результате чего к локальным сайтам можно обращаться по именам, совпадающим с названиями папок в каталоге home;
е) Денвер распространяется бесплатно и постоянно дорабатывается. В новых версиях исправляются обнаруженные ошибки[6].
Далее, после создания сайта на локальном сайте происходит перенос его на удаленный.
Удаленный доступ представляет собой функцию, позволяющую пользователю подключаться к компьютеру через Интернет с помощью другого ПК. Условием для применения такой опции является включенный компьютер, к которому нужно подключиться, а также установленная и запущенная функция удаленного доступа. Осуществить такое соединение можно при помощи любого ПК, подсоединенного к Сети, устанавливать удаленный доступ на эту машину не требуется[9].
Опция открывает возможность пользователю использовать свой компьютер удаленно, и обеспечивает следующие дополнительные возможности:
а) Доступ к файлам. Можно производить отправку файлов, специфические размеры или характеристики которых не позволяют отправить их по электронной почте. Посредством удаленного доступа генерируется безопасная ссылка, она может пересылать другим пользователям с целью загрузки данных с удаленного ПК;
б) Передача файлов. Это возможность копирования файлов и папок на текущий компьютер с удаленной машины или наоборот;
в) Гостевой доступ. Представляет собой безопасную опцию, позволяющею получать доступ для решения какой-то конкретной задачи на удаленном компьютере, предоставляя доступ к рабочему столу и возможность контролировать клавиатуру и мышь;
г) Сопровождение программ, а также организация работы на предприятии.
Хостинг бывает платный и бесплатный.
Достоинство у бесплатного хостинга одно - его бесплатность. А вот недостатков много:
1. На сайте будет размещаться реклама хостинг-провайдера;
2. Хостер бесплатно размещает у себя сайт, но не дает никакой гарантии качества;
3. Скорость работы медленнее, чем у платного;
4. Ограничены возможности (например, отсутствует PHP или MySQL).
Платный хостинг подразумевает ежемесячную оплату за предоставленные услуги. Причем сумма зависит от объема дискового пространства, максимального количества сайтов, поддержки различных функций и качества услуг.
Для проверки эффективности сайта, как способ привлечения клиентов будет использоваться бесплатный хостинг. Далее, если сайт начнет себя окупать, будет перенесен на платный хостинг[7].
4.2 Выбор средств разработки
Для создания сайта необходимо выбрать движок. Существует большое количество средств разработки, которые являются платными или бесплатным. В данной работе будет использоваться бесплатная версия. Рассмотрим некоторые варианты:
1. WordPress
WordPress -- это система управления сайтами. Одна из самых простых и популярных. По примерной статистике больше половины сайтов работают именно на этой cms.
Основные преимущества CMS WordPress:
а) Легкость в настройке и управлении консолью просто невероятная. Все настолько легко и интуитивно доходчиво, что разобраться с программой не составит большого труда;
б) Возможностей предоставленных разработчиками достаточно что бы создавать сайты практически любой сложности, создавать и изменять шаблоны;
в) Обширные возможности для оптимизации как отдельных элементов, так и всего сайта в целом;
г) Достаточно развитая система безопасности;
д) Плагины для расширения возможностей CMS позволяют настроить и подать контент наиболее качественным и удобным способом;
е) Часто обновляемая CMS показатель постоянной работы создателей над улучшением движка [9].
2. Joomla
Joomla - это один из самых популярных и мощных движков в мире. Joomla позволяет без особых знаний в веб-программировании создавать отличные и динамичные сайты. К тому же является бесплатной программой с огромным количеством расширений, модулей и плагинов.Joomla - программное обеспечение, позволяющие создавать сайты, редактировать их и управлять ими. Наиболее популярная бесплатная CMS, то есть система управления содержимым. При этом, из двух разновидностей CMS Joomla относится к управлению веб-контента.
3. MODX
MODX - это система управления контентом с открытым кодом. Она построена на основе PHP и MYSQL, поэтому работает практически на любом сервере. Как и в WordPress существуют две версии: MODX Revolution (как wordpress.org, версия для скачивания и установки на ваш сервер) и MODX Cloud (как wordpress.com).
MODX - непритязателен: не важно, где располагаются шаблоны, как они организованы или где размещается контент. Это гибкая система, позволяющая работать как угодно.
Таким образом, выбирая оптимальный движок, нужно в первую очередь отталкиваться от предпочтений разработчика. Задача работы - создать информативный сайт для организации ИП «Мегабайт». Наиболее подходящим вариантом для достижения данной цели это движок Joomla.
Достоинства Joomla:
1. Доступность;
Эта система бесплатная и поэтому доступна даже начинающим компаниям и индивидуальным предпринимателям, которые не могут покупать коммерческие CMS.
2. Простая установка;
Очень простой способ установки CMS и создания качественного и красивого сайта. В интернете можно скачать невероятное количество шаблонов для этой системы -- как платных, так и бесплатных.
Более того, многие хостинг компании предлагают тарифные планы с возможностью установить Joomla на сайт одним кликом мыши. Один из таких хостингов является Таймвеб.
3. Открытость системы;
CMS Joomla не содержит закрытых компонентов, а распространяется с открытым исходным кодом. В него можно вносить нужные изменения на усмотрение пользователя.
4. Широкий выбор различных модулей и компонентов;
Первая версия Joomla вышла в 2005 году. За это время CMS активно развивалась и было написано огромное количество модулей и компонентов, начиная от всевозможных видов галерей, заканчивая интеграцией с платежными системами.
5. Простота и легкость в использовании сайта на этом движке;
Существуют много систем управления сайтами (drupal, bitrix, prestashop и так далее). Во многих этих CMS существенный недостаток - это неудобная бэкенд часть (админка).
Пользователям этих систем, для того чтобы сделать простое действие, например создать новую страницу, необходимо совершить 4 - 8 действий, прежде чем появится новая страница и будет готова к заполнению.
В CMS Joomla очень простая панель администрирования сайта и многий полезный функционал можно реализовать двумя кликами мыши.
6. Регулярное обновление системы, и постоянно происходит создание новых компонентов и модулей;
7. Наличие огромного количества сайтов поддержки и блогов пользователей этого движка. В том числе и для пользователей на русском языке;
8. Хостинг для Joomla;
Для CMS Joomla подходит большинство веб-хостингов. Один из таких хостингов - это Таймвеб. В личном кабинете хостинга Таймвеб можно найти предустановленные CMS включая Joomla. Разворачивание Joomla на Таймвебе занимает несколько секунд и Joomla полностью готова к работе.
Недостатки Joomla:
1. Есть недоработки в структуре элементов CMS;
2. Невысокий уровень защиты системы от взлома;