Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Обзор целевой аудитории

1.2 Выбор типа сайта для организации

1.3 Аналоги

1.4 Требования к сайту

1.5 Этапы создания сайт

2. РАЗРАБОТКА СТРУКТУРЫ САЙТА

2.1 Типы внутренних структур сайта

2.2 Внешняя структура сайта

2.3 Разработка структуры сайта для ИП «Мегабайт»

3. РАЗРАБОТКА ДИЗАЙНА САЙТА

3.1 Разработка дизайна

4. ВЫБОР СРЕДСТВ РАЗРАБОТКИ

4.1 Разработка серверной части

4.2 Выбор средств разработки

5. РАЗРАБОТКА САЙТА

5.1 Вход в Joomla!

5.2 Выбор шаблона для сайта

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

5.4 Создание материалов

5.5 Создание меню

5.6 Создание контактов и формы обратной связи

6. ТЕСТИРОВАНИЕ

6.1 Методы тестирования

6.1.1 Тестирование методом «белого» ящика

6.1.2 Тестирование методом «серого ящика»

6.1.3 Тестирование методом «черного ящика»

6.1.4 Нагрузочное тестирование

6.1.5 Тестирование пользовательского интерфейса

6.1.6 Тестирование сайта на уязвимость

6.7 Результаты тестирования

7. АПРОБАЦИЯ И ВНЕДРЕНИЕ САЙТА

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ



ВВЕДЕНИЕ

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

Такой источник информации, как интернет, стал популярен не только в виде развлекательного и обучающего контента, но и в виде способа продвижения бизнеса. Это довольно простой способ распространения информации, которую можно получить, не выходя из дома. Зачем делать лишние движения по нахождению какой-либо нужной информации, если все под рукой? Опираясь на этот факт, большинство предпринимателей решили рекламировать свои услуги и товары именно таким образом. К примеру, интернет-магазин, стоит лишь зайти на сайт, выбрать нужный товар, указать адрес и все, товар будет доставлен клиенту. Предприниматели знают, что многие люди не хотят тратить время на дорогу до какого-либо определенного места, тем самым идя им навстречу, например бесплатной доставкой. При таком раскладе все остаются довольны: покупатель получил свой товар, а фирма - свои деньги. Именно поэтому такой источник, как интернет, облегчает жизнь продавцам и покупателям.

Продвижение в интернете своих товаров и услуг - один из наиболее эффективных способов развития бизнеса. Компания «Мегабайт» открылась относительно недавно, группа «ВКонтакте», а также наружная реклама помогла набрать небольшую популярность в данной местности. Но для большего обращения клиентов нужны еще среды, где можно распространить свою рекламу. Интернет является таковым. А значит, такой ресурс как Интернет, компания может использовать для своих коммерческих целей. Именно по этой причине, целью ВКР стало: создание сайта для организации ИП Смирнов «Мегабайт».

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

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

1. анализ предметной области;

2. разработка структуры и дизайна сайта;

3. выбор средств разработки;

4. тестирование;

5. составление методического руководства по использованию и управлению данным программным продуктом.



1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Обзор целевой аудитории

Организация ИП Смирнов «Мегабайт» совмещает в себе магазин компьютерной техники и станцию по ее ремонту. В продаже имеются компьютеры, комплектующие, ноутбуки, телефоны, смартфоны, цифровое телевидение, также по всему спектру товаров компания оказывает ремонт. Основной клиентурой данного магазина являются жители с.Сямжа, а также близлежащих деревень. Так как с.Сямжа является центром своего района и до других более крупных населенных пунктов расстояние достаточно большое, и не все жители имеют возможность отправиться туда, то данная организация приходится очень кстати. Не все клиенты находятся именно в этом селе, потенциальный покупатель может также быть из периферии. И для того чтобы клиентам не нужно было ездить, чтобы получить какую-либо важную информацию, создается веб-сайт. Ведь с его помощью можно будет получить нужную информацию о товаре или ремонте. Также, с помощью сайта можно будет проверить, имеется ли нужный товар в наличии. Посетителями сайта могут быть как и молодое поколение, так и более взрослое. В связи с этим сайт должен удовлетворять минимальным требованиям: простота, легкость в использовании, содержание сайта должно быть только по делу, никакой лишней информации[2].

1.2 Выбор типа сайта для организации

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

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

2. Корпоративный сайт -- содержит полную информацию о компании-владельце, услугах/продукции, событиях в жизни компании. Отличается от сайта-визитки и представительского сайта полнотой представленной информации, зачастую содержит различные функциональные инструменты для работы с контентом (поиск и фильтры, календари событий, фотогалереи, корпоративные блоги, форумы). Может быть интегрирован с внутренними информационными системами компании-владельца (КИС, CRM, бухгалтерскими системами). Может содержать закрытые разделы для тех или иных групп пользователей -- сотрудников, дилеров, контрагентов и пр.

3. Корпоративный сайт -- это высококлассный ресурс компании, который может использоваться для любых коммерческих и информационных целей:

а) информирования ваших партнёров и клиентов о деятельности компании;

б) демонстрации портфолио и ассортимента товаров;

в) полноценного интернет-продвижения по различным каналам;

г) активного привлечения новых клиентов;

д) создания уникального информационного ресурса, касающегося вашей сферы.

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

Традиционно, коммерческий сайт должен включать модули для размещения:

а) новостей фирмы;

б) каталога продукции или витрины магазина;

в) контактной информации;

г) формой обратной связи.

Кроме обязательной информации, в зависимости от профиля компании, на сайте размещаются дополнительные модули (калькулятор услуг, онлайн консультант и т.п.), блог статей и любую другую информацию для достижения основной задачи коммерческого сайта,- получение прибыли[4].

Из всего выше сказанного, было решено создать коммерческий сайт. Он удобен и практичен для организации. Сайт будет в себе содержать 4 модуля: новости, каталог, контакты и услуги. Так как организация находится в малонаселенном пункте, то вариант корзины и покупка онлайн, по мнению заказчика, будет ненужным. Таким образом, на главной странице будут отображены последние поступления, новинки. В категории товары будет показан весь товар, разбит на подкатегории для удобства поиска. В контактах будет указано телефон, адрес и ссылка на группу в социальной сети. Форма обратной связи для вопросов также актуальна. Сайт будет работать на привлечение клиентов, их информирования об услугах, предоставляемой компанией.

1.3 Аналоги

Существует множество интернет-магазинов компьютерной техники, а также сайтов компаний по ремонту техники.

Одним из наиболее популярных магазинов компьютерной техники является «Эльдорадо». Эта организация является одним из крупнейших магазинов по продаже компьютеров, ноутбуков и т.п., а так же бытовой техники. Точки расположены по всей стране. Так как эта компания является достаточно популярной, многие о ней знают, сайт создается не только для увеличения товарооборота, но и для удобства компании и клиентов. Свой сайт в интернете не только увеличивает количество потенциальных клиентов, но и также является более комфортным способом совершения покупки для людей. У данной компании имеется свой интернет-магазин (рис.1.3.1).

Рис.1.3.1 - Главная страница «Эльдорадо»

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

В качестве еще одного аналога интернет-магазина можно взять «МВидео». Эта также крупная сеть магазинов, расположенная по всей стране имеет свой сайт. Данная организация также занимается продажей компьютерной и бытовой техники, функции сайта, как и предыдущего аналога схожи: это нахождение потенциальных клиентов, облегчение работы самой компании, а также удобство для клиентов. На главной странице имеются также выпадающие меню с категориями товаров, контактная информация, изображение с выгодными предложениями, ссылки на некоторые товары с их обзорами, также ссылки на товары со скидками(рис.1.3.2). Сайт несложен в использовании: имеется личный кабинет, можно поменять город, сделать заказ, узнать адреса магазинов. И все эти возможности расположены и заметны сразу, что немаловажно.

Рис.1.3.2 - Главная страница «МВидео»

Для примера можно также взять организацию, занимающуюся ремонтом компьютерной техники «Digitall», находящуюся в Вологде. Компания производит ремонт компьютерной и бытовой техники. Сайт этой организации облегчает клиентам нахождение более подробной информации о компании, об их услугах, адресах и режиме работы. Главная страница минимализирована, на ней находится общая справка о компании, а также ссылки на более подробную информацию(рис.1.3.3). Цветовая гамма приятна для глаза. Вся информация расположена таким образом, что ее легко найти на данном сайте, даже для новичка. Так же есть личный кабинет и имеется возможность оформить заказ.



