Разработка пользовательского интерфейса для спортивного Интернет-портала (комплексная ВКР в рамках конкурса "IT-ПЛАНЕТА": "Решение социально значимых задач с помощью простых ИТ-СИСТЕМ")

Ростовский П.В.

Разработка пользовательского интерфейса для спортивного Интернет-портала (комплексная ВКР в рамках конкурса "IT-ПЛАНЕТА": "Решение социально значимых задач с помощью простых ИТ-СИСТЕМ")

Выпускная квалификационная работа 09.03.03. Прикладная информатика

Информатика

Дипломы

Вуз: Белгородский государственный университет - национальный исследовательский университет (НИУ «БелГУ»)

ID: 5a4031ae7966e104c6a3e7ee

UUID: 3c952e20-cb2c-0135-7235-525400005860

Язык: Русский

Опубликовано: почти 7 лет назад

Просмотры: 51

Ростовский П.В.

Источник: Белгородский государственный университет - национальный исследовательский университет (НИУ «БелГУ»)

Комментировать 0

Рецензировать 0

Скачать - 3,3 МБ

Поделиться работой

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ» ( Н И У « Б е л Г У » ) ИНСТИТУТ ИНЖЕНЕРНЫХ ТЕХНОЛОГИЙ И ЕСТЕСТВЕННЫХ НАУК Кафедра прикладной информатики и информационных технологий РАЗРАБОТКА ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ДЛЯ СПОРТИВНОГО ИНТЕРНЕТПОРТАЛА (КОМПЛЕКСНАЯ ВКР В РАМКАХ КОНКУРСА «IT-ПЛАНЕТА»: «РЕШЕНИЕ СОЦИАЛЬНО ЗНАЧИМЫХ ЗАДАЧ С ПОМОЩЬЮ ПРОСТЫХ ИТ-СИСТЕМ») Выпускная квалификационная работа студента очной формы обучения направления подготовки 09.03.03 «Прикладная информатика» 4 курса группы 07001205 Ростовского Павла Владимировича Научный руководитель к.т.н., доцент Маматов Е.М. БЕЛГОРОД 2016

СОДЕРЖАНИЕ ВВЕДЕНИЕ .............................................................................................................. 3 1 АНАЛИТИЧЕСКАЯ ЧАСТЬ .............................................................................. 6 1.1 Анализ предметной области ............................................................................ 6 1.2 Характеристика предметной области ............................................................. 7 1.3 Постановка задачи............................................................................................. 8 1.4 Обоснование необходимости и цели создания ............................................ 10 1.5 Анализ других порталов данной отрасли .................................................... 10 1.6 Общая характеристика процесса создания интернет портала .................... 15 1.7 Выбор политики рекламы интернет-портала при его размещении в сети Интернет ................................................................................................................ 16 2 ОБОСНОВАНИЕ ВЫБОРА ОСНОВНЫХ ПРОЕКТНЫХ РЕШЕНИЙ ....... 20 2.1 Обоснование проектных решений по техническому обеспечению ........... 20 2.2 Обоснование проектных решений по информационному обеспечению .. 25 2.3 Обоснование выбора программных средств ................................................ 27 3 ИНФОРМАЦИОННОЕ ОБЕСПЕЧЕНИЕ ЗАДАЧИ ..................................... 31 2

3.1 Информационная модель и ее описание ...................................................... 31 3.2 Программное обеспечение задачи ................................................................. 34 3.2.1 Пользовательская карта сайта..................................................................... 34 3.2.2 Структура интернет-портала....................................................................... 35 3.2.3 Описание программных компонентов ....................................................... 36 3.2.4 Разработка элемента интерфейса «Слайдер» ............................................ 38 3.2.5 Разработка интерфейса пользователя ........................................................ 40 3.2.6 Разработка основных элементов интерфейса ............................................ 42 3.3 Описание контрольного примера реализации проекта .............................. 46 3.4 Информационный портал на различных социальных платформ .............. 54 3.5 Оценка затрат при реализации проекта ....................................................... 57 3.5.1 Определение затрат при создании интернет-портала .............................. 57 3.5.2 Расходы на оплату труда разработчика ..................................................... 57 3.5.3 Расчет трудоемкости создания программного продукта ......................... 57 3.5.4 Расчет затрат по всем стадиям разработки программы ........................... 59 3.5.5 Расчет зарплаты разработчика .................................................................... 61 3.5.6 Затраты на оплату машинного времени ..................................................... 62 ЗАКЛЮЧЕНИЕ ..................................................................................................... 66 СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ ................................................. 68 ПРИЛОЖЕНИЕ А ................................................................................................. 73 ПРИЛОЖЕНИЕ Б .................................................................................................. 86 3

ВВЕДЕНИЕ В наше время Интернет является главным источником получения необходимой информации. Интернет делает Всемирную Сеть хранилищем информации, содержащим данные. В связи с этим сеть, проектируемая как средство обмена информацией, представляет интерес для широкого круга пользователей. Интернет выступает как популярное средство массовой информации, а создание сайтов – значительный инструмент, необходимый для решения маркетинговых стратегий, действующих наиболее эффективно с позиции финансовой привлекательности, технических и рекламных возможностей мировой сети. Автоматизация проникла во все области нашей жизни, позволяя быстрее находить необходимую информацию, принимать решения, экономить время и энергию на важные для нас дела. Автоматизация также коснулась и всех институтов государства: образования, медицины, ЖКХ, государственных услуг, а теперь еще и спорта. Государство всерьез озаботилось воспитанием здоровой нации, здоровый образ жизни стало 4

гораздо проще поддерживать с удобными мобильными приложениями и интернет-ресурсами, а теперь это еще и интересно. В данной выпускной квалификационной работе (ВКР) рассматривается разработка интерфейса взаимодействия пользователя и спортивного интернет портала, где будут отражены сведения о спортивных площадках, календаре мероприятий, официальных нормативах и многом другом. Каждый житель страны сможет получить полезные советы от профессионалов, узнать больше о подборе амуниции и правильном питании, записать ребёнка в секцию, а также открыть свой личный кабинет, где будет отображаться информация о его личных успехах. В ходе выполнения работы предстоит найти и изучить специализированные нормативные акты, разработать интернет-портал с необходимым функционалом и наполнить его правильным контентом. Актуальность исследования заключается в том, что в процессе создания интернет портала «Заплыв», будут применены современные инструменты применением и технологии в разработке клиент-серверной адаптивных технологии. Так же веб-сайтов с актуальность исследования заключается в самой тематической составляющей ресурса, спорт и оздоровления нации сегодня это одно из основных направлений политики государства. Объектом исследования является разрабатываемый информационный портал «Заплыв». Предметом исследования является разработка пользовательского интерфейса для спортивного интернет-портала «Заплыв». Целью выпускной квалификационной работы является разработка пользовательского программной интерфейса частью для спортивного взаимодействия интернет портала, пользователя посвященному плаванию с применением клиент – серверной технологии. Для достижения поставленной цели поставлены следующие задачи: − изучить предметные области в сфере разработки интерфейсов; 5 с

 определить технические и программные средства для разработки интерфейса интернет-портала «Заплыв»;  разработать пользовательский интерфейс для интернет-портала «Заплыв»;  разработать элементы интерфейса интернет-портала «Заплыв»;  разработать стратегию продвижения ресурса;  протестировать интернет-портал «Заплыв». Структура выпускной квалификационной работы состоит из: введения, 3 раздела, заключение, список использованной литературы и приложения. Во введении указана цель и определены все задачи. В первой главе представлена характеристика предметной области. Представлено обоснование и цели создания ресурса, описана постановка задачи, проанализированы веб-сайта схожей тематики, а также проанализирована политика рекламы интернет-портала при его дальнейшем размещении в сети. Во второй главе обоснован выбор технического, программного и информационного обеспечения для решения поставленных задач, а также обоснован выбор программных средств. В третьей главе осуществляется практическая реализация задач. Представлен процесс разработки портала в виде информационных моделей, рассмотрен процесс создания элементов интерфейса, описан контрольный пример реализации проекта, представлена реализация рекламы ресурса на социальных платформах, рассмотрена целесообразность проекта с экономической точки зрения. В заключении приведены основные выводы. Пояснительная записка в ВКР написана на 62 стр, содержит 35 рисунков, 2 таблицы, 14 формул, 2 приложения. 6

1. АНАЛИТИЧЕСКАЯ ЧАСТЬ 1.1 Анализ предметной области «Анализ предметной области – это первый шаг этапа системного анализа, с которого начинается разработка». Предметная область в рамках данной ВКР заключается в разработке программного интерфейса для информационного портала «Заплыв». Интерфейс - в широком смысле слова, это способ (стандарт) взаимодействия между объектами. Интерфейс в техническом смысле слова задаёт параметры, процедуры и характеристики взаимодействия объектов. Различают: Интерфейс пользователя - набор методов взаимодействия компьютерной программы и пользователя этой программы. Программный интерфейс - набор методов для взаимодействия между программами. Физический интерфейс - способ взаимодействия физических устройств. Чаще всего речь идёт о компьютерных портах. Пользовательский интерфейс - это совокупность программных и аппаратных средств, обеспечивающих взаимодействие пользователя с компьютером. Основу такого взаимодействия составляют диалоги. Под диалогом в данном случае понимают регламентированный обмен информацией между человеком и компьютером, осуществляемый в реальном масштабе времени и направленный на совместное решение конкретной задачи. Каждый диалог состоит из отдельных процессов ввода / вывода, которые физически обеспечивают связь пользователя и компьютера. Веб-интерфейс — это совокупность средств, при помощи которых пользователь взаимодействует с веб-сайтом или любым другим приложением через браузер. Веб-интерфейсы получили широкое распространение в связи с 8

ростом популярности всемирной паутины и соответственно — повсеместного распространения веб-браузеров. Одним из основных требований к веб-интерфейсам является их одинаковый внешний вид и одинаковая функциональность при работе в различных браузерах. 1.2 Характеристика предметной области Портал предоставляющая – это доступ программная к инфраструктура релевантным для информационным Web, активам интеллектуальным и человеческим активам путем выборки по целевой аудитории, предоставляемыми с высокой степенью персонализации. С точки зрения конечного пользователя портал представляет собой набор Web-страниц, на каждой из которых размещены портлеты. Портлеты – это независимые Web-приложения, каждое из которых отображается на портальной странице в виде маленького окна. Заголовок окна содержит иконку, название портлета и управляющие кнопки. Окно портлета можно сворачивать, растягивать на весь экран и возвращать в стандартное состояние путем нажатия на соответствующую управляющую кнопку в его заголовке. Главная цель портала — это концентрация информации в рамках одного Интернет-ресурса. Как следствие, главное достоинство — возможность ускорить принятие решения, на основании информации, предоставляемой порталом. Интернет-порталы принято подразделять на горизонтальные и вертикальные. Горизонтальные порталы ориентированы на максимально широкую аудиторию, предлагают разноплановый контент и имеют большой набор разнообразных сервисов. Как правило, они выстраиваются вокруг поисковых систем. 9

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

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

1.4 Обоснование необходимости и цели создания В последнее время в нашей стране проводится множество спортивных мероприятий мирового уровня: Олимпиада в Сочи, Универсиада в Казани и другие, под которые возводится большое количество новых объектов. У простых обывателей до сих пор остаются вопросы о том, как и где можно заниматься спортом на любительском уровне, какие нормативы выполнить, чтобы получить спортивный разряд и что из себя представляет загадочная аббревиатура «ГТО». При наличии сайта можно увеличить круг заинтересованных в занятии спортом, ведь основной целью создания портала является упрощение процесса поиска полезной информации. Это дает возможность снизить проблематичность поиска желаемого спорта, а также сделать информацию общедоступной в обширных кругах. Для развития и продвижения любительского спорта возникла идея разработать интернет-портал, где будут отражены сведения о спортивных площадках, календаре мероприятий, официальных нормативах и многом другом. Каждый житель страны сможет получить полезные советы от профессионалов, узнать больше о подборе амуниции и правильном питании, записать ребёнка в секцию, а также открыть свой личный кабинет, где будет отображаться информация о его личных успехах. 1.5 Анализ других интернет порталов данной отрасли Интернет-портал спортивной тематики можно определить, как мультимедийный навигатор по водноспортивным мероприятиям и спортивной жизни региона, специально разработан для актуализации и продвижения здорового образа жизни путем актуализации данной темы в рамках портала и сети Интернет. Интернет-портал является сайтом, 12

