Курсовая работа: Разработка сайта павлодарского автовокзала

1.2.10 Технология DHTML

DHTML (Dynamic Hyper Text Markup Language, динамический язык разметки гипертекста) является расширением стандарта HTML и позволяет создавать web-страницы, включающие такие интерактивные элементы, как движущийся фон, расположенный под статичным содержимым документа, движущиеся объекты, выпадающие меню, кнопки, подсвечивающиеся при наведении курсора мыши, анимацию, бегущие титры и многое другое. По большому счету DHTML представляет собой «среднее арифметическое» между технологиями HTML и JavaScript. Этот стандарт использует простые сценарии, подготовленные с помощью интерпретируемого макроязыка, обрабатываемого браузером совместно с кодом HTML. Такие сценарии именуются «скриплетами». Для создания скриплетов используются стандартные расширения DHTML и любой макроязык, поддерживающий директивы интерфейса ActiveX. DHTML распознается браузерами Microsoft Internet Explorer, начиная с версии 4.0 и выше.

1.2.11 Технология XHTML и XML

XML (Extensible Markup Language, расширяемый язык разметки) является принципиально новым стандартом, предложенным в 2000 году создателем языка HTML — консорциумом World Wide Web Consortium (W3C). Это новейшая технология изготовления web-страниц, и ее окончательная спецификация в настоящий момент еще находится в стадии разработки. По структуре XML представляет собой не собственно язык разметки гипертекста, а так называемый метаязык, предназначенный для описания других языков более низкого уровня. В свою очередь XHTML (Extensible Hypertext Markup Language, расширя емый язык разметки гипертекста) представляет собой промежуточный вариант между XML и HTML 4.O. Именно за счет его широкого применения W3C планирует осуществить постепенный переход от одного стандарта к другому. В спецификацию XHTML заложен принцип обратной совместимости. Иными словами, владельцам web-сайтов, страницы которых выполнены по технологии HTML 4.0или более ранних версий, не придется как-либо изменять формат опубликованных в Интернете документов: все дополнения и расширения нового языка полностью включают в себя предыдущие стандарты.

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

2 Проектная часть

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

1 Выявить основные целевые группы сайта.

2 Определить подсистему интерфейса.

3 Разработать требования к структуре сайта павлодарского автовокзала.

4 Разработать требования к функциональным возможностям сайта.

5 Определить требования к режимам функционирования и надёжности.

6 Выявить требования к видам обеспечения.

2.1 Основные целевые группы

web технология сайт модуль

- администрация города Павлодара и павлодарской области;

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

- постоянные клиенты автовокзала;

- граждане, интересующиеся деятельностью павлодарского автовокзала.

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

2.2 Подсистема интерфейса

Разработанный сайт предоставляет пользователям рабочие места в данной информационной среде, которые строятся по классическим принципам построения интерфейсов:

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

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

- соответствие стандартам поставщика GUI-интерфейса;

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

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

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

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

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

- служебная информация – счётчики, копирайты, обратная связь, размещается в нижнем правом углу каждой страницы;

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

- лента новостных сообщений – размещается на главной странице;

- область других ссылок – ссылки на другие внешние ресурсы, относящиеся к тематике сайта (сайты других вокзалов);

- рабочая область модулей – в неё различные модули реализуют свой интерфейс с пользователем и выводят информацию, размещается в центре каждой страницы сайта;

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

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

Интерфейс обеспечивает возможность настройки пользователем размера экранных шрифтов.

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

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

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

2.3 Требования к структуре сайта павлодарского автовокзала

Структуру сайта павлодарского автовокзала функционально можно разделить на:

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

1.1 Новости

1.2 Контакты

2 Последние события

2.1 Новости автовокзала

2.2 Новости сайта

2.3 Объявления

3 Пассажирам

3.1 Расписание работы касс

3.2 Правила покупки/возврата билетов, перевозки багажа

3.3 Льготы

3.4 Информация о ценах на билеты

4 Покупка билетов

5 Расписание

5.1 Павлодар межгород

5.2 Павлодар пригород

6 О нас

6.1 История автовокзала

6.2 Расположение и время работы

6.3 Контакты

7 Фотоальбом

8 Вопросы и ответы

2.3.1 Иерархическая структура сайта павлодарского автовокзала

Иерархическая структура сайта павлодарского автовокзала представлена в Приложении В.

2.3.2 Текстовое описание разделов сайта павлодарского автовокзала

Текстовое описание разделов сайта павлодарского автовокзала приведено в Приложении С.

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

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

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

- модуль вывода новостей;

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

- модуль отображения расписания;

- модуль лингвистического сервиса.