Рис.1.3.3 - Главная страница «Digitall»

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

1.4 Требования к сайту

Таким образом, просмотрев некоторые аналоги, сравнив их между собой, было выбрано то, что кажется более удобным для клиентов. Страница будет минимизирована для того, чтобы клиент не запутался, все будет четко видно, что и где находится. Меню сайта должно быть заметным сразу, товар делится на подкатегории, имеется информация о каждом товаре и его цена. Так же как и в выше перечисленных аналогах, главная страница будет похожа. За исключением некоторых минусов, то есть достаточно маленький шрифт и слишком много информации на одной странице, которая может ввести в заблуждение пользователей. Также, как и везде будет добавлена обратная связь. Цветовая гамма должна быть приятна к восприятию.

Основными этапами разработки web-сайта являются:

1. Определение целей web-сайта;

2. Создание технического задания на разработку web-сайта;

3. Создание дизайн-макета web-сайта;

4. Верстка web-сайта;

5. Наполнение сайта информацией;

6. Тестирование.

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

1.5 Этапы создания сайта

Рассмотрим этапы создания более подробно:

1. Определение целей web-сайта

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

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

После определения целей сайта надо совершенно четко подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.

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

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

2. Создание технического задания на разработку web-сайта

В ТЗ необходимо как можно более подробно описать:

а) цели создания и его целевую аудиторию;

б) структуру веб-сайта и количество страниц в каждом разделе;

в) пожелания по дизайну (цвета, использование фирменного стиля и т.д.);

г) порядок представления, обработки или создания графической и текстовой информации;

д) технические требования к сайту.

ТЗ является основным документом, на основе которого осуществляются все последующие этапы разработки веб-сайта.

3. Создание дизайн-макета web-сайта

На этом этапе дизайнер в специальной графической программе создает дизайн страниц будущего веб-сайта с прорисовкой всех графических (баннеров, кнопок, фотографий) и текстовых элементов. Дизайнер создает дизайн веб-страниц с учетом пожеланий заказчика и задания, прописанного в ТЗ.

4. Верстка web-сайта

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

5. Наполнение сайта информацией

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

6. Тестирование

На этом этапе выявляются все ошибки и недочеты в программировании и написании текстов[8].



2. РАЗРАБОТКА СТРУКТУРЫ САЙТА

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

В тезисах структуру сайта можно охарактеризовать так:

а) где я нахожусь сейчас (страница входа);

б) куда я могу попасть (переход);

в) взаимосвязь между категориями.

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

2.1 Типы внутренних структур сайта

1. Линейная структура сайта

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

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

Рис.2.1.1 - Линейная структура сайта

2. Линейная структура сайта с альтернативами и вариантами

Основой данной структуры является простое линейное размещение web-страниц. Однако на сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу, облегчив для себя поиск нужной информации. Под альтернативами в данном случае понимается выбор между двумя ветками. Чаще всего подобная структура используется для сбора информации о посетителе. Примером здесь может служить процесс регистрации клиента на сайте какой-то фирмы, оказывающей определенные услуги. В этом случае все люди начинают работу со стартовой страницы. Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур -- другую. После этого и те, и другие попадают на одну и ту же страницу.

Линейная структура с альтернативами и вариантами удобна в том плане, что с одной стороны она позволяет web-мастерам контролировать деятельность посетителей, направив их в определенное русло. А с другой стороны проявить некоторую инициативу, которая позволит им, во-первых, почувствовать свободу, а во-вторых, облегчить доступ к нужной именно им информации. Схема приведена на рисунке 2.1.2.



Рис.2.1.2 - Линейная структура сайта с альтернативами и ветвлениями

3. Линейная структура сайта с ответвлениями

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

Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения web-страниц. Такое часто бывает, когда созданный однажды сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам невозможна. В этом случае web-мастер может быстро и без всяких проблем расширить проект. Схема на рисунке 2.1.3.

Рис.2.1.3 - Линейная структура сайта с ответвлениями

4. Древовидная структура сайта

Древовидная структура -- самый универсальный способ размещения web-страниц. Она подходит для создания практически любых типов сайтов. Ее принцип заключается в том, что пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п. У древовидной структуры очень много достоинств, но так же есть и недостаток.