позволяющим легко получить доступ ко всей водноспортивной жизни региона. Спортивный интернет-портал должен включать в себя основные три части: − Новостная лента - информация, в которой представлена актуальные события из спортивной жизни региона. − Список проходящих мероприятий - в эту часть входит информация о всех проходящих спортивных мероприятиях в регионе и требования к участникам. − Возможность общаться с другими пользователями интернет- портала. Существует много аспектов в улучшении конверсии сайта за счет удобства пользования, но основное правило всех сайтов, а особенно интернет-порталов - сайт должен быть интуитивно понятным и максимально простым для клиента. Результат проведенных анализов спортивных интернет-порталов, таких как, sport.ru, sport-express.ru, championat.com, kubsport.ru разбит по ряду показателей: 1) Интуитивность. При создании любого интернет-портала всегда стоит помнить про важное "правило трёх кликов" - сайт должен быть создан таким образом, чтобы посетитель попал на любую страницу сайта с текущей, использовав не более трех нажатия мышкой. Интернет-портал «sport.ru» имеет лаконичную структуру. «Легкость» страницы хорошо воспринимается визуально, не отвлекаю от основного блока с информацией. Но интерфейс ресурса выглядит с избытком просто и имеет цветовую гамму не приемлемую для долгого нахождении на сайте. Фрагмент веб-сайта «sport.ru» представлен на рисунке 1.1. Интернет-портал «championat.com» имеет не совсем понятную структуру, с первого раза сложно сориентироваться на странице. Большая 13

часть информации, на главной странице, предоставляется в виде текста, что делает общую картину портала плохо визуально воспринимаемой; Фрагмент веб-сайта «championat.com» представлен на рисунке 1.2. Рисунок – 1.1 Фрагмент веб-сайта «sport.ru» Рисунок – 1.2 Фрагмент веб-сайта «championat.com» Интернет-портал «sport-express.ru». имеет структуру в которой сложно сориентироваться с первого раза, главная страница очень избыточна информацией, юзабилити сайта на среднем уровне; Фрагмент веб-сайта «sport-express.ru» представлен на рисунке 1.3. Интернет-портал «kubsport.ru» имеет структуру которая интуитивно понятна, компоненты, на странице, располагаются не нарушая юзабилити, но 14

информация слишком избыточна, переполняет страницу, из-за этого возникает проблема с концентрацией внимания на том или ином событии; Фрагмент веб-сайта «kubsport.ru» представлен на рисунке 1.4. Рисунок 1.3 - Фрагмент веб-сайта «sport-express.ru» Рисунок 1.4 - Фрагмент веб-сайта «kubsport.ru» 2) Дизайн. Грамотный дизайн должен состоять из правильного оформления страниц сайта, из качественного шаблона с возможностью его редактирования, из системы управления медиа файлами (изображениями, музыкой, видео или анимацией). 15

− приятен sport.ru. Дизайн проект в цветовой гамме минималистичен, глазу, не вызывает раздражительности, возбужденности, графические элементы выполнены качественно; − championat.com. Данный интернет-портал имеет хорошо подобранную цветовую гамму, графические элементы качественные; − sport-express.ru. Проект «Спорт-Экспресс» для своего дизайна выбрал черную и белую цветовую гамму, что не отвлекает от основного контента страницы; − kubsport.ru. Цветовая гамма страницы почти вся имеет белый оттенок, данный подход не выделяет основных моментов страницы. 3) Удобная навигация. Включает в себя понятную строку навигации и удобный поиск: «sport.ru», «sport-express.ru», «championat.com», «kubsport.ru». У всех рассмотренных порталов структурирована навигация, доступна, но у каждого интернет-портала своя степень разрозненности информации в навигации. Все анализируемые интернет-порталы предоставляют всю вышеописанную информацию в полном объеме, за исключением проектов, sport-express.ru и kubsport.ru, в которых информация о событиях недостаточна. С точки зрения реализации проектируемый спортивный интернетпортал будет отличаться, от существующих проектов, рядом особенностей, в число которых входит: − Адаптивный web-дизайн – это дизайн страницы интернет- портала, обеспечивающий хорошее отображение сайта на различных устройствах, будь то ПК, планшетный компьютер или смартфон. − Эргономичности или юзабилити, т.е. удобство и простота использования интернет-портала. Страницы интерет-портала не загромождены большими объемами всевозможной информацией, блоки с информацией расположены таким образом, чтобы пользователь не входил в заблуждение, не терялся на страницах. 16

− Цветовая гамма дизайна интернет-портала выполнена в спокойных тонах. Как известно, каждый цвет влияет на человека по-разному. 1.6 Общая характеристика процесса создания интернет-портала Процесс разработки портала можно разделить на следующие этапы: − определение целей веб-сайта и его позиционирование − создание дизайн-макета веб-сайта − верстка разработанного макета − программирование − наполнение текстами и изображениями − тестирование сайта на соответствие техническому заданию публикация готового проекта в интернете. На этапе определения целей необходимо определить, для чего нужен сайт, какие задачи он должен решать: многосторонне осветить какую-либо сторону человеческой деятельности, провести рекламную или маркетинговую кампанию. На стадии проектирования макета дизайнер в специальной графической программе создает дизайн страниц будущего веб-сайта с прорисовкой всех графических и текстовых элементов. После того, как проектирование дизайн-макета окончено за работу принимается верстальщик – это тот человек, который переводит дизайнмакет на язык, понятный компьютеру с использованием HTML. Говоря о визуальном представлении веб-сайта, нельзя не остановиться на таком моменте, как различия между фиксированными и резиновыми сайтами. Фиксированный дизайн сайта предполагает одну единую ширину сайта для всех разрешений экрана и для любой ширины окна. Такое построение сайта позволяет четко управлять композицией сайта и 17

однозначно знать, пользователей, но на разных экранах композиция сайта будет непредсказуемой. На этапе программирования происходит создание всех страниц сайта, определяется порядок работы меню, расставляются гиперссылки, создается динамика на сайте, программируются такие составляющие, как гостевая книга, форум, новостная лента и проч. Если сайт должен иметь администраторский интерфейс, то он создается именно на этапе программирования. Тестирование можно осуществить как до, так и после размещения сайта по его «родному» адресу. На этом этапе выявляются все ошибки и недочеты в программировании и написании текстов. Срок тестирования зависит от сложности проекта, но, как правило, не превышает одного месяца. 1.7 Анализ политики рекламы интернет-портала при его размещении в Интернет В наши дни существует огромное количество всевозможных интернет ресурсов и в связи с этим на этом рынке возникла очень высокая конкуренция, и уже стало естественным, что каждому интернет проекту необходимо завоевать популярность в лице интернет пользователей. «Для привлечения посетителей мало купить запоминающееся доменное имя, разместить интернет-портал на качественном хостинге и заполнить его полезной информацией. Необходимо провести комплексную и качественную раскрутку проекта». [38] «Условно все способы раскрутки можно отнести к внутренней или внешней оптимизации. Не стоит думать, что внутренняя оптимизация интернет-портала менее важна или принесет меньше пользы, чем раскрутка посредством внешних ресурсов. Как раз напротив, если относиться к ней легкомысленно, то внешняя оптимизация интернет-портала не даст желаемых результатов». [38] 18

Правильная внутренняя оптимизация, качество материалов интернетпортала — 50% успеха. Интернет-портал должен соответствовать таким характеристикам, как: − качественный, полезный и интересный потребителю контент; − поисковая оптимизация страниц, четкая и простая структура; − понятная пользователю навигация; − валидный код; − оптимальный и качественный дизайн. Все страницы интернет-портала необходимо оптимизировать под поисковые запросы, которые устанавливаются заранее. Забыв об этой важной части продвижения, можно обречь проект на невидимость для целевой аудитории, приходящей с поисковых систем. Отсутствие такой оптимизации ухудшит поведенческие показатели интернет-портала, что сразу же негативно отразится на продвижении. Правильная структура и понятная навигация — это качественно разработанная схема размещения информации. Не секрет, что пользователь, попавший на интуитивно непонятный интернет-портал, тут же уйдет с него на другой ресурс. Поведение поисковых машин ничем не отличается. Эффективность внешней оптимизации основана на хорошо организованной внутренней оптимизации. Не рекомендуется закупать или договариваться о бесплатных ссылках, не закончив внутреннюю оптимизацию сайта. Только это позволит достичь максимального эффекта от каждой ссылки. Под внешней оптимизацией подразумевается получение разного рода ссылок на страницы, продвигаемого интернет-портала. «В настоящее время существует несколько способов получения сторонних ссылок на продвигаемый интернет-портал. Приобретать их можно как платно, так и бесплатно. Существует одно правило продвижения ссылками: покупать их следует регулярно, а не от случая к случаю, причем увеличивая ссылочную массу каждой очередной закупки. Делать это нужно 19

постепенно, а не покупать много ссылок разом, особенно для юного, стартового проекта». [38] Помимо ссылок понадобится регистрация сайта в бесплатных каталогах как тематических, так и около тематических. Практически каждая поисковая система также имеет регистрационную форму. Заполнить ее крайне необходимо. Необходимо добавить интернет-портал в каталоги Яндекс, Google, Rambler, Mail и пр. Только после этого проект будет проиндексирован поисковыми системами и станет появляться в результатах поиска. Также можно воспользоваться социальными сетями для продвижения интернет-портала. Данный способ раскрутки, в последнее время, набирает огромные обороты. Этот вид продвижения еще называют «Оптимизация интернет-портала под социальные сети». Раскрутка проекта через социальные сети подразумевает под собой привлечение трафика на интернетпортал из социальных сетей (Facebook, ВКонтакте и других социальных сетей) [35]. Создавая группу в социальной сети, дает 2 основных преимущества. 1) Социальная сеть содержит в себе огромное количество аудитории заинтересованной в получении информации; 2) Социальная сеть может существовать как платформа для общения людей, так-как форумы, как отдельный продукт, теряют свою акутальность. Социальные сети дают много возможностей, в связи с этим не нужно использовать такие утрачивающие актуальность виды реклама как спам. Люди целенаправленно заходят в группы, подписываются на новости и процент вышедших участников из таких групп ничтожно мал.»[35] Что дает продвижение сайта в социальных сетях: 1) оказывает положительное влияние на позиции в поисковых системах; 2) дает возможность получить еще больше целевых посетителей на сайт; 20

3) повышает узнаваемость сайта/бренда. Почему выгодно раскручивать сайт через социальные сети: 1) аудитория социальных сетей огромна; 2) лавинообразное распространение контента; «Сегодня наибольшим потенциалом обладают: ВКонтакте, Twitter, Facebook и Youtube». [35] В данном разделе была проанализирована предметная область, дана характеристика предметной области, также были проанализированы существующие спортивным ресурсы на предмет интуитивности интерфейса и ряд других факторов. Данный методические раздел позволил материалы для получить дальнейшей необходимые знания работы созданием над и пользовательского интерфейса для спортивного интернет-портала «Заплыв». 21

