Разработка Web-сервиса студии танцев

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

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

Введение

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

В качестве выпускной квалификационной работы (ВКР) мною была выбрана тема: «Разработка Web-сервиса студии танцев».

Актуальность работы обусловлена необходимостью создания информационного Web-сервиса студии танцев «Alisson», поскольку это позволяет компании заявить о себе в полном объеме, предоставить полную информацию о своих услугах и ценах, а также увеличить эффективность работы, привлечь большее количество клиентов и организовать дополнительную обратную связь.

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

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

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

Задачами ВКР являются:

? анализ предметной области,

? выбор технологий и средств для разработки Web-сервиса;

? разработка прототипа и структуры Web-сервиса;

? разработка Web-сервиса на основе выбранных средств и технологий и размещение в интернет.

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

1.1 Исследование предметной области

Объект исследования - студия танцев «Alisson». Основным направлением деятельности студии является обучение танцам по нескольким направлениям: pole acrobatic, pole-dance exotic, stretching, воздушное кольцо, воздушные полотна, twerk, йога в гамаках. Также студия занимается продажей одежды для занятий, имеется возможность заказать товар. Персонал студии включает в себя: 5 преподавателей, администратор. Студия занимает один зал, оборудованный 6-ю пилонами и 6-ю гамаками. На сегодняшний день в студии занимается 80 человек. Студия имеет персональные страницы в социальных сетях: Вконтакте и Instagram.

1.2. Требования к Web-сервису для студии танцев

Назначение Web-сервиса.

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

Целевая аудитория Web-сервиса.

Целевая аудитория Web-сервиса включает следующие основные группы пользователей:

? клиенты студии (действующие и потенциальные);

? сотрудники студии.

Основные цели и задачи Web-сервиса.

Цели Web-сервиса:

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

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

? Организовать оперативную обратную связь.

Web-сервис должен обеспечивать реализацию задач:

1. Информационная

Web-сервис должен предоставлять пользователям доступ к информации:

? Сведения о студии, направлениях, преподавателях, абонементах;

? Расписание;

? Новости студии;

? Каталог продукции;

? Фото/Видео галерея;

? Обратная связь.

2. Имиджевая.

Web-сервис является представительством студии в сети Интернет и должен:

? Увеличить посещаемость;

? Повысить имидж студии;

? Привлечь новых клиентов.

Требования к Web-сервису

Были проанализированы различные виды оформления Web-страниц и выработаны требования к оформлению и дизайну Web-сервиса:

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

? Основной фон Web-сервиса - белый, в элементах и блоках может использоваться любой из цветов, присутствующих в логотипе;

? Дизайн Web-сервиса должен выглядеть стильно, современно;

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

Требования к шрифтам, использующимся на страницах Web-сервиса:

? На страницах Web-сервиса должны быть использованы гарнитуры Open Sans для основного текста и Open Sans Condensed для заголовков;

? Размер шрифтов должен удобно восприниматься даже на маленьких размерах экранов.

Требования к отображению в браузерах

Web-сервис должен корректно отображаться в браузерах:

? Internet Explorer (версия 9.0 и выше);

? Opera (последних версий);

? Chrome (последних версий);

? Firefox (последних версий).

Требования к системе управления контентом

Система управления контентом Web-сервиса должна обеспечивать администратору сайта возможность выполнения функций:

? Изменение структуры сайта, добавление, редактирование и удаление страниц, разделов и элементов;

? Редактирование меню, отражающего структуру сайта;

? Визуальное редактирование текстового содержания страниц, включая таблицы и изображения (по аналогии с Microsoft Word);

? Загрузка документов, форматов Portable Document Files (*.pdf), Microsoft Word / Microsoft Excel (*.doc, *.docx,*.xls, *.xlsx);

? Работа с фото- и видео- галереей (создание разделов, загрузка фото/видео материалов);

? Вставка текста напрямую из Microsoft Word (включая автоматическую очистку от лишнего кода);

? Обработка изображений (редактирование превью, масштаба);

? Создание и изменение форм обратной связи с уведомлением по e-mail и возможностью изменений полей, контактов;

? Резервное копирования и восстановление данных;

? Автоматическая генерация URL для страниц сайта;

? Авторизация и разграничение прав доступа для управления Web-сервисом;

? Простота обучения работе с Web-сервисом новых админи-страторов студии;

? Надежное хранение данных.

Требования к отображению страниц:

? Страницы Web-сервиса должны иметь автоматическое масштабирование в зависимости от ширины рабочего поля браузера пользователя;

? Страницы Web-сервиса не должны растягиваться на весь экран по ширине.

Требования к контенту и наполнению.

Первичная разработка и верстка информационного содержимого Web-сервиса должна производиться Исполнителем вместе с Заказчиком. Заказчик предоставляет все необходимое Исполнителю текстовое содержимое и фотографии, а также рекомендации, относительно их содержимого, объема, представления и размещения.

Примечания к требованиям.

Верстка шаблона Web-сервиса должна быть выполнена по требованиям стандарта W3C, с использованием технологий - Bootstrap 3, HTML, CSS, jQuery.

В данном проекте не предусмотрены:

? Версия для мобильных устройств и планшетов;

? SEO оптимизация и продвижение в поисковых системах;

? Регистрация пользователей;

? Возможность оплаты, используя платежные системы.

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

То, что не оговорено или не относится к перечисленным требованиям, выполняется на усмотрение Исполнителя.

1.3 Выбор технологий и средств для разработки Web-сервиса

Для разработки прототипа на основе разработанного технического задания служат такие средства как: Axure RP Pro, Adobe Fireworks, MockupBuilder, Balsamiq и другие, которые представляют собой интерак-тивные приложения, онлайн сервисы и могут быть как платными, так и бесплатными. Из перечисленных средств был выбран MockupBuilder. MockupBuilder - это бесплатное Web-приложение для создания прототипа сайта или мобильного приложения. На данный момент оно включает около 300 шаблонов различных элементов, а также их экспорт в PDF и PNG, удобные «горячие клавиши», функцию группировки объектов, привязку их к сетке и другое. Исходя из этого, был выбран именно этоприложение для создания прототипа Web-сервиса.

В качестве редактора кода для разработки Web-сервиса решено использовать Notepad + + версии 7.2. Notepad + + является свободным текстовым редактором с открытым исходным кодом для Windows. Базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Windows API и распространяется под лицензией GNU General Public License.

Возможности Notepad + +:

? Подсветка синтаксиса;

? Сворачивание кода;

? Автодополнение и автоматическое закрытие скобок и тэгов (если активировано);

? Закладки;

? Регулярные выражения для поиска и замены;

? Запись и воспроизведение макросов;

? Сравнение файлов;

? Менеджер проектов;

? Карта документа;

? Переопределение любых горячих клавиш;

? Резервное копирование сохраняемых файлов (включается в настройках);

? Поддержка кодировок ANSI, UTF-8 и UCS-2;

? Блоковое выделение текста, одновременное выделение нескольких разных мест;

? Мультистрочное редактирование (с использованием Alt).

Система управления сайтом (CMS) - компьютерная программа или информационная система, которая используется для организации и обеспечения процесса по совместному созданию, управлению и редакти-рованию содержимого сайта. CMS могут быть ориентированы на решение конкретных задач (например, интернет магазины, форумы, блоги) или могут быть универсальными и предоставлять разработчикам удобную среду проектирования различных Web-ресурсов. На данный момент существует большое количество различных CMS: распространяющиеся на бесплатной основе (например, Joomla, WordPress, Drupal, MODx, OpenCart), полноценные коммерческие продукты (например, 1C-Битрикс, UMI.CMS, DataLife Engine, NetCat, HostCMS), самописные системы (например, частные разработки Web-студий, разработчиков).

Большинство современных CMS осуществляют генерацию HTML/XML-документов под управлением скриптового языка PHP - на стороне сервера и JavaScript - на стороне клиента (браузера).

Использование CMS для разработки Web-сервиса имеет следующие преимущества:

? возможность самостоятельного наполнения;

? возможность распределенного администрирования;

? структурированность информации;

? расширение возможностей с помощью готовых модулей;

? автономность.

Недостатками использования CMS является:

? плата за лицензию (при использовании платной CMS);

? удорожание разработки сайта;

? последующие доработки сайта, могут быть сопряжены с доработкой CMS;

? повышенная оплата хостинг-площадки;

? наличие уязвимостей;

? требовательность к ресурсам;

? низкий уровень безопасности (чаще для бесплатных CMS).

Для разработки данного проекта, было решено использовать CMS, поскольку это упростит администрирование и наполнение содержимым для администратора студии, который не имеет опыт в Web-разработке. Для данного Web-сервиса была выбрана система управления сайтом «1С-Битрикс: Управление сайтом».

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

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

Система управления 1С-Битрикс является коммерческой. В зависи-мости от состава модулей выделяют несколько редакций системы управления: Старт, Стандарт, Малый бизнес, Эксперт и Бизнес, которые соответственно различаются и ценой. Стоимость лицензии на данный момент - от 4 900 рублей (редакция Старт) до 48 900 рублей (редакция Бизнес). На одной лицензии могут быть реализованы два сайта с одной системой управления.

Преимуществами системы управления 1С-Битрикс являются:

? современный интуитивно понятный интерфейс, который содержит простую в использовании административную панель, а также адаптирован для смартфонов и планшетов;

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

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

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

1C-Битрикс включает в себя раздел Marketplace для обновления, как самой системы, так и модулей и решений сторонних разработчиков, используемых на проектах. Кроме обновления сторонних модулей так же возможна их установка. С помощью разработанных партнерами модулей и решений можно максимально быстро интегрировать различные функциональные возможности в систему, которые могут быть как платными, так и бесплатными (например, простые расширения, облегчающие работу сервисов сайта; модули со сложной интеграцией в другие системы, например, платежные и другие). Раздел Marketplace позволяет:

? установку обновлений системы Bitrix Framework;

? просмотр сторонних модулей, которые доступны для загрузки;

? загрузку и установку сторонних модулей;

? просмотр списка обновлений и загрузку обновлений.

Для реализации обратной связи было выбрано решение из Marketplace «Форма обратной связи - простой конструктор веб-форм». Возможности компонента:

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

2. Хранение всех сообщений в базе данных. Все сообщения отправляются на указанные e-mail адреса и сохраняются в соответствующих инфоблоках, что исключает потерю сообщений при сбое почтовой системы.

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

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

5. Защита от спама. Для неавторизованных посетителей по умолчанию выводится CAPTCHA, которая осложняет автоматическое заполнение Web-формы обратной связи спам-ботами. Если CAPTCHA нечеткая, тогда посетитель может запросить новое изображение CAPTCHA, кликнув по ссылке «обновить картинку». При этом будет сгенерировано новое изображение для CAPTCHA, а не новая CAPTCHA, что избавит посетителя от повторного ввода CAPTCHA (например, если была непонятна только последняя буква). На выбор имеется reCapthca от Google вместо стандартной CAPTCHA.

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

7. Загрузка Web-формы во всплывающем окне. В настройках компонента имеется возможность указания формы отображения обратной связи.

8. Разделение обращений по категориям. Эта функция позволяет реализовать автоматическое размещение сообщений в указанном пользователем разделе инфоблока.

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

Возможности Bootstrap 3:

? адаптивный дизайн - структура Web-страниц остаётся такой же, а масштабирование в зависимости от ширины экрана устройства выполняет фреймворк;

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

? современный дизайн элементов - подходит практически для любой схемы общего дизайна сайта;

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

? открытый исходный код - дает возможность менять любой компонент фреймворка под дизайн конкретной Web-страницы.

Для разработки данного Web-сервиса выбрана версия фреймворка - Bootstrap v3.1.1.

Интерактивная часть Web-сайтов реализуется с помощью библиотек JavaScript (например MooTools, jQuery, Prototype, Dojo). Одной из самых популярных из них является - jQuery, которая выбрана для реализации данного Web-сервиса, а именно плагины: Fancybox, Film Roll, jScrollPane, Mixitup, equal-heights. Рассмотрим предназначение и возможности каждой из них.

Fancybox - это jQuery плагин, предназначенный для создания фотогалерей и вывода другого контента в модальном окне. В отличие от других подобных плагинов Fancybox позволяет выводить в модальном окне не только изображения, но и видео, iframe, HTML и другой контент. Fancybox содержит ряд параметров для настройки отображения того или иного элемента страницы (режимы вывода картинок, виды подписей под картинками и другие). Для реализации данного Web-сервиса был использован плагин Fancybox версии 2.1.5.

FilmRoll - это легкая jQuery карусель (12 Кб), которая фокусируется на одном слайде, центрируя его в вид, независимо от относительных размеров элементов карусели.

Особенности FilmRoll:

? Центрирование элементов карусели;

? Наличие кнопок навигации и автоматической пагинации;

? Наличие авто прокрутки с паузой при наведении;

? Поддержка полного использования экранам

? Поддержка swipe-жестов, если TouchSwipe подключен.

Данный плагин необходим в данном Web-сервисе для реализации каруселей с видеозаписями на детальных страницах направлений студии танцев, а также карусели «Преподаватели» на главной странице.

MixItUp - плагин для библиотеки jQuery, который позволяет реализовать эффектную и анимированную фильтрацию контента по общим признакам. Имеет широкие функциональные возможности, но при этом очень простой в использовании и настройке. MixItUp поддерживает использование в адаптивных шаблонах и хорошо сочетается со структурой шаблона (может использовать процентное соотношение, медиа-запросы, строковые стили и плавающие блоки). Он хорошо подходит для работы с различным упорядоченным контентом: портфолио, галереи, блоги и другие, поэтому в данном Web-сервисе подключен для реализации раздела «Галерея».

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

EqualHeight - плагин jQuery для создания блоков одинаковой высоты. Применение данного плагина имеет ряд преимуществ:

? удобство использования - выравнивание блоков будет осущест-вляться всего лишь одной строчкой кода JavaScript;

? гибкость шаблона - скрипт использует свойство min-height, поэтому при изменении размера содержания блока (например, с помощью запроса AJAX) или окна браузера структура шаблона сохранится;

? производительность - плагин не требует никакой дополнительной разметки.

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

? PHP 5.3 - 7.0;

? Apache 1.3 и выше;

? MySQL 5.0 и выше.

Для размещения Web-сервиса был выбран хостинг Timeweb, который более 8-ми лет специализируется на предоставлении услуг хостинга для 1С-Битрикс и является одним из рекомендуемых хостинг-партнеров (наряду с Спринтхост, RedDock, Джихост, SpaceWeb и другими). Статус «Рекомендуемый хостинг-партнер» получают только те хостеры, тарифы которых стабильно дают хорошую производительность сайтам, разработанным на данной платформе.

