[if IE 6]><linkrel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]

2. Доработка фоновых цветов, градиентов, шапки сайта в программе AdobePhotoshopCS3. Программа Artisteerсоздает не очень выразительные и качественные градиенты, которые для лучшего отображения я изменял с помощью Photoshop. А также необходимо создать шапку сайта. Интерфейс программы показан на рисунке 6.



Рисунок 6. ИнтерфейсAdobePhotoshopCS3

Итак, мы изменили необходимые изображения, создали шапку сайта размером 980 на 250 пикселей, страничка уже имеет нормальный внешний вид.

3. Редактирование htmlи cssв программе AdobeDreamweaverCS3.

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

Теперь редактируем CSS. Прописываем недостающие атрибуты, изменяем цвета.



Например текст контента:

PostContent

{

font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;

font-size: 12px;

text-align: justify;

line-height: 1.5;

color: #000000;

}

Каждое изменение проверяем в браузере.

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

HTML

<table align='center' class='news'>

<tr>

<td class='news_title'>

<p class = 'news_name'><a href = 'view_news.php?id=%s'>%s</a></p>

<p class = 'news_adds'>Датадобавления: %s</p>

</td>

</tr>

CSS

news { border: 1px solid #CCCCCC; width: 95%; }

news_title {background-color:#ABDFFE; }

art_title {background-color:#33CCFF; }

news_name {font-weight:bold; margin-top:7px; margin-bottom:7px; }

news_adds {font-size:11px; margin-top:7px; margin-bottom:7px; color:#666666; }

Вот 3 основных этапа, за которые был создан основной дизайн сайта. По мере работы и модернизации сайта, дизайн будет всегда редактироваться, добавляться новые стили, слои и изображения. Экранные формы созданного шаблона странички, на примере нескольких страниц(в браузере Opera 11), показаны на графическом листе 7.

Рисунок 7. Экранные формы

2.5 Разработка алгоритма взаимодействия с БД

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

Это легко достигается с помощью языка PHP. Схема обработки страниц интерпретатором PHPи заполнение страницы информацией из БД показана на рисунке 8.

Рисунок 8. Взаимодействие с БД

В первую очередь через интерфейс PHPMyAdminсоздается БД vtuz. В ней создаем таблицу settings,в которой содержится вся информация почти для всех страниц сайта, а также 5 таблиц для вывода новостей на главной странице и новостей для 4х групп каждой специальности.

Модель базы данных показана на графическом листе 5.



Рисунок 9. Таблицы БД РадиоВТУЗ

Запрос MySQLсоздания таблицы выглядит так:

CREATETABLE `settings` (

id` int(2) NOT NULL auto_increment,

page` varchar(255) NOT NULL,

title` varchar(255) NOT NULL,

meta_d` varchar(255) NOT NULL,

meta_k` varchar(255) NOT NULL,

text` text NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=1 ;

Соединяемся с базой данных. Для удобства создаем отдельный файл db.php, который будет устанавливать соединение с базой.

<?

$db = mysql_connect ("localhost","php","12345");

mysql_select_db ("vtuz",$db);

?>

Устанавливается соединение с БД с помощью команды mysql_connect, в скобках указываются имя хоста, имя пользователя и пароль. При размещении сайта на хостинге эти данные необходимо будет изменить. Эта команда возвращает данные которые заносятся в переменную $db. Далее выбираем БД, так как их может быть несколько, с помощью команды mysql_select_db.

Соединение с БД произведено. Вставляем эту страничку в каждую страницу сайта с помощью оператора include.

<?phpinclude ("blocks/db.php");?>

Теперь необходимо выполнить запрос к БД и извлечь из нее информацию в массив.

<?php

$result = mysql_query ("SELECT title,meta_d,meta_k,text FROM settings WHERE page='index'",$db);

$myrow = mysql_fetch_array ($result);

?>

В первой строке выполняется запрос: ВЫБРАТЬ данные ИЗ таблицы settingsгде параметр pageсодержит имя данной странички. Данные записываются в переменную. Во второй - mysql_fetch_array - возвращает массив с обработанным рядом результата запроса, или FALSE, если рядов больше нет. Теперь, когда данные запроса записаны в массив, эти данные можно использовать. Вставляем данные из массива в тех местах кода, где они должны быть, например:

<meta name="keywords" content="<?php echo $myrow['meta_k']; ?>">

Теперь на страницах будут выводиться данные из БД.

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

Для форума использован готовый «движок» phpBB.[7]

Для вывода расписания занятий использован календарь компании Google. Создан аккаунт radiovtuz.mai@gmail.comи созданы календари для каждой группы. Это позволит оперативно изменять расписание, добавлять новые события и при желании студентов можно настроить оповещение об изменениях календаря на электронную почту.

Для выбора группы на странице schedule.phpсоздана форма jumpmenu и при выборе определенного пункта на страницу подгружается фрэйм с запрашиваемым расписанием. Интерфейс страницы показан на рисунке 11. Часть кода страницы представлена в приложении 2.



Рисунок 11. Страница «Расписание»

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

Рассмотрим на примере добавления новости:

Создается страничка с формой добавления новости, куда вводится сама новость new_news.php. Обработчиком формы является другая страничка - add_news.php.

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

Далее идет запрос к базе с командами добавления информации:



$result = mysql_query ("INSERTINTOnews (title, meta_d, meta_k, date, description, text) VALUES ('$title', '$meta_d', '$meta_k', '$date', '$description', '$text')");

Таким образом с помощью PHPи БД происходит управление информацией и контентом. Схема взаимодействия с БД показана на графическом листе 4.

Рисунок 12. Взаимодействие PHPс БД

Альтернативным вариантом работы с БД является утилита phpMyAdmin, описанная в пункте 2.2.5.

2.6 Разработка администраторской части сайта

Администраторская часть сайта («Админка») - необходимая часть сайта, если конечно на сайте хотя бы иногда обновляется информация. Админка позволяет управлять контентом без специальных знаний языков HTML, CSS, PHPи системы управления базами данных.

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

Принцип работы этих функций примерно такой же как и при выводе новостей из базы данных. Для каждой функции имеются 2 страницы - 1ая - это вывод формы для добавления или изменения контента, 2ая - это обработчик, который выполняет определенный запрос к БД.

Этапы создания администраторской панели сайта:

1. Создаем в корне папки с файлами сайта папку /adm. Копируем туда файл index.php, скрипты и таблицы стилей, папки с блоками и изображениями. Изменяем файлы indexи файлы верхнего и бокового меню, в соответствии с нужными функциями.

2. Добавление новости. Как было сказано выше - создаем 2 файла. Заголовки, мета описания и ключевые слова не нужны.

· 1ый файл содержит простую форму, содержащую все поля соответствующей таблицы из БД, т.е. описание, текст, дата добавления, ключевые слова, заголовок, мета описание. Администратор просто заполняет все поля. Обработчиком формы является 2ой файл. Это значит что при нажатии кнопки «занести новость в БД», данные из формы записываются в глобальный массив $_POST.

· Во 2ом файле данные из глобального массива записываются в переменные при условии что эти данные существуют, если нет, то они удаляются:

if (isset ($_POST['title'])) {$title = $_POST['title']; if ($title == '') {unset ($title);} }



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

<?php

if (isset($title) &&isset($meta_d) &&isset($meta_k) &&isset($date) &&isset($description) &&isset($text))

{

$result = mysql_query ("INSERT INTO news (title, meta_d, meta_k, date, description, text) VALUES ('$title', '$meta_d', '$meta_k', '$date', '$description', '$text')");

if ($result == 'true') {echo "<p>Новостьуспешнодобавлена</p>";} else {echo "<p>Новостьнедобавлена</p>";}

}

else {echo "<p>Вы ввели не всю информацию, новость не может быть добавлена</p>";}

?>

Таким образом, новость добавляется в БД и выводится на основной части сайта.

В 1ый файл так же добавлен скрипт визуального текстового редактора, так называемого WYSIWYG-редактора. Это позволяет легко форматировать текст при добавлении, не указывая необходимых тегов, добавлять рисунки и др. Для корректной работы редактора рекомендуется использовать браузер MozillaFirefoxверсии 3 и выше. Сообщение об этом содержит главная страница панели администратора, а так же ссылка на скачивание последней версии браузера.

3. Редактирование новостей и страниц сайта

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

4. Удаление новостей.

5. Защита админки паролем.

Для того чтобы никто кроме доверенных лиц - администраторов сайта, не смог зайти в администраторскую панель, ее необходимо запаролить. Создаем новую таблицу userlistс 3 параметрами - id, user, password. Создаем файл admlock.phpсодержащим скрипт запроса и проверки имени пользователя и пароля. Вставляем этот файл черезоператорincludeна каждую страницу в папке adm.Данные для доступа к администраторской панели представлены в [приложении 3].

Теперь можно безопасно совершать действия над содержимым страниц а точнее таблиц БД, без знаний языков разметки и программирования. Экранные формы панели администратора представлены на графическом листе 8.



Рисунок 13. Блок-схема алгоритма редактирования новости



2.7 Перенос сайта на хостинг

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

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

Рисунок 14. Экспорт БД (экран 1)

Рисунок 15. Экспорт БД (экран 2)

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

Далее в панели управления хостингом создаем базу данных и импортируем в нее сохраненные ранее таблицы БД. При изменении названия БД или привилегий пользователя, необходимо будет изменить файл db.php.

Для выбора и сравнения хостинг-провайдеров использовался ресурс[8]. Сравнение происходит за счет оценок пользователей, использующих тот или иной хостинг. Для выбора места размещения сайта РадиоВТУЗ было рассмотрено 4 провайдера: TimeWEB, Jino, Ru-center, Best-hoster.В результате анализа был выбран хостинг от компании TimeWEB со следующими характеристиками:

· Дисковое пространство, Mb 1000

· MYSQL 4/5 базы данных, шт. 2

· E-mail ящики, шт. - неограничено

· Домены и поддомены, шт. - неограничено

· Стоимость в месяц, руб 120

· Стоимость в год, руб 1300

· Собственная Панель Управления Аккаунтом;

· MySQL 5, PHP 4/5, Zend, phpMyAdmin;

· Perl 5, Parser, Python;

· Поддержка SSI, WAP, C++, cgi-bin;

· SSH, sFTP/FTP доступ;

· Поддержка неограниченного числа доменов;

· Управление DNS;

· Access и Error журналы (логи сервера), статистика сервера;

Управление .htaccess, собственные страницы ошибок;

· Неограниченный и бесплатный трафик;

· Файловый Web-менеджер;

· Управление задачами по расписанию -Cron;

· POP3, IMAP сервисы для удаленной работы с почтой;

· Защищенный Web-интерфейс для работы с почтовыми ящиками;

· Возможность резервного копирования ящиков электронной почты;

· SMTP сервер для отправки корреспонденции;

· Ежедневное резервное копирование всей информации пользователя (сайты и базы данных);

· Служба поддержки.

Обзор хостингов показан на графическом листе 6.

Рисунок 16. Сравнительные характеристики хостингов



2.8 Регистрация сайта на поисковиках

По статистике, примерно 90 процентов новых пользователей приходят с поисковых систем (это называется поисковый трафик).В связи с этим, сразу же после запуска проекта, следует добавить сайт в поисковики. В принципе, этого можно и не делать, т.к. поисковики все равно рано или поздно найдут ресурс и проиндексируют его. Регистрация сайта в Яндексе, Гугл, Рамблер и прочих поисковых системах нужна, прежде всего, для гарантированности этого процесса. [9]

Список поисковиков, в которые добавлен сайт:

Во-первых, это конечно же регистрация сайта в Яндексе -- самый популярный поисковик в русскоязычном сегменте сети. Примерно 50 процентов пользователей пришедших на ресурс с поисковиков будут с яндекс. Добавить сайт в Яндекс можно по адресу: http://webmaster.yandex.ru/

На втором месте, естественно регистрация в Google -- лидер мирового поиска. В рунете, по непроверенным данным, его доля составит примерно 40 процентов от общего количества новых пользователей, пришедших на ресурс с поисковиков. Добавить свой web проект в Google можно по адресу:http://www.google.com/addurl/[9]

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

Регистрация в Апорт! (Aport) -- полнотекстовая поисковая система компании РОЛ (RussiaOnline). Апорт является поисковой системой по российскому Интернету, поэтому добавлять в нее следует русскоязычные проекты, а также проекты, имеющие непосредственное отношение к российскому Интернету. При поиске учитываются особенности русского языка.

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

2.8.1 Понятие о SEO

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

Поисковая система учитывает следующие параметры сайта при вычислении его релевантности (степени соответствия введённому запросу):

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

· индекс цитирования сайта, зависящий от количества и авторитетности веб-ресурсов, ссылающихся на данный сайт; многими поисковиками не учитываются взаимные ссылки (друг на друга). Зачастую также важно, чтобы ссылки были с сайтов схожей тематики, что и оптимизируемый сайт. [1]

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

Внешние факторы делятся на статические и динамические.

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

Динамические внешние факторы определяют релевантность сайта на основании цитируемости его внешними веб-ресурсами и их авторитетности в зависимости от текста цитирования. [1]

Методы внешней поисковой оптимизации:

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

· Регистрация в каталогах поисковых систем таких как: Яндекс.каталог, Рамблер Top 100, каталог Google (DMOZ), каталог Апорта.

· Обмен ссылками. Существуют несколько способов обмена -- прямой, кольцевой, односторонний (покупка ссылок).

· Размещение статей.

· Социальные сети.

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

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

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

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

Тестирование на кроссбраузерность.Для тестирования использовались несколько известных браузеров, описанных в пункте 2.3.1. и программа IETester, позволяющая протестировать страницы на 6 версиях браузера internetexplorer.

Рисунок 17. Интерфейс программы IETester

Рисунок 18. Интерфейс программы IETester

Сайт корректно отображается во всех версиях браузера кроме IE 5, но он уже не используется.

Следующим видом тестирования является тест на устойчивость к большим нагрузкам -- Load-testing, stress-test или performancetest. Такой тест имитирует одновременную работу нескольких сотен или тысяч посетителей (каждый из которых может «ходить» по сайту в соответствии со своим сценарием), проверяя, будет ли устойчивой работа сайта под большой нагрузкой[10].Но так как на сайте РадиоВТУЗ ожидается небольшое количество пользователей - в основном только студенты и преподаватели, такой вид теста проводить нет смысла.

Еще одним типом тестирования является проверка верности HTML-кода страниц сайта. Для такого рода тестирования написано множество утилит -- от простеньких скриптов на perl-е до мощных валидаторов, проверяющих весь сайт на соответствие стандартам (а некоторые валидаторы могут в автоматическом режиме исправлять найденные недочеты, например, пропущенные закрывающие теги и т.д.). Часто такие средства встраивают в веб-редакторы, существуют браузеры совстроенными валидаторами [10]. Примером такого теста является утилита CSEHTMLValidator. Программа выявляет ошибки кода и несоответствия стандартам W3C, а также дает рекомендации по их устранению.



Рисунок 19. Интерфейс программы CSEHTMLValidator



Задание технологической части

1. Разработка технологии создания сайта

1.1 Этапы проектирования web-сайта

Технология создания webсайта включает 3 основных этапа:

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

2. Написание кода программы, отладка.

3. Тестирование программы на веб сервере, SEOоптимизация.

Рассмотрим каждый этап в отдельности.Предполагается что все операции исполняет 1 человек.

1ый, подготовительный, этап включает в себя следующие операции:

· Получение ТЗ от заказчика. Обсуждение спорных моментов и согласование.

· Анализ ТЗ. Выбор методов и средств программирования (языка webразработки) в зависимости от поставленных задач.

· Установка и настройка программного обеспечения, необходимого для разработки.

· Составление карты сайта.

· 2ой этап, основной - написание кода программы, отладка.

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

· Если дизайн разработан исполнителем, необходимо согласовать его с заказчиком.

· Верстка (если не используются утилиты создания шаблонов веб страниц, готовые шаблоны или встроенные шаблоны систем управления контентом)

· Тестирование в различных браузерах. Исправление кода HTMLи CSS.

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

· Разработка алгоритма программы (скриптовой части кода), алгоритма взаимодействия с БД.

· Написание программы.

· Разработка администраторской части сайта (если не используется система управления контентом)

· Тестирование и отладка программы.

· Проверка валидности кода (соответствия стандартам W3C).

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

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

· Проверка в различных браузерах. При необходимости изменения стилей и форматирования контента.

· 3ий, заключительный этап.

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

· Перенос сайта на хостинг.

· Запуск проекта. На данном этапе подписываются необходимые документы о приемке-сдаче с заказчиком.

· Оптимизация (SEO). Регистрация сайта на поисковиках.

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

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

Рисунок 20. Схема функциональная ТП разработки сайта

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

Дизайнер

· разработка эскизов типовых страниц и элементов сайта;

· создание графических форм и элементов навигации;

· актуализация элементов дизайна.

Веб-разработчик

· проектирование баз данных;

· скриптинг;

· разработка, установка и настройка интерактивных сервисов;

· разработка интерфейса и механизмов системы администрирования сайта.

HTML-кодер

· верстка и адаптация текстового наполнения;

· оптимизация HTML-кода;

· размещение иллюстраций и графических элементов.

Редактор-копирайтер

· редактирование и корректура текстов;

· написание дополнительных текстовых блоков и анонсов;

· контент-менеджмент

Разработана структурная схема технологического процесса разработки сайта, представленная на графическом листе 9.

Рисунок 21. Схема структурная ТП разработки сайта



1.2 Этапы проектирования сайта РадиоВТУЗ МАИ

1. Разработка ТЗ, согласование с преподавателями. Сбор сведений о сайте - текстовая и графическая информация. Выбор методов и средств программирования, основные языки используемые при разработке сайта РадиоВТУЗ это: языки разметки HTMLи CSS, языки веб-программирования PHPи JavaScript.

2. После сбора всей информации и настройки программного обеспечения разрабатывается карта сайта - все страницы ресурса с внутренними и гиперссылками.

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

· Дизайн сайта РадиоВТУЗ разрабатывается в следующей последовательности: создается шаблон в программе Artisteer[п.п. 2.3.3], дорабатывается HTMLи CSS, добавляются и изменяются стили, код приводится к нормальному виду, шаблон заполняется некоторой статической информацией. Затем шаблон тестируется в различных интернет браузерах. Если все в порядке, страница разбивается на основные блоки (header, footer, меню навигации, боковая панель) и создаются отдельные файлы.

· Разработка алгоритма программы. На этом этапе используется PHPи БД. Сначала завершается предыдущий этап - создание дизайна, страница собирается из ранее сохраненных блоков с помощью оператора includeв PHP. Изменяется кодировка (используется кодировка UTF-8), затем код исправляется в соответствии со стандартами W3Cдля XHTML[п.п. 2.2.1]. Создается phpфайл для выбора БД и подключения к ней, этот файл подключается к файлу главной страницы до начала htmlкода.

На этом этапе готова первая страница - index.php, а также таблица стилей, сгенерированный программой Artisteerскрипт для обеспечения кроссбраузерности, папки с изображениями и блоками.

Далее в соответствии с картой сайта создаются все страницы, не включая административных. Создается первая таблица(settings) в БД. Таблица должна содержать поля id, заголовок, page, meta_k (ключевые слова), meta_d(описание), текст. Это основная таблица БД - в ней должна содержаться информация для всех страниц сайта.

С помощью PHPиз БД выводится информация в соответствующие места на всех страницах.

После того, как все страницы созданы, разрабатывается алгоритм вывода новостей, постраничной разметки, форм для вывода информации, страницы расписание и контакты с применением данных из google.com.

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

На этом этапе основной код внешней части сайта создан. Тестирование. Отладка программы. Доработка дизайна. Установка и настройка форума (этот пункт допускается выполнить когда сайт будет размещен на хостинге)

Далее разрабатывается администраторская часть сайта, невидимую для обычных пользователей [п.п.2.6]. Убираются все ненужные блоки, создаются необходимые страницы для создания, редактирования и удаления новостей и информации на страницах сайта. Добавляется скрипт визуального редактора nicEdit.

Тестирование. Важно взаимодействие страниц с правильными таблицами и строками в БД.

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

После того как все страницы и таблицы БД созданы, сайт тестируется, исправляются ошибки.

Таблицы БД заполняются информацией с соблюдением тегов форматирования, проверяется в браузерах.

3. Подбирается хостинг-провайдер с оптимальной конфигурацией оборудования, ПО и хорошим соотношение цена-качество[п.п.2.7]. Файла переносятся на FTPсервер хостинга, импортируется БД. Исправляются проблемы с кодировкой (если возникли).

На этом этапе разработка сайта РадиоВТУЗ завершается.

Для будущего администрирования сайта РадиоВТУЗ, написана подробная инструкция по поддержке сайта, все данные хостинг-провайдера, логины и пароли БД. Инструкция представлена в приложении 3.

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



Маршрутная карта

Экономическая часть

Определение целесообразности разработки сайта РадиоВТУЗ.

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

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

Таблица 3

Функциональные характеристики	Уровень функциональных характеристик	Значимость характеристики
	Аналог	Разрабатываемая система
Удобство отображения всей информации	2	8	0,35
Наличие форума РадиоВТУЗ	1	10	0,25
Удобство добавления и редактирования информации	3	8	0,2
Скорость обработки страниц сервером	1	5	0,2
ИТОГО:	1

Характеристики разрабатываемого сайта института сравниваются с уже созданными ресурсами, размещенных на бесплатных хостингах, информацией на сайте МАИ и информацией на доске объявлений в здании института.

· Удобство отображения всей информации. Основная функция сайта РадиоВТУЗ МАИ. Так как все пользователи сайта имеют выход в глобальную сеть, намного удобней следить за последними обновлениями на разрабатываемом сайте. Все существующие на данный момент ресурсы, посвященные РадиоВТУЗ не обновляются, кроме нескольких небольших (как правило для отдельных групп), например в социальных сетях.

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

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

· В крайней характеристике «Скорость обработки страниц сервером» сравниваются скорость обработки на платном и бесплатном хостингах, так как уже говорилось, что все существующие сайты РадиоВТУЗ располагаются на бесплатных хостингах, например narodили ucoz.

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

Расчет индекса технического уровня

где n - количество рассматриваемых функционально-технических характеристик;

а_i - новое изделие (Разрабатываемая система);

а⁰_i - аналог.

Для рассматриваемого случая

= = 4,51.

По полученному результату можно сделать вывод о научно-технической прогрессивности и целесообразности проводимой работы по разработке сайта института РадиоВТУЗ.

Определение трудоемкости и затрат на создание алгоритмов и программных продуктов

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

где -ожидаемая длительность j-ой работы; и - наибольшая и наименьшая, по мнению эксперта, длительность работы. Последовательность выполняемых этапов работы приведена в таблице 4.

Таблица 4

№	Наименование работы	Исполнитель	Длительность работ, дней
	Подготовка исходных данных	Инженер	15	30	21
	Разработка ТЗ	Руководитель	5	7	5,8
	Анализ ТЗ	Инженер	7	14	9,8
	Утверждение ТЗ	Руководитель	2	3	2,4
	Изучение справочной литературы	Инженер	7	14	9,8
	Разработка основных этапов работы	Инженер	10	14	11,6
	Разработка алгоритма программы	Инженер	7	10	8,2
	Разработка программы	Инженер	7	14	9,8
	Отладка программы	Инженер	5	10	7
	Охрана труда	Инженер	7	14	9,8
	Технико-экономическое обоснование	Инженер	14	21	16,8
	Оформление пояснительной записки	Инженер	25	31	37,4
	Выполнение плакатов	Инженер	7	14	9,8
ИТОГО:	118	196	159,2

Затраты на проектирование

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

1. Заработная плата основных исполнителей

2. Расходные материалы

3. Отчисление в ПФР, ФСС, ФОМС

4. Страховые социальные расходы на производственный травматизм исполнителей

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

6. Прочие расходы.

Рассмотрим каждую статью расходов.

1. Заработная плата основных исполнителей

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



где k=7 - количество этапов;

- трудоемкость i-го этапа;

_i =500 - средняя дневная тарифная ставка инженера (руб.);

_i =800 - средняя дневная тарифная ставка руководителя (руб.);

n_i=1 - количество исполнителей i-го этапа.

ЗПинж = 151*500 = 75500р

ЗПрук = 8.2*800 = 6560р

ЗПсумм = 75500+6560= 82060

2. Расходные материалы

Таблица 5

№ п/п	Наименование	Количество, шт.	Цена за единицу, руб.	Сумма, руб.
1	Компьютер в сборе	1	24000	24000
2	Лицензионное ПО	3	3000	9000
3	Канцелярские принадлежности	10	10	100
Итого	33100

3. Отчисление в ПФР, ФСС, ФОМС

Обычный размер ставки -- для наемного работника, имеющего годовой доход менее 280 тыс. руб. -- составляет 34 %. Типичный пример распределения этих денег для такого работника выглядит так:

Пенсионный фонд Российской Федерации -- 26 %

Фонд социального страхования Российской Федерации -- 2,9 %

Фонды обязательного медицинского страхования -- 5,1 %

Итого: 34 %

Отчисления = руб.

4. Страховые социальные расходы на производственный травматизм(СОЦТР) исполнителей

СОЦТР берется в размере 0.2% от заработной платы ЗП, т.е.

СОЦТР = руб.

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

Величина накладных расходов (Р_накл) определяются по отношению к заработной плате основных исполнителей (ЗП):

Р_накл = ЗП * К_накл ,

где К_накл = 1,2 - коэффициент накладных расходов. Таким образом,

Р_накл = 98472 руб.

е) Прочие расходы

Прочие расходы составляют 10% от общих затрат, т.е. 8206,00 руб.

Общая структура затрат приведена в таблице 6.

Таблица 6

№ п/п	Наименование статей затрат	Затраты, руб.	Удельный вес, %
1	Заработная плата	82060,00	29,46
2	Расходные материалы	33100,00	11,88
3	Отчисление на единый социальный налог исполнителей	27900,40	10,02
4	Страховые социальные расходы на производственный травматизм исполнителей	164,12	0,06
5	Накладные расходы	98472,00	35,35
6	Прочие расходы	8206,00	2,95
	Итого	ЗТ = 249902,52 руб	100%

Оценка экономической эффективности

Разработка сайта осуществляется работой информационной системы и приводит к повышению качества этой работы. Тогда Э_ППГ определяется на основе экономии годовых эксплуатационных затрат информационной системы по формуле:

,

где - индекс технического уровня нового варианта источника информации;

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

Годовые эксплуатационные затраты при выполнении работы информационной системой (ИС) включают следующие затраты:

1. затраты на оплату труда персонала, обслуживающего ИС (ЗП_ЭИС);

2. отчисления в ПФР, ФСС, ФОМС (34%) обслуживающего персонала (З_соц.н);

3. Страховые социальные расходы на производственный травматизм исполнителей (0.2%);

4. амортизационные отчисления (Автг);

5. затраты на электроэнергию для решения комплекса задач (З Эл);

6. затраты на текущий ремонт и обслуживание (З р вт);

7. затраты на технические носители информации (З Нос ИС);

8. накладные расходы по эксплуатации ИС (Знис);

1. Расчет годовых эксплуатационных затрат

ЗП_ЭИС =

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

Где Т_МГ - машинное время, используемое в течение года для реализации данного программного продукта, час.

F_ЭФФВТ - годовой эффективный фонд времени работы вычислительной техники, час.

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

Т_МГ =8*22*12 = 2112 часов;

F_ЭФФВТ =365*24 = 8760 часов;

=2112/8670=0,24;

Ч_J- среднегодовая численность персонала J-ой профессиональной группы;

Ч_J = 2 чел.;

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

r_месj= 15000 руб.;

К_ДОП - коэффициент дополнительной заработной платы, 0.2;

К_пр - коэффициент премиальных выплат, 0.1;

ЗП_ЭИС = 0,24*12*2*15000*(1+0,2+0,1) = 112320 руб.

2. Расчет отчислений

З_СОЦ.Н = 112320*0.34 = 38188,80 руб.

3. Расчет страховых социальных расходов на производственный травматизм исполнителей

З_ССР.И = 112320*0.002 = 224,64

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

Таблица 7

№ п/п	Наименование	Количество, шт. Qоб	Цена за единицу, руб. Цоб	Срок службы. Т	АВТ Г = Цоб* Qоб/Т* dИС
1	Компьютер в сборе	1	24000	5	1152
2	Лицензионное ПО	3	3000	3	720
3	Канцелярские принадлежности	10	10	3	8
Итого	1880

5. Расчет затрат на электроэнергию

З_эл = W*Т_мг*С_эл*d_ИС;

W - мощность вычислительной техники 0,4 кВт/час;

С_эл = 3,4 руб.

З_эл = 0,4*2112*3,4*0,24 = 689,36 руб.

6. Расчет затрат на текущий ремонт и обслуживание вычислительной техники

З_{Р ВТ} = Ц_ВТ* К_Р*d_ИС/100;

Ц_ВТ - цена вычислительной техники 24000 руб.

К_Р - норматив затрат на ремонт ВТ в процентах к Ц_ВТ К_Р = 5%;

З_{Р ВТ} = 24000*0.05*0,24 = 288,00 руб.

7. Расчет затрат на технические носители информации

З_НОС = Ц_ВТ*К_НОС*d_ИС/100

К_НОС - норматив затрат средств на технические носители информации в процентах к Ц_ВТ К_НОС = 1.5%;

З_НОС = 24000*0.015*0,24 = 86,40 руб.

8. Расчет накладных расходов по эксплуатации ИС

З_НАКЛ = ЗП_ЭИС*К_НАКЛ*d_ИС/100

К_НАКЛ - коэффициент накладных расходов К_НАКЛ = 2.0;

З_НАКЛ = 112320* 0.02*0,24 =539,14 руб.

Таким образом рассчитаем годовые эксплуатационные затраты при выполнении работы ИС

З^б_ИС= З^б_ИС =112320+=38188,80+224,64+1880+689,36 +288,00+86,40 +539,14 = 154216,33 руб.

Теперь рассчитаем экономию готовых эксплуатационных затрат:

Э_ппг = 154216,33 *4.51-154216,33 = 541299,33 руб.

Уровень эффективности затрат на создание сайта РадиоВТУЗ:



Е = Э_ппг/Ц^н_НТПР,

Ц^н_НТПР = С_НТПР + П_НТПР;

С_НТПР = 249902,52

П_НТПР = ЗП_п*р_з/100= 82060*300/100 = 246180.00

Ц^н_НТПР =249902,52 + 246180= 496082,52

Тогда Е = 541299,33 /496082,52= 1.09

Срок окупаемости затрат:

Т_ок = 1/Е = 1/1.09= 0,92 года или около11 мес.

По результатам проведенных расчетов можно утверждать, что разработка сайта института РадиоВТУЗ экономически выгодна. Затраты на разработку и поддержку сайта окупаемы приблизительно за 1 год. К тому же помимо удобства редактирования и отображении всей информации, сайт, при хорошей оптимизации, поможет привлечь абитуриентов в институт, в том числе обучающихся на платной основе, что очень не мало важно, что говорит об экономической целесообразности предлагаемой разработки сайта и важности проекта для института РадиоВТУЗ МАИ.

Охрана труда

Целью дипломного проекта является разработка сайта института РадиоВТУЗ МАИ. Сайт предоставляет информацию студентам и преподавателям ВУЗа, такой как новости, расписание, форум, а также информацию для абитуриентов.

Программа сайт института РадиоВТУЗ будет администрироваться в помещении института, площадью 40 кв.м. В комнате, где работают 5 человек, на каждом рабочем месте находится ПК, мощностью 0.3 кВт каждый, а также принтеры, МФУ и другие устройства общей мощностью 0.5 кВт.

Уровень шума от каждого ПК - 42дБА. Уровень шума МФУ в режиме печати (15 стр./мин.) - 55дБА, в режиме готовности - 39дБА.

Характеристики помещения:

Длина - 10 м,Ширина - 4 м,Высота - 3,2 м.

Данные по оборудованию:

Оргтехника

Общая мощность, =2 кВт/ч,

КПД=0,95

Данные по источнику света:

Мощность, Nосв=60 Вт/

Температура в помещении:

Летом - 25 °C,

Зимой - 20 °C.

Анализ условий труда

Освещенность

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

Естественное освещение создаётся прямыми солнечными лучами и рассеянным светом небосвода. Боковое естественное освещение является наиболее приемлемым. Для естественного освещения основным параметром является коэффициент естественной освещённости, который должен быть не ниже 1,5 % для работ средней точности.

Искусственное освещение, создаётся электрическими источниками света. Величина искусственной освещенности на рабочих местах должна соответствовать нормированным значениям, указанным в СНиП 23-05.95 «Естественное и искусственное освещение». Искусственное освещение подразделяется на общее, местное и комбинированное, т.е. сочетание общего и местного освещения.

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

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

Работа администратора сайта относится к работам средней точности. При системе общего освещения со средней характеристикой фона, освещенность должна быть 200 лк (СНиП 23-05-95). При использовании дисплея - не ниже 200 лк. Яркость экрана к яркости рабочих поверхностей не должны превышать 3:1 - 5:1, а между рабочими поверхностями - 10:1. Линия взора оператора должна быть перпендикулярна центру экрана +5 градусов. Угол обзора в горизонтальной плоскости от центра экрана примерно 15 градусов. Требования к измерениям изложены в ГОСТ 24940-81 «Здания и сооружения. Методы измерения освещенности». Фактические значения освещенности 220 лк, что соответствует нормам СНиП.

Микроклимат

Поддержка микроклимата является необходимым и очень важным условием жизнедеятельности человека на производстве, особенно температура и влажность воздуха. Микроклимат в рабочих помещениях должен соответствовать ГОСТ 12.1.005-88 «Система стандартов безопасности труда. Общие санитарно-гигиенические требования воздуха в рабочей зоне». Под микроклиматом на производстве понимается климат внутренней среды рабочих помещений, который определяется действующими на организм человека сочетаниями температуры, влажности и скорости движения воздуха, а также температурой окружающих поверхностей. Эти параметры как отдельно, так и в комплексе влияют на здоровье человека и его самочувствие, а значит и на производительность труда. Вид работы - легкая работа (категория 1)

Оптимальные условия работы в рабочем помещении:

· температура воздуха, 22-24 - в холодный период года;

· температура воздуха, 22-25 - в теплый период года.

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

В течение рабочего дня необходимо обеспечить воздухообмен помещения 20-50 отвод влаги 300 - 500 г. Оптимальное значение относительной влажности, 30ч60 %.

Основной принцип нормирования микроклимата - создание оптимальных условий для теплообмена тела человека с окружающей средой. Тепло, выделяемое организмом человека должно отводиться в окружающую среду. В условиях комфорта у человека не возникает неприятных ощущений перегрева или холода. Скорость движения воздуха также влияет на самочувствие человека, улучшая или ухудшая его. Для первой категории работ, согласно ГОСТ 12.1.005-88, скорость ветра должна быть около 0,1м/с.

Фактическая температура воздуха в помещении на 3 выше установленной нормы. Для создания оптимальных условий необходимо установить кондиционер, расчет которого приведен в [п.п. 5.2].

Требования к уровню шума

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

Допустимые уровни шума установлены в ГОСТ 12.1.003-83 «Шум. Общие требования безопасности». Для постоянного шума нормируемыми параметрами являются уровни звукового давления. Уровень шума на рабочем месте оператора не должен превышать 50 дБА.

Фактическое значение уровня шума не превышает допустимой нормы.



Электробезопасность

ПЭВМ представляют потенциальную опасность для человека. Все электронное оборудование подвергается различным негативным воздействиям со стороны источника питания. Требования к сети является 220В от номинала при частоте 50 Гц и описаны в соответствии с Системой Стандартов Безопасности Труда: ГОСТ 12.1.009-76 «Электробезопасность». При работе на ПЭВМ, которые применяются в помещениях без повышенной опасности, следует применять заземление, которое обеспечивает согласование периферийных устройств с персональным компьютером и уменьшает опасность поражения током в случае прикосновения к корпусу.

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

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

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



Эргономика

Рисунок 22. Схема помещения и расположения мебели и оргтехники

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

Клавиатура должна быть расположена перед работником. Расстояние от глаз до монитора должно составлять 0.5-0.7 м.

Рабочее место администратора сайта и других работников помещения соответствует нормам СанПиН 2.2.2/2.4.1340-03 и ГОСТ 12.2.032-78 «ССБТ. Рабочее место при выполнении работ сидя. Общие эргономические требования».



Расчет

Рассчитаем расход воздуха (L, [м³/час]) по формуле: