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

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

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

- язык разметки гипертекста;- расширяемый язык разметки- каскадные таблицы стилей- динамический язык разметки гипертекста- препроцессор гипертекста- активные серверные страницы- cистема управления содержимым

ВВЕДЕНИЕ

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

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

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

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

изучить предметную область;

разработать модель предметной области;

выбрать метод проектирования интернет ресурса;

разработать и протестировать работу интернет-ресурса.

1. ОБЗОР СУЩЕСТВУЮЩИХ ТЕХНОЛОГИЙ, СОЗДАНИЯ

ИНТЕРНЕТ ИНФОРМАЦИОННО-СПРАВОЧНЫХ РЕСУРСОВ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оптимизация страниц для поисковых систем.

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

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

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

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

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

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

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

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

интернет ресурс программирование тестирование

2. ОБЗОР СУЩЕСТВУЮЩИХ ТЕХНОЛОГИЙ СОЗДАНИЯ

ИНФОРМАЦИОННО-СПРАВОЧНЫХ РЕСУРСОВ

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

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

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

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

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

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

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

Публикация информации нетехническим специалистом;

Разделение данных и их представления;

Организация совместной работы при публикации информации;

Поисковые возможности;

Другие сервисы - форумы, голосования, анкеты и так далее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для каждой динамической страницы создается своё описание и ключевые слова в целях повышения рейтинга в поисковых системах;

Начало и окончание публикации любых материалов программируется по календарю;

Возможность ограничить доступ к определённым разделам сайта только для зарегистрированных пользователей, а с выходом Joomla 1.6 доступ как к разделу, так и к определённому материалу с точностью до конкретной связи;

Настраиваемые схемы расположения элементов по областям шаблона;

Различные модули (последние новости, счётчик посещений, подробная статистика посещений, гостевая книга, форум и другие);

В версии 1.6 была сильно улучшена система установки и управления расширениями. Теперь возможно одновременно устанавливать несколько расширений, объединенных в один инсталляционный пакет. Более того, реализована возможность автоматического обновления установленных расширений (при условии, что разработчик расширения задействует этот механизм);

В версии 1.6 появилась возможность публикации содержимого на нескольких языках [15];

В версии 1.6 появилась возможность определить время начала и завершения публикации модулей. Так же в новой версии Joomla улучшены возможности по управлению отображением содержимого;

Возможность создания не одной, а нескольких форм обратной связи для каждого контакта;

Модуль приёма от удалённых авторов новостей, статей и ссылок;

Иерархия объектов;

Менеджер рассылки новостей. Поддержка более чем 360 служб рассылки новостей по всему миру;

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

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

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

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

возможность публикации с помощью сторонних программ и сервисов;

простота установки, настройки;

поддержка RSS, Atom, trackback, pingback;

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

обширные библиотеки "тем" и "плагинов", позволяющих легко менять как внешний вид, так и способы вывода данных; " "темы" реализованы как наборы файлов-шаблонов на PHP, что положительно сказывается на скорости и гибкости;

заложенный потенциал архитектуры позволяет легко реализовывать сложные решения;

наличие русских переводов.

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

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

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

широкий набор свойств при построении рубрикаторов: плоские списки, иерархии, иерархии с общими предками, синонимы, родственные категории;

вложенность категорий любой глубины;

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

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

динамическое построение меню;

поддержка XML-форматов;

авторизация через OpenID;

символьные осмысленные URL;

переводы интерфейса сайта на разные языки, а также поддержка ведения разноязычного контента;

возможность создания сайтов с пересекающимся содержимым (например общей базой пользователей или общими настройками);

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

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

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

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

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

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

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

Визуальные возможности редактирования в Dreamweaver позволяют вам быстро создавать страницы без того, чтобы писать код вручную. Вы можете просматривать все ваши элементы сайта или активы и быстро вставлять их из панели непосредственно в документ. Вы можете упрощать ваши действия, создавая и редактируя изображения в Macromedia Fireworks или в другом графическом редакторе, затем импортируя их непосредственно в Dreamweaver или добавляя объекты Macromedia Flash.также обеспечивает полно-функциональную среду написания кода, которая включает инструментальные средства редактирования кода (например, раскраска кода или проверка закрытия тегов) и справочная информация по HTML, CSS, JavaScript, язык разметки ColdFusion (CFML), Microsoft Active Server Pages (ASP) и страницы JavaServer (JSP).также дает возможность вам строить динамические станицы использующие сервер-технологии CFML, ASP.NET, ASP, JSP и PHP.полностью настраиваемый. Dreamweaver используется, чтобы создавать свои собственные объекты и команды, изменять "горячие" клавиши и даже писать код JavaScript, чтобы расширять возможности Dreamweaver новыми свойствами, инспекторами свойств и новыми отчетами о сайте.

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

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

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

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

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

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

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