CMS 1С-Битрикс использует для своей работы базы данных. Чаще всего это базы данных под управлением MySQL, в которых хранит пользовательскую информацию, а также информацию, обеспечивающую работу системы. Для создания любого проекта в 1С-Битрикс необходимо создать базу данных и пользователя этой базы. Timeweb имеет большие функциональные возможности для удобного управления базой данной, также имеется возможность редактирования файлов, Web-страниц. Для доступа к файлам есть файловый менеджер, а для доступа к редактированию базы данных есть раздел «phpmyadmin».

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

Таблица 1.1. Сравнение редакций продукта «1С-Битрикс: Управление сайтом»

	Первый сайт	Старт	Стандарт	Малый бизнес	Эксперт	Бизнес
Главный модуль	+	+	+	+	+	+
Управление структурой	+	+	+	+	+	+
Медиабиблиотека	+	+	+	+	+	+
Информационные блоки	2/2	+	+	+	+	+
Highload Инфоблоки		+	+	+	+	+
SEO-модуль		+	+	+	+	+
Поиск		+	+	+	+	+
Фотогалерея 2.0			+	+	+	+
База знаний (Wiki)					+	+
Реклама					+	+
Универсальные списки						+
Документооборот						+
Интернет-магазин				+		+
Конструктор отчетов						+
Торговый каталог				+		+
CRM				+		+
Валюты				+	+	+
Форум			+	+	+	+
Подписка, рассылки			+	+	+	+
Блоги			+	+	+	+
Веб-формы			+	+	+	+

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

· лицензию на создание двух сайтов;

· один год бесплатных обновлений;

· один год технической поддержки;

· программный продукт с открытыми исходными текстами PHP;

· поддержку баз данных MySQL.

2. Разработка структуры Web-сервиса

2.1 Структура сайта и навигация

Структура главного Меню

Главное меню располагается между шапкой сайта и контентом, имеет горизонтальный вид, содержит основные разделы Web-сервиса. Раздел, в котором находится на данный момент пользователь, выделяется активным пунктом в меню.

Общая структура Web-сервиса

Структура разделов Web-сервиса:

1. О студии:

? Новости;

? Преподаватели;

? Правила посещения;

2. Расписание;

3. Абонементы;

4. Каталог;

5. Галерея.

Дополнительные требования

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

2.2 Описание разделов Web-сервиса

Типовые страницы.

На главной странице должны отображаться:.

? Шапка - логотип, название студии, горизонтальное меню, телефон студии, ссылки на социальные сети;

? Блок с выводом всех направлений студии, со ссылками на детальную информацию о направлении и расписанием студии;

? Блоки вывода краткого содержания разделов со ссылками на соответствующие разделы:

- преподаватели;

- новости;

- расписание;

- фотогалерея;

- каталог продукции;

? Формы обратной связи: записаться на занятие, оставить отзыв;

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

Вторичные страницы Web-сервиса должны иметь дизайн, аналогичный главной странице и состоять из таких элементов как:

? Шапка - логотип, название студии, горизонтальное меню, телефон студии, ссылки на социальные сети;

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

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

2.3 Разработка прототипа Web-сервиса

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

Рис. 2.1 - Прототип главной страницы Web-Сервиса



Рис. 2.2 - Прототип вторичной страницы Web-Сервиса с правым меню

2.4 Проектирование структуры Web-сервиса

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

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

? разветвленная структура - структура, основанная на такой связи, при которой имеется возможность быстрого перемещения между Web-страницами, минуя некоторые промежуточные страницы (например, главную или страницы разделов);

? линейная структура - структура, страницы которой располагаются в определенном порядке и переход с одной страницы на другую строго определен.

Получив всю информацию о проекте, была сформирована следующая структура Web-сервиса:

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

? О студии - страница, содержащая верхнее меню, правое меню и информацию о студии, контакты;

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

_ Преподаватели - страница, содержащая верхнее и правое меню, а также информацию о всех преподавателях студии;

_ Правила посещения - страница, содержащая верхнее и правое меню, а также информацию о правилах посещения студии;

? Расписание - страница, содержащая верхнее меню и информацию о расписании занятий студии на текущий месяц, с возможностью перехода на предыдущий месяц;

? Абонементы - страница, содержащая верхнее меню и информацию обо всех абонементах студии;

? Каталог - страница, содержащая верхнее меню и каталог всей продукции, которую можно заказать или купить в студии с постраничной навигацией;

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

С помощью верхнего меню должен осуществляться переход на разделы:

? О студии;

? Расписание;

? Абонементы;

? Каталог;

? Галерея.

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

Рис. 2.3 - Иерархическая структура Web-сервиса

3 Реализация и дизайн страниц Web-сервиса

3.1 Верстка шаблонов для Web-сервиса

