31825

Разработка информационно-справочного ресурса культурно-развлекательного центра «Мистик» способного представлять текстовую и графическую информацию пользователю

Дипломная

Информатика, кибернетика и программирование

3 Анализ достоинств и недостатков имеющихся технологий 3 Техническое задание на создание ресурса 22 4 Проектирование работы ресурса с помощью UML 32 5 Реализация информационного ресурса 5.1 Разработка информационного ресурса 5.2 Описание интерфейса 6 Тестирование работы ресурса и контрольный пример работы 6.1 Тестирование интернет ресурса 6.

Русский

2013-09-01

8.37 MB

48 чел.

  Лист

 Дата

 Подпись

 № документа

Лист

Изм. 

Содержание

Введение 4

1 Обзор существующих технологий создания интернет информационно-справочных ресурсов 5

1.1 Языки программирования для создания интернет-ресурсов 5

1.2 Целевая аудитория сайта 11

2 Обзор существующих технологий создания информационно - справочных ресурсов 14

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

2.2 CASE средства для создания интернет-ресурсов

2.3 Анализ достоинств и недостатков имеющихся технологий

3 Техническое задание на создание ресурса 22

4 Проектирование работы ресурса с помощью UML 32

5 Реализация информационного ресурса

5.1 Разработка информационного ресурса

5.2 Описание интерфейса

6 Тестирование работы ресурса и контрольный пример работы

6.1 Тестирование интернет ресурса

6.2 Контрольный пример работы интернет ресурса

7 Технико-экономическое описание

7.1 Предназначение разрабатываемого сайта

7.2 Расчет первоначальных затрат на программное обеспечение

7.3 Расчет текущих затрат

7.4 Расчет цены интернет-ресурса

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

8.1 Краткая характеристика условий труда

8.2 Вредные производственные факторы

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

Приложение А

Приложение Б

Заключение 34

Список использованных источников        35

ПЕРЕЧЕНЬ УСЛОВНЫХ СОКРАЩЕНИЙ

HTML - язык разметки гипертекста;

XML – расширяемый язык разметки

CSS – каскадные таблицы стилей

DHTML - динамический язык разметки гипертекста

PHP - препроцессор гипертекста

ASP - активные серверные страницы

CMS - cистема управления содержимым

ВВЕДЕНИЕ

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

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

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

Целью данного дипломного проекта является разработка информационно-справочного ресурса культурно-развлекательного центра «Мистик» способного представлять текстовую и графическую информацию пользователю. Для достижения поставленной цели были сформулированы следующие задачи:

  1. изучить предметную область;
  2. разработать модель предметной области;
  3. выбрать метод проектирования интернет ресурса;
  4. разработать и протестировать работу  интернет-ресурса.

1 ОБЗОР СУЩЕСТВУЮЩИХ ТЕХНОЛОГИЙ, СОЗДАНИЯ ИНТЕРНЕТ ИНФОРМАЦИОННО-СПРАВОЧНЫХ РЕСУРСОВ

1.1 Языки программирования для создания интернет-ресурсов

1.1.1 Hyper Text Markup Language. Hyper Text Markup Language (HTML) является базовой технологией интернета. Его программный код находится в основе практически каждой web-страницы [2].

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

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

Директивы HTML называются не командами, процедурами или операторами, как в большинстве языков, а тэгами (от английского слова tag — отметка).

Главный недостаток HTML — отсутствие средств, при помощи которых было бы возможно контролировать просмотр web-страниц независимо от пользователя. Web-мастер подготавливает страницу под какие-то определенные параметры, разрешение монитора, вид браузера и так далее. Пользователь же, изменив эти параметры у себя на компьютере, может получить на выходе страницу, существенно отличающуюся от замыслов программиста [4].

1.1.2 Extensible Markup Language. Extensible Markup Language (XML). Языки разметки используются для того, чтобы задать структуру документа. HTML, например, используются только для определения структуры, тогда как в XML задается помимо структуры еще и содержимое web-страницы. XML (eXtensible Markup Language), расширяемый язык разметки, не относится к прямым потомкам языка HTML. Несмотря на схожесть, XML во многом похож на HTML, в нем используется тот же синтаксис, однако XHML создавался на основе HTML для того, чтобы переход к стандарту XML получился более плавным.

В стандарте XML не допускаются присутствие непарных тегов и нечувствительность к регистру.

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

1.1.3 Perl. Perl - практический язык выборки и составления отчетов. Используется для обработки большого количества текстовых файлов. Он способен обрабатывать огромное количество документов на веб-узле (сервере), и используется при написании многих серверов [8].

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

1.1.4 Hypertext Preprocessor. Hypertext Preprocessor (PHP) помогает создавать динамические web-приложения, такие как форумы, счетчики статистики, может работать с большими объемами данных — массивами. Язык PHP также используется для написания систем управления сайтами (движков). Основное достоинство языка PHP — простота изучения [9].

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

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

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

Поскольку РНР является встраиваемым  языком, он отличается исключительной гибкостью по отношению к потребностям разработчика. Хотя РНР обычно рекомендуется использовать в сочетании с HTML, он с таким же успехом интегрируется и в JavaScript, WML, XML и другие языки. Кроме того, хорошо структурированные приложения РНР легко расширяются по мере необходимости.

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

1.1.5 Python. К преимуществам языка Python относится простота освоения, хотя этот  язык программирования на уровень выше, чем PHP и C. Это достигается за счет встроенных высокоуровневых структур данных (списки, массивы, словари).

Его достоинством является то, что интерпретатор Python реализуется практически на всех платформах и операционных системах. Python — абсолютно бесплатный и при этом простой в изучении язык [5].

Основной недостаток Python — это медленная работа, которая объясняется интерпретируемостью программы, написанной на данном языке.

1.1.6 Java. Java представлен на сегодняшний момент в двух вариантах: JavaScript и Java.

JavaScript —надстройка стандарта HTML, в которой значительно расширяются возможности документа, созданного в этом формате. Часть кода, написанная на JavaScript, внедряется в документ HTML как подпрограмма и вызывается на исполнение соответствующей строкой HTML-кода. Весь сценарий JavaScript умещается в одном-единственном теге <script>. Встроенным в браузер интерпретатором языка воспринимается и скрипт, и сам код гипертекста как единый документ, обрабатывая те и другие данные одновременно.

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

Java — это полноценный кросплатформенный язык программирования, который будет правильно обработан и компьютером с операционной системой Windows, и ПК под управлением UNIX, и даже Mac OS легко «поймет, о чем речь». На языке Java для сети разрабатываются небольшие программные обеспечения, называемые аплетами, они загружаются из интернета и выполняются браузером. Большинство web-камер, передающих на сайты изображение в реальном времени, также работают на базе приложений Java [14].

1.2 Целевая аудитория сайта

Целевая аудитория сайта – это посетители, которые прямо заинтересованы в том, что предлагает информационный ресурс в интернете, будь то информация, услуги, какой-либо товар и так далее [21].

Средний возраст пользователей Интернета постоянно увеличивается. Огромное количество людей пользуются Интернетом.

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

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

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

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

Способы расширения целевой аудитории:

  1.  Создание собственной тематической почтовой рассылки, совпадающей с тематикой сайта.
  2.  Оптимизация сайта строго по ключевикам, совпадающим с тематикой сайта, так как абстрактные ключевики приведут малозаинтересованных пользователей.
  3.  Оптимизация страниц для поисковых систем.
  4.  Создание более доступных и понятных надписей на баннерах, чтобы лишить потенциального пользователя двусмысленности.
  5.  Участие в тематических форумах или конференциях, так как участники данных форумов - это люди, интересующиеся конкретной темой.
  6.  Оставление сообщений в схожих по тематике ресурсах с ссылкой на собственный сайт.

Около половины аудитории принадлежит к возрастной категории от 18 до 24 лет.

На рисунке 1.1 представлено распределение по возрастным категориям пользователей Интернет и владельцев доменов [18].

20

40

0

55 и старше

45-54

35-44

25-34

18-24

50

Рисунок 1.1 – Распределение по возрастным категориям пользователей Интернет и владельцев доменов

С позиции числа регистрируемых физическими лицами доменов наиболее активна возрастная группа 25-34 года.

На рисунке 1.2 представлена динамика регистрации доменов по возрастным группам [18].

Рисунок 1.2 – Динамика регистрации доменов по возрастным группам

В таблице 1.1 представлена российская статистика пользователей интернет.

Таблица 1.1 - Российская статистика пользователей интернет

Год

Пользователи

Население

Популярность

2000

3,100,000

145,149,035

2.1 %

2007

29,400,000

141,377,752

20.8 %

2008

38,000,000

140,702,094

27.0 %

2009

45,250,000

140,041,247

32.3 %

2010

59,700,000

139,390,205

42.8 %

2 ОБЗОР СУЩЕСТВУЮЩИХ ТЕХНОЛОГИЙ СОЗДАНИЯ ИНФОРМАЦИОННО-СПРАВОЧНЫХ РЕСУРСОВ

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

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

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

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

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

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

Менеджеры заказчика работают только через специализированное рабочее место.

CMS должна решать следующие основные задачи:

  1.   Публикация информации нетехническим специалистом;
  2.   Разделение данных и их представления;
  3.   Организация совместной работы при публикации информации;
  4.   Поисковые возможности;
  5.   Другие сервисы - форумы, голосования, анкеты и так далее.

CMS

Платные

Бесплатные

 1С-Битрикс

Drupal

Joomla

Wordpress

NetCat

CS-Cart

Рисунок 2.1 - Обобщенная классификация CMS

CMS

Платные

Бесплатные

Платные

Бесплатные

Рисунок 2.2  - Классификация CMS по функциональным возможностям

