Разработка сайта для фирмы "ГОСТстрой"

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

Введение

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

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

Основными преимуществами использования Web-сайтов организациями являются:

­ предоставление актуальной информации об организации;

­ предоставление пользователям разнообразных услуг (в зависимости от профиля организации, в том числе образовательные);

­ реклама организации в интернете;

­ предоставление доступа к информационным ресурсам организации.

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

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

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

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

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

- ознакомиться с современными Интернет - технологиями и их использованием в настоящей разработке;

- выявить методы и способы представления на web-страницах различных видов информации;

- ознакомиться с основными правилами и рекомендациями по разработке и созданию web-сайтов;

- определить структуру web-страниц;

- выбрать стратегию разработки и создания web-сайта;

- изучить средства создания сайтов и языки программирования в Интернет.

1. Разработка эскизного проекта

1.1 Назначение и область применения

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

1.2 Постановка задачи

Целью дипломного проекта является разработка сайта для фирмы «ГОСТстрой».

Данный сайт будет обеспечивать реализацию следующих задач:

­ привлечение потенциального клиента из сети Интернет;

­ предоставление информации об услугах и товарах компании;

­ просмотр фотогалереи;

­ обратная связь с фирмой.

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

1.3 Планирование разработки сайта

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

Сайт будет представлять собой ресурс в сети интернет для фирмы «ГОСТстрой».

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

Далее производится разработка макета сайта. На данном этапе описывается расположение элементов на страницах сайта.

Следующим шагом является разработка дизайна сайта и его вёрстка.

1.4 Выбор состава технических и программных средств

Для создания данного сайта будут использованы:

­ язык гипертекстовой разметки - HTML;

­ язык описания внешнего вида документа, написанного с использованием языка разметки -CSS;

­ библиотека работы c JavaScript-jQuery;

­ среда программирования - Notepad++;

­ графический растровый редактор - Adobe Photoshop;

­ используемый для тестирования браузер - Google Chrome,Mozilla Firefox, Opera.

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

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

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

Была выбрана библиотека работы c JavaScript - jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу

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

­ подсветка синтаксиса;

­ сворачивание кода;

­ авто дополнение;

­ закладки;

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

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

­ сравнение файлов;

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

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

­ поддержка и конвертирование кодировок ANSI, UTF-8 и UCS-2;

­ блоковое выделение текста, одновременное выделение нескольких разных мест (с CTRL);

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

Преимущества браузера Google Chrome -- удобный и ненавязчивый интерфейс. Одно из главных преимуществ этого браузера -- скорость.

2. Разработка сайта

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

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

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

Рисунок 2 - Схема взаимодействия страниц

2.2 Разработка макета сайта

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

Обработка фотографий размещенных на сайте производилась с использованием графического редактора AdobePhotoshop.

При создании дизайна сайта были задействованы такие свойства CSS как:

­ margin-определяет отступы снаружи для элемента;

­ padding - определяет внутренние отступы для элемента;

­ background-color - определяет цвет фона для элемента;

­ font-family - определяет семейство шрифтов для текста;

­ font-size - определяет размер шрифта элемента;

­ text-align - выравнивает текст;

­ color - определяет цвет текста;

­ width - устанавливает ширину элемента;

­ height - устанавливает высоту элемента;

­ font-size - устанавливает высоту шрифта;

­ border - устанавливает границы для элементов;

­ line-height - устанавливает высоту для строковых элементов;

­ display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе;

­ float - выравнивание элемента по стороне.

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

.fullwidthbanner-container {

position: relative;

width: 100% !important;

max-height: 580px !important;

padding: 0;

overflow: hidden;

}

.tp-caption.pictures-title {

font-size: 48px;

font-weight: bold;

line-height: 48px;

color: #fff;

text-transform: uppercase;

}

.tp-caption.pictures-subtitle {

font-size: 24px;

font-weight: bold;

color: #ffc600;

text-transform: uppercase;

}

.tp-caption.pictures-content {

font-size: 13px;

font-weight: 400;

line-height: 24px;

color: #ffffff;

}

.tp-caption.pictures-btn {

display: inline-block;

padding: 13px 5px;

font-family: 'Lato', sans-serif;

font-size: 16px;

font-weight: 600;

color: #fff;

text-shadow: 0 1px 0 #969696;

text-transform: uppercase;

background-color: #8ebd00;

background-image: none;

border-radius: 35px;

}