Речь идет о том, что в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц, что будет раздражать пользователей. А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это тоже плохо. Таким образом, при использовании древовидной структуры сайта необходимо постоянно следить за ее разрастанием и придерживаться золотой середины. Схема предоставлена на рисунке 2.1.4.

Рис.2.1.4 - Древовидная структура сайта

5. Решетчатая структура сайта

Эта структура уже на порядок сложнее всех рассмотренных ранее. В ней все страницы также размещаются в различных ветках. Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз), но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью отсылок на рубрики в других разделах.

Использование решетчатой структуры в других проектах нецелесообразно. Во-первых, она относительно сложна в реализации. Во-вторых, обращаться с «решеткой» нужно с очень большой осторожностью, так как структура сайта может получиться очень запутанной, и посетители будут вынуждены долго блуждать в поисках нужной им информации[5].

В данной работе было решено использовать древовидную структуру сайта. С главной страницы будут «разветвления» на разные категории. В зависимости от того, какую вкладку нажимает клиент, перед будет появляться выбор для перехода на более конкретную страницу. К примеру, на главной странице будет 4 пункта меню, переходя на которые пользователь перемещается на данные страницы, а вкладка товары будет содержать в себе еще подкатегории: смартфоны, ноутбуки, компьютеры и комплектующие.

2.2 Внешняя структура сайта

Базовое размещение элементов на сайте:

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

2. Центральный блок, самый главный, это информация, интересная для посетителя. На главной странице будут располагаться последние поступления;

3. Футер, подвал сайта. В данную область будет добавлена информация о магазине и некоторые контактные данные.

2.3 Разработка структуры сайта для ИП «Мегабайт»

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

На главной странице будет несколько вкладок с категориями:

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

2. Товары (Данная вкладка будет включать в себя все товары магазина. В данной категории будут также выделены подкатегории с конкретными товарами: смартфоны, ноутбуки, компьютеры, комплектующие);

3. Услуги (Здесь будут указаны услуги, оказываемые организацией, а также цены на них);

4. Контакты (В данном разделе указываются контактные данные, местонахождение организации).

Рис. 2.3.1 - Структура сайта

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



3. РАЗРАБОТКА ДИЗАЙНА САЙТА

3.1 Разработка дизайна

Чтобы добиться максимального удобства и эффективности сайта, необходимо заранее определить целевую аудиторию проекта. Кто потенциальный посетитель сайта? Это могут быть люди разной возрастной категории, как молодые люди, которым легче освоиться на сайте, так и люди более взрослого возраста, которым тяжело будет разобраться.

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

Следующим этапом будет создание модулей для будущего сайта. На главной странице обычно располагаются следующие элементы:

а) название компании, интернет-магазина, информационного ресурса;

б) меню навигации (один или несколько блоков);

в) логотип компании, интернет-магазина, информационного ресурса;

г) контентный блок;

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

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

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

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

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. Невысокий уровень защиты системы от взлома;

3. Иногда возникают проблемы с индексацией сайта;

4. Излишний код в шаблонах сайта и самом движке, который приводит к медленной работе страницы сайта;

5. Порой возникают проблемы с обновлением системы;

В CMS Joomla, как и в любой системе, есть свои недостатки, но на сегодня ее преимущества перекрывают, особенно что касается управления содержимым сайта. А одним из явных преимуществ является то, что любой продвинутый пользователь может сделать необходимые изменения в системе. Ее код является открытым, что предполагает неограниченные возможности при создании новостных сайтов, блогов и небольших порталов[8].

Таким образом, рассмотрев несколько движков для разработки сайта, можно составить небольшой список тех функций, которые будут удобны для достижения цели ВКР. Во-первых, так как организация не совсем крупная, то не может себе позволить платную CMS. Во-вторых, трата лишнего времени на установку является нежелательным эффектом, поэтому движок должен быть выбран, учитывая и данный критерий. Немаловажным является сама панель управления, то есть так среда, где происходит разработка сайта. Она должна быть простой, понятной на интуитивном уровне, чтобы пользователь не искал нужную информацию, все должно быть «под рукой». Неплохим достоинством является и то, что у движка будет иметься большой выбор шаблонов. Это удобно тем, что при выборе понравившегося шаблона ненужно делать слишком много лишней работы, а просто переделать все под себя, что опять же таки экономит время. В итоге, основываясь на всем выше сказанном, оптимальным вариантом был выбрано движок Joomla. Все описанные нужные функции имеются в данной CMS. Она проста для разработки, экономит время, имеется обширная библиотека шаблонов. Одним из главных недостатков является уязвимость, но так как организация недостаточно крупная, встроенной защиты Joomla вполне достаточно. При увеличении организации и хорошей отдачи сайта для организации, в дальнейшем, будут использованы более мощные средства защиты.



