Разработка сайта для компании

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

Министерство образования и науки Челябинской области государственное бюджетное среднее образовательное учреждение среднего профессионального образования (среднее специальное учебное заведение) «Южно-Уральский государственный колледж»

ПЦК «Информационных технологий»

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

Разработка сайта для компании «ИнтехПБ»

Выполнил

Шитюк Н.С.

Руководитель

Шварцкоп О.Н.

Челябинск 2016 г



ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

1.1 Среда разработки web-сайта

2. ПРАКТИЧЕСКАЯ ЧАСТЬ

2.1 Разработка структуры сайта

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

3. ЭКОНОМИЧЕСКАЯ ЧАСТЬ

3.1 Расчет стоимости сырья и материалов

3.2 Расчет стоимости оборудования

3.3 Расчет стоимости электроэнергии на технологический процесс

3.4 Расчет амортизационных отчислений

3.5 Расчет заработной платы

3.6 Расчет отчислений в бюджет

3.7 Расчет себестоимости

4. ТЕХНИКА БЕЗОПАСНОСТИ ПРИ РАБОТЕ С ПК

4.1 Требования по электрической безопасности

4.2 Особенности электропитания системного блока

4.3 Система гигиенических требований

4.4 Требования к видеосистеме

4.5 Требования к рабочему месту

4.6 Требования к организации занятий

ЗАКЛЮЧЕНИЕ



ВВЕДЕНИЕ

ООО «ИнтехПБ» - компания по продаже лицензий промышленной безопастности, работающая с 2013 года в Челябинской, Свердловской и Курганской областях. Основные клиенты компании крупные заводы, разного рода заправки и предприятия работающие с опасными производственными объектами.

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

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

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

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

Исходя из цели были поставлены следующие задачи:

- проведение обзора инструментальных средств, для построения web-сайта;

- сбор информации о предприятии и сфере деятельности;

- разработка структуры web-сайта;

- разработка компонентов сайта;

- разработка информационно-содержательных страниц;



1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

1.1 Среда разработки web-сайта

При разработке web-сайта используются:

- HTML - язык разметки web-страниц;

- CSS - формальный язык описания внешнего вида web-страницы;

- JavaScript - язык программирования;

- JavaScript-библиотека JQuery 2.2.3;

- Фреймворк Bootstrap 3.3.6;

- SVG - язык разметки масштабируемой векторной графики;

- Notepad++ - редактор кода;

HTML

Написание сайта на языке HTML нужно начать с того, что необходимо понять, что это за язык. HTML - это Hyper Text Markup Language - язык гипертекстовой разметки. HTML - компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать. HTML - это язык разметки, значит, он берет определенные части документа и придает им особый вид.

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

На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким словом, как браузер, и каждый скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц, размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки (< тег >), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются.

Многие теги имеют свои атрибуты (свойства, параметры), которые прописываются в теге и придают обозначенному этим тегом объекту (изображению, тексту, ссылке, слову и т.д.), определенное значение.

Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий "зону действия" тег (< тег >), и соответственно закрывающий (< /тег >). Как же создать HTML-документ? Проще всего это сделать в текстовом редакторе. Для начала подойдет обычный Блокнот от Windows, можно пользоваться редакторами исходного кода, чтобы упростить свою работу, например Sublime Text.

CSS

CSS (англ. Cascading Style Sheets -- каскадные таблицы стилей) -- формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

В 1990-х возникла необходимость стандартизировать web-инструменты, создать общие правила, с помощью которых программисты и web-дизайнеры могли бы создавать сайты. Как результат этой необходимости, появились языки HTML 4.01 и XHTML, а также стандарт CSS.

Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, - только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).

После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 -версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок. Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией - теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script.

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

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

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML. Глобальные стили CSS располагаются в контейнере <style>...</style>, расположенном в свою очередь в контейнере <head>...</head>. Глобальные стили являются универсальным средством, позволяющим не только оперативно изменять внешний вид веб-страницы, но и бороться с перегруженностью документа оформительскими тегами. Проблема в том, что такое стили надо прописывать на каждой странице сайта. Внешние (связанные) стили определяются в отдельном файле с расширением css. Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег <link>, расположенный в контейнере <head>...</head>. В этом теге должны быть заданы два атрибута: rel="stylesheet" и href, определяющий адрес файла стилей.

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

Плюсы и минусы использования CSS

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

Преимущества CSS:

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

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

· Уменьшается время загрузки страниц web-сайта за счет переноса правил представления данных в отдельный CSS-файл. Благодаря этому браузер загружает только структуру документа, а также данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может бать закеширован, - благодаря этому уменьшается трафик, время загрузки, а также нагрузка на сервер.

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

· CSS предоставляет дополнительные возможности форматирования, о которых при использовании только самих атрибутов даже и не приходилось мечтать.

· Повышение совместимости с разными платформами за счет использования web-стандартов.

Недостатки CSS:

· Различное отображение вёрстки в разных браузерах. Если браузеры устаревшие, то возможно, что одни и те же данные CSS по-разному ими интерпретируются.

· Необходимость исправлять не только один CSS-файл, но и теги HTML. Часто встречается на практике необходимость исправлять не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS. Иногда это значительно увеличивает время редактирования, а также и тестирования.

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

JavaScript

JavaScript изначально создавался для того, чтобы сделать веб-страницы «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страница -- тут же выполняются.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation.

Перед Бренданом Эйхом, нанятым в компанию Netscape 4 апреля 1995 года, была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Эйха перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера, включая Тома Пакина, Михаэля Тоя , Рика Шелла, был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы.

Помимо Брендана Эйха в разработке участвовали сооснователь Netscape Communications Марк Андрессен(рис2.) и сооснователь Sun Microsystems Билл Джой(рис 3.): чтобы успеть закончить работы над языком к релизу браузера, компании заключили соглашение о сотрудничестве в разработке. Они ставили перед собой цель обеспечить «язык для склеивания» составляющих частей веб-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией.

Первоначально язык назывался Mocha, затем он был переименован в LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера (там он должен был называться LiveWire). На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator. В нём декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в своих будущих продуктах JavaScript как объектный скриптовый язык с открытым стандартом.

В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript. Анонсирован этот язык был 18 июля 1996 года. Первым браузером, поддерживающим эту реализацию, был Internet Explorer 3.0.

По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262. Первой версии спецификации соответствовал JavaScript версии 1.1, а также языки JScript и ScriptEasy.

Перед молодым инженером Бренданом Айком, была поставлена задача, создать язык, который был бы похож на Java, но был поменьше и как писал сам автор «эдаким младшим его братом», и очень важно, имел бы выразительную лексику, чтобы непрограммисты могли быстро освоить технологию. Уже по истечению 10-ти дней была написана первая версия языка, которую решили назвать LiveScript. Конечно, создать за короткий промежуток времени идеальный язык вряд ли возможно, но, несмотря на некоторые свои недостатки, он решал поставленную перед ним задачу, а именно, позволял работать с HTML без перезагрузки страницы.

Через некоторое время, язык был переименован в JavaScript. Такое название выбрано не случайно. В то время, да собственно как и сейчас, язык Java был очень популярен и приставка слова Java, должна была привлечь больше внимания к языку. И это дало свои плоды, люди заинтересовались, попробовали, оценили возможности языка, да так, что после анонса технологии, более 20-ти компаний выразили намерение использовать в своих будущих продуктах Javascript как объектный скриптовый язык с открытым стандартом. И это был 1995 год.

Возможности языка:

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам -- функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания -- что придаёт языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

· объекты, с возможностью интроспекции;

· функции как объекты первого класса;

· автоматическое приведение типов;

· автоматическая сборка мусора;

· анонимные функции.

В языке отсутствуют такие полезные вещи, как:

· модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;

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

· стандартные интерфейсы к веб-серверам и базам данных;

· система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.

«Самый неправильно понятый язык программирования в мире стал самым популярным в мире языком программирования».

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

Согласно TIOBE Index, базирующемуся на данных поисковых систем Google, MSN, Yahoo!, Википедия и YouTube, в апреле 2015 года JavaScript находился на 6 месте (год назад на 9)[28].

По данным Black Duck Software (англ.)[29] в разработке открытого программного обеспечения доля использования JavaScript росла. 36 % проектов, релизы которых состоялись с августа 2008 по август 2009 гг., включают JavaScript, наиболее часто используемый язык программирования с быстрорастущей популярностью. 80 % открытого программного обеспечения использует Си, C++, Java, Shell и JavaScript. При этом JavaScript -- единственный из этих языков, чья доля использования увеличилась (более чем на 2 процента, если считать в строках кода).

JavaScript является самым популярным языком программирования, используемым для разработки веб-приложений на стороне клиента

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

Почему JavaScript? Когда создавался язык JavaScript, у него изначально было другое название: «LiveScript». Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.

Планировалось, что JavaScript будет эдаким «младшим братом» Java. Однако история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, которая называется ECMAScript, и к Java не имеет никакого отношения.

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

Для выполнения программ, не важно на каком языке, существуют два способа: «компиляция» и «интерпретация».

Компиляция -- это когда исходный код программы, при помощи специального инструмента, другой программы, которая называется «компилятор», преобразуется в другой язык, как правило -- в машинный код. Этот машинный код затем распространяется и запускается. При этом исходный код программы остаётся у разработчика.

Интерпретация -- это когда исходный код программы получает другой инструмент, который называют «интерпретатор», и выполняет его «как есть». При этом распространяется именно сам исходный код (скрипт). Этот подход применяется в браузерах для JavaScript.

Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, оптимизируют, а уже затем выполняют. И даже во время выполнения стараются оптимизировать. Поэтому JavaScript работает очень быстро.

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

Что умеет JavaScript?

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

- Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.

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

- Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX").

- Получать и устанавливать cookie, запрашивать данные, выводить сообщения.

- и многое, многое другое!

Что НЕ умеет JavaScript?

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

Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя.Этих ограничений нет там, где JavaScript используется вне браузера, например на сервере. Кроме того, современные браузеры предоставляют свои механизмы по установке плагинов и расширений, которые обладают расширенными возможностями, но требуют специальных действий по установке от пользователя. Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.

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

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

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

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

В чем уникальность JavaScript?

Есть как минимум три замечательных особенности JavaScript:

- Полная интеграция с HTML/CSS.

- Простые вещи делаются просто.

- Поддерживается всеми распространенными браузерами и включен по умолчанию.

Этих трёх вещей одновременно нет больше ни в одной браузерной технологии. Поэтому JavaScript и является самым распространенным средством создания браузерных интерфейсов.

SVG

SVG -- язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику -- или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов. Это открытый стандарт, который является рекомендацией консорциума W3C.

Достоинства формата:

- Текстовый формат -- файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.

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

- Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.

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

- SVG документы легко интегрируются с HTML документами. Внешний SVG подключаются через тег <object>, значение атрибута data -- имя файла с расширением «.svg», содержащего разметку SVG, type -- MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.

Совместимость с CSS. Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.

Notepad++

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

Рабочее окно утилиты можно разделить на две части. В такой способ удобно сравнивать несколько вариаций одного и того же документа. Для определения отличий в Notepad++ встроен плагин Compare.

С помощью Notepad++ можно открыть следующие форматы файлов:

Текстовые ini, log, txt, text, C++, language files h, hpp, hxx, c, cpp, cxx, cc, Java, class, cs, pas, inc, html, tex, SQL, vbs и многие другие.

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

Кроме всего вышеперечисленного, стоит отметить следующие особенности Notepad++:

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

- функция WYSIWYG - вывод на печать того, что находится на экране в окне редактирования;

- автозавершение набираемого слова;

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

- перемещение фрагментов текста или отдельного слова на новое место;

- масштабирование - уменьшение и увеличение содержимого документа;

- - динамическое видоизменение окон просмотра;

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

- - автоопределение состояния файла - при изменении или удалении файла, редактируемого в Notepad++, иной утилитой, пользователь получает программное сообщение;

- расстановка заметок по тексту документа;

- запись макросов и их выполнение;

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

На рисунке 1 отображен внешний вид редактора. Он очень простой и многофункциональный.

Рисунок 1. Интерфейс Notepad++.



2. ПРАКТИЧЕСКАЯ ЧАСТЬ

2.1 Разработка структуры сайта

Сайт состоит из множества страниц с информацией и среди них важные: главная, о компании, и контакты.

Главная (начальная) страница. На главной странице расположено краткое описание услуг и логотипы клиентов компании (рис. 2).

Рисунок 2. Главная страница.

В разделе «О компании» находится более подробное описание организации (рис. 3).

Рисунок 3. Страница «О компании».

На странице «Контакты» находится более подробная контактная информация: адрес с картой месторасположения офиса, телефоны, режим работы и т.д. (рис. 4). сайт гипертекстовый каскадный приложение

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

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

На странице «Контакты» расположена Google-карта с адресом офиса (рис. 7).

Рисунок 7. Карта.

Карта добавлена на страницу с помощью тега <iframe> и указанием ссылки на сервер google, который отображает карту при загрузке страницы.



3. ЭКОНОМИЧЕСКАЯ ЧАСТЬ

Одной из задач данного проекта является проведение технико-экономических расчетов создания сайта с целью выявления основных показателей: величина прибыли (убытков) после реализации продукта, норма рентабельности, если продукт приносит прибыль и сумма затрат на 1 рубль реализации.

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

- расчет стоимости сырья и материалов;

- расчет стоимости оборудования;

- расчет стоимости электроэнергии, затраченной на процесс;

- расчет амортизации отчислений;

- расчет заработной платы;

- расчет отчислений в бюджет;

- расчет себестоимости созданного продукта;

3.1 Расчет стоимости сырья и материалов

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

На разработку проекта в общей сложности было затрачено 104 часа, из них:

- создание алгоритма - 10 часов;

- создание структуры сайта - 4 часов;

- написание кода - 90 часов.

Первым этапом проведения расчетов является выявление стоимости сырья и материалов, затраченных в процессе создания программного продукта (таблица 1).

Таблица 1. Выявление стоимости сырья

Наименование	Ед. изм.	Кол-во	Срок эксп-ции (час)	Стоимость (руб.)	? (руб.)
1.Тетрадь	шт.	1	80	5-00	5-00
2.Ручка	шт.	1	80	10-00	10-00
3. Аппаратное обеспечение: a) Клавиатура; b) Мышь; c) Сетевой фильтр; d) USB-флеш-накопитель; e) Интернет-модем.	шт. шт. шт. шт. шт.	1 1 1 1 1		470-00 230-00 250-00 300-00 1200-00	470-00 230-00 250-00 300-00 1200-00
Итого:					2490-00

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

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

,

где: - сумма затрат;

- стоимость программного продукта;

- срок эксплуатации программного продукта (в часах);

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

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

3.2 Расчет стоимости оборудования

В таблице 2 приведен перечень оборудования, используемого в процессе создания сайта.

Таблица 2. Перечень оборудования

Наименование	Ед.изм.	Кол-во	Стоимость
1.Монитор	шт.	1	4500-00
2.Системный блок	шт.	1	18900-00
3. Стол	шт.	1	2700-00
4. Стул	шт.	1	1000-00
Итого:			27100-00

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

3.3 Расчет стоимости электроэнергии на технологический процесс

Следующим этапом проведения расчета технико-экономических показателей является вычисление суммы затрат на электроэнергию, используемую в технологическом процессе. Как и при расчете стоимости сырья и материалов, основным критерием здесь является время работы электрооборудования. Общее время работы за компьютером составило 104 часа. Помимо времени использования оборудования, необходимы следующие данные: количество электроэнергии, потребляемое оборудованием в час, тарифная ставка стоимости электроэнергии за 1 киловатт в час. Потребляемая мощность системного блока персонального компьютера составляет 0,3 киловатта в час, монитора - 0,04. Поскольку реально реализация проекта проходила не только на производстве, но и в домашних условиях, тарифная ставка была определена как среднее значение и составила 2,41 руб. Вычисление проводилось по следующей формуле:

,

где: - сумма затрат;

- количество киловатт в час;

- тарифная ставка 1 киловатт в час;

t - время реализации проекта.

Ели подставить имеющиеся значения, получается следующее:

- Системный блок пк 0,3*2,41*104 = 75,19;

- Монитор 0,04*2,41*104 = 10,03.

В итоге стоимость электроэнергии, затраченной на технологический процесс, составляет 85 рублей 22 копейки.

За весь период реализации проекта было израсходовано 12 киловатт электроэнергии, не включая электроэнергию на технологический процесс.

Сумма затрат на электроэнергию, с учетом тарифной ставки 2-22, составляет 26 рублей 64 копейки.

Расчет затрат на коммунальные платежи проводится по нескольким позициям с использованием разных формул:

- сумма затрат на обслуживание и ремонт помещения рассчитывается по формуле:

,

где: - сумма затрат на обслуживание и ремонт;

Тс - тарифная ставка;

S - площадь помещения;

Кизи - Коэффициент износа;

- Сумма затрат на отопление помещения рассчитывается по следующей формуле

.

где: - сумма затрат на отопление;

Тс - тарифная ставка;

S - площадь помещения;

- Суммы затрат на горячее, холодное водоснабжение и вывоз твердых бытовых отходов рассчитывается по формуле

,

где: - сумма затрат на услугу;

Тс - тарифная ставка;

Кч - количество человек.

3.4 Расчет амортизационных отчислений

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

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

Таблица 3. Амортизационные отчисления

Наименование	Ед. изм.	Кол-во	Стоимость (руб.)	Срок полезного использования (час)
1. Монитор	шт.	1	4500-00	5000	332,1
2. Системный блок	шт.	1	18900-00	5000	1394,82
3. Стол	шт.	1	2700-00	8500	117,21
4.Стул	шт.	1	1000-00	8500	43,41
Итого:					1887,55

Расчет производится по следующей формуле:

,

где: - сумма амортизационных отчислений;

Со - стоимость оборудования;

Спи - срок полезного использования;

t - время использования оборудования.

После проведения всех необходимых расчетов сумма амортизационных отчислений составляет 1887 рублей 55 копеек.

3.5 Расчет заработной платы

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

При разработке сайта промышленно-производственным персоналом является разработчик-программист, дневная ставка (оклад) которого, в соответствии с Единой Тарифной Ставкой, при квалификации - 6 разряда, составляет 253,83 руб. или 42 руб. в час. Учитывая, что общее количество времени, затраченное на реализацию проекта, составляет 104 часа, заработная плата с учетом районного коэффициента равна 48,3 руб. в час. В итоге сумма общей заработной платы составляет 5023,2 руб.

3.6 Расчет отчислений в бюджет

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

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

На период реализации данного проекта коэффициент износа равнялся 1, тарифные ставки на указанные выше услуги составляли:

- Обслуживание и ремонт 15-91;

- Отопление 15-50;

- Горячее водоснабжение 73-01;

- Холодное водоснабжение 75-29;

- Вывоз ТБО 24-11.

Для расчета затрат на коммунальные платежи также была определена площадь помещения - 20 м2 и количество человек - 1.

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

- обслуживание и ремонт 15,91 * 20 * 1 = 318,20;

- отопление 15,50 * 20 = 310,00;

- горячее водоснабжение 73,01 * 1 = 73,01;

- холодное водоснабжение 75,29 * 1 = 75,29;

- вывоз ТБО 24,11 * 1 = 24,11.

Таким образом затраты на коммунальные платежи за месяц составляют 800 рублей 61 копейку. Учитывая то, что данный проект разрабатывался определенное количество времени (104 часа), полученную сумму затрат на коммунальные услуги необходимо адаптировать исходя из этого параметра.

Расчет будет выглядеть следующим образом:

Зку = Ску / Кдм / Кчс * t,

где: Зку - затраты на коммунальные услуги;

Ску - стоимость коммунальных услуг в месяц;

Кдм - количество дней в месяце;

Кчс - количество часов в сутках;

t - время реализации проекта.

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

800,61 / 30 / 24 * 40 = 410,32 руб.



Затраты на создание фонда для приобретения запасных частей формируются из расчета 50% от основной заработной платы и составляют:

5023,2 * 50% = 2511,6 руб.

Таблица 4. Прочие затраты

Статья затрат	Сумма (руб.)
1. Электроэнергия	111-86
2. Коммунальные платежи	410-32
3. Комплектующие компьютера	1254-60
Итого:	1776-78

3.7 Расчет себестоимости

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

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

Расчет себестоимости сайта приведен в таблице 5.

Таблица 5. Расчет себестоимости

Статья затрат	Сумма
1. Сырье и материалы	2490
2. Электроэнергия на технологический процесс	111,86
3. Амортизационные отчисления	1887,55
4. Заработная плата	5023,20
5. Отчисления в бюджет	1776,78
Итого:	11289,39



4. ТЕХНИКА БЕЗОПАСНОСТИ ПРИ РАБОТЕ С ПК

Любой компьютер является электроприбором и представляет собой потенциальную угрозу. Поэтому при работе с компьютером следует соблюдать требования безопасности.

4.1 Требования по электрической безопасности

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

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

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

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

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

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

- Запрещается внедрять посторонние предметы в эксплуатационные или вентиляционные отверстия компонентов компьютерной системы.

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

4.2 Особенности электропитания системного блока

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

Блок питания имеет встроенный вентилятор и вентиляционные отверстия. В связи с этим в нем неминуемо накапливается пыль, которая может вызвать короткое замыкание. Рекомендуется периодически (один - два раза в год) с помощью пылесоса удалять пыль из блока питания через вентиляционные отверстия без вскрытия системного блока. Особенно важно производить эту операцию перед каждой транспортировкой или наклоном системного блока.

4.3 Система гигиенических требований

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

4.4 Требования к видеосистеме

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

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

- по уровню электромагнитных излучений - ТСО 95;

- по параметрам качества изображения (яркость, контрастность, мерцание, антибликовые свойства и др.) - ТСО 99.

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

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

Расстояние от экрана монитора до глаз пользователя должно составлять от 50 до 70 см. Не надо стремиться отодвинуть монитор как можно дальше от глаз, опасаясь вредных излучений (по бытовому опыту общения с телевизором), потому что для глаза важен также угол обзора наиболее характерных объектов. Оптимально, размещение монитора на расстоянии 1.5D от глаз пользователя, где D-размер экрана монитора, измеренный по диагонали. Сравните эту рекомендацию с величиной 3…5 D, рекомендуемой для бытовых телевизоров, и сопоставьте размеры символов на экране монитора (наиболее характерный объект, требующий концентрации внимания) с размерами объектов, характерных для телевиденья (изображения людей, сооружений, объектов природы).

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

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

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

4.5 Требования к рабочему месту

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

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

Монитор должен быть установлен прямо перед пользователем и не требовать поворота головы или корпуса тела.

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

Рисунок 2. Расположение монитора



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

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

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