.tp-caption.pictures-btn:hover,

.tp-caption.pictures-btn:focus {

background-color: #98CA00;

}

.flexslider-container {

position: relative;

padding-right: 0;

padding-left: 0;

overflow: hidden;

}

.flexslider-container .flexslider {

margin-bottom: 0;

}

.flexslider-container .flexslider .slides li > index_files {

height: 500px;

}

.flexslider-container .captions.v2 {

top: 25%;

left: 7%;

text-align: left;

}

.flexslider-container .captions.v3 {

top: 27%;

right: 7%;

left: auto;

text-align: left;

}

.flexslider-container .slider-images.v2 {

position: absolute;

top: 18%;

right: auto;

left: 5%;

width: auto\9;

max-width: 100%;

}

.flexslider-container .slider-images {

position: absolute;

top: 15%;

right: 4%;

width: auto\9;

max-width: 100%;

}

.flexslider-container .captions {

position: absolute;

top: 20%;

left: 28%;

color: #fff;

text-align: center;

}

.flexslider-container .captions .title {

margin-top: 20px;

font-size: 48px;

font-weight: bold;

line-height: 48px;

color: #fff;

text-transform: uppercase;

}

.flexslider-container .captions .subtitle {

font-size: 24px;

font-weight: bold;

color: #fff0b7;

text-transform: uppercase;

}

.flexslider-container .captions .description {

margin-top: 15px;

font-family: 'Lato', sans-serif;

font-size: 13px;

font-weight: 400;

line-height: 24px;

color: #ffffff;

}

.flexslider-container .captions .btn-success {

display: inline-block;

padding: 13px 35px;

margin-top: 20px;

font-family: 'Lato', sans-serif;

font-size: 16px;

font-weight: 600;

color: #fff;

text-shadow: 0 1px 0 #969696;

text-transform: uppercase;

background-color: #8ebd00;

background-image: none;

border-radius: 35px;

}

Позиционирование блочных элементов (в данном случае основным элементом выступает div) осуществлялось с помощью свойств display, margin и padding.

Макет сайта представлен на рисунке 3.



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

2.3 Модуль обработки изображений в Adobe Photoshop

Для обработки изображений был использован редактор Adobe Photoshop.

Редактор Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems.

Основные возможности этой программы:

­ обработка цифровых и отсканированных фотоснимков, цветокоррекция, спецэффекты, устранение различных дефектов съемки;

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

­ фотомонтаж, составление коллажей;

­ обработка эскизов, нарисованных вручную;

­ улучшенные инструменты для работы с текстом. Используя различные инструменты, эффекты и фильтры можно получить очень интересные эффекты;

­ создание графических элементов дизайна и оформления для сайтов, документов, печати и полиграфии;

­ подготовка изображений к печати или публикации в Интернете.

Настройка Adobe Photoshop для редактирований изображений, для этого необходимо открыть или создать новый документ (Файл Новый или CTRL+N) (рисунок 4).

Рисунок 4 - Вид окна Новый документ

Следующим шагом необходимо установить цвет переднего/заднего плана, для этого необходимо нажать клавишу D, так же можно изменить цвет местами с помощью клавиши X (есть так же соответствующая кнопка в низу панели) (рисунок 5).

Рисунок 5 - Установка цвета

Затем необходимо установить галочку Auto-Select(Автоматически выбрать) и в выпадающем меню выбрать Layer(слои) - данная настройка позволит выбрать любой слой по клику на нем (рисунок 6).

Рисунок 6 - Вид окна настройка слоя

И последним шагом включить шкалу-линейку для документа Views-Rules (Вид-Линейка или CTRL+R) должна появиться горизонтальная и вертикальная школа-линейка. Как она выглядит показано на рисунке 7.

Рисунок 7 - Вид шкалы линейка

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

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

Рисунок 8 - Вид обрезки изображения

Рисунок 9 - Вид обрезки изображения с параметрами

­ кадрирование с заданными параметрами (поля: Width (ширина), Height (высота), Resolution (разрешение).), когда задаются параметры конечного изображения с учетом конкретных требований (рисунок 9);

­ удаление элементов с сохранением параметров документа (ширины и высоты), когда необходимо убрать с фотографии элемент изображения, оставив задний фон и при этом, не меняя формат фотографии, т.е. ширина и высота должны остаться прежними.

2.4 Разработка программной части (спецификация)

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

Весь код прописывается в тегах:

<html>

…

</html>

Для написания галереи была использована библиотека JavaScript JQuery. JQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Библиотека jQuery умеет:

­ обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими;

­ работать с событиями;

­ легко осуществлять различные визуальные эффекты;

­ работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем);

­ имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.

Серверная часть сайта описана в таблице 2.

Таблица 2 - Описание файлов сайта

Файл	Формат данных	Описание данных
index.html contact.html foto.html preimushestva.html price.html prod.html technologii.html vopros-otvet.html	Устанавливает дополнительные правила на внутреннее устройства файла	Главный файл пользовательской части, содержит меню и основную часть вывода информации. Подключает другие скрипты.
jquery.min	Сценарий JavaScript	Библиотека JavaScript фокусирующая на взаимодействии JavaScript и HTML

Макет главной страницы сайта представлен в таблице 3.

Таблица 3 - Главная страница сайта

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Название элемента страницы	Назначение	Расположение
Основное содержимое	Содержится	Посередине страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Услуга» представлен в таблице 4.

Таблица 4 -Страница «Услуга»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Содержится описание услуг фирмы	В центральной части страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Технология» представлен в таблице 5.

Таблица 5 -Страница «Технология»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Содержится описание технологии строительства фундамента на винтовых сваях	В центральной части страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Преимущества» представлен в таблице 6.

Таблица 6 -Страница «Преимущества»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Описывается преимущества свайно-винтового фундамента	В центральной части страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Прайс» представлен в таблице 7.

Таблица 7 - Страница «Прайс»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Содержится прайс на сваи и услуги фирмы	В центральной части страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Фотогалерея» представлен в таблице 8.

Таблица 8 - Страница «Фотогалерея»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Содержатся фотографии	В центральной части страницы
Кнопка «Назад»	Возврат к альбомам	В нижней части страницы, в левом углу
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Вопрос-ответ» представлен в таблице 9.

Таблица 9 - Страница «Вопрос-ответ»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Содержатся фотографии	В центральной части страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

Макет страницы сайта «Контакты» представлен в таблице 10.

Таблица 10 -Страница «Контакты»

Название элемента страницы	Назначение	Расположение
Логотип	Логотип сайта	В верхней части страницы, по левому краю
Меню	Меню навигация сайта	В верхней части страницы, по центру
Основное содержимое	Содержится контактная информация	В центральной части страницы
Содержимое подвала	Содержится контактные данных фирмы	В нижней части страницы, в левом углу
Содержимое подвала	Ссылка на вопрос-ответ	В нижней части страницы, в правом углу

2.5 Пользовательская часть сайта

В разделе «Главная» содержатся следующие файлы:

­ Index.html - файл, отвечающий за непосредственное формирование страницы;

На рисунке 10 предоставлен макет главной страницы.

Рисунок 10 - Макет главной страницы

На рисунке 11 представлен скриншот главной страницы сайта.



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

­ contact.html - файл, отвечающий заобратную связь с фирмой (рисунок 12);

Рисунок 12 - Страница «Контакты»

­ foto.html- файл, отвечающий за просмотр фото фирмы (рисунок 13);

Рисунок 13 - Страница «Фотогалерея»

­ preimushestva.html- файл, отвечающий за преимущества свайно-винтового фундамента (рисунок 14);

Рисунок 14 - Страница «Преимущества»

­ price.html- файл, отвечающий запросмотр цен на винтовые сваи и услуги фирмы (рисунок 15);

Рисунок 15 - Страница «Прайс»

­ prod.html- файл, отвечающий за просмотр услуг фирмы (рис. 16);

Рисунок 16 - Страница «Услуга»

­ technologii.html- файл, отвечающий за технологию строительства фундамента на винтовых сваях (рисунок 17);

Рисунок 17 - Страница «Технология»

­ vopros-otvet.html- файл, отвечающий за часто задаваемые вопросы (рисунок 18) .

Рисунок 18 - Страница «Вопрос-ответ»

3. Тестирование сайта

