Разработка сайта для фитнес-клуба «Апельсин»

Содержание Введение

1.

Введение

в технологию создания Web-сайтов

1.1 Понятие web-сайта

1.2 Этапы разработки web-сайта

1.3 Навигационная схема web-сайта

1.4 Обзор редакторов для верстки web-страниц

1.5 Общие представления о языке HTML

2. Динамический web-сайт

2.1 Установка программ

2.2 Разработка сайта для фитнес-клуба

2.3 Архитектура web-сайта

2.3.1 Главная страница

2.3.2 Раздел «О компании»

2.3.3 Раздел «Услуги»

2.3.4 Раздел «Информация»

2.3.5 Раздел «Консультации»

2.3.6 Раздел «Отзывы»

2.3.7 Раздел «Администрирование»

2.3.8 Выводы

3. Экономическое обоснование проекта

3.1 Маркетинговые исследования предприятия

3.2 Оценка трудоемкости и сроков разработки

3.3 Расчет экономических затрат на производство web-сайта

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

3.5 Амортизация

3.6 Расчет продажной стоимости

3.7 Выводы

4. Безопасность жизнедеятельности

4.1 Характеристика условий труда программиста

4.2 Требования к производственным помещениям

4.2.1 Окраска и коэффициенты отражения

4.2.2 Освещение

4.2.3 Параметры микроклимата

4.2.4 Шум и вибрация

4.2.5 Электромагнитное и ионизирующее излучения

4.3 Эргономические требования к рабочему месту

4.4 Противопожарная безопасность

4.5 Расчет освещенности

4.6 Расчет уровня шума

4.7 Выводы Заключение Список использованных источников Приложение

Введение

Влияние глобальной компьютерной сети Internet на современный мир не имеет исторических аналогов. Его сегодняшний день — это начало эпохи электронного проникновения во все сферы человеческой жизни, это нечто большее, чем просто маркетинговая кампания, это основа новой философии и новой деловой стратегии. Internet и www прочно вошли в нашу жизнь, и нам уже трудно представить свою деятельность без них.

WWW — это огромный набор гипертекстовых документов, которые благодаря Internet доступны в любой точке мира. Создание web-сайтов является одной из важнейших технологий разработки ресурсов Internet. Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой и коммерческой фирмы и образовательного учреждения, работая на них в любое время суток. В настоящее время во всемирной паутине размещено несколько миллионов web-сайтов и их число постоянно растет. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Internet превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей. Через несколько лет, по прогнозам специалистов, около 50 процентов семей (безусловно, пока лишь в развитых странах) будут использовать его ежедневно. Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой web-сайт и разместить его в сети. Но как это сделать? Ответ на данный вопрос попробую дать в данной работе.

Для этого необходимо решить следующие задачи:

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

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

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

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

определиться со структурой web-страниц;

выбрать стратегию разработки и создания web-сайта.

Нет необходимости говорить, что web-страницы — это не только текст и картинки. Достойный внимания сайт должен поддерживать некоторый уровень интерактивности с пользователем: поиск информации, продажа продуктов, конференции и т. п. Традиционно все это реализовалось CGI-скриптами, написанными на Perl. Но CGIскрипты очень плохо масштабируемы. Каждый новый вызов CGI, требует от ядра порождения нового процесса, а это занимает процессорное время и тратит оперативную память. PHP предлагает другой вариант — он работает как часть web-сервера, и этим самым похож на ASP от Microsoft.

Синтаксис PHP очень похож на синтаксис C или Perl. В этом языке нет строгой типизации данных и нет необходимости в действиях по выделению/освобождению памяти.

Программы, написанные на PHP, достаточно легкочитаемы. Написанный PHP-код легко зрительно прочитать и понять, в отличие от Perl-программ.

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

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

не такая большая база готовых модулей, как, например, СPAN у Perl.

1.

Введение

в технологию создания Web-сайтов

