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

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

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

1.1 Анализ сети Интернет

1.2 Обзор целевого сегмента

1.3 Анализ занимаемой ниши

1.4 Обзор аналогичных web-ресурсов

1.5 Обзор средств разработки web-сайта

1.6 Обзор требовании web- сервиса

1.7 Использование CMS и выбор продукта

1.8 Вебинары

1.9 Mobile - first index

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

2.1 Проектирование структуры сайта

2.2. Проектирование базы данных ресурса

2.3. Проектирование пользовательского интерфейса

2.4. Разработка UI

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

3.1 Выбор хостинга и установка WordPress

3.2 Вебинары

3.3 Взаимодействие с социальными сетями

3.4 Обеспечение защиты web- сайта

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

4.1 Методика тестирования

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

5. РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

5.1 Управление страницами

5.2 Добавление и редактирование записей

ЗАКЛЮЧЕНИЕ

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



ВВЕДЕНИЕ

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

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

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

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

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

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

1.1 Анализ сети Интернет

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

Интернет состоит из огромного числа соединённых между собой мостов, маршрутизаторов, компьютеров и прочего оборудования, необходимых для корректной работы. Каждый элемент сети(узел) обладает уникальнойхарактеристикой - IP-адресом. Зная его можно попробовать подключиться к нему, при необходимом желании можно определить кому этот адрес принадлежит и в каком регионе мира находится. IP-адреса принято записывать в виде четырёх групп цифр, разделённых точками, например: 192.168.100.003 или 10.10.0.123.

Запомнить такие адреса страниц практически невозможно, поэтому в Интернете существуют специальные сервера DNS (DomainNameResolution), на которых хранятся списки сопоставления IP-адресов и символьных имён. Из-за них пользователь всегда попадает по нужному IP-адресу, набрав в браузере только имя страницы.

После ввода строки в браузере имя нужного web- ресурса, браузер самостоятельно получает из DNS IP-адрес нужного сервера и посылает по этому адресу специальный запрос на получение странички (HTTP-запрос). Работающая на сервере специализированная программа (т.н. Web-сервер) обрабатывает этот запрос и возвращает в браузер требуемую страницу.

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

В зависимости от места применения различаются и средства реализации частей. На стороне клиента как правило используется только HTML, JavaScript (AJAX), CSS и Flash.

1.2 Обзор целевого сегмента

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

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

Поскольку планируется продвижение через сеть Интернет, то логично предположить, что основной целевой аудиторией в возрастном ограничении сверху будет взрослое население до 40 лет, ибо люди более старшего поколения значительно реже пользуются Интернетом. Что касается нижней границы возраста, то стоит обратить внимание на молодежь(16-25 лет), а так же детей, поскольку вполне возможно что у их родителей возникнут проблемы при взаимодействии со своими детьми.



1.3 Анализ занимаемой ниши

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

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

1.4 Обзор аналогичных web-ресурсов

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

1.4.1 Сайт Павла Зыгмантовича[1]

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

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

1.4.2 Сайт «Мамина Карьера» [2]

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

1.5 Обзор средств разработки web-сайта

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

1) Написание вручную кода web-сайта

Самый трудоемкий и сложный способ, ибо требует опыта и знании в программировании. Требуются познания в JS, HTML, CSS для выстраивания front-end части, для серверной понадобится знание языка PHP, Java, Go, NodeJSили любой другой серверный язык.

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

2) Конструктор сайтов [3]

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

WIX - один из самых мощных и функциональных конструкторов. Возможностей хватает для создания форумов, сайтов- визиток, магазинов, блогов. Однако при ближайшем рассмотрении есть более дешевые и гибкие решения. Привлекает простой интуитивно понятный конструктор и большой выбор ярких стильных шаблонов -- в каталоге более 500 готовых макетов, разделенных на категории -- бизнес, рестораны и еда, отели, события, лендинги и т.д. Разработчики регулярно добавляют новые варианты под различные сферы. Это касается и функционала -- над сервисом работают, выходят обновления, добавляются возможности. В магазине приложений к сайту можно подключить более 250 различных виджетов. Правда, у такого роста есть и обратная сторона -- для новичков WIX становится тяжеловат, административная панель перегружена. Однако возросшего функционала все же недостаточно для профессионалов и серьезного бизнеса. Это все тот же конструктор, реализовать получится только то, что предусмотрено разработчиками. Даже не смотря на то, что конструктор поддерживает добавление своего html-кода.

3) Использование систем управления контентом(CMS)

С необратимым развитием информационных технологии неуклонно рос сегмент Интернета. Все большему числу компании, организации требовались свои собственные web- сайты. Для удешевления создания, сопровождения были изобретены CMS - ContentManagementSystem( система управления контентом). Подробный обзор будет представлен далее.



1.6 Обзор требовании web- сервиса

К продукту были выдвинуты минимальные требования к функциональности.

Требования к сайту следующие:

1. Стабильная работа без провисании при одновременном использовании как минимум 50 уникальных человек. Единственное требование, относящееся к стабильности и производительности. При росте популярности и посещаемости данная характеристика будет только увеличиваться. Следовательно, необходимо будет позаботиться об масштабируемости.

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

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

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

5. Разбиение материала по рубрикам. Поиск нужного материала среди всего его обилия весьма сложное и утомительное занятие, что несомненно отпугнет от использования вашего ресурса. Разбиение по рубрикам ускорит время поиска необходмого материала.

6. Облако меток. Еще одно средство для лучшей сортировки информации.

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

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

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

Обычно подобные web- сайты преследуют следующие цели:

1. Коммерция. Реализация через web-ресурс своих товаров и услуг. Необходима правильная работа с контентом для более успешной выборки при запросах в поисковых ресурсах, удобный поиск, фильтрация товара, удобная оплата и т.д.

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

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

4. Имидж. Создание и поддержание нужного образа организации, объединения. Важную роль играет дизайн сайта, логотип.

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

Проанализировав цели и требования web-ресурса, можно прийти к следующим выводам:

1. Web- ресурс предназначен для расширения рынка сбыта услуг.

2. Сайт необходим для повышения конкурентоспособности среди подобных поставщиков услуг.

3. Улучшение репутации путем размещения бесплатных материалов.

4. Реклама web-ресурса как платформы для психологической помощи.

Рассмотрев цели и задачи, разумным будет использование CMS.

1.7 Использование CMSи выбор продукта

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

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

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

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

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

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

1. Создание полноценногоBackend-а требует наличия профессиональной группы программистов, что весьма дорого и требует времени на создание и тестирование.

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

Осталось выбрать саму CMS, коих на рынке представлено множество. Выбор пал на WordPress. Причины выбора [4]:

1.Простота.

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

2.Функциональность.

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

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

3.Недорогие доработки.

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

4.Скорость работы.

По многим показателям производительности, таких как скорость загрузки, число используемых файлов, число mysqlтаблиц и т.д. WordPressнаходится в списке одних из самых лучших [6]. Низкий размер самой CMS, легко подключаемые модули ускоряют работу и снижают нагрузку на страницу. Благодаря этому также снижается время проверки на хостинге на наличие вредоносных программ, утилит и т.д.

5. Отличная SEO-оптимизация.

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

1.8 Вебинары

Одно из обязательных требовании было внедрение вебинаров.

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

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

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

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

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

Существует несколько способов реализации вебинаров. Их условно можно разделить на платные и бесплатные версии.

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

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

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

Примерами готовых решении может служить платформа webinar.ru. Её особенности:

· Гибкая ценовая политика с учетом нужд клиента

· Абонентская плата и аутентификация при подключении зрителей

Следующая платформа - gotomeeting.com. Англоязычный сервис. Особенности:

· Подключение с любого устройства, смартфон или планшет

· Тонкая настройка для пользователей

· Другой пример русскоязычного сервиса - virtualroom.ru. Его особенности:

· Доступные цены

· Поддержка под устройства на IOS\Android

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

1.9 Mobile - first index

В 2016 году Googleобъявил о новом алгоритме индексирования поиска [7]. Уже в 2016 году основная доля поисковых запросов в Googleбыла произведена на мобильных устройствах. Однако поисковик анализирует и хранит десктопную версию сайта и использует все её сигналы для ранжирования и отображения результатов, в том числе в мобильной выдаче. Это ухудшает пользовательский опыт тех, кто искал информацию с мобильных устройств, так как мобильные версии большинства сайтов содержат меньше контента.

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



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

Проектирование -- этот, возможно, ключевой этап создания интернет-сайта, отвечает нам на следующие вопросы:

1. Каковы наши цели -- зачем мы делаем сайт? Как мы реализуем поставленные цели?

2. Как сайт будет выглядеть и работать?

Проектирование даёт сайту весьма существенные особенности:

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

2. Экономит время и деньги.Исправить ошибку на этапе проектирования довольно просто: меняется несколько кусков текста и схем. Сделать это на этапе разработки дизайна или вёрстки будет уже дороже. Если ошибка обнаруживается на этапе программирования, её исправление может стоить многие тысячи (десятки, сотни тысяч) рублей и занять месяцы, а то и годы.

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

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



2.1 Проектирование структуры сайта

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

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

Исходя из требовании к сайту можно выделить следующие структурные элементы:

· поиск по сайту;

· модуль вебинара;

· каталог платных материалов;

· список бесплатных материалов.

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

Модуль вебинара представлен в виде специального плагина WPWebinarSystemLite. Необходима обязательно реализация любого способа проведения из доступных.

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

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

2.2 Проектирование базы данных ресурса

Поскольку сайт работает на WordPress, то не нужно беспокоиться о создании БД, ее оптимизации, администрировании и прочее. Все эти рутинные обязанности CMSберет на себя сама. Все имеющиеся данные в БД можно посмотреть в phpMyAdmin. Структурная схема стандартных таблиц представлена на рисунке 2.1.

В БДWordPress имеются такие типы контента:

- Вложения (attachments);

- Записи (posts);

- Ссылки (links);

- Страницы (pages);

- Ссылки (links);

- Пользовательские типы записей (customposttypes);

- Элементыменю (navigation menu items).

Данные типы контента содержат такие данные:

- Категории (categories);

- Метки (tags);

- Метаданные (postand metadata);

- Пользовательские таксономии (customtaxonomiesandterms);.



Рисунок 2.1 - Структурная схема БД

Также существуют типы контента, хранящиеся в другом виде:

- Виджеты (widgets);

- Пользователи (users);

- Опции (options);

- Нестандартный контент (hardcodedcontent), который добавляют некоторые темы/плагины;

- Сайты для MU WordPress;

- Сторонний контент (thirdpartycontent) (например RSS).

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

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

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

Рисунок 2.2 - Макет сайта

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

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

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

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

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

2.4 Разработка UI

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

Поскольку верстка слишком трудоемкая задача, то следует выбрать один из шаблонов, предоставляемых для WordPress. Один из сайтов [9] с шаблонами приведен на рисунке 2.3. На сайте есть широкий выбор типовых решении с возможностью поиска и фильтрации по макету дизайна. Также есть и платные шаблоны.

Рисунок 2.3 - Сайт с шаблонами



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

Рисунок 2.4 - Главная страница

Далее следует страница с статьями по психологии (рисунок 2.5). Они уже имеют рубрики и могут сортироваться по ним. У некоторых присутствуют и метки, по которым также можно осуществлять поиск.

Рисунок 2.5 - Страница со статьями

Щелкнув по любой статье, перенаправляет на ее адрес с возможностью полностью ознакомиться с ней и оставить комментарии (рисунок 2.6).



Рисунок 2.6 - Страница чтения статьи

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

3.1 Выбор хостинга и установка WordPress

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

Для проекта вполне подойдет бесплатный хостинг. Учитывая сказанное, стоит выбрать предложение от Beget. Он является одним из самых популярных и лучших на территории России [10]. Данный ресурс представляет гибкую ценовую политику, предоставляя каждому выбрать свои тарифный план согласно требованиям к функциональности и цене. При этом предусмотрен пробный 30- дневный бесплатный период на который предоставляется полная функциональность того или иного тарифа. Стоит отдельно отметить, что на бесплатном тарифе отсутствует вшитая реклама.

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

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

На главной странице Beget после успешного входа в интерфейс администратора находим иконку CMS и переходим по ней (рисунок 3.1).



Рисунок 3.1

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

Рисунок 3.2

Нажимаем на кнопку «Установить CMS!». Несомненным плюсом Begetявляется поддержка огромного числа CMS (рисунок 3.3).

Рисунок 3.3



Следующим шагом потребуется ввести логин администратора, пароль, электронную почту и название сайта (рисунок 3.4).

Рисунок 3.4

Через несколько минут сайт будет автоматически установлен и подготовлен к работе. Для доступа к панели администратора нужно к пути сайта приписать справа «/wp-admin», после чего откроется окно как на рисунке 3.5. В этой панели доступно управление всем ресурсом, в том числе плагинами, контентом и прочее.



Рисунок 3.5 - Страница администратора

3.2 Вебинары

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

· гибкая ценовая политика;

· наличие бесплатного тарифа;

· простой в освоении, дружелюбный интерфейс;

· широкий набор функционала.

Для регистрации на ресурсе необходимо ввести имя, фамилию, номер телефона, e-mail (рисунок 3.6).



Рисунок 3.6 - Окно регистрации

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

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



Рисунок 3.7 - Личный кабинет

Рисунок 3.8 - Настройка вебинара

Рисунок 3.9 - Управление трансляцией



3.3 Взаимодействие с социальными сетями

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

Вот поэтому так важно добавить взаимодействие нашего ресурса с соц. сетями. ДляэтогоподойдетплагиндляWordPressUltimateSocialMediaPLUS, полностью бесплатный плагин. Позволяет добавлять соц. сети и сопутствующие иконки на сайт(в частности, Facebook, Twitter, Email, RSS, Pinterest, Instagram, Google+, LinkedIn и т.д.). Присутствует широкий выбор дизайнов. Особенностями данного плагина являются:

· всплывающие окна (на всех или нескольких выбраных страницах) с просьбой подписаться или поделиться;

· подписка на сайт и автоматическое получение новых записей посредством электронной почты;

· кастомизация кнопок, анимация;

· различные способы взаимодействия с соц. сетью (подписка, репост статьи и т.д.).

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

Рисунок 3.10 - Кнопки плагина взаимодействия с соц. сетями

3.4 Обеспечение защиты web- сайта

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

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

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

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

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

Рассмотрим эти методы для разрабатываемого сайта:

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

2) Резервные копии. Резервные копии сайта необходимо делать регулярно в автоматическом режиме. И при возникновении проблемы будет возможность восстановить данные из копии.

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

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

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

6) Плагин. В WordPress имеется плагин «WordfenceSecurity», который обеспечивает защиту web-ресурса, все вышеперечисленное, а также ограничения по ip-адресу, делает невозможным отслеживание http заголовка, защищает каталоги от просмотра и много другое. Данный плагин обеспечивает защиту сайта от вирусов, проверяя файлы, и сразу предупреждает об опасности.

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

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

4.1 Методика тестирования

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

По ГОСТ Р ИСО МЭК 12207-99 в жизненном цикле программного обеспечения определены среди других дополнительных процессов верификации, аттестации, совместного анализа и аудита. Верификация является процессом определения того, что программные продукты работают в полном соответствии с условиями, выполненными в прошлых работах. Этот процесс может содержать анализ, проверку и тестирование. Процесс аттестации - это процесс установления полноты соответствия установленных условий, созданной системы или программного продукта их назначению. Операция совместного анализа - это процесс оценки состояний и, при возникновении необходимости, продуктов работ по проекту. Процесс аудита - это процесс определения соответствия условиям, планам и требованиям договора. В сумме эти операции и составляют тестирование [11].

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

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

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

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

Заполнение базы данных производилось ручным вводом.

Тестовые наборы были нацелены на обнаружение некорректного ввода данных.

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

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

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

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



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

В целом тестирование разрабатываемого web-ресурса состоит из тестирования отдельных модулей сайта.

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

Экспериментально определена средняя скорость загрузки страницы, она составляет 1.5 секунды.

При тестировании проекта сбоев не обнаружено.

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

Число одновременно работающих пользователей с базой данных mysql не ограничено.



5. РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

Данное руководство позволит освоить управление web- сайтом быстрее и проще.

5.1 Управление страницами

Для управления страницами ресурса необходимо сначала войти в меню администратора приписав в конце URL«/wp-admin». В получившемся окне ввести логин и пароль администратора. После успешного ввода перенаправит на страницу администратора. В меню слева выбрать «Страницы». В окне будет список из всех страниц сайта с возможностью добавить новую, изменить или удалить уже имеющиеся (рисунок 5.1).

Рисунок 5.1

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

Рисунок 5.2 - Редактирование страницы

5.2 Добавление и редактирование записей

Для редактирования и создания записей нужно войти в панель управления администратора как указано в предыдущем пункте. В появившемся окне навести курсор на панель «Записи». Нам откроется список всех статей с возможностью добавления и редактирования (рисунок 5.3).

Рисунок 5.3

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

Рисунок 5.4



ЗАКЛЮЧЕНИЕ

В настоящей ВКР реализован web- сайт, готовый к использованию.

Серверная часть была реализована при помощи CMS«WordPress», это позволило:

· сэкономить на реализации;

· удобство в управлении контентом;

· надежность и защита;

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

Front-endсоздана при помощи WordPress - шаблона, убрав необходимость в долгой и кропотливой верстке. Уже присутствует встроенная адаптивная верстка.

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

Облако меток реализовано через специальный плагин.

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



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

1. Домашняя страница сайта Павла Зыгмантовича[Электронный ресурс] - Режим доступа: http://zygmantovich.com.

2. Мамина карьера - сайт для мам о работе, карьере и любимом деле [Электронный ресурс] - Режим доступа:http://mamina-kariera.ru

3. Конструкторы сайтов: обзор 8 лучших сервисов со сравнительной таблицей [Электронный ресурс] - Режим доступа: https://texterra.ru/blog/konstruktory-saytov-obzor-8-luchshikh-servisov-so-sravnitelnoy-tablitsey.html

4. 10 причин почему стоит выбрать WordPress. Сайт о создании и продвижении сайтов [Электронный ресурс] - Режим доступа: http://createcmssite.ru/10-prichin-pochemu-stoit-vybrat-wordpress/

5. Невероятная статистика и факты о WordPress - Ваш сайт о WordPress [Электронный ресурс] - Режим доступа: http://wpnice.ru/neveroyatnaya-statistika-i-fakty-o-wordpress/

6. Тестирование популярных (и не очень) CMS - Хабрахабр[Электронный ресурс] - Режим доступа: https://habr.com/company/ffcms/blog/240829/

7. Mobile-firstIndexing [Электронныйресурс]: GoogleWebmaster Central Blog - Режимдоступа https://webmasters.googleblog.com/2016/11/mobile-first-indexing.html

8. Манипуляции пользователями сайта с помощью цветов [Электронный ресурс] - Режим доступа: https://habr.com/company/SECL_GROUP/blog/316938/

9. Русские шаблоны Wordpress [Электронный ресурс] - Режим доступа: http://wp-templates.ru

10. Рейтинг хостингов в России [Электронный ресурс] - Режим доступа: https://ru.hostings.info/hostings/country/russia

11. ГОСТ Р ИСО МЭК 12207-99. Процессы жизненного цикла программных средств[Электронный ресурс]. - Введ. 23.12.1999 // Бесплатная библиотека стандартов и нормативов. - Режим доступа: http://www.docload.ru/Basesdoc/38/38418/index.htm

Размещено на Allbest.ru

...