диплом новикова

Содержание
стр.
1.
2.
3.
4.
Введение ................................................................................................. 3
Социально-экономический раздел ....................................................... 6
2.1. Потребность в создании сайта ..................................................... 6
2.2. Характеристика сайта визитки ................................................. 10
2.3. Определение целевой аудитории сайта…………………………………….23
Научно-исследовательский раздел ..................................................... 14
3.1. Классификация сайтов .............................................................. 14
3.1.1. Классификация по технологиям, влияющим на дизайн и
функциональность ............................................................ 14
3.1.2. Классификация по их принадлежности ........................... 17
3.1.3. Классификация по величине, по уровню решаемых ими
задач.....................................................................................18
3.1.4. Классификация по типу информации и возможностей,
которые они предоставляют пользователям сети………….19
3.2. Основные виды структур веб-сайта .......................................... 20
3.2.1. Внешняя и внутренняя структуры …………………………………..21
3.2.2. Типовые структуры ………………………………………………………….22
3.3. Описание программного обеспечения...................................... 40
3.3.1. Обзор текстовых редакторов…………………………………………...43
3.3.2. Обзор FTP-клиентов………………………………………………………….44
3.4. Математическая модель проектируемого проекта..................42
3.4.1. Описание языка JavaScript ............................................... 45
3.4.2. Основы 3D графики…………………………………………………………46
Специальный раздел ........................................................................... 47
4.1. Обоснование выбора программного обеспечения……………...….49
4.1.1. Текстовой редактор Notepad++ …………………….…………..….47
4.1.2. FTP-клиент FileZilla…………………………………………………………..49
4.2. Обоснование выбора языка программирования………………….. 47
4.3. Описание структуры спроектированного сайта……………………….48
4.3.1. Подробное описание структуры сайта …………………………..47
4.3.2. Перечень файлов, их назначение……………..………….……….50
4.4. Классификация спроектированного сайта...................................51
4.5. Создание фотогалереи с использованием 3-D
компонентов……………………………………………………………………………….56
4.5.1.Описание фотогалереи……………………………………………………..57
4.5.2.Руководство программисту по эксплуатации
1
фотогалереи……………………………………………………………………………….64
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
4.6. Виды экранных форм………………………………………………………………….45
Экономический раздел ....................................................................... 80
5.1. Виды работ и расчет затрат времени на разработку сайта. ...... 80
5.2. Стоимость рабочего места специалиста-разработчика сайта .. 90
5.3. Потребность в материальных ресурсах и производственных
запасах на разработку сайта………………………………………………….…100
5.4. Расчет полной трудоемкости и затрат на оплату труда персонала
при разработке сайта………………………………………….……………………..67
5.5. Смета затрат на разработку пакета прикладных программ….…89
5.6. Потребность в оборотных средствах и в производственных
инвестициях в целом…………………………………………………………………78
5.7. Планирование стоимостной оценки сайта……………………………….98
5.8. Заключение………………………………………………..………………………………87
Раздел безопасности жизнедеятельности…. .................................... 100
6.1. Метеорологические условия на производстве. Рассчет
микроклимата ........................................................................... 100
6.2. Расчет концентрации пылевого аэрозоля ............................... 105
6.3. Расчёт освещения рабочего места…………………………………………….34
6.4. Шумоизоляция……………………………………………………………………………65
6.5. Электробезопасность………………………………………………………………….34
6.5.1. Защитное заземление………………………………………………………34
6.5.2. Расчет одиночных заземлителей…………………………………….54
6.6. Обеспечение пожаробезопасности………………………………………….56
6.7. Заключение…………………………………………………………………………….…68
Общие выводы ..................................................................................... 108
Литература .......................................................................................... 110
Список таблиц и рисунков (с указанием страниц) ........................... 111
Приложение 1. Тексты программ ..................................................... 112
Приложение 2. Формы входных документов .................................. 130
Приложение 3. Формы выходных документов ................................ 140
Приложение 4. Экранные формы ..................................................... 150
Приложение 5. Сеанс диалога ........................................................... 160
Приложение 6. Таблицы с результатами и графики ...................... 170
Приложение 7. Справки о внедрении проекта на предприятии ..... 180
2
1.Введение
Разработка сайта и управление им на сегодняшний день для
большинства предприятий становится насущной необходимостью. Сайт
выступает как средство коммуникации и привлечения целевой аудитории.
Для того, чтобы заявить о своем присутствии на рынке, необязательно
заказывать
создание
большого
структурированного
сайта.
Можно
ограничиться сайтом - визиткой, на котором будет кратко представлена вся
необходимая информация о компании или частном лице.
Сайт визитка
– это небольшой сайт, содержимое которого
ограничивается несколькими страницами. Чаще всего сайтом визиткой
пользуются небольшие компании и частные лица. Это обуславливается
низкой себестоимостью сайта и простотой разработки.
Несмотря на то, что сайт визитка является самым простым способом
представить информацию в сети Интернет, данный вид сайта может
выполнять очень важные функции в деятельности компании: привлечение
новых клиентов, распространение информации о товарах (услугах) компании
и контактной информации.
В связи с актуальностью проблематики, связанной с разработкой и
созданием web-сайтов, и была выбрана тема дипломной работы - разработка
сайта - фотогаллереи, с использованием 3D компонентов.
Задачами данного дипломного проекта являются:

Анализ отечественных и зарубежных аналогов сайтов-визиток

Создание дизайн-концепции web-сайта

Создание мультимедиа и 3D-элементов

Размещение материалов сайта на хостинге
Дипломный проект содержит шесть разделов.
В
социально-экономическом
разделе
подробно
описывается
характеристика сайта-визитки, обоснована потребность в разработке сайта, а
так же определена его целевая аудитория.
3
В третьем разделе описывается научно-исследовательская часть
дипломной работы. В данном разделе было рассмотрено несколько
современных
технологий
создания
такие
web-сайтов,
как
язык
гипертекстовой разметки html, каскадные таблицы стилей css, динамический
язык гипертекстовой разметки JavaScript. Представлена классификация
сайтов, описываются особенности их логический структур.
Специальный раздел содержит обоснование выбора программного
обеспечения и языка программирования,
так же детально описывается
классификация и структура спроектированного сайта. Представлены виды
экранных форм, тестирование и проверка на валидацию.
Пятый и шестой раздел
рассматривают оценку экономической
эффективности разработки сайта и обеспечение оптимальных условий труда
на рабочем месте разработчика.
2.Социально-экономический раздел
2.1.Потребность в создании сайта
Разработка сайта и управление им на сегодняшний день для
большинства предприятий становится насущной необходимостью. Сайт
выступает как средство коммуникации и привлечения целевой аудитории.
Разработка
сайта
позволяет
привлекать
целевую
аудиторию
определённого продукта или услуги, поскольку полностью отображает
тематику и направление предприятия, что позволяет привлекать, а также
взаимодействовать непосредственно с целевым потребителем. Так же
разработка сайта - это способ расширения границ деятельности предприятия
и освоения новой маркетинговой сферы - сферы Интернета, наиболее
уникальной для развития бизнеса. Сайт - это коммерческий инструмент.
4
Разработку сайта можно рассматривать как источник получения
прибыли и увеличения дохода. Зачастую сайт исполняет функцию Интернетмагазина либо же содержит подробные сведения, как приобрести тот или
иной продукт предприятия. Также большое количество бизнес сайтов
содержит информацию о самой продукции, мотивируя покупку, заказ.
Реклама в печатных изданиях не способна в полной мере осветить
деятельность предприятия, информация в рекламных буклетах и брошюрах
быстро теряет актуальность. В этом ключе разработка сайта открывает мир
новых возможностей и способов достижения бизнес целей посредством
невероятно обширного арсенала рекламных средств и стратегий. Разработать
сайт означает показать свою современность и актуальность. Разработать сайт
- для предприятия значит быть конкурентоспособным, ведь в любом деле
применение инновационных технологий влияет на образ и оценку
предприятия. Именно поэтому, разработка сайта сегодня является довольно
актуальной и востребованной услугой.
2.2.Характеристика сайта визитки
Интернет сайт визитка – это визитная карточка компании в Интернете.
Его цель – заявить о присутствии компании на рынке. Для этого на сайте
визитке
публикуется
общая
информация
о
деятельности
фирмы,
территориальном расположении, характеристики производимого продукта и
контактная информация для потенциальных клиентов. При этом сайт визитка
– это не офис в интернете, а лишь представительский сайт.
Это
распространяется
и
на
сайты
визитки
некоммерческих
организаций. Они указывают свой продукт – услуги, которые они могут
оказать читателям – возможным клиентам. В данном случае сайт визитка
5
исполняет роль афиши, с которой людей приглашают посетить тематическую
организацию.
С аналогичной целью сайты визитки создают и частные лица,
занимающиеся каким-то видом деятельности. Наиболее часто персональный
сайт визитка имеют адвокаты, юристы, частные стоматологи, врачи,
фотографы и т.д. Личный сайт визитка как собственное резюме создают
люди, находящиеся в поисках работы. Такие визитки свойственны
соискателям, работающим в сфере высоких технологий: программистам, веб
дизайнерам, фрилансерам вебмастерам.
Цель сайта визитки – представительство, то есть информирование
всех посетителей Интернета о возможности получить ту или иную услугу.
Иногда сайты визитки располагают, кроме указания обычных средств связи с
владельцем и формой обратной связи, но обычно контакты с клиентами
происходят вне сети интернета. Все же визитки, как представительские
сайты не являются рабочими сайтами в прямом смысле. Их никто не
раскручивает, потому что владельцу достаточно лишь иметь в сети
информацию о себе, доступную каждому из любого места. Обычно владелец
сайта визитки распространяет внесетевымиспособами ссылку на собственные
страницы в Интернете.
Обладание сайтом визиткой позволяет организациям экономить на
печатании и тиражировании буклетов и рекламных листков. Потенциальному
клиенту, имеющему доступ в сеть, достаточно иметь лишь малую
информацию об организации, включая ссылку на сайт визитку компании.
Расширенную информацию о владельце сайта визитки он найдет уже на
страницах сайта. Так владелец сайта визитки - организация или частное лицо
- может обойтись без дорогостоящих традиционных рекламных акций. В
наше время сайт визитка стал таким же необходимый атрибутом ведения
бизнеса, как фирменный бланк, буклет или визитка.
Для большинства организаций небольшого масштаба или компаний
малого и среднего уровня сайта визитки достаточно для ведения своей
6
деятельности. Сайты визитки создают начинающие фирмы на стадии
становления.
Впоследствии
полнофункциональный
(интернет
сайт
визитка
корпоративный
магазин). Корпоративный
сайт
сайт
может
или
перерасти
коммерческий
визитка создают
с
в
сайт
ярким
запоминающимся дизайном.

Статический одностраничный сайт визитка
Если информации мало, то сайт визитка может иметь одну страницу.
Одностраничный сайт визитка – самый распространенный вид. Структура
сайта визитки самая простая – он представляют собой простой html
документ. Одностраничный сайт создают частные лица, индивидуальные
предприниматели и предприятия малого бизнеса. Такие сайты визитки лишь
декларируют о существовании организации или частного лица.
Одностраничный сайт визитка обычно мало «весит», что позволяет
размещать его на самом дешевом тарифе у хостера. Кроме того огромное
число сайтов визиток создаются на бесплатных сервисах, позволяющих
создать новый сайт бесплатно. Обычно там имеются конструкторы сайтов,
которые позволяют изготовить сайт визитку самостоятельно.
Как
правило,
поисковые
системы
плохо
ранжируют
сайты,
расположенные на бесплатном хостинге, но для сайтов визиток – это не
важно. Они не участвуют в борьбе за место на страницах поисковых систем.

Статический сайт визитка многостраничный
Сайт
визитка
многостраничный как
статический
сайт
–
это
отдельные html странички, объединенные ссылками в одно целое.
Для
визуального
объединения
шаблон
главной
страницы
html
распространяют на остальные страницы многостраничного сайта визитки, но
на некоторых сайтах каждая html страница имеет свой собственный дизайн.
Статический сайт при малом числе страниц и отсутствии больших картинок
или флэш анимации имеет хорошую скорость и быстро загружается на
7
компьютер посетителя, потому что готовый код страницы html хранится в
кэше сервера.
Однако cайт визитка без системы управления файлами не обладает
интерактивностью. Читатели не могут оставить на нем свои комментарии.
Даже владельцу сайта для внесения изменений на страницах требуется знать
язык гипертекстовой разметки HTML.
Типичный
статический
сайт
визитка
–
это
набор
неизменяемых
информационных страниц в Интернете.

Динамический сайт визитка многостраничный
Сайт визитка многостраничный с особой программой - системой
управления сайтом – не имеет статические страницы html. В нем
нет
готовых страниц, а есть лишь форма – шаблон - с пустыми местами, куда при
переходе на другую страницу вставляется новый текст и картинки. При
большом числе страниц такое хранение материала в виде отдельных файлов
экономит место на жестком диске сервера, что позволяет создавать
многостраничные сайты визитки на недорогих тарифах.
Кроме того, динамический сайт визитка многостраничный обладает
интерактивностью, так как посетители могут писать комментарии на его
страницах, а ведущий сайт (администратор) может вносить изменения на
готовые страницы и писать новые во встроенном редакторе.

Сайт визитка c системой управления файлами CMS на
файлах
В настоящее время еще существует класс программ - так называемые
системы управления сайтом (CMS) на файлах. Положительной чертой
таких CMS является организация некоторых зачатков интерактивности на
сайтах. Системы на файлах не "грузят" сервер, но результатом их работы
являются всё те же готовые html страницы. По сути - такие системы - это
8
лишь встроенный редактор для написания новых статей. В остальном
такие CMS возвращают сайт на позиции сайтов без движков.

Сайт визитка с системой управления файлами CMS с базами
данных
Самые функциональные сайты получаются на CMS с БД - базами
данных. Такие системы (движки) имеют таблицы БД, в которых занесены
данные о каждом файле сайта: где лежит, как показывать. Систематизация
позволяет собирать страницу сайта и быстро выводить ее на экране
мониторов у посетителя.
Продвинутые движки с базами данных позволяют создать не только
многостраничный сайт визитку, но и многофункциональные сайты.

Сайт визитка интерактивный
Наличие движка позволяет организовать на сайте взаимодействие с
посетителем, который может заставлять сайт что-то выполнять по нажатию
на кнопки. Посетитель может сам написать на сайте комментарий или
обратиться к администратору сайта в форме обратной связи. Для владельца
сайта имеется специальная административная панель, что упрощает
администрирование сайта. Администратор сайта способен производить
редакцию записей на сайте и создавать новые во встроенном редакторе. Сайт
визитка - это упрощенный вариант сайта, который может быть создан на базе
движка.
2.3.Определение целевой аудитории сайта
Обычно сайт визитка многостраничный имеет локальную аудиторию.
Он рассчитан на небольшую определенную целевую группу, что не требует
его продвижение в поисковиках. Владелец проводит рекламу своего сайта
вне Интернета, сообщая потенциальным клиентам лишь ссылку на свой сайт.
9
Этим сайт визитка отличается от промо-сайта, для которого необходима
раскрутка в поисковиках.
Однако сайт визитка многостраничный не является продающим
сайтом. На его страницах обычно идет обмен мнениями о продукте
компании, а клиент договаривается о встрече через телефон или по
электронной почте.
3.Научно-исследовательский раздел
3.1.Классификация сайтов
Всемирная паутина полна интернет - ресурсов, которые отличаются
друг от друга тематикой, назначением и многими другими характеристиками.
Сайты со схожими параметрами можно классифицировать в группы,
разделить
по
возможности
использующимся
по
созданию
в
них
технологиям,
влияющим
для
них
определённого
дизайна
на
и
функциональности. Также по этому признаку можно классифицировать не
только сайты, но и отдельные веб-страницы.
3.1.1.Классификация по технологиям, влияющим на дизайн и
функциональность
10
Изначально
единственной
технологией,
с
помощью
которой
создавались сайты, была технология html. Однако такие страницы и сайты
выглядели бедно и не обладали интерактивностью, поэтому за короткое
время, прошедшее от начала массового распространения интернета,
появились и стали использоваться при создании сайтов многочисленные
дополнительные технологии и языки:
 Статические сайты — это сайты, сделанные по классической
технологии html. Веб-страницы таких сайтов написаны на языке html и
имеют расширение .htm или .html. Набирая определённый адрес (URL),
соответствующий сайту или его определённой странице, окно браузера будет
выводить одно и то же содержание. Статические html - страницы лежат на
сервере в неизменном виде и по запросу сервер отправляет в браузер. Между
собой все страницы статического сайта связаны перекрестными ссылками,
устанавливаемыми вручную.
Статические сайты имеют свои недостатки и достоинства, которые
представлены в табл. 1.
Таблица 1
Недостатки
Достоинства
Отсутствует интерактивность
Простота и дешевизна создания,
нетребовательность к аппаратным
ресурсам.
Не имеют системы управления
сайтом (трудоемкий процесс
изменения информации,
дизайна и структуры страниц)
Не требуют поддержки скриптов и баз
данных (подходит самый дешевый,
абсолютно любой хостинг)
Не подходят для случаев, когда
требуются частые обновления
информации
Могут содержать в себе графику, Flash
анимацию и JavaScript
Поиск по сайту возможен
только с помощью сторонних
сайтов (Яндекс или Google)
Не способны создавать серьезной
нагрузки на сервер (с ними не
возникнет ситуация, когда сайт
11
тормозит или выдает сбои при наплыве
посетителей)
 Динамические сайты и веб-страницы.
Динамические страницы не существуют в неизменном виде на
сервере, а формируются при помощи скриптов. Содержание и вид
динамической страницы с одним и тем же адресом может быть совершенно
различным в зависимости от разных условий - например, в зависимости от
времени, от конкретного пользователя, от введённого пользователем запроса.
Скрипты, которые используются для формирования динамических вебстраниц, могут быть написаны на разных языках, таких как: php, perl, asp.
Достоинства и недостатки, данного типа сайтов представлены в табл. 2.
Таблица 2
Недостатки
Достоинства
Требуют дополнительных ресурсов на
сервере и создает повышенную нагрузку
на сервер (базы данных, скрипты –
доступны в более дорогих тарифных
планах хостинга)
Интерактивность и поиск по
сайту
Неправильное использование на сайте
скриптов, создает потенциальную угрозу
безопасности сайта
Неограниченная гибкость в
управлении содержанием и
структурой сайта
Сложнее оптимизировать
Возможности интернет
коммерции, обучения,
управления документооборотом
и многое другое.
Удобное управление
содержанием сайта.
12

Флэш-сайты. Технология флэш (flash) позволяет создавать очень
красивые, интерактивные, со звуком и анимацией, сайты, которые выглядят
на порядок эффектнее, чем обычные html-сайты. Однако сложность и
трудоёмкость их изготовления, а также то, что страницы, созданные на флэш,
имеют, как правило, большой вес, медленно загружаются и плохо
индексируются
поисковыми
машинами
(сложность
оптимизации
и
продвижения) и приводит к тому, что флэш-сайты не получили широкого
распространения.
3.1.2.Классификация сайтов по их принадлежности
На сегодняшний день в интернете создать свой сайт может
практически каждый пользователь. Уже существует большое количество
доменов второго уровня, не говоря даже о сайтах, имеющих домены третьего
уровня, которые во множестве расположены на бесплатных хостингах.
По принадлежности сайты подразделяются на:

Личные (персональные) сайты. Таким сайтом владеет и
осуществляет его поддержку один человек. Данный тип сайтов сейчас имеет
большую аудиторию. Спектр этих сайтов весьма широк — от маленьких
домашних страничек (home page), где есть немного информации о владельце
и его увлечениях, до очень известных и популярных ресурсов.

Сайты коммерческих организаций. Всё больше фирм и
компаний рассматривают интернет как удобную среду если не для прямого
ведения бизнеса и продажи товаров в онлайн-магазинах, то, по крайней мере,
для рекламы своих товаров и услуг. По степени развитости присутствия
коммерческой организации в интернете среди коммерческих сайтов можно
выделить несколько подвидов: сайты-визитки, содержащие лишь небольшую
общую информацию о фирме, такие сайты обычно не обновляются; промосайты или сайты для бизнеса, которые предназначены для презентации и
продвижения различных товаров и услуг. На таких типах сайтов обычно
13
оставляют контактные данные — адреса, телефоны, схемы проезда,
предназначенные для потенциальных покупателей; полноценные сайты
электронной коммерции или интернет-магазины, на которых можно заказать
услуги или купить товар, не вставая с кресла перед монитором.
 Сайты
некоммерческих
организаций. Разнообразные
некоммерческие организации также стремятся развиваться, с помощью сети
интернет. Весьма популярны в интернете новостные ресурсы, ресурсы,
представляющие онлайновые версии различных СМИ. Для двух особых
категорий
сайтов
некоммерческих
организаций,
а
именно
сайтов
государственных и образовательных учреждений в интернете выделены
специальные доменные зоны: .gov и .edu. В отличие от популярных
доменных зон .com, .org, национальных доменных зон, попасть туда может
далеко не каждый пользователь. Таким образом, расположение сайта в
зоне .edu,
например,
—
это
гарантия
солидности
образовательного
учреждения.
3.1.3.Виды сайтов по величине, по уровню решаемых ими задач
По величине и уровню решаемых задач сайты могут значительно
отличаться. Есть сайты, состоящие из одной-единственной странички, а есть
сайты, содержащие большое количество информации и требующие много
ресурсов. Для их поддержания используется, по крайней мере, десяток
отдельных высокопроизводительных серверов.

состоящие
Простые
из
сайты,
нескольких
содержащие
немного
информации
страничек («сайты-визитки»,
и
домашние
странички и т. п.). Такие сайты обычно содержат лишь немного информации
о владельце и совсем мало или вовсе не содержат какой-либо другой
интересной пользователям информации.

Тематические, узконаправленные сайты. Данный тип сайтов
может быть довольно большим, предоставляя пользователям интернета,
14
интересующимся определённой темой, возможность получить по ней
хорошую и детальную информацию. Многие из тематических сайтов
занимают
достойное
место
в
интернете.
Однако
тематические,
узконаправленные сайты могут привлекать и быть интересны лишь
определённой категории пользователей.

Многофункциональные сайты (порталы). Особое место в ряду
интернет-сайтов занимают многофункциональные и многотематические
сайты-порталы. Создавать, поддерживать и обеспечивать работу таких
сайтов сложно, но зато такие сайты могут привлекать практически все
категории пользователей и каждому быть интересны. Сайты-порталы
содержат в себе массу самой разнообразной информации и функций, таких
как: узнать свежие новости, прогноз погоды, завести почтовый ящик, вести
блог и создать сообщество по интересам.
3.1.4. Виды сайтов по типу информации и возможностей, которые они
предоставляют пользователям сети
Большинство сайтов предназначено для обычных пользователей сети, и
спектр целей, с которыми тот или иной пользователь может прийти в
интернет, очень широк. Это могут быть и поиск информации, причём по
самым различным темам и самого различного свойства, и общение, и
использование онлайн-сервисов. Для достижения этих целей пользователь
должен найти подходящий сайт (или сайты), а владелец или владельцы сайта
должны
привлечь
классификация
на
свой
сайт
целевую
аудиторию.
сайтов
по
типу
информации
и
Детальная
возможностям,
предоставляемым пользователям интернета, очень обширна. Построить
такую классификацию по этим признакам, которая точно распределила все
сайты по подходящим для них категориям, довольно проблематично.
Выделим наиболее общие группы сайтов по назначению, соотнеся их с
максимально общими целями, ради которых пользователи приходят в
интернет. Изначально интернет был средой для получения информации. И
15
сейчас сайты, направленные на предоставление разнообразной информации
пользователям, являются наиболее многочисленной группой. Первая группа
— сайты, существующие для предоставления пользователям информации,
контента. Помимо собственно поиска информации, люди часто приходят в
интернет ради общения, ради поиска людей, близких по интересам и т. п. Т.
о., вторая группа — сайты, направленные на организацию общения и
взаимодействия между пользователями. Вскоре после появления интернета в
него пришёл бизнес, и появилась третья группа сайтов. Это — сайты,
предназначенные для предоставления услуг, продажи товаров через
интернет, сайты,
основной
функцией
которых
является
организация
электронной коммерции. И, наконец, ещё одной важной группой сайтов,
являются сайты, предоставляющие различные онлайн-сервисы.

Сайты, предоставляющие контент. В этой группе, в свою
очередь, можно выделить множество разных типов сайтов по разным
признакам. Сам вид контента может быть различным — это может быть, как
текст, так и фотографии, рисунки, звуковые файлы и видео. По характеру
предоставляемого
контента можно
выделить
сайты
информационно-
тематические, новостные, развлекательные, сайты-библиотеки, сайты-базы
определённого рода документов, например, база рефератов, разнообразные
сайты-справочники,
онлайн-энциклопедии
и
словари,
сайты-каталоги,
обобщающие информацию о других сайтах.

Сайты для онлайн-контактов и общения. Список типов сайтов
в этой группе также очень велик. Сюда можно отнести, как и «классические»
формы организации общения, такие как форумы, чаты, доски объявлений,
так и новые, которые можно условно отнести к группе «веба 2.0». Среди
новых - популярны в последнее время «социальные сети», блоги-сообщества,
«вопрос-ответные» проекты. Сюда нужно отнести и такие сайты, как службы
знакомств, сайты, организующие общение между людьми, ищущими в сети
работу и работодателями, например, биржи фрилансеров, сайты, на которых
16
можно принять участие в онлайн-играх, некоторые сайты, предназначенные
для поддержки общения пользователей между собой. Потенциал развития
данного типа сайтов очень велик, и не исключено, что новые интересные
возможности для организации контактов и общения через интернет будут
придуманы в ближайшее время.

Сайты электронной коммерции. Самым многочисленным
видом будут интернет-магазины, через которые сейчас можно продавать
практически всё. Также велик список сайтов, предоставляющих различные
платные услуги, сейчас с помощью интернета можно оплатить и мобильную
связь, и консультацию психолога, и хостинг для сайта. В эту группу войдут и
сайты электронных платёжных систем, сайты банков, предоставляющих
возможность управления счетами через интернет, сайты обменных пунктов
различных валют. В особую категорию здесь можно вынести сайты,
построенные на основе партнёрских программ - клоны известных интернетмагазинов, продающие в интернете те же товары той же торговой структуры,
и получающие на этом без особых усилий какой-то процент с продаж.

Сайты,
предоставляющие
онлайн-сервисы.
Некоторые
сервисы можно отнести и к другим группам, например, сервисы,
предоставляющие хостинг (как хостинг для сайтов, так и хостинг для
гостевых, форумов, чатов, блогов, файлов). Весьма распространёнными ещё
со времён зарождения интернета являются сервисы бесплатной электронной
почты. Многие онлайн-сервисы трудно классифицировать потому, что при
всей их огромной популярности и значимости для интернета, главные сайты,
предоставляющие их, существуют всего в нескольких экземплярах.
Например, одними из важнейших сервисов, необходимость в которых
возникла ещё на заре развития интернета, являются поисковые сервисы. Но
при этом достаточно популярных среди них всего три. Самым первым
поисковиком Рунета был Рамблер. Сегодня лучшим и крупнейшим из
поисковых сервисов в Рунете является Яндекс, а в мировом интернете
лидерство держит Гугл (Google). Другие интересные сервисы — это сервисы,
17
предоставляющие
онлайн-перевод
веб-страниц,
сервисы,
помогающие
проверить текст на орфографические ошибки.
3.2.Основные виды структур веб-сайта
Последовательная и логичная структура веб-сайта — важный фактор,
влияющий на лояльность пользователей. Выбор подходящей структуры
осуществляется на этапе проектирования и зависит от назначения сайта.
Популярность нового веб-сайта в значительной мере будет определяться тем,
насколько хорошо его информационная структура соответствует его
ожиданиям. Логичная и предсказуемая структура позволяет новому
посетителю делать успешные предположения о том, где может находиться
нужная веб-страница, а регулярные методы организации и отображения
информации позволяют обучить пользователя работе с сайтом.
3.2.1 Внешняя и внутренняя структуры
Структуризация представляемой на сайте информации выполняется
на двух уровнях: внутреннем и внешнем.
Внутренняя структура определяет логические связи между вебстраницами, то, что в SEO называется внутренней перелинковкой.
Продуманная внутренняя структура позволяет избежать ситуаций, когда,
например, на сайте появляются страницы, доступные более чем в 3-х кликах
от стартовой или в поисковую выдачу попадают приватные страницы или
множественные дубли. С другой стороны, под внутренней структурой сайта
иногда подразумевают размещение файлов и каталогов в файловой системе
веб-сервера. Хороший пример — размещение всех изображений в каталоге
images, а скачиваемых файлов — в каталоге download. Внутренняя структура
может частично или полностью отображаться во внешнюю структуру.
Внешняя структура – это схема навигации, вписанная в дизайн сайта.
Именно с внешней структурой имеют дело посетители, будь то люди или
роботы. Переходя по ссылкам, они получают доступ (или не получают) к той
информации, которую представляет сайт. Тщательно проработанная внешняя
18
структура
не
только
упрощает перемещение по
страницам,
но
и
способствует продвижению сайтов в поисковых системах, об этом говорят
сами разработчики поисковиков.
3.2.2 Типовые структуры

Линейная структура. Простая и естественная структура, в
которой все страницы сайта последовательно связаны между собой.
Навигация по такому сайту в основном сводится к указанию ссылок на
предыдущую и следующую страницы — переходя по ним, пользователь
словно листает книгу. В чистом виде линейная структура применяется на
самых простых сайтах с небольшим количеством станиц. Сайт с линейной
структурой представлен на рис. 1.
Рис.1 Сайт с линейной структурой
19

Иерархия.
Такая
структура
предполагает
размещение
информации в несколько уровней. Страницы нижнего уровня являются
подразделами страниц более высокого уровня. Корнем иерархии является
стартовая страница сайта, ссылки с которой ведут на разделы и/или страницы
2-го уровня. Иерархическая структура используется во всевозможных сайтахкаталогах. Иерархическая структура представлена на рис.2.
Рис. 2. Иерархическая структура веб-сайта
20

Паутина.
Данная
структура,
практически
идентичная
концепции сервиса WWW, но в масштабах отдельно взятого сайта. Она
основана на установлении таких связей между страницами, которые
позволяют быстро перемещаться между ними, минуя промежуточные
страницы
(стартовую
или
страницы
разделов).
Подобная
структура
избыточна, управление ей сильно затрудняется с ростом числа страниц, а
пользователь может элементарно потеряться на страницах такого сайта. На
рис. 3 представлен сайт со структурой типа паутина:
Рис. 3. Сайт со структурой типа паутина

Решетка. Больший порядок на сайте можно навести, если
установить связи между страницами по принципу решетки, который
представлен на рис. 4.
21
Рис. 4. Структура типа решетка

Комбинированная структура - приведенные выше базовые
структуры на практике редко используются в исходном виде. Подавляющее
большинство сайтов используют их в той или иной комбинации. Так,
например, каталог статей начинается с тематической иерархии, но
отдельные, объемные статьи раздела имеет смысл представлять линейно,
поделив
их
на
несколько
страниц.
Это
пример
того,
что
называется гибридной (или комбинированной) структурой. На рис. 5
представлен сайт с комбинированной структурой.
22
Рис. 5. Комбинированная структура сайта, учитывающая передачу «веса»
страниц
3.3. Описание программного обеспечения
3.3.1. Обзор текстовых редакторов
Редактор кода напрямую влияет на удобство и скорость разработки
проекта. Для пользователей, это огромный плюс, потому что это дает шанс
получить лучшее качество за меньшие деньги.

исходным
Notepad++ —
свободный текстовый редактор с открытым
кодом для Windows с подсветкой
синтаксиса большого
количества языков программирования и разметки. Поддерживает открытие
более 100 форматов. Базируется на компоненте Scintilla, написан на C++ с
использованием STL, а также Windows API и распространяется под
лицензией GNU
General
Public
License.
Базовая
функциональность
программы может быть расширена как за счёт плагинов, так и сторонних
модулей, таких как компиляторы и препроцессоры. Интерфейс данной
программы представлен на рис. 3.3.1.
23
Рис. 3.3.1. Интерфейс программы Notepad++

Dreamweaver — WYSIWYG HTML-редактор компании Adobe.
Изначально разработан и поддерживался компанией Macromedia, вплоть
до 8-й версии (2005 год). Следующие версии, начиная с Dreamweaver C
Заметную популярность программа получила начиная с версии MX,
выпущенной компанией Macromedia в 2002 году. До этого момента были
выпущены версии 1—4, версию 5 компания пропустила. 7-я версия
программы получила название Dreamweaver MX 2004, а затем в 2005
году была выпущена Dreamweaver 8. 20 апреля 2007 года уже компания
Adobe выпустила более свежую версию под названием Dreamweaver
CS3. На сегодняшний момент последней версией является Dreamweaver
CC.S3 (2007),
выпускает
Интерфейс
Adobe.
представлен на рис. 3.3.2.
24
данной
программы
Рис. 3.3.2. Интерфейс программы Dreamweaver

NetBeans IDE — свободная интегрированная среда разработки
приложений (IDE) на языках программирования Java,Python, PHP, JavaScript,
C, C++, Ада и ряда других. Проект NetBeans IDE поддерживается и
спонсируется компанией Oracle, однако разработка NetBeans ведется
независимым
сообществом
разработчиков-энтузиастов
(NetBeans
Community) и компанией NetBeans Org.
По качеству и возможностям последние версии NetBeans IDE не
уступают лучшим коммерческим (платным) интегрированным средам
разработки для языка Java, таким, как IntelliJ IDEA, поддерживая
рефакторинг, профилирование, выделение синтаксических конструкций
цветом, автодополнение набираемых конструкций на лету, множество
предопределённых шаблонов кода.
25
Для разработки программ в среде NetBeans и для успешной
инсталляции и работы самой среды NetBeans должен быть предварительно
установлен Sun JDK или J2EE SDK подходящей версии. Среда разработки
NetBeans по умолчанию поддерживала разработку для платформ J2SE и
J2EE. Начиная с версии 6.0 NetBeans поддерживает разработку для
мобильных платформ J2ME, C++ (только g++) и PHP без установки
дополнительных компонентов. Интерфейс данной программы представлен
на рис. 3.3.3.
Рис. 3.3.3. Интерфейс программы NetBeans IDE
3.3.2. Обзор FTP-клиентов
FTP является сокращением от английского File Transfer Protocol —
протокол передачи файлов, который применяется для обмена файлами по
TCP/IP сетям между двумя компьютерами (клиент и сервер). Протоколу
передачи файлов больше 40 лет, он был разработан прежде чем появился
TCP/IP и тем более HTTP, однако он до сих пор актуален и используется для
26
подключения к удаленным серверам и обмена файлами. Данный протокол
применяет различные сетевые соединения для передачи команд и файлов
между клиентом и сервером. FTP сервер, представляет собой компьютер с
установленным на него специальным программным обеспечением и
ожидающим внешнего подключения от других компьютеров.
FTP клиент является программой, которая делает попытку соединится
с серверным компьютером. После успешного подключения к FTP серверу,
можно совершать всевозможные операции над данными располагающимися
на нем, в частности, просмотреть содержимое каталогов, загружать и
скачивать файлы с FTP сервера, переименовывать, назначать права доступа,
удалять файлы с сервера и прочее. Соединяясь с FTP сервером допустимо
пройти авторизацию предоставляя данные для входа без использования
шифрования, а также можно подключиться анонимно, если это позволяет
FTP сервер. Для защищенной передачи, которая скрывает (шифрует) логин,
пароль и данные, FTP соединение может быть зашифровано при помощи
SSL/TLS (FTPS). SSH протокол передачи файлов (SFTP) иногда также
используется, но между ним и FTPS есть существенная разница.
Основное назначение FTP протокола - это загрузка файлов и их
скачивание с удаленного сервера. Для передачи файлов в пассивном режиме
инициируется соединение FTP клиентом из обусловленного диапазона
портов к порту сервера. В активном режиме FTP сервер подключается к
клиенту к определенному порту, который сообщил ему клиент. Основное
различие между данными режимами, состоит в том, с какой стороны
открывается соединение для передачи файлов.

Total
Commander — файловый
менеджер с закрытым
исходным кодом, работающий на платформе Microsoft Windows. Ранее
программа называлась Windows Commander, но с 29 октября 2002 года, по
требованию корпорации Microsoft, она была переименована. Первая
публичная немецкая версия стала доступна 25 сентября 1993 года. Начиная
27
с версии 7.5 от 16 июля 2009 года русская локализация входит в
дистрибутив программы. В ноябре 2010 года автор программы дал
большое интервью для русскоязычных пользователей, подробно рассказав
о планах проекта и его текущих технических проблемах. В середине 2011
года появляется первая версия Total Commander для Android-устройств,
вместе с тремя дополнительными плагинами (FTP, LAN, WebDav). С
сентября 2011 года существует специальная редакция Total Commander для
64-разрядных операционных систем. В настоящее время выпускается
дистрибутив, в полной мере поддерживающий как x86, так и x86-64
платформы. Интерфейс данной программы представлен на рис. 3.3.4.
Рис. 3.3.4. Интерфейс программы NetBeans IDE

FileZilla — это свободный многоязычный FTP-клиент с
открытым исходным кодом для Microsoft Windows, Mac OS X и Linux. Он
28
поддерживает FTP, SFTP, и FTPS (FTP через SSL/TLS) и имеет
настраиваемый интерфейс с поддержкой смены тем оформления. Оснащен
возможностью перетаскивания объектов, синхронизацией директории и
поиском на удаленным сервере. Поддерживает многопоточную загрузку
файлов, а также докачку при обрыве (если поддерживается сервером)
интернет - соединения. Интерфейс данной программы представлен на рис.
3.3.5.
Рис. 3.3.5. Интерфейс программы FileZilla

WinSCP — свободный графический клиент протоколов SFTP и
SCP, предназначенный для Windows. Распространяется по лицензии GNU
GPL. Обеспечивает защищённое копирование файлов между компьютером и
серверами, поддерживающими эти протоколы. WinSCP выполняет все
29
основные операции с файлами, такие как загрузка и выгрузка файлов. Он
также позволяет переименовывать файлы и папки, создавать папки, изменять
свойства файлов и папок, а также создавать символические ссылки и ярлыки.
Один из двух интерфейсов программы позволяет также управлять файлами
на локальном компьютере пользователя.
При помощи WinSCP можно соединиться с сервером SSH (Secure
Shell) по протоколу SFTP (SSH File Transfer Protocol) или SCP (Secure Copy
Protocol), как правило с машинами под ОС UNIX. SFTP стандартно входит
в реализацию протокола SSH-2. SCP точно так же стандартно входит в
реализацию протокола SSH-1. Оба этих протокола поддерживаются даже
самыми свежими версиями SSH-серверов. WinSCP поддерживает как SSH1, так и SSH-2. Интерфейс данной программы представлен на рис. 3.3.6.
30
Рис. 3.3.6. Интерфейс программы WinSCP
3.4.Математическая модель проектируемого проекта
3.4.1.Описание языка JavaScrip
Введение в jQuery
Современное веб-программирование и создание веб-сайтов уже
невозможно представить без использования языка JavaScript. Однако в
настоящее время, все чаще используется не javascript, а javascriptфреймворки. Одним из таких фреймворков является jQuery. По
некоторым оценкам не менее половины крупнейших сайтов в интернете
используют этот фреймворк.
Хоть jQuery и можно назвать библиотекой, но на самом деле
понятие "jQuery" объединяет целую экосистему библиотек, построенный
вокруг базовой библиотеки: это и библиотека jquery.ui, предназначенная
для создания визуальных интерфейсов, это и jqyery.mobile, используемая
при разработке мобильных сайтов и др.
Подключение библиотеки jQuery
Библиотека представлена в двух вариантах - Compressed или
Monified
(минимизированная)
и
Uncompressed
(обычный).
Минимизированные версии предоставляют ту же функциональность, что
и обычные, но отличаются тем, что не содержат всяких необязательных
символов, наподобие пробелов, комментариев и т.д., и поэтому в своем
названии имею суффикс min, например, jquery-1.10.1.min.js. Поскольку
они производительнее за счет меньшего объема, их рекомендуется
использовать в реальном производстве. В то же время, если вам захочется
понять логику кода jQuery, то в этом случае можно обращаться к обычной
31
версии библиотеки. Библиотека jquery подключается также, как и другие
файлы javascript. Например:
<script src="jquery-1.10.1.min.js"></script>
Форматы функции $()
Основную функциональность библиотеки jQuery выполняет функция
jQuery(), которая имеет псевдоним $(). Это единственные идентификаторы,
которые доступны в глобальной области видимости. Все остальные функции
находятся в области имен библиотеки jQuery. jQuery вводит в пространство
имен JavaScript всего два новых идентификатора - функцию jQuery и ее
псевдоним $. Тем не менее через эту функцию библиотека предоставляет
массу новых возможностей, что делает ее весьма гибким инструментом,
определяя операцию, выполняемую этой функцией, передаваемыми ей
параметрами.
Функция jQuery() служит для:
 Отбора и обертывания элементов DOM, участвующих в операции
 Исполнения роли пространства имен для глобальных
вспомогательных
функций
 Создания элементов DOM из кода разметки HTML
 Определения программного кода, выполняемого после того, как дерево
DOM будет готово к манипуляциям
Функция $() поддерживает несколько форматов:
 $(<Функция>);
 $(<Элемент объектной модели документа>);
 $(<НТМL-текст>);
 $(<Селектор>[, <Контекст>] ).
32
Селекторы
Работая с библиотекой jQuery, мы можем использовать уже привычные
селекторы CSS. Чтобы выбрать элементы с помощью jQuery, нужно обернуть
селектор функцией $(), например:
$("р a.specialClass”)
Чтобы получить ссылку на DOM-элемент с помощью Javascript,
обычно используется метод getElementByld(). Например, изменим HTML-код
элемента с идентификатором myid:
document.getElementByld ('myid').innerHTML = "Новый текст";
Код на jQuery, выполняющий то же самое действие, будет в два
раза короче:
$("#myid").html("Новый текст");
Манипулирование обернутым набором элементов
Как только появился обернутый набор элементов, полученный из
существующего дерева DOM с помощью селекторов или созданный из
фрагментов HTML-разметки (или в результате применения обоих
способов сразу), можно манипулировать этими элементами с помощью
всевозможных методов jQuery.
Получение элементов из обернутого набора
Обычно, получив обернутый набор элементов, мы тут же можем
выполнить над ним какую-либо операцию с помощью методов j Query.
Например, можно скрыть их все с помощью метода hide(). Но вполне
возможна ситуация, когда нам потребуется получить прямой доступ к
элементам для выполнения над ними низкоуровневых операций
средствами языка JavaScript.
33
Рассмотрим некоторые из способов решения этой задачи,
предоставляемых библиотекой j Query:
Извлечение элементов по индексу
Так как jQuery позволяет рассматривать обернутый набор как
массив JavaScript, можно просто использовать индексы массива, чтобы
получить любой элемент в обернутом наборе по его индексу. Например
получить первый элемент в наборе всех элементов <img> на странице с
атрибутом alt можно так:
var imgElenent = $('img[alt]’)[0]
Если кто-то предпочитает вместо индекса массива использовать
метод, для тех же целей jQuery определяет метод get().
Синтаксис метода get
Get(index) получает один или все элементы в обернутом наборе. Если
параметр index не указан, возвращаются все элементы обернутого набора в
виде массива JavaScript. Если параметр index определен, возвращается
элемент с указанным индексом.
Параметры
Index (число) Индекс единственного возвращаемого элемента. Если
он опущен, возвращается весь набор в виде массива.
Возвращаемое значение
Элемент DOM или массив элементов DOM.
Фрагмент
Var imgElenent = $(‘img[alt]’).get(0) эквивалентен предыдущему
примеру, в котором использована операция получения элемента массива
по индексу. Метод get() может также принимать отрицательные индексы.
34
В этом случае значение параметра будет определять индекс элемента
относительно конца обернутого набора. Например, вызов .get(-l) вернет
последний элемент обернутого набора, вызов .get(-2) – предпоследний и
так далее.
Кроме того, метод get() может возвращать массив элементов. Такой
способ получения массива предоставляется с целью сохранения обратной
совместимости с предыдущими версиями jQuery. Метод get() возвращает
один элемент DOM, но иногда бывает необходимо получить обернутый
набор, содержащий определенный элемент, а не сам элемент. Было бы
странно, если бы использовались, такие инструкции, как:
$($(‘р’).get(23))
Поэтому
в
библиотеке
jQuery
был
реализован
метод
eq(),
имитирующий действие фильтра eq.
Синтаксис метода eq
Eq(index) получает индекс элемента в обернутом наборе и
возвращает новый обернутый набор, содержащий только этот элемент.
Параметры
index (число) - индекс единственного возвращаемого элемента. Как и
в методе get(), допускается использовать отрицательные индексы.
Возвращаемое значение
Обернутый набор, содержащий один или ноль элементов.
Определение индекса элемента
Мы можем использовать обратную операцию, метод index(), - поиск
индекса определенного элемента в обернутом наборе. Метод index() имеет
следующий синтаксис:
35
Index (element) отыскивает заданный элемент в обернутом наборе и
возвращает его индекс в обернутом наборе или индекс первого элемента
среди элементов одного уровня вложенности. Если указанный элемент
отсутствует в наборе, возвращается значение -1.
Параметры
Element (элемент | селектор) ссылка на элемент, индекс которого
требуется определить, или селектор, идентифицирующий элемент. Если
параметр опущен, отыскивает первый элемент в списке элементов одного
уровня вложенности.
Возвращаемое значение
Порядковый номер указанного элемента в обернутом наборе или -1,
если элемент в наборе отсутствует. По некоторым причинам нужно узнать
индекс изображения с идентификатором find Me в обернутом наборе всех
изображений на странице. Это значение можно получить так:
var n = $(‘img’).index($(‘img#findMe’)[0]);
Можно также использовать более краткую форму записи:
var n = $(‘img’).index(‘img#findMe’);
Метод index() можно также использовать для определения индекса
текущего элемента в пределах его родительского элемента (то есть среди
элементов одного с ним уровня вложенности). Например:
Var n = $(' img’). Index();
Данная инструкция присвоит переменной n значение индекса
первого элемента <img> в его родительском элементе.
36
Получение срезов обернутого набора элементов
После получения обернутого набора элементов может потребоваться
уточнить этот набор, добавив или убрав часть элементов первоначального
множества. Библиотека jQuery предоставляет множество методов для
управления набором обернутых элементов.
Получение подмножества обернутого набора
Иногда требуется получить подмножество обернутого набора на
основе позиций элементов в этом наборе. Для этих целей библиотека
jQuery предоставляет метод slice(). Этот метод создает и возвращает новый
набор из любой непрерывной части или срез первоначального обернутого
набора.
Синтаксис метода slice
Slice (begin, end) создает и возвращает новый обернутый набор,
содержащий непрерывную область первоначального набора.
Параметры
Begin (число) - позиция первого элемента (отсчет начинается с нуля)
области, которая должна быть включена в возвращаемый срез. End (число)
- необязательный индекс первого элемента (отсчет начинается с нуля),
который не должен быть включен в возвращаемый срез, или позиция
элемента, стоящего сразу же за последним включаемым в срез элементом.
Если этот параметр опущен, конец возвращаемого среза совпадает с
концом первоначального набора.
Возвращаемое значение
С помощью метода slice() можно получить обернутый набор с единставенным элементом из первоначального набора по известному индексу,
37
для чего методу следует передать местоположение требуемого элемента в
обернутом наборе. Например, получить третий элемент можно так:
$('*’).slice(2,3);
Данная инструкция отберет все элементы на странице и затем
сгенерирует новый набор, содержащий третий элемент первоначального
набора.
Следует
обратить
внимание,
что
данная
инструкция
не
равнозначна инструкции $('*’).get(2), которая вернет сам третий элемент, а
не обернутый набор, содержащий третий элемент. Таким образом,
следующая инструкция:
$('*’).slice(0,4);
Этот тип инструкции отберет все элементы на странице и затем
создаст набор из первых четырех элементов. Выбрать элементы из конца
обернутого набора можно с помощью такой инструкции:
$('*’ ).slice(4);
Она отберет все элементы на странице и затем вернет набор - все
элементы, за исключением четырех первых.
Обход элементов обернутого набора
Метод mар() удобно использовать, когда требуется обойти все
элементы в обернутом наборе и отобрать значения или результаты
преобразования элементов, но на практике часто бывает необходимо
выполнить итерации по элементам в обернутом наборе для выполнения
каких-либо других операций. В таких случаях можно использовать метод
each().
Синтаксис метода each
38
Еach (iterator) Выполняет обход всех элементов в обернутом наборе и
вызывает функцию iterator для каждого из них.
Параметры
Iterator - функция, которая вызывается для каждого элемента в
обернутом наборе. Этой функции передаются два параметра: индекс
элемента внутри набора (отсчет начинается с нуля) и сам элемент. Кроме
того, элемент устанавливается в качестве контекста функции (ссылка this).
Возвращаемое значение
Этот метод может использоваться, например, для установки
значения свойства всех элементов в обернутом наборе, как показано ниже:
$(‘img’).each (function(n){this.alt=*This is image [,+n+’] with an id of
‘+this.id;});
Данная инструкция вызовет указанную функцию для каждого
элемента на странице, которая изменит его свойство alt, записав в него
строку, содержащую порядковый номер элемента и значение его атрибута
id. Кроме того, метод each() удобно использовать для обхода массивов
объектов JavaScript и даже для обхода отдельных объектов (хотя на
практике последний случай встречается редко). Например:
$([1,2,3]).each(function(){ alert(this); });
Этот тип инструкции вызовет функцию iterator для каждого элемента
массива, переданного функции $(), при этом отдельные элементы массива
будут передаваться функции iterator в виде ссылки this. jQuery также
позволяет
получать
подмножества
обернутого
набора
на
взаимоотношений между элементами в дереве DOM.
Получение обернутого набора с учетом взаимоотношений
39
основе
Библиотека jQuery позволяет получать новые обернутые наборы из
имеющихся на основе взаимоотношений между обернутыми элементами в
дереве DOM. Методы, реализующие эту возможность, и их описания
приводятся в табл.3.4.1. Каждый из перечисленных методов принимает
селектор в качестве необязательного параметра, с помощью которого
производится выборка требуемых элементов. При отсутствии параметра с
селектором выбираются все допустимые элементы.
Таблица 3.4.1.
Методы получения нового обернутого набора на основе взаимоотношений
между элементами в дереве DOM
Метод
Описание
children([selector])
Возвращает обернутый набор,
содержащий
уникальные
дочерние элементы обернутых
элементов.
next([selector])
Возвращает обернутый набор,
состоящий
из
уникальных
соседних элементов, следующих
в дереве DOM за элементами
первоначального
обернутого
набора.
prev([selector])
Возвращает обернутый набор,
состоящий
из
соседних
уникальных
элементов,
предшествующих
в
дереве
DOM
первоначального
набора.
40
элементам
обернутого
Дополнительные способы использования обернутого набора
Метод find() служит для поиска среди потомков элементов,
входящих в обернутый набор, возвращая новый набор, который содержит
все
элементы,
соответствующие
заданному
селектору.
Допустим,
обернутый набор хранится в переменной wrappedSet, тогда с помощью
следующей инструкции можно получить другой обернутый набор всех
цитат (элемент <cite>) из абзацев, которые являются дочерними
элементами по отношению к элементам обернутого набора:
wrappedSet.find('р cite’)
Как и многие другие методы jQuery для работы с обернутыми
наборами, метод find() обретает дополнительную мощь при использовании
внутри цепочки операций.
Синтаксис метода find
Find (selector) возвращает новый обернутый набор, содержащий все
элементы, дочерние по отношению к элементам из первоначального
набора, соответствующие заданному селектору.
Параметры
Selector
(строка)
-
селектор
jQuery,
которому
должны
соответствовать элементы в возвращаемом наборе.
Возвращаемое значение
Данный метод чрезвычайно удобно использовать, когда в середине
цепочки
методов
jQuery
необходимо
41
выполнить
поиск
дочерних
элементов, где невозможно изменить контекст или как-то иначе
ограничить выборку.
Манипулирование свойствами и атрибутами элементов
Сохранение собственных данных в элементах
Синтаксис метода data
Data
(name,value)
сохраняет
значение
value
в
хранилище,
управляемом библиотекой jQuery, для всех элементов набора.
Параметры
Пате (строка) - Имя, под которым будут сохранены данные. Value
(объект | функция) - значение, которое требуется сохранить. Если в этом
параметре передается функция, она будет вызвана для каждого элемента в
наборе, а сам элемент будет передан ей через контекст функции (ссылка
this).
Значение,
возвращаемое
функцией,
будет использовано
как
сохраняемое значение.
Изменение стиля отображения элемента
Когда
требуется
изменить
стиль
визуального
представления
элемента, есть два пути. Можно добавлять или удалять классы CSS,
вынуждая механизм каскадных таблиц стилей изменять стиль элемента в
соответствии с его новым классом, или воздействовать непосредственно на
элемент DOM, применяя стили напрямую.
Добавление и удаление имен классов
Добавить имена классов ко всем элементам соответствующего
набора достаточно просто с помощью метода addClass().
Синтаксис метода addClass
42
AddClass(names) добавляет указанное имя класса (или имена
нескольких классов) ко всем элементам в обернутом наборе.
Параметры
Names (строка | функция) - cтрока, содержащая имя добавляемого
класса, или, в случае добавления нескольких имен классов, - строка с
именами классов, разделенными пробелами. Если в этом параметре
передается функция, она будет вызвана для каждого элемента в наборе и
ей будет передан сам элемент через контекст функции, а также два
параметра: индекс элемента в наборе и текущее значение атрибута class.
Возвращаемое значение функции будет использовано в качестве имени
класса (или имен нескольких классов).
Удаление имен классов выполняется так же просто - с помощью
метода removeClassQ.
Синтаксис метода removeClass
RemoveClass (names) удаляет указанное имя класса (или имена
классов) у всех элементов в обернутом наборе.
Параметры
Names (строка | функция) - cтрока, содержащая имя удаляемого
класса, или, в случае удаления нескольких имен классов, строка с именами
классов, разделенными пробелами. Если в этом параметре передается
функция, она будет вызвана для каждого элемента в наборе, и ей будет
передан сам элемент через контекст функции, а также два параметра:
индекс
элемента
в
наборе
и
текущее
значение
атрибута
class.
Возвращаемое значение функции будет использовано в качестве имени
класса (или имен нескольких классов), которые должны быть удалены.
43
Получение и установка стилей
Изменяя класс элемента, можно выбирать предопределенный набор
стилей, который должен быть применен, но иногда нам требуется
отменить действие таблицы стилей. Применение стиле непосредственно к
элементу автоматически отменяет действие таблицы стилей, что позволяет
более тонко управлять отдельными элементами и их визуальным
представлением.
Метод css() по действию напоминает метод attr(), позволяя
устанавливать значения отдельных свойств CSS путем указания имени и
значения или нескольких значений в виде объекта.
Синтаксис метода css
Css(name.value) устанавливает CSS-свойство name в значение value
для всех элементов в обернутом наборе.
Параметры
Папе (строка) - имя CSS-свойства, значение которого требуется
установить. Value
(строка | число | функция) Строка, число или
функция, содержащие значение свойства. Если в этом параметре
передается функция, она будет вызвана для каждого элемента в обернутом
наборе. Функции передается сам элемент через контекст this, а также два
параметра:
индекс
элемента
и
текущее
значение
свойства
CSS.
Возвращаемое значение будет использовано в качестве значения CSSсвойства.
Применение других библиотек совместно с jQuery
Modernizr - это js библиотека, позволяющая определить поддержку
web-технологий нового поколения. Реализовано два варианта проверок:
44
 ссылаться на заранее определенный класс,который автоматически
присваивается элементу HTML.
 использовать созданный плагином объект JavaScript, который
называется
Modernizr
и
содержит
массу
булевых
свойств,
сигнализирующих о поддержке конкретных HTML5 и CSS3 технологий.
Подключение библиотеки Modernizr
Чтобы подключить библиотеку Modernizr к HTML-странице и
воспользоваться ее возможностями, необходимо подключить файл к
HTML-странице, как самый обычный файл JavaScript:
<script src="js/modernizr.js"></script>
Загрузчик библиотеки Modernizr
В библиотеке Modernizr придумали специальный механизм для
тестирования CSS-свойств и применения соответствующих CSS-правил.
Данный механизм заключается в том, что при рендеринге HTML-страницы
создается один большой JavaScript-объект с именем Modernizr. У данного
объекта есть свойства, представленные в табл. 3.4.2:
Таблица 3.4.2
Проверка технологий HTML5/CSS3
CSS3/HTML5
JavaScript значение
название класса
Modernizr.csstransforms
.csstransforms
свойства и методы
CSS 2D Transforms
.no-csstransforms
CSS 3D Transforms
Modernizr.csstransforms3d
.csstransforms3d
CSS Transitions
Modernizr.csstransitions
.csstransitions
.no-csstransitions
45
В библиотеке Modernizr встроен загрузчик, который загружает
указанное в условии проверки свойство и применяет к нему правила в
зависимости от того, true или false получится в результате проверки.
3.4.2.Основы 3D графики
Векторы
Вектор - направленный отрезок, имеющий направление и длину.
Векторы обозначаются так: a = (x,y,z), например, b = (0, 1, –2).
Еще одно представление вектора: AB = (x,y,z).AB = (x,y,z) = (bx–ax,by–
ay,bz–az), где A и B - 2 точки, A(ax,ay,az) и B(bx,by,bz), A - начало вектора, B
- конец вектора.
Длина вектора, |a|, вычисляется по формуле:
|a| = sqrt (ax2+ay2+az2).
Сложение векторов описывается формулой:
a + b = c; a + b = (ax+ bx, ay+ by, az+ bz).
Вычитание векторов осуществляется по формуле:
c – a = b; c – a = (cx– ax, cy– ay, cz– az).
Cкалярное произведение векторов
Скалярное произведение двух векторов - произведение длин двух
векторов на cos угла между ними. Скалярное произведение векторов - это
длина проекции вектора a на вектор b. (При условии, что вектор b -
46
единичный): a × b = |a| |b| cos α; или a × b = axbx + ayby + azbz; Следствие: α угол между двумя векторами: cos α = a . b / (|a| |b|);
Проекция одного вектора на другой
Для того чтобы вычислить проекцию вектора b на вектор a, требуется
нормировать вектор a, то есть сделать его единичным, и произвести
скалярное умножение этого вектора на вектор b, а затем полученное число
умножить на нормированный вектор a.
Обозначим искомый вектор как c, тогда: an = a / |a|; c = (an . b) an;
Фактически, можно найти длину проекции и, умножая ее на вектор,
проекция которого известна, маштабируем его до нужного размера.
Умножение вектора на вектор
Умножая вектор a на вектор b, получится вектор, перпендикулярный
плоскости, которую определяют вектора a и b:
a x b = ( aybz — byaz , azbx – bzax , axby – bxay);
Таким образом находиться вектор нормали к полигонам.
Матрицы
скалярное произведение векторов:
[a] [d]
[ b ] * [ f ] = a*d + b*f + c*g
[c] [g]
Векторное произведение:
[ a ] [ d ] [ b*f - c*e ]
AxB = [ b ] x [ e ] = [ c*d - a*f ]
47
[ c ] [ f ] [ a*e - b*d ]
Сложение матриц:
[ 1 2 3 ] [ 10 11 12 ] [ 1+10 2+11 3+12 ]
[ 4 5 6 ] + [ 13 14 15 ] = [ 4+13 5+14 6+15 ]
[ 7 8 9 ] [ 16 17 18 ] [ 7+16 8+17 9+18 ]
Умножение матриц:
[
1
2
3
]
[
10
11
12
]
[
1*10+2*13+3*16 1*11+2*14+3*17 1*12+2*15+3*18 ]
[ 4 5 6 ] * [ 13 14 15 ] = [ 4*10+5*13+6*16 4*11+5*14+6*17 4*12+5*15+6*18
]
[ 7 8 9 ] [ 16 17 18 ] [ 7*10+8*13+9*16 7*11+8*14+9*17 7*12+8*15+9*18 ]
Очень важным является тот факт, что (A*B)*С = A*(B*C)
3. Векторные и матричные преобразования.
Параллельный перенос:
Переносим точку (x,y,z) на вектор (dx,dy,dz), в результате получим
точку с координатами (x+dx, y+dy, z+dz);
Поворот:
Поворачиваем
x'
=
точку
x
(x,y)
cos
на
α
угол
-
α
y*sin
:
α
y' = x sin α + y*cos α
для трехмерного случая — аналогично для каждой плоскости.
Ясно, что если нам потребуется (а нам потребуется :) ) проводить для
каждой точки в пространстве параллельный перенос + поворот в
пространстве, то придется сделать огромное количество преобразований.
48
Можно построить матрицы преобразований, помножив точку - вектор
на которую, мы получим результат — координаты искомой точки.
матрица параллельного переноса:
[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]
матрица растяжения/сжатия:
[z 0 0 0]
[0 y 0 0]
[0 0 x 0]
[0 0 0 1]
матрица поворота вокруг оси x:
[1 0
0 0]
[ 0 cos α sin α 0 ]
[ 0 -sin α cos α 0 ]
[0 0
0 1]
матрица поворота вокруг оси y:
[ cos α 0 -sin α 0 ]
[ 0 1 0 0]
49
[ sin α 0 cos α 0 ]
[ 0 0 0 1]
матрица поворота вокруг оси z:
[ cos α sin α 0 0 ]
[-sin α cos α 0 0 ]
[ 0
0 1 0]
[ 0
0 0 1]
Теперь, зачем нужны матрицы в 3D-програмировании, если можно все
сделать с помощью векторов, и если, например, поворот точки с помощью
векторов занимает меньше операций, чем используя матрицы.
Например, мы отодвигаем камеру и поворачиваем ее. для этого
требуется произвести серию операций (переносов, поворотов) с точками
(вершинами полигонов) в 3D-сцене. т.е. для каждой точки произвести
сначала параллельный перенос, а затем - повороты по всем осям. при
использовании векторов мы просто проведем все эти операции отдельно для
каждой точки... что весьма ресурсоемко. или - матричные параллельные
переносы, повороты.... еще более ресурсоемко, но вспомним:
(A*B)*C = A*(B*C)
Для матриц.. а нам требуется провести такие преобразования:
a*A*B*C*D, где - а-точка-вектор, над которым требуется произвести
действия, а A,B,C,D - матрицы переноса и поворотов. Мы вполне можем не
последовательно умножать точку-вектор a на матрицы переносов, а сначала
перемножить эти матрицы, а затем просто умножать получившуюся матрицу
на каждую точку, которую требуется сместить - перемножение 4х матриц, а
затем умножение 1 вектора на 1 матрицу на каждую точку по сравнению с
подвержением каждой точки векторным преобразованиям - весьма и весьма
значительное сокращение производимых операций.
50
4. СПЕЦИАЛЬНЫЙ РАЗДЕЛ
4.1.Обоснование выбора программного обеспечения
4.1.1. Текстовой редактор Notepad++
Основные преимущества и возможности редактора, повлиявшие на
выбор данного программного обеспечения:

Полная
бесплатность.
Notepad++
является
свободно
распространяемым программным обеспечением (есть только бесплатная
версия без всяких триальных периодов).

Работа с большим количеством вкладок одновременно. В одном
окне программы можно открыть сразу несколько десятков вкладок с разными
документами (и работать с ними). Если закрыть программу, не закрывая
вкладок, то все они сохранятся при повторном запуске Notepad++.

Легкость установки и минимальный размер установочного файла.
Скачать и установить программу можно за очень маленький период времени.
В сравнении с более сложными и продвинутыми редакторами разница
ощутима.

Подсветка синтаксиса. Это одно из ключевых свойств всех
текстовых редакторов. В зависимости от выбранного в настройках языка
программирования, будут подсвечиваться те или иные теги и ключевые
слова. Кроме того, всегда показываются открывающие и закрывающие теги,
скобки.

Работа с большим количеством языков и форматов файлов. В
Notepad++ можно редактировать файлы с такими расширениями, как TXT,
DOC, SP, CPP, JAVA, HTML, CSS, PHP, JS и многими другими. Соответственно,
есть
подсветка
синтаксиса
для
всех
описанных
выше
языков
программирования.

Возможность экспорта файла в другой формат. К примеру, в
HTML, RTF делается это посредством опции "Сохранить как".
51

Использование различных шрифтов для вывода фрагментов кода
определенного типа. Например, в языке PHP обычные записи, не являющиеся
ключевыми словами или тегами, обозначаются черным жирным шрифтом.
Данная особенность позволяет быстро найти в файле нужный участок кода.

Наличие горячих клавиш, позволяющих получить быстрый
доступ к основным опциям и возможностям редактора (копировать, вставить,
удалить, сохранить, закрыть, создать и т.д.).

Возможность расширенного поиска информации в файле. При
поиске нужной последовательности символов каждый найденный результат
будет подсвечен (можно перебирать эти результаты по нажатию на кнопку
"далее").

Возможность смены кодировки файла. Смена кодировки может
потребоваться в том случае, когда, к примеру, нужно русифицировать
шаблон блога (или просто добавить в файл кириллические символы). Для
подобного преобразования следует выбрать в настройках пункт "UTF-8 без
BOM".

Возможность расширения функционала. К Notepad++ создано
большое количество плагинов (расширений), при помощи которых можно
добавить программе определенный функционал, к примеру, продвинутую
подсветку синтаксиса, конвертер, проверку орфографии и т.д.
4.1.2. FTP-клиент FileZilla
FTP - это стандартный протокол, который служит для передачи
файлов.
В
нашем
случае
FTP
соединение
позволяет
производить
разнообразные действия с папками и файлами, хранящимися на хостинге.
Перечислим все возможности и приемущества, которые предоставляет
вебмастеру FTP соединение с сервером, осуществляемое с помощью FileZilla:

Назначать права доступа на те или иные папки.

Скачивать и закачивать папки и файлы с компьютера на сервер
хостинга и наоборот.
52

Редактировать файлы прямо на компьютере, воспользовавшись
FTP соединением и программу Notepad++.

Удалять ненужные объекты прямо на сервере вашего хостинга.

Мультиязычность. Она доступна на многих языках, в их число
входит русский.

Простота и быстрота установки.

Программа бесплатная.

Постоянное обновление.
4.2.Обоснование выбора языка программирования и
программной среды
Библиотека jQuery – это JavaScript файл, содержащий в себе набор
функций, дающих быстрый доступ к любому элементу DOM, а также
предоставляющих удобный интерфейс для работы с технологией AJAX.
Перечислим преимущества, которые несет использование jQuery:

Отделение кода разметки от поведения. Вынесение кода javascript
из разметки во вне позволяет сделать саму разметку html более чистой и
понятной. Кроме того, разделить возможность разработки между вебдзайнером, который создает визуальную часть страницы, и программистом,
который описывает поведение элементов на языке javascript

Упрощение
работы
с
кодом.
jQuery
предлагает
простой
элегантный синтаксис для манипулирования элементами на веб-странице.

Расширяемость. Весь код jQuery открыт для просмотра и
изменения, и в случае, если что-то в библиотеке не устраивает, ее можно
модифицировать. А также можно создавать плагины jQuery.

Кроссбраузерность.
jQuery
имеет
поддержку
большинства
известных браузеров, в том числе таких. как IE 7,8. (Хотя в силу того, что
браузеры IE 6-8 постепенно становятся достоянием истории, а также чтобы
53
уменьшить размер библиотеки в последней версии была прекращена
поддержка IE 6-8).
4.3.Описание структуры спроектированного сайта
4.3.1.Подробное описание структуры сайта
Корнем древовидной структуры является стартовая страница сайта - Home
page, ссылки с которой ведут на страницы 2-го уровня About, описывающая
общую информацию о владельце сайта, Contact, содержащая контактную
информацию и Portfolio, на которой храниться галлерея с фотографиями
фотографа. Данная структура представлена на рис.4.3.1.
Рис. 4.3.1.Структура сайта
54
4.3.2.Перечень файлов, их назначение
Список файлов, которые описывают данный сайт, перечислены в табл.
4.3.2.
Таблица 4.3.2.
Имяфайла
index.html
Описание файла
файл
Путь к файлу
содержимого
главной
страницы, .../saIT/ index.html
отображающая
полосу
навигации по разделам
сайта.
style.css
отвечает
за
стиль .../ saIT /css/ style.css
внутреннего содержимого
разделов (About, Contact).
reset .css
отвечает за выравнивание
содержимого
разделов
.../saIT /css/ reset.css
(About, Contact).
index3.html
файл,
содержащий
фотогаллерею
с .../saIT/ index3.html
3-D
использованием
компонентов.
style.css
отвечает
за
стиль
внутреннего содержимого
раздела Portfolio.
index1.html
файл,
содержащий
55
.../saIT/css3/ style.css
фотографии
подпапки .../saIT/ index1.html
фотогаллереи(index3.html)
least.css
отвечает
за
стиль
внутреннего содержимого
разделов.
jquery.gallery.js
.../saIT/css1/ style.css
отвечает за 3D анимацию .../saIT/js3/jquery.gallery.js
фотографий.
jquery-1.11.2.js
js
библиотека, .../saIT/js3/jquery-1.11.2.js
упрощающая
работу
с
кодом
modernizr.custom. js библиотека, опреде53451.js
.../saIT/js3/modernizr.custom.
ляющая поддержку web- 53451.js
технологий
нового
поколения
least.js
отвечает
за
анимацию .../saIT/js1/ least.js
фотографий.
least.min.js
отвечает за 3D анимацию .../saIT/js1/ least.min.js
фотографий.
pages.js
файл
с
функциями .../saIT/js/ pages.js
JavaScript ( управление
всплывающими
список
окнами,
перехода
разделам )
56
к
modernizr.custom. js библиотека, опреде-
.../saIT/js/modernizr.custom.
ляющая поддержку web- 53451.js
53451.js
технологий
нового
поколения
отвечает за выравнивание .../saIT/js/ reset.css
reset .css
содержимого
разделов
(About, Contact).
4.4.Классификация спроектированного сайта
В качестве сайта был выбран статический сайт визитка многостраничный, с
древовидной структурой. Поскольку объем сайта визитки небольшой,
обновляется он редко, так как не имеет динамических элементов. Система
управления
контентом
была
следующая:
в
качестве
программного
обеспечения использовался веб-сервер, предоставляемый в составе услуги
хостинга, редактор HTML-документов Notepad++ и FTP-клиент FileZilla.
Страницы создаются с помощью редактора и размещаются на сервере с
помощью FTP-клиента.
4.5.Создание фотогалереи с использованием 3-D компонентов
4.5.1.Описание фотогалереи
В соответствии с техническим заданием была разработана 3-D фотогалерея,
написанная на языке JavaScript, с использованием библиотек jQuery и
Modernizr. Основная идея заключается в создании круговой галереи, где есть
одно изображение в центре и два по бокам. Так как мы используем
перспективу,
два
боковых
изображения
57
будут
создавать
эффект
трехмерности, когда мы их будем поворачивать. Присутствуют кнопки
навигации внизу страницы для перехода между элементами галереи, а так же
возможность добавлять к ним описание. Данная галерея будет работать
только в браузерах, которые поддерживают CSS 3D-преобразования.
При наведении курсора на изображение отображается краткое
описание, а по клику происходит показ полной версии изображения. По
умолчанию изображения формируются случайным образом на странице.
4.5.2.Руководство программисту по эксплуатации фотогалереи
4.6.Виды экранных форм
58
59
60
61
5.Экономический раздел.
5.1. Виды работ и расчет затрат времени на разработку сайта.
Для вычисления затрат времени на работу по созданию сайта, следует
знать весь объем работы, с учетом сроков выполнения отдельных этапов в
соответствии с установленными графиками, составить перечень основных
работ, необходимых для его создания, и определить их продолжительность в
часах.
Укрупненный расчет рабочего времени на на работу по созданию сайта
может быть выполнен в таблице:
Таблица 5.1.1.
Виды работ и расчет затрат времени на разработку сайта
№
Наименование этапов выполнения
работ
Затраты труда
на выполнение То же в %%
работ (чел.-ч)
Проведение предпроектных
1
исследований
20
5
2
Разработка проектной документации
20
5
Постановка и алгоритмизация
3
задач проектирования
20
5
4
Разработка сайта
300
75
40
10
Отладка сайта
5
6
Всего ( Ттехн)
400
100
7
в т.ч. часы работы на ЭВМ
320
80
62
Длительность
цикла
исследований
и
разработки сайта в календарных
8
днях
74
Загрузка рабочего места на
9
0,19
разработке сайта
Режимный фонд работы на АРМ за год
(Треж)
2016
часов
1850
часов
Эффективный фонд времени работы
(Tэф)
Коэффициент загрузки рабочих мест (Кзагр) при выполнении
указанных работ
определяется соотношением времени выполнения работ
(Ттех) к номинальному годовому (Тном=2016час) фонду времени работы при
работе в одну смену.
Длительность цикла исследований и разработки сайта в календарных
днях (Тц) может быть определена по формуле:
Тц = Ттех *К пер / (Тсм * Чи*Квн),
где
(5.1.1.)
Кпер – коэффициент перевода рабочих дней в календарные
(Кпер=1,47),
Ттех – технологическая трудоемкость работ,
Тсм – продолжительность рабочей смены,
Чи – число исполнителей работ,
Квн – коэффициент выполнения норм выработки.
63
В контексте основных требований может устанавливаться
техническом
задании
необходимый
рост
производительности
в
труда
работников по технической подготовке производства.
5.2. Стоимость рабочего места специалиста-разработчика сайта.
Высокий научно технический уровень результатов исследований и
разработки сайта
должен обеспечиваться использованием современных
методов и технологий выполнения работ, оснащением рабочих мест
исследователей и разработчиков современным комплексом технических
средств. Стоимость рабочего места
разработчика сайта описывается в
таблице:
Таблица 5.2.1.
Стоимость рабочего места разработчика прикладных программ
№
п
/
п
Цена
Состав
компонентов Количестрабочего
во единиц
места
едини-
Стоимость
Балансовая
Амортиза-
всего,
стоимость,
ционные
цы
ресурса
, рублей
рублей
рублей отчисления
1 Материальные активы
Рабочая
площадь, м2
6
50000
300000
300000
7500
Компьютер
1
25000
25000
28750
5750
1
25000
25000
28750
5750
Оснастка
и
64
специальная
мебель
Принтер
1
10000
10000
11500
2300
расходы
6000
6900
1380
Всего
366000
375900
22680
66000
75900
15180
Прочие
непред.
То же без
учета
рабочей
площади
2 Нематериал
ьные
активы
Программы
1
10000
10000
11500
2300
«Ноу-хау»
1
20000
20000
23000
4600
30000
30000
34500
6900
396000
410400
29580
96000
110400
22080
Всего
3 Итого (1+2)
То же без
учета
рабочей
площади
65
5.3. Потребность в материальных ресурсах и производственных запасах
на разработку сайта.
Для вычисления необходимых текущих издержек и оборотных
средств, следует планировать потребность в
материальных ресурсах и
производственных запасах:
Таблица 5.3.1.
Расчет потребности в материальных ресурсах и производственных запасах
№
п/п
Элементы
Расход
затрат
ресурса
ресурсов
1
2
3
СтоиЦена
мость
ресурса, всего, Норма
запаса
рублей
рублей в дни
4
5
6
Однодневный
расход
Сумма
запаса,
рублей
7
8
Сырье и
материалы
- бумага,
упак.
1
200
200
30
2,72
82
1
550
550
30
7,48
224
750
30
10,20
306
30
2,61
78
катридж,
штук
Всего по
стр.1
Теплоэнергия, Гкал
0,01
1500
13
307,1
3,75
1152
Электроэнергия, кВт-ч
Прочие
191
66
(тара,
запчасти)
Итого
(стр.1+стр.4)
2106
384
Потребность в теплоэнергии (Тэн) определяется по формуле:
Y*Пос*Нрасх,
(5.3.1.)
где Y – объем здания, м3
Посв – продолжительность отопительного сезона, час. (для средней
полосы можно принять 4200 – 4320 час за год);
Нрасх – удельная норма расхода тепла, ккал/час на 1м2 (для условий
средней полосы европейской части России 15 ккал/час в помещениях без
искусственной вентиляции и 25ккал/час в помещениях с вентиляцией).
При неполной занятости рабочего места, полученный по формуле
годовой
расход
ресурса,
корректируется
с
учетом
коэффициента
загруженности рабочего места на разработке данного пакета прикладных
программ.
Общая
потребность
в
электроэнергии
включает
затраты
на
производственную электроэнергию и на освещение.
Затраты на производственную электроэнергию за расчетный период
определяются по формуле:
Эпр = W * Фэф * Кспр,
где
W
–
установленная
(5.3.2.)
мощность
энергопотребления
токоприемников,кВт,;
Фэф – эффективный фонд времени работы оборудования при
разработке программ;
Кспр – коэффициент спроса -0,83.
67
Расчет электроэнергии на освещение производят по формуле:
Эосв= S * Тосв* Нрас*Кзагр,
где S
(5.3.3.)
- площадь рабочего места,м2;
Тосв -продолжительность осветительных часо в году(Тосв=2500);
Нрас - расход электроэнергии на 1м2 =0,025 кВт-ч.
Кзагр - коэффициент загруженности рабочего места
Сумма
прочих
материальных
ценностей
условно
вычисляется
умножением суммы строк 1-3 таблицы 4 на коэффициент 0,1.
Величина переходящего запаса материальных ресурсов определяется
методом прямого счета на основе норм и нормативов оборотных средств.
Норма
оборотных
средств
–
относительная
величина,
соответствующая минимальному, экономически обоснованному объему
запасов товарно-материальных ценностей, установленная, как правило, в
днях.
Норматив оборотных средств – минимально необходимая сумма
денежных средств, обеспечивающая повседневную предпринимательскую
деятельность организации. Определяется умножением нормы оборотных
средств ( в днях) на однодневный расход ресурса. Однодневный расход
ресурса устанавливается
делением общей суммы расхода материального
ресурса на длительность всего цикла исследований и разработки сайта.
5.4. Расчет полной трудоемкости и затрат на оплату труда персонала
при разработке сайта
При
выполнении
научных
исследований
и
разработке
прикладных программ одним исполнителем общее время выполнения всех
этапов работы определяет ее технологическую трудоемкость, которая
составляет примерно 50-60% общих (или полных) затрат труда. Полная
трудоемкость
может
быть
определена
делением
технологической
трудоемкости на их долю в общей трудоемкости. Затраты труда
68
обслуживающего персонала, а также руководителей. специалистов и
служащих составят соответственно 15-25% и 20-25% полной трудоемкости.
Заработная плата основная включает тарифную часть и премию в
размере 30 процентов. Заработная плата дополнительная принята в размере
12,6% к основной.
Таблица 5.4.1.
Расчет полной трудоемкости разработки сайта и затрат по оплате труда
Заработная плата, руб. Отчисления
Виды
Трудоем-
трудоем-
кость,
кости
чел.-час.
Часовая
тарифная
ставка,
руб.
1
2
3
Основная
Допол-
(по тари-
нитель-
фу+пре-
ная (12-
мия)
в фонд
Всего
ФЗП
5
вания и
обеспече-
15% )
4
соцстрахо-
ния
6
7
Технологическая (раз-
400
280
145600
18346 163946
49512
182
220
52021
6555
58575
17690
Управления
109
300
42545
5361
47906
14468
Итого
727
240166
30261 270427
81669
работчики)
Обслужива
ния
5.5. Смета затрат на разработку сайта
Показатель себестоимости продукции один из важнейших в плане
организаций, так как является обобщающим качественным показателем,
отражающим
все стороны их деятельности. Текущие издержки могут
отражаться в калькуляции или смете затрат. Себестоимость или текущие
69
издержки являются денежным выражением затрат всех ресурсов, связанных с
производством и реализацией продукции.
В таблице 5.5.1 представлена полная себестоимости разработки сайта в
виде сметы затрат, включая производственные и внепроизводственные
расходы.
Таблица 5.5.1.
Смета затрат на разработку сайта
№
п/п
1
Элементы расходов
Сумма, рублей
1
2
Материальные затраты
1915
1.1. Сырье и материалы за вычетом
отходов
750
1.2. Энергия всех видов
2
1165
Расходы на оплату труда
270427
Отчисления на социальное
3
страхование и обеспечение
81669
4
Амортизация
139
5
Прочие расходы
53123
6
5.1. Арендная плата
50000
5.2. Прочие неучтенные расходы
3123
Себестоимость
407273
Амортизация
-
скорректированный
на
коэффициент
загрузки
рабочего места на разработке сайта. Арендная плата принимается на уровне
15 - 20% в год от стоимости арендуемого имущества (стоимости рабочей
площади) с корректировкой на коэффициент загрузки рабочего места
70
5.6. Потребность в оборотных средствах и в производственных
инвестициях в целом
Единовременные
затраты
или
инвестиционные
средства
как
производственные инвестиции включают основные средства и оборотные
средства. При организации любого вида деятельности, в т.ч. при разработке
прикладных программ необходимы не только основные средства (на
формирование и оснащение рабочих мест), но и оборотные средства.
Оборотные средства – это авансированная в денежной форме стоимость,
принимающая в процессе планомерного кругооборота средств форму
оборотных фондов и фондов обращения, необходимых для поддержания
непрерывности кругооборота и возвращающаяся в исходную форму после его
завершения. Потребность в оборотных средствах и средствах обращения (на
формирование производственных запасов сырья и материалов,
расходов
будущих периодов, оборотных средств в незавершенное производство, в
готовых изделиях, денежных средств в расчетах) исчисляется методом
прямого счета на основе норм и нормативов.
К расходам будущих периодов относятся затраты на освоение новых
видов продукции, по совершенствованию технологии. К этим расходам
относят затраты на периодические издания, арендную плату, вносимые
авансом налоги и сборы и др.
Расчет
оборотного
капитала
в
незавершенном
производстве
определяется по формуле:
В
Н = ----- * Тц * Кнз ,
(5.6.1)
Дп
где Н - норматив оборотных средств в незавершенном производстве,
руб;
В
- объем производимой валовой продукции по смете затрат, руб;
Дп - количество дней планового периода разработки ПП, дни;
71
Тц
- длительность производственного цикла разработки ПП, дни;
Кнз - коэффициент нарастания затрат в производстве.
Фе+0,5*Фн,
(5.6.2.)
Где Кнз - коэффициент нарастания затрат
Фе - единовременные затраты сырья и материалов, руб;
Фн - нарастающие затраты, руб;
Таблица 5.6.1.
Суммарная величина оборотных средств
№
Наименование элементов оборотных
п/п средств
Сумма,
Рублей
1
Производственные запасы
2
Незавершенное производство
3
Расходы будущих периодов
4
Готовая продукция
55411
5
Денежные средства в расчетах
16623
6
Итого
304187
384
231768
Общая (на одно рабочее место) и удельная (на один ПП ) величины
инвестиций в основные производственные
фонды и оборотные средства,
необходимые для формирования рабочего места и повседневного выполнения
работ, представлены в таблице:
Таблица 5.6.2.
Совокупная величина инвестиционных средств (основных и оборотных)
Наименование
Общая
№
элементов
величина
Удельная
п/п
инвестиционных средств
иинвести-
величина инвестиций
ционных
(на 1 пакет ПП),тыс.руб.
72
Средств
Инвестиции в основной
1
капитал, всего
110400
520
2
в т.ч. Материальные активы
75900
358
3
Нематериальные активы
34500
163
304187
1433
384
2
Инвестиции в
4
оборотный капитал,всего
в т.ч. Производственные
5
запасы
Расходы будущих
6
периодов
7
Незавершенное производство
231768
1092
8
Готовая продукция
55411
261
9
Денежные средства в расчетах
16623
78
Итого
414587
822
0
1
0
5.7. Планирование стоимостной оценки (цены) сайта
Стоимостная оценка может определяться различными методами, но во
всех случаях ее уровень не должен быть ниже капиталистических издержек
производства, включающих текущие затраты на производство (С) и прибыль,
соответствующую приемлемой для предпринимателя ( или для инвестора)
норме доходности (Ен) на капитал. Зная приемлемый для инвестора уровень
доходности инвестиций (а он не должен быть ниже ставки рефинансирования
Центрального банка) определяется целевой размер прибыли от удельной
величины инвестиций, которая в сумме с затратами на разработку пакета
прикладных программ формирует минимальную цену сайта.
73
Ц = С + Ен*И,
(5.7.1.)
где С-себестоимость,
И –инвестиции.
Цена
может быть также установлена с применением ресурсно-
затратного метода, когда к себестоимости продукции суммируют прибыль по
среднему уровню рентабельности продукции (Р) аналогичных продуктов. В
этом случае цена составит величину, которая определяется по формуле:
Ц = С*(1+ 0,1Р),
(5.7.2.)
В данном курсовом проекте цена – предложение может быть
установлена по второму варианту только в том случае , если она обеспечивает
превышение
минимального уровня за счет
актуальности программ ,
определяющих повышенный спрос.
Ожидаемый
уровень
цены
реализации
сайта
и
показатели
эффективности его разработки могут быть представлены в таблице:
Таблица 5.7.1.
Показатели эффективности разработки сайта
Ожидаемый уровень цены реализации пакета ПП
500000
Прибыль от реализации (Ц -С)
92727
Налог на прибыль ( 20 % )
18545
Чистая прибыль
74181
Рентабельность продукции
23
Рентабельность продаж
19
Рентабельность инвестиций
3797
Цена реализации обеспечивающая приемлемый уровень доходности
может быть принята на уровне от 407664 до 529455 рублей. Планируемый
уровень цены может составить 500000 рублей.
5.8.Заключение
74
Предметом экономического раздела является оценка экономической
эффективности разработки автоматизированного рабочего места на работах по
созданию сайта - фотогалереи.
Оценка основывается на соизмерения результата и затрат, которые
находятся по формуле Э = Р – З. Pазрабатывается комплект ПО для АРМ,
стоимостная оценка которого определяется на уровне 500000. Ценапредложение ПО определена с учетом среднего уровня спроса и средней
нормы прибыли на инвестиции.
Длительность цикла исследований и разработки программ в календарных
днях составила 74. Стоимость рабочего места
разработчика прикладных
программ с учетом площади составила 410400 рублей ,а без учета 110400
рублей. Также, рассчитанная в ходе работы была рассчитана себестоимость
проекта, составившая 407273 рублей. По окончанию работ прибыль от
реализации с учетом налога 20% составит в размере 74181, что разработка
данного сайта эффективна.
75
6.Раздел безопасности жизнедеятельности.
6.1. Метеорологические условия на производстве.
Расчет микроклимата.
Под
микроклиматом
производственных
помещений
понимается
метеорологические условия внутренней среды этих помещений, которые
определяются
действующими
на
организм
человека
сочетаниями
температуры, влажности, скорости движения воздуха и теплового излучения
(ГОСТ 12.1.005-88 (2002) «Общие санитарно-гигиенические требования к
воздуху рабочей зоны», СанПиН 2.2.4.548-96 «Гигиенические требования к
микроклимату производственных помещений).
Рабочая зона — пространство высотой до 2 м над уровнем пола или
площадки, на котором находятся места постоянного или временного
(непостоянного) пребывания работающих. На постоянном рабочем месте
работающий находится большую часть своего рабочего времени (более 50%
или более 2 ч непрерывно). Если при этом работа осуществляется в
различных пунктах рабочей зоны, постоянным рабочим местом считается вся
рабочая зона. Параметры микроклимата рабочей зоны устанавливаются в
зависимости от сезона года и категории производственных работ по
энергозатратам.
В разделе приводятся микроклиматические условия рабочей зоны:
температура,
относительная
влажность,
скорость
движения
воздуха,
увязанные с требованиями технологического процесса, а также методы,
обеспечивающие
нормальный
микроклимат
в
производственных
помещениях.
Параметры микроклимата могут вызывать ощущения теплового
комфорта (в случае образование тепла в организме равно отводу тепла от
76
организма) или дискомфорта (в случае неравенства теплопродукции и
тепловыделения). Степень комфорта можно оценить по соотношению Д.
Ван-Зейлена по формуле:
К = 7.83 – 0.1tв – 0.0968tст – 2.8.10-4Рп + 0.036v0.5(37.8 – tв),
(6.1.1.)
Где К – степень комфортности или показатель самочувствия;
tв – температура воздуха рабочей зоны, 0С;
tст – средняя температура нагретых поверхностей, определяющая
лучистый теплообмен, 0С;
Рп – парциальное давление водяных паров, Па;
v – скорость воздуха, м\с.
Показатель комфорта и дискомфорта К может иметь следующие
значения:
1 – очень жарко; 2 – слишком тепло; 3 - тепло, но приятно; 4 – комфорт; 5 –
прохладно, но приятно; 6 – холодно; 7 – очень холодно.
Парциальное давление водяных паров может быть рассчитано по формуле:
Рп = φ· Рн,
Где Рн - давление насыщенного водяного пара при заданной
температуре воздуха (величина табличная), Па;
φ – относительная влажность воздуха, %.
Исходя из этого, соотношение Д. Ван-Зейлена приобретает вид:
К = 7.83 – 0.1tв – 0.0968tст – 2.8.10-4 φ· Рн + 0.036v0.5(37.8 – tв), (6.1.2.)
Если в помещении не установлены какие-либо тепловые агрегаты
(например, сушильные машины) принято считать: tст = tв – 1. В этом случае
соотношение Д. Ван-Зейлена приобретает вид:
К = 7.9268 – 0.1968tв - 2.8.10-4 φ· Рн + 0.036v0.5(37.8 – tв),
(6.1.1.)
Если в результате полученного расчета значение К<1, следует
принимать К=1, т.е. в анализируемом помещении очень жарко.
Исходные данные снятые в производственном помещении содержаться
в табл.6.1.1.:
77
tв
φ
Рн
v
28
60
25
0,2
К = 7.9268 – 0.1968*27 - 2.8*10-4*60*25 + 0.036*0,20.5(37.8-27)=2,3.
В помещении слишком тепло, что вызывает дискомфорт.
Была изменена система кондиционирования, в связи с этим были
повторно сняты пробы микроклимата.
Новые исходные данные:
tв
φ
Рн
v
19
60
16
0,1
Как видно из данных температура помещения существенно снизилась,
давление водяного пара тоже. Произведем расчет по комфорту.
К = 7.9268 – 0.1968*19 - 2.8*10-4*60*16,48 + 0.036*0,10.5(37.8-19)=4,14.
Степень комфорта была достигнута.
Вывод: После установки системы кондиционирования, микроклимат в
помещении пришел в комфортные человеку условия.
6.2. Расчет концентрации пылевого аэрозоля
Кроме
изменения
параметров
микроклимата,
возможно
также
выделение в воздух рабочей зоны различных вредных веществ. Согласно ГН
2.2.5.1313-03 «Предельно допустимые концентрации (ПДК) вредных веществ
в воздухе рабочей зоны», вредные вещества — это вещества, которые при
контакте
с
организмом
человека
могут
вызвать
профессиональные
заболевания или отклонения в состоянии здоровья, обнаруживаемые
современными методами, как в процессе воздействия вещества, так и в
отдаленные сроки жизни настоящего и последующих поколений. В
соответствии с классификацией ГОСТ 12.1.007-76 (1999) "ССБТ. Вредные
78
вещества. Классификация и общие требования безопасности" вещества
разделены на четыре класса опасности:
1 класс - чрезвычайно опасные
2 класс - высокоопасные
3 класс - опасные
4 класс - умеренно опасные.
Чтобы произвести расчет пылевого аэрозоля в производственном
помещении нужно снять пробы с фильтра.
Весовой метод определения концентрации аэрозоля (мг/м3) основан на
использовании аналитических фильтров аэрозольных АФА (рис. 1),
изготовленных
из
гидрофобного
высокоэффективного
нетканого
фильтрующего материала ФПП (фильтры перхлорвиниловые Петрянова). Из
многих фильтров, применяемых для улавливания различных веществ (пыли,
паров, туманов и др.), для исследования запыленности воздуха применяют
фильтры АФА-ВП-10 и АФА-ВП-20. Буква В означает, что фильтр пригоден
для весового метода, а цифры 10 и 20 обозначают площадь круга фильтра
(см2).
Рис. 1. Аналитический фильтр аэрозольный (АФА):
а - общий вид; б - фильтр; в - защитные кольца
Концентрацию аэрозоля (мг/м3) определяют по формуле:
С = (m2 - m1)/ Vo ,
79
где m2 – масса запыленного фильтра, мг; m1 – масса чистого фильтра,
мг.
Объем воздуха (м3), прошедший через фильтр, предварительно
необходимо привести к нормальным условиям (т.е. к объему, который он
занимал бы при температуре 0 °С и нормальном атмосферном давлении,
равном 101325 Па по формуле:
Vo = 273/(273+t)*Bф/Вн*(v
где t - температура воздуха (газа), °С; Вф -фактическое барометрическое
давление в момент отбора пробы, Па; Вн -нормальное атмосферное давление,
равное 101325 Па; - скорость отбора пробы, л/мин;  - время отбора пробы,
мин; 1000 - коэффициент перевода литров в кубические метры (1 м3 = 1000
л).

 Исходные данные измерений в помещении:
t, °С
Вф ,Па
Вн ,Па
 л/мин
 мин.
19
102000
101325
100
13
Далее идет расчет по формуле:
Vo = 273/(273+19)*102000/101325*(100м3
Объем воздуха (м3), прошедший через фильтр равняется 0,714 м3
Концентрацию аэрозоля С, (мг/м3), определим по формуле:
С = (m2 - m1)/ Vo
80
где m2 – масса запыленного фильтра, мг; m1 – масса чистого фильтра, мг.
Масса чистого фильтра составляет 25 мг, а масса запыленного фильтра
снятого в помещении составила 34 мг.
По данным снятым в помещении произвели расчет по формуле,
С = (m2 - m1)/ Vo = (30-25)/0,714=7,002 мг/м3
Для пыли бумажного происхождения с 2% содержанием примеси SiO2;
ПДК = 6 мг/м3; расчетная концентрацию аэрозоля С = 7,002 мг/м3,
следовательно, превышение содержания пыли в воздухе по сравнению с
санитарными нормами составляет: 7,002 – 6= 1,002 мг/м3, т.е. реальная
концентрация в 1,16 (7,002/6) раза выше нормативной или на 16,7 %
(1,002/6*100 %).
То есть все возможные нормативы нарушены, воздух в помещении
очень загрязнен, требуется демонтаж и установка новых более мощных
фильтров. После установки новых фильтров были снова сняты пробы. Масса
чистого фильтра составляет 25 мг, а масса запыленного фильтра снятого в
помещении составила 26 мг.
Далее снова производим расчет по формуле:
С = (m2 - m1)/ Vo = (26-25)/0,714 =1,4 мг/м3
Для пыли бумажного происхождения с 2% содержанием примеси SiO2;
ПДК = 6 мг/м3; расчетная концентрацию аэрозоля С = 1,4 мг/м3; содержания
пыли в воздухе по сравнению с санитарными нормами составляет: 1,4 – 6= 4,6 мг/м3, т.е. реальная концентрация выше в
нормативной на -76 % (-4,6/6*100 %).
81
0, 23 раз (1,4/6) ниже
Вывод: Заменив фильтры на новые и более мощные, решили проблему
загрязненного воздуха.
6.3.Расчёт освещения рабочего места
В
целях
проектируемого
обеспечения
объекта
гигиенических
должен
быть
условий
обеспечен
в
помещениях
должный
уровень
естественного и искусственного освещения. Освещение является одним из
важнейших факторов повышения безопасности и производительности труда.
Основные требования к производственному освещению:
- освещенность на рабочих местах должна соответствовать характеру
зрительной работы и оптимальным значениям в соответствии со СНиП 2305-95 «Естественное и искусственное освещение»
- обеспечение равномерности распределения света на рабочей
поверхности, (освещенное на рабочем месте не должна отличаться от
периферийной части не более чем па 20-30%, иначе растет зрительное
утомление);
- экономичность освещения с учетом рационального подбора типа и
вида освещения, а также уровня освещенности;
- отсутствие резких теней на рабочих поверхностях, так как резкие тени
искажают размеры и формы объектов, а движущиеся тени способствуют
ускорению утомляемости, что приводит к травмам;
- отсутствие блесткости, которая вызывает ускоренное утомление,
снижение работоспособности и увеличению травматизма;
При освещении производственных помещений используют естественное
освещение, создаваемое прямыми солнечными лучами и рассеянным светом
82
небосвода и меняющимся в зависимости от географической широты, времени
года и суток, степени облачности и прозрачности атмосферы; искусственное
освещение,
создаваемое
электрическими
источниками
света,
и
комбинированное освещение, при котором недостаточное по нормам
естественное освещение дополняют искусственным.
Конструктивно естественное освещение подразделяют на боковое (одно- и
двустороннее), осуществляемое через световые проемы в наружных стенах;
верхнее — через световые проемы в кровле и перекрытия; комбинированное
— сочетание верхнего и бокового освещения. Искусственное освещение по
конструктивному исполнению может быть двух видов - общее и
комбинированное. Предпосылки для использования общего освещения:
- возможность выполнения однотипных работ по всему помещению;
- высокая плотность рабочих мест;
- невысокая точность работ.
Расчет искусственного освещения
Для освещения помещения применяется система общего освещения. В
соответствии с требованиями СНиП 23-05-95 освещённость рабочего места
должна составлять величину не менее 300 Лк.
Расчет системы освещения производится методом коэффициента
использования светового потока, который выражается отношением светового
потока падающего на поверхность к суммарному потоку всех ламп. Его
величина зависит от характеристик светильников, размера помещения,
окраски стен и потолка, характеризуемых коэффициентом отражения
светового потока.
Расчет системы освещения даст необходимое число светильников и их
тип.
В
качестве
источников
освещения
будем
использовать
люминесцентные лампы. Такие лампы на сегодняшний день используют
повсеместно в различных помещениях.
83
Преимущества люминесцентных ламп:

более высокий КПД по сравнению с лампами накаливая (в 4-5

повышенная светоотдача, превышающая светоотдачу ламп

накаливания в 3-4 раза.

длительный срок службы
раза)
Рассчитаем
коэффициент
использования
светового
потока
для
помещения, в котором работает программиста. Данное помещение имеет
длину 5 метров, ширину 3 метра, высоту 2,5 метра, и общую площадь
соответственно
15
квадратных
метра.
Наиболее
приемлемыми
помещения являются люминесцентные дуговые лампы линейки
для
ДРЛ
мощностью 125 Вт.
Для вычисления общего светового потока используется следующая
формула:
𝐹общ =
𝐸𝐻 ∙ 𝑆 ∙ 𝐾 ∙ 𝑍
𝜂
где EH – необходимая освещенность рабочего места, лк;
S – площадь помещения, м2;
K– коэффициент запаса, который учитывает износ и загрязнение
светильников. В нашем расчёте примем его значении K=1,4;
Z–
коэффициент
учитывающий
неравномерность
освещения,
и
представляющий собой отношение среднего освещения к минимальному . В
нашем расчёте для люминесцентных ламп этот коэффициент равен Z=1,1;

- коэффициент использования, представляет собой отношение
светового потока падающего на расчётную поверхность к суммарному
потоку всех ламп. Он выбирается из таблицы в зависимости от типа
светильников, коэффициентов отражения потолка и стен, геометрических
размеров помещения и высоты подвеса.
Коэффициент отражения побеленного потолка составляет Rp= 70%,
коэффициент отражения от стен составляет Rc= 30%.
84
Геометрические размеры помещения и высота потолка подвеса
светильников учитывается комплексной характеристикой – индексом
помещения. Индекс помещения рассчитывается по следующей формуле:
𝐼=
𝑎∙𝑏
ℎ∙(𝑎+𝑏)
,
Где h – высота подвеса светильников, т.е. высота светильников над
рабочей поверхностью;
a- длина помещения;
b – ширина помещения.
Рассчитываем индекс помещения:
𝐼=
5∙3
= 0.75
2.5 ∙ (5 + 3)
Таким образом, индекс помещения I = 0,75.
Имея все необходимые данные после определения индекса помещения,
находим коэффициент использования светового потока, который составляет
 = 0,38.
Используя полученные значения, и подставив их в формулу общего
светового потока:
𝐹общ =
300 ∙ 25 ∙ 1,4 ∙ 1,1
= 18236,8 Лм
0,38
Световой поток одной лампы ДРЛ мощностью 125 Вт составляет Fл =
4800 Лм. Необходимое количество ламп определим по формуле:
N
Fобщ
Fл
,
Используя формулу для расчёта количества получаем 4 лампы, которые
необходимо установить в помещении. В помещении будут установлены
светильники OДР модели:
- 2х40 (2 штуки);
Светильники модели 2х40 рассчитаны на две лампы (2*125W).
Электрическую мощность всей осветительной системы, мы можем
найти по следующей формуле:
85
Pобщ  P1  N ,
Где P1 -мощность одной лампы;
N-количество ламп;
Мощность одной лампы равна 125 Вт, количество ламп равно 4.
Следовательно, используя формулу электрической мощности, мощность всей
осветительной системы составляет 500 Вт.
Вывод: 4 лампы нужно для удовлетворения потребной мощности
электрической осветительной установки для создания в производственном
помещении заданной освещенности. Расчёт и организация оптимального
освещения рабочего помещения позволяет снизить зрительную нагрузку,
избежать утомляемости и возможных заболеваний глаз при работе.
6.4. Шумоизоляция
Акустическая обработка проводится в производственных помещениях
для снижения уровней шума за счет уменьшения интенсивности отраженных
звуковых волн от ограничивающих эти помещения плоскостей, а в
помещениях зданий общественного назначения — для снижения уровня
шума, уменьшения гулкости, улучшения разборчивости речи и создания
акустического
комфорта.
Звукопоглощающие
облицовки
и
штучные
поглотители, как правило, применяются в сочетании с другими известными
мероприятиями по ограничению производственного шума. Необходимость и
требуемый объем акустической обработки помещений следует определять с
учетом
ранее
запроектированных
(звукоизолирующие
Эффективность
кожухи,
применения
способов
борьбы
с
выгородки,
акустической
облицовки
шумом
экраны).
в
шумных
помещениях определяется звукопоглощающими свойствами выбранных
конструкций, способами их размещения, геометрическими размерами
помещений
и
местом
расположения
источников
шума.
Максимально достигаемая величина снижения уровня шума в зоне
86
отраженного звукового поля (на достаточном удалении от источника шума)
при акустической обработке помещения практически не может превышать 8
дб по общему уровню.
При проведении расчетов, связанных с снижением шума на рабочих
местах,
используется
ряд
акустических
характеристик
помещения:
постоянная помещения В; эквивалентная площадь звукопоглощения А;
средний коэффициент звукопоглощения α.
Постоянную помещения В, акустически необработанного помещения
определяют по формуле:
В = В1000 * µ = 6,25*0,8 = 5
Где В1000 - 6,25м2 постоянная помещения на среднегеометрической
частоте 1000 Гц;
µ частотный множитель.
Объем помещения составит, м3
V= 3*5*2,5 = 37,5 м3
B1000 =
𝑣
10
=
37,5
10
= 3,75
Постоянная помещения В акустически обработанном помещении
определяется по зависимости, м2
В = А1+ΔА/1-α1= 2,32+8,41/1-0,15 = 12,62 м2
где А1 эквивалентная площадь звукопоглощения поверхностями, не
занятыми звукопоглощающей облицовкой равняется 2, 32 м2
A1 = α (Sог – Sобл ) = 0,067*(70-35,34) = 2,32 м2
Где α средний коэффициент звукопоглощения в помещении
до его акустической обработки.
87
𝐵
5
α = 𝐵+𝑆огр = 5+70 = 0,067
Sогр - площадь ограждающих конструкций помещения будет, м2
Sогр = 2*(D*W+(D+W)*H) = 2*(5*3+(5+3)*2,5) = 70 м2
D – длина помещения 5 м;
W – ширина помещения 3 м;
H – высота помещения 2,5 м;
Sобл - площадь облицованных поверхностей
Sобл = 2*(D+W)*H-Sопр = 2*(5+3)*2,5-4,66=35,34 м2
α1 средний коэффициент звукопоглощения акустически обработанного
помещения
α1 = А1 + ΔА/Sогр =
2,32+8,41
70
= 0,15
ΔА величина суммарного добавочного поглощения, вносимого конструкцией
звукопоглощающей
облицовки
или
штучными
поглотителями,
м2
2
ΔА = (αобл*Sобл)+(Ашт*nп) = (0,23*35,34)+(0,14*2) = 8,41 м
α
обл
–
0,23
реверберационный
коэффициент звукопоглощения
конструкции облицовки;
Sобл – 35,34 м2 площадь облицованных поверхностей;
Ашт – 0,14 м2 эквивалентная площадь звукопоглощения одного
штучного звукопоглотителя;
nп - 2 число штучных поглотителей.
Максимальное снижение уровня звукового давления ΔL в каждой
октавной полосе при применении звукопоглощающих покрытий в расчетной
точке, расположенной в зоне отраженного звука, определяется по формуле,
дБ
88
12,62
ΔL = 10*lg(
5
) = 9,25 дБ.
Вывод: В результате акустической обработки помещения, уровень
шума снизился на 9,25 дБ.
6.5. Электробезопасность.
6.5.1. Защитное заземление.
Защитное заземление – преднамеренное электрическое соединение с
землей или ее эквивалентом металлических нетоковедущих частей, которые
могут оказаться под напряжением вследствие замыкания на корпус и по
другим причинам (индуктивное влияние соседних токоведущих частей,
вынос потенциала, разряд молнии и т.п.).
Защитное заземление предназначено для устранения опасности
поражения электрическим током в случае прикосновения к корпусу
электроустановки
и
другим
нетоковедущим
металлическим
частям,
оказавшимся под напряжением вследствие замыкания на корпус и по другим
причинам.
Заземление осуществляется с помощью специальных устройств заземлителей. Заземлители бывают одиночные и групповые. Групповой
заземлитель состоит из вертикальных стержней и соединяющей их
горизонтальной полосы. Вертикальные электроды закладывают вместе с
фундаментом зданий на определенном расстоянии друг от друга.
В качестве искусственных постоянных заземляющих устройств на
практике применяют некондиционные стальные (газоводопроводные) трубы,
89
стержни из уголковой стали или прутки круглого сечения, заглубляемые
вертикально в грунт.
В качестве естественных заземлителей рекомендуется использовать:
- проложенные в земле водопроводные и другие металлические
трубопроводы за исключением трубопроводов горючих жидкостей, горючих
или взрывчатых газов и смесей;
- обсадные трубы скважен;
- металлические и железобетонные конструкции зданий и сооружений,
находящихся в соприкосновении с землей;
- свинцовые оболочки кабелей, проложенных в земле;
- другие металлоконструкции, расположенные в грунте.
Естественные заземлители соединяются с магистралями заземления не менее,
чем двумя проводниками в разных местах.
6.5.2. Расчет одиночных заземлителей
По условиям надежности, для расчета заземляющего устройства
необходимо иметь следующие данные:
Величину сопротивления заземляющего устройства Rзу с учетом требований
ПУЭ.
Сопротивление
заземляющего
устройства,
используемого
для
защитного заземления открытых проводящих частей, в системе IT должно
соответствовать условию:
R ≤ Uпр/I,
где R - сопротивление заземляющего устройства, Ом;
Uпр - напряжение прикосновения, значение которого принимается
равным 50 В;
90
I - полный ток замыкания на землю, А.
Как правило, не требуется принимать значение сопротивления
заземляющего
устройства
менее
4
Ом.
Допускается
сопротивление
заземляющего устройства до 10 Ом.
Для постоянных заземляющих устройств на практике в качестве
искусственных
электродов-заземлителей
применяют
некондиционные
стальные (газоводопроводные) трубы, стержни из уголковой стали или
прутки круглого сечения, заглубляемые вертикально в грунт.
Для вертикально заглубляемого стержня, у которого верхний конец
находится на глубине до 0,8 м сопротивление растеканию тока вертикальной
трубы рассчитывается Rтр по формуле:
Rтр = (0,366·ρрасч/L)·[lg(2·L/d)+0,5·L·lg((4·t+L)/( 4·t-L))]
где L- длина стержня, м;
d - диаметр стержня, м;
t - расстояние от поверхности земли до вершины стержня, м;
ρрасч - расчетное удельное сопротивление, Ом·м.
ρрасч=Ψв·ρизм
где Ψв - повышающий коэффициент сезона
ρизм – измеренное удельное сопротивление грунта
Расчет сопротивления вертикально заглубляемого стержня
L,м
d,м
t,м
Ψв
ρизм
2
0,05
0,75
1,6
20
ρрасч = 1,6*20 = 32
91
Rтр = (0,366·ρрасч/L)·[lg(2·L/d)+0,5·L·lg((4·t+L)/(4·t-L))] = (0,366*32/2)*[lg(2*
*2/0,05)+0,5*2*lg((4*0,75+2)/(4*0,75-2))] = 27 Ом.
Расчет сопротивления горизонтально заглубляемого стержня
Сопротивление заземления горизонтальной полосы длиной L (м) и шириной
b (м), расположенной на глубине t (м) от поверхности земли, можно
подсчитать по формуле:
Rтр=0,366·ρpасч·lg(2·L/b·t),
L,м
d,м
t,м
Ψв
ρизм
3,5
0,05
0,
1,7
20
ρрасч = 1,7*20 = 34
Rтр=0,366·ρpасч·lg(2·L/b·t) = 0,366*34*lg(2*3,5/0,05*0,8) = 64,24 Ом.
Вывод: В первом задании сопротивление вертикально заглубленного
стержня
составляет
горизонтального
27
Ом,
заглубляемого
во
втором
стержня
задании
составляет
сопротивление
64,24
Ом.
Соответственно, вертикальный стержень лучше пропускает ток, чем
горизонтальный. Рекомендована его установка.
6.6. Обеспечение пожаробезопасности
Определение ширины эвакуационных проходов для эвакуации людей
при пожаре и минимально допустимую продолжительность эвакуации.
92
Расчетное
время
эвакуации
людей
из
помещений
и
зданий
устанавливается по расчету времени движения одного или нескольких
людских потоков через эвакуационные выходы от наиболее удаленных мест
размещения людей.
При определении расчетного времени длина и ширина каждого участка
пути эвакуации принимаются по проекту. Длина пути по лестничным
маршам, а также по пандусам измеряется по длине марша. Длина пути в
дверном проеме принимается равной нулю. Проем, расположенный в стене
толщиной более 0,7 м, а также тамбур следует считать самостоятельным
участком горизонтального пути, имеющим конечную длину.
Расчетная
схема плана
эвакуации
персонала
возникновения пожара.
1. Определяется общее количество людей в здании.
ΣN = NT + а NT = 40+4*40 = 200
93
офиса
в
случае
Где NT – количество персонала в смене = 40 человек
а - число людей, которые могут оказаться в офисе по необходимости,
принятое в процентах к количеству сотрудников = 4 человек.
2. Определяется равномерное перераспределение людей по потокам
эвакуации
m = ΣN/n = 200/2 = 100
где n = 2 количество выходов, которое может быть использовано при
эвакуации.
3. Время эвакуации определяется по формуле:
τ = l/V = 1/30 = 0,03 мин.
где τ – максимальная продолжительность эвакуации людей от рабочих
мест до ближайшего выхода, мин
4. Суммарная ширина проходов В для всех находящихся в здании
людей определяется по формуле:
В = NC/( τψ) = 200*0,6*(0,03*20) = 108
Где – С минимальная ширина одного потока, м. При расчетах
принимается равной 0,6 м.
Ψ – средняя пропускная способность одного потока, чел/мин = 20
5. Определим ширину каждого из эвакуационных проходов:
b = В/ n = 108/2 = 54
Вывод: Согласно СНиП 31-03-2001 ширина марша лестницы в
зависимости от количества людей, эвакуирующихся по ней со второго этажа,
а также ширина дверей, коридоров или проходов на путях эвакуации должны
приниматься из расчета 0,6 м на 100 чел.
94
6.7. Заключение
На основании изученной литературы в этой части дипломного проекта
было Произведено проектирование оптимальных параметров освещения и
воздушной среды на рабочем месте, в том числе расчет механической
вентиляции и освещения. Кроме того, были рассмотрены опасные и вредные
факторы, и способы их устранения.
Расчет системы освещения лаборатории показал, что необходимо
установить в помещении светильники светильники OДР модели2х40 (2
штуки). Мощность всей осветительной системы составит 500 Вт.
Реализация рассмотренных методов и технических средств, позволит
создать
условия,
которые
обеспечат
безопасность
и
высокую
производительность труда.
Расчет
производился
согласно
документам и их положениям.
95
установленным
нормативным
7.Заключение
В результате выполнения дипломной работы был разработан
уникальный web - сайт, информирующий о деятельности фотографа.
Проведен обзор аналогов web – сайтов, данной классификации и структуры.
В экономическая разделе была рассчитана экономическая оценка
эффективности разработки сайта.
96