объединяет в себе HTML-редактор и CMS;

встроенный менеджер сайтов для управления их структурой;

подходит для любого типа пользователей, даже новичкам;

множество шаблонов сайтов различной тематики;

типа редактирования: HTML;

режима просмотра результата: в веб-браузере и мобильном устройстве;

созданный HTML код соответствует стандартам.

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

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

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

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

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

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

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

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

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

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

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

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

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

Поддержка большого количества языков (C, C++, Java, XML, HTML, PHP, Java Script, ASCII, VB/VBS, SQL, CSS, Pascal, Perl, Python, Lua, TCL, Assembler)(печатаешь и получаешь то, что видишь на экране)

Настраиваемый пользователем режим подсветки синтаксиса

Авто-завершение набираемого слова

Одновременная работа с множеством документов

Одновременный просмотр нескольких документов

Поддержка регулярных выражений Поиска/Замены

Полная поддержка перетягивания фрагментов текста

Динамическое изменение окон просмотра

Автоматическое определение состояния файла

Увеличение и уменьшение

Заметки

Выделение скобок при редактировании текста

Запись макроса и его выполнение

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

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

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

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

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

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

Уменьшение сроков и стоимости разработки: наиболее востребованная функциональность уже реализована в CMS и может быть сразу использована.

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

Снижение стоимости дальнейших модификаций.

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

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

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

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

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

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

Язык сайта - Русский. Доменное имя сайта #"551939.files/image012.gif">

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

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

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

. Слайд-шоу

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

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

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

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

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

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

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

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

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

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

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

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

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

- Главная

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

КРК ”Мистик”

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

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

-DJ bar

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

-Ресторан

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

- Караоке

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

- Боулинг

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

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

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

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

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

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

Фото-отчеты

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

Контакты

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

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

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

диаграмма вариантов использования;

диаграмма размещения;

диаграмма состояний.

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

определить общие границы и контекст моделируемой предметной области;

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

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

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

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

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

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

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

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

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

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

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

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

Соединение - это канал взаимодействия узлов (сеть).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(document).ready(function(){

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="main.html"; }, 2000);

}false;});

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

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

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

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

.restoran{position: absolute;: 80%;: -95px;image:url(images/index/restoran2.png);: 200px;: 138px;index: 4;}активной ссылки:

.restoran:hover{position: absolute;: 80%;left: -45px;image:url(images/index/restoran.png);width: 200px;height: 138px;}

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

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

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

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

="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 {: 960px;: 60px auto;: 1px solid #222;color: #111;image: -moz-linear-gradient(#444, #111);image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));image: -webkit-linear-gradient(#444, #111);image: -o-linear-gradient(#444, #111);image: -ms-linear-gradient(#444, #111);image: linear-gradient(#444, #111);

moz-border-radius: 6px;

webkit-border-radius: 6px;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 { 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>Концепт зала" href="gallery/mystic/1.jpg">

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

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

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

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

<a>

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

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

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

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

<a href="#"551939.files/image030.gif">

Рисунок 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 - Кнопка “Поделиться” в социальных сетях.

.2 Описание интерфейса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ПРИМЕР РАБОТЫ

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

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

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

отсутствие эталона, которому должен соответствовать тестируемый Интернет-ресурс;

высокая сложность и принципиальная невозможность исчерпывающего тестирования;

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

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

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

.1 Тестирование Интернет-ресурса

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

метод детерминированного тестирования - для выявления наличия ошибок в работе ресурса;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эффективность. Клиент (пользователь) получает качественную и объемную информацию, используя минимум ресурсов.

Сопровождаемость - или модификация Интернет-ресурса не требует больших усилий.

Мобильность - Интернет-ресурс может быть перенесенным из одного окружения в другое. Например: с одного сервера на другой, с глобальной сети в локальную или наоборот.

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

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

.2 Контрольный пример работы Интернет-ресурса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Зарплата администратора, которая будет расти на 12% ежегодно;

Амортизация компьютера;

Плата за электроэнергию, которая будет расти на 5% ежегодно;

Плата за доменное имя и хостинг, плата за которые остаются неизменными;

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

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

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

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

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

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

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

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

.4 Расчет цены Интернет-ресурса

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

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

реклама на щитах 7000 руб. в месяц

реклама по радио 4000 руб. в месяц

реклама в городском транспорте 4000 руб. в месяц

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

Так как затраты на разработку составляет 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 человек. Следовательно общая прибыль составит

*1000=6298000 руб.

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

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

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

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

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

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

где   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

средства и методы коллективной защиты;

средства индивидуальной защиты.

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

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

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

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

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

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

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

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

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

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

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

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

                                                  (8.1)

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

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

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

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

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

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

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

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

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

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

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

Так как

,

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

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

    (8.5)

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

  (8.6)

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

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

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

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

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

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

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

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

системный блок;

монитор;

принтер;

сканер.

клавиатура;

мышь.

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

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

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

1.     Верещаг, С.А. Perl & XML. Библиотека программиста / С.А. Верещаг.- СПб: Питер, 2012. - 208 c

2.       Воронина, Л.И. Основы программирования на языке Perl / Л.И. Воронина.- М.: Радио и связь, 2010. - 144 c.

.         Высоковский, К.В. Perl: библиотека программиста / К.В. Высоковский.- СПб: Питер, 2010. - 249 c.

.         Глицкин, А.А. Perl. Сборник рецептов. Для профессионалов / А.А. Глицкин.- СПб: Питер; Издание 2-е, 2008. - 219 c.

.         Гутцайт, Е.М. Perl. Наглядный курс программирования / Е.М. Гутцайт.- Диалектика, 2009. - 280 c.

.         Гутцайт, Е.М. Программирование на Perl / Е.М. Гутцайт.- СПб: Символ-Плюс, 2008. - 270 c.

.         Даль, В.Е. PHP. 75 готовых решений для вашего сайта / В.Е. Даль.- СПб: Наука и техника, 2009. - 256 c.

.         Каспина, Р.Г. PHP 5 и MySQL. Библия пользователя / Р.Г. Каспина.- Вильямс, 2010. - 291 c.

.         Конверс, Т.Т. PHP 5 и MySQL. Библия пользователя / Т.Т. Конверс.-Вильямс, 2006. - 130 c.

.         Кристиансен, Т.Н. Perl. Сборник рецептов. Для профессионалов / Т.Н. Кристиансен.-СПб: Питер; Издание 2-е, 2004. - 128 c.

.         Кузнецов, М.В. и др. Практика создания Web-сайтов / М.В. Кузнецов.-БХВ-Петербург, 2008. - 194 c.

.         Маклейн, С.В. PHP. Практика создания Web-сайтов / С.В. Маклейн.- БХВ-Петербург, 2008. - 276 c.

.         Маслов, В.В. Основы программирования Web / В.В. Маслов.-М.: Радио и связь, 2000. - 144 c.

.         Мишина, А.П. Непрерывная интеграция. Улучшение качества программного обеспечения и снижение риска / А.П. Мишина.- М.: Вильямс, 2008. - 240 c.

.         Мостовский, А.П. MySQL и mSQL: Базы данных для небольших предприятий и Интернета / А.П. Мостовский.- СПб: Символ-Плюс, 2008. - 190 c.

.         Рэй, Э.П. Perl & XML. Библиотека программиста / Э.П. Рэй.-СПб: Питер, 2003. - 98 c.

.         Серр, Ж.В. Энциклопедия по СУБД Paradox 4.5 for DOS / Ж.В. Серр.- М.: Мир, 2008. - 102 c.

.         Синяков, А.Ф. Полная энциклопедия Интернета / А.Ф. Синяков.- АСТ, 2008. - 278 c.

.         Скорняков, Л.А. Drupal 6. Создание надежных и полнофункциональных веб-сайтов, блогов, форумов, порталов и сайтов-сообществ / Л.А. Скорняков.- М.: Вильямс, 2009. - 272 c.

.         Стинрод, Н.Е. Самоучитель Microsoft Access 2002 / Н.Е. Стинрод.- М.: Вильямс, 2012. - 247 c.

.         Стоянова, Р.В. Ответы на актуальные вопросы по Internet / Р.В. Стоянова.- Киев: DiaSoft, 2010. - 297 c.

.         Супруненко, Д.А. Стратегии клиент/сервер / Д.А. Супруненко.- Киев: Диалектика, 2010. - 179 c.

.         Уайтхэд, П.В. Perl. Наглядный курс программирования / П.В. Уайтхэд.-Диалектика, 2001. - 280 c.

.         Уолл, Л.Д. Программирование на Perl / Л.Д. Уолл.-СПб: Символ-Плюс, 2004. - 159 c.

.         Фукс, Л.Н. Основы систем баз данных / Л.Н. Фукс.- Финансы и статистика, 2012. - 292 c.

.         Хаусдорф, Ф.Г. Автоматизация процессов накопления, поиска и обобщения информации / Ф.Г. Хаусдорф.- Наука, 2009. - 256 c.

.         Хобби, Д.К. Протоколы Internet / Д.К. Хобби.- СПб: BHV, 2007. - 148 c.

.         Галкин С.Е. "Бизнес в Internet". М., Центр. 1998, -247с.

.         Федорчук А. "Как создаются Web-сайты". СПб, Питер. 2001, -180с.

.         Каймин В.А. "Информатика". Учебник для студентов. М., ИНФРА-М.2001, - 423с.

.         Шумилин В.К., Гетия И.Г. Охрана труда при работе на ПЭВМ. Учебное пособие (часть 1).- Москва: МИП, 1994г.

.         Информатика: Учебное пособие /Вишневский А.В., Глущенко Н.В., Гончаров Д.А. и др. Под ред. С.В. Швеца. - Изд. 2-е, перераб. и доп. -Абакан: Изд. ХГУ, 2002, - 278с.

.         Кульгин, М.С. Технологии корпоративных сетей / М.С. Кульгин.- СПб: Питер, 2000. - 704 c.

.         Ларионов, А.М. Вычислительные комплексы, системы и сети / А.М. Ларионов.- Л.: Энергоатомиздат, 1987. - 288 c.

.         Пеонтьев, Б.К. Энциклопедия web-дизайнера / Б.К. Пеонтьев. - М.: Новый Издательский дом; Издание 7-е, испр. и доп., 2004. - 640 c.

.         Петюшкин, А.К. HTML экспресс-курс / А.К. Петюшкин. - СПб: БХВ-Петербург, 2004. - 250 c.

.         Флэнаган, Д.Н. JavaScript: подробное руководство / Д.Н. Флэнаган. - Символ, 2008. - 992 c.

.         Хоникатт, Д.О. Использование Internet. / Д.О. Хоникатт. - М.: Вильямс; Издание 3-е, 1998. - 270 c.

.         Цвики, Э.Б. Создание защиты в интернете / Э. Б. Цвики. - СПб: Символ-Плюс; Издание 2-е, 2002. - 928 c.

.         Шмитт, К.Г. CSS. Рецепты программирования / К.Г. Шмитт.- М.: Русская редакция; Издание 2-е, 2007. - 592 c.

.         Уроки CSS, JQuery [Электронный ресурс] - Режим доступа: http://ruseller.com/

.         Сайт IT-агентства. Web мастеринг [Электронный ресурс] - Режим доступа: http://dweb.ru/rass/html/005.htm

.         Уроки HTML [Электронный ресурс] - Режим доступа: http://ab-w.net/HTML/HTML.php

.         CSS примеры [Электронный ресурс] - Режим доступа: http://www.tigir.com/css.htm

.         CSS примеры [Электронный ресурс] - Режим доступа: http://uroki-css.ru/css/css_examples.php

.         Уроки веб дизайна [Электронный ресурс] - Режим доступа: http://xhtml.co.il/

ПРИЛОЖЕНИЯ

ПРИЛОЖЕНИЕ А

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

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();($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;(function() { document.location.href="main.html"; }, 2000);}false;

});

});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="nightclub.html"; }, 2000);

}false;

});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="bouling.html"; }, 2000);

}false;

});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="restoran.html"; }, 2000);}false;});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="karaoke.html"; }, 2000);}false;

});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="djbar.html"; }, 2000);

}false;

});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="ploshadka.html"; }, 2000);

}false;

});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="foto.html"; }, 2000);

}false;

});});

$(document).ready(function() {

$curtainopen = false;

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

$(this).blur();($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;(function() { document.location.href="karting.html"; }, 2000);}false;

});});

</script>

<style type="text/css">

*{:0;:0;

}{align: center;: #1e3553 url('images/index/darkcurtain.jpg') repeat-x;

}{: none; }

.leftcurtain{: 50%;: 100%;: 0px;: 0px;: absolute;index: 2;

}

.rightcurtain{: 51%;: 100%;: 0px;: 0px;: absolute;index: 3; }

.rightcurtain img, .leftcurtain img{: 100%;: 100%;}

.logo{: 0px auto;top: 150px;index: 5;

}

.logo2{: absolute;: 50%;: 50%;top: -250px;left: -320px;index: 4; }

.logo2:hover

{position: absolute;: 50%;: 50%;

webkit-transform:scale(1.05);index: 4;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.rope{: absolute;: -40px;: 70%;index: 4;

}

.load{: fixed; top: 5%; right: 48%; index: -1;

.site{: absolute; center: 0%; right: 25%;z-index: -1;:100%;

}

.bouling

{: absolute;: 40%;: -95px;image:url(images/index/bouling2.png);: 200px;: 138px;z-index: 4;

}

.bouling:hover

{: absolute;: 40%;: -45px;image:url(images/index/bouling.png);: 200px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.club

{: absolute;: 60%;: -95px;image:url(images/index/club2.png);: 200px;: 138px;z-index: 4;

}

.club:hover

{: absolute;: 60%;: -45px;image:url(images/index/club.png);: 200px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.restoran

{: absolute;: 80%;: -95px;image:url(images/index/restoran2.png);: 200px;: 138px;z-index: 4;

}

.restoran:hover

{: absolute;: 80%;: -45px;image:url(images/index/restoran.png);: 200px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.karaoke

{: absolute;: 20%;: -95px;image:url(images/index/karaoke.png);: 200px;: 138px;z-index: 4;

}

.karaoke:hover

{: absolute;: 20%;: -45px;image:url(images/index/karaoke2.png);: 200px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.bar

{: absolute;: 20%;: 0px;image:url(images/index/bar2.png);: 100px;: 138px;z-index: 4;

}

.bar:hover

{: absolute;: 20%;: 5px;image:url(images/index/bar.png);: 150px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.ploshadka

{: absolute;: 40%;: 0px;image:url(images/index/ploshadka2.png);: 100px;: 138px;z-index: 4;

}

.ploshadka:hover

{: absolute;: 40%;: 5px;image:url(images/index/ploshadka.png);: 150px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

.foto

{: absolute;: 60%;: 0px;image:url(images/index/foto2.png);: 100px;: 138px;z-index: 4;

}

.foto:hover

{: absolute;: 60%;: 5px;image:url(images/index/foto.png);: 150px;: 138px;

}

.karting

{: absolute;: 80%;: 0px;image:url(images/index/karting2.png);: 100px;: 138px;z-index: 4;

}

.karting:hover

{: absolute;: 80%;: 5px;image:url(images/index/karting.png);: 150px;: 138px;

webkit-transform:scale(1.05);index: 99;

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

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

ms-transform:scale(1.05);:scale(1.05);

}

</style>

</head>

<body>

<div>

<div>

<a  href=>

<img>

<a  href=#>

</a>

<a  href=#>

</a><a  href=#>

</a>

<a  href=#>

</a><a  href=#>

</a>

<a  href=#>

</a>

<a  href=#>

</a>

<a  href=#>

</a>

<img>

<!--//<img>

->

</a>

</body>

</html>

Листинг 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>

<div>

 <div>

  <div>

  </div>

  <div>

  <div>

   <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>

  <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>

 <div>

  <div>

   <div>

    <div>

     <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>Концепт зала" href="images/preview.jpg"><img id="preview">

<a>Концепт зала" href="images/karaoke.jpg"><img id="preview">

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

</p><p>

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

<p>&nbsp;</p>

<div>КРК Мистик]"></div>

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

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

    </div>

    <div>

   </div>

<p>

  </div>

  <div>

<div>

<br><a>Афиша" 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>Афиша" href="images/afisha2.jpg"><img>картинка" /></a>

<p>&nbsp;</p>

   </div>

   <div>

    <h2>

</div>

  </div>

  <div>

 </div>

</div>

<div>

</div>

<div>

 <div>

  <p>

<p>

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

 </div>

</div>

</div>

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

</body>

</html>