2 ОБОСНОВАНИЕ ВЫБОРА ОСНОВНЫХ ПРОЕКТНЫХ РЕШЕНИЙ 2.1 Обоснование проектных решений по техническому обеспечению «Техническое обеспечение (ТО) - это совокупность технических средств, компьютерной техники, с помощью которой выполняют сбор, хранение, обработку, преобразование и передачу данных, связанных с объектом проектирования». [39] Технические средства включают: − персональный компьютер или сервер с выходом в сеть Интернет; − линии связи, устройства передачи данных; − устройства сетевого уровня, такие как маршрутизатор; − внешние накопители данных, т.е. жесткие диски, флэш- накопители. При подборе технического обеспечения необходимо руководствоваться рядом таких характеристик, как, надежность, простота в использовании, стоимостные затраты, производительность и т.п. Для того чтобы можно было достичь поставленной цели, необходимо, также руководствоваться рядом наиболее важных критериев при выборе компьютера. Сюда входит: − тактовая частота процессора; − оперативная память; − разрешение монитора; − объем жесткого диска; − операционная система; Процессор- основной элемент компьютера. обладает способностью выполнять программное обеспечение. 22 команды, Именно процессор которые составляют

Одним из основных компонентов компьютера, позволяющим ему нормально функционировать, является память. Под внутренней памятью понимают оперативную память и кэш-память - это место хранения информации, с которой работает в данный момент компьютер. Для эффективного использования компьютер приходится оборудовать множеством устройств и программ. Если компьютеров много, каждый из них комплектовать отдельно слишком дорого, можно все ресурсы использовать совместно, связав компьютеры между собой в сеть. − монитор: Acer; − клавиатура: Genius; − мышь: Logitech; − процессор: Intel Core i5-3250; − ОЗУ: 4 ГБ; − жесткий диск: 250 Гб; − дополнительный жесткий диск: 1000 ГБ; − ОС: Windows 7 x64. Для достижения заданной целей по созданию интренет-портала «Заплыв», необходимо использовать различное ПО. планируется использование ряда программных средств, таких как, , AllFusion Process Modeler r7, AllFusion Erwin Data Modeler, FileZilla, Nottepad++, phpMyAdmin 4.0.9, Apache 2.4.7, Adobe Photoshop CS6, Microsoft Visio. А так же браузеры: Mozilla Firefox, Google Chrome, Opera, Safari, Internet Explorer. Для данной ВКР была выбрана модель проектирования MVC. Аббревиатура MVC означает «Model-View-Controller» или же «МодельПредставление-Контроллер» иначе говоря – это подход проектирования вебприложений, при использовании которого, весь код разделяется на три отдельных компонента, модель, представление и контроллер таким образом, чтобы модификация одного из компонентов оказывала минимальное воздействие на остальные. Контроллер в MVC обрабатывает поступающие запросы и на каждый такой запрос определенным образом отвечает. В 23

модели описывается вся бизнес-логика приложения. Представление - это элемент, отвечающий за вывод данных в нужном виде [14]. Большая гибкость веб-приложения на MVC и является самым главным плюсом к его использованию, а именно: − небольшую часть веб-приложения проще писать, так как можно сконцентрироваться на конкретных задачах, которые эта часть решает; − часть веб-приложения может быть полностью или частично изменена, при этом не нужно изменять другие части; − часть веб-приложения удобнее тестировать, чем все веб- приложение вместе; Для хранения данных проектируется и разрабатывается реляционная база данных, которая удовлетворяет таким требованиям, как целостность данных, безопасное хранение данных, минимизация ошибок, минимизация избыточности, отсутствие аномалий удаления, изменения, добавления. Для написания интернет-портала спортивной тематики будет применяться ряд языков и методов разработки, таких как: − php; − javascript; − html; − css; Также для создания Интернет-портала использовались такие технологии как: − фреймверк Yii; − фреймверк Bootstrap. Yii – это фреймворк написанный на языке PHP. Главным плюсом Yii является отличная поддержка ООП, скорость работы и техническая поддержка от разработчиков. Фреймворк включает в себя большой набор библиотек, которые помогают в создании полноценного веб приложения отвечающего всем современным стандартам. Это достигается благодаря использованию интегрированных решений, таких как: Ajax. Так же плюсом 24

является встроенная поддержка интернационализации приложения, и простой инструмент работы с базой данных. Одним из самых главных преимуществ фреймверка Yii заключается в том, что он оптимизирует php код таким образом , что код сам по себе становиться короче в отличии если бы код писался бы с использованием других инструментов. Yii является бесплатным программным обеспечением и распостраняется под лицензией «new BSD». К числу возможностей данного фреймверка можно отнести: − Высокая производительность относительно других фреймворков, Парадигма Модель-представление-контроллер − Интерфейсы DAO и ActiveRecord для работы с базами данных − Поддержка интернационализации − Кэширование страниц и отдельных фрагментов − Перехват и обработка ошибок − Ввод и валидация форм − Аутентификация и авторизация − Использование AJAX и интеграция с jQuery − Генерация (PDO) базового PHP-кода для CRUD-операций (скаффолдинг) − Возможность подключения сторонних библиотек − Миграции базы данных − Автоматическое тестирование − Поддержка REST Данная технология позволяет в значительной степени упростить процесс создания веб-ресурса в связи своей доступностью, простотой и технической документацией позволяющий разобраться во всех нюансах технологии. Для создания самого интерфейса был выбран основным инструментом фреймверк Twitter Bootstrap. 25

Twitter Bootstrap это один из лучких фреймворк для создания современных, кросс-браузерных и стандартизованных интерфейсов. Данный фреймверк поддерживает все современные языки, а структура кода HTML, JavaScript и CSS предоставляет возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта. Bootstrap использует современные возможности HTML и CSS. Все шаблоны Bootstrap являются адаптивными, что обеспечивает верное отображение веб-сайта на всех устройствах. Основные инструменты Bootstrap: 4) Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 90px относится к классу «.span2», который может использоваться в CSS описании документа; 5) Шаблоны — фиксированный или резиновый шаблон документа; 6) Типографика — описания шрифтов, определение некоторых классов для шрифтов таких как код, цитаты и т.п.; 7) Медиа — представляет возможности управления изображениями и видео; 8) Таблицы — средства оформления таблиц, вплоть до добавления функциональности для обеспечения возможности сортировки; 9) Формы — классы для оформления не только форм, но и некоторых событий происходящих с ними; 10) Навигация — классы оформления для вкладок, страниц, меню и панелей инструментов; 11) Алерты — оформление диалоговых окон, подсказок и всплывающих окон. К основным преимуществом фреймверка Bootstrap можно отнести: 1) Высокая скорость — динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке; 26

Гармоничный дизайн — все компоненты платформы Bootstrap 2) используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом; Простота в использовании — платформа проста в использовании, 3) пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap; Совместимость с браузерами — Twitter Bootstrap совместим с 4) Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer, Microsoft Edge и Opera; Открытое программное обеспечение — особенность Twitter 5) Bootstrap, которая предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки. 2.2 Обоснование проектных решений по информационному обеспечению Информационное обеспечение (ИО) — важнейший элемент ИС и ИТ предназначено для отражения информации, характеризующей состояние управляемого объекта и являющейся основой для принятия управленческих решений. Информационное обеспечение включает совокупность единой системы показателей, потоков информации - вариантов организации документооборота; систем классификации и кодирования экономической информации, унифицированную систему документации и различные информационные массивы (файлы), хранящиеся в машине и на машинных носителях и имеющие различную степень организации. В ходе разработки ИО ИС определяются состав показателей, необходимых для решения экономических временные задач различных характеристики и функций управления, информационные связи. их объемно- Составляются различные классификаторы и коды, определяется состав входных и 27

выходных документов по каждой задаче, ведется организация информационного фонда, определяется состав базы данных. «Различные информационные массивы (файлы), хранящиеся в машине и на машинных носителях и имеющие различную степень организации» [20]. Информационное обеспечение ИС можно использовать как эффективное средство для выполнения следующих задач: — представлять информацию в системе однозначно и экономично (с помощью кодирования объектов); — организовывать процедуры анализа и обработки данных, учитывая характер связей между объектами; — дать возможность пользователям взаимодействовать с системой (используя экранные формы ввода-вывода); — обеспечивать активное использование данных в разрезе управления работой объекта, который необходимо автоматизировать. Информационное обеспечение ИС состоит из двух комплексов в немашинного и внутри машинного. Внемашинное информационное обеспечение, включающее в себя классификаторы технической и экономической информации, документы, методическую информацию. «Внутримашинное информационное обеспечение, состоящее из экранных форм для ввода начальных данных в ЭВМ или вывода результативной информации, структуры информационной базы». [6] Информационная база представляет собой определенный массив данных, который сформирован определенным способом. Данная база является одной из главных частей информационного обеспечения. «Информационная база находится в оперативной памяти компьютера в виде данных, удовлетворяющих информационным потребностям процессов. Моделирование данных является средством формирования баз данных. Целью моделирования данных является обеспечение разработчика 28

ИС концептуальной схемой базы данных в виде одной модели или нескольких отдельных моделей, относительно просто отображающихся в любую систему баз данных. Диаграммы «сущность-связь» (ERD)- распространенный инструмент моделирования данных.»[5] 2.3 Обоснование выбора программных средств Начальным этапом в разработке интерфейса для интернет портала «Заплыв» является разработка плана разработки для выполняемой задачи. Для успешного начала работы и дальнейшего процесса разработки необходимо полностью разработать план процессов для дальнейшей реализации. Такая структуризированная часть разработки является неотъемлемым этапом разработки как всего веб-сайт, так и отдельных его частей, таких как разработка интерфейса. Провести разработку оптимизированной структуры процееса создания можно с помощью средства системного анализа AllFusion Process Modeler r7. «AllFusion Process Modeler r7 – это мощное средство системного анализа деятельности целой компании или отдельного подразделения. Рассматриваемое средство может помочь повысить конкурентоспособность, оптимизировать и улучшить процессы управления, в результате использования данного средства можно добиться немалых результатов, а именно выявить лишние и бесполезные процессы, снизить затраты, повысить гибкость и эффективности всей деятельности компании». [24] «Программное средство AllFusion ERwin Data Modeler позволяет проектировать, документировать и сопровождать базу данных» [24]. Создав наглядный план реализации задачи, можно в конечном итоге оптимизировать все этапы до начала процесса создания, что сэкономит в дальнейшим силы для других задач. Визуальное моделирование повышает создаваемого проекта, продуктивность и качество его разработки. 29 качество

В следующей стадии наступает этап разработка интерфейса интернетпортала. Этот этап подразделяется: − создание основных уникальных элементов ресурса; − выбор и утверждение цветовой гаммы ресурса; − создание сетки основных страниц ресурса; − разработка макета страниц; − разработка интерфейса мультимедийных элементов ресурса; − создание главной страницы; − создание внутренних страниц; − исправление замечаний и доработка до законченного вида. На данной стадии основным инструментом будет являться графический редактор. Одним из самых распространенным графическим редактором является Adobe Photoshop. Adobe Photoshop самый распространенный и многофункциональный графический редактор, который имеет массу плагинов и инструментов разработанный для создания растровой графики любого уровня и применения. В связи с этим был выбран именно этот графический редактор. «Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известным продуктом фирмы Adobe».[13] Основные возможности Adobe Photoshop: − Поддержка большинства растровых и некоторых векторных графических. форматов − Наличие всех необходимых инструментов для рисования и редактирования изображений. − Поддержка цветовых моделей RGB, LAB, CMYK, Градации серого, Черно-белое, Duotone, Indexed, Multichannel. 30