1.1 Понятие web-сайта Информация, доступная пользователям Internet, располагается на компьютерах (web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт — это информация, представленная в определенном виде, которая располагается на web-сервере и имеет свое имя (адрес). Для просмотра web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время по оценкам компании Net Application являются Microsoft Internet Explorer и Firefox (рис. 1.1).

Рисунок 1.1 — Обзор состояния рынка браузеров В зависимости от того, какое имя (адрес) сайта мы зададим в строке «Адрес», браузер будет загружать в свое окно соответствующую информацию.

Web-сайт состоит из связанных между собой web-страниц. Web-страница представляет собой текстовый файл с расширением *.html (*.htm), который содержит текстовую информацию и специальные команды — HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудиои видео-информация непосредственно в web-страницу не входит и представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mid, *.mp3 (звук), *.avi (видео). В HTML-коде страницы содержатся только указания на такие файлы (рис. 1.2).

page1.htm page2. htm page3.htm

Рисунок 1.2 — Web-сайт Каждая страница web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице.

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

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

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

Выделяют следующие этапы разработки Web-сайта: планирование, реализация, тестирование, публикация, рекламирование, сопровождение.

Планирование является первым и, вероятно, наиболее важным этапом создания хорошего Web-сайта. На стадии планирования определяется следующее:

цели создания web-сайта (Зачем? Какие задачи он должен выполнять и на какую аудиторию он рассчитан?);

характер содержимого;

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

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

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

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

При создании достаточно больших документов надо помнить о том, что не все из посетителей имеют высокоскоростной доступ в Internet. У большинства пользователей модемный коннект, где скорость передачи данных 2 — 3 kB в секунду не считается плохой. Чтобы определить как долго будет грузиться сайт, нужно сосчитать суммарный «вес» документа и всех размещенных в нем изображений, а также подгружаемых звуков.

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

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

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

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

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

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

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

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

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

Публикация Готовый web-сайт необходимо опубликовать на web-сервере, чтобы он был доступен через Internet. Если сайт создан посредством редактора FrontPage, то на сервере должны быть инсталлированы серверные расширения FrontPage, что обеспечит полную поддержку доступных в FrontPage компонентов, которые были помещены на странице в процессе создания сайта.

Если нет собственного сервера, то в Сети можно найти огромное количество ссылок на free web pages, где некоторые провайдеры предоставляют своим клиентам бесплатное место под страницу.

http://narod.ru http://www.az.ru

http://chat.ru http://www.halyava.ru

http://www.newmail.ru http://i-connect.ru

http://www.agava.ru http://www.lgg.ru

http://www.fortunecity.com http://www.netcity.ru

http://www.freeserwers.com http://www.hotmail.ru

http://www.geocities.com http://www.ussr.to

http://www.spree.com http://www.viaduk.net

http://www.tripod.com http://home.vibor.ru

http://www.xoom.com http://windoms.sitek.net

http://www.bizland.com http://www.intergrad.com

http://www.fsn.net http://hosting.agava.ru

http://www.crosswinds.net http://www.dp.ru

http://www.az.ru http://www.zk.ru

http://www.tam.ru http://www.sunday.ru

http://webservis.ru

На сервере http://www.44.ru/cgi-bin/start.pl можно получить возможность устанавливать свои собственные скрипты и доступ к ним по ftp.

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

отсутствие дискриминации по контенту. Некоторые сервера ставят условия, касающиеся содержимого сайта;

надежность web-сервера. Посетить их Web-узел в пиковые часы и убедиться, что проблем с доступом не возникает;

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

техническая поддержка. Предоставят ли возможность общения с администратором сервера, есть ли возможность доступа по протоколу FTP (File Transfer Protocol) и т. д.;

объем выделяемого пространства под сайт. Обычно это 5 — 10 мегабайт;

дополнительные возможности. Не будет лишним, если сервер предложит: бесплатную почту, счетчик посещений, гостевую книгу, чат, различные CGI-скрипты и т. д.;

какое программное обеспечение установлено на сервере. Например, UNIX-сервера чувствительны к регистру букв в названиях файлов, т. е. если в исходном коде будет стоять ссылка на файл background. gif, а файл будет назван background. Gif или Background. gif, то он не будет визуализирован. Однако у таких серверов более высокая степень защищенности от взломов;

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

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

Как привлечь пользователя? Красиво оформленные страницы web-сайта — это только половина дела. В первую очередь страницы должны быть содержательными.

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

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

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

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

Рекомендуется создать на своем компьютере копию web-сайта, вносить в нее изменения и новую версию передавать для размещения на сервере в завершенном виде.

1.3 Навигационная схема web-сайта

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

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

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

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

Существует несколько видов структурирования информационного материала на web-сайте:

Линейная структура Материал весь располагается последовательно (рис. 1.3).

Рисунок 1.3 — Линейная структура Иерархическая структура Чаще всего структура web-сайта представляет собой иерархию. При этом сначала создают категории высшего уровня, а затем материал в логическом порядке размещают в категории, которые находятся ниже.

Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая.

Узкая глубокая иерархия (рис. 1.4) характеризуется тем, что на верхнем уровне она имеет мало категорий.

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

Рисунок 1.4 — Узкая глубокая иерархия Из приведенного примера видно, что для перехода к странице N пользователь должен произвести 4 щелчка мышью.

Широкая неглубокая иерархия (рис. 1.5)

Рисунок 1.5 — Широкая неглубокая иерархия Ни первый, ни второй способ организации информации не является оптимальным. Лучше, когда иерархическая структура состоит из 3 — 4 уровней.

Нелинейная структура (рис. 1.6)

Рисунок 1.6 — Нелинейная структура Смешанная структура Существуют ситуации, когда представить информацию одним из описанных выше методов не представляется возможным. В этом случае применяют несколько схем одновременно. Однако такой подход имеет недостаток — он требует от пользователя концентрации внимания и дополнительных усилий. Чтобы помочь пользователю составляют карту web-сайта (site-map). На данной карте схематически представляют структуру размещения информации на web-сайте.

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

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

1.4 Обзор редакторов для верстки web-страниц Существует много инструментов для верстки web-страниц. В этом разделе я дам краткий обзор по наиболее популярным редакторам.

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые. Визуальные редакторы не требуют знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get — что видишь, то и получаешь.

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

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

Визуальные редакторы

Macromedia Dreamweaver MX

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

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

Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe — все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более чем визуальный редактор для верстки web-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший. Т. е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном).

