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

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. АНАЛИТИЧЕСКИЙ ОБЗОР

1.1 Аналитический обзор целевой аудитории

1.2 Анализ требований к сайту

1.3 Анализ аналогичных сайтов

2. ПРОЕКТИРОВАНИЕ

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

2.2 Обоснование выбранного средства

2.3 Разработка структуры сайта

2.4 Разработка структуры базы данных сайта

2.5 Разработка интерфейса

3. РЕАЛИЗАЦИЯ

3.1 Установка и настройка требуемого программного обеспечения

3.2 Разработка дизайна веб-сайта

3.3 Создание и наполнение контентом страниц сайта

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

3.5 Обзор получившегося продукта

3.6 Разработка руководства для администратора сайта

4. ОРГАНИЗАЦИЯ ЗАЩИТЫ САЙТА

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

5.1 Выбор методики тестирования

5.2 Описание тестирования

5.3 Оценка результатов тестирования

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ



ВВЕДЕНИЕ

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

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

Имея хороший сайт, можно сэкономить на рекламе. Ведь реклама в сети интернет набирает все большую популярность. А реклама ? это продвижение и развитие. Без нее бизнес вести практически невозможно.

Так же через сайт можно организовать общение администратора (сам руководитель или его работники) с клиентами, оформление заказов и заявок на услуги.

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

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

Чтобы достигнуть поставленной цели требуется выполнить ряд задач:

1) изучить способы разработки Web?дизайна;

2) проанализировать деятельность и работу организации?заказчика;

3) разобрать типы Web?сайтов, определить к какому из них будет относиться разрабатываемый сайт;

4) изучить средства разработки Web?сайтов;

5) подобрать подходящее для определенного типа;

6) разработать дизайн, соответствующий требованиям заказчика;

7) протестировать готовый программный продукт.

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



1. АНАЛИТИЧЕСКИЙ ОБЗОР

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

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

У сайта в Интернете есть единственный уникальный адрес ? доменное имя. Именно по этому имени, являющемуся ссылкой на сайт, его и можно найти во всемирной сети.

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

1) планирование

2) дизайн

3) разработка

4) обеспечение безопасности

5) внедрение

Рассмотрим каждый из них чуть подробнее.

Планирование.

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

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

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

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

Дизайн.

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

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

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

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

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



Рисунок 1.1? Классификация сайтов

Опишем некоторые из них поподробней.

1. Сайт?визитка.

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

2. Корпоративный сайт.

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

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

3. Интернет?магазин.

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

4. Информационный сайт.

Аналог энциклопедии, только электронный. Содержит большой объем информации (как текстовой, так и графической и видео), соответствующей тематике сайта. Чаще всего ничего не продает, не покупает и не рекламирует.

5. Игровой портал

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

6. Промо?сайт.

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

7. Сайт?форум.

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

8. Блог.

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

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

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

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

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

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

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

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

1.1 Аналитический обзор целевой аудитории

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

Чаще всего потребители отдельного продукта объединены некоторыми общими признаками. Чтобы получить образ «среднего» покупателя нужно выделить следующие критерии: возраст, пол, место жительства, образование, доходы, сфера деятельности, навыки работы в сети интернет.

Поскольку организация-заказчик оказывает услуги по настройке, доработке и обслуживанию программного обеспечения (бухгалтерские программы, 1С, программы для ЖКХ), то соответственно большая часть клиентов имеют высшее бухгалтерское или экономическое образование, возраст не моложе 25 лет, навыки работы в интернете могут быть совершенно разными, по полу покупателя дифференцировать тоже довольно сложно, поскольку не всегда покупатель и пользователь продаваемых фирмой продуктов ? одно лицо, но допускаю, что большинство все же женщины, проживающие в Вологде.

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

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



1.2 Анализ требований к сайту

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

Предусмотреть следующие функции:

? онлайн-заказ программных продуктов;

? подписка на аккаунты фирмы в соц. сетях:В Контакте, Facebook, YouTube;

? комментирование статей и постов из этих соц. сетей;

? облако меток (тегов, слов, встречающихся в статьях).

1.3 Анализ аналогичных сайтов

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