2.4.1 Модуль статей

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

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

Верстка сайта предусматривает корректное отображение в следующих браузерах:

- Internet Explorer версии 5 и выше;

- Mozilla FireFox версии 1.5 и выше;

- Opera версии 8 и выше.

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

2.4.2 Модуль вывода новостей

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

2.4.3 Модуль работы рубрики вопрос-ответ

Рубрика «Вопрос-ответ» – это место, где каждый желающий может оставить свой вопрос, а посетитель – прочитать его. Функционально модуль разделен на блоки: Регистрация пользователя, с обязательными полями ввода ФИО, e-mail; Добавление вопроса/ответа, активен после регистрации и отображение вопросов/ответов.

Зарещается:

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

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

- подача сообщений, содержащих ненормативную лексику и нарушающие нормы морали;

- размещать сообщения общего рекламного характера.

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

По истечении срока вопрос/ответ удаляется.

2.4.4 Модуль отображения расписания

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

2.4.5 Модуль лингвистического сервиса

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

2.5 Требования к режимам функционирования и надёжности

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

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

Надёжность создаваемой системы обеспечивается:

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

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

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

- дублированием носителей информации;

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

2.6 Требования к видам обеспечения

2.6.1 Требования к информационному обеспечению

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

Сайт павлодарского автовокзала имееть выделенное доменное имя второго уровня: http://www.pavtvok.kz.

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

2.6.2 Требования к программно-техническому обеспечению

Система обеспечивает функционирование в режиме 24x7 (бесперебойно круглосуточно).

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

Система совместима со всеми современными стандартами сетевого администрирования и сервиса.

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

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

Листинг HTML-кода представлен в Приложении D.

Заключение

В данной курсовой работе был разработан сайт павлодарского автовокзала.

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

- изучено понятие Web-технологии;

- рассмотрены различные виды Web-технологий;

- спроектирован сайт павлодарского автовокзала.

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

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

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

В свете широкого использования IT-технологий, представленная курсовая работа является актуальной и отвечает предъявленным к ней требованиям. Сайт создан при помощи HTML-технологии с элементами Macromedia Flash и PHP, имеет удобный и понятный интерфейс и в полной мере отражает деятельность павлодарского автовокзала.

Список использованной литературы

1 Джейсон Мейнджер. Java : основы программирования : Пер. с англ. – К. : BHV, 1997. – 320 с.

2 Кристиансен Т., Торкингтон Н. Perl : Библиотека программиста : Пер. с англ. – СПб. : «Питер», 2000. – 736с. : ил.

3 Хейл, Бернард Ван. JDBC : Java и базы данных : Пер. с англ – М. : «Наука»,1999. – 320с.

4 Холзнер Стивен. Perl : специальный справочник : Пер. с анг. – СПб. : «Питер», 2000. – 496с. : ил.

5 Эферган М. Java : справочник. – СПб. : «Питер», 1998. – 448с. : ил.

Приложение А (обязательное)

Макет стартовой страницы сайта павлодарского автовокзала

Приложение В

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

Иерархическая структура сайта павлодарского автовокзала

Приложение С

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

Текстовое описание структуры разделов сайта павлодарского автовокзала

Приложение D

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

HTML-код сайта

<html>

<head>

 <title>Автовокзал Павлодара</title>

</head>

<body bgcolor="#33CCFF">

<font color="#330033">

<table width="100%" border="1" rules="none">

 <tr>

 <td width="30%"><img src="heada.gif" border="0" width="50%"></td>

 <td align="left"><h2>Автовокзал Павлодара</h2></td>

 </tr>

</table>

<table width="100%" border="1">

 <tr>

 <td width="70%" align="center"><a href="index.htm">на главную</a></td>

 <td align="left"><a href="kaz.htm" target="main">каз</a> <a href="index.htm" target="main">рус</a> <a href="eng.htm" target="main">eng</a></td>

 </tr>

</table>

