Веб-сайт (от английского «web-site»: «web» - паутина, сеть; «site» - место, местоположение) - это структурированная специальным образом информация, которая размещена на сервере и является открытой пользователям сети как для свободного, так и для авторизируемого или ограниченного доступа.

Совокупность всех сайтов составляет Всемирную паутину, объединяющую в единое целое части информации всего мирового сообщества - объединения планетарного масштаба и базу данных. Протокол HTTP (Hyper Text Transfer Prоtocоl - протокол передачи гипертекста) специально был разработан для того, чтобы обеспечить клиенту прямой доступ к сайтам на серверах.

Сайт является набором определенных файлов - страниц - определенного формата. Страницы сайтов - это файлы с текстом, который содержит команды на языке HTML (HyperText Markup Language - язык разметки гипертекста). Данные файлы при загрузке посетителем на компьютер обрабатываются посредством браузера и выводятся на средство отображения компьютера (монитор, экран смартфона, экран КПК и т.д.) Возможности языка HTML позволяют править, различать его функциональные элементы, создавать гиперссылки, а также включать мультимедийные элементы: изображения, звукозаписи и т.д.

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

1.3 Способы создания веб-сайтов

Конструкторы

Самый простой метод разработки, поскольку не требует знаний профессионального веб-программиста. Существует множество инструментов для разработки по тем либо иным шаблонам и макетам. К самым популярным и хорошо изученным конструкторам относятся Wix, Ucoz, Umi, Setup, Jimdo и т.д., их очень много, они развиваются и появляются новые.

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

Системы управления сайтом

CMS -- Content Management System (система управления сайтом), движок для сайта.

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

Популярный бесплатные CMS: WordPress, Joomla!, Drupal, MODX.

Популярные платные CMS: 1С-Битрикс, NetCat, UMI.CMS, HostCMS.

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

Шаблоны

Речь идёт о том, что можно скачать готовый HTML шаблон, с CSS оформлением, даже, возможно, с PSD-версией и полностью его переделать «под себя». Существуют как платные, так и бесплатные шаблоны. И те, и другие могут выглядеть очень красиво и профессионально.

В отличие от конструкторов и CMS -шаблон можно переделать и наполнить его «вручную» с помощью различных редакторов (Notepad++, Sublime Tex, Dreamweaver и т.д.). Здесь понадобятся начальные знания в области гипертекстовой разметки HTML, каскадных таблиц стилей CSS, основы PHP, JavaScript.

Этот способ подойдёт тем, кто не хочет создавать сайт «с нуля», рисовать дизайн и верстать его.

Разработка с нуля

Данный метод более долгий и трудоёмкий. Он требует знаний языков веб-программирования (PHP, HTML, CSS), а также опыт работы с базами данных (MySQL). Этот способ предполагает создание собственного дизайна, его вёрстку (процесс написания HTML и CSS-кода для веб-страницы) и программирование. Одному человеку, обычно, сложно и долго разработать сайт с чистого листа, поэтому в веб-студиях за каждый этап создания отвечает отдельный человек или даже группа.

Чтобы создать оригинальный, индивидуальный проект необходимо выбирать именно этот способ. Это требует определенных знаний и хорошей подготовки.

1.4 Языки HTML и CSS

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

Именно связка HTML/CSS даёт возможность верстать макеты, создавать и редактировать статические сайты.

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей -- это язык презентаций, созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

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

Для создания внешней таблицы стилей необходимо создать новый текстовый файл с расширением .css. CSS-файл должен быть сохранён в той же папке или подпапке, где находится HTML-файл.

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

Внутри элемента <head> применяется элемент <link>, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

<head lang="ru">

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

1.5 Этапы построения информационного ресурса

Процесс создания и разработки web-сайтов включает в себя:

- Утверждение технического задания на разработку сайта;

- Определение структурной схемы веб-сайта - расположение разделов, контента и навигации;

- Веб-дизайн - создание графических элементов макета Web-сайта, стилей и элементов навигации;

- Разработка программного кода, модулей и других элементов сайта необходимых в проекте;

- Наполнение сайта информацией;

- Приобретение домена и хостинга;

- Размещение сайта в сети Интернет.

1.5.1 Техническое задание

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

Пользы от технического задания много. Для каждой стороны она своя.