Сайт компании Алгоритм (http://algoritm35.ru/)

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

Рисунок 1.2 ? Главная страница сайта фирмы АлгорИТм



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

Рисунок 1.3 ? Сайт Алгоритм с мобильного

Сайт компании Логасофт

У фирмы Логасофт так же неплохой сайт, как можно увидеть на рисунке 1.4. Довольно интересный продуманный дизайн, контакты в доступном месте на каждой странице.

Рисунок 1.4 ? Сайт фирмы Логасофт



Из минусов замечены следующие:

? меню горизонтальной навигации находится только внизу сайта (рисунок 1.5);

Рисунок 1.5 ? Горизонтальное меню сайта Логасофт

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

? ну и так же, как у Алгоритма, у Логасофта нет мобильной версии. То, как выглядит сайт с мобильного устройства, можно увидеть на рисунке 1.6.

Рисунок 1.6 ? Вид сайта Логасофт с мобильного устройства



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



2. ПРОЕКТИРОВАНИЕ

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

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

Решив создать сайт, заказчик чаще всего преследует следующие цели:

? просветительская ? сайт служит для размещения информации;

? рекламная ? рекламирует товары или услуги;

? сервисная ? облегчает какие-то действия;

? коммерческая? продает товары или услуги.

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

? Информационная функция ? в той или иной степени реализуется всеми сайтами, выражается в предоставлении информации по заданной тематике.

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

? Маркетинговая функция ? продажа товаров и услуг, рекламные акции, бонусные программы. Содержит такие разделы как «Каталог», «Товары», «Услуги, «Магазин». Можно как просто демонстрировать ассортимент товаров и услуг, так и осуществлять продажу через интернет (интернет?магазин).

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

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

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

2) CSS ? или каскадные таблицы стилей ?помогают описать стили, облегчают чтениеHTML-кода, поскольку стили конкретных элементов описываются в отдельных файлах.

CSSи HTML вместе определяют лишь внешний вид сайта. Для придания сайту динамикии интерактивности используется следующие языки.

3) JavaScript? мощный, удобный и популярный в настоящее время клиентский язык web-программирования. С его помощью можно динамически менять web-страницы, созданные с помощью, например, каскадных таблиц. Перезагружать страницу при этом не требуется. Возможности языка JavaScriptочень широки: работа с формами, слоями, изображениями, включение текущих даты и времени, отслеживание действий пользователей, открытие новых окон (и управление этими окнами, их внешним видом и функционалом) ? далеко не весь его потенциал.

4) PHP ? еще один скриптовый язык веб-программирования. Главное отличие от JavaScript в том, что код выполняется на сервере, а клиенту передается результат. Очень простой и легко изучается.PHP код можно разместить непосредственно в коде HTML, не привязывая внешний файл.

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

Причин для создания сайта может быть немало, так же и CMS? для каждого вида сайта, в зависимости от его целей, подходит определенная система управления контентом.Все CMS можно разделить на три группы: платные, бесплатные, узкоспециализированные. Ну и соответственно платные ? для продажи лицензии на них, бесплатные ? для свободного использования, узкоспециализированные ? для создания определенных типов сайтов (интернет?магазины, блоги, форумы и другие). Разберем наиболее популярные бесплатные CMS-системы.

1) WordPress?самый популярный «движок» в настоящее время. Подходит практически для любого типа веб-сайтов. На рисунке 2.1 изображен список тем данной CMS.

Преимуществом является в первую очередь его простота. Даже не зная основ веб-программирования можно без особых сложностей, используя лишь обучающие статьи и видео из интернета, создать вполне приличный сайт. Во-вторых, обладает большим количеством бесплатных возможностей. В наше время это немаловажно. Кроме того,WordPress создан достаточно давно, профессионалами и постоянно обновляется. Это в какой-то мере может гарантировать, что проект не закроется еще довольно долго. Больше половины сайтов, собранных на CMS, остановили свой выбор именно на WordPress.

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

Рисунок 2.1 ? Система управления контентом WordPress

2) Joomla? вторая по популярности CMS-система. Ей свойственны все плюсы WordPress, правда она чуть сложнее. Но справится с ней можно без особых знаний и опыта в разработке.

Так же для этой системы созданы удобные приложения для создания интернет-магазинов различной сложности: Hikashop, J2Store, VirtueMart и т. д. И, хотя у WP так же есть свои решения для интернет-коммерции, Joomla все же считается более подходящим выбором тому, кто нуждается в интернет-магазине.

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

Минусы Joomla аналогичны минусам WP. В сравнении с WordPress имеет меньше тем, плагинов и прочих «довесов», что правда не уменьшает ее возможностей в целом. На рисунке 2.2 изображен «движок» Joomla.

Рисунок 2.2 ?CMS-система Joomla

3) Drupal (рисунок 2.3)? уже более сложный «движок» для создания сайта. Однако с уровнем сложности расширяются и возможности этой платформы. Они практически безграничны.

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

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

Недостатков всего два ? цена и сложность. Совсем без знаний и опыта создать сайт на этом движке не получится.

Рисунок 2.3 ?Drupal

4) MODX? аналог Drupal (как Joomla? аналог WordPress), если рассматривать с точки зрения возможностей для пользователей неотягощенных знаниями в области интернет программирования.

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

Рисунок 2.4 ? Административная панель сайта на CMSMODX

2.2 Обоснование выбранного средства

Рассмотрев и проанализировав вышеперечисленные CMS, выбор остановим на WordPress.

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

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

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

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

В сети большое количество статей, форумов и видеоматериалов по работе с данной платформой ? найти ответы на возникающие вопросы очень просто.

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

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

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

Недостатки системы для нас не столь значимы, но считаю нужным отметить здесь и их.

Основным недостатком является одно из достоинств WP ? открытый код. Неопытный программист может своими коррективами «сломать» весь сайт. По этой же причине плагины и расширения стоит устанавливать только из проверенных источников.

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

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

2.3 Разработка структуры сайта

Изначально структура любого сайта подразделяется на внутреннюю и внешнюю.

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

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

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

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

Решетчатая структура уже имеет 1?2 связисо страницами своего уровня и еще несколько связей с подразделами (страницами следующего уровня). Появляется иерархичность.

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

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

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

Рисунок 2.5? Простая иерархическая структурная схема сайта

2.4 Разработка структуры базы данных сайта

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

2.5 Разработка интерфейса

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

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

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

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

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

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

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

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

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

Оформление навигационного меню должно быть одинаковым на каждой странице, а активная страница ? выделена.

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

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

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

Рисунок 2.6 ? Макет сайта

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



3. РЕАЛИЗАЦИЯ

3.1 Установка и настройка требуемого программного обеспечения

Работу по непосредственно созданию сайта начнем с установки на компьютер локального сервера. Выбор остановили на XAMPP. Скачиваем дистрибутив и устанавливаем на диск С. Панель управления XAMPP показана на рисунке 3.1.Активируем в ней Apache иMySQL нажатием на Start и сворачиваем. сайт программный интерфейс дизайн

Рисунок 3.1? Панель управления XAMPP

Далее надо создать базу данных. Открываем браузер и в адресной строке пишем следующий адрес ?http://localhost/phpmyadmin/. В открывшейся вкладке предлагается создать новую базу данных. Вводим имя базы данных ?wordpress? и нажимаем «Создать». Предлагается создать таблицы для новой базы, но это уже будет делать WordPress при установке.

В настоящий момент актуальной является версия WordPress 4.9.4. Архив распаковываем на диск С в папку xampp.Таким образом мы установили WordPressна наш сервер.



3.2 Разработка дизайна веб-сайта

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

Скриншот темы, выбранной для сайта по ВКР, показан на рисунке 3.2.

Рисунок 3.2 ? Тема WordPress

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

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

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

Полный код CSS можно посмотреть в приложении 1. Тут рассмотрим лишь некоторые моменты.

Найти файл style.css можно в папке соответствующей темы /wp-content/themes/citizen-journal/style.css.

Основные стили шаблона: его ширина, отступы, поля ? описываются этим кодом:

#container, .wrap {

width: 96%;

margin: 0 auto;

padding: 0 2%;

max-width: 1044px;

}

В языке CSSмодель описания стилей следующая:

Селектор{свойство: значение;}

Из предыдущего примера селектором является .wrap, свойством, например, ?width(ширина), а значением ? 96%. Это обозначает, что сам шаблон занимает на странице по ширине 96%.

3.3 Создание и наполнение контентом страниц сайта