<table width="100%" border="1">

 <tr>

 <td width="20%" valign="top">

 <li>События</li>

 <ul>

 <li><a href="n_vok.htm" target="main">Новости автовокзала</a></li>

 <li><a href="n_sajt.htm" target="main">Новости сайта</a></li>

 <li><a href="obyav.htm" target="main">Объявления</a></li>

 </ul>

 <li>Пассажирам</li>

 <ul>

 <li><a href="kassa.htm" target="main">Расписание работы касс</a></li>

 <li><a href="rull.htm" target="main">Правила</a></li>

 <li><a href="lgot.htm" target="main">Льготы</a></li>

 <li><a href="cena.htm" target="main">Информация о ценах</a></li>

 </ul>

 <li><a href="bay.htm" target="main">Покупка билетов</a></li>

 <ul>

 <li>Расписание</li>

 <ul>

 <li><a href="megg.htm" target="main">Межгород</a></li>

 <li><a href="prig.htm" target="main">Пригород</a></li>

 </ul>

 <li>О нас</li>

 <ul>

 <li><a href="histor.htm" target="main">История</a></li>

 <li><a href="dislok.htm" target="main">Расположение</a></li>

 <li><a href="tel.htm" target="main">Контакты</a></li>

 </ul>

 <li><a href="foto.htm" target="main">Фотоальбом</a></li>

 <li><a href="vopr.htm" target="main">Вопросы и ответы</a></li>

 </ul>

 </td>

 <td width="60%"><img src="karta.jpg"></td>

 <td width="20%" valign="top">

 Новость 1<br>

 Новость 2<br>

 Новость 3<br><br><br>

 <object type=application/x-shockwave-flash>

 <param name="movie" value="rekl.swf">

 <param name="bgcolor" value="#33CCFF">

 <embed src="rekl.swf" wmode="transparent" bgcolor="#33CCFF">

 </embed>

 </object><br><br><br><form id="searchform" method="get" action="find.php">

 <input type="text" name="find" id="s" size="25" value="">

         <input type="submit" value="Поиск">

         </form></td>

 </tr>

 <tr>

 <td colspan="3" align="center">Разработчик Крыжная Светлана Витальевна</td>

 </tr>

</table>

</font>

</body>

</html>

<html>

<head>

 <title>Автовокзал Павлодара</title>

</head>

<body bgcolor="#33CCFF">

<font color="#330033">

<table width="100%" border="1" rules="none">

 <tr>

 <td width="30%"><img src="heada.gif" border="0" width="50%"></td>

 <td align="left"><h2>Автовокзал Павлодара</h2></td>

 </tr>

</table>

<table width="100%" border="1">

 <tr>

 <td width="70%" align="center"><a href="index.htm">на главную</a></td>

 <td align="left"><a href="kaz.htm" target="main">каз</a> <a href="index.htm" target="main">рус</a> <a href="eng.htm" target="main">eng</a></td>

 </tr>

</table>

<table width="100%" border="1">

 <tr>

 <td width="20%" valign="top">

 <li>События</li>

 <ul>

 <li><a href="n_vok.htm" target="main">Новости автовокзала</a></li>

 <li><a href="n_sajt.htm" target="main">Новости сайта</a></li>

 <li><a href="obyav.htm" target="main">Объявления</a></li>

 </ul>

 <li>Пассажирам</li>

 <ul>

 <li><a href="kassa.htm" target="main">Расписание работы касс</a></li>

 <li><a href="rull.htm" target="main">Правила</a></li>

 <li><a href="lgot.htm" target="main">Льготы</a></li>

 <li><a href="cena.htm" target="main">Информация о ценах</a></li>

 </ul>

 <li><a href="bay.htm" target="main">Покупка билетов</a></li>

 <ul>

 <li>Расписание</li>

 <ul>

 <li><a href="megg.htm" target="main">Межгород</a></li>

 <li><a href="prig.htm" target="main">Пригород</a></li>

 </ul>

 <li>О нас</li>

 <ul>

 <li><a href="histor.htm" target="main">История</a></li>

 <li><a href="dislok.htm" target="main">Расположение</a></li>

 <li><a href="tel.htm" target="main">Контакты</a></li>

 </ul>

 <li><a href="foto.htm" target="main">Фотоальбом</a></li>

 <li><a href="vopr.htm" target="main">Вопросы и ответы</a></li>

 </ul>

 </td>

 <td width="60%">

<?php

$ini = parse_ini_file("index.ini", false);

echo "Результаты поиска ";

 foreach ($ini as $a=>$b) {

 if ($a==$_GET['find']) {echo "<a href=\"$b\">$a</a>\n";}

 }

?>

</td>

 <td width="20%" valign="top">

 Новость 1<br>

 Новость 2<br>

 Новость 3<br><br><br>

 <object type=application/x-shockwave-flash>

 <param name="movie" value="rekl.swf">

 <param name="bgcolor" value="#33CCFF">

 <embed src="rekl.swf" wmode="transparent" bgcolor="#33CCFF">

 </embed>

 </object><br><br><br><form id="searchform" method="get" action="find.php">

 <input type="text" name="find" id="s" size="25" value="">

         <input type="submit" value="Поиск">

         </form></td>

 </tr>

 <tr>

 <td colspan="3" align="center">Разработчик Крыжная Светлана Витальевна</td>

 </tr>

</table>

</font>

</body>

</html>