Тестирование сайта будет выполняться методом черного ящика.Тестирование черного ящика - это тестирование функционального поведения программного продукта с точки зрения внешнего мира (код программного продукта не анализируется). Под черным ящиком понимается объект исследования, внутреннее устройство которого неизвестно. Понятие черного ящика предложено У.Р.Эшби. В кибернетике оно позволяет изучать поведение систем, то есть их реакции на разнообразные внешние воздействия и в то же время абстрагироваться от их внутреннего устройства.

В данном разделе будет протестирована функциональная работоспособность сайта. Тестирование представлено в таблице 11.

Таблица 11 - Тестирование сайта методом черного ящика

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

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

4. Руководство пользователя

4.1 Общие сведения

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

4.2 Инструкция по работе

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

Чтобы ознакомиться с представляемой услугой необходимо перейти на страницу «Услуга».

Чтобы ознакомитьсяс местом нахождения фирмы «ГОСТстрой», необходимо перейти на страницу «Контакты». На данной странице предоставляется карта с местом нахождения офиса и формой для обратной связи с фирмой.

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

Для поиска по сайту следует воспользоваться встроенным средством поиска в браузере. Для этого нажмите кнопку поиска в браузере (в GoogleChrome по умолчанию это F3) на необходимой для поиска странице, введите искомое слово или словосочетание и нажмите «Найти», чтобы перейти к следующему найденному элементу снова требуется нажать клавишу «F3» на клавиатуре.

Чтобы завершить работу с сайтом требуется закрыть браузер или вкладку со страницей сайта

5. Технико-экономическое обоснование проекта

5.1 Определение затрат труда на разработку программного продукта

Затраты на создание программного продукта складываются из расходов по оплате труда разработчика программы, расходов по оплате машинного времени при отладке программы, а также затрат на электроэнергию по освещению и определяются по формуле:

З_спп = З_зп +З_отч +З_мв + З_пр, (1)

где З_спп - затраты на создание программного продукта, руб.;

З_зп - затраты на оплату труда разработчика программы, руб.;

З_отч- отчисления на социальные нужды, руб.;

З_мв - затраты на оплату машинного времени, руб.;

З_пр- прочие затраты, руб.

Расходы на оплату труда разработчика программы определяются путем умножения трудоёмкости создания программного продукта на среднюю часовую оплату программиста:

З_зп = t * T_час, (2)

где t - трудоемкость создания программного проекта, чел-час;

Т_час - средняя часовая оплата программиста, руб/час.

Затраты труда на разработку рассчитаны методом уточненной модели.

Трудоемкость разработки программного обеспечения рассчитывается по формуле:

t = t_и + t_а + t_б + t_п + t_д + t_от, (3)

где t_и - затраты труда на изучение описания задачи, чел-час.;

t_а - затраты труда на разработку алгоритма решения задачи, чел-час;

t_б - затраты труда на разработку логики работы приложения, чел-час;

t_п - затраты труда на разработку интерфейса, чел-час;

t_д - затраты труда на подготовку документации задачи, чел-час;

t_от - затраты труда на отладку программы на ЭВМ при комплексной отладке задачи, чел-час.

Составляющие затрат, в свою очередь, можно вычислить через условное число операторов (Q). Условное число команд определяется по формуле:

Q = qc (1 + р), (4)

где q - число операторов (исходных команд);

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

р - коэффициент коррекции программы в ходе её разработки, зависит от точности и корректности поставленной задачи (p = 0,06).

В разработанной программе число операторов составляет около 2000 (q=2000). Коэффициент сложности задачи с - характеризует относительную сложность программы по отношению к так называемой типовой задаче, реализующей стандартные методы решения, сложность которой принята равной единице (величина с - лежит в пределах от 1,25 до 2). Для программного продукта, включающего в себя алгоритмы учета, отчетности, поиска сложность задачи возьмем коэффициент коррекции программы р - увеличение объема работ за счет внесения изменений в алгоритм или программу в результате уточнения ее описания, изменения состава и структуры информации, а также уточнений, вносимых разработчиками для улучшения качества самой программы без изменения постановки задачи (величина p находится в пределах от 0,05…0,1). С учётом того, что задача была поставлена достаточно чётко, возьмем коэффициент равным 0,05 (p = 0,05).

В результате по формуле (4) можно получить условное число операторов:

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

Затраты труда на подготовку описания задачи t₀точно определить невозможно, так как это связано с творческим характером работы. Примем данное значение равным 50 чел.-час. (t₀=50).

Затраты труда на изучение описания задачи t_и с учетом уточнения описания и квалификации программиста могут быть определены по формуле:

, (5)

где Q - условное число операторов;

k - коэффициент квалификации разработчиков алгоритмов и программ;

B - коэффициент увеличения затрат труда вследствие недостаточного или некачественного описания задачи.

Коэффициент квалификации разработчика k - это степень подготовленности исполнителя к порученной ему работе определяется в зависимости от стажа работы и составляет: для работающих до двух лет - 0,8. Разработчик, которому было поручено это задание, имел опыт работы по специальности до двух лет, поэтому примем А: = 0,8. Коэффициент увеличения затрат труда вследствие недостаточного описания задачи В зависит от качества постановки задачи, выданной для разработки, этот коэффициент в зависимости от сложности задачи принимается от 1,2 до 1,5. В связи с тем, что задачи, как правило требуют уточнения и некоторой доработки, поэтому примем В= 1,2. Далее по формуле (5) будут вычислены затраты труда на изучение описания задачи:

чел.-час.

Затраты труда на разработку алгоритма решения задачи рассчитывается по формуле:

, (6)

чел.-час.

Затраты труда на составление программы по готовой блок-схеме t_п определяются по формуле:

(7)

чел.-час.

Затраты труда на отладку программы на ЭВМ t_отл рассчитываются по следующей формуле:

, (8)

чел.-час.

Затраты труда на подготовку документации определяются по формуле:

, (9)

где t_др - затраты труда на подготовку материалов в рукописи, руб.;

t_до - затраты труда на редактирование, печать и оформление документации, руб.

Затраты труда на подготовку t_др вычисляется по формуле:

, (10)

чел.- час.

Затраты труда на редактирование t_до вычисляется по формуле:

(11)

-час.

Затраты труда рассчитываются по формуле (9):

чел.- час.

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

, (12)

где k_кор - коэффициент изменения трудоёмкости, значение которого берётся из таблицы 12.

Таблица 12 - Изменение трудоемкости в зависимости от уровня языка программирования

Уровень языка программирования	Характеристика языка программирования	Коэффициент изменения трудоемкости
1	Покомандный автокод-ассемблер	1,0
2	Макроассемблер	1,0
3	Алгоритмические языки высокого уровня	0,8 - 0,9
4	Алгоритмические языки сверхвысокого уровня	0,7 - 0,8

Выбранный для разработки язык HTML относится к алгоритмическим языкам высокого уровня, с учетом этого примем k_кор = 0,9.

Подставив полученные данные в формулу (3), получим общую трудоемкость разработки:

t= 50,00+51,17+56,87+52,50+85,30+39,81= 335,65 чел.-час.

Таким образом, общая трудоемкость программного продукта составила 335,65 чел-час.

5.2 Расчёт себестоимости разработки программного продукта

Калькуляция на разработку программного продукта включает следующие статьи:

­ основная заработная плата разработчиков;

­ дополнительная заработная плата разработчиков;

­ отчисления на социальные нужды;

­ расходы по отладке программы;

­ приобретение программных средств;

­ накладные расходы.

Средняя зарплата программиста в современных рыночных условиях может варьироваться в широком диапазоне. Для расчёта возьмём минимальную часовую оплату труда, которая составляет Т_час = 50 руб./час.

Заработная плата программиста рассчитывается по формуле (2) и составит:

З_зп = 335,65 50,00 = 16782,50 руб.

С заработной платы программиста необходимо сделать отчисления во внебюджетные государственные фонды. Общий тариф страховых взносов в 2015 году, согласно федерального закона от 24.07.2009 г. №212 - ФЗ «О страховых взносах в Пенсионный фонд Российской Федерации, Фонд социального страхования Российской Федерации, Федеральный фонд обязательного медицинского страхования», составляет 30%. Кроме того, тариф страховых взносов от несчастных случаев на производстве установлен для фирмы в размере 0,2%. Таким образом, совокупный тариф страховых взносов в государственные социальные внебюджетные фонды составляет 30,2%.

З_отч = 16782,50 0,302 = 5068,31 руб.

Затраты на оплату машинного времени при отладке программы определяются путём умножения фактического времени отладки программы на цену машино-часа арендного времени:

З_мв = С_час t _эвм, (13)

где С_час - цена машино-часа арендного времени, руб./час;

t_эвм - фактическое время отладки программы на ЭВМ, чел-час.

Фактическое время отладки вычислим по формуле:

t_эвм = t_п + t_отл+ t_до (14)

85,30+17,06=154,86 чел.-час.

Цену машино-часа найдём по формуле:

С_час = З_эвм / Т_эвм, (15)

где З_эвм - полные затраты на эксплуатацию ЭВМ в течение года, руб.;

Т_эвм - действительный годовой фонд времени ЭВМ, час/год.

Общее количество дней в году - 365. Число праздничных и выходных дней - 118. Время простоя в профилактических работах определяется как еженедельная профилактика по 4 часа. Количество недель в году примем равным 52.

Итого годовой фонд рабочего времени ЭВМ составляет:

часов.

Полные затраты на эксплуатацию ЭВМ можно определить по формуле:

З_эвм = З_ам + З_эл + З_вм, (16)

где З_ам - амортизационные отчисления, руб.;

З_эл- издержки на электроэнергию, потребляемую ЭВМ, руб.;

З_вм - издержки на вспомогательные материалы, руб.

Полная балансовая стоимость компьютера (Ф_он), на котором велась работа, составляет 19000,00 руб.

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

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

Годовые издержки на амортизацию определяются по формуле:

З_ам = (Ф_он Н_а) / 100, (17)

где Ф_он - стоимость предоставленных фондов, руб.;

Н_а - норма амортизации, которая составляет 20%.

руб.

Стоимость электроэнергии, потребляемой ЭВМ за год, определяется по формуле:

(18)

где Р_эвм - суммарная мощность ЭВМ, кВт,

С_эл - стоимость 1 кВт/ч электроэнергии, руб.

А - коэффициент интенсивного использования мощности машины.

Согласно техническому паспорту ЭВМ Р_эвм = 0,30 кВт, стоимость 1кВт/ч электроэнергии для предприятий, с 1 января 2015 года постановлением Агентства по тарифам и ценам Архангельской области от 29 декабря 2014 г. № 77-э/9 тариф на электроэнергию составляет 6 руб. 81 коп. за 1кВт/ч с учетом НДС.

Фирма «ГОСТстрой» не платит НДС, так как работает на едином налоге на вмененный доход.

Интенсивность использования машины А = 0,98.

Тогда расчётное значение годовых затрат на электроэнергию по формуле (18) составит:

=3539,78 руб_.

Затраты на материалы, необходимые для обеспечения нормальной работы ЭВМ составляют около 1 % от стоимости ЭВМ:

З_вм = 0,0119000,00 = 190,00 руб.

Полные затраты на эксплуатацию ЭВМ в течение года по формуле (16) составят:

З_эвм = 3800,00 + 3539,78 + 190,00 = 7529,78 руб.

Тогда цена машино-часа арендуемого времени по формуле (15) составит:

С_час = 7529,78 / 1768,00 = 4,25 руб.

Затраты на оплату машинного времени по формуле (13) составят:

З_мв = 4,25154,86 = 658,15 руб.

Прочие затраты определяются на размере 5% от всех затрат по формуле:

(19)

З_пр= (16782,50 + 5068,31 + 658,15) 5 / 95 = 1184, 68 руб.

Таким образом из проведенных расчетов можно определить все затраты, связанные с созданием программного продукта по формуле (1):

З_спп = 16782,50 + 5068,31 + 658,15 + 1184,68 = 23693,64 руб.

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

- на изучение описания задачи 50,00 чел-час;

- на разработку алгоритма решения задачи 0,80 чел-час;

- на разработку блок-схемы алгоритма 51,17 чел-час;

- на составление программы по готовой блок-схеме 56,87 чел-час;

- затрат труда на отладку программы на ЭВМ при комплексной отладке 52,50 чел-час;

- на подготовку документации 17,06 чел-час.

Общая трудоемкость программного продукта составляет 302,08 чел-час. В соответствие с принятой оплатой одного часа работы программиста и установленного государством размера отчислений на социальные нужды, затраты на оплату труда составили в сумме 5068,31 руб. Затраты на оплату машинного времени при отладке программы получены в размере 658,15 руб. Прочие затраты составляют 1184,68 руб.

Таким образом все затраты на создание программного продукта составили 23693,64 руб.

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

6. Организация охраны труда на предприятии

6.1 Требования безопасности перед началом работы

6.1.1 Проверить внешним осмотром и убедиться в исправности соединительных кабелей и шнуров, блока бесперебойного питания (ИБП), системного блока, монитора, клавиатуры.

6.1.2 Проверить состояние общего освещения рабочего места.

6.1.3 Не производить каких-либо работ по ремонту блока бесперебойного питания, системного блока, монитора, внешних устройств ПЭВМ.

6.1.4 Запрещается после включения ПЭВМ перемещать блок бесперебойного питания, системный блок, монитор, внешние устройства ПЭВМ.

6.1.5 Расположить клавиатуру, манипулятор “мышь” на рабочем месте с максимальным удобством для пользования, не допуская наличия в зоне работы лишних предметов.

6.2 Требования к безопасности во время работы

6.2.1 При работе оборудования все крышки и кожухи должны быть закрыты.

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

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

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

6.2.5 Руки, одежда и обувь персонала должны быть всегда сухими.

6.3 Требования безопасности в аварийных ситуациях

6.3.1 Каждый работник, обнаруживший или заметивший неисправность оборудования, представляющую опасность для людей, обязан сообщить об этом непосредственному руководителю.

6.3.2 При поражении электрическим током необходимо как можно скорее освободить пострадавшего от действия тока.

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

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

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

6.3.6 При обнаружении постороннего напряжения на рабочем месте необходимо немедленно прекратить работу и доложить непосредственному руководителю.

6.4 Требования безопасности по окончании работы

6.4.1 Необходимо привести в порядок рабочее место.

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

сайт photoshop серверный программный

Заключение

В ходе выполнения дипломного проекта был получен полнофункциональный сайт, полностью готовый к применению. Данный сайт ориентирован на клиентов фирмы «ГОСТстрой». Рассмотрены актуальные вопросы разработки и создания современного web-сайта компании, занимающейся строительством фундамента на винтовых сваях.

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

Все поставленные в дипломном проекте задачи были выполнены:

­ реализован красивый и современный дизайн;

­ реализована удобная и быстрая навигация по сайту;

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

­ реализована обратная связь с фирмой;

­ реализован просмотр фотогалереи.

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

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

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

Список сокращенных слов

HTML - Hyper Text Markup Language - язык разметки гипертекста

CSS - Cascading Style Sheets - каскадные таблицы стилей

ИБП - источник бесперебойного питания

ЭВМ - электронно-вычислительная машина

Список использованных источников

1 Веллинг, Л. HTML. Учебное пособие / Л.Веллинг, Л.Томсон. - Москва: Издательский дом «Вильямс», 2006. - 345 с.

2 Дунаев, В. В. Основы WEB-дизайна: самоучитель. - Санкт-Петербург: БХВ-Петербург, 2006. - 504 с.

3 Коггзолл, Д. CSS. Полное руководство. - Москва: Издательский дом «Вильямс», 2007. - 211 с.

4 Матросов, А. НТМL 4.0 / А. Матросов, А. Сергеев, М. Чаунин. - Санкт-Петербург: Питер, 1999. - 671 с.

5 Мержевич, В., Вёрстка веб-страниц. - Москва: Издательство «HTMLBOOKS», 2011. - 435 с.

6 Панфилов, К. По ту сторону веб-страницы. - Москва: ДМК «Пресс», 2008. - 323 с.

7 Пауэрс, Ш. Динамический HTML. - Москва: Лори, 1999. - 362 с.

8 Самков, Г.,jQuery. Сборник рецептов. -- Санкт-Петербург:Питер, 2010. - 416 с.

9 Хеслоп, Б. HTML с самого начала: для пользователей Windows. Самые необходимые сведения для начинающих web-дизайнеров. / Б. Хеслоп, Л. Бадник. - Санкт-Петербург: Питер, 1997. - 406 с.

10 Хоумер, А. Dinamic HTML: справочник. - Санкт-Петербург: Питер, 2000. - 510 с.

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