Страницы сайта в WordPressсоздаются очень просто. В административной панели нажимаем Страницы ? Добавить новую. В открывшейся страничке заполняем название страницы, справа от названия можно настроить свойства страницы, указать при наличии страницу-родителя, порядок следования в меню, выбрать вид шаблона (базовый или во всю ширину без сайдбара). Нажимаем опубликовать, и пустая страничка на своем месте. Можно сразу же заполнить контентом, можно в любой момент после. Так поступаем для всех страниц.

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

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

Нам такая форма страницы подойдет для подразделов сайта Статьи и Новости. Создаются рубрики через меню Записи ? Рубрики ? Добавить новую. У них будет отдельное подменю Рубрики в правом сайдбаре. Было решено поставить там их первыми.

Все требуемые страницы созданы, некоторые имеют родительские страницы, согласно ранее разработанной структуре. Теперь нужно заполнить их контентом. Нажимаем Страницы ? Все страницы, выбираем ту, которую будем наполнять, и нажимаем под ней Изменить. Попадаем на страницу редактора, которая показана на рисунке 3.3.

Рисунок 3.3 ? Редактор страниц впанели WordPress

В первой строке указано название страницы, справа поля для ее редактирования, такие же, как и при создании новой страницы, а вот под названием располагается большое поле для контента. Его можно просматривать в двух видах: Визуально и Текст ? просто выбрав нужный.

Если нажать Визуально, то больше всего такое окно напоминает обычный текстовый редактор Word. Правда функций несколько меньше. Но как мы там пишем текст, так он и отобразится на нашем сайте. Есть возможность оформлять списки, изменять цвет и тип шрифта (жирный, курсив), менять отступы и выравнивание, вставлять цитаты, изображения (и другие медиафайлы) и ссылки.

Вкладка Текст покажет все записи уже в виде HTML кода. Там же его можно отредактировать, что даст чуть больше возможностей для оформления.

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

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

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

Устанавливаем плагин и активируем его. Слева на панели появляется кнопка Contact. Нажимаем ее, затем выбираем Newcontactи попадаем на страницу создания и редактирования формы обратной связи. Она изображена на рисунке 3.4.

Имеются четыре вкладки для редактирования: Шаблон формы (Form), Письмо (Mail), Уведомления при отправке формы (Messages) и Дополнительные настройки (AdditionalSettings). Начнем редактировать с Шаблона. По умолчанию выставлены самые часто используемые поля, но можно выбрать и другие, кнопки с ними расположены над полем ввода.

Рисунок 3.4 ?Страница редактирования шаблона

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

Рисунок 3.5 ? Код формы для вставки на страницу

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



Рисунок 3.6 ? Форма обратной связи

Рисунок 3.7 ? Успешная отправка сообщения

3.5 Обзор получившегося продукта

На рисунках 3.8? 3.10 показаны скриншоты некоторых страницсоздаваемого сайта. На странице Программные продукты перечислены основные направления деятельности фирмы.

Рисунок 3.8 ? Программные продукты

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

Рисунок 3.9 ? Страница Контакты

Рисунок 3.10 ? Страница Статьи

3.6 Разработка руководства для администратора сайта

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

Если запись размещается на странице, в основном это будет страница с программными продуктами, то и добавление, и редактирование происходят одинаково. Открываем Страницы ? Все страницы, выбираем из списка ту, которую хотим редактировать и нажимаем под ней изменить (появляется при наведении). Список всех страниц можно видеть на рисунке 3.11.



Рисунок 3.11?Список страниц сайта

Далее попадаем в редактор конкретной страницы. Для страницы О компании она изображена на рисунке 3.12.

Рисунок 3.12? Редактирование страницы О компании

Когда все требуемые изменения или дополнения будут внесены, нажимается кнопка Обновить и можно просмотреть как стала выглядеть страница. На рисунке 3.13 Показано изображение страницы в Интернете.

Рисунок 3.13? Страница сайта О компании

Если нужно добавить запись в рубрику, то поступаем так: нажимаем Записи ? Добавить новую. Появляется окно для добавления записи, рисунок 3.14.

Рисунок 3.14? Добавление записи в рубрику

Вводим заголовок, далее текст записи, можно выбрать формат записи, рубрику, в которой будет размещена запись (можно несколько), проставляем метки (или выбираем из используемых ранее), при желании устанавливаем изображение записи. Теперь нажимаем опубликовать и можно посмотреть, как выглядит размещенная запись в интернете ? рисунок 3.15.

Рисунок 3.15? Статья в рубрике Статьи

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

Редактируют записи из общего их списка Записи ? Все записи. При наведении на название статьи, которую нужно отредактировать, появится подменю: Изменить, Свойства, Удалить, Перейти.

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



4. ОРГАНИЗАЦИЯ ЗАЩИТЫ САЙТА

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

Существует три типа угроз информационной безопасности сайта:

1. Доступности ? когда закрывают или ограничивают доступ к определенной информации.

2. Угроза целостности ? данные редактируются, исправляются или удаляются.

3. Угроза утечки информации ? данные открываются для третьих лиц или разглашаются.

Основную угрозу безопасности сайта несут внешние источники, так называемые хакерские атаки. Могут быть как целевыми ? иметь конкретную цель, так и нецелевыми ? атаковать все что придется, «хоть что-нибудь сломается».

В свою очередь организация безопасности сайта складывается из нескольких компонентов:

1. Безопасность выбранного провайдера.

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

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

2. Надежность выбранных программ и приложений (CMS, скрипты, плагины).

В первую очередь этот момент зависит от разработчиков программного обеспечения. Они должны стараться предусмотреть все возможные уязвимости. Однако на деле это очень сложно. Потому-то для программного обеспечения так часто выходят обновления. И задачей разработчика, а позже администратора сайта, является поддержание в случае с CMS-системой в актуальном состоянии и самой системы, и ее компонентов. О появлении обновлений у WordPress оповещает административная панель, там же можно и установить обновления, что делает это совсем простым. В целом, выбранная для проекта система управления контентом считается довольно добросовестно относящейся к заботе о безопасности, и обновления выходят регулярно. Так же существует большое количество плагинов, специально созданных для поддержания безопасности сайта. Вотнекоторыеизних: iThemes Security, Acunetix WP Security, BulletProof Security, All in One Security and Firewall, Wordfence, Sucuri Security. Они разработаны с учетом комплексного подхода к безопасности, бесплатны или имеют бесплатный пакет, просты в установке и работе. Для нашего сайта был выбран и установлен плагин iThemesSecurity.

3. Благоразумность и осведомленность администратора сайта.

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

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

Есть еще несколько моментов, которые существенно повысят безопасность сайта. Некоторые уже упоминались ранее.

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

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

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

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

Для более опытных пользователей подойдет вариант создать .htaccess файл. Его стандартный вид предоставлен на рисунке 4.1.

Рисунок 4.1 ? Стандартный файл .htaccess

Добавляя после #END WordPress разные варианты кода можно повысить безопасность сайта: заблокировать доступ к wp-config.php файлу, запретить или разрешить доступ к сайту пользователей с конкретным IP-адресом, закрыть отслеживание заголовков HTTP, защитить от SQL и XSS-инъекций.

Так же имеет смысл изменить префикс SQLтаблиц базы данных сайта. По умолчанию он задается wp_, но при установке можно задать любой. Если же сайт уже запущен или CMS установлена давно, то это возможно сделать через phpMyAdmin создав SQLзапросы к базе данных к каждой таблице. Текст запросов можно видеть на рисунке 4.2.

Рисунок 4.2? Запросы к базе данных на изменение префикса таблиц

Далее, чтобы убедиться в том, что старый префикс нигде больше не используется нужно создать еще два запроса к базе данных «SELECT * FROM `nwp_options` WHERE `option_name` LIKE `%wp_%'» и «SELECT * FROM `nwp_usermeta` WHERE `meta_key` LIKE `%wp_%'». Если в результате старый префикс будет найден, то их переименовывают вручную, используя кнопку Изменить. Так же нужно не забыть изменить префикс и в файле wp-config.php.



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

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

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

Следующим этапом можно приступать к проверке работоспособности сайта. Для этого существует несколько методик.

5.1 Выбор методики тестирования

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

Рисунок 5.1 ? Классификация методов тестирования программных продуктов по знанию внутреннего устройства продукта: «черный ящик», «белый ящик» и «серый ящик»



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

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

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

5.2 Описание тестирования

Мы воспользуемся методом «белого ящика», заранее определим возможные ошибки, которые помогут проверить систему на адекватность поведения.

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

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