Хочу также добавить, что, вероятно, стоит использовать с GoLive такую программу, как Adobe LiveMotion (в предыдущих версиях она называлось Image Styler). Хотя, по идее, LiveMotion является графическим редактором, в котором вы можете создавать незатейливую, но качественную графику для своих web-сайтов, эта программа также умеет верстать web-странички, на основе того, что вы нарисовали (не лучшим образом, но довольно прилично, плюсом является то, что LiveMotion сам режет готовый макет на много картинок, которые вы потом можете использовать при верстке сайта в GoLive).

Microsoft FrontPage

Если верить разработчикам, то программа FrontPage позволяет создавать web-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, Javascript. Дает достаточно широкие возможности по управлению изображениями и flash-ролликами. Кроме того, FrontPage дружит с такими технологиями, как ASP, XML, VBScript, XSL. Также разработчики утвержают, что в последней версии FrontPage теперь борется за чистоту кода, что ж, остается надеятся, что это так, т.к. раньше данный пункт был не на высоте (раньше FrontPage вставлял в код очень много ненужных комментариев и другой лишней информации, так что правильностью и чистотой кода странички, сделанные в этом редакторе похвастаться не могли).

Hotdog

Программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

Текстовые редакторы

Homesite

Этот редактор, пожалуй, самый популярный и мощный среди текстовых, и не зря. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода, правильность проверяется с точки зрения W3C.org), но также есть поддержка XHTML, CSS-редактор, и так далее.