Разработанные прототипы страниц Web-сервиса, были согласованы и одобрены заказчиком, а впоследствии сверстаны (изображения сверстанных страниц показаны на рис. 3.1, 3.2 и 3.3) с помощью выбранного фреймворка Bootstrap.

Шаблон в 1С-Битрикс представляет собой набор php-файлов, файлов стилей, изображений, а также шаблонов компонентов. Механизм управления шаблонами, в данной CMS, позволяет создавать несколько шаблонов и подключать их для разных разделов, страниц и компонентов, а также позволяет создавать зависимость шаблона от группы, к которой относится данный пользователь, или от параметра в URL. Все имеющиеся шаблоны располагаются в папке /bitrix/templates/ и могут применяться как к одному, так и к нескольким сайтам.

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

Таблица 3.1. Условия применения шаблонов

Шаблон	Сортировка	Тип условия	Условие
404	1	Выражение PHP	defined('ERROR_404') && ERROR_404 == 'Y'
Главный шаблон	2	Для папки или файла	/index.php
Вторичные страницы	3	[без условия]	<без условия>



Рис. 3.1 - Сверстанная главная страница Web-сервиса



Рис. 3.2 - Сверстанная вторичная страница Web-сервиса, на примере страницы «Абонементы»

Рис. 3.3 - Сверстанная страница ошибки Web-сервиса

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

3.2 Интеграция верстки в CMS 1С - Битрикс

Для упрощения управления элементами и содержимым Web-сервиса через режим правки, необходимо его подготовить и адаптировать для системы 1С-Битрикс.

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

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

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

<?$APPLICATION->IncludeComponent(

"bitrix:main.include",

"",

Array(

"AREA_FILE_SHOW" => "page", // область будет являться включаемой только для текущей страницы

"AREA_FILE_SUFFIX" => "inc", // суффикс, который будет добавляться к именам файлов включаемых областей

"EDIT_TEMPLATE" => "", // шаблон области по умолчанию

"PATH" => "" //Путь к файлу

)

);?>

Кроме включаемой области в шаблонах данного проекта подключены компоненты:

1. Шаблон главной страницы:

· Меню (bitrix:menu) - для вывода главного меню, код вызова компонента для отображения главного меню:

<?$APPLICATION->IncludeComponent(

"bitrix:menu",

"top-menu",

array(

"ROOT_MENU_TYPE" => "top",

"MAX_LEVEL" => "1",

"CHILD_MENU_TYPE" => "top",

"USE_EXT" => "Y",

"DELAY" => "N",

"ALLOW_MULTI_SELECT" => "N",

"MENU_CACHE_TYPE" => "A",

"MENU_CACHE_TIME" => "36000000",

"MENU_CACHE_USE_GROUPS" => "N",

"MENU_CACHE_GET_VARS" => array(),

"COMPONENT_TEMPLATE" => "top-menu",

"COMPOSITE_FRAME_MODE" => "A",

"COMPOSITE_FRAME_TYPE" => "AUTO",

"CACHE_SELECTED_ITEMS" => "N",

),

false

);?>

· Новости (bitrix:news) - для вывода блока направлений студии;

· Список новостей (bitrix:news.list) - для вывода блоков новостей студии, расписания, фотогалереи, отзывов;

· Форма обратной связи (altasib:feedback.form) - для вывода всплывающей формы обратной связи, код вызова компонента представлен в листинге 1 приложения A;

· Элементы раздела (bitrix:catalog.section) - для вывода блоков тренеров студии, продукции;

· Яндекс.Карты: настраиваемая карта (bitrix:map.yandex.view)-для вывода карты в подвале сайта, код вызова компонента:

<?$APPLICATION->IncludeComponent(

"bitrix:map.yandex.view",

"",

Array(

"CONTROLS" => array("ZOOM","TYPECONTROL","SCALELINE"),

"INIT_MAP_TYPE" => "MAP",

"MAP_DATA" => "a:4:{s:10:\"yandex_lat\";d:53.21457657742938;s:10:\"yandex_lon\";d:50.20630086508177;s:12:\"yandex_scale\";i:14;s:10:\"PLACEMARKS\";a:1:{i:0;a:3:{s:3:\"LON\";d:50.206075559524514;s:3:\"LAT\";d:53.21134349127089;s:4:\"TEXT\";s:53:\"Самара, ул.Антонова-Овсеенко 53а, 5 этаж, кабинет 505\";}}}",

"MAP_HEIGHT" => "200px",

"MAP_ID" => "",

"MAP_WIDTH" => "100%",

"OPTIONS" => array("ENABLE_DBLCLICK_ZOOM","ENABLE_DRAGGING")

)

);?>

2. Шаблон вторичных страниц:

· Меню (bitrix:menu) - в области шаблона сайта для вывода главного и правого меню;

· Навигационная цепочка (bitrix:breadcrumb) - в области шаблона сайта для вывода цепочки навигации, код вызова компонента:

<?$APPLICATION->IncludeComponent("bitrix:breadcrumb", "breadcrumb", Array(

"PATH" => "",// Путь, для которого будет построена навигационная цепочка (по умолчанию, текущий путь)

"SITE_ID" => "s1",

"START_FROM" => "0",// Номер пункта, начиная с которого будет построена навигационная цепочка

),

false

);?>

· Яндекс.Карты: настраиваемая карта (bitrix:map.yandex.view)-для вывода карты в подвале сайта.

Также компоненты подключены на страницах сайта:

· страница Новости - компонент Новости (bitrix:news) - для вывода новостей студии;

· страница Преподаватели - компонент Новости (bitrix:news) - для вывода преподавателей студии;

· страница Расписание - компонент Календарь (bitrix:news.calendar) - для вывода расписания студии, код вызова компонента:

<?$APPLICATION->IncludeComponent(

"bitrix:news.calendar",

"page-raspisanie",

array(

"AJAX_MODE" => "N",

"AJAX_OPTION_ADDITIONAL" => "",

"AJAX_OPTION_HISTORY" => "N",

"AJAX_OPTION_JUMP" => "N",

"AJAX_OPTION_STYLE" => "Y",

"CACHE_TIME" => "36000000",

"CACHE_TYPE" => "A",

"DATE_FIELD" => "DATE_ACTIVE_FROM",

"DETAIL_URL" => "",

"IBLOCK_ID" => "8",

"IBLOCK_TYPE" => "classes",

"MONTH_VAR_NAME" => "month",

"NEWS_COUNT" => "0",

"SET_TITLE" => "Y",

"SHOW_CURRENT_DATE" => "Y",

"SHOW_MONTH_LIST" => "N",

"SHOW_TIME" => "Y",

"SHOW_YEAR" => "N",

"TITLE_LEN" => "0",

"TYPE" => "NEWS",

"WEEK_START" => "1",

"YEAR_VAR_NAME" => "year",

"COMPONENT_TEMPLATE" => "page-raspisanie",

"FILTER_NAME" => "",

"LIST_URL" => ""

),

false

);?>

А также компонент Форма обратной связи (altasib:feedback.form) - для вывода всплывающей формы обратной связи;

· страница Абонементы - компонент Элементы раздела (bitrix:catalog.section) для вывода абонементов студии, код вызова компонента представлен в листинге 4 приложения A, а также компонент Форма обратной связи (altasib:feedback.form) - для вывода всплывающей формы обратной связи;

· страница Каталог - компонент Умный фильтр (bitrix:catalog.smart.filter) для вывода фильтра по продукции, код вызова компонента:

<?$APPLICATION->IncludeComponent(

"bitrix:catalog.smart.filter",

"production-filter",

Array(

"CACHE_GROUPS" => "N",

"CACHE_TIME" => "36000000",

"CACHE_TYPE" => "A",

"COMPONENT_TEMPLATE" => "production-filter",

"COMPOSITE_FRAME_MODE" => "A",

"COMPOSITE_FRAME_TYPE" => "AUTO",

"DISPLAY_ELEMENT_COUNT" => "Y",

"FILTER_NAME" => "arrFilter",

"FILTER_VIEW_MODE" => "vertical",

"IBLOCK_ID" => "6",

"IBLOCK_TYPE" => "classes",

"PAGER_PARAMS_NAME" => "arrPager",

"POPUP_POSITION" => "left",

"SAVE_IN_SESSION" => "N",

"SECTION_CODE" => "",

"SECTION_CODE_PATH" => "",

"SECTION_DESCRIPTION" => "-",

"SECTION_ID" => $_REQUEST["SECTION_ID"],

"SECTION_TITLE" => "-",

"SEF_MODE" => "Y",

"SEF_RULE" => "",

"SMART_FILTER_PATH" => "",

"TEMPLATE_THEME" => "blue",

"XML_EXPORT" => "N"

)

);?>

Компонент Список новостей (bitrix:news.list) -для вывода продукции, код вызова компонента представлен в листинге 3 приложения A, а также компонент Форма обратной связи (altasib:feedback.form) -для вывода всплывающей формы обратной связи;

· страница Галерея - компонент Фотогалерея (bitrix:photo) для вывода фотографий студии.

3.3 Реализация информационных блоков

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

· Alisson (для совокупности инфоблоков объединяющих информацию о студии);

· Обратная связь (для совокупности инфоблоков объединяющих информацию о поступающих заявках);

· Клиенты студии (для совокупности инфоблоков объединяющих информацию о клиентах).

Каждый тип информационных блоков включает в себя список информационных блоков. Так тип информационного блока Alisson, представленный на рис. 3.4 и включает в себя инфоблоки:

? Расписание;

? Абонементы;

? Одежда для Pole-dance;

? Отзывы;

? Фотогалерея;

? Новости;

? Преподаватели;

? Направления.

Рис. 3.4 - Структура информационного блока Alisson

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

? Sportswear-заявки;

? Отзывы;

? Заявка на абонемент;

? Запись на занятие.

Рис. 3.5 - структура информационного блока Обратная связь

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

В таблице 3.2 представлены дополнительные свойства инфоблоков Web-сервиса.

Таблица 3.2. Свойства информационных блоков Web-сервиса

Название свойства	Тип	Множественность	Код свойства
Тип информационного блока Alisson
Информационный блок Абонементы
Направления	Привязка к элементам информационного блока Направления	Да	CLASSES
Стоимость	Число	Нет	PRICE
Информационный блок Направления
Преподаватель	Привязка к элементам информационного блока Преподаватели	Нет	TRAINER
Время тренировок	Строка	Да	TRAINING
Видеозаписи	Файл	Да	VIDEO
Информационный блок Одежда для Pole-dance
Стоимость	Строка	Нет	PRICE
Фотографии	Файл	Да	MORE_PHOTO
Наличие	Список со значениями: #на заказ, #в наличии	Нет	AVAIL
Тип	Список со значениями: Топ, Шорты, Лосины, Свитшот, Футболка, Боди, Комбинезон	Нет	TYPE
На главной	Список со значениями: Да	Нет	MAIN
Новинка	Список со значениями: Да	Нет	NEW
Информационный блок Преподаватели
Направления	Привязка к элементам информационного блока Направления	Да	CLASSES
Новинка	Список со значениями: Да	Нет	NEW
Страница в Контакте	Строка	Нет	VKPAGE
Страница в Инстаграме	Строка	Нет	INSTPAGE
Информационный блок Расписание
Кол-во мест на занятии	Число	Нет	PKGS
Записавшиеся ученики	Привязка к элементам информационного блока Клиенты студии	Да	BRON
Страница в Инстаграме	Строка	Нет	INSTPAGE
Тип информационного блока Обратная связь
Информационный блок Sportswear-заявки
ФИО	Строка	Нет	FIO
Телефон	Строка	Нет	PHONE
Электронный адрес	Строка	Нет	EMAIL
Размер	Список со значениями: XS, S, M	Нет	SIZE
Комментарий	HTML/Текст	Нет	KOMMENT
Информационный блок Запись на занятие
ФИО	Строка	Нет	FIO
Телефон	Строка	Нет	PHONE
Электронный адрес	Строка	Нет	EMAIL
Направление	Список со значениями: Pole-dance acrobatic, Pole-dance exotic, Pole fitness, Stretching, Twerk, Воздушное кольцо, Воздушные полотна, Йога в гамаках	Нет	CLASS
Дата	Дата/Время	Нет	DATE
Информационный блок Заявка на абонемент
ФИО	Строка	Нет	FIO
Телефон	Строка	Нет	PHONE
Электронный адрес	Строка	Нет	EMAIL
Тип абонемента	Строка	Нет	ABONEMENT
Информационный блок Отзывы
ФИО	Строка	Нет	FIO
Телефон	Строка	Нет	PHONE
Электронный адрес	Строка	Нет	EMAIL
Отзыв	HTML/Текст	Нет	REVIEW

3.4 Реализация обратной связи

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

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

На рис. 3.6 показаны параметры компонента:

Рис. 3.6 - Параметры компонента обратной связи для формы «Отзывы»

Описание элементов настройки компонента:

? Шаблон компонента - отвечает за внешний вид формы обратной связи, доступны несколько стандартных шаблонов, для данного Web-ресурса был создан новый шаблон «feedback».

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

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

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

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

? Дополнительные E-mail получателей почтовых уведомлений (через запятую) - указывает адреса, на которые будут отправляться сообщения, отправленные с данной Web-формы. По умолчанию письма отправляются только на адрес, указанный в настройках сайта в поле «E-mail администратора сайта (отправитель по умолчанию)».

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

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

? Использовать CAPTCHA - вывод защиты от спам-ботов автоматического заполнения Web-форм. По умолчанию - включено. Для авторизированных пользователей CAPTCHA не выводится.

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

? Убирать форму после отправки сообщения - указывает на скрытие формы после отправки сообщения посетителем, (останется только текст, сообщающий об успешной отправке).

? Раздел «внешний вид» - установка размеров и цветов для элементов Web-формы.

? Раздел «Управление режимом AJAX» - включение режима AJAX, для отправки формы без перезагрузки страницы.

Для данного Web-сервиса были разработаны 4 формы обратной связи:

? Sportswear-заявки;

? Отзывы;

? Заявка на абонемент;

? Запись на занятие.

Тип почтового события «ALX_FEEDBACK_FORM» был создан автоматически при установке решения, в котором указаны:

? название - Форма обратной связи;

? описание - #TEXT_MESSAGE# - текст сообщения, #EDIT_URL# - ссылка на элемент инфоблока.

К нему привязан почтовый шаблон «ALX_FEEDBACK_FORM», в котором указаны: привязка к сайту, e-mail отправителя и получателя, тема и текст почтового шаблона.

Для указания E-mail адресов отправителя и получателя, а также темы и содержания почтового шаблона имеется возможность использования переменных, обрамленных символом #. Эти переменные будут заменены на переданные значения при создании почтового события.

Все почтовые шаблоны по умолчанию могут использовать переменные:

? #TEXT_MESSAGE# - текст сообщения;

? #EDIT_URL# - ссылка на элемент инфоблока;

? #DEFAULT_EMAIL_FROM# - E-Mail адрес по умолчанию (устанавливается в настройках);

? #SITE_NAME# - Название сайта (устанавливается в настройках);

? #SERVER_NAME# - URL сервера (устанавливается в настройках).

3.5 Реализация интерактивной части сайта

Подключение Java скриптов реализовано в шаблонах дизайна сайта, а также в шаблонах компонентов. В header.php шаблонов скрипты подключаются с помощью метода $APPLICATION->AddHeadScript(). Ниже приведен код подключения скриптов в шаблоне главной страницы:

<?

$APPLICATION->AddHeadScript('/js/jquery.film_roll.min.js');

$APPLICATION->AddHeadScript('/js/jquery.jscrollpane.min.js');

$APPLICATION->ShowHeadStrings(); // отображение специальных стилей JavaScript

$APPLICATION->ShowHeadScripts();// вывод служебных скриптов

?>

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

Конфигурации для инициализации FilmRoll хранятся в скрипте, расположенном в соответствующем компоненте:

<script type="text/javascript">

jQuery(function() {

var film_roll = new FilmRoll({

configure_load: true,

container: '#video-roll',

height: 330,

shuttle_width:1,

scroll:true,

pager:false,

});

});

</script type="text/javascript">

Скрипт для инициализации jScrollPane:

<script type="text/javascript">

jQuery(function()

{

jQuery('.scroll-pane').jScrollPane();

}

);

</script>

Скрипт для инициализации MixItUp:

<script type="text/javascript">

$(function(){

$('#Container').mixItUp();

});

</script>

3.6 Реализация Web-сервиса и тестирование

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

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

Рис. 3.7 - Шапка Web-сервиса студии танцев «Alisson»

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

Шапка страниц, как и подвал, представленный на рис. 3.8, идентичны для всех страниц Web-сервиса.

Рис. 3.8 - Подвал Web-сервиса студии танцев «Alisson»

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

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

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



Рис. 3.9 - Рабочая область детальной страницы направления Web-сервиса

Контентная часть страниц Преподаватели, Новости, Расписание, Абонементы, Каталог, Галерея представлена на рис. 3.10, 3.11, 3.12, 3.13, 3.14, 3.15 соответственно.

Рис. 3.10 - Контентная область страницы Преподаватели Web-сервиса



Рис. 3.11 - Контентная область страницы Новости Web-сервиса

Рис. 3.12 - Контентная область страницы Расписание Web-сервиса

Рис. 3.13 - Контентная область страницы Абонементы Web-сервиса



Рис. 3.14 - Контентная область страницы Каталог Web-сервиса

Рис. 3.15 - Контентная область страницы Галерея Web-сервиса

Тестирование разработанного Web-сервиса было проведено на основе следующих параметров:

· Орфографические ошибки;

· Некорректные или нерабочие ссылки;

· Нелогично расположенный, неоформленный контент;

· Деформированные таблицы, "съехавшие" блоки;

· Проблемы в верстке: несоответствие внешнего вида сайта в разных браузерах;

· Отсутствие иллюстраций, проблемы в отображении картинок;

· Ошибки в отображении раскрывающегося меню;

· Нерабочие сценарии на языке JavaScript.

Также было протестировано отображение Web-сервиса на устройствах разной ширины: в мобильном браузере на смартфоне, планшете. На рис.3.16, для примера, показано изменение шапки в зависимости от ширины экрана, реализованное на основе сетки Bootstrap, а в частности медиа-запросов.

Рис. 3.16- Отображение адаптивности шапки сайта Web-сервиса

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

Заключение

В ходе выполнения ВКР поставленная цель была достигнута и решены следующие задачи:

? проанализирована предметная область, технологии и средства для разработки Web-сервиса;

? разработан прототип и структура Web-сервиса;

? разработан Web-сервис при помощи выбранных средств и технологий, на основе требований ТЗ.

В результате выполнения ВКР была осуществлена разработка Web-сервиса для студии танцев «Alisson» на основе системы «1С - Битрикс: Управление сайтом». В процессе выполнения работы была спроектирована и реализована структура хранения данных Web-сервиса, спроектирована и реализована структура страниц, отвечающая всем требованиям заказчика, разработаны формы для обратной связи. С помощью разработанного Web-сервиса, его посетители смогут получать достоверную информацию о студии, а администраторы смогут редактировать информацию по мере необходимости и получать поступающие заявки.

Для проверки работы Web-сервиса было проведено:

? функциональное тестирование,

? тестирование верстки (расположение элементов, проверка на кроссбраузерность).