− Глубина цвета изображений: 8 бит, 16 бит, 32 бита. − Специальные инструменты для создания меню DVD. − Поддержка графических планшетов. − В расширенной версии программы (Adobe Photoshop Extended) можно открывать и редактировать трехмерные модели. − Широкие возможности для анимации. − Работа со скриптами. − Огромный набор фильтров. Функционала данного ПО вполне достаточно чтобы создать всю растровую составляющую данного интернет-портала. Для создания кода элементов была использована программа Nottepad++. «Notepad++ — свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Поддерживает открытие более 100 форматов. Базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Windows API и распространяется под лицензией GNU General Public License. Базовая функциональность программы может быть расширена как за счёт плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры».[12] Основные возможности ПО: − Подсветка синтаксиса; − Сворачивание кода; − Автодополнение и автоматическое закрытие скобок и тэгов; − Регулярные выражения для поиска и замены; − Запись и воспроизведение макросов; − Карта документа; − Переопределение любых горячих клавиш; − Резервное копирование сохраняемых файлов; 31

− Блоковое выделение текста, одновременное выделение нескольких разных мест; − Мультистрочное редактирование. Также возможности программы возможно увеличивать с помощью огромного количества существующих плагинов. В качестве FTP-клиента было выбрано ПО «FileZilla». FileZilla — это свободный многоязычный FTP-клиент с открытым исходным кодом для Microsoft Windows, Mac OS X и Linux. Он поддерживает FTP, SFTP, и FTPS (FTP через SSL/TLS) и имеет настраиваемый интерфейс с поддержкой смены тем оформления. Оснащен возможностью перетаскивания объектов, синхронизацией директории и поиском на удаленном сервере. Поддерживает многопоточную загрузку файлов, а также докачку при обрыве интернет-соединения. На 16 июля 2014 года он являлся десятым в списке самых популярных программ SourceForge.net. Также существует FileZilla Server — проект, родственный FileZilla Client. Это — FTP-сервер, разрабатываемый той же организацией. Он поддерживает FTP и FTPS (FTP через SSL/TLS). В данной главе были определены и обоснованы проектные решения по техническому и информационному обеспечению. Были выбраны среды для разработок тех или иных объектов и определен список ПО, которое будет использовано при создании пользовательского интерфейса для интернетпортала «Заплыв». 32

3 ИНФОРМАЦИОННОЕ ОБЕСПЕЧЕНИЕ ЗАДАЧИ 3.1 Информационная модель и ее описание Важным этапом в проектировании автоматизированной системы является построение информационной модели. Информационная модель — модель объекта, представленная в виде информации, описывающей существенные для данного рассмотрения параметры и переменные величины объекта, связи между ними, входы и выходы объекта и позволяющая путём подачи на модель информации об изменениях входных величин моделировать возможные состояния объекта [6]. На рисунке 3.1 представлена диаграмма процесса разработки спортивного интернет портала. М ет одические мат ериалы Уст ав ФП РФ Требования конкурса Спорт и вный инт ернет порт ал "zaplyv 31.ru" Разработ ка спорт ивного инт ернет порт ала Информация о водных видах спорт а 0р. 0 Команда разработ чи ков Программные проду кт ы Рисунок 3.1 - Контекстная модель процесса разработки спортивного интернет портала 33

Для построения модели бизнес-процессов организации была выбрана методология IDEF0. Методология предполагает наличие следующих видов связей: — Вход; — Выход; — Механизм; — Управление. Декомпозиция процесса разработки спортивного портала представлена на рисунке 3.2. Рисунок 3.2 – Декомпозиция процесса разработки интернет-портала Следующим процессом, который необходимо рассмотреть, является блок «Разработка интернет-портала», описывающий общий процесс создания Web-страниц интернет ресурса. Декомпозиция процесса показана на рисунке 3.3. 34

Рисунок 3.3 – Декомпозиция процесса разработки интернет портала Далее рассмотрим процесс разработки представлений. Данный процесс является основным в рамках данной ВКР и описывает процесс создания пользовательского интерфейса для интернет-портала «Заплыв». На рисунке 3.4 представлена декомпозиция процесса разработки представлений. Рисунок 3.4 - Декомпозиция процесса разработки представлений 35

3.2 Программное обеспечение задачи 3.2.1 Пользовательская карта сайта «Структура сайта — основа для выстраивания последовательности и формы отображения имеющихся данных на сайте. При правильной структуре сайта пользователям максимально удобно переходить от одной странички к другой и изучать необходимые для них сведения». [32] Существуют следующие виды структуры сайта: − Линейная структура. Если материал выстраивается в логическую цепочку, образуется линейная структура. Линейная цепочка обязана иметь начало и конец. Начинать просмотр сайта с середины обычно лишено смысла. − Древовидная структура – самая популярная структура, которая подходит для всех видов сайта. Содержимое каждой страницы кроме первой входит в виде подраздела в страницу более высокого уровня. − Линейная с ответвлениями — структура, при которой возможны переходы с основного «пути» просмотра сайта по отдельным ветвям. Это удобно, когда необходимо направлять пользователей по определенным страницам, при этом можно на отдельных участках вкладывать более детальную информацию и при желании туда отправляться. − навигации Решетчатая сайта, структура. когда между Основана на вертикальными построении и системы горизонтальными страницами имеется взаимная связь и возможность быстрого перехода с одной страницы на другую без необходимости посещения промежуточных страниц. Подобная структура приводит к излишнему увеличению гиперссылок и применение её ограничено для сайтов с большим количеством страниц». [8] 36

Для организации работы интернет портала используется язык программирования PHP, а для организации интерфейса используется язык гипертекстовой разметки и каскадные таблицы стилей. 3.2.2 Структура интернет-портала Перед тем как разрабатывать интернет-портал нужно определиться с его структурой и разработать ее. Структура интернет- портала – это систематизированость и взаимодействие всех частей интернет ресурса, т.е. это то, из чего состоит интернет портал, его части, и как они взаимодействуют между собой. Физическая структура интернет-ресурса состоит из данных, которые содержит в себе: − каталоги, в которых хранятся файлы; − файлы. Под файлами подразумеваются: скрипты (php, js и другие), web-страницы (html-файлы), таблицы стилей (css), изображения и все необходимое для работоспособности ресурса. На рисунке 3.5 изображена физическая структура интернет-портала. Рисунок 3.5 – Физическая структура интернет-портала Рисунок обычной структуры 37

На рисунке 3.6 представлена структура интернет-портала. Рисунок 3.6 – Структура интернет-портала 3.2.3 Описание программных модулей Каждый интернет ресурс состоит из модулей, под модулями подразумевается скрипты и программные части кода, которые используются на страницах web-ресурса. Основная задача таких модулей- расширить функционал интернет-ресурса и обеспечить максимальный комфорт и простоту использования ресурса. В интернет-портале существует 11 программных модулей. Рассмотрим функции каждого компонента более подробно. Модуль «Управление сайтом» - создан для администраторов ресурса и включает в себя создание, редактирование и удаление страниц. Каждый администратор, совершая вход со своей учетной записи способен воспользоваться той или иной функцией администрирования. Модуль авторизации в свою очередь позволяет пользователю войти в свой профиль и быть полноценным пользователем ресурса, подразумевает полный доступ к сайту на уровне администратора. 38 что

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

развития сайта остается возможным вставка любого другого недостающего модуля. 3.2.4 Разработка элемента интерфейса «Слайдер» Одна из наиболее важных проблем в современном мире для вебпроектировщиков является отображение большого количества информации и контента на маленьких площадях информации. Но существует несколько способов решения данной проблемы и один из них является такой инструмент как контент-слайдер. Контент-слайдер- это специальный элемент в web-дизайне, который представляет собой блок определенных геометрических размеров в шапке web-страницы или в любом другом месте. Основная его задача, заключается в демонстрации текстового или растрового контента. Демонстрация может проходить как в ручном, так и в автоматическом режиме. Так же демонстрация может включать различные эффекты переходов от одного слайда к другому. Для создания слайдера были выбраны такие языки как: java и css. Процесс создания элемента состоял из пяти этапов: 1) Создание кода элемента; 2) Создание кода для управления элементом; 3) Создание стилей для элемента; 4) Создание анимации слайдера; 5) Загрузка контента для слайдера. Данный слайдер и элементы его управления представлены на рисунке 3.7. 40

Рисунок 3.7 – Контент-слайдер Сам контент слайдера был создан с помощью программы Adobe Photoshop CS6 и отвечает всем стилистическим требованиям и сочетается с той web-страницей, на которой находится. Контент несет в себе информационную нагрузку также соответствующую с темой основного сайта. Так же сами изображения являются ссылками на тот или иной материал интернет ресурса. Каждое изображение имеет свой водяной знак в виде логотипа интернет портала. На следующих рисунках 3.8 и 3.9, представлен использованный в слайдере. Рисунок 3.8 – Пример изображения слайдера 41 контент

Рисунок 3.9 – Пример изображения слайдера Созданный слайдер может всегда сохранять свою актуальность благодаря возможности добавления новой информации. Данный элемент представлен на рисунке 3.10 Рисунок 3.10 – Фрагмент слайдера на главной странице 3.2.5 Разработка интерфейса пользователя Web-интерфейс – это совокупность специальных средств, с помощью которых клиент может взаимодействовать с интернет-порталом через браузер. «Проектирование интерфейса — очень важный этап создания сайта. Без интерфейса невозможно начинать верстку и программирование».[12] Интерфейс должен соответствовать следующим правилам: 42

− Доходчивость. − Лаконичность. − Узнаваемость. − Восприимчивость. − Последовательность. − Привлекательность. − Эффективность. − Классовость. «Структура сайта, созданного с помощью фреймворка bootstrap, содержит следующие основные компоненты: — шаблон, который является представлением сайта пользователям; — компоненты, задачей который является вывод данных; — страница, элемент структуры сайта; Страница представляет PHP файл, структурированный из пролога, тела страницы (основной рабочей области) и эпилога. — header; — workarea; — footer. Верхняя – header, включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Основная рабочая область – workarea. Рабочая область страницы, в которой размещаются собственно информационные материалы сайта. Нижняя – footer, включает в себя, как правило, статическую информацию (контактная информация, сведения об авторе и владельце сайта и так далее), нижнее горизонтальное меню и правое меню (если они есть в дизайне).» [18] Формирование страницы сайта производится динамически, на основе используемого шаблона страницы, созданного в среде Bootstrap, данных, 43

выводимых компонентами, и статической информации, размещенной на странице. 3.2.6 Разработка основных элементов интерфейса Интерфейс сайта представляет собой визуальное его отображение на экране монитора компьютера и является одним из наиболее важных элементов интернет-портала. Именно пользовательский интерфейс отвечает за то, насколько удобно пользователю будет взаимодействовать с сайтом или приложением, соответственно, захочет ли он использовать этот ресурс и в дальнейшем. К одним из основных элементов при проектировании интернет портала относиться создания макета. Макет сайта – это вариант дизайна будущего интернет портала. Дизайн определяет внешний вид - то, на что в первую очередь обращает внимание пользователь. От дизайна портала во многом зависит общее восприятие информации, которую содержит сайт. Далее на рисунке 3.11 представлена предварительная сетка макета. Рисунок 3.11 – Сетка макета 44

Далее были разработаны растровые элементы интернет-ресурса. К основным растровым элементом отнесены два элемента: 1) Логотипы ресурса 2) Графические ссылки Логотип сайта — это графическое изображение названия сайта, пояснение его направленности. Логотип призван выделить сайт из общей массы, привлечь внимание посетителей. Таким образом, логотип является его лицом и визитной карточкой. В случае с интернет порталом «Заплыв» было выделено для создания три вида логотипа: 1) Основной, включающий все детали для демонстрации на других ресурсах; 2) Упрощенный, для шапки сайта; 3) Иконка, для обозначения в адресной строке сайта. Все логотипы были выполнены в растровом редакторе Adobe Photoshop CS6 с использованием согласованной палитры информационного портала «Заплыв». Далее на рисунках 3.12, 3.13 и 3.14 представлены рендеры готовых логотипов Web-ресурса. Рисунок 3.12 – Основной логотип Рисунок 3.13 – Упрощенный логотип 45

Рисунок 3.14 – Иконка-логотип Графические ссылки имеют огромное значении при создании Webресурса. Картинка со ссылкой html – это обычная вставленная вами картинка, которая автоматически добавляется со ссылкой на статью, в которую вы ее добавили. Это очень полезно для сайтов, когда посетители кликают на главной странице на картинки и смотрят, какую же им прочитать статью. «По статистике, 30% посетителей нажимают именно на изображение, чтобы посмотреть статью, 20% нажимают на заголовок и 50% на слово: читать далее. Поэтому для повышения юзабилити ресурса нужно сделать так, чтобы посетители смогли перейти и прочитать понравившеюся им статью, используя данные 3 метода».[17] Далее были созданы графические ссылки для информационного блока Web-ресурса. Результат проделанной работы представлен на рисунке 3.15 Рисунок 3.15- Блок графических ссылок Также данный метод используются в рубриках «Новости» и «События». 46

В итоге был разработан окончательный макет Web-ресурса, который был согласован между всеми участниками проекта. Данный макет является конечным, предварительный результатом работы дизайнера, в дальнейшем именно по этому макету будет выполнена верстка web-ресурса. Данный макет представлен на рисунке 3.16. Рисунок 3.16- Макет информационного ресурса 47

3.3 Описание контрольного примера реализации проекта Главная страница сайта является информационной и несет в себе информацию об основной направленности ресурса. Пользователи на данной странице могут получить как доступ ко всем разделам, так и последние новости и события в мире спорта. В верхней части страницы располагается меню, которое содержит все основные разделы информационного портала, форму входа, поисковой модуль и логотип. Ниже расположен информационный слайдер, который несет информационную функцию. Данный фрагмент главной страницы представлен на рисунке 3.17. Рисунок 3.17 – Фрагмент главной страницы В середине данной страницы пользователю доступны последние новости спорта и события происходящие на сайте, а также есть возможность для перехода в информационные части интернет-портала. В середине данной страницы пользователю доступны последние новости спорта и события происходящие на сайте, а также есть возможность для перехода в информационные части интернет-портала. 48

В середине данной страницы пользователю доступны последние новости спорта и события происходящие на сайте, а также есть возможность для перехода в информационные части интернет-портала. Данный фрагмент представлен на рисунке 3.18. Рисунок 3.18 – Фрагмент главной страницы сайта На главной странице веб-сайта присутствует два информационных окна. Первое окно состоит из двух вкладок. На вкладке «Новости» автоматически публикуется новостная информация, появляющаяся на вебресурсе. На вкладке «События» фиксируется информация последних событий веб-сайта. Данное окно представлено на рисунке 3.19. Также на странице находиться информационный слайдер, работающий в автоматическом режиме и демонстрирующий высказывание олимпийских чемпионов в водных видах спорта. Данное окно представлено на рисунке 3.20 49

Рисунок 3.19 – Информационное окно Рисунок 3.20 – Информационный слайдер Далее для управления сайтом была разработана панель администратора, данная панель упрощает процесс администрирования ресурсом. Она позволяет создавать, редактировать и удалять все данные на интрнет-портале «Заплыв». Данная страница представлена на рисунке 3.21 Для входа в панель администратора необходимо пройти процесс авторизации пользователя. Данное окно представлено на рисунке 3.22 50

Рисунок 3.21 – Страница управления сайтом Рисунок 3.22 – Окно авторизации В разделе «Новости» для пользователя доступны все новости спорта. Раздел поддерживает все виды информационных новостей, начиная от текстовой информации и заканчивая видео и аудио материалом. Также в этом разделе существует ряд подкатегорий таких как: «события», «мастер-класс» и т.п. Фрагмент данной страницы интернет-портала представлена на рисунке 3.23. Фрагмент подраздела «События» представлен на рисунке 3.24. 51

Рисунок 3.23 – Фрагмент раздела «Новости» Рисунок 3.24 – Фрагмент раздела «События» Раздел «Экипировка» содержит информацию по соответствующим данным и содержит в себе ряд тематических вкладок. В разделе экипировка находиться вся информация, о том какая экипировка необходима для посещения бассейна, а так же разъясняются причины, из-за которых необходимо носить именно такую экипировку. 52

Фрагмент данной страницы интернет-портала представлена на рисунке 3.25. Рисунок 3.25 – Фрагмент раздела «Экипировка» Раздел «Нормативы ГТО» содержит в себе всю соответствующую информацию. Раздел имеет подкатегории по возрастным рамкам и гендерной принадлежности человека, что упрощает доступ к нужной информации. Также представлена информация необходимых норм для завоевания той или иной медали. На рисунке 3.26 представлен фрагмент страницы «Нормативы ГТО». В разделе «Площадки и секции» можно найти всю информацию про существующие бассейны Белгородской области, а так же услуги и стоимость посещения того или иного бассейна. В данном разделе содержится информация о бассейнах трех городов Белгородской области: 1) Белгород 2) Старый Оскол 3) Губкин 53

На рисунке 3.26 и 3.27 представлены фрагменты раздела «Площадки и секции». Рисунок 3.26 – Фрагмент раздела «Нормативы ГТО» Рисунок 3.27 – Фрагмент раздела «Площадки и секции» в Белгороде 54

Рисунок 3.28 – Фрагмент раздела «Площадки и секции» в Старом осколе В разделе «Мастер-класс» содержится информация о любительском спорте в виде полезных статей от экспертов. В данном разделе представлен весь спектр ответов на вопросы, которые могут возникнуть у начинающего спортсмена. На рисунке 3.29 и 3.30 представлены фрагменты раздела «Мастеркласс». Рисунок – 3.29 Фрагмент раздела «Мастер-класс» 55

Рисунок – 3.30 Фрагмент статьи из раздела «Мастер-класс» 3.4 Информационный портал на различных социальных платформах В последние время огромное влияние и популярность получили социальные сети. На сегодняшний день существует огромная тенденция среди web-ресурсов в создании своих страниц на таких популярных площадка как: 3) «В контакте» 4) «Twitter» 5) «Facebook» 6) «Youtube» Благодаря этим площадкам, интернет ресурсу, легче добиться популярности и завоевать лидирующие позиции среди интернет- пользователей интересующей категории людей. Такие социальные площадки позволяют найти именно ту категорию людей, на которых направлен созданный интернет-ресурс. Для интернет портала «Заплыв» были выделены для создания такие социальные сети как: 56

1) «В контакте»; 2) «Twitter». Для каждой из социальной сети был разработан определенный дизайн, соответствующий стилю интернет портала, и выделена определенная информационная составляющая. Для социальных сетей были созданы специальные рубрики новостей которые соответствуют формату новостей в социальных сетей. На рисунке 3.31 представлен список рубрик из социальной сети «В контакте». Рисунок 3.31 – Фрагмент списка рубрик На рисунках 3.32 и 3.33 представлены фрагменты web-страниц социальных сетей. 57

Рисунок 3.32 – Фрагмент группы «Заплыв» Рисунок 3.33 – Фрагмент страницы «Заплыв» 58

3.5 Оценка затрат при реализации проекта 3.5.1 Определение затрат при создании Интернет-портала Затраты на создание любого программного продукта или Web-сайта складывается из расходов по оплате труда разработчика программы и расходов по оплате машинного времени при отладке: 3спп = 3зп + 3маш + 3общ, (3.1) где 3спп – затраты на создание программного продукта; 3зп – затраты на оплату труда разработчика программы; 3маш – затраты на оплату машинного времени; 3общ – общие затраты. 3.5.2 Расходы на оплату труда разработчика Расходы на оплату труда разработчика сайта определяются путем умножения трудоемкости создания сайта на среднечасовую оплату разработчика (с учетом коэффициента отчислений на социальные нужды): 3зп = t * Tчас (3.2) где t – трудоемкость создания сайта; Tчас – среднечасовая оплата труда разработчика 3.5.3 Расчет трудоемкости создания программного продукта Трудоемкость разработки программного продукта можно определить следующим образом: 59

t = tоп + tконц + tдиз + tстр + tпрог + tинт + tотл (3.3) где tоп – затраты труда на подготовку описания задачи; tконц – затраты труда на поиск концептуальных решений для создания интерфейса сайта; tдиз – затраты труда на разработку элементов дизайна сайта; tстр – затраты труда на разработку структуры сайта и каркаса сайта; tпрог – затраты труда на составление кода страниц; tинт – затраты на разработку интерфейса сайта; tотл – затраты труда на отладку и тестирование сайта. Составление затрат, в свою очередь можно вычислить через условное операторов Q по формуле: Q = O * C * Kr * (1 + n * P) (3.4) Где O – предполагаемое количество условных строчек кода; С – коэффициент сложности сайта (обычно определяется в пределах 1,0 – 1,5). Более высокий коэффициенты используются только в крупных разработках корпоративного уровня; Kr – коэффициент повторения одного и того же кода во всех страницах сайта (0,1 – 0,9); n – количество коррекций сайта в ходе его разработки (имеется в виду значительная перестройка кода или дизайна сайта); P – средний коэффициент коррекций сайта в ходе его разработки (P=1,0 значит что сайт полностью создавался заново. Обычно высокий коэффициент коррекции говорит о допущенных неточностях на этапе предварительного проектирования сайта). На основании формулы подсчета количества условных операторов в программе получим: 60

Q = 1700 * 1,1 * 0,5 * (1 + 2 * 0,15) = 1215 условных строчек кода. 3.5.4 Расчет затрат по всем стадиям разработки программы Затраты труда на разработку программы вычисляются на основании исходных данных, представленных в таблице 3.1. Таблица 3.1 – Временные затраты на разработку программы № Наименование стадии п\п Доля в общем Временн ые объем работ (№) затраты (час.) 1 Подготовка и описание задачи 10 40 2 Поиск концептуального решения для создания интерфейса сайта 10 25 3 Разработка элементов дизайна 20 60 4 Разработка структуры и модели 20 60 5 Составление кода 15 45 6 Разработка интерфейса 15 45 7 Отладка и тестирование 10 30 Для расчета так же используются дополнительные коэффициенты: B – коэффициент увеличения затрат труда вследствие недостаточного описания задачи и последующих доработок (определяется в пределах 1,0 – 5,0). Нормальный коэффициент обычно не превышает значения B = 1,5; K – коэффициент квалификации разработчика. Для разработчиков со стажем менее 2 лет данный коэффициент равен 0,8. В связи с тем, что в процессе разработки программы производились некоторые уточнения и доработки, коэффициент увеличения затрат B = 1,2. 61

1) Расчет затрат труда на подготовку описания задачи. Затраты труда на изучение описания задачи с учетом уточнения описания и квалификации разработчика определяются: tоп = Q * B / (40 * K) = 1215 * 1,2 / (40 * 0,8) = 45,6 чел./час 2) Расчет затрат труда на поиск концептуального решения по созданию интерфейса сайта. Затраты вычисляются по формуле: tконц = Q / ( 25 * K) = 1215 / (25 * 0,8) = 60,75 чел./час 3) Расчет затрат труда на разработку элементов дизайна: tдиз = Q / ( 25 * K) = 1215 / (60 * 0,8) = 23,31чел./час 4) Расчет затрат труда на разработку структуры и модели сайта: tстр = Q / ( 25 * K) = 1215 / (60 * 0,8) = 23,31чел./час 5) Расчет затрат труда на составление кода: tпрог = Q / ( 45 * K) = 1215 / (45 * 0,8) = 33,75чел./час 6) Расчет затрат на создание пользовательского интерфейса. Данный тип затрат труда складывается из двух показателей: tинф = tсоз + tвнед (3.5) где tсозд – затраты труда на подготовку и создание элементов; tоф – затраты труда на внедрение. tвнед = Q / ( 45 * K) = 1215 / (45 * 0,8) = 33,75 чел./час tвнед = 0,75 * tсозд = 0,75 * 151,2 = 25,31 чел./час Исходя из всех расчетов затрат труда по каждой из стадий разработки программы можно вычислить общую трудоемкость проекта: t = 45,6 + 60,75 + 23,31 + 33,75 + 59 + 75,93 = 321,65 чел./час 62

Таблица 3.2 – Затраты труда на этапах проектирования Трудоемкость № п\п Наименование стадии Обозначе ние в чел./час в чел./днях (8-час,день) 1 Подготовка и описание задачи (tоп) 45,6 5,7 2 Поиск концептуального решения создания интерфейса сайта (tконц) 60,75 7,6 3 Разработка элементов дизайна (tдиз) 23,31 2,91 4 Разработка структуры и модели (tстр) 23,31 2,91 5 Составление кода (tпрог) 33,75 4,22 6 Разработка интерфейса (tинф) 59 7,37 7 Отладка и тестирование (tотл) 75,93 9,5 ИТОГО 321,65 40,21 3.5.5 Расчет зарплаты разработчика Средняя зарплата разработчика-дизайнера сайтов в современных рыночных условиях может варьироваться в широком диапазоне. Для расчета возьмем среднюю часовую оплату труда, которая составляет Tчас = 70 руб./час, что составляет 20000 руб./мес. при 8-ми часовом рабочем дне и 5-ти дневной рабочей неделе. Эта цифра близка к реальной заработной плате Web-дизайнера. Затраты на оплату труда разработчика состоят из зарплаты разработчика и отчислений на социальные нужды. Отчисления на социальные нужды включают в себя: - пенсионный фонд (22%); - фонд медицинского страхования (5,1%); - социальное страхование (2,9%). Итого отчисления на социальные нужды составляют 30%. Отсюда затраты на оплату труда разработчика составляют: 63

3зп = 20000 * 10 * 1,3 * 1,8 = 468 000 руб. в год. 3.5.6 Затраты на оплату машинного времени Затраты на оплату машинного времени при отладке программы определяются путем умножения фактического времени отладки программы на цену машино-часа арендного времени: 3маш = Счас * tЭВМ (3.7) где Счас – цена машино-часа арендого времени, руб./час; tЭВМ – фактическое время отладки программы на ЭВМ; Фактическое время отладки вычисляется по формуле: tЭВМ = 60,75 + 23,31 + 23,31 + 33,75 + 59 + 75,93 = 276,05 часа Цена одного машино-часа арендного времени вычисляется по формуле: Счас= ЗЭВМ / ТЭВМ (3.9) где ЗЭВМ – полные затраты на эксплуатацию ЭВМ в течении года; ТЭВМ – действительный годовой фонд времени ЭВМ, час/год; Годовой фонд времени работы ЭВМ вычисляется по формуле: ТЭВМ = tраб * (Дгод - Дпр) – 26 * tпроф (3.9) где tраб – продолжительность рабочего дня (8-часовой день); Дгод – количество дней в году (365 дней); Дпр – количество нерабочих дней в году (119 дней); tпроф – количество часов простоя ЭВМ в связи с плановыми профилактическими работами (по 4 часа каждые 2 недели). ТЭВМ = 8 * (365 - 119) – 26 * 4 =1864 часа 64

Полные затраты на эксплуатацию ЭВМ можно определить по формуле: ЗЭВМ = (Изп + А + Иэл + Ивм + Итр + Ипр) (3.10) Где Изп – годовые издержки на заработную плату обслуживающего персонала, руб./год; Иэл – годовые издержки на электроэнергию, потребляемую ЭВМ, руб.год; Ивм – годовые издержки на вспомогательные материалы, руб./год; Итр – затраты на обслуживание компьютера, руб./год. Сумма годовых амортизационных отчислений определяются по формуле: А = Сбал * Нам (3.11) где Сбал – балансовая стоимость компьютера, руб./шт.; Нам – норма амортизации. Норма амортизации компьютерной техники (ввиду быстро морального устаревания) обычно – 20%. Балансовая стоимость ПЭВМ включает отпускную цену, расходы на транспортировку, монтаж оборудования и его наладку: Сбал = Срын + Зуст (3.12) где Срын – рыночная стоимость компьютера, руб./шт; Зуст – затраты на доставку и установку компьютера, руб./шт Компьютер, на котором велась работа, был приобретен по цене Срын = 30000 руб., затраты на установку и наладку составили примерно 3% от стоимости компьютера 3уст = 3% * Срын = 0,03 * 30000 = 900 руб. 65

Сбал = 30000 + 900 = 30900 руб./шт. А = 30900 * 0,2 = 6180 руб.год. Стоимость электроэнергии, потребляемой за год, определяется по формуле: Иэл = РЭВМ * ТЭВМ * Сэл * kисп (3.13) где РЭВМ – суммарная мощность ЭВМ; Сэл – стоимость 1кВт*ч электроэнергии kисп – коэффициент интенсивного использование мощности машины. Согласнотехническому паспорту ЭВМ РЭВМ = 0,48 к.вт, стоимость кВт/ч электроэнергии для предприятия Сэл = 3,75 руб., интенсивность использования kисп = 0,95. Тогда расчетное значение затрат на электроэнергию: Иэл = 0,48 * 1864 * 3,75 * 0,95 =3187,4 руб. Затраты на обслуживание компьютера принимаются равными 3% от стоимости ЭВМ; Ивм = 0,05 * 30000 = 1500 руб. Прочие косвенные затраты, связанные ЭВМ, состоят их амортизационных отчислений на здания, стоимость услуг сторонних организаций и составляют 5% от стоимости ЭВМ: Ипр = 0,05 * 30000 = 1500 руб. Издержки на заработную плату обслуживающего персонала складываются из основной заработной платы и отчислений на социальные нужды: Изп = Иоснзп + Иотчзп (3.14) Сумма основной заработной платы определяется исходя из общей численности работающих в штате. В штат обслуживающего персонала 66

должны входить техник с месячным окладом 8500 руб., системный администратор с окладом 9000 руб. Тогда, учитывая, что данный персонал обслуживает порядка 5 машин, получим издержки на основную заработную плату обслуживающего персонала составляет: Иосзн 12 * (8500 + 9000) / 10 * 1,8 = 37800 руб. Сумма отчислений на социальные нужды составляет 30% от суммы дополнительной и основной заработных плат: Иотчзп = 0,3 * 37800 = 11340руб. Тогда годовые издержки на заработную плату обслуживающего персонала составят: Изп = 37800 + 11340= 49140руб. Полные затраты на эксплуатацию ЭВМ в течении года составлят: ЗЭВМ = 49140 + 5150 + 5525 +1250 +750 + 1250 = 62257,4 руб. Тогда цена машино-часа арендуемого времени составит: Счас = 62257,4 / 1864 = 33,39 руб. Общие расходы это расходы на освещение, отопление, коммунальные услуги и т.п. Они принимаются равными одной трети основной зарплаты разработчика т.е. 156000 руб. Тогда затраты на создание продукта (срок создания продукта – 3 месяца) составляет: 3спп = (468000 + 62257,4+ 156000) * 0,25 = 171564,35 руб. В данном разделе был полностью реализован проект в практической его части. Была создана и утверждена структура сайта, создан макет, реализованы графические пользовательский интерфейс элементы ресурса. ресурса и полностью Информационный создан портал был реализован на различных социальных платформах. Также была произведена экономическая оценка затрат но создание ресурса. 67

ЗАКЛЮЧЕНИЕ Изучив и проанализировав средства и методы создания Web – сайтов, мною был сделан вывод, что существует множество технологий и средств для осуществления работы, но при этом многое зависит от масштабов самого проекта. При создании сайта была использована база данных, а для этого идеально подходит технология управлении контентом сайта. В рамках данной ВКР был разработан интерфейс для взаимодействия пользователя с интернет порталом «zaplyv31.ru». Портал содержит информацию по видам плавания, продвижения спорта в Белгородской области и информацию полезную для каждого человека, который собирается заняться данным видом спорта. В процессе создания интерфейса были использованы средства языка разметки гипертекстовых документов HTML, прототипно-ориентированный сценарный язык программирования JavaScript, язык описания внешнего вида документа CSS и элементы растровой графики. Для разработки интерфейса сайта были рассмотрены актуальные вопросы разработки и создания современного Web-сайта. – изучение программного инструментария, применяемого для разработки и создания Web-сайтов; – выявление и учет методов и способов представления на Webстраницах различных видов информации, не препятствующих их доступности; – ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им на практике; – определение структуры Web-страниц; – выбор стратегии разработки и создания Web-сайта. В результате всех проведенных работ на базе выбранных технологий был создан прототип современного Web-сайта. Интерфейс программы прост 68

и удобен, работа не требует получения большого количества дополнительных знаний. Особенностью созданного интернет портала является наличие всей информации в одном месте, что позволяет всем увлеченным водным видом спорта людям получить максимальную информации о плавании, а также информацию о плавании в Белгородской области. Сайт может быть дополнен и обновлен в любое время. Были выполнены следующие задачи: − изучена предметная область в сфере разработки интерфейсов;  определены технические и программные средства для разработки интерфейса интернет-портала «Заплыв»;  разработан пользовательский интерфейс для интернет-портала «Заплыв»;  разработаны элементы интерфейса интернет-портала «Заплыв»;  разработана стратегию по продвижения ресурса;  протестирован интернет-портал «Заплыв». Разработанный Web-ресурс отвечает заявленной цели ВКР, а именно создан пользовательский интерфейс отвечающий общему уровню webресурса, имеющий интуитивный интерфейс, цветовую гамму которая отвечает всем требованиям и положительно сказывается на комфортном получении информации на портале. Также для достижения цели были выполнены все задачи. Именно за счет создания таких сайтов повышается общий уровень интереса к спорту, здоровому образу жизни. 69

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 1 Баронов, В.В. Информационные технологии и управление предприятием [Текст] / В.В. Баронов, Г.Н. Калянов, Ю.Н. Попов, И.Н. Титовский. – М.: Компания АйТи, 2012. – 328 с. 2 Бычкова, С.М. Информационные технологии в бухгалтерском учете и аудите [Текст] / С.М. Бычкова, С.В. Ивахненков – М.: «Проспект», 2014 . – 216 с. 3 Деверадж, С., Окупаемость информационных технологий [Текст] / С. Демередж, Р. Кохли – М.: ЗАО «Новый издательский дом», 2013. – 192 с. 4 Красноперов, К. Н. Оценка эффективности ИТ-инвестиций [Электронный ресурс] / К.Н. Красноперов – Режим доступа: http://www.iteam.ru/publications/it/section_53/article_1250 5 Торнаков, С.Г. Осваиваем популярные системы управления сайтом [Текст] / С.Г. Торнаков – Изд-во ДМК-Пресс, 2011 6 Зайцева, Т.В. Методические указания по содержанию, выполнению и защите выпускных квалификационных работ [Текст] /Т.В. Зайцева, О.П. Пусная, Н.П. Путивцева – Белгород: Изд-во БелГУ, 2015. – 111с. 7 Маклаков, С.В BPwin и ERwin. CASE – средства разработки информационных систем [Текст] / С.В. Маклаков – Изд.: "Диалог–Мифи" – 2014.–295 с. 8 Гуров, В.В. Интернет для бизнеса [Текст] /В.В. Гуров – М.: ООО Электронинформ, 2013. – 224с. 9 Лапуста, М.А. Справочник директора предприятия[Текст] / М.А. Лапуста. – М.:Издательство Инфра,2012 – 48 с. 10 Новак, Б.В. 1C: Предприятие 8.0. Конфигурирование и настройка [Текст] / Б.В. Новак – М.: "Рампа", 2011. – 192 стр. 70