2.1.1.1 Простая CMS система. Система собирается из программных модулей, для каждой системы они свои. Модули единожды настраиваются разработчиком, чем жестко закрепляется структура проекта. Для дальнейшего изменения структуры сайта и его параметров требуется участие технического персонала. От пользователя системы требуется знание основ HTML. Совместимость: система совместима с определенными платформами и типами СУБД. Попытка внедрения дополнительных модулей, в зависимости от используемых технологий, может привести к полной переработке проекта. Технологичность: динамическое формирование страниц, ограниченная пропускная способность — до 3 000-5 000 посетителей в сутки. Система инсталлируется разработчиком. Развитие системы достигается путём перевода сайта на новую, более приспособленную к текущим задачам, версию системы управления контентом. 

2.1.1.2 Шаблонная CMS система. Единый модуль или набор модулей с жестко закрепленной структурой сайта. Система содержит набор сервисных функций, позволяющих выполнить стандартные действия с сайтом: сформировать новостную ленту, создать / удалить новый раздел, выбрать шаблон для работы с информацией, загрузить файл и расставить по тексту картинку, установить атрибуты текста и так далее Система совместима с определенными платформами и типами СУБД. Попытка внедрения дополнительных модулей ограничена. Динамическое формирование страниц или с использованием кэширования данных. В зависимости от методов формирования страниц — от 5 000 до 50 000 посетителей в сутки. Инсталлируется разработчиком. Усовершенствование достигается путём перевода сайта на новую, более сложную, версию системы управления контентом. 

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

2.1.1.4 Универсальная CMS-система. Имеет продвинутые средства управления контентом, настройка функциональности системы, возможность переопределения атрибутов объектов сайта. Система предоставляет средства для разработки новых сервисов и возможностей. Технические особенности. Расширенные возможности АPI, наличие готовых прикладных решений, в том числе с участием программных продуктов третьих фирм. Наличие сертифицированной системы обеспечения безопасности — разграничение прав доступа к системе на внутрикорпоративном уровне. Кэширование формируемых динамических страниц. Пропускная способность — не ограничена. К таким CMS относятся: Drupal, Joomla, Wordpress и так далее.

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

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

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

Функциональность можно увеличивать с помощью дополнительных расширений (компонентов, модулей).

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

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

Предусмотриваются настраиваемые схемы расположения модулей, включая левый, правый, центральный и любое другое произвольное положения блока. При желании содержимое модуля можно включить в содержимое материала. Например, выражение {loadposition mod_fpslideshow} введенное (вместе с фигурными скобками) в произвольное место в статье выведет содержимое модуля, которому задана позиция вывода как «mod_fpslideshow».

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

Возможности администрирования:

  1.  Для каждой динамической страницы создается своё описание и ключевые слова в целях повышения рейтинга в поисковых системах;
  2.  Начало и окончание публикации любых материалов программируется по календарю;
  3.  Возможность ограничить доступ к определённым разделам сайта только для зарегистрированных пользователей, а с выходом Joomla 1.6 доступ как к разделу, так и к определённому материалу с точностью до конкретной связи;
  4.  Настраиваемые схемы расположения элементов по областям шаблона;
  5.  Различные модули (последние новости, счётчик посещений, подробная статистика посещений, гостевая книга, форум и другие);
  6.  В версии 1.6 была сильно улучшена система установки и управления расширениями. Теперь возможно одновременно устанавливать несколько расширений, объединенных в один инсталляционный пакет. Более того, реализована возможность автоматического обновления установленных расширений (при условии, что разработчик расширения задействует этот механизм);
  7.  В версии 1.6 появилась возможность публикации содержимого на нескольких языках [15];
  8.  В версии 1.6 появилась возможность определить время начала и завершения публикации модулей. Так же в новой версии Joomla улучшены возможности по управлению отображением содержимого;
  9.  Возможность создания не одной, а нескольких форм обратной связи для каждого контакта;
  10.  Модуль приёма от удалённых авторов новостей, статей и ссылок;
  11.  Иерархия объектов;
  12.  Менеджер рассылки новостей. Поддержка более чем 360 служб рассылки новостей по всему миру;

Рисунок 2.1 – Интерфейс Joomla

2.1.3 WordPress. Это современная платформа, ориентированная на красоту, сетевые стандарты и удобство использования. WordPress бесплатен и свободен к распространению [16].

WordPress - CMS с открытым кодом. Написан на PHP, в качестве базы данных использует MySQL.

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

Особенности WordPress:

  1.  возможность публикации с помощью сторонних программ и сервисов;
  2.  простота установки, настройки;
  3.  поддержка RSS, Atom, trackback, pingback;
  4.  подключаемые модули (плагины) с простой системой их взаимодействия с кодом;
  5.  обширные библиотеки "тем" и "плагинов", позволяющих легко менять как внешний вид, так и способы вывода данных; " "темы" реализованы как наборы файлов-шаблонов на PHP, что положительно сказывается на скорости и гибкости;
  6.  заложенный потенциал архитектуры позволяет легко реализовывать сложные решения;
  7.  наличие русских переводов.

Рисунок 2.2 – Интерфейс WordPress

2.1.4 Drupal. Архитектура Drupal позволяет применять его для построения различных типов сайтов — от блогов и форумов до информационных архивов или сайтов новостей  [17]. Имеющийся по умолчанию функционал можно увеличивать подключением дополнительных расширений — «модулей» в терминологии Drupal. Наиболее важные функции, предоставляемые Drupal:

  1.  единая категоризация всех видов содержимого (таксономия) — от форумных сообщений до блогов и новостных статей;
  2.  широкий набор свойств при построении рубрикаторов: плоские списки, иерархии, иерархии с общими предками, синонимы, родственные категории;
  3.  вложенность категорий любой глубины;
  4.  поиск по содержимому сайта, в том числе поиск по таксономии и пользователям;
  5.  разграничение доступа пользователей к документам (ролевая модель);
  6.  динамическое построение меню;
  7.  поддержка XML-форматов;
  8.  авторизация через OpenID;
  9.  символьные осмысленные URL;
  10.  переводы интерфейса сайта на разные языки, а также поддержка ведения разноязычного контента;
  11.  возможность создания сайтов с пересекающимся содержимым (например общей базой пользователей или общими настройками);
  12.  раздельные конфигурации сайта для различных виртуальных хостов (в том числе собственные наборы модулей и тем оформления для каждого подсайта);
  13.  механизм для ограничения нагрузки на сайт (автоматическое отключение при высокой посещаемости части информационных блоков и модулей);
  14.  уведомления о выходящих обновлениях модулей.

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

Система поддерживает локализацию интерфейса для различных языков. Drupal 5 имеет переводы интерфейса на 33 языка, а Drupal 6 — более чем на 70 языков. Имеется поддержка русского языка. В Drupal используется собственный механизм для локализации с хранением переводов в базе данных, наравне с остальным содержимым сайта. При этом несложной является адаптация к работе со стандартной библиотекой.

 

Рисунок 2.3 – Интерфейс Drupal

2.2 CASE средства для создания интернет-ресурсов

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

2.2.1 Adobe Dreamweaver. Adobe Dreamweaver - профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети.

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

Dreamweaver также обеспечивает полно-функциональную среду написания кода, которая включает инструментальные средства редактирования кода (например, раскраска кода или проверка закрытия тегов) и справочная информация по HTML, CSS, JavaScript, язык разметки ColdFusion (CFML), Microsoft Active Server Pages (ASP) и страницы JavaServer (JSP).

Dreamweaver также дает возможность вам строить динамические станицы использующие сервер-технологии CFML, ASP.NET, ASP, JSP и PHP.

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

Рисунок 2.4 – Интерфейс Dreamweaver

2.2.2 Namo WebEditor. Namo WebEditor Разработан объединением корейских и американских программистов компанией Namo Interactive. Поддерживает HTML, CSS, XML, JavaScript, ASP и PHP технологии.

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

При установленном локальном сервере (Apache, SSI) встроенные в программу мастера позволяют создавать на компьютере сайты со сложной структурой использующие MySQL базы данных с технологиями серверных языков.

Namo WebEditor - это мощный пакет для визуального создания web-сайтов. С Namo WebEditor возможно создание и разработка сайта практически без знания HTML программирования, используя Namo как обычный текстовый процессор. Редактор поддерживает цветную разметку тегов. Namo позволяет добавлять на страницы Java скрипты, VB скрипты и Java апплеты.

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

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

Возможности Namo WebEditor:

  1.  создание, редактирование и управление веб-сайтами;
  2.  объединяет в себе HTML-редактор и CMS;
  3.  встроенный менеджер сайтов для управления их структурой;
  4.  подходит для любого типа пользователей, даже новичкам;
  5.  множество шаблонов сайтов различной тематики;
  6.  типа редактирования: HTML;
  7.  режима просмотра результата: в веб-браузере и мобильном устройстве;
  8.  созданный HTML код соответствует стандартам.

Рисунок 2.5 – Интерфейс Namo WebEditor

2.2.3 Microsoft FrontPage. Microsoft FrontPage является программным продуктом из расширенного комплекта Microsoft Office и предназначен для разработки отдельных web-страниц и целых web-сайтов любой сложности. FrontPage является одним из самых популярных визуальных инструментов web-дизайна [13].

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

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

Для FrontPage существует большое количество платных и бесплатных дополнительных модулей, расширяющих его возможности. Например, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro встраиваются не только в Photoshop, но и в FrontPage.

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

FrontPage включает в себя шаблоны сайтов и шаблоны страниц. Инструмент Мастер сайтов на основе выбранного пользователем шаблона сайта формирует набор страниц с ссылками между ними. Пользователю остается заполнить страницы созданного шаблона сайта информацией. Шаблон страницы позволяет выбрать из базы шаблонов требуемый вид страницы и заполнить его информацией.

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

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

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

Рисунок 2.6 – Интерфейс FrontPage

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

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

Этот проект базируется на компоненте Scintilla написанном на C++ с использованием только Win32 API и STL (что гарантирует максимальную скорость выполнения при минимальном размере программы), распространяется под лицензией GPL.

Основные особенности Notepad++:

  1.  Подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования
  2.  Поддержка большого количества языков (C, C++, Java, XML, HTML, PHP, Java Script, ASCII, VB/VBS, SQL, CSS, Pascal, Perl, Python, Lua, TCL, Assembler)
  3.  WYSIWYG (печатаешь и получаешь то, что видишь на экране)
  4.  Настраиваемый пользователем режим подсветки синтаксиса
  5.  Авто-завершение набираемого слова
  6.  Одновременная работа с множеством документов
  7.  Одновременный просмотр нескольких документов
  8.  Поддержка регулярных выражений Поиска/Замены
  9.  Полная поддержка перетягивания фрагментов текста
  10.  Динамическое изменение окон просмотра
  11.  Автоматическое определение состояния файла
  12.  Увеличение и уменьшение
  13.  Заметки
  14.  Выделение скобок при редактировании текста
  15.  Запись макроса и его выполнение

Рисунок 2.7 – Интерфейс Notepad++

2.3 Анализ достоинств и недостатков имеющихся технологий

Использование CMS предоставляет следующие преимущества:

  1.  Оперативное обновление информации: информация публикуется сотрудником, владеющим информацией, без дополнительных посредников в виде технических специалистов.
  2.  Снижение стоимости поддержки: обновление информация производится самостоятельно, нет необходимости оплачивать труд собственного или внешнего web-мастера.
  3.  Предоставление дополнительных сервисов пользователю: часть сервисов - поиск, форумы, голосования, интернет-магазины, модули статистики и рекламы и т.д.  реализованы в рамках CMS.
  4.  Уменьшение сроков и стоимости разработки: наиболее востребованная функциональность уже реализована в CMS и может быть сразу использована.
  5.  Повышение качества разработки: при разработке полностью или частично используются готовые модули, которые уже прошли неоднократное тестирование.
  6.  Снижение стоимости дальнейших модификаций.

Рассмотрим имеющиеся недостатки CMS. К первому недостатку систем управления сайтом можно отнести избыточность. Так cms создаются для решения всех известных на сегодняшний день проблем. Сами же ненужные коды cms в момент работы будут замедлять управление ресурсом при помощи системы управления сайтом [19].

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

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

3 ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА СОЗДАНИЕ РЕСУРСА

Техническое задание на создание ресурса разработано с учетом требований, которые представлены в ГОСТ 34.602-89:

1.  Общие сведения

Язык сайта - Русский. Доменное имя сайта http://www.мистик.рф/.

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

2.  Терминология

Таблица 3.1 – Основные термины

Термин

Описание

1

2

CMS (Content Management

System)

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

изменять графический дизайн и контент сайта.

Контент

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

Шаблон

Сверстанное графическое оформление сайта, готовое к публикации в сети Интернет.

Администратор системы

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

Пользователь системы

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

Продолжение таблицы 3.1

Посетитель сайта

Лицо, имеющее возможность просматривать информацию

сайта через браузер.

Хостинг

Услуга по размещению сайта на дисковом пространстве с выходом в сеть Интернет

Первый тип включаемой  

области

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

всех страницах сайта.

Второй тип включаемых

областей

Означает, что данные HTML-блоки могут быть разными на отдельно взятых страницах и отдельно взятых разделах

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

Третий тип включаемых

областей

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

областей третьего типа отличается от

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

корневого раздела.

3  Общие требования

3.1.1  Корректное отображение сайта

Сайт, созданный на основе «Drupal 7», корректно  отображается  в следующих браузерах:

  1.  Microsoft  Internet  Explorer  версия 8.0 и более старших версиях релизов на момент сдачи проекта.
  2.  Firefox версия 5.0 или более старших версиях релизов на момент сдачи проекта.  
  3.  Opera версия 11.6 или более старших версиях релизов на момент сдачи проекта.
  4.  Google Chrome 11 или более старших версиях релизов на момент сдачи проекта.   

3.1.2  Требования к способам и средствам связи для информационного обмена между элементами системы и посетителями, пользователями или администраторами

  1.  Информационный обмен между элементами системы и посетителями, пользователями или администраторами  происходит по сети, используя http-протокол.  
  2.  Стабильное соединение с сервером на скорости не менее 38400 бит/сек. На компьютерах пользователей и администраторов системы должен быть установлен Microsoft Internet Explorer Версия: 8.0 или более старших версий релизов на момент сдачи проекта.

3.1.3  Требования к программному обеспечению системы

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

На серверной стороне:

  1.  Веб-сервер: Apache (рекомендуется), Nginx, Lighttpd, или Microsoft IIS
  2.  СУБД: MySQL 5.0.15 и выше, PostgreSQL 8.3 и выше, или SQLite 3.x
  3.  Версия PHP: 5.2.4 и выше
  4.  Оперативная память: 32MB (для сайтов с большим числом используемых модулей может потребоваться 64 и более MB памяти.)

На клиентской стороне:  

  1.  Операционная система  Windows  или  Linux  с  поддержкой  протоколов  семейства TCP/IP;
  2.  3.1.4  Требования к техническому обеспечению системы
  3.  На серверной стороне:
  4.  Оперативная память – не менее 128 Mb и выше;
  5.  Пространство на жестком диске – 10 Mb для самой  системы  и  дополнительное пространство, ~300 Mb под данные, созданные в системе;
  6.  Рекомендуемый процессор – 300 Mhz Intel Pentium II и выше
  7.  На клиентской стороне:  
  8.  Оперативная память – 128 Mb и выше;
  9.  Рекомендуемый процессор – 300 Mhz Intel Pentium II и выше

3.1.5  Администрирование сайта 

Для администрирования сайта рекомендуется использовать браузер  Google Chrome 12 или более старшей версии релиза на момент сдачи проекта.

3.1.6 Требования к публикации изображений

  1.  При добавлении или редактировании элемента информационного блока пользователь может подключать изображения крупного формата (размер файла не должен превышать максимального размера 2 Мб) в поле «Изображение для детального просмотра».
  2.  В случае показа на сайте анонса, основанного на данных такого элемента информационного блока, уменьшенное изображение для анонса должно автоматически генерироваться из изображения крупного формата.
  3.  Размер уменьшенного изображения для анонса по умолчанию   300 на 200 пикселей, выбирается исходя из выбранного дизайна сайта, пропорции изображения сохраняются.

3.1.7  Требования к численности и квалификации персонала системы

  1.  Количество посетителей, имеющих доступ к просмотру информации сайта через браузер, может быть неограниченным.
  2.  Количество пользователей и администраторов системы не ограничено.
  3.  Квалификация персонала – знание компьютера на уровне пользователя ПК, навыки работы с Microsoft Internet Explorer и Microsoft Office.

3.1.8.  Требования к защите информации от несанкционированного доступа

Вопросы безопасности, хранения информации решаются средствами поставляемой CMS.

Администратору и  пользователям системы назначаются уникальные имена. При входе в систему администрирования или редактирования контента система запрашивает имя и пароль. В случае правильного ввода этих данных пользователь получает доступ к системе.

Администратор имеет возможность распределения и назначения прав доступа по всем группам пользователей.

3.1.9 Требования к организации входных данных. Входные данные представляют:

  1.  данные пользователя заносятся в базу данных через форму и являются незащищёнными;

3.1.10 Требования к организации выходных данных.

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

3.1.11 Требования к временным характеристикам.

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

3.2 Требования к надежности

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

  1.  организацией бесперебойного питания технических средств;
  2.  выполнением рекомендаций Министерстватруда и социального развития РФ, изложенных в Постановлении от 23 июля 1998г. "Об утверждении межотраслевых типовых норм времени наработы по сервисному обслуживанию ПЭВМ и оргтехники и сопровождению программных средств";
  3.  выполнением требований ГОСТ 51188-98 "Защита информации. Испытания программных средств наналичие компьютерных вирусов";
  4.  необходимым уровнем квалификации сотрудников профильных подразделений.

3.2.2 Время восстановления после отказа.

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

3.2.3 Отказы из-за некорректных действий оператора.

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

3.3 Условия эксплуатации

3.3.1 Климатические условия эксплуатации.

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

3.4 Стадии и этапы разработки

3.4.1. Стадии разработки. Разработка должна быть проведена в три стадии:

  1.  разработка технического задания;
  2.  рабочее проектирование;
  3.  внедрение.

3.4.2. Этапы разработки

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

  1.  разработка программы;
  2.  разработка программной документации;
  3.  испытания программы.

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

3.4.3. Содержание работ по этапам

На этапе разработки технического задания должны быть выполнены перечисленные ниже работы:

  1.  постановка задачи;
  2.  определение и уточнение требований к параметрам технических средств;
  3.  определение требований к информационной и программной совместимости;
  4.  определение стадий, этапов и содержания разработки программы и документации на нее;

На этапе разработки программы должна быть выполнена работа по разработке программы, программной документаций и испытания программы. На этапе разработки программной документации должна быть выполнена разработка программных документов в соответствии с требованиями ГОСТ 19.101-77 и требованием пунктом "Предварительный состав программной документации" настоящего технического задания.На этапе испытаний программы должны быть выполнены перечисленные ниже виды работ:

  1.  разработка, согласование и утверждение программы и методики испытаний;
  2.  проведение приемо-сдаточных испытаний;
  3.  корректировка программы и программной документации по результатам испытаний.

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

3.5 Технико-экономические показатели

3.5.1. Ориентировочная экономическая эффективность.

Ориентировочная экономическая эффективность не рассчитывается.

3.5.2. Предполагаемая годовая потребность. Предполагаемое число использования программы в год – запуск по необходимости. Возможность работы в сети в таком же режиме.

3.6 Требования к программной документации

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

  1.  техническое задание;

3.6.2 Специальные требования к программной документации. Специальные требования к программной документации не предъявляются.

4  Дизайн сайта

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

Дизайн «жесткий», то есть он жестко закреплен в размерах, имеет постоянную ширину 900 пикселей

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

Рисунок 3.1 – Общий фон сайта

На рисунке 3.2 представлена шапка сайта.

Рисунок 3.2 – Шапка сайта

1.  Слайд-шоу

На рисунке 3.3 представлено слайд-шоу

Рисунок 3.3 – Слайд-шоу

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

2.  Главное горизонтальное выпадающее меню (максимальный уровень вложенности  –  7 уровня).

Рисунок 3.4 – Горизонтальное выпадающее меню

3.  Рабочая область (средняя колонка),  на ней располагаться содержание выбранной страницы. Шрифт белого цвета поверх рисунка.

Рисунок 3.5 – Фон рабочей области

4.  Включаемая область (левая колонка). В ней выводятся последние фотографии с каких-либо мероприятий, либо значимых событий».

5.  Нижняя область: содержит счетчик Liveinternet.

6 Структура сайта

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

Пункты главного меню  

Главное меню содержит следующие подразделы и страницы:

- Главная

Раздел предназначен для отображения информации об концертно-развлекательному комплексу «МИСТИК».

-КРК ”Мистик”

-- Ночной клуб «Мистик»

На этой странице отражена информация о ночном клубе «Мистик», режим работы

--DJ bar

На этой странице отражена информация о баре

--Ресторан

На этой странице отражена информация о ресторане, режим работы, меню, цены

-- Караоке

На этой странице отражена информация о зале караоке, режиме работы

-- Боулинг

На этой странице отражена информация о зале боулинга, режиме работы, ценах

-- Детский парк

На этой странице отражена информация перспективе развития детского парка

-- Детская площадка

На этой странице отражена информация о детской площадке, о аттракционах

- Специальные гости

- Фото-отчеты

Раздел предназначен для загрузки фото-отчетов работы КРК ”Мистик” .

-Контакты

Раздел содержит все контакты КРК со схемами проезда.  

4 ПРОЕКТИРОВАНИЕ РАБОТЫ РЕСУРСА С ПОМОЩЬЮ UML

Построим следующие диаграммы UML:

  1.  диаграмма вариантов использования;
  2.  диаграмма размещения;
  3.  диаграмма состояний.

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

  1.  определить общие границы и контекст моделируемой предметной области;
  2.  сформулировать общие требования к функциональному поведению проектируемой системы;
  3.  разработать исходную концептуальную модель системы для ее последующей детализации в форме логических и физических моделей;
  4.  подготовить исходную документацию для взаимодействия разработчиков системы с ее заказчиками и пользователями.

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

 Диаграмма вариантов использования предназначена для визуального представления пользователей сайта и отображения доступных им действий [16].

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

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

Рисунок 4.1 – Диаграмма вариантов использования

Представленная диаграмма размещения на рисунке 4.2 визуально показывает особенности физического представления системы. 

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

Основные элементы диаграммы размещения:

  1.  Узел - это вычислительный ресурс - процессор или другое устройства (дисковая память контроллера, различные устройства). Для узла можно задать выполняющиеся на нем процессы.
  2.  Соединение - это канал взаимодействия узлов (сеть).

Рисунок 4.2 – Диаграмма размещения

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

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

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

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

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

Рисунок 4.3 – Диаграмма состояний, выполненная в Rational Rose

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

Рисунок 4.4 – Диаграмма состояний, выполненная в Rational Rose, для варианта использования администратором

5 РЕАЛИЗАЦИЯ ИНФОРМАЦИОННОГО РЕСУРСА

5.1 Разработка информационного ресурса

Разработка интернет ресурса начинается с создания главной страницы.

Администратор интернет-ресурса имеет непосредственный доступ к коду ресурса.

При нажатии на логотип КРК ”Мистик” происходит анимация входа на сайт, с последующим переходом на выбранную страницу.

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

$(document).ready(function(){

$curtainopen = false;

$(".logo2").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({},{queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="main.html"; }, 2000);

}

return false;});

Рисунок 5.1 – Анимация входа

Не прошло 2 сек.

Прошло 2 сек.

Начало

Нажатие кнопки

Сжатие размеров картинки

Переход на главную страницу

Рисунок 5.2 – Блок-схема работы скрипта входа на сайт

На главной странице ресурса существует быстрый доступ к основным страницам ресурса. Переход происходит так же при помощи скрипта входа анимации. Так же присутствует анимация на самих кнопках входа на ресурс, которая управляется при помощи кода CSS.

CSS не активной ссылки:

.restoran{position: absolute;

top: 80%;

left: -95px;

background-image:url(images/index/restoran2.png);

width: 200px;

height: 138px;

z-index: 4;}

CSS активной ссылки:

.restoran:hover{position: absolute;

top: 80%;left: -45px;

background-image:url(images/index/restoran.png);width: 200px;height: 138px;}

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

Рисунок 5.3 – Кнопки быстрого доступа

Ссылка не активна

Ссылка активна

class =.restoran

class =.restoran:hover

Начало

Рисунок 5.4 – Принципиальная схема работы CSS кода на кнопки

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

style="background:#0c0d0f url(images/bg/1.png) repeat;">

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

Начало

Чтения пути и параметров фона

Установка фонового изображения

Конец

Заливка фона выбранным цветом

Путь верен

Путь  не верен

Рисунок 5.5 – Блок-схема установки фонового изображения

Навигационное меня выполнено в виде набора тегов <ul> и <li>.

Структура HTML кода для меню используется стандартная для таких случаев:

<div><ul id="menu">

<li><a href="main.html">ГЛАВНАЯ</a></li>

<li><a href="">КРК "МИСТИК"</a>

<ul><li><a href="concert.html">Концертная площадка</a>

</li><li><a href="nightclub.html">Ночной клуб</a>

</li><li><a href="djbar.html">DJ-бар</a>   

</li><li><a href="restoran.html">Ресторан</a>

</li><li><a href="karaoke.html">Караоке</a>  

</li><li><a href="bouling.html">Боулинг</a>

</li><li><a href="park.html">Детский парк</a>  

</li><li><ahref="ploshadka.html">Детская площадка</a></li></ul></li><li>

<a href="gosti.html">Специальные гости</a></li>

<li><a href="foto.html">Фото-отчеты</a></li>

<li><a href="contact.html">Контакты</a></li>

<li><a href="karting.html">Картинг-центр</a></li></ul></div>

После чего необходимо написание CSS стилей для меню.

Выполняется сброс для элемента ul:

#menu, #menu ul {margin: 0;padding: 0;list-style: none;}

Элемент #menu является основным для меню. Градиенты, тени и скругленные углы позволят создать следующее оформление для него при помощи CSS кода:

#menu {

width: 960px;

margin: 60px auto;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

background-image: -webkit-linear-gradient(#444, #111);

background-image: -o-linear-gradient(#444, #111);

background-image: -ms-linear-gradient(#444, #111);

background-image: linear-gradient(#444, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;}

Рисунок 5.6 – Округление краев

Дальнейшим этапом стало отключение обтекания при помощи кода:

#menu:before,

#menu:after {content: "";display: table;}

#menu:after { clear: both;}

#menu {zoom:1;}

Internet Explorer 6 версии требует дополнительного кода для работы меню:

$(function() {  if ($.browser.msie && $.browser.version.substr(0,1)<7)

{ $('li').has('ul').mouseover(function(){

$(this).children('ul').css('visibility','visible');

}).mouseout(function(){

$(this).children('ul').css('visibility','hidden');})}});

Последующий код создания меню приведен в приложении

Рисунок 5.7 – Навигационное меню

Открытие изображений на новом слое происходит посредством подключенного скрипта “shutterset”.

<a class="shutterset" title="Концепт зала" href="gallery/mystic/1.jpg">

<img id="preview" src="gallery/mystic/thumbs/1.jpg" alt="" /></a>

где href это ссылка на оригинальное изображение, а src это ссылка на его уменьшенную копию, для уменьшения трафика.  

Рисунок 5.8 – Открытое изображение скриптом shutterset

Объединение фотографий в галереи происходит путем написания параметров в class "shutterset". В квадратных скобках указывается номер галереи

<a class="shutterset[3]" title="Концепт зала" href="gallery/mystic/1.jpg">

Рисунок 5.9 – Объединение фотографий в галереи

Карта создается путем использования сервиса yandex.map и последующей интеграции кода на ресурс.

<img src="images/maps.png" alt="Карта"/>

<div style="width: 600px; text-align: right;">

<a href="http://n.maps.yandex.ru/" target="_blank" style="color: #1A3DC1; font: 13px Arial,Helvetica,sans-serif;">Создано с помощью сервиса Яндекса Народная карта.</a></div>

<div style="font: 13px Arial, sans-serif; margin: 1em 0 0 0; padding: 0; line-height: normal; background: none; border: none;">

<h3 style="font: bold 13px Arial, sans-serif; margin: 0 0 0.6em 0; padding: 0; line-height: normal; background: none; border: none;">

Рисунок 5.10 – Интеграция карты от сервиса Yandex.maps

После основного текста страницы присутствует кнопки на популярные социальные сети интернета. Кнопки управляются при помощи скрипта share42.js.

<div class="share42init" data-url="[Mystic.ru]" data-title="[КРК Мистик]">

</div>

<script type="text/javascript" src="share42/share42.js">

</script>

<script type="text/javascript">share42('share42/')</script>

Рисунок 5.11 – Кнопка “Поделиться” в социальных сетях.

5.2 Описание интерфейса

Работа с сайтом разделяется для 2 типов пользователей: администратор, незарегистрированный пользователь

Работа с ресурсом начинается со страницы входа. Страница входа на ресурс отличается от основного дизайна сайта. Страница входа включает в себя эмблему КРК ”Мистик”, при нажатии на которую выполняется скрипт с анимацией. А так же страница включает основные пункты меню, для быстрого доступа к необходимой информации.

Рисунок 5.12 – Страница входа на ресурс

Рисунок 5.13 – Анимация входа на ресурс

Рисунок 5.14 – Главная страница ресурса

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

5

2

4

3

1

1-шапка;2-навигационное меню; 3-левая колонка; 4-центральная колонка; 5-подвал

Рисунок 5.15 – Схематичное изображение дизайна ресурса

5.1.1.1 Шапка ресурса. Шапка ресурса содержит слайдшоу, которое управляется скриптом.

Рисунок 5.16 – Шапка ресурса

5.1.1.2 Левая колонка. Левая колонка представлена на всех страница ресурса, содержит изображения на предстоящие важные события в КРК ”Мистик”, при нажатии на которые происходит их увеличение в этом же окне при помощи скрипта.

Рисунок 5.17 – Левая колонка ресурса

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

Рисунок 5.18 – Центральная колонка ресурса

Рисунок 5.19 – Кнопка “Поделиться” в социальных сетях.

5.1.1.4 Навигационное меню. Навигационное меню содержит ссылки на страницы ресурса. Меню имеет максимальный второй уровень вложенности, но возможно его расширения до 3. Навигационное меню управляется с помощью скрипта.

Рисунок 5.20 – Навигационное меню ресурса.

5.1.1.4 Подвал ресурса. Подвал ресурса остается неизменным для всех страниц ресурса и содержит адрес КРК ”Мистик” и контактный телефон.

Рисунок 5.21 – Подвал ресурса.

6 ТЕСТИРОВАНИЕ РАБОТЫ РЕСУРСА И КОНТРОЛЬНЫЙ ПРИМЕР РАБОТЫ

Тестирование – это процесс многократного выполнения программы с целью обнаружения ошибок.

Цель тестирования – выявление как можно большего числа ошибок.

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

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

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

Цель отладки – локализация и исправление выявленных в процессе тестирования ошибок.

6.1 Тестирование интернет ресурса

При тестировании WEB-сайта использовалось 2 метода:

  1.  метод детерминированного тестирования – для выявления наличия ошибок в работе ресурса;
  2.  метод статического тестирования  - для локализации ошибок.

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

Детерминированное тестирование, или тестирование на определенных входных значениях, основывается на двух подходах:

  1.  структурное тестирование;
  2.  функциональное тестирование.

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

В процессе структурного тестирования все выявленные ошибки были локализованы.

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

В процессе функционального тестирования все выявленные ошибки были локализованы.

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

Тестирование интернет ресурса проводилось с использованием виртуального сервера Denwer, что фактически моделирует работу ресурса в сети Internet.

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

В соответствии с проведенными тестовыми испытаниями можно выделить систему показаний качества:

  1.  Функциональные возможности – ресурс реализует установленные и предполагаемые потребности для решения поставленных задач.
  2.  Надежность – тестовые испытания показали способность ресурса сохранять свой уровень качества функционирования при установленных условиях за установленный период времени.
  3.  Практичность – ресурса обуславливается независимостью конфигурации или платформы для конечного пользователя. Необходима лишь программа (браузер) для просмотра WEB-страниц.
  4.  Эффективность. Клиент (пользователь) получает качественную и объемную информацию, используя минимум ресурсов.
  5.  Сопровождаемость – или модификация интернет ресурса не требует больших усилий.
  6.  Мобильность – интернет ресурс может быть перенесенным из одного окружения в другое. Например: с одного сервера на другой, с глобальной сети в локальную или наоборот.

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

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

6.2 Контрольный пример работы интернет ресурса

Рисунок 6.1 – Главная страница ресурса

Рисунок 6.5 – Анимация кнопок быстрого доступа

Рисунок 6.3 – Навигационное меню

Рисунок 6.4 – Анимация навигационного меню

Рисунок 6.5 – Смена изображений в шапке ресурса

Рисунок 6.6 – Открытое изображение скриптом shutterset

Рисунок 6.7 – Объединение фотографий в галереи

Рисунок 6.8 – Кнопка “Поделиться” в социальных сетях

Рисунок 6.9 – Результат работы кнопки “Поделиться

7 ТЕХНИКО-ЭКОНОМИЧЕСКОЕ ОПИСАНИЕ

7.1 Предназначение разрабатываемого сайта

Данный сайт будет реализовывать информационную поддержку новому концертно-развлекательному комплексу “Мистик”.

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

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

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

  1.  Начальный этап – на котором формулируются основные требования, предъявляемые к интернет-ресурсу, описываются основные цели предъявляемые к ресурсу.
  2.  Этап внешнего проектирования – где необходимо разработать архитектуру и структуру интернет-ресурса, определить алгоритм решения, выявить подсистемы и отдельные составляющие их модули, а также разработать внешний интерфейс.
  3.  Этап проектирования и кодирования компонентов – в ходе выполнения данного этапа происходит проектирование и кодирование на выбранном языке программирования отдельных модулей интернет-ресурса.
  4.  Основной этап – является наиболее трудоемким. Необходимо произвести отладку и тестирование отдельных модулей, затем – комплексную отладку всего интернет-ресурса в целом.
  5.  Заключительный этап – здесь проводится окончательная коррекция интернет-ресурса и подготавливается необходимая сопроводительная документация.

7.2 Расчет первоначальных затрат на программное обеспечение

Разработку системы проводит один специалист-программист. Тарифная ставка программиста составляет 100 руб/час.

Расчет трудозатрат в стоимостном выражении приведен в таблице 7.1.

Таблица 7.1- Расчет трудозатрат на программное обеспечение

Этапы

Виды работ

Исполнитель

Часовая ставка, руб

Трудоемкость, час

Трудоемкость, руб

Кол-во

Должн.

1

2

3

4

5

6

7

1. Начальный

Формулирование требований к сайту, описание целей разработки

1

заказчик

-

-

-

2. Внешнее проектирование

Разработка архитектуры и структуры программы, алгоритма разработка интерфейса пользовате

ля

1

программист

100

25

2500

Продолжение таблицы 7.1

1

2

3

4

5

6

7

3. Разработка и кодирование компонентов

Разработка каждого компонента и кодирование на языке программирования

1

программист

100

80

8000

4. Основной этап

Отделка модулей

1

программист

100

40

4000

Тестирование компонентов

1

программист

100

18

1800

Комплексное тестирование программы

1

программист

100

14

1400

Оформление программной документации

1

программист

100

8

800

5. Заключительный этап

Коррекция программной документации

1

программист

100

7

700

Итого

192

19200

 

Премия разработчика составляет 20% от основной:

К отчислениям на социальное страхование относятся отчисления на оплату перерывов в работе в связи с временной нетрудоспособностью и отчисления в пенсионный фонд. Норматив отчислений на социальное страхование составляет 30% от величины основной заработной платы:

К прочим расходам следует отнести расходы на обслуживание ЭВМ и плату за электроэнергию.

Затраты на электроэнергию рассчитываются исходя из потребляемой мощности устройства и тарифа на электроэнергию. В нашем случае предполагается использование компьютера с мощностью 0,8 кВт час. Стоимость одного кВт часа электроэнергии равна 2,28 руб. Время использования электроэнергии в процессе разработки 200 часов.

Следовательно, плата за электроэнергию составит:

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

Амортизация за 200 часов разработки программного обеспечения:

Расчет себестоимости разработки системы представлен в таблице 7.2.

Таблица 7.2 – Совокупные первоначальные затраты на разработку системы

Статьи затрат

Сумма, руб.

Основная трудозатраты

19200

Отчисления

5760

Расходы на обслуживание ЭВМ (200 часов)

200

Плата за электроэнергию

350

Итого:

25510

7.3 Расчет текущих затрат

Текущие затраты складываются из следующих:

  1.  Зарплата администратора, которая будет расти на 12% ежегодно;
  2.  Амортизация компьютера;
  3.  Плата за электроэнергию, которая будет расти на 5% ежегодно;
  4.  Плата за доменное имя и хостинг, плата за которые остаются неизменными;
  5.  Социальные нужды, которые составляют 30 процентов от зарплаты администратора.

Основная зарплата администратора на фирме заказчика составляет 120 руб. в час. Разрабатываемый интернет-ресурс, в среднем, на фирме заказчике будет использоваться 2 часа в сутки в течении 22 календарных рабочих дня в месяц. Затраты на трудозатраты администратора в этом случае составит

Затраты на социальные нужды составляет 30%.  

Стоимость расчета амортизационных отчислений на эксплуатацию компьютера рассчитывается по формуле 6.1 и составляет 250 руб. в месяц.

Время использования электроэнергии в процессе редактирования интернет-ресурса:

Следовательно, плата за электроэнергию в месяц составит:

Плата за доменное имя, по данным сайта reg.ru, составляет 600 руб. в год, а хостинг, с учетом предъявляемых требований, 1000 руб. в месяц

Таблица 7.3 – Текущие затраты

Статьи затрат

Сумма, руб.

Основная заработная плата администратора

5280

Социальные нужды

1584

Расходы на обслуживание ЭВМ

250

Плата за электроэнергию

80

Плата за доменное имя, руб. в год

600

Хостинг

1000

Итого:

8894

7.4 Расчет цены интернет-ресурса

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

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

  1.  реклама на щитах 7000 руб. вмесяц
  2.  реклама по радио 4000 руб. в месяц
  3.  реклама в городском транспорте 4000 руб. в месяц

Таблица 7.4 - Коммерческие расходы

Статьи затрат

Сумма, руб.

реклама на щитах

7000

реклама по радио

4000

реклама в городском транспорте

4000

Итого:

15000

Так как затраты на разработку составляет 23040 руб, то стоимость системы составит сумму из стоимости разработки, коммерческих расходов, НДС и премии разработчика:

=(19200+15000)*1,18+(19200+15000)*0,2=47196 руб.

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

Произведем расчет дохода с 1 человека

После первого года количество посетителей увеличится на 8% и составит 5400 человек. Следовательно общая прибыль составит

5400*1000=5400000 руб.

Следовательно разница составит 400000 руб.

После второго года количество посетителей увеличится еще на 8% и составит 5832 человек. Следовательно общая прибыль составит 5832*1000=5832000 руб.

Следовательно разница составит 432000 руб.

После второго года количество посетителей увеличится еще на 8% и составит 6298 человек. Следовательно общая прибыль составит

6298 *1000=6298000 руб.

Следовательно разница составит 466000 руб.

Коэф. дисконтирования

где  k- коэффициент дисконтирования

       n- расчетный год

Дисконтированный чистый доход

Ставка дисконтирования

где       

Таблица 7.5 – Основные экономические показатели

Показатель

Период, год

0

1

2

3

Первоначальные затраты

-47196

-

-

-

Текущие затраты

  1.  зарплата администратора

63360

70963

79478

  1.  социальные нужды

19008

21288

23743

  1.  плата за электроэнергию

960

1008

1058

  1.  амортизация компьютера

3000

3000

3000

  1.  хостинг

12000

12000

12000

  1.  домен

600

600

600

Итого

98928

108859

119879

Доходы

400000

432000

466000

Чистые доходы

301072

323141

346121

Ставка дисконтирования r

16,88

16,88

16,88

Коэф. дисконтирования k

0,8556

0,732

0,6257

Дисконтированный чистый доход

-47196

257597

236539

216568

Накопленный дисконтированный доход

213401

449940

666508

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

8 БЕЗОПАСНОСТЬ ЖИЗНЕДЕЯТЕЛЬНОСТИ

8.1 Краткая характеристика условий труда

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

8.2 Вредные производственные факторы

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

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

Объем помещений, в которых размещены работники вычислительных центров, не должен быть меньше 19,5 м3/человека с учетом максимального числа одновременно работающих в смену. Нормы микроклимата, где расположены компьютеры, приведены в таблице 8.1.

Таблица 8.1 Параметры микроклимата для помещений, где установлены компьютеры

Период года

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

Величина

Холодный

Температура воздуха в помещении Относительная влажность

Скорость движения воздуха

22…24 °С

40…60  %

до 0,1  м/с

Теплый

Температура воздуха в помещении Относительная влажность

Скорость движения воздуха

23…25 °С

40…60  %

0,1…0,2 м/с

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

Компьютер не производит выбросов вредных веществ, поэтому особые меры к ЭГУ с МЖС по защите не требуются.

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

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

В помещении используется два вида освещения – естественное и искусственное. Нормирование естественного и искусственного освещения осуществляется СНиП 23-05-95 в зависимости от характера зрительной работы. При работе с рассматриваемой установкой необходимым является различение объектов размером 0,3...0,5 мм, что соответствует разряду зрительной работы 3в.

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

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

2. Люминисцентные лампы (ЛЛ) применяются в светильниках низкого давления – высокая светоотдача (до 75 Лм/Вт), большой срок службы (до 10000 часов), экономичность.

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

Шум характеризуется своим состоянием во времени:

– стационарный (непрерывный и не изменяющийся);

– импульсный (отдельные короткие импульсы через определенное время);

– прерывистый;

Согласно СНиП II-12-77 нормируемыми параметрами прерывистого и импульсного шума в расчетных точках следует считать эквивалентные (по энергии) уровни звукового давления Lэкв в дБ в октавных полосах частот со среднегеометрическими частотами 63, 125, 250, 500, 1000, 2000, 4000 и 8000 Гц.

Допустимые уровни звукового давления на рабочем месте в производственном помещении указаны в таблице.

Таблица 8.2 - Допустимые уровни звукового давления

Помещения и территории

Уровни звукового давления Lэкв в дБ в октавных полосах частот со среднегеометрическими частотами в Гц

Уровни звука LА и эквивалентные уровни звука LАэкв 

63

125

250

500

1000

2000

4000

8000

в дБА

1

2

3

4

5

6

7

8

9

10

Творческая деятельность, программирование

86

71

61

41

49

45

42

38

50

Исходя из данных таблиц получим, что при работе за компьютером значение Lэкв не должно превышать 49 дБА в октавной полосе 1000, а значение  LАэкв  не должно превышать 50 дБА.

Согласно ГОСТ 12.1.029-80 Средства и методы защиты от шума по отношению к защищаемому объекту подразделяются на:

  1.  средства и методы коллективной защиты;
  2.  средства индивидуальной защиты.

8.2.5 Электробезопасность. Электробезопасность - система организационных и технических мероприятий и средств, обеспечивающих защиту людей от вредного и опасного воздействия электрического тока, электрической дуги, электромагнитного поля и статического электричества (ГОСТ 12.1.009-76).

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

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

Таблица 8.3 – Нормативные величины токов по ГОСТ 12.1.038-82

Род тока

Предельно-допустимые уровни тока (мА) при заданном времени протекания t, с

0,08

0,1

0,2

0,3

0,4

0,5

0,6

Переменный, 50 Гц

650

500

250

165

125

100

85

Постоянный

650

500

400

350

300

250

240

При длительном воздействии допустимый безопасный ток принят в 1 мА.

При продолжительном воздействии до 30 с – 6 мА.

За величину электрического тока, опасного для жизни человека, принимается ток 40 мА.

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

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

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

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

                                                                                                    (8.1)

где  k - коэффициент кратности номинального тока плавкой вставки предохранителя, k =3;

- номинальный ток плавкой вставки предохранителя, А.

Удельное сопротивление фазного провода:

 

Для фазного провода: Ом*мм2/м, м, мм2.           

Отсюда сопротивление фазного провода:

Удельное сопротивление нулевого провода:

Для нулевого провода: Ом*мм2/м, м, мм2.            

Отсюда удельное сопротивление нулевого провода:

Значения Хф и Хнз малы, ими можно пренебречь.

Полное сопротивление петли «фаза нуль»:

При использовании зануления по требованиям ПУЭ должно выполняться условие: .

Так как , следовательно условие выполняется.

Следовательно ток короткого замыкания:

               (8.5)

Для плавкой вставки должно выполняться условие.

   (8.6)

Для напряжения 220 В.

Условие выполняется.

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

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

Рисунок 7.1 - Схема работы зануления 1- нулевой защитный проводник; 2-    срабатываемый элемент защиты; 3- повторное заземление нулевого провода

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

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

Компьютер включает в себя:

  1.  системный блок;
  2.  монитор;
  3.  принтер;
  4.  сканер.
  5.  клавиатура;
  6.  мышь.

В помещении имеется устройства отопления и вентиляции.

Шум и вибрация вредно воздействует на организм человека и работу оборудования.

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

Пожаробезопасность - система мероприятий, направленная на предотвращение и локализацию возгораний. В случае загорания компьютер должен быть потушен не с помощью воды, а с помощью углекислотных огнетушителей, например ОУ-2А, ОУ-5, ОУ-8 (ручных) или ОУ-25, ОУ-80 (передвижных).   

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

ЗАКЛЮЧЕНИЕ

В результате проведенного дипломного проектирования была произведена разработка информационно-справочного ресурса культурно-развлекательного центра «Мистик», с применением языка разметки HTML и среды разработки – Notepad++.

Дизайн и цветовая гамма разработанного информационно-справочного ресурса соответствуют потребностям целевой аудитории.

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

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

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

  1.  изучить предметную область;
  2.  разработать модель предметной области;
  3.  выбрать метод проектирования интернет ресурса;
  4.  разработать и протестировать работу  интернет-ресурса.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

  1.  Верещаг, С.А. Perl & XML. Библиотека программиста / С.А. Верещаг.- СПб: Питер, 2012. - 208 c
    1.  Воронина, Л.И. Основы программирования на языке Perl / Л.И. Воронина.- М.: Радио и связь, 2010. - 144 c.
      1.  Высоковский, К.В. Perl: библиотека программиста / К.В. Высоковский.- СПб: Питер, 2010. - 249 c.
      2.  Глицкин, А.А. Perl. Сборник рецептов. Для профессионалов /  А.А. Глицкин.- СПб: Питер; Издание 2-е, 2008. - 219 c.
      3.  Гутцайт, Е.М. Perl. Наглядный курс программирования / Е.М. Гутцайт.- Диалектика, 2009. - 280 c.
      4.  Гутцайт, Е.М. Программирование на Perl / Е.М. Гутцайт.- СПб: Символ-Плюс, 2008. - 270 c.
      5.  Даль, В.Е. PHP. 75 готовых решений для вашего сайта / В.Е. Даль.- СПб: Наука и техника, 2009. - 256 c.
      6.  Каспина, Р.Г. PHP 5 и MySQL. Библия пользователя / Р.Г. Каспина.- Вильямс, 2010. - 291 c.
      7.  Конверс, Т. Т. PHP 5 и MySQL. Библия пользователя / Т. Т. Конверс.-Вильямс, 2006. - 130 c.
      8.  Кристиансен, Т. Н. Perl. Сборник рецептов. Для профессионалов / Т. Н. Кристиансен.-СПб: Питер; Издание 2-е, 2004. - 128 c.
      9.  Кузнецов, М.В. и др. Практика создания Web-сайтов / М.В. Кузнецов.-БХВ-Петербург, 2008. - 194 c.
      10.  Маклейн, С.В. PHP. Практика создания Web-сайтов / С.В. Маклейн.- БХВ-Петербург, 2008. - 276 c.
      11.  Маслов, В.В. Основы программирования Web / В.В. Маслов.-М.: Радио и связь, 2000. - 144 c.
      12.  Мишина, А.П. Непрерывная интеграция. Улучшение качества программного обеспечения и снижение риска / А.П. Мишина.- М.: Вильямс, 2008. - 240 c.
      13.   Мостовский, А. П. MySQL и mSQL: Базы данных для небольших предприятий и Интернета / А. П. Мостовский.- СПб: Символ-Плюс, 2008. - 190 c.
      14.  Рэй, Э.П. Perl & XML. Библиотека программиста / Э.П. Рэй.-СПб: Питер, 2003. - 98 c.
      15.  Серр, Ж. В. Энциклопедия по СУБД Paradox 4.5 for DOS / Ж. В. Серр.- М.: Мир, 2008. - 102 c.
      16.  Синяков, А.Ф. Полная энциклопедия Интернета / А.Ф. Синяков.- АСТ, 2008. - 278 c.
      17.  Скорняков, Л.А. Drupal 6. Создание надежных и полнофункциональных веб-сайтов, блогов, форумов, порталов и сайтов-сообществ / Л.А. Скорняков.- М.: Вильямс, 2009. - 272 c.
      18.  Стинрод, Н. Е. Самоучитель Microsoft Access 2002 /  Н. Е. Стинрод.- М.: Вильямс, 2012. - 247 c.
      19.  Стоянова, Р. В. Ответы на актуальные вопросы по Internet / Р. В. Стоянова.- Киев: DiaSoft, 2010. - 297 c.
      20.  Супруненко, Д.А. Стратегии клиент/сервер /  Д.А. Супруненко.- Киев: Диалектика, 2010. - 179 c.
      21.  Уайтхэд, П. В. Perl. Наглядный курс программирования / П. В. Уайтхэд.-Диалектика, 2001. - 280 c.
      22.  Уолл, Л. Д. Программирование на Perl / Л. Д. Уолл.-СПб: Символ-Плюс, 2004. - 159 c.
      23.   Фукс, Л. Н. Основы систем баз данных / Л. Н. Фукс.- Финансы и статистика, 2012. - 292 c.
      24.   Хаусдорф, Ф. Г. Автоматизация процессов накопления, поиска и обобщения информации / Ф. Г. Хаусдорф.- Наука, 2009. - 256 c.
      25.   Хобби, Д. К. Протоколы Internet / Д. К. Хобби.- СПб: BHV, 2007. - 148 c.
      26.  Галкин С.Е. "Бизнес в Internet". М., Центр. 1998, -247с.
      27.  Федорчук А. "Как создаются Web-сайты". СПб, Питер. 2001, -180с.
      28.  Каймин В.А. "Информатика". Учебник для студентов. М., ИНФРА-М.2001, - 423с.
      29.  Шумилин В.К., Гетия И.Г. Охрана труда при работе на ПЭВМ. Учебное пособие (часть 1).- Москва: МИП, 1994г.
      30.  Информатика: Учебное пособие /Вишневский А.В., Глущенко Н.В., Гончаров Д.А. и др. Под ред. С.В. Швеца. – Изд. 2-е, перераб. и доп. –Абакан: Изд. ХГУ, 2002, - 278с.
      31.  Кульгин, М. С. Технологии корпоративных сетей / М. С. Кульгин.- СПб: Питер, 2000. - 704 c.
      32.  Ларионов, А.М. Вычислительные комплексы, системы и сети / А.М. Ларионов.- Л.: Энергоатомиздат, 1987. - 288 c.
      33.  Пеонтьев, Б.К. Энциклопедия web-дизайнера / Б.К. Пеонтьев. - М.: Новый Издательский дом; Издание 7-е, испр. и доп., 2004. - 640 c.
      34.  Петюшкин, А. К. HTML экспресс-курс / А. К. Петюшкин. - СПб: БХВ-Петербург, 2004. - 250 c.
      35.  Флэнаган, Д.Н.  JavaScript: подробное руководство / Д.Н. Флэнаган. - Символ, 2008. - 992 c.
      36.  Хоникатт, Д.О.  Использование Internet. / Д.О.  Хоникатт. - М.: Вильямс; Издание 3-е, 1998. - 270 c.
      37.  Цвики, Э. Б. Создание защиты в интернете /  Э. Б. Цвики. - СПб: Символ-Плюс; Издание 2-е, 2002. - 928 c.
      38.  Шмитт, К. Г. CSS. Рецепты программирования / К. Г. Шмитт.- М.: Русская редакция; Издание 2-е, 2007. - 592 c.
      39.  Уроки CSS, JQuery [Электронный ресурс] – Режим доступа: http://ruseller.com/
      40.  Сайт IT-агентства. Web мастеринг [Электронный ресурс] – Режим доступа: http://dweb.ru/rass/html/005.htm
      41.  Уроки HTML [Электронный ресурс] – Режим доступа: http://ab-w.net/HTML/HTML.php
      42.  CSS примеры [Электронный ресурс] – Режим доступа: http://www.tigir.com/css.htm
      43.  CSS примеры [Электронный ресурс] – Режим доступа: http://uroki-css.ru/css/css_examples.php
      44.  Уроки веб дизайна [Электронный ресурс] – Режим доступа: http://xhtml.co.il/
      45.  

ПРИЛОЖЕНИЕ А

(обязательное)

Листинг страниц интернет ресурса

1 Листинг Index.html

2 Листинг main.html

3 еще километры кода

1 Листинг Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Концертно-развлекательный комплекс «Мистик»</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script src="jquery.easing.1.3.js" type="text/javascript"></script>  

<script type="text/javascript">

$(document).ready(function() {

$curtainopen = false;

$(".logo2").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="main.html"; }, 2000); }

return false;

});

});

$(document).ready(function() {

$curtainopen = false;

$(".club").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="nightclub.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".bouling").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="bouling.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".restoran").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="restoran.html"; }, 2000);}

return false;});});

$(document).ready(function() {

$curtainopen = false;

$(".karaoke").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="karaoke.html"; }, 2000);}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".bar").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="djbar.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".ploshadka").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="ploshadka.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".foto").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="foto.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".karting").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="karting.html"; }, 2000);  }

return false;

});});

</script>

<style type="text/css">

*{

margin:0;

padding:0;

}

body {

text-align: center;

background: #1e3553 url('images/index/darkcurtain.jpg') repeat-x;

}

img{

border: none; }

.leftcurtain{

width: 50%;

height: 100%;

top: 0px;

left: 0px;

position: absolute;

z-index: 2;

}

.rightcurtain{

width: 51%;

height: 100%;

right: 0px;

top: 0px;

position: absolute;

z-index: 3; }

.rightcurtain img, .leftcurtain img{

width: 100%;

height: 100%;}

.logo{

margin: 0px auto;

margin-top: 150px;

z-index: 5;

}

.logo2{

position: absolute;

top: 50%;

left: 50%;

margin-top: -250px;

margin-left: -320px;

z-index: 4; }

.logo2:hover

{position: absolute;

top: 50%;

left: 50%;

-webkit-transform:scale(1.05);

z-index: 4;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.rope{

position: absolute;

top: -40px;

left: 70%;

z-index: 4;

}

.load{

position: fixed; top: 5%; right: 48%;

z-index: -1;

}

.site{

position: absolute; center: 0%; right: 25%;z-index: -1;

height:100%;

}

.bouling

{

position: absolute;

top: 40%;

left: -95px;

background-image:url(images/index/bouling2.png);

width: 200px;

height: 138px;z-index: 4;

}

.bouling:hover

{

position: absolute;

top: 40%;

left: -45px;

background-image:url(images/index/bouling.png);

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.club

{

position: absolute;

op: 60%;

left: -95px;

background-image:url(images/index/club2.png);

width: 200px;

height: 138px;z-index: 4;

}

.club:hover

{

position: absolute;

top: 60%;

left: -45px;

background-image:url(images/index/club.png);

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.restoran

{

position: absolute;

top: 80%;

left: -95px;

background-image:url(images/index/restoran2.png);

width: 200px;

height: 138px;z-index: 4;

}

.restoran:hover

{

position: absolute;

top: 80%;

left: -45px;

background-image:url(images/index/restoran.png);

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.karaoke

{

position: absolute;

top: 20%;

left: -95px;

background-image:url(images/index/karaoke.png);

width: 200px;

height: 138px;z-index: 4;

}

.karaoke:hover

{

position: absolute;

top: 20%;

left: -45px;

background-image:url(images/index/karaoke2.png);

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.bar

{

position: absolute;

top: 20%;

right: 0px;

background-image:url(images/index/bar2.png);

width: 100px;

height: 138px;z-index: 4;

}

.bar:hover

{

position: absolute;

top: 20%;

right: 5px;

background-image:url(images/index/bar.png);

width: 150px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.ploshadka

{

position: absolute;

top: 40%;

right: 0px;

background-image:url(images/index/ploshadka2.png);

width: 100px;

height: 138px;z-index: 4;

}

.ploshadka:hover

{

position: absolute;

top: 40%;

right: 5px;

background-image:url(images/index/ploshadka.png);

width: 150px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.foto

{

position: absolute;

top: 60%;

right: 0px;

background-image:url(images/index/foto2.png);

width: 100px;

height: 138px;z-index: 4;

}

.foto:hover

{

position: absolute;

top: 60%;

right: 5px;

background-image:url(images/index/foto.png);

width: 150px;

height: 138px;

}

.karting

{

position: absolute;

top: 80%;

right: 0px;

background-image:url(images/index/karting2.png);

width: 100px;

height: 138px;z-index: 4;

}

.karting:hover

{

position: absolute;

top: 80%;

right: 5px;

background-image:url(images/index/karting.png);

width: 150px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

</style>

</head>

<body>

<div class="leftcurtain"><img src="images/index/frontcurtain.jpg"/></div>

<div class="rightcurtain"><img src="images/index/frontcurtain.jpg"/></div>

<a   href=>

<img class="logo2" src="images/index/logo.png" />

<a   href=# class="bouling" />

</a>

<a   href=# class="club" />

</a><a   href=# class="restoran" />

</a>

<a   href=# class="karaoke" />

</a> <a   href=# class="bar" />

</a>

<a   href=# class="ploshadka" />

</a>

<a   href=# class="foto" />

</a>

<a   href=# class="karting" />

</a>

<img class="load" src="images/index/load.png" />

<!--//<img class="site" src="images/index/site.jpg" />

-->

</a>

</body>

</html>

2 Листинг main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Mystic | Концертно-развлекательный центр</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />

<script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/droid_sans_400-droid_sans_700.font.js">

</script>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>

<script type="text/javascript" src="js/coin-slider.min.js"></script>

<script type="text/javascript" src="shutter/shutter-reloaded.js"></script>

<link rel="stylesheet" type="text/css" href="shutter/shutter-reloaded.css" />

</head>

<body  style="background:#0c0d0f url(images/background.jpg) repeat;">

<div class="main">

 <div class="header">

   <div class="header_resize">

     <div class="menu_nav">

     </div>

     <div class="clr"></div>

     <div class="slider">

       <div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="940" height="343" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="940" height="343" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="940" height="343" alt="" /> </a> </div>

     </div>

  <img id="image" src=images/glass.png>

  <div class="clr"></div>

     <div><ul id="menu">

<li><a href="main.html">ГЛАВНАЯ</a></li>

<li>

<a href="">КРК "МИСТИК"</a>

<ul>

<li>

<a href="concert.html">Концертная площадка</a>

</li>

<li>

<a href="nightclub.html">Ночной клуб</a>

</li>

<li>

<a href="djbar.html">DJ-бар</a>    

</li>

<li>

<a href="restoran.html">Ресторан</a>    

  </li>

  <li>

<a href="karaoke.html">Караоке</a>    

  </li>

  <li>

<a href="bouling.html">Боулинг</a>    

  </li>

  <li>

<a href="park.html">Детский парк</a>    

  </li>

  <li>

<a href="ploshadka.html">Детская площадка</a>    

  </li>

 </ul>

</li>

<li>

<a href="gosti.html">Специальные гости</a>

</li>

<li><a href="foto.html">ФОТО-ОТЧЕТЫ</a></li>

<li><a href="contact.html">Контакты</a></li>

<li><a href="karting.html">Картинг-центр</a></li>

</ul>

</div>

   </div>

 </div>

 <div class="content">

   <div class="content_resize">

     <div class="mainbar">

       <div class="article">

         <div class="post_content">

           <div>

             <p2>Главная</p2><br>

</div>

    <p> Концертно-развлекательный комплекс "МИСТИК" является одним из наиболее больших среди развлекательных центров на всей территории Поволжья и предоставляет широкий спектр услуг для своих посетителей. Среди них:

</p>

<ul style="margin-left: 50px;" type="CIRCLE">

<li style="text-align: -webkit-auto;">Ночной клуб</li>

<li style="text-align: -webkit-auto;">Концертная площадка</li>

<li style="text-align: -webkit-auto;">Ресторан</li>

<li style="text-align: -webkit-auto;">Dj-бар</li>

<li style="text-align: -webkit-auto;">Караоке</li>

<li style="text-align: -webkit-auto;">Боулинг</li>

<li style="text-align: -webkit-auto;">Детский парк</li>

<li style="text-align: -webkit-auto;">Детская площадка</li>

</ul>

<br />

<center>

<a class="shutterset[3]" title="Концепт зала" href="images/preview.jpg"><img id="preview" class="alignnone" src="images/preview_small.jpg" alt="" /></a>     &nbsp;&nbsp;

<a class="shutterset[3]" style="color: #ff4b33; line-height: 24px; font-size: 16px;" title="Концепт зала" href="images/karaoke.jpg"><img id="preview" class="alignnone" src="images/karaoke_small.jpg" alt="" /></a></center>&nbsp;&nbsp;

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

</p><p>

Караоке-бар mistik работает ежедневно и круглосуточно. Мы всегда рады нашим гостям.</p>

<p>&nbsp;</p>

<div class="share42init" data-url="[Mystic.ru]" data-title="[КРК Мистик]"></div>

<script type="text/javascript" src="share42/share42.js"></script>

<script type="text/javascript">share42('share42/')</script>

         </div>

         <div class="clr"></div>

       </div>

<p class="pages">&nbsp;</p>

     </div>

     <div class="sidebar">

<div class="gadget">

<br><a class="shutterse[1]t" title="Афиша" href="images/afisha2.jpg"><img style="border-width: 0px; margin-left: 25px; width: 200px; height: 300px;" src="images/afisha2.jpg" alt="картинка" /></a>

<br><br>

<a class="shutterset[2]" title="Афиша" href="images/afisha2.jpg"><img class="aligncenter" style="border-width: 0px;  margin-left: 25px; width: 200px; height: 300px;" src="images/afisha2.jpg" alt="картинка" /></a>

<p>&nbsp;</p>

       </div>

       <div class="gadget">

         <h2 class="star">&nbsp;</h2>

</div>

     </div>

     <div class="clr"></div>

   </div>

 </div>

 <div class="fbg">

 </div>

 <div class="footer">

   <div class="footer_resize">

     <p class="lf"> <a href="#"></a>.</p><div class="clr"></div>

<p class="rf">Концертно-развлекательный комплекс "Мистик" © Адрес ------ Телефон -------</p>

     <div style="clear:both;"></div>

   </div>

 </div>

</div>

<div style="height:50px;"></div>

</body>

</html>

Листов

 

 № документа

 Разраб.

БИТТУ  ИСТ-51

 

  

   2

Дата

Изм.

 Лист

Подпись

 Руков.

Н.контр

Утв.

Лит.

Лист


 

А также другие работы, которые могут Вас заинтересовать

55712. Інтерактивні методи навчання як засіб формування інтересу до пізнання молодших школярів 284.5 KB
  Тому важливого значення на сучасному етапі набуває активізація пізнавальної діяльності учнів як необхідна умова шкільного навчання. Активізація пізнавальної діяльності учнів – необхідна умова шкільного навчання. Він – основа розвитку нахилів учнів а отже і їх професійного спрямування. Я помітила що стійкий пізнавальний інтерес пізнавальна активність учнів початкових класів виявляється в навчальній діяльності.
55713. Зведені таблиці Microsoft Excel (MICROSOFT OFFICE 2010) 610.5 KB
  Мета: Отримання учнями практичних навичок представлення інформації із традиційних списків у більш зручному вигляді.
55714. Використання на уроках географії літературних творів та фотографі 306 KB
  Допомогти розвитку пізнавальної діяльності, активності учнів можуть нестандартні прийоми на уроках. Педагог за допомогою мистецьких творів може акцентувати увагу на подіях, явищах природи, керувати сприйняттям і відтворенням образів.
55715. Розв’язування рівнянь та побудова графіків, що містять цілу та дробову частини числа 712 KB
  Розв’язування рівнянь що містять цілу і дробову частини. У роботі проаналізовано окремі способи розв’язування рівнянь зі змінною під знаком цілої та дробової частин зокрема графічний та аналітичні.
55716. Исследования графов и их изучение 126 KB
  Точки графа называются его вершинами а отрезки соединяющие их ребрами графа. Более того графы являются эквивалентными либо попросту одним и тем же графом если соответствующие вершины одного графа соединены так же как и соответствующие вершины другого то есть соединены...
55717. ВПРОВАДЖЕННЯ ІКТ ТА ІНТЕРАКТИВНИХ МЕТОДІВ ТА ФОРМ НАВЧАННЯ ЯК ЗАСІБ ФОРМУВАННЯ ПРЕДМЕТНИХ МАТЕМАТИЧНИХ ТА ІНФОРМАЦІЙНО-КОМУНІКАТИВНОЇ КОМПЕТЕНЦІЙ В УЧНІВ ПОЧАТКОВИХ КЛАСІВ 268 KB
  Активне навчання потребує залучення учнів у навчальний процес. У розв’язанні цих проблем важливе місце відводиться інформаційно комунікативним технологіям інтерактивним методам та формам навчання комп’ютерному програмному забезпеченню освітнього процесу.
55718. Використання засобів ІКТ у процесі вивчення біології та хімії 74.5 KB
  Біологія та хімія є одними з тих навчальних предметів що дають багатий матеріал для відпрацювання найрізноманітніших методів і прийомів роботи з інформацією.
55719. Інтеграція початкового і дошкільного навчання, як діалог двох освітніх структур в межах округу 51 KB
  І досі на цьому перехідному місточку виникає багато питань: це продовження соціалізації дитини забезпечення психологічного комфорту врахування особливостей здоров’я та розвитку дітей вивчення статусу сім’ї. Перевантаження в школах пов’язанні зі складністю навчальних програм надлишкові домашні завдання ведуть до погіршення стану здоров’я учнів. І це є проблема над якою працюють вчителі всіх освітніх округів міста бо як казав один мудрець: Здоров’я – це ще не все але без здоров’я все інше – ніщо. Тому вчителі всіма...
55720. Взаимодействие участников коррекционного пространства в условиях спецшколы-интерната для детей с тяжелыми нарушениями речи 43.5 KB
  В законодательных документах усиленное внимание общества обращено к проблеме детей с особенностями психического и речевого развития и создания благоприятных условий для их социальной адаптации и реабилитации.