Разработка веб-сайта компании "ГИК"
Разработка архитектуры сайта, структуры данных и необходимых программных модулей. Учет фирменного стиля компании при создании дизайна. Внедрение интерфейса административного редактирования сайта. Проведение экспериментального тестирования и отладки.
Рубрика | Программирование, компьютеры и кибернетика |
Вид | дипломная работа |
Язык | русский |
Дата добавления | 19.01.2017 |
Размер файла | 3,0 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Страница "Услуги" состоит из 4 блоков, каждый блок - это название услуги: разработка сайта, поддержка, продвижение сайта и дизайн.
Блоки интерактивные, при наведении на них происходит анимация, и блок меняет вид, картинка становиться меньше, происходит затемнение и появляется кнопка "Подробнее". При нажатии происходит переход на внутреннюю страницу услуги.
Вверху страницы расположен заголовок страницы и "хлебные крошки", так называемые ссылки на предыдущие страницы на которых был пользователь до посещения этой страницы для быстрого перехода. Так же рядом с заголовком расположена кнопка "Заказать консультацию", которая позволяет пользователю оставить интересующий его вопрос, и чтобы с ним связались и проконсультировали. Страница "Услуги" изображена на рисунке 2.12.
Рисунок 2.12 - страница "Услуги"
Структура внутренних страниц "Услуги":
1. Разработка сайта
- базовые вопросы
- срок разработки
- этапы создания сайта
- форма заказа разработки сайта
- блок другие услуги
2. Поддержка
- тарифы технической поддержки
- форма заказа технической поддержки
- блок другие услуги
3. Продвижение сайта
- CEO оптимизация
- способы продвижения сайта
- форма заказа продвижения сайта
- блок другие услуги
4. Дизайн
- создание дизайна сайта
- фирменный стиль
- современный дизайн сайта - этапы
- форма заказа дизайна сайта
- блок другие услуги
2.3 Структура страницы "Компания"
На странице "Компания" расположена информация о компании "ГИК", чем он занимается, ее история, какие цели она преследует, о команде, которая в ней работает. Так же представлено обращение директора компании к потенциальным клиентам и благодарность партерам.
Вверху страницы расположен заголовок страницы и "хлебные крошки", так называемые ссылки на предыдущие страницы на которых был пользователь до посещения этой страницы для быстрого перехода. Так же рядом с заголовком расположены ссылки на внутренние страницы: о компании, вакансии, партнеры и отзывы. Страница "Компания" изображена на рисунке 2.13.
Рисунок 2.13 - страница "Компания"
Структура внутренних страниц "Компания":
1. О компании
- Информация о компании
- Наша команда
- Обращение директора
2. Вакансии
- Менеджер по продажам
- Web-дизайнер
- Web-программист
- SEO-специалист
3. Партнеры
- Список партнеров и ссылки на них.
4. Отзывы
- Отзывы клиентов компании "ГИК" и их рекомендации.
2.4 Структура страницы "Портфолио"
Страница "Портфолио" содержит в себе список всех работ, которые сделала компания "ГИК". Работы представлены в виде блоков с картинкой при наведении, на которые видно краткое описание, а при нажатии осуществляется переход на внутреннюю страницу с работой.
Вверху страницы расположен заголовок страницы и "хлебные крошки", так называемые ссылки на предыдущие страницы на которых был пользователь до посещения этой страницы для быстрого перехода. Так же рядом с заголовком расположены ссылки на внутренние страницы: сайт компании, интернет каталог, лендинг, сложные проекты, мобильные (адаптивные) сайты и лого. Страница "Портфолио" изображена на рисунке 2.14.
Рисунок 2.14 - страница "Портфолио"
Структура внутренних страниц "Портфолио":
1. Сайт компании
Большие и объемные сайты для компаний.
2. Интернет каталог
Сайты, содержащие продукцию, позволяющие просматривать товар и заказывать его.
3. Лендинг
Одностраничные сайты, промо-сайты, которые настраивают посетителя на совершение определенного действия.
4. Сложные проекты
Сложные сервисы, направленные на достижение и облегчение разных сторон бизнеса.
5. Мобильные (адаптивные) сайты
Сайты, разработанные не только под компьютер, но и под мобильные устройства (Iphone, Android и т.д.).
6. Лого
Логотипы и фирменный стиль проектов.
2.5 Структура страницы "События"
сайт дизайн интерфейс редактирование
Страница "События" содержит информацию о последних акциях, новостях, затрагивающих web-разработку и бизнес.
Вверху страницы расположен заголовок страницы и "хлебные крошки", так называемые ссылки на предыдущие страницы на которых был пользователь до посещения этой страницы для быстрого перехода. Так же рядом с заголовком расположены ссылки на внутренние страницы: все, акции, новости и блог. Страница "События" изображена на рисунке 2.15.
Рисунок 2.15 - страница "События"
Структура внутренних страниц "События":
1. Все
Все новости и акции.
2. Акции
Скидки, специальные предложения.
3. Новости
Новости, связанные с web-приложениями, разработкой и IT-сферой.
4. Блог
Публикации компании "ГИК", советы и ответы на вопросы.
2.6 Структура страницы "Контакты"
Страница "Контакты" содержит контактные данные компании "ГИК": телефоны, электронную почту, режим работы и местоположение офиса.
Контактные данные представлены для двух городов: Вологды и Череповца.
Вверху страницы расположен заголовок страницы и "хлебные крошки", так называемые ссылки на предыдущие страницы на которых был пользователь до посещения этой страницы для быстрого перехода.
Внизу страницы расположена форма обратной связи, которая предлагает пользователю сразу заполнить необходимые поля (имя, электронная почта, телефон, бюджет) чтобы специалист компании связался с ним и проконсультировал по необходимым вопросам. Страница "Контакты" изображена на рисунке 2.16.
Рисунок 2.16 - страница "Контакты"
2.7 Адаптивный веб-дизайн
Адаптивный веб-дизайн - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств.
В оформлении сайта компании "ГИК" используется фреймворк Twitter Bootstrap. Twitter Bootstrap - свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, вебформ, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Bootstrap использует самые современные наработки в области CSS и HTML.
Основные преимущества Twitter Bootstrap:
- экономия времени - Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках;
- высокая скорость - динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке;
- гармоничный дизайн - все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом;
- простота в использовании - платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap;
- совместимость с браузерами - Twitter Bootstrap совместим с Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera;
- открытое программное обеспечение - особенность Twitter Bootstrap, которая предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки [10].
Все элементы Twitter Bootstrap автоматически могут адаптироваться к размеру экрана, это значит, что сайт будет корректно отображаться на различных устройствах с разным размером экрана.
Вид сайта на экране монитора изображен на рисунке 2.17.
Рисунок 2.17 - вид сайта на экране монитора
Вид сайта на мобильном устройстве изображен на рисунке 2.18.
Рисунок 2.18 - вид сайта на мобильном устройстве
3. Разработка структур данных
Так как сайт создан при помощи системы управления контентом MODx, база данных которой представлена в виде MySQL, база данных сайта будет поддерживать ту же структуру, внося в неё свои изменения.
MODx без установленных дополнительных модулей содержит 63 таблицы. Многие из таблиц содержат вспомогательную информацию и нет смысла описывать каждую из них.
3.1 Работа с таблицами в CMS MODx
Работа с базой данных в MODx построена поверх библиотеки xPDO.
xPDO (open eXtensions to PDO) - это легковесная ORB (object-relational bridge, объектно-реляционный мост) библиотека, работающая на PHP 5, которая помогает пользоваться преимуществами последних стандартов работы с базами данных в PHP, расширением PDO (PHP Data Objects). xPDO реализует очень простой, но эффективный паттерн для доступа к данным Active Record, а также гибкую модель предметной области, позволяющую отделить логику области от логики, специфичной для той или иной базы данных.
Но xPDO - это немного больше, чем простая реализация паттерна. Это еще и способ абстрагирования бизнес-логики приложения от фактически используемых для доступа к данным в БД SQL-запросов и связанных переменных (prepared statements), а также легко описать и обеспечить реализации объектной модели для нескольких целевых платформ баз данных.
Задачей xPDO является быстрое обеспечение фундамента веб-приложения, который легко расширить до полноценной объектной модели, которая может быть оптимизирована насколько это возможно без зависимостей от конкретной платформы.
3.2 Описание основных таблиц
Так как MODx является системой управления контентом общего назначения, то содержит большое количество таблиц в базе данных, более 60. Нет смысла описывать каждую их таблиц.
Основные таблицы CMS MODx:
- site_htmlsnippets - содержит информацию о чанках пользователя;
- site_snippets - содержит информацию о снипетах пользователя;
- site_content - содержит информацию о ресурсах, добавленную пользователем;
- users - список пользователей;
- user_attributes - профили пользователей.
Таблица описывает представление чанка в базе данных. Чанки содержат в себе статический HTML код.
Таблица 1 - структура таблицы site_htmlsnippets
Поле |
Тип |
Комментарий |
|
Id |
int(10) |
Первичный ключ |
|
source |
int(10) |
Источник |
|
property_preprocess |
tinyint(1) |
Обработка свойств |
|
name |
varchar(50) |
Название чанка |
|
description |
varchar(255) |
Описание чанка |
|
editor_type |
int(11) |
Внутренний текстовый редактор |
|
category |
int(11) |
Категория |
|
cache_type |
tinyint(1) |
Вид кэширования |
|
snippet |
mediumtext |
Содержание |
|
locked |
tinyint(1) |
Блокировка |
|
properties |
text |
Свойства |
|
static |
tinyint(1) |
Является ли статичным файлом |
|
static_file |
varchar(255) |
Путь к статичному файлу |
Таблица 1 - site_snippets содержит информацию о пользовательских сниппетах и имеет аналогичную структуру site_htmlsnippets, и аналогичные названия полей. Снипеты представляют собой PHP код доступный для исполнения из чанков или шаблона.
Таблица 2 - структура таблицы users
Поле |
Тип |
Комментарий |
|
id |
int(10) |
Первичный ключ |
|
username |
varchar(100) |
Имя пользователя |
|
password |
varchar(100) |
Хэш пароля |
|
cachepwd |
varchar(100) |
Кэшированный пароль |
|
class_key |
varchar(100) |
Тип пользователя |
|
active |
tinyint(1) |
Активен ли пользователь |
|
remote_key |
varchar(255) |
Внешний ключ |
|
remote_data |
text |
Внешние данные |
|
hash_class |
varchar(100) |
Тип хэширования пароля |
|
salt |
varchar(100) |
Символы, добавляемые к паролю |
|
primary_group |
int(10) |
Главная группа |
|
session_stale |
text |
Статус сесии |
|
sudo |
tinyint(1) |
Является ли суперпользователем |
Таблица 2 - users содержит базовую структуру для описания пользователя. Многие дополнительные таблицы использую информацию из этой таблицы, например, расширенные настройки прав содержатся в таблице access_permissions.
Таблица user_attributes содержит такую информацию как полное имя пользователя, email, телефон и служебную информацию такую как время последнего входа, общее число входов, страну. В общей сложности таблица содержит 26 полей.
В таблице site_content содержится информация о всех ресурсах сайта, а также служебная информация с этим связанная. Данная таблица в общей сложности содержит 43 поля.
4. Разработка и реализация программных модулей
Страница "Портфолио" содержит в себе много интерактивных элементов и изображений, которые находятся на очень большом количестве страниц. Важно, чтобы эти страницы грузились быстро и сортировались по категориям, в зависимости от их параметров.
Быструю загрузку страниц обеспечивает технология AJAX.
AJAX - подход к построению интерактивных пользовательских интерфейсов веб-приложений заключающийся в "фоновом" обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.
Скрипт берет ссылку, далее переходит на страницу, ищет блок с определенным атрибутом, берет содержимое блока и помещает его в такой же блок на страницу с которой он вызывался.
При использовании AJAX:
1. Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент;
2. Скрипт определяет, какая информация необходима для обновления страницы;
3. Браузер отправляет соответствующий запрос на сервер;
4. Сервер возвращает только ту часть документа, на которую пришёл запрос;
5. Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).
Преимущества AJAX:
§ Экономия трафика
Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что вместо загрузки всей страницы достаточно загрузить только изменившуюся часть, или вообще только получить/передать набор данных в формате JSON или XML, а затем изменить содержимое страницы с помощью JavaScript.
§ Уменьшение нагрузки на сервер
При правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз.
В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы ("шапка", "навигационная панель", "подвал" и т.д.), для генерации которых требуются обращения к разным файлам, время на обработку скриптов (а иногда и запросы к БД) - всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части. Дизайн страницы также обычно содержит множество файлов, связанных с оформлением (картинки, стили), на повторную обработку которых не надо тратить время, используя AJAX (экономия на количестве HTTP-соединений значительно выгоднее, чем на сокращении трафика каждого из них).
§ Ускорение реакции интерфейса
Поскольку загрузка изменившейся части значительно быстрее, то пользователь видит результат своих действий быстрее и без мерцания страницы (возникающего при полной перезагрузке).
§ Почти безграничные возможности для интерактивной обработки
Например, при вводе поискового запроса в Google выводится подсказка с возможными вариантами запроса. На многих сайтах при регистрации пользователь вводит имя, и сразу же видит, доступно это имя или нет. AJAX удобен для программирования чатов, административных панелей и других инструментов, которые выводят меняющиеся со временем данные [11].
Все сайты находятся в одном месте, в определенной категории.
В каждой категории сайтов есть дополнительное поле, в котором храниться весь список сайтов. Почему именно так? Один сайт может находиться в нескольких категориях без дублирования самой страницы, дублирование страницы нелогично и перегружает работу сайта.
Имеется шаблон, в нем запускается snippet, в который передается список сайтов, относящихся к данной категории с параметрами вывода сайтов в категории. Пример сайта в портфолио представлен на рисунке 4.1.
Рисунок 4.1 - сайт в портфолио: 1 - название сайта; 2 - ссылка на сайт; 3 - изображение сайта; 4 - категории сайта
Для вывода всех категорий сайта, к которым данный сайт в портфолио относиться, используется ApiModex. Вначале определяется пять TV-параметров, каждый из которых соответствует категории в портфолио. Далее мы получаем список id-ресурсов каждой категории портфолио (массив). Id-страницы ищутся в каждом из пяти массивов и если в каком-то из массивов этот id находиться, выводится ссылка на портфолио, которая соответствует этому массиву.
Переход между проектами осуществляется при создании переменной, которая заполняет snippet, который генерирует id-ресурсы. Берется id текущего ресурса, на котором мы находимся и поэтому id находиться индекс этого элемента в массиве со всеми сайтами. Дальше берется следующий индекс массива и предыдущий. У этих индексов берется значение, которое соответсвует id-ресурсам. Средствами Modex из id-ресурса генерируется ссылка на следующий и предыдущий ресурс.
5. Экспериментальное тестирование и отладка
В ходе тестирования был использован очень полезный инструмент для разработчиков сайтов на MODX - DebugParser от Василия Наумкина. Он сильно выручает на стадии окончания разработки сайта и может пригодится не только начинающим, но и уже вполне состоявшимся разработчикам. DebugParser позволяет найти и оптимизировать узкие места сайта. Включается он добавлением к адресной строке параметра debug=1.
В результате на страницу выводится таблица с полной информацией по всем тегам MODX, которые обрабатываются на текущей странице, а также количество запросов, время обработки этих запросов и полное время, которое парсер MODX затратил на обработку каждого тега. Сортируются теги по времени обработки парсером в обратном порядке, т.е. наверху находятся теги с наибольшим временем обработки. С них и нужно начинать оптимизацию.
Теперь вы можете точно определить и оптимизировать медленные вызовы на каждой странице. Пример использования DebugParser изображен на рисунке 5.1.
Рисунок 5.1 - использование DebugParser
В таблице показывается вызов тега MODX, количество запросов в БД при его работе, время запросов и общее время, затраченное на обработку.
Если на странице какой-то тег вызывается несколько раз, то эти вызовы суммируются.
Внизу таблицы вы видите сумму по статистике и общие данные: версия PHP, БД и т.д.
Плагин debugParser работает только для пользователей, авторизованных в админке.
Все параметры он принимает через $_GET.
§ debug - Включает режим отладки и вывод таблицы.
§ cache - Разрешает использовать кэширование страницы. По умолчанию - нет.
§ top - Количество тегов для вывода. По умолчанию - не ограничено.
§ add - Добавить таблицу в конец страницы, а не заменять её целиком. По умолчанию - нет.
Для вывода работы тегов шаблонизатора Fenom вам нужно использовать:
§ pdoTools 2.1.8-pl
§ debugParser 1.1.0-pl
§ Вызовы через {$_modx}, отключенный по умолчанию {$modx} отловить невозможно.
Примеры:
1. Обычный вывод
http://mystite.com/?debug=1
Таблица с отчетом заменит содержимое страницы, так что вы увидите только таблицу.
2. Вывод с использованием кэша
http://mystite.com/?debug=1&cache=1
Если страница загружается из кэша, будут обработаны и показаны только некэшируемые теги.
3. Вывод первых 10 самых медленных тегов
http://mystite.com/?debug=1&cache=1&top=10
Все обработанные теги сортируются по времени выполнения, поэтому можно показывать только несколько самых трудоёмких.
4. Вывод с присоединением таблицы к содержимому страницы
http://mystite.com/?debug=1&cache=1&top=10&add=1
За время тестирования программы были обнаружены некоторые отказы и ошибки, вызванные ошибками при разработке системы. Обнаруженные ошибки были исправлены. В программе проверяются на корректность все данные, поступающие от пользователя, а также предусмотрена обработка исключений при возникновении ошибок в работе сервера или других исключительных ситуаций.
6. Руководство администратора
6.1 Основные элементы CMS MODx
Ресурс - в понятии MODx ресурс представляет собой страницу сайта. Кроме того, существуют другие типы ресурсов, такие как, ссылки, сами файлы, и т.д. По умолчанию тип нового ресурса - документ, точнее представление одной страницы сайта.
Существует 4 вида ресурсов:
- Документ - самый распространённый ресурс, по сути веб-страница сайта. В основной массе состоит из заголовка, аннотации, подробного текста, различных дат, мета-тегов и дополнительных полей (TV-параметров).
- Web-ссылка - ссылка на внешний ресурс или веб-страницу.
- Символическая ссылка - внутренняя ссылка на другой ресурс.
- Статический ресурс - файл.
Каждый ресурс также имеет уникальный идентификатор, или "Resource Identifier". Если требуется связать два ресурса, то для этого следует использовать ID. Таким образом, MODx сгенерирует ссылку, и не придется беспокоиться об изменении адреса страницы или типы адресации.
Так же каждому ресурсу можно назначить шаблон, шаблон может определять дополнительные поля этого ресурса.
Ресурсы могут выступать в роли контейнеров и содержать в себе другие ресурсы. Так образуется структура сайта.
Шаблон - это базовая сущность определяющая отображение страницы в MODx. Шаблоны обычно содержат HTML-теги разметки, которые определяют расположение и внешний вид вашего сайта. Когда страница сайта запрошена, MODx загружает документ или ресурс и его шаблон, затем MODx находит все дополнительные поля в шаблоне и заменяет их соответствующими значениями из документа перед отправкой страницы в браузер пользователя. Шаблон может быть назначен любому ресурсу и определяет по сути веб-страницу в которой будет выведено содержимое этого ресурса. Шаблон не может быть включён в другой шаблон как часть.
Параметры - используются для вывода значений полей ресурса. Вызов осуществляется так: [[*field]].
TV параметры - это дополнительное поле или переменная шаблона (TV):
- это настраиваемое поле, или, точнее это настраиваемое поле для ресурсов MODx. TV-параметры используются для расширения стандартных полей ресурса. Каждый ресурс в MODx имеет определенное количество полей по умолчанию.
Если встаёт задача добавить некоторые дополнительные поля на страницу, например, выпадающий список названий месяцев или дополнительное изображение, или любой другой тип пользовательских данных, это можно сделать, добавив TV-параметр соответствующего типа. MODx позволяет иметь практически неограниченное количество TV-параметров.
TV-тег заменяется соответствующим значением заполненным пользователем при обработке ресурса. Так же каждый такой параметр привязан к какому-либо шаблону и может использоваться лишь в совокупности с ним. Вызов осуществляется так: [[*TV]].
Чанк - кусок статического текста, который можно встроить в шаблон, в другой чанк, либо вызвать в снипете. Чанк обладает теми же свойствами что и шаблон за исключением того, что не содержит TV-параметров и не может быть назначен ресурсу напрямую.
Чанк не может содержать какой-либо исполняемый код, но в нём можно вызывать сниппеты для вывода динамического контента. Вызов чанка осуществляется так: [[$chunk]].
Сниппет - PHP код который исполняется во время обработки шаблона MODx. Результат работы его может быть расположен либо на месте его вывода, либо в плейсхолдерах, специальных тегах определяющими куда поместить те или иные результаты. Вызов сниппета осуществляется так: [[snippet]].
6.2 Создание раздела
Раздел - это главный объект в основе иерархии структуры содержимого. Все доступные разделы сайта отображаются в главном верхнем меню.
Для работы с разделами, их редактированием, добавлением и удалением, необходимо зайти на страницу панели управления по адресу /manager. После авторизации будет доступно окно для управления ресурсами.
Для добавления раздела на сайт необходимо создать ресурс в корне иерархии сайта (WEB). Для этого следует выделить корень иерархии - WEB и нажать правую клавишу мыши. В появившемся меню выбрать пункт "Создать > Дочерний документ". В поле заголовок ввести название нового раздела, а в поле содержимое ресурса информацию, которую необходимо отразить на главной странице нового раздела.
После добавления ресурса, в главном меню сайта появится новый требуемый раздел. Меню создания раздела представлено на рисунке 6.1.
Рисунок 6.1 - создание нового раздела
6.3 Создание подраздела
Под подразделом, в понятии сайта, понимается следующим за разделом в иерархии сайта ресурс. Каждый раздел сайта имеет некоторое число подразделов.
Для создания подраздела необходимо правой кнопкой мыши нажать на ресурсе раздела, после появления меню выбрать "Создать > Дочерний документ" и аналогично созданию раздела заполнить необходимые поля - заголовок и содержимое.
Подразделы также могут содержать вложенные ресурсы, но они не будут отображены в меню, дополнительное вложение нужно для организации логической иерархии материалов на сайте.
6.4 Управление фотогалереей
Управление фотогалереей происходит из панели управления сайтом. Для доступа к галерее в панели управления следует перейти на страницу "Компоненты > Gallery". На странице управления галерей доступны такие действия как создание альбома, удаление альбома, редактирование альбома.
Для добавления нового альбома в фотогалерею на странице управления необходимо нажать кнопку "Создать альбом", далее в появившемся окне набрать имя альбома и отметить чекбоксы "Активен" и "Видимый" и после нажать "Сохранить".
Для добавления фотографий в альбом или удаления лишних, требуется выделить нужный альбом левой клавишей мыши. Затем на странице редактирования альбома выполнить требуемые действия.
7. Оценка качества продукта
В процессе разработки программного обеспечения необходимо учитывать то, что труд разработчиков обладает элементом творчества и довольно сложно оценить и измерить качество работы. Поэтому необходимо распределить трудовые ресурсы таким образом, чтобы достичь поставленных при проектировании целей в установленные для выполнения сроки. Для этого необходимо верно установить сроки выполнения работ, определить трудозатраты, назначить исполнителей и ресурсы таким образом, чтобы план выполнения работ соблюдался.
7.1 Определение состава работ
Работы по разработке программного обеспечения можно разбить на следующие этапы:
§ подготовительный этап;
§ проектирование;
§ программирование;
§ этап отладки и тестирования системы;
§ заполнение информацией;
§ составление документации;
Технология проведения исследований и разработок может быть представлена в виде перечней работ, выполняемых в определённой последовательности.
7.2 Определение трудоёмкости разработки
Под трудоёмкостью понимаются затраты рабочего времени на разработку проекта. Все применяемые методы оценки трудоёмкости сводятся к трем группам: экспертные, опытно-статистические, аналитические.
Расчёт трудоёмкости разработки дипломного проекта целесообразно проводить методом экспертной оценки.
На решение поставленной задачи заданы ограничения следующие ограничения:
Время выполнение поставленной задачи - 4 месяца.
Расчёт трудоёмкости разработки производится по формуле (1).
(1)
где ti - трудоемкость работ по стадиям проектирования, n - количество стадий проектирования.
Пользуясь собственным опытом и знаниями, определим максимальное и минимальное время необходимое для разработки каждого пункта, а исходя из них ожидаемое время. Ожидаемое время определяется по формуле (2).
(2)
Затраты времени на каждую стадию разработки проекта представлены в таблице 3.
Таблица 3 - Затраты времени по стадиям разработки проекта
Стадия разработки |
tmin, чел. дни |
tmax, чел. дни |
Ожидаемые затраты времени, чел. дни |
|
Подготовительный этап |
5 |
7 |
6 |
|
Проектирование |
10 |
30 |
20 |
|
Программирование |
30 |
55 |
40 |
|
Этап отладки и тестирования |
25 |
30 |
27 |
|
Заполнение информацией |
30 |
40 |
35 |
|
Составление документации |
7 |
12 |
9 |
|
Итого: |
107 |
174 |
137 |
Работы по выполнению поставленной задачи распределим между руководителем (проектирование, общего руководство и работа с заказчиками) и программистом (техническая разработка и составление документации). Распределение объёмов работы между исполнителями приведено в таблице 4.
Таблица 4 - Распределение объёмов работы
Этапы разработки |
Трудоёмкость чел-дн. |
Исполнители |
Доля участия,% |
Фонд времени, дн. |
|
Подготовительный этап |
6 |
Руководитель |
50 |
3 |
|
Программист |
50 |
3 |
|||
Проектирование |
20 |
Руководитель |
30 |
6 |
|
Программист |
70 |
14 |
|||
Программирование |
40 |
Программист |
100 |
40 |
|
Отладка и тестирование |
27 |
Руководитель |
40 |
11 |
|
Программист |
60 |
16 |
|||
Заполнение информацией |
30 |
Руководитель |
40 |
12 |
|
Программист |
60 |
18 |
|||
Составление документации |
9 |
Руководитель |
25 |
2 |
|
Программист |
75 |
7 |
|||
Итого |
132 |
Таким образом, суммарный объем всех выполняемых работ составляет 132 чел. дня.
7.3 Оценка качества проекта
В целях определения качества программного обеспечения воспользуемся методикой комплексных показателей (характеристик), которая заключается в применении конкретного задокументированного критерия оценки к конкретному программному модулю, пакету или продукции.
Критерий оценки качества ПО - набор определённых и задокументированных правил и условий, которые используются для решения о приемлемости общего качества конкретной программной продукции. Качество представляется набором установленных уровней, связанных с программной продукцией.
В качестве метода оценки будем применять метод начисления баллов по каждой характеристике, после чего по среднему баллу можно будет судить о качестве разрабатываемого программного продукта. Для определения уровня ранжирования воспользуемся 10-балльной системой. Всё это определяет ГОСТ РИСО/МЭК 9126-93 "Информационная технология. Оценка программного продукта. Характеристики качества и руководство по их применению".
Программное обеспечение может быть оценено следующими характеристиками:
1. Функциональные возможности
Для оценки функциональных возможностей применяются следующие параметры:
- Пригодность - атрибут программного обеспечения, показывающий наличие и соответствие набора функций конкретным задачам. Разрабатываемая система отвечает требованиям, которые ставились в техническом задании дипломного проекта. Оценка пригодности проекта - 10 баллов.
- Правильность - атрибут программного обеспечения, показывающий обеспечение правильности соответствия результатов или эффектов. Правильность - 10 баллов.
- Согласованность - атрибут программного обеспечения, который заставляет программу придерживаться соответствующих стандартов или соглашений, положений, законов или подобных рекомендаций. Общий вид, интерфейс соответствуют принятым стандартам для интернет-приложений (Консорциум Всемирной паутины (World Wide Web Consortium, W3C)). Согласованность - 10 баллов.
- Защищенность - атрибут программного обеспечения, относящийся к его способности предотвращать несанкционированный доступ, случайный или преднамеренный, к программе и данным. Проектом предусматривается защита данных, использующихся в приложении, от несанкционированного доступа, оценим защищенность в 9 баллов.
- Способность к взаимодействию - атрибут ПО, относящийся к способности его взаимодействовать с конкретными системами. Система взаимодействует с необходимыми для ее работы системами через соответствующий клиент (браузер). Способность к взаимодействию - 10 баллов.
2. Надёжность
Оценим надёжность программы с помощью следующих критериев.
- Стабильность - атрибут программного обеспечения, относящийся к частоте отказов при ошибках в программном обеспечении. За время тестирования программы были обнаружены некоторые отказы и ошибки, вызванные ошибками при разработке системы. Обнаруженные ошибки были исправлены. Стабильность программы можно оценить в 8 баллов.
- Устойчивость к ошибке - атрибут программного обеспечения, относящийся к его способности поддерживать определенный уровень качества функционирования в случаях программных ошибок или нарушения определенного интерфейса. В программе проверяются на корректность все данные, поступающие от пользователя, а также предусмотрена обработка исключений при возникновении ошибок в работе сервера или других исключительных ситуаций. Оценка устойчивости к ошибкам - 8.
- Восстанавливаемость - атрибут программного обеспечения, относящийся к его возможности восстанавливать уровень качества функционирования и восстанавливать данные, непосредственно поврежденные в случае отказа, а также к времени и усилиям, необходимым для этого. Оценка восстанавливаемости - 9.
3. Практичность
Оценим практичность программы с помощью следующих критериев.
- Понятность - атрибут программного обеспечения, относящийся к усилиям пользователя по пониманию общей логической концепции и ее применяемости. Оценка понятности - 10 баллов.
- Обучаемость - атрибут программного обеспечения, относящийся к усилиям пользователя по обучению его применению. Система рассчитана на пользователей, имеющих опыт работы в интернете. Обучаемость - 10 баллов.
- Простота в использовании - атрибут программного обеспечения, относящийся к усилиям пользователя по эксплуатации и оперативному управлению. Оценка простоты в использовании - 10 баллов.
4. Эффективность
Для оценки эффективности применяются следующие параметры:
- Характер изменения во времени - атрибут программного обеспечения, относящийся к временам отклика и к скоростям выполнения его функций. Время подготовки, вывода информации, а также время обработки вводимых данных зависит от вычислительной мощности компьютера, вычислительной мощности сервера и скорости интернета пользователя. Оценка - 9 баллов.
- Характер изменения ресурсов - атрибут программного обеспечения, относящийся к объёму используемых ресурсов и продолжительности такого использования при выполнении функций. Оценка характера изменения ресурсов - 10 баллов.
5. Сопровождаемость
Оценим сопровождаемость программы с помощью следующих критериев.
- Изменяемость - атрибут программного обеспечения, относящийся к усилиям, необходимым для модификации, устранению отказа или для изменения условий эксплуатации. Для внесения изменений в консистенцию элементов системы необходима правка исходных кодов. При небольших изменениях взаимодействие с исходным кодом является необязательным. Оценка изменяемости - 9 баллов.
- Устойчивость - атрибут программного обеспечения, относящийся к риску от непредвиденных эффектов модификации. Оценка устойчивости - 7 баллов.
- Анализируемость - атрибут ПО, относящийся к усилиям необходимым для диагностики недостатков или случаев отказов, или определения составных частей для модернизации. Анализируемость - 10 баллов.
- Тестируемость - атрибут ПО, относящийся к усилиям, необходимым для проверки модифицированного ПО. Тестируемость - 10 баллов
6. Мобильность
Оценку мобильности проведём по следующим показателям.
- Адаптируемость - атрибут программного обеспечения, относящийся к удобству его адаптации к различным конкретным условиям эксплуатации, без применения других действий или способов, кроме тех, что предназначены для этого в рассматриваемом программном обеспечении. Оценка адаптируемости - 9.
- Простота внедрения - атрибут программного обеспечения, относящийся к усилиям, необходимым для внедрения программного обеспечения в конкретное окружение. Для использования системы требуется минимальные настройки администраторов. Оценка простоты внедрения - 10 баллов.
- Взаимозаменяемость - атрибут программного обеспечения, относящийся к простоте и трудоёмкости его применения вместо другого конкретного программного средства в среде этого средства. Переход на применение разрабатываемого продукта вместо ранее использовавшихся программ не является проблематичным. Оценка - 10 баллов.
- Соответствие - атрибут ПО, который заставляет программу подчиняться стандартам или соглашениям, относящимся к мобильности. Программа использует стандартное ПО и подчиняется соглашениям, принятым в вышестоящем проекте. Соответствие - 10 баллов. Оценка проекта проводилась разработчиком и руководителем проекта.
Результаты экспертной оценки занесены в таблицу 5.
Таблица 5 - Оценка качества программного обеспечения
Атрибут |
Балл |
|
1 |
2 |
|
Пригодность |
10 |
|
Правильность |
10 |
|
Согласованность |
10 |
|
Защищенность |
9 |
|
Способность к взаимодействию |
10 |
|
Стабильность |
8 |
|
Устойчивость к ошибке |
8 |
|
Восстанавливаемость |
9 |
|
Понятность |
10 |
|
Обучаемость |
10 |
|
Простота в использовании |
10 |
|
Характер изменения во времени |
9 |
|
Характер изменения ресурсов |
10 |
|
Изменяемость |
9 |
|
Устойчивость |
7 |
|
Анализируемость |
10 |
|
Тестируемость |
10 |
|
Адаптируемость |
9 |
|
Простота внедрения |
10 |
|
Взаимозаменяемость |
10 |
|
Соответствие |
10 |
|
Средний балл |
9,43 |
В результате проделанной работы сайт компании "ГИК" позволяет эффективно добавлять новые разделы, публиковать новости и акции, добавлять новые работы в портфолио, отправлять информацию или запрос пользователей администратору сайта (форма обратной связи) и размещать отзывы заказчиков.
Сайт имеет адаптивный дизайн, поэтому может без проблем отображаться как на стационарных компьютерах, так же на планшетах и телефонах без модификации шаблона оформления.
По экспертной оценке, сайт компании "ГИК" получил средний бал 9,4, что говорит о его функциональности, удобности в использовании и соответствует всем современным стандартам.
Заключение
Таким образом поставленные нами задачи были выполнены, а именно:
1. Проанализированы существующие программные решения
§ Разработка собственного ядра сайта;
§ Использование готовой системы управления сайтом;
2. Разработана архитектура сайта
Сайт компании "ГИК" состоит из 6 основных страниц:
§ главная страница
§ услуги
§ компания
§ портфолио
§ события
§ контакты
3. Разработана структура данных и необходимые программные модули;
4. Проведены экспериментальное тестирование и отладка;
5. Внедрено административное редактирование сайта;
6. Дана конечная оценка качества продукта
В ходе дипломного проекта был спроектирован и введён, в эксплуатацию сайт компании "ГИК". На начальном этапе был проведён анализ доступных способов решения проблемы создания сайта и выбран оптимальный.
При разработке проекта особое внимание уделялось актуальности используемых WEB-технологий, привлекательности интерфейсов, надёжности, понятности и поддержке на разных видах устройств.
Разработанный программный продукт соответствует требуемым стандартам.
При проектировании было произведено нагрузочное тестирование системы, была сохранена работоспособность при всех уровнях нагрузки.
Список использованной литературы
1. Как создать движок для сайта [Электронный ресурс] MyRusakov.ru [Офиц. сайт] URL: https://myrusakov.ru/php-create-engine.html (дата обращения 11.06.2016)
2. Joomla! [Офиц. сайт] URL: https://www.joomla.org/ (дата обращения 11.06.2016)
3. Joomla.ru [Офиц. сайт] URL: http://joomla.ru/ (дата обращения 11.06.2016)
4. Drupal [Офиц. сайт] URL: https://www.drupal.org/ (дата обращения 12.06.2016)
5. TYPO3 [Офиц. сайт] URL: https://typo3.org/ (дата обращения 13.06.2016)
6. 1С-Битрикс [Офиц. сайт] URL: http://www.1c-bitrix.ru/ (дата обращения 13.06.2016)
7. MODX [Офиц. сайт] URL: http://modx.com/ (дата обращения 14.06.2016)
8. MODX [Электронный ресурс] Википедия - свободная энциклопедия [Офиц. сайт] URL: https://ru.wikipedia.org/wiki/MODX (дата обращения 14.06.2016)
9. ГИК [Офиц. сайт] URL: https://gik35.ru/ (дата обращения 14.06.2016)
10. Bootstrap [Офиц. сайт] URL: http://getbootstrap.com/ (дата обращения 14.06.2016)
11. Ingate [Офиц. сайт] URL: http://promo.ingate.ru/ (дата обращения 14.06.2016)
Размещено на Allbest.ru
Подобные документы
Актуальность создания фирменного web-сайта. Разработка, внедрение web-сайта под названием "Удачная постройка". Анализ существующих программных решений, выбор инструментальных средств разработки. Архитектура сайта, структура данных. Тестирование и отладка.
дипломная работа [4,7 M], добавлен 19.01.2017Выбор сред разработки для реализации сайта. Основная концепция и содержание веб-сайта. Роль дизайна сайта в его создании и определение основных требований к его содержанию и внешнему виду. Особенности разработки удобного и красивого интерфейса сайта.
курсовая работа [686,4 K], добавлен 13.06.2022Изучение теоретических основ создания сайта. Выбор инструментальных и программных средств для создания сайта кафедры; разработка структуры и дизайна, программной документации; напыление контентом. Расчет себестоимости, затрат на внедрение и эксплуатацию.
дипломная работа [1,3 M], добавлен 24.09.2015Анализ предметной области и функций сайта. Разработка структуры базы данных, структуры и дизайна web-сайта. Описание установки CMS "Joomla!" и программной оболочки Denwer, создание гостевой книги, галереи и карты Google, результаты их тестирования.
дипломная работа [2,3 M], добавлен 19.01.2017Основы моделирования и разработки Web-сайтов. Обзор и сравнительный анализ языков программирования. Фреймворки, используемые при создании сайта. Разработка графического дизайна, моделирование и создание Web-сайта, руководство по администрированию.
курсовая работа [1,7 M], добавлен 07.11.2013Разработка и программная реализация сайта и базы данных, наполнение базы данных тестовой информацией о товарах. Инструментальные средства создания сайта. Организация тестирования сайта, модуль визуализации интерфейса. Создание запросов в базе данных SQL.
курсовая работа [1,4 M], добавлен 24.12.2012Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.
курсовая работа [1,0 M], добавлен 09.01.2014Изучение теоретических основ создания сайта. Обоснование необходимости разработки сайта кафедры уголовного, административного права и процесса. Выбор инструментальных и программных средств. Расчет себестоимости, затрат на внедрение и эксплуатацию сайта.
дипломная работа [2,3 M], добавлен 13.10.2015Методы создания сайта; выбор и сравнение программных платформ. Разработка структуры и дизайна сайта. Установка Joomla!, настройка расширений и выбор хостинга. Аппаратно-программные способы и средства обеспечения информационной безопасности веб-сайта.
дипломная работа [3,6 M], добавлен 08.04.2014Экономическое обоснование создания программного продукта web-сайта мебельной компании. Применение гипертекстового языка разметки HTML, технологии CSS и JavaScript совместно с библиотекой JQuery. Использование Интернет-технологий в создании сайта.
дипломная работа [8,1 M], добавлен 30.11.2014