|
Этап
|
Временные рамки (раб/дни)
|
|
Разработка первичной документации
|
5
|
|
Проведение брифинга с заказчиком и составление
брифа
|
1
|
|
Определение целей сайта и создание общей
концепции
|
2
|
|
Разработка технического задания
|
2
|
|
Составление плана работ
|
1
|
|
Создание сайта
|
23
|
|
3.1 Разработка детальной концепции и
визуального дизайна сайта
|
2
|
|
3.2 Реализация (программирование)
|
15
|
|
3.3 Наполнение контентом
|
4
|
|
Тестирование
|
2
|
|
Сдача проекта
|
1
|
|
ИТОГО
|
32
|
Контрольные события:
· Подписание брифа на сайт
· Подписание ТЗ
· Утверждение концепции и дизайна сайта
· Презентация результата заказчику
· Сдача сайта
2.2
Разработка первичной документации
Для планирования работ по созданию сайта необходимо разработать
первичную документацию: бриф (Приложение А), техническое задание (Приложение
Б).
Бриф на разработку сайта заполняется в свободной форме и не
является юридическим документом. Однако он используется при предварительном
расчёте стоимости работ, а также при составлении Технического Задания.
Техническое задание - исходный документ на проектирование
сайта. Техническое задание устанавливает основное назначение разрабатываемого
сайта, его технические характеристики, показатели качества и технико-экономические
требования, предписание по выполнению необходимых стадий создания и её состав,
а также специальные требования.
Техническое задание является юридическим документом - как
приложение включается в договор между заказчиком и исполнителем на проведение
проектных работ и является его основой: определяет порядок и условия работ, в
том числе цель, задачи, принципы, ожидаемые результаты и сроки выполнения.
2.3
Составление плана работ
Планирование работ по созданию проекта (создание Web-сайта)
осуществлялось с использованием программного обеспечения Microsoft Project
проводилось в следующей последовательности:
. Определение этапов и работ, входящих в общий
комплекс работ по созданию программного продукта (программного средства);
2. Расчет трудоемкости выполнения отдельных этапов и
работ и общей трудоемкости разработки;
. Расчет продолжительности каждой работы с учетом
принятого количества исполнителей;
. Построение сетевого графика разработки программного
продукта, расчет основных параметров и оптимизация сети;
. Расчет затрат на разработку программного продукта.
Определение этапов и работ по созданию проекта. Процесс разработки
проекта на MS Project можно разделить на отдельные стадии, каждую из этих
стадий можно подразделить на отдельные этапы и подразделы.
Все эти работы выполняются одним исполнителем-программистом.
Состав затрат данного проекта, включает в себя расходы
связанные с выполнением работ на прединвестиционном, инвестиционном и
эксплуатационном этапах.
) Затраты прединвестиционного этапа - это расходы по зарплате
исполнителей:
по выбору программных инструментальных средств для разработки
программного продукта;
по поиску и разработке возможных альтернативных решений
поставленной задачи;
по выбору и обоснованию основного решения по созданию
программного продукта.
) Затраты инвестиционного этапа - это расходы на реализацию
идеи по разработке программного продукта:
расходы по зарплате сотрудников, исполняющих работы по:
а) разработке программного продукта;
б) тестированию логики программного продукта;
в) тестированию достоверности обработки реальных данных;
г) окончательной отладки программного продукта.
затраты на материалы;
расходы на отопление, освещение;
оформление документации описывающей программный продукт и
подписание акта его приемки-сдачи.
) При расчете эффективности инвестиционного проекта в составе
затрат в соответствии с Методическими рекомендациями учитываются налоги,
предусмотренные законодательством.
Распределение материальных и трудовых ресурсов по задачам
представлены в Приложении В.
Для иллюстрации плана выполнения проекта и отношений
зависимости между задачами была построена диаграмма Ганта (Приложение Г).
Для разработки и осуществления наиболее рациональной модели
организации и технологии работ, выполняемых различными исполнителями при
непрерывном и эффективном использовании выделенных трудовых, материальных и
технических ресурсов, в нормативные сроки создан календарный план разработки
проекта (Приложение Д).
Трудоемкость выполнения работ по созданию программы по сумме
трудоемкости этапов и видов работ, оцениваемых экспертным путем в
человеко-днях, и носит вероятностный характер, так как зависит от множества
трудно учитываемых факторов.
Проект был начат 03 февраля 2014 года и плановая дата
окончания проекта 14 марта 2014 года.
2.4 Создание
сайта
2.4.1
Разработка детальной концепции и визуального дизайна сайта
На основе Технического задания (Приложение Б) разработан
макет страниц сайта.
Сайт должен быть выполнен преимущественно в холодных тонах с
преобладанием синего цвета различных оттенков. Фон - тёмно-синий; текст -
черный; меню при наведении мыши - синие; при выбранном разделе - фиолетовое;
заголовки - разных цветов (в зависимости от блока).
Тип навигации на сайте - полное связывание.
Ссылка на страницы Главная, Новости, Меню, Отзывы, Вакансии
выделены в главном меню и доступны со всех страниц. Расположение главного меню
на всех страницах одинаково. На главной странице и в "Меню"
присутствует навигационное меню второго уровня для быстрого доступа к
определённой части страницы.
Рисунок 2.4.1.1 Макет главной страницы
Рисунок 2.4.1.2 Дизайн-макет главной страницы
Рисунок 2.4.1.3 Дизайн-макет внутренней страницы
2.4.2
Реализация (программирование)
Сайт ресторана создавался с использованием текстового
редактора NotePad++, языка гипертекстовой разметки HTML, каскадных таблиц
стилей CSS, языков программирования JavaScript и PHP.
Преимущество редактора NotePad++ в подсветке кода и тегов, а
также в общей лёгкости и скорости работы.
Сайт установлен на локальный сервер Denwer. Это позволяет
избежать затрат на покупку домена в сети Интернет, но в то же время открывать
сайт в браузере, просто набрав 100rentgen. local. Также использование
локального сервера позволяет обрабатывать PHP скрипты и использовать API
некоторых сетевых сервисов (например, системы комментирования Disqus).
Все страницы сайта свёрстаны в едином стиле с использованием языка
гипертекстовой разметки HTML, вёрстка блочная, а всё оформление вынесено в
отдельные файлы каскадных таблиц стилей CSS.
Пример CSS-кода для реализации главного меню:
. b-top-menu{: 0;: 0 0 2px;style: none;: table;:
relative;family: "Open Sans Bold",sans-serif;size: 14px
}
. b-top-menu a{: #fff
}
. b-top-navigation_top{: 42px;radius: 3px;: #4e79c6;:
relative
}
Вот, что получилось в итоге:
Рисунок 2.4.2.1 - Главное меню
Карусели картинок на главной крутятся по щелчку мыши в нужную
сторону. Это реализовано с помощью скриптов JavaScript с использованием
библиотеки JQuery.
Рисунок 2.4.2.2 - Карусель изображений
Обработчик для формы бронирования столика на главной странице
реализован PHP-скриптом, который преобразует выбранные пользователем пункты в
текстовое сообщение и отправляет его на определённый E-mail. Пример кода:
<? php('Content-Type: text/html; charset=UTF-8');
/* Здесь проверяется существование переменных */(isset
($_POST ['fio'])) {$name = $_POST ['fio']; }(isset ($_POST ['email'])) {$email
= $_POST ['email']; }(isset ($_POST ['people'])) {$sub = $_POST ['people'];
}(isset ($_POST ['table'])) {$body = $_POST ['table']; }(isset ($_POST
['booking'])) {$body = $_POST ['booking']; }(isset ($_POST ['ch1'])) {$sub =
$_POST ['ch1']; }(isset ($_POST ['ch2'])) {$sub = $_POST ['ch2']; }(isset
($_POST ['ch3'])) {$sub = $_POST ['ch3']; }(isset ($_POST ['ch4'])) {$sub =
$_POST ['ch4']; }(isset ($_POST ['ch5'])) {$sub = $_POST ['ch5']; }(isset
($_POST ['ch6'])) {$sub = $_POST ['ch6']; }(isset ($_POST ['ch7'])) {$sub =
$_POST ['ch7']; }(isset ($_POST ['ch8'])) {$sub = $_POST ['ch8']; }(isset
($_POST ['ch9'])) {$sub = $_POST ['ch9']; }(isset ($_POST ['ch10'])) {$sub =
$_POST ['ch10']; }(isset ($_POST ['ch11'])) {$sub = $_POST ['ch11']; }(isset
($_POST ['ch12'])) {$sub = $_POST ['ch12']; }(isset ($_POST ['ch13'])) {$sub =
$_POST ['ch13']; }(isset ($_POST ['ch14'])) {$sub = $_POST ['ch14']; }(isset
($_POST ['ch15'])) {$sub = $_POST ['ch15']; }(isset ($_POST ['ch16'])) {$sub =
$_POST ['ch16']; }(isset ($_POST ['ch17'])) {$sub = $_POST ['ch17']; }(isset
($_POST ['ch18'])) {$sub = $_POST ['ch18']; }(isset ($_POST ['ch19'])) {$sub =
$_POST ['ch19']; }(isset ($_POST ['ch20'])) {$sub = $_POST ['ch20']; }(isset
($_POST ['ch21'])) {$sub = $_POST ['ch21']; }(isset ($_POST ['ch22'])) {$sub =
$_POST ['ch22']; }(isset ($_POST ['ch23'])) {$sub = $_POST ['ch23']; }(isset
($_POST ['ch24'])) {$sub = $_POST ['ch24']; }
/* Почта, на которую отправлять */
$address = "example@example. ex";
/* А здесь прописывается текст сообщения */
$mes = "Имя: $fio \nE-mail: $email \nКоличество человек:
$people \nЖелаемый столик: $table \nЗаказ: $booking \nЖелаемое время:
$ch1,$ch2,$ch3,$ch4,$ch5,$ch6,$ch7,$ch8,$ch9,$ch10,$ch11,$ch12,$ch13,$ch14,$ch15,$ch16,$ch17,$ch18,$ch19,$ch20,$ch21,$ch22,$ch24";
/* А эта функция как раз занимается отправкой письма на
указанный вами email */
$send = mail ($address,$sub,$mes,"Content-type:
text/plain; charset = UTF-8\r\nFrom: $email");($send == 'true')
{"Сообщение отправлено";
}
{"Сообщение не отправлено";
}
? >
В блоке контактов использована 3D-карта Google.