5. РАЗРАБОТКА САЙТА

5.1 Вход в Joomla!

В самом начале нужно зайти в панель управления от лица Администратора(рис.5.1.1). Вход выполняется для того, чтобы начать создавать сайт и, в дальнейшем, редактировать его под себя. Так же с помощью Администратора будут вноситься изменения содержимого на всех страницах.

Рис.5.1.1 - Вход в панель управления

Перед администратором открывается панель управления, на которой будут указаны основные материалы для разработки(рис.5.1.2).



Рис.5.1.2 - Панель управления

5.2 Выбор шаблона для сайта

Для разработки сайта был выбран бесплатный шаблон «shaper_zaara», скаченный с официального сайта. После его установки и выбора из списка, он автоматически применяется ко всем страницам(рис.5.2.1.). Шаблон упрощает дальнейшую разработку, так как в нем имеются некоторые встроенные функции, с которыми не приходится разбираться разработчику, а сразу использовать их возможности.

Рис.5.2.1 - Выбор шаблона



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

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

Рис.5.3.1- Создание категорий

5.4 Создание материалов

Для создания материалов применяется аналогичная процедура. Материал будет содержать в себе конкретную информацию. Товар также будет заноситься с помощью материалов(рис.5.4.1).



Рис.5.4.1 - Создание материалов

Так выглядит окно с занесением нового товара(рис.5.4.2). При занесении указывается название товара, оно же является названием материала. Это удобно для клиента сайта, так как при «клике» по заголовку сразу открывается статья полностью со всем описанием, так же это удобно и для разработчика, тем, что при поиске нужного товара ему достаточно будет ввести в поиске по материалам название товара и заняться его редактированием.

Рис.5.1.4 - Создание нового товара



5.5 Создание меню