11 Брага, И.И. Автоматизированные информационные технологии в экономике [Текст] / И.И. Брага, Н.Г.Бубнова, Л.А. Вдовенко и др. Под ред. проф. Г.А. Титоренко. — М.: Компьютер, ЮНИТИ, 2012. - 400 с.. 12 Костяев, Р. В. Бизнес в Интернете. Финансы, маркетинг, планирование [Текст] / Р.В. Костяев. – СПб.: БХВ-Петербург, 2012 г. - 656 с. 13 Орлов, А.Г. Как создать и "раскрутить" web-сайт в Интернет [Текст] / А.Г. Орлов – М.: Альянс, 2013. – 512 с. 14 Планирование сайта: Электронный учебник [Электронный ресурс] / Режим доступа: http://www.Xserver.ru/ 15 Ковалев, А.Н. Управление проектом по созданию Интернет-сайта [Текст] / А.Н. Ковалев. – М., 2014–420с. 16 Курганов, В.А. Создание Интернет-сайта [Текст] / В.А. Курганов – М., 2013–326с. 17 Набор дистрибутивов и программная оболочка, используемые Web-разработчиками для отладки сайтов без необходимости выхода в Интернет [Электронный ресурс] / Режим доступа: http://www.denwer.ru/ 18 Кузнецов, А.М. Требования к графическому дизайну и юзабилити образовательных порталов / Интернет-порталы: содержание и технологии [Текст] / А.М. Кузнецов, В.В. Мартынов – М.: Просвещение, 2011. - 720 с. 19 Насакин, Г.С. Три кита веб-разработки компьютера [Текст] / Г.С. Насакин, А.М. Арапов - М., 2012 - №31-32 - с. 32-33 20 Криницкий, Н.А. Автоматизированные информационные системы [Текст] / Н.А. Криницкий, Г.А. Миронов, Г.Д. Фролов М.: - Наука, 2014.- 384с. 21 1С-Битрикс: Управление сайтом. Документация для разработчиков [Электронный ресурс]. – Режим доступа: http://dev.1c-bitrix.ru/api_help/ 22 Басыров, Р. И. Открываем интернет-магазин с помощью 1СБитрикс [Текст] / Р.И. Басыров – М.:Эксмо, 2014. – 511 с 23 Михелев, В.М. Базы данных и СУБД: учебное пособие [Текст] / В.М. Михелев– Белгород: Изд–во БелГУ, 2012 – 200 с. 71

24 Матросов, А. М. HTML [Текст] / А. Матросов, А. Сергеев, М. Чаунин – СПБ.: БХВ-Петербург, 2013 г. – 672 25 Котеров, Д. В. PHP 5 В Подлиннике [Текст] / Д.В. Котеров, А.Ф. Костарев – СПб.: БХВ-Петербург, 2011. – 1120 с. 26 Круг, Стив. Веб-дизайн. Символ-Плюс [Текст] / Стив Круг 2014. – 195 с. 27 Профессиональная студия веб-дизайна Antula [Электронный ресурс] – 11 апреля 2012. - Режим доступа: http://www.antula.ru/ 28 Вейтман, Виктор. Программирование для Web [Текст] / Виктор Вейтман. – Киев, Диалектика, 2013. - 368 с. 29 Кирсанова, Д. Р. Веб-дизайн: книга Дмитрия Кирсанова [Текст] / Д.Р. Кирсанова — СПб: Символ-Плюс, 2010 — 376 с. 30 Олищук, А.В. Разработка Web-приложений на PHP 5. Профессиональная работа [Текст] / А.В. Олищук –М.: Вильямс, 2014. -352 с. 31 Канер, С. Тестирование программного обеспечения [Текст] / С. Канер – М: 2013 –103 с. 32 Фещенко, А.В. Основы сайтостроения: Электронное учебное пособие [Электронный ресурс] / А.В. Фещенко – Томск, 2013 Режим доступа: http://ido.tsu.ru/other_res/ep/sait_umk/ 33 Титоренко, Г.А. Информационные технологии управления [Текст] / Г.А. Титоренко – М.: ЮНИТИ–ДАНА, 2014 34 Тидвелл, Дженнифер. Разработка пользовательского интерфейса [Текст] / Дженнифер Тидвелл Питер, 2012 . – 416с. 35 Мамыкин, А.А. Стратегия и тактика маркетинга в Интернет [Текст] / А.А. Мамыкин // Маркетинг в России и за рубежом. – 2014. – № 2. 36 Муромцев, В.В. Проектирование информационных систем [Текст] / В.В. Муромцев – Белгород: Изд–во БелГУ, 2013.– 160 с. 37 Степанов, А. Н. Информатика: Учебник для вузов [Текст] / А.Н. Степанов – Санкт–Петербург: Питер, 2010. – 720 с. 72

38 Рассел, Р. Защита от хакеров коммерческого сайта [Текст] / Райан Рассел, Марк Мерков ДМК Пресс 2010, М..- 552с. 39 Зольников, Д.С. РНР 5. Как создать сайт [Текст] / Д.С. Золников – 2е изд. – М.: НТ Пресс, 2012 272c. 40 Канер, С. Тестирование программного обеспечения [Текст] / С. Канер – М: 2013 – 103 с. 73

ПРИЛОЖЕНИЯ 74