HTML Pad

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP и Perl, умеет создавать макросы (нападобие Word`a и Excel’я), включает в себя кучу различных справочных материалов по CSS и Html, и многое другое.

Notepad

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

1.5 Общие представления о языке HTML

Следует отметить, что HTML не является языком программирования. И дело здесь даже не в том, что у HTML нет компилятора, а только встроенный в браузер интерпретатор: Basic и JavaScript тоже обходятся одними интерпретаторами, но это не мешает им называться языками программирования. Дело в том, что в HTML отсутствует главный атрибут, присущий любому языку программирования, — команды. На HTML нельзя задать последовательность действий, а можно только описать, как браузер должен вводить на экран тот или иной документ.

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

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

HTML — это язык форматирования, в котором для задания параметров форматирования используется система тегов (дескрипторов). В обычном, некомпьютерном английском языке слово tag означает «признак», «метка», «маркер». Тег состоит из имени, заключенного в угловые скобки, и необязательного набора атрибутов. Как правило, теги бывают открывающийся и закрывающийся, между которыми размещается содержимое тега (текст и другие элементы). Конечный тег имеет то же имя, что и начальный, с той разницей, что перед именем конечного тега ставится косая черта (/).

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

Гипертекстовая страница описывается на языке HTML и обрамляется парными маркерами: и

.

Комментарий записывается внутри маркера и не отображается браузером:

и .

Страница состоит из заголовочной части

и тела страницы. Вот так выглядит разметка пустой web-страницы:

TML и JavaScript

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

…

... (здесь располагается текст сценария)

//—>

...

...

Здесь использован типовой вариант, при котором сценарий вставляется внутрь тэга заголовка

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

Атрибут LANGUAGE тэга.

Например:

.

2. Динамический web-сайт

2.1 Установка программ Нужно установить на своем компьютере домашний сервер, точнее серверные программы, с помощью которых можно создавать и тестировать РНР программы. В качестве ОС можно использовать Windows, желательно Windows XP или Windows 2000 SP4. Систему Windows 95 уже использовать нельзя, так как PHP5 в ней работать не будет.

Первая программа, которая нам будет нужна, Apache. Apache — наиболее популярный web-сервер в сети Internet с 1996 года. Сервер Apache нужен для проверки выполнения скриптов на Perl и PHP.

Следующая программа — это PHP v5.2.4, она позволит запускать PHP скрипты на домашнем сервере. Можно использовать другую версию.

Вместо того чтобы ставить Apache, PHP и т. д., воспользуемся проектом Denwer.

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

Базовый (основной) пакет Денвера включает в себя:

Инсталлятор (поддерживается также инсталляция на flash-накопитель).

Apache, SSL, SSI, mod_rewrite, mod_php.

PHP5 с поддержкой GD, MySQL, sqLite.

MySQL5 с поддержкой транзакций.

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

Система управления запуском и завершением всех компонентов Денвера.

phpMyAdmin — система управления MySQL через web-интерфейс.

Эмулятор sendmail и SMTP-сервера (отладочная «заглушка» на localhost:25, складывающая приходящие письма в /tmp в формате .eml). Поддерживается работа совместно с PHP, Perl, Parser и т. д.

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

Apache — 4.7 MB;

PHP5 — 9.7 MB;

MySQL5 — 23 MB;

phpMyAdmin — 2 МБ.

Итого: 40 MB.

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

Дистрибутивы были тщательным образом «прочесаны». Все компоненты, которые используются сравнительно редко, вынесены в отдельные пакеты расширений. Таким образом, 90% разработчиков смогут сразу же начать работать, а оставшимся 10% достаточно лишь докачать и установить при помощи инсталляторов дополнительные пакеты.

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

Для упаковки архива используется один из самых мощных архиваторов — 7-Zip.

Пакеты расширений полная версия ActivePerl 5.8;

PHP5 с полным набором модулей;

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

СУБД PostgreSQL или InterBase / FireBird версий 1 и 2;

старый-добрый PHP версии 3 или 4;

или даже Parser студии Лебедева.

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

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

Денвер устанавливается в один-единственный каталог и вне его ничего не изменяет. Он не пишет файлы в Windows-директорию и не «гадит» в Реестре. При желании вы можете даже поставить себе сразу два Денвера, и они не будут конфликтовать.

Никакие «сервисы» NT/2000 не «прописываются». Если вы запустили Денвер, то он работает. Если завершили — то перестает работать, не оставляя после себя следов.

Системе не нужен деинсталлятор — достаточно просто удалить каталог.

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

Все конфигурирование и настройка под конкретную машину происходит автоматически.

Эти же правила распространяются и на пакеты расширений.

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

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

За счет применения виртуального диска Денвер «изнутри» похож на маленький Unix: у него есть своя директория /home, /usr, /tmp… Различные компоненты и серверы расположены так, как это принято в Unix. Например, в /home располагаются виртуальные хосты, а в /usr — программные компоненты.

Такая архитектура в действительности не имеет ничего общего с системой Cygwin (хотя и похожа). Тем не менее, некоторые пакеты расширений Денвера могут использовать Cygwin для своих внутренних целей, но это всегда «прозрачно» для пользователя.

Вопреки распространенному мнению, Денвер не является чем-то статическим и неизменным. Никто не мешает вам устанавливать поверх него дополнительные программы и компоненты (например, сервер СУБД PostgreSQL). Они просто будут для него «как родные». Вы можете также задавать логику запуска и завершения дополнительных сервисов по аналогии с тем, как это сделано в базовом пакете. Так что, если вам нужна какая-то система, которой нет в пакетах расширений, смело ставьте и конфигурируйте ее вручную.

Зачем вообще нужен локальный сервер?

В последнее десятилетие во всем мире наблюдается настоящий бум среди web-разработчиков (по преимуществу это программисты). Они устанавливают у себя на Windows-машине сервер Apache с различными дополнениями к нему: PHP, Perl, MySQL и т. д. — преимущественно в целях более удобной отладки сайтов.

Многие (преимущественно дизайнеры) могут спросить: зачем вообще нужен локальный web-сервер, когда страницы можно открывать и так — прямо с диска? Если это обычные (статические) HTML-страницы, то да, сервер не нужен. Однако даже для такой мелочи, как SSI (Server-side Includes — директивы в страницах, позволяющие вставлять на нужное место содержимое других файлов), уже необходим сервер. Не говоря уже о скриптах — они без сервера просто не запустятся.

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

Чем отличается «просмотр страниц, открывая файл в браузере» от «просмотра с использованием сервера». В первом случае вы выбираете в меню что-то вроде Файл — Открыть — Обзор и выбираете нужный файл на диске. Браузер показывает его без всякой обработки, и путь в его адресной строке выглядит примерно вот так (рис. 2.1):

Рисунок 2.1 — Просмотр страниц, открывая файл в браузере Если же вы открываете страницу «через сервер», происходит совершенно иное. Доступ к сайтам осуществляется, как обычно: вы указываете в адресной строке URL — обычно имя сайта и путь к документу на нем (рис. 2.2):

Рисунок 2.2 — Просмотр страниц «через сервер»

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

Кстати, на последней картинке имя сайта — dklab. Конечно, такое имя выглядит несколько странно — у него нет суффикса .ru, что делает его недоступным для всех остальных пользователей Сети. Однако на локальной машине сайт открывается замечательно, к тому же, я никогда не спутаю dklab.ru (сайт в Интернете) с dklab (сайт на локальной машине).

2.2 Разработка сайта для фитнес-клуба Краткий обзор сайта.

Типовой вариант сайта состоит из следующих частей:

«О компании»;

«Услуги»;

«Информация»;

«Консультации»;

«Отзывы».

«О компании» — презентационный раздел, содержащий подразделы: «История», «Персонал» (информация о сотрудниках компании с указанием должности и размещением фотографии), «Вакансии» (список открытых вакансий) и «Контакты».

«Услуги» — информация о предоставляемых компанией услугах. Содержит следующие подразделы: «Фитнес», «Детские занятия», «Салон красоты» и «Фитнес-бар».

«Информация» — содержит разделы: «Новости» (публикация новостей, связанных с развитием компании, участию в акциях, конференциях и других мероприятиях по направлениям активности) и «Расписание» (расписание тренеров клуба).

«Консультации» — содержит разделы: «Публикации» — новостной и аналитический материал, актуальные исследования по рынку услуг; «Вопросы и ответы» — ответы на часто встречающиеся вопросы, а также форма для вопроса клиента/посетителя сайта, при заполнении которой вопрос отсылается модератору.

2.3 Архитектура web-сайта Рисунок 2.3 — Схема сайта

2.3.1 Главная страница Внешний вид первой страницы загружаемой в браузер при обращении к сайту представлен на рисунке 2.4.

Рисунок 2.4 — Главная страница сайта Главная страница предназначена для первого ознакомления посетителя с сайтом, и для того чтобы заинтересовать его. Для создания целостного изображения были использованы таблицы HTML (тег Table). Для реализации выпадающего меню был использован JavaScript.

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

2.3.2 Раздел «О компании»

Внешний вид страницы представлен на рисунке 2.5.

Рисунок 2.5 — Внешний вид страницы «О компании»

На данной странице продублированы ссылки выпадающего меню раздела «О компании».

По данным ссылкам можно пройти на соответствующие страницы сайта, внешний вид которых представлен на рисунках 2.6 — 2.9.

Рисунок 2.6 — Внешний вид страницы «История»

Рисунок 2.7 — Внешний вид страницы «Персонал»

Рисунок 2.8 — Внешний вид страницы «Вакансии»

Рисунок 2.9 — Внешний вид страницы «Контакты»

2.3.3 Раздел «Услуги»

Внешний вид страницы представлен на рисунке 2.10.

Рисунок 2.10 — Внешний вид страницы «Услуги»

На данной странице продублированы ссылки выпадающего меню раздела «Услуги».

По данным ссылкам можно пройти на соответствующие страницы сайта, внешний вид которых представлен на рисунках 2.11 — 2.14.

Рисунок 2.11 — Внешний вид страницы «Групповые занятия»

Рисунок 2.12 — Внешний вид страницы «Детские занятия»

Рисунок 2.13 — Внешний вид страницы «Салон красоты»

Рисунок 2.14 — Внешний вид страницы «Фитнес-бар»

2.3.4 Раздел «Информация»

Внешний вид данной страницы аналогичен внешнему виду страницы «О компании».

На данной странице продублированы ссылки выпадающего меню раздела «Информация».

По данным ссылкам можно пройти на соответствующие страницы сайта, внешний вид которых представлен на рисунках 2.15 — 2.16.

Рисунок 2.15 — Внешний вид страницы «Расписание»

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

Рисунок 2.16 — Внешний вид страницы «Новости»

2.3.5 Раздел «Консультации»

Внешний вид данной страницы аналогичен внешнему виду страницы «О компании».

На данной странице продублированы ссылки выпадающего меню раздела «Консультации».

По данным ссылкам можно пройти на соответствующие страницы сайта, внешний вид которых представлен на рисунках 2.17 — 2.19.

Рисунок 2.17 — Внешний вид страницы «Публикации»

Рисунок 2.18 — Верхняя часть страницы «Вопросы и ответы»

Рисунок 2.19 — Нижняя часть страницы «Вопросы и ответы»

2.3.6 Раздел «Отзывы»

Внешний вид данной страницы представлен на рисунке 2.20.

Рисунок 2.20 — Внешний вид страницы «Отзывы»

2.3.7 Раздел «Администрирование»

Чтобы войти на страницу администрирования необходимо ввести пароль, форма для ввода пароля представлена на рисунке 2.21.

Рисунок 2.21 — Внешний вид формы для ввода пароля на странице администрирования Внешний страницы администрирования представлен на рисунке 2.22.

Рисунок 2.22 — Внешний вид страницы «Администрирование»

2.3.8 Выводы В результате работы был разработан динамический web-сайт, являющийся визитной карточкой фитнес-клуба «Апельсин».

Были изучены технологии разработки web-сайтов: язык сценариев JavaScript, язык PHP, сервер Apache. А так же основы web-дизайна и программное обеспечение Photoshop и другое. Разработанный программный продукт функционирует на любом сервере с поддержкой технологий PHP и отображается в любом из браузеров.

3. Экономическое обоснование проекта

3.1 Маркетинговые исследования предприятия Фитнес-клуб «Апельсин» во главе с директором Евменкин В. В. было образованно в 2003 году. За семь лет молодое предприятие прошло большой путь, увеличив свои обороты и став одним из лидеров в своей области.

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

Фитнес-клуб расположен по адресу пр. Ленина, 27 и имеет очень удобную парковку, что обеспечивает большой приток клиентов (это молодые люди до 40 лет). Соседство с именитыми магазинами так же обеспечивают приток клиентов.

Отрицательной чертой местоположения является недалекое расположение «главных конкурентов» — фитнес-клуба «Мастер-class» и удаленность от основных торговых центров города. Следовательно, не информированность большого количества потенциальных клиентов о наличии данного фитнес-клуба.

Для решения данной проблемы необходимо проводить рекламную компанию. В прессе или на радио, по телевидению необходимо периодически напоминать потенциальным клиентам о преимуществах фитнес-клуба «Апельсин».

Главными преимуществами фитнес-клуба «Апельсин» являются: наличие спортивного врача, который может провести медицинское тестирование, поможет определить оптимальный уровень нагрузки и виды двигательной активности; широкий спектр услуг, предоставляемых посетителям; высокая квалификация тренерского состава.

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

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

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

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

Такие карты как «Семейная», «Спортивная семья», «Детская», «Корпоративная» предполагают определенные скидки. Для студентов и пенсионеров также предусмотрены скидки.

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

Т = То + Тu + Тa + Тn + Тотл +Тд, (3.1)

web страница сайт программный где

Т — общие затраты;

То — затраты труда на описание задачи;

Тu — затраты на исследование предметной области;

Та — затраты на разработку блок-схемы;

Тп — затраты на программирование;

Тотл — затраты на отладку;

Тд — затраты на подготовку документации.

1) Затраты труда на описание задачи То точно определить невозможно, так как это связано с творческим характером работы. Примем То = 30(чел • ч).

2) Затраты на исследование предметной области Тu с учетом уточнения описания и квалификации программиста могут быть определены по формуле:

(3.2)

где

Q — условное число операторов;

B — коэффициент увеличения затрат труда;

k — коэффициент квалификации разработчика.

Коэффициент увеличения затрат труда учитывает недостаточное описание задачи и зависит от сложности задачи. Значение коэффициента принимается от 1,2 до 1,5. Пусть коэффициент увеличения затрат труда будет равен 1,2.

Коэффициент квалификации разработчика определяется в зависимости от стажа работы и составляет для работающих:

— до 2 лет — 0,8;

— от 2 до 3 лет — 1,0;

— от 3 до 5 лет — 1,1 ч 1,2;

— от 5 до 7 лет — 1,3 ч 1,4;

— свыше 7 лет — 1,5 ч 1,6.

Так как разработчик не имеет опыта работы, то примем значение равным 0,8.

Условное количество операторов программы определяется по формуле:

Q = q • c •(1 + p), (3.3)

где

q — число операторов;

c — коэффициент сложности задачи;

p — коэффициент коррекции программы.

Коэффициент сложности задачи характеризует относительную сложность программы по отношению к типовой задаче, реализующей стандартные методы решения, сложность которой принята равной 1 (лежит в пределах от 1,25 до 2). Для web-сайта примем сложность задачи равной 1,3.

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

Рассчитаем условное число операторов:

Q = q • c •(1 + p) = 2000 • 1,3 • (1+0) = 2600.

Рассчитаем затраты на исследование предметной области

= 37 (чел • ч).

3) Затраты на разработку алгоритма решения задачи Та могут быть определены по формуле:

(3.4)

тогда

= 83 (чел • ч).

4) Затраты труда на составление программы по готовой блок-схеме определяются по формуле:

= 83 (чел • ч).

5) Затраты труда на отладку программы на ЭВМ tотл рассчитывается по следующей формуле:

(3.5)

= 416 (чел • ч).

6) Затраты труда на подготовку документации по задаче Тд определяются по формуле:

Тд = Тдр + Тдо, (3.6)

где Tдр — затраты труда на подготовку материалов в рукописи;

Тдо — затраты труда на редактирование, печать и оформление документации.

Тдр =, (3.7)

= 104 (чел • ч).

Тдо = 0,75 Тдр, (3.8)

Тдо = 0,75 104 = 78 (чел • ч).

Тд = 104 + 78 = 182 (чел • ч).

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

Ткор = T kкор, (3.9)

где Ткор — коэффициент изменения трудоемкости, берущийся из следующей таблицы 3.1.

Таблица 3.1 — Изменение трудоемкости в зависимости уровня языка программирования.

Уровень языка программирования	Характеристика языка программирования	Коэффициент изменения трудоемкости
	Покомандный автокод — ассемблер
	Макроассемблер	0,95
	Алгоритмические языки высокого уровня	0,8 — 0,9
	Алгоритмические языки сверхвысокого уровня	0,7 — 0,8

Выбранный для разработки язык сценариев JavaScript относится к алгоритмическим языкам сверхвысокого уровня, с учетом этого примем kкор = 0,7.

Подставив все полученные данные в формулу 3.1, получим полную трудоемкость разработки:

Т = 30 + 37 + 83 + 83 + 416 + 182 = 831 (чел • ч).

С учетом корректировки из формулы 3.9 получим итоговую трудоемкость разработки:

Ткор = 0,7 * 831 = 582 (чел • ч).

Определим численности исполнителей:

Ч = Т / Ф, (3.10)

где

Ч — численность исполнителей Ф — действительный фонд времени специалиста в период разработки.

Ч = 582 / 472 = 1,2 — исполнителя.

Получаем одного исполнителя инженера — программиста.

3.3 Расчет экономических затрат на производство web-сайта Затраты предприятия на производство и реализацию продукции в соответствии с главой 25 Налогового кодекса РФ (НК РФ) подразделяются на:

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