В меню содержаться пункты: Главная(при клике на ссылку, клиент автоматически отправиться на главную страницу), Товары(категория с выпадающим списком, Услуги, Контакты(также содержит выпадающий список, при клике «Наш адрес» пользователь попадет в окно с контактами, а также формой для обратной связи).

При создании «Главная» нужно, чтобы на главной странице появлялись последние новинки, а так как это является материалом, то тип пункта меню выбран «Избранные материалы»(рис.5.5.1).

Рис.5.5.1-Создание меню Главная

При создании выпадающего списка «Товары», для начала нужно создать корневой пункт меню «Товары». Затем создается подпункт «Смартфоны», в котором указано, что родительским элементом является пункт меню «Товары». Как тип пункта меню выбирается «Блок категорий», для того, чтобы отображались вводные части материалов(рис.5.5.2).



Рис.5.5.2 - Создание подпункта меню «Смартфоны»

Аналогичным образом происходит создание таких подпунктов меню, как Ноутбуки, Компьютеры, Комплектующие.

Таким образом, выделив категорию «Товары» как родителя, получается выпадающий список.

5.6 Создание контактов и формы обратной связи

Для создания контактов используется такая же схема. Сначала создается категория контактов(рис.5.6.1).

Рис.5.6.1 - Создание категории «Контакты»

Далее создается сам Контакт(рис.5.6.2).



Рис.5.6.2 - Создание контакта

У организации также имеется группа в социальной сети «Вконтакте». По желанию разработчика была создана ссылка из подпункта меню «Мы Вконтакте»(рис.5.6.3). Для этого в подпункте меню «Мы Вконтакте», как тип пункта меню был выбран «Внешний URL» и ниже указана ссылка на группу. При нажатии на данную кнопку, браузер автоматически откроет группу в новом окне.

Рис.5.6.3 - Создание ссылки на социальную сеть



6. ТЕСТИРОВАНИЕ

Тестирование - это оценка разрабатываемого программного обеспечения/продукта, чтобы проверить его возможности, способности и соответствие ожидаемым результатам. Существуют различные типы методов, используемые в области тестирования и обеспечения качества. Тестирование программного обеспечения является неотъемлемой частью цикла разработки программного обеспечения.

6.1 Методы тестирования

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

6.1.1 Тестирование методом «белого» ящика

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

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

6.1.2 Тестирование методом «серого ящика»

«Серый ящик» - это метод тестирования программного продукта или приложения с частичным знанием его внутреннего устройства. Для выполнения тестирования «серого ящика» нет необходимости в доступе тестировщика к исходному коду. Тесты пишутся на основе знания алгоритма, архитектуры, внутренних состояний или других высокоуровневых описаний поведения программы.

6.1.3 Тестирование методом «черного ящика»

«Черный ящик» - это метод тестирования программного обеспечения, при котором функциональность исследуется без рассмотрения кода, деталей реализации и знаний о внутреннем устройстве программного обеспечения (ПО). Тестировщики пишут тест-кейсы, опираясь только на требования и спецификацию программного обеспечения.

6.1.4 Нагрузочное тестирование

Тестирование производительности -- в основном это нагрузочное тестирование. Нагрузочное тестирование сайта проверяется в большинстве случаев автоматом, то есть специальными программами. Это дает шанс проверить, насколько он будет работать под определенной нагрузкой. Цель этого тестирования, заключается в количестве виртуальных пользователей, которые задают n количество запросов, в одно время (будь это секунды даже). Тем самым результат дает то, смог ли проект выдержать, к примеру, 50 пользователей, которые одновременно покупали товар или авторизовались на сайте, ответ показывает, реально ли выдержать сайт такую нагрузку.

6.1.5 Тестирование пользовательского интерфейса

UI testing- это тестирование графического интерфейса пользователя, которая предполагает проверить сайт на соответствия требованиям к графическому интерфейсу, профессионально ли оно выглядит, выполнено ли оно в едином стиле.

6.1.6 Тестирование сайта на уязвимость

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

Для тестирования проекта был выбран метод «белого ящика».

6.2 Результаты тестирования

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

Таблица 6.7.1 - Результаты тестирования

Начальные данные	Ожидаемый результат	Итог
Переход по ссылке «Главная»	Переход на главную, показ содержимого	Да
Переход по ссылке «Товары»	Переход на страницу с подкатегориями товаров	Да
Переход по ссылке в выпадающем меню «Товары - Смартфоны»	Переход на страницу «Смартфоны» и загрузка содержимого раздела	Да
Переход по ссылке в выпадающем меню «Товары - Ноутбуки»	Переход на страницу «Ноутбуки» и загрузка содержимого раздела	Да
Переход по ссылке в выпадающем меню «Товары - Компьютеры»	Переход на страницу «Компьютеры» и загрузка содержимого раздела	Да
Переход по ссылке в выпадающем меню «Товары - Комплектующие»	Переход на страницу «Комплектующие» и загрузка содержимого раздела	Да
Переход по ссылке «Услуги»	Переход на страницу с информацией об услугах, загрузка содержимого	Да
Переход по ссылке «Контакты»	Переход на страницу «Контакты», загрузка содержимого	Да
Переход по ссылке в выпадающем меню «Контакты - Наш адрес»	Переход на страницу с контактами и формой обратной связи	Да
Переход по ссылке в выпадающем меню «Контакты - Мы Вконтакте»	Открытие ссылки в новой вкладке	Да
Заполнение формы обратной связи с полными полями	Отправка сообщения на E-mail и возвращение на главную страницу	Да
Заполнение формы обратной связи с одним пустым полем	Вывод ошибки о том, что поле не заполнено и выделение его красным цветом	Да
Заполнение формы с несколькими пустыми полями	Вывод ошибки о том, что поля заполнены некорректно и подсвечивание пустых полей	Да
Наведение мыши на пункт меню «Контакты»	Появление выпадающего списка «Контакты»	Да
Наведение мыши на пункт меню «Товары»	Появление выпадающего списка при наведении мыши на меню «Товары»	Да
Нажатие на кнопку «Подробнее» под любым материалом	Открытие статью полностью	Да



7. АПРОБАЦИЯ И ВНЕДРЕНИЕ САЙТА

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