Польза для клиента:

- Понять каким будет сайт. Можно сразу увидеть структуру, понять, что и как будет работать.

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

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

- Узнать стоимость разработки сложного продукта.

Польза для исполнителя:

- Понять, что хочет заказчик.

- Застраховаться от внезапных изменений.

- Облегчить и ускорить процесс разработки.

Техническое задание на разработку сайта детского лагеря «Юбилейный» представлено в приложении.

1.5.2 Структурная схема веб-сайта

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

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

Внутренняя структура интернет-сайта ДОЛ «Юбилейный»:

- Главная страница;

- О лагере;

? Администрация;

? Наши вожатые;

? Награды;

? Видео и фото;

- Родителям и детям:

- Документы и бланки;

- Стоимость путевок;

- Памятки;

- Распорядок дня;

- Досуг;

- Часто задаваемые вопросы;

- Новости;

- Контакты.

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

Рисунок 1 - Макет №1

Рисунок 2 - Макет №2

1.5.3 Создание дизайн-макета интернет-сайта

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

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

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

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

1.5.4 Верстка сайта

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

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

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

На сегодняшний день используются такие способы вёрстки:

1.При помощи специальных редакторов кода, таких как Notepad++, Sublime Text, Atom, Coda и др. Их преимуществом является то, что в них реализована подсветка кода, то есть все название тегов, классов, свойств, значений выделены разными цветами и «верстальщику» значительно легче ориентироваться в коде. Этот способ используют большинство веб-разработчиков, так как он наиболее надёжный.

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

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

1.5.5 Наполнение сайта информацией

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

Текстовая составляющая очень важна, ведь она принимает участие в последующем продвижении, отражает информативность и имидж организации в целом.

1.5.6 Расположение сайта в сети Интернет

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

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

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

Например, доменное имя «www.example.com» состоит из трех основных частей и разделяется на такие уровни:

1. «.» или точка - это нулевой или корневой уровень.

2. com - это домен верхнего или первого уровня.

3. example - это домен второго уровня

4. WWW - Это префикс поддомена для World Wide Web. Первоначальное использование этого префикса было частично случайным, а трудности произношения вызвали интерес к созданию жизнеспособных альтернатив.

Стоит отметить, что система доменных имен содержит еще более высокий уровень домена, чем домен верхнего уровня. Самый высокий уровень - это корневой домен, который будет представлен одной точкой (как и во многих иерархических файловых системах, корневой каталог представлен "/"). Если точка для корневого домена была указана в URL-адресе, это будет справа от доменного имени верхнего уровня. Однако точка считается там, но никогда не показана.

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

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

Большинство хостинговых компаний требуют, чтобы вы владели своим доменом. Если у вас нет домена, хостинговые компании помогут вам приобрести его.

На сегодняшний день для размещения сайта в сети доступны бесплатные и платные хостинговые услуги.

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

Во время подбора имени домена необходимо руководствоваться следующими правилами:

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

2. Лучше остановить свой выбор на коротком и легко запоминающемся слове.

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

4. Если планируется создать html-портал для русскоязычных пользователей, то рекомендуется отдать предпочтение зоне .ru.

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

1. У компании должны иметься все необходимые лицензии на работу.

2. Сайт компании должен иметь всю контактную информацию.

3. Для оплаты должно быть доступно большое количество различных способов.

4. Рекомендуется посмотреть отзывы о провайдере на специализированных форумах.

5. Серверы компании должны соответствовать всем современным технологиям и требованиям -- круглосуточная работа, поддержка самых распространенных языков html и современных CMS, работа с системами управления базами данных, доступ по протоколу ftp, круглосуточная и компетентная техническая поддержка.

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

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

1.5.7 Тестирование сайта

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

2. Практическая реализация интернет-сайта

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

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

Плюсы редактора:

­ Notepad++ абсолютно бесплатен;

­ Имеет свой клиент FTP;

­ Текст разделяется на блоки;

­ Существует портативное приложение, оно легко помещается на обычную Flash-карту;

­ Наличие русифицированной версии, которая делает работу с программой проще;

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

­ Наличие функции подсветки синтаксиса. Подсветка отдельных частей кода разными цветами очень удобна для восприятия всего исходного текста;

­ Выделение открывающихся и закрывающихся тегов;

­ Наличие удобной функции «Отмена действия», которая также может быть вызвана нажатием клавиш Ctrl+Z.

Минусы редактора:

­ Отсутствие кроссплатформенности, программа может работать только на Windows;

­ Программа не умеет отличать разные языки в рамках 1 документа.

Скачать Notepad++ можно на официальном сайте (рисунок 3).

Рисунок 3 - Официальный сайт Notepad++

После завершения установки Notepad++, откроется главная страница редактора (рисунок 4).

Рисунок 4 - Главная страница Notepad++

2.2 Верстка сайта с помощью Notepad++

Разработка сайта начинается с создания отдельной папки, где будут сохраняться все файлы, связанные с сайтом. При использовании программы Notepad++ сохранять файлы нужно в правильном формате. На рисунке 5 представлена папка с файлами сайта «ДОЛ «Юбилейный».

Рисунок 5 - Папка с файлами сайта

Все стили вынесены в отдельный файл с расширением *.css. Изображения помещены в отдельную папку для удобства. Страница index.html является главной страницей сайта, все остальные - второстепенные.

После создания папки процесс создания web-сайта имеет следующий алгоритм:

1. Создается файл index.html.

2. Далее создается шаблон, который будет использоваться на всех страницах web-сайта. В данном случае шаблон содержит шапку (рисунок 6) и подложку (рисунок 7) сайта.

Рисунок 6 - Фрагмент HTML кода шапки сайта

Рисунок 7 - HTML код подложки сайта

3. Следующим шагом создаются все основные страницы сайта. В данном случае были созданы страницы: «Главная» или домашняя страница; «О лагере», «Новости»; «Контакты». А также создаются все второстепенные страницы.

4. После этого остается сделать кликабельные кнопки, горизонтальное выпадающее меню, разместить все элементы в соответствии с макетом, поработать с гиперссылками. Для этого прописываются стили CSS (рисунок 8).

Рисунок 8 - Фрагмент CSS кода

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

Шапка сайта остается неизменной на каждой странице (рисунок 9).

Рисунок 9 - Шапка сайта

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

Рисунок 10 - Выпадающее меню

Подвал отображается один и тот же на каждой странице (рисунок 11).

Рисунок 11 - Подвал сайта

Раздел сайта «О лагере» содержит информацию о ДОЛ «Юбилейный», его администрации, вожатых, а также в этом разделе можно посмотреть фотографии и видео детей (рисунок 12).

Рисунок 12 - Раздел «О лагере»

Раздел «Родителям и детям» предоставляет посетителям сайта возможность узнать ответы на все интересующие их вопросы касательно пребывания детей в лагере (рисунок 13).

Рисунок 13 - Раздел «Родителям и детям»

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

Рисунок 14 - Раздел «Новости»

Раздел «Контакты» содержит информацию о местоположении лагеря, о способах связи с администрацией (рисунок 15). Размещенная на страницах сайта карта со схемой проезда очень удобна для пользователей и полезна для самой компании. Клиенты это оценят!

Рисунок 15 - Раздел «Контакты»

2.3 Тестирование

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

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

Аналогичным образом проверяется валидность CSS-стилей.

2.4 Регистрация доменного имени и аренда хостинга

Для размещения web-сайта был выбран бесплатный хостинг HostiMan. Он имеет весь спектр необходимых функций для удобного управления сайтом и редактирования информации. В HostiMan представлены уникальные возможности для регистрации и продажи доменных имён, разнообразные тарифные планы хостинга, большой выбор виртуальных выделенных серверов и физических серверов; облачные сервисы, SSL-сертификаты от ведущих компаний мира и все необходимые для работы в Сети web-инструменты. Постоянное внедрение новых продуктов и услуги, а также дополнительные связанные сервисы, что позволяет клиентам HostiMan получать наиболее полный спектр услуг для создания собственного сайта или бизнеса в Интернете и его защиты.

Для размещения web сайта в сети Интернет необходимо было проделать следующие действия:

1. Для начала необходимо зарегистрироваться на сайте HostiMan и войти под своим аккаунтом.

2. Далее в личном кабинете выбрать имя домена (рисунок 16).

Рисунок 16 - Выбор домена

3. Далее сайт перенаправляет на страницу оплаты, в данном случае оплата не требуется (рисунок 17).

Рисунок 17 - Страница оплаты

4. После нажатия на кнопку "Оформить" откроется страница с подтверждением заказа.

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

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

2.5 Размещение сайта в сети Интернет

Для публикации сайта был выбран сторонний FTP-клиент FileZilla.

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

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

Поскольку программа совершенно бесплатная, скачать её можно с официального сайта (рисунок 18).

Рисунок 18 - Официальный сайт FileZilla

Для подключения к FTP-серверу нужно ввести его адрес в поле «Хост», заполнить поле «Имя пользователя» и пароль. Указать порт сервера в поле «Порт», если требуется, или оставить поле пустым, по умолчанию для FTP - 21, для SFTP - 22. Далее необходимо нажать кнопку «Быстрое соединение».

Чтобы каждый раз вручную не набирать одно и то же, в программе FileZilla есть инструмент «Менеджер Сайтов» - первая кнопка Панели инструментов. Его удобно использовать для быстрого подключения. Менеджер Сайтов содержит список серверов в виде дерева.

Можно добавить сервер кнопкой «Новый Сайт», переименовать, удалить, добавить новый каталог в дерево. В правой части окна необходимо ввести адрес в поле «Хост», выбрать тип входа: «Анонимный» или «Нормальный» и ввести имя в поле «Пользователь», при необходимости пароль. В остальных вкладках поля заполнены по умолчанию и, как правило, менять их не требуется (рисунок 19).

Рисунок 19 - Менеджер Сайтов

Окно программы FileZilla делится на несколько окошек (рисунок 20).

Рисунок 20 - Окно программы FileZilla

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

Для того чтобы начать публикацию сайта, нужно выделить файлы в нижнем окошке «Локальный сайт», и нажать правую кнопку мыши. В появившемся меню выбрать «Закачать на сервер».

Сайт Детского оздоровительного лагеря «Юбилейный» размещен в сети Интернет и доступен по адресу http://dol-ubiley.h1n.ru любому пользователю интернета (рисунок 21).

Рисунок 21 - Опубликованный сайт «ДОЛ «Юбилейный»

3. Затраты на создание сайта

3.1 Затраты на оплату труда

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

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

Таблица 1 - Временные затраты

Если в среднем заработная плата веб-программиста составляет 25000 рублей при 8-ми часовом рабочем дне, то по формуле 1 рассчитывается стоимость одного часа работы.

З_пл.час=M/R/8 (1)

где З_пл.час - стоимость одного часа (руб.);

M - месячная заработная плата 25000 (руб.);

R - число рабочих дней в месяце 21;

S=25000/21/8=148,8.

Стоимость одного часа работы равна 148 руб. 8 коп.

Заработная плата (З_пл.осн) за проведенную работу рассчитывается по формуле 2.

З_пл.осн=TЧЗ_пл.час; (2)

Где: Т - трудоёмкость (час.);

З_пл.час - стоимость одного часа работы программиста (руб.).

З_пл.осн=74Ч148,8=11011,2

Заработная плата равна 11011 руб. 2 коп.

Необходимо учесть взносы во внебюджетные фонды, которые на 2019 год составляют: 22% - в Пенсионный Фонд; 5,1% - в систему ОМС; 2,9% - сумма средств, предназначенная для уплаты в ФСС.

Кроме того, не стоит забывать про дополнительные перечисления, предусмотренные для работников вредных производств (по ставке от 0,2 до 8% в зависимости от класса риска - ст. 21 ФЗ № 125 от 24.07.1998 г.).

Отчисления во внебюджетные фонды =11011,2Ч30,2%=3325,38

Отчисления во внебюджетные фонды равны 3325 руб. 38 коп.

3.2 Затраты на амортизацию оборудования

Intel Core i3-540, 4000 Mb оперативной памяти, 500 Gb места на жестком диске стоимостью 21000 рублей.

Расчет амортизации оборудования за один месяц для работы над сайтом рассчитывается по формуле 3.

А= С_тк*Н_а (3)

где А - амортизация оборудования (руб.); С_тк - цена оборудования (руб.); Н_а - норма амортизации (%) Н_а = 0,033.

Подставляя данные в формулу.

А= 21000*0,033=693 (руб.) - за месяц работы;