ПРИЛОЖЕНИЕ А Листинг главной страницы “index.php” <?php use yii\bootstrap\Carousel; /* @var $this yii\web\View */ $this->title = 'Заплыв'; ?> <?php echo Carousel::widget([ 'items' => [ // the item contains only the image '<img src="public/user_pic/001.jpg"/>', '<img src="public/user_pic/111.jpg"/>', '<img src="public/user_pic/1info.jpg"/>', '<img src="public/user_pic/3info.jpg"/>', '<img src="public/user_pic/5info.jpg"/>', '<img src="public/user_pic/6info.jpg"/>', '<img src="public/user_pic/7info.jpg"/>', ], 'options' => ['style' => 'width:960px; height:360px; margin: 0 auto;'], ]); ?>  <div class="bg-lg"> <div class="container"> <div class="row"> <div class="col-lg-12 recent"> <h3 class="recent-work"> </h3> <div id="owl-demo" class="owl-carousel owl-theme wow fadeIn"> <div class=" view view-tenth"> <img src="public/img/works/img8.jpg" alt="work Image"> <div class="mask"> <a href="http://zaplyv31.ru/index.php?r=site/page&id=5" style="margin-right:100px;margin-top:25px;" class="info" datatoggle="tooltip" data-placement="top" title="Подробнее"> <i class="fa fa-link"> </i> </a> </div> </div> <div class=" view view-tenth"> <img src="public/img/works/img9.jpg" alt="work Image"> <div class="mask"> <a href="blog-detail.html" style="margin-right:100px;margin-top:25px;" class="info" data-toggle="tooltip" data-placement="top" title="Подробнее"> <i class="fa fa-link"> </i> </a> </div> </div> <div class=" view view-tenth"> <img src="public/img/works/img10.jpg" alt="work Image"> <div class="mask"> <a href="blog-detail.html" style="margin-right:100px;margin-top:25px;" class="info" data-toggle="tooltip" data-placement="top" title="Подробнее"> <i class="fa fa-link"> </i> </a> </div> </div> <div class=" view view-tenth"> <img src="public/img/works/img11.jpg" alt="work Image"> <div class="mask"> <a href="blog-detail.html" style="margin-right:100px;margin-top:25px;" class="info" data-toggle="tooltip" data-placement="top" title="Подробнее"> <i class="fa fa-link"> 75

</i> </a> </div> </div> </div> </div> </div> </div>  <div class="container"> <div class="row mar-b-60"> <div class="col-lg-6">  <section class="tab wow fadeInLeft"> <header class="panel-heading tab-bg-dark-navy-blue"> <ul class="nav nav-tabs nav-justified "> <li class="active"> <a data-toggle="tab" href="#news"> Новости </a> </li> <li> <a data-toggle="tab" href="#events"> События </a> </li> </ul> </header> <div class="panel-body"> <div class="tab-content tasi-tab"> <div id="news" class="tab-pane fade in active"> <?php $i=0; foreach ($dataProvider->models as $td){ echo' <article class="media"> <a class="pull-left thumb p-thumb"> <img src="public/img/pr1.jpg" alt=""> </a> <div class="media-body b-btm"> <a href="index.php?r=site/detail&id='.$td->id.'" class=" p-head"> '.$td->title.' </a> </div> </article>'; $i++; if($i>=4){ break; } } ?> </div> <div id="events" class="tab-pane fade"> <article class="media"> <a class="pull-left thumb p-thumb">  </a> <div class="media-body b-btm"> <a href="#" class="cmt-head"> "Александ" оставил комментарий к записи </a> <p> <i class="fa fa-time"> </i> 15 дней назад </p> </div> </article> <article class="media"> <a class="pull-left thumb p-thumb">  76

</a> <div class="media-body b-btm"> <a href="#" class="cmt-head"> "Вячеслав" оставил комментарий к записи </a> <p> <i class="fa fa-time"> </i> 5 дней назад </p> </div> </article> <article class="media"> <a class="pull-left thumb p-thumb">  </a> <div class="media-body b-btm"> <a href="#" class="cmt-head"> "Светаслав" оставил комментарий к записи </a> <p> <i class="fa fa-time"> </i> 4 дня назад </p> </div> </article> </div> <div id="notice-board" class="tab-pane fade"> <p> Notice board goes here Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. </p> <p> Notice board goes here Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. </p> </div> </div> </div> </section>  </div> <div class="col-lg-6">  <div class="about-testimonial boxed-style about-flexslider "> <section class="slider wow fadeInRight"> <div class="flexslider"> <ul class="slides about-flex-slides"> <li> <div class="about-testimonial-image "> <img src="public/img/person_2.jpg"> </div> <a class="about-testimonial-author" href="#"> Основа! </a> <span class="about-testimonial-company"> Райан Лохте </span> <div class="about-testimonial-content"> <p class="about-testimonial-quote"> «Плавание на 90% зависит от твоего кора, это основа, от которой строится техника, поэтому тренируй пресс так, чтобы мышцы горели. Налегай еще сильнее, даже когда тебе очень этого не хочется. Это умение и отличает великих от середняков. Когда тебе больно, а терпение с выносливостью заканчиваются, найди в себе еще что-то, чтобы не останавливаться». </p> </div> </li> <li> <div class="about-testimonial-image "> <img alt="" src="public/img/person_1.jpg"> </div> <a class="about-testimonial-author" href="#"> 77

Узнай для начала, что ты можешь </a> <span class="about-testimonial-company"> Евгений Коротышкин </span> <div class="about-testimonial-content"> <p class="about-testimonial-quote"> «Разведи руки в стороны и замерь расстояние между кончиками средних пальцев. Если эта длина больше твоего роста — природа одарила тебя телом прирожденного пловца. Если равна росту или меньше — специалисты скажут, что у тебя «умеренные данные». Что ж, зато есть стимул тренироваться активнее, ведь не так важно, какого диаметра у тебя колеса, главное — какой мотор под капотом. Далее засеки время и плыви изо всех сил 100 метров вольным стилем. Если проплыл менее чем за 50 секунд — звони к нам в сборную. Если более — что ж, есть стимул тренироваться активнее». </p> </div> </li> </ul> </div> </section> </div>  </div> </div> </div> </div> <div id="home-services"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2> Ты все еще не знаешь заниматься плаванием или нет? </h2> </div> <div class="col-md-4"> <div class="h-service"> <div class="icon-wrap ico-bg round-fifty wow fadeInDown"> <i class="fa fa-question"> </i> </div> <div class="h-service-content wow fadeInUp"> <h3> Задай нам вопрос </h3> <p> Отправь свое письмо с вопросом или предложением к нам на почту и ожидай скорейшего ответа! <br> </p> </div> </div> </div> <div class="col-md-4"> <div class="h-service"> <div class="icon-wrap ico-bg round-fifty wow fadeInDown"> <i class="fa fa-h-square"> </i> </div> <div class="h-service-content wow fadeInUp"> <h3> Узнай у профессионалов </h3> <p> Профессионалы не просто так получили это звание, ты можешь воспользоваться их советом и быть уверенным, что он правильный 78

<br> </p> </div> </div> </div> <div class="col-md-4"> <div class="h-service"> <div class="icon-wrap ico-bg round-fifty wow fadeInDown"> <i class="fa fa-users"> </i> </div> <div class="h-service-content wow fadeInUp"> <h3> Сообщество </h3> <p> Человек социальное существо, так или иначе, ты можешь воспользоваться советом окружающих тебя людей, в поиске наставления или подсказки <br> </p> </div> </div> </div> </div>  </div>  </div>  <div class="hr"> <span class="hr-inner"></span> </div> </div> <?php use app\models\User; use app\models\Category; $this->title=$onePost->title; ?>  <div class="container"> <div class="row">  <div class="col-lg-9">   <h1><?=$onePost->title?></h1> <hr>  <p><span class="glyphicon glyphicon-time"></span> <?php $arr=explode ('-', $onePost->publish_date); $arr[2]=substr($arr[2], 0,2); echo'Добавлено: '.$arr[2].' '; $month = array ( '01'=>'Января', '02'=>'Февраля', '03'=>'Марта', '04'=>'Апреля', '05'=>'Мая', '06'=>'Июня', '07'=>'Июля', '08'=>'Авгута', '09'=>'Сентября', '10'=>'Октября', '11'=>'Ноября', '12'=>'Декабря'); echo $month[$arr[1]].' От: <a href="#">'.User::findOne($onePost->id_user)->login.'</a>'; ?> </p> 79

<hr> <div> <p><?=$onePost->content?></p> </div> <hr>   <h4>Добавить комментарий:</h4> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-lg-4"> <input type="text" placeholder="Имя" class="col-lg-12 form-control"> </div> <div class="col-lg-4"> <input type="text" placeholder="Email" class="col-lg-12 form-control"> </div> </div> <div class="form-group"> <div class="col-lg-12"> <textarea placeholder="Сообщение" rows="8" class=" form-control"> </textarea> </div> </div> <p> <button type="submit" class="btn btn-info pull-right"> Отправить </button> </p> </form> <br> <hr>   <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Start Bootstrap <small>August 25, 2014 at 9:30 PM</small> </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div>  <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Start Bootstrap <small>August 25, 2014 at 9:30 PM</small> </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.  <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Nested Start Bootstrap <small>August 25, 2014 at 9:30 PM</small> </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> 80

</div>  </div> </div> </div>  <div class="col-lg-3"> <div class="blog-side-item"> <div class="category"> <h3> Категории </h3> <ul class="list-unstyled"> <?php $category=Category::find()->select(['title'])->indexBy('id')->column(); for($i=1; $i<=count($category); $i++){ echo'<li> <a href="index.php?r=site/blog&id='.$i.'"> <i class="fa fa-angle-right pr-10"> </i> '.$category[$i].' </a> </li>'; } ?> </ul> </div> <br> <br> <div> <a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://pogoda.yandex.ru/4" target="_blank"><img src="//info.weather.yandex.net/4/2_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a> </div> </div> </div> </div>  <hr> </div> <?php use app\models\User; use app\models\Category; $this->title=$onePost->title; ?>  <div class="container"> <div class="row">  <div class="col-lg-9">   <h1><?=$onePost->title?></h1> <hr>  <p><span class="glyphicon glyphicon-time"></span> <?php $arr=explode ('-', $onePost->publish_date); $arr[2]=substr($arr[2], 0,2); echo'Добавлено: '.$arr[2].' '; $month = array ( 81

'01'=>'Января', '02'=>'Февраля', '03'=>'Марта', '04'=>'Апреля', '05'=>'Мая', '06'=>'Июня', '07'=>'Июля', '08'=>'Авгута', '09'=>'Сентября', '10'=>'Октября', '11'=>'Ноября', '12'=>'Декабря'); echo $month[$arr[1]].' От: <a href="#">'.User::findOne($onePost->id_user)->login.'</a>'; ?> </p> <hr> <div> <p><?=$onePost->content?></p> </div> <hr>   <h4>Добавить комментарий:</h4> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-lg-4"> <input type="text" placeholder="Имя" class="col-lg-12 form-control"> </div> <div class="col-lg-4"> <input type="text" placeholder="Email" class="col-lg-12 form-control"> </div> </div> <div class="form-group"> <div class="col-lg-12"> <textarea placeholder="Сообщение" rows="8" class=" form-control"> </textarea> </div> </div> <p> <button type="submit" class="btn btn-info pull-right"> Отправить </button> </p> </form> <br> <hr>   <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Start Bootstrap <small>August 25, 2014 at 9:30 PM</small> </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div>  <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" alt=""> </a> 82

<div class="media-body"> <h4 class="media-heading">Start Bootstrap <small>August 25, 2014 at 9:30 PM</small> </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.  <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64x64" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Nested Start Bootstrap <small>August 25, 2014 at 9:30 PM</small> </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div>  </div> </div> </div>  <div class="col-lg-3"> <div class="blog-side-item"> <div class="category"> <h3> Категории </h3> <ul class="list-unstyled"> <?php $category=Category::find()->select(['title'])->indexBy('id')->column(); for($i=1; $i<=count($category); $i++){ echo'<li> <a href="index.php?r=site/blog&id='.$i.'"> <i class="fa fa-angle-right pr-10"> </i> '.$category[$i].' </a> </li>'; } ?> </ul> </div> <br> <br> <div> <a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://pogoda.yandex.ru/4" target="_blank"><img src="//info.weather.yandex.net/4/2_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a> </div> </div> </div>  <hr> </div> Листинг панели администратора. <?php /* @var $this \yii\web\View */ /* @var $content string */ use yii\helpers\Html; use yii\widgets\Breadcrumbs; ?> <!DOCTYPE html> <html> <head> <meta charset="<?= Yii::$app->charset ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <?= Html::csrfMetaTags() ?> <title><?= Html::encode($this->title) ?></title> 83

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  <link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">  <link rel="stylesheet" href="public/dist/css/AdminLTE.min.css">  <link rel="stylesheet" href="public/dist/css/skins/_all-skins.min.css">  <link rel="stylesheet" href="public/plugins/iCheck/flat/blue.css">  <link rel="stylesheet" href="public/plugins/datepicker/datepicker3.css">  <link rel="stylesheet" href="public/plugins/daterangepicker/daterangepicker-bs3.css">  <link rel="stylesheet" href="public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">    </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header">  <a href="?r=site" class="logo">  <img alt="Заплыв" src="public/img/logo.png"> </a>  <nav class="navbar navbar-static-top" role="navigation">  <div class="navbar-custom-menu"> <ul class="nav navbar-nav">  <li> <a href="?r=login/logout"> <i class="fa fa-sign-out">Выйти</i> </a> </li>   </ul> </div> </nav> </header>  <aside class="main-sidebar">  <section class="sidebar">   <ul class="sidebar-menu"> <li class="header">Навигация</li> <li class="active treeview"> <a href="#"> <i class="fa fa-pencil"></i> <span>Записи</span> <i class="fa fa-angle-left pull-right"></i> 84

</a> <ul class="treeview-menu"> <li class="active"><a href="?r=admin/create"><i class="fa fa-pencil-square-o"></i> Новый пост</a></li> <li><a href="?r=admin/index"><i class="fa fa-list"></i> Все записи</a></li> <li><a href="index2.html"><i class="fa fa-check"></i> Категории</a></li> <li><a href="?r=admin/pagecreate"><i class="glyphicon glyphicon-file"></i> Добавить страницу</a></li> <li><a href="?r=admin/page"><i class="glyphicon glyphicon-folder-open"></i> Все страницы</a></li> </ul> </li> <li> <a href="#"> <i class="fa fa-commenting-o"></i> <span>Комментарии</span> </a> </li> <li> <a href="#"> <i class="fa fa-th"></i> <span>Администраторы</span> </a> </li> </section>  </aside>  <div class="content-wrapper">  <?= $content ?> </div> <footer class="main-footer"> <strong>© 2016 <a href="http://zaplyv31.ru">Заплыв</a>.</strong> </footer>  <aside class="control-sidebar control-sidebar-dark">  <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li> </ul>  <div class="tab-content">  <div class="tab-pane" id="control-sidebar-home-tab"> <h3 class="control-sidebar-heading">Recent Activity</h3> <ul class="control-sidebar-menu"> <li> <a href="javascript::;"> <i class="menu-icon fa fa-birthday-cake bg-red"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">Langdon's Birthday</h4> <p>Will be 23 on April 24th</p> </div> </a> </li> <li> <a href="javascript::;"> <i class="menu-icon fa fa-user bg-yellow"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4> <p>New phone +1(800)555-1234</p> </div> </a> </li> <li> <a href="javascript::;"> <i class="menu-icon fa fa-envelope-o bg-light-blue"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4> <p>nora@example.com</p> </div> 85

</a> </li> <li> <a href="javascript::;"> <i class="menu-icon fa fa-file-code-o bg-green"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4> <p>Execution time 5 seconds</p> </div> </a> </li> </ul> <h3 class="control-sidebar-heading">Tasks Progress</h3> <ul class="control-sidebar-menu"> <li> <a href="javascript::;"> <h4 class="control-sidebar-subheading"> Custom Template Design <span class="label label-danger pull-right">70%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-danger" style="width: 70%"></div> </div> </a> </li> <li> <a href="javascript::;"> <h4 class="control-sidebar-subheading"> Update Resume <span class="label label-success pull-right">95%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-success" style="width: 95%"></div> </div> </a> </li> <li> <a href="javascript::;"> <h4 class="control-sidebar-subheading"> Laravel Integration <span class="label label-warning pull-right">50%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-warning" style="width: 50%"></div> </div> </a> </li> <li> <a href="javascript::;"> <h4 class="control-sidebar-subheading"> Back End Framework <span class="label label-primary pull-right">68%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" style="width: 68%"></div> </div> </a> </li> </ul> </div>  <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>  <div class="tab-pane" id="control-sidebar-settings-tab"> <form method="post"> <h3 class="control-sidebar-heading">General Settings</h3> <div class="form-group"> <label class="control-sidebar-subheading"> Report panel usage <input type="checkbox" class="pull-right" checked> </label> <p> Some information about this general settings option </p> </div> 86

<div class="form-group"> <label class="control-sidebar-subheading"> Allow mail redirect <input type="checkbox" class="pull-right" checked> </label> <p> Other sets of options are available </p> </div> <div class="form-group"> <label class="control-sidebar-subheading"> Expose author name in posts <input type="checkbox" class="pull-right" checked> </label> <p> Allow the user to show his name in blog posts </p> </div> <h3 class="control-sidebar-heading">Chat Settings</h3> <div class="form-group"> <label class="control-sidebar-subheading"> Show me as online <input type="checkbox" class="pull-right" checked> </label> </div> <div class="form-group"> <label class="control-sidebar-subheading"> Turn off notifications <input type="checkbox" class="pull-right"> </label> </div> <div class="form-group"> <label class="control-sidebar-subheading"> Delete chat history <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a> </label> </div> </form> </div> </div> </aside>  <div class="control-sidebar-bg"></div> </div>  <script src="public/plugins/jQuery/jQuery-2.1.4.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  <script> $.widget.bridge('uibutton', $.ui.button); </script>  <script src="public/bootstrap/js/bootstrap.min.js"></script>   <script src="public/plugins/knob/jquery.knob.js"></script> <script> $(function () { //bootstrap WYSIHTML5 - text editor $(".textarea").wysihtml5(); }); </script> </body> </html> 87

ПРИЛОЖЕНИЕ Б Рисунок 1 – Результаты конкурса «it-планета» 88

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв