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



Оглавление

ВВЕДЕНИЕ

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

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

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

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

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

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. Обзор целевого сегмента

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

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

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

  1. Анализ занимаемой ниши

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

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

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

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

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

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

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

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

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

  1. Обзор средств разработки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. Обзор требованииweb- сервиса

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

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

  1. Стабильная работа без провисании при одновременном использовании как минимум 50 уникальных человек. Единственное требование, относящееся к стабильности и производительности. При росте популярности и посещаемости данная характеристика будет только увеличиваться. Следовательно, необходимо будет позаботиться об масштабируемости.
  2. Адаптивная верстка. Основная часть просмотра сайтов производиться с мобильных устройств, а именно планшетов, смартфоном. Следовательно, необходимостью стало наличие адаптива, что позволит комфортно пользоваться ресурсом.
  3. Простой светлый дизайн. Внешний вид играет очень важную роль при использовании чего- либо. Выбором дизайна занимаются специально обученные для этого творческие люди. Запоминающися удобный дизайн будет несомненным плюсом среди конкурентов.
  4. Использование социальных сетей. Соц. сети все сильнее и сильнее от года к году проникают в повседневную жизнь человека. Естественным желанием будет воспользоваться этими процессами себе на пользу, позволив взаимодействовать с сайтом без всяких дополнительных регистрации будь то подписка или оставление комментариев.
  5. Разбиение материала по рубрикам. Поиск нужного материала среди всего его обилия весьма сложное и утомительное занятие, что несомненно отпугнет от использования вашего ресурса. Разбиение по рубрикам ускорит время поиска необходмого материала.
  6. Облако меток. Еще одно средство для лучшей сортировки информации.
  7. Поисковые роботы. Одно из самых важных требовании для заказчика. Без этой опции при поисковых запросов ссылка на ваш ресурс не будет фигурировать среди ответа на запрос. Не важно какой у вас шедевральный дизайн с уникальной информацией и возможностями если никто банально не может его найти. Поэтому настройка ресурса для удобной выдаче в поисковых запросов является одной из самых важных задач.

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

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

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

  1. Коммерция. Реализация черезweb-ресурс своих товаров и услуг. Необходима правильная работа с контентом для более успешной выборки при запросах в поисковых ресурсах, удобный поиск, фильтрация товара, удобная оплата и т.д.
  2. Реклама. Рекламирование сторонних ресурсов, организации, товаров и услуг для различных целей, обычно ради получения прибыли. Высокие требования к внешнему виду, логотипу.
  3. Просветительская деятельность. Популяризация науки, развенчание ложных убеждении, мифов и прочее. Необходимо удобное использование ресурсом.
  4. Имидж. Создание и поддержание нужного образа организации, объединения. Важную роль играет дизайн сайта, логотип.

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

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

  1. Web- ресурс предназначен для расширения рынка сбыта услуг.
  2. Сайт необходим для повышения конкурентоспособности среди подобных поставщиков услуг.
  3. Улучшение репутации путем размещения бесплатных материалов.
  4. Рекламаweb-ресурса как платформы для психологической помощи.

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

  1. Использование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. Вебинары

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Mobile – first index

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

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

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

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

  1. Каковы наши цели — зачем мы делаем сайт? Как мы реализуем поставленные цели?
  2. Как сайт будет выглядеть и работать?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Однако стоит поним