А= 693/21/8=4,13 (руб.) - за час работы;

А= 4,13*74=305,62 (руб.).

Таким образом, на амортизацию оборудования за время разработки сайта, организация потратила 305 руб. 62 копеек.

3.3 Расходы на потребляемую электроэнергию

Затраты на электроэнергию рассчитываются по формуле 4.

W=Wm/d; (4)

где W - суточная норма электропотребления (кВт);

Wm - средняя месячная норма электропотребления (кВт);

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

За один месяц в среднем нагорает 150 кВт т.к. в одном месяце 21 суток, то за сутки нагорает 7,14 кВт.

W=150/21=7,14 (кВт/сутки).

Тогда за один час нагорает 0,9 кВт по формуле 5.

Wч=W/t; (5)

Wч=7,14/8=0,9 (кВт);

Wч - количество потребляемой электроэнергии (кВт/ч);

t - количество часов в сутки; W - суточная норма электропотребления (кВт).

Если 1 кВт электроэнергии стоит 3,86 рубля, то 0,9 кВт стоит 3,5 рублей по формуле 6.

C=PЧWч; (6)

C=3,86Ч0,9=3,5 (руб.);

где C - стоимость электроэнергии, потребляемой за один час (руб.);

P - стоимость 1 кВт (руб.);

Wч - количество потребляемой электроэнергии (кВт/ч).

На разработку ушло 74 часов, следовательно, по формуле 7 рассчитаем затраченную электроэнергию.

U=CЧt (7)

где U - стоимость электроэнергии (руб.);

C - стоимость 3,5 кВт (руб.);

T - рабочее время (час.).

U=3,5Ч74=257,1 (руб.).

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

3.4 Расчёт себестоимости созданного информационного ресурса

Для информационного ресурса «ДОЛ «Юбилейный» использовали бесплатный хостинг HostiMan.

Представим смету затрат в таблице 2.

Таблица 2 - Расчетная себестоимость проекта

4. Экология и охрана труда

4.1 Теоретические основы охраны труда

В Трудовом кодексе (ТК) Российской Федерации (РФ) от 30.12.2001 №197-ФЗ с.209 (ред. от 05.02.2018) приводятся основные понятия охраны труда.

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

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

Вредный производственный фактор - производственный фактор, воздействие которого на работника может привести к его заболеванию.

Опасный производственный фактор - производственный фактор, воздействие которого на работника может привести к его травме.

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

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

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

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

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

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

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

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

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

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

4.2 Особенности выполнения работ за компьютером

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

Время отдыха при работе за компьютером

На основании статьи 107 ТК РФ одним из видов времени отдыха признаются перерывы в процессе рабочего дня.

Согласно статье 109 ТК РФ некоторые виды труда подразумевают необходимость предоставления работникам возможности отдохнуть в течение рабочего дня, что вызвано спецификой технологии, производства и условий работы. Конкретный перечень таких работ и порядок предоставления соответствующих перерывов должны предусматриваться правилами внутреннего распорядка.

В статье 27 Закона о санитарно-эпидемиологическом благополучии от 30 марта 1999 года отмечается, что работа с машинами и различными устройствами не должна вредно влиять на здоровье.

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

В зависимости от вида работ и степени нагрузки Приложение 7 к СанПиН2.2.2/2.4.1340-03 устанавливает, что время отдыха при рассматриваемом виде работ должно составлять в течение рабочего дня от 50 до 140 минут. И это с учетом того, что данные перерывы длительность работы увеличивать не должны.

В силу статьи 22 ТК РФ работодатель должен обеспечивать безопасность и соответствие условий труда всем необходимым требованиям (в том числе при работе за компьютером).

В Типовой инструкции ТОИ Р-45-084-01(утверждена 2 февраля 2001 года, далее - Инструкция) содержится более детальная регламентация рассматриваемого вопроса.

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

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

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

· А - чтение информации с монитора по сделанному запросу;

· Б - печатание на клавиатуре с целью ввода информации;

· В - творческая работа.

Кроме этого предусмотрено деление на категории сложности работ:

· для группы А (не свыше 60000 считываемых знаков за смену) перерыв составляет 15 минут, предоставляется два раза - через два часа после начала работы и перерыва на обед;

· для группы Б (не свыше 40000 напечатанных знаков за смену) перерыв составляет 10 минут через каждый трудовой час;

· для группы В (не свыше шести 6 часов за смену) перерыв составляет 15 минут через каждый трудовой час.

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

4.3 Соответствие рабочего места требованию безопасности

Требования к помещениям для работы с ПЭВМ приведены в разделе III СанПиН 2.2.2/2.4.1340-03.

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

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

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

Не допускается размещение мест пользователей ПЭВМ во всех образовательных и культурно-развлекательных учреждениях для детей и подростков в цокольных и подвальных помещениях.

Площадь на одно рабочее место пользователей ПЭВМ с ВДТ на базе электронно-лучевой трубки (ЭЛТ) должна составлять не менее 6 м2, в помещениях культурно-развлекательных учреждений и с ВДТ на базе плоских дискретных экранов (жидкокристаллические, плазменные) - 4,5 м2.

При использовании ПВЭМ с ВДТ на базе ЭЛТ (без вспомогательных устройств - принтер, сканер и др.), отвечающих требованиям международных стандартов безопасности компьютеров, с продолжительностью работы менее 4-х часов в день допускается минимальная площадь 4,5 м2 на одно рабочее место пользователя (взрослого и учащегося высшего профессионального образования).

Для внутренней отделки интерьера помещений, где расположены ПЭВМ, должны использоваться диффузно отражающие материалы с коэффициентом отражения для потолка - 0,7 - 0,8; для стен - 0,5 - 0,6; для пола - 0,3 - 0,5.

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

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

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

Заключение

Результатом дипломной работы является создание WEB-сайта для детского оздоровительного лагеря «Юбилейный». Разработанный WEB-сайт позволяет автоматизировать процессы доступа к информационным ресурсам организации через Интернет.

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

Разработанный проект удовлетворяет всем требованиям, поставленным на этапе постановки задачи, а именно:

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

? обоснован выбор средств построения информационного ресурса;

? создан макет сайта;

? с помощью HTML/CSS разработан сайт;

? сайт размещен в сети Интернет.

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

Сайт - это лицо компании. Сайт - это круглосуточный виртуальный офис. С постоянным ростом количества пользователей сети Интернет, увеличивается и количество людей, которым может понадобиться информация о вашей компании не только в рабочее, но в любое другое время. В этом случае сайт может оказать неоценимую услугу. На него можно зайти днем и ночью, все 24 часа в сутки, 7 дней в неделю, 365 дней в году, из любой цивилизованной точки планеты.

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

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

Список литературы

1. Алексеев А.П., Введение в Web-дизайн: учебное пособие. - М.: СОЛОН-ПРЕСС, 2016.

2. Богданов А.Г., 47 готовых решений для создания Web-сайта - М.: Триумф, 2015.

3. Борсук Н. А., Гартман В. А., Кургузов С. Д. Анализ средств разработки web-страниц // Символ науки. 2016. №11-3. [Электронный ресурс]. URL: http://cyberleninka.ru/article/n/analiz-sredstv-razrabotki-web-stranits (дата обращения: 11.04.2019).

4. Брюс Э. Философия Java. Библиотека программиста: Издательство «Питер», 2017.

5. Гаевский А.Ю., 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript - М.: Триумф, 2015.

6. Дженнифер Н. Web-дизайн. Справочник: Издательство КУДИЦ-Пресс, 2017.

7. Джеффри З. WEB-дизайн по стандартам: Издательство НТ Пресс, 2016.

8. Джеффри Ф. Регулярные выражения: Издательство Символ-Плюс, 2016.

9. Дронов В., HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - М.: БХВ-Петербург, 2015.

10. Константинов П.П., Web-дизайн с нуля! - М.: Лучшие книги, 2015.

11. Кроудер Д., Создание web-сайта для чайников: 4-е издание. - М.: Диалектика, 2016.

12. Леонтьев Б. К. Web-дизайн: Тонкости, хитрости и секреты - 3-е изд., дополненное и исправленное. М.: Майор, 2016.

13. Леонтьев В.П. Новейшая энциклопедия персонального компьютера 2016.-М.: ОЛМА-ПРЕСС, 2016.

14. Макконелл С. Совершенный код. Практическое руководство по разработке программного обеспечения: Издательство «Русская Редакция», 2017