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

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

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

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

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

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

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

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

Для того чтобы использовать имя домена (стать администратором домена) его необходимо зарегистрировать.

Любой компьютер в Интернете имеет свой уникальный IP-адрес. Поэтому, если страничка лежит на компьютере с IP-адресом, например, 194.34.45.8 в каталоге /info, то любому пользователю для ее просмотра достаточно набрать в адресной строке браузера следующий адрес: http:// 194.34.45.8/info. Однако запоминать и вводить адреса в цифровом виде не слишком удобно. Для облегчения задачи существует система так называемых доменных имен (DNS - Domain Name System).

Домен - область пространства иерархических имен сети Internet, которая обслуживается набором серверов доменных имен (DNS) и централизованно администрируется. Домен идентифицируется именем домена. Большинству IP-адресов поставлено в соответствие некоторое название - доменное имя. Например, сайт корпорации «Xerox» находится по адресу http://www.xerox.com. запомнить и набрать такую запись гораздо проще, чем бессмысленную комбинацию цифр.

Доменные имена выдаются в соответствии со строгими правилами. В конце имени, после последней точки, в них содержится так называемое имя домена верхнего уровня. В большинстве случаев это двухбуквенный код страны, которой принадлежит данный ресурс. Например, окончание.ru означает Россию.ua - Украину.de - Германию.fr - Францию и т.д.

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

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

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

Крайнюю левую позицию в записи доменного имени занимает сетевое имя компьютера (в локальной сети), на котором работает серверная программа. Многие дают этому компьютеру имя WWW, чтобы подчеркнуть, что его ресурсы относятся к службе World Wide Web - тогда доменное имя сайта начинается с сочетания WWW.

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

Администратор домена - юридическое или физическое лицо, для которого регистрируется домен.

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

· Регистрация сервера на поисковых серверах и в каталогах.

· Помещение объявлений в Internet конференциях.

· Обмен ссылками с сайтами, имеющими сходную аудиторию.

· Участие в сетях обмена баннерами.

· Платное размещение баннеров на «раскрученных» порталах.

· Реклама на серверах рассылок новостей. Такие серверы рассылают по электронной почте информацию на различные темы своим подписчикам. В рассылку может быть включена реклама WEB-сайта.

· Расширение содержания WEB-сайта с целью привлечения вспомогательных групп аудитории.

· Рассылка сообщений об открытии сайта потенциальным потребителям продукции компании, как по электронной почте, так и традиционным образом.

· Размещение адреса сайта на всех выходных документах компании, рекламных и информационных материалах, упаковке товаров и пр.

· Реклама сайта в традиционных средствах массовой информации.

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

4.1 Средства разработки Web-приложений

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

Например, даже для создания обычной интерактивной WEB-страницы, соответствующей современным требованиям, необходимо знание языка гипертекстовой разметки HTML, каскадных таблиц стилей (CSS) и более сложные технологии разработки приложений на стороне сервера как PHP. Кроме того для разработки серверной части программного обеспечения программист должен владеть средствами доступа к базам данных с помощью языка запросов Mysql.

Денвер: автоматизация установки инструментария.

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

Денвер - универсальный инсталлятор, способный упростить установку всех программ, необходимых Web-программисту, это те же самые дистрибутивы Apache, PHP, MySQL, Perl, объединенные в единый архив, снабженные удобным инсталлятором и утилитами настройки под конкретную машину (включая средства автоматического конфигурирования виртуальных хостов).

Денвер представляет собой полностью автоматизированное средство.

Условия использования.

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

распространяемых программ (Apache, PHP, MySQL и т.д.). Естественно, он может

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

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

Состав базового пакета.

Базовый пакет содержит большинство необходимых Web-программисту программ и утилит:

Apache с поддержкой SSI, mod_rewrite, modphp;

PHP с поддержкой GD и MySQL;

MySQL с поддержкой транзакций (nrysqld-max);

PhpMyAdmin - система управления MySQL через Web-интерфейс; полностью

заменяет командную строку MySQL;

ядро Perl без стандартных библиотек;

эмулятор sendmail;

поддерживается работа совместно с РНР и Perl;

дистрибутив, содержащий все перечисленные выше компоненты, занимает всего около 2 Мбайт.

Дополнительные пакеты расширения

Так же доступно множество пакетов расширений для Денвера, содержащих:

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

полную версию Perl со стандартными библиотеками;

полную версию РНР 5;

Поддержка разработчиков.

По адресу http://forum.dklab.ru/denwer/ действует форум, где вы можете получить консультацию у авторов книги по вопросам, касающимся использования Денвера. Он также содержит обширную базу данных вопросов и ответов, которые задавали пользователи за последние два года. На форуме действует гибкая система поиска.

Установка дистрибутива.

Все дистрибутивы представляют собой архивы в формате 7-Zip (http:// 7-zip.org). Формат был выбран потому, что он дает наилучшую степень сжатия.

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

Появится запрос, в какой каталог вы хотели бы установить комплекс (по умолчанию используется C:\WebServers, вам нужно лишь нажать клавишу <Enter>, чтобы согласиться с этим выбором). В указанном каталоге будут расположены абсолютно все компоненты системы, и вне его никакие файлы в дальнейшем не создаются (исключая ярлыки на рабочем столе).

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

* Главный конфигурационный файл: /etc/CONFIGURATION.txt.

* Конфигурация Apache httpd.conf: /usr/local/apache/conf/httpd.conf.

* Файлы.htaccess с локальными настройками сайтов: в каталогах документов соответствующих сайтов.

* Конфигурация PHP: php.ini: /usr/local/php/php.ini.

* Конфигурация РНР 3: /usr/local/php3/php3.ini.

* Конфигурация MySQL с транзакциями: /usr/local/mysql/my.cnf.

* Файл hosts - соответствие имен сайтов их IP-адресам:

для Windows 95/98/ME: C:\Windows\hosts;

для Windows NT/2000/XP: C:\WinNT\system32\drivers\etc\hosts.

Начать работу с Денвером.

После завершения установки щелкните по ярлыку Denwer на Рабочем столе.

После завершения установки щелкните по ярлыку Denwer на Рабочем столе.

Откройте в браузере страницу http://localhost (хранится в папке home/localhost/www).

HTML

Обмен информацией в Интернет осуществляется с помощью протоколов прикладного уровня, реализующих тот или иной прикладной сервис (пересылку файлов, гипертекстовой информации, почты и т.д.). Одним из наиболее молодых и популярных сервисов Интернет, развитие которого и привело к всплеску популярности самой Интернет, стала World Wide Web (WWW), основанная на протоколе HTTP (Hyper Text Transfer Protocol - протокол передачи гипертекстовой информации). Гипертекстовые документы, представленные в WWW, имеют одно принципиальное отличие от традиционных гипертекстовых документов - связи, в них использующиеся, не ограничены одним документом, и более того, не ограничены одним компьютером. Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language - язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы - браузера. Наибольшее распространение в настоящее время получили браузеры Navigator компании Netscape (NN) и Internet Explorer компании Microsoft (MSIE). Реализации NN доступны практически для всех современных программных и аппаратных платформ, реализации MSIE доступны для всех Windows платформ, Macintosh и некоторых коммерческих Unix-систем.

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

<html>

<head>

<title>Название</title>

</head>

<body>

<p>Тело документа

</body>

</html>

Как видно из примера, тег представляет собой ключевое слово, заключенное в угловые скобки. Различают одинарные теги, как, например, <p>, и парные, как <body> </body>, в последнем случае действие тега распространяется только на текст между его открывающей и закрывающей скобкой. Теги также могут иметь параметры - например, при описании страницы можно задать цвет фона, цвет шрифта и т.д.: <body bgcolor= «white» text= «black»>.

Текст всего документа заключается в теги <html>, сам документ разбивается на две части - заголовок и тело. Заголовок описывается тегами <head>, в которые могут быть включены название документа (с помощью тегов <title>) и другие параметры, использующиеся браузером при отображении документа. Тело документа заключено в теги <body> и содержит собственно информацию, которую видит пользователь. При отсутствии тегов форматирования весь текст выводится в окно браузера сплошным потоком, переводы строк, пробелы и табуляции рассматриваются как пробельные символы, несколько пробельных символов, идущих подряд, заменяются на один. Для форматирования используются следующие основные теги:

<p> - начало нового абзаца, может иметь параметр, определяющий выравнивание:

<p align=right>;

<br> - перевод строки в пределах текущего абзаца;

<u></u> - выделение текста подчеркиванием

Ссылка на другой документ устанавливается с помощью тега <a href= «URL»>…</a>, где URL - полный или относительный адрес документа. При этом текст, заключенный в тег <a>, обычно выделяется подчеркиванием и цветом, и после щелчка мышью по этой ссылке браузер открывает документ, адрес которого указан в параметре href. Графические изображения вставляются в документ с помощью тега <img src= «URL»>.

PHP

PHP (англ. PHP: HyperText Preprocessor - «PHP: препроцессор гипертекста», англ. Personal Home Page Tools (устар.) - «Инструменты для создания персональных веб-страниц») - скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования.

РНР - язык, специально нацеленный на работу в Интернете, с универсальным и ясным синтаксисом, сильно похожим на С, сочетающий достоинства Perl и С. Позволяет встраивать программный код в HTML-документы. Мы можем привлекать его для формирования HTML-документов и избавиться от множества вызовов внешних сценариев. Этот язык используется на порядка миллиона серверов по всему миру, и их количество продолжает расти. Новое поколение РНР5 - должно стереть все преимущества Perl перед РНР, как с точки зрения быстродействия обработки программ (а третья и четвертая версии РНР сильно отставали от Perl при обработке больших циклов), так и с точки зрения синтаксиса. Наконец, большинство PHP-сценариев (особенно не очень больших размеров) работают быстрее аналогичных им программ, написанных на Perl.

РНР версии 5

Конечно, прежде всего, еще немного возросла скорость работы. Этим мы обязаны переходу на новое ядро системы - Zend Engine 2. Но главная причина смены номера версии с 4 на 5 - это существенное улучшение объектно-ориентированных возможностей РНР и встраивание в ядро интерпретатора двух мощных библиотек: СУБД SQLite и модуля для работы с XML.

РНР версии 5 совместим с РНР 4 значительно лучше, чем РНР 4 с РНР 3. Это значит, что программы, разрабатывающиеся в расчете на РНР версии 4, с высокой вероятностью заработают на РНР 5 без всяких изменений.

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

· автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

· взаимодействие с большим количеством различных систем управления базами данных (MySQL, Oracle, Microsoft SQL Server, InterBase, Paradox и др.);

· автоматизированная отправка HTTP-заголовков;

· работа с HTTP-авторизацией;

· работа с cookies и сессиями;

· работа с локальными и удалёнными файлами, сокетами;

· обработка файлов, загружаемых на сервер;

· работа с XForms;

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

CSS

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - язык описания внешнего вида документа, написанного с использованием языка разметки, мощный механизм управления представлением отдельных документов или их наборов.

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

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

Преимущества:

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

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

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

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

Недостатки:

Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.

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

MySQL

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

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

MySQL - свободная система управления базами данных (СУБД). MySQL является собственностью компании Oracle Corporation, получившей её вместе с поглощённой Sun Microsystems, осуществляющей разработку и поддержку приложения.

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

Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбрать как таблицы типа MyISAM, поддерживающие полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Более того, СУБД MySQL поставляется со специальным типом таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц.

Версия MySQL 5.1 продолжает путь к стандарту SQL:2003. MySQL 5.1 содержит следующие нововведения.

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

Изменено поведение ряда операторов, для обеспечения большей совместимости со стандартом SQL2003.

Построчная репликация (англ. row-based replication), при которой в бинарный лог будет записываться только информация о реально измененных строках таблицы вместо оригинального (и, возможно, медленного) текста запроса. Построчную репликацию можно использовать только для определенных типов sql-запросов, в терминах MySQL - смешанная репликация (англ. mixed replication).

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

Дополнительный набор функций для обработки XML, реализация поддержки XPath.

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

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

MySQL Cluster отныне выпущен как отдельный продукт, базирующийся на MySQL 5.1 и хранилище NDBCLUSTER.

Значительные изменения в работе MySQL Cluster, такие, как, например, возможность хранения табличных данных на диске.

Возврат к использованию встроенной библиотеки libmysqld, отсутствовавшей в MySQL 5.0.

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

Реализация парсера полнотекстового поиска в виде plug-in.

Новый тип таблиц Maria (устойчивый к сбоям клон MyISAM).

Web-сервер Apache

При выполнении проекта был выбран Web-сервер Apache. Почему именно Apache? Дело в том, что это самый распространенный на данный момент сервер, и вряд ли в ближайшие несколько лет он потеряет свою популярность. Он установлен у большинства хостинг-провайдеров. Кроме того, что немаловажно, существует его Windows-версия, практически идентичная по функциональности своему Unix-собрату.

По данным компании Netcraft, общее число Web-узлов, работающих под его управлением, к концу 1998 г. достигло 2 млн. (55% общего числа узлов) и постоянно растет. Для сравнения: на долю серверов Microsoft приходится 25%, Netscape - 7%. Будучи бесплатной открытой программой, предназначенной для бесплатных же Unix-систем (FreeBSD, Linux и др.), Apache по функциональным возможностям и надежности не уступает коммерческим серверам, а широкие возможности конфигурирования позволяют настроить его для работы практически с любой конкретной системой. Существуют локализации сервера для различных языков, в том числе и для русского.

Исторически сложилось так, что русские тексты в Internet могут быть представлены в разных кодировках, из которых наиболее распространены koi8-r (или просто koi8) и Windows-1251: с первой работает большинство серверов и рабочих станций под управлением Unix, вторая является стандартной для всех версий Windows. Поскольку кодировка Windows-1251, естественно, применяется на подавляющем большинстве клиентских машин, доля тех, кто путешествует по русской части WWW, используя koi8, не превышает сейчас 5%. Однако в этой кодировке хранятся документы на многих Unix-серверах, в ней чаще всего передаются почтовые сообщения и практически всегда - письма в телеконференции, с ней же работают многие русскоязычные каналы IRC (кстати, аббревиатура КОИ расшифровывается как «код обмена информацией»). Чтобы решить проблемы, возникающие при несовпадении кодировок текста на сервере и клиентской машине, и был создан русский модуль Apache-RUS для Web-сервера Apache.

4.2 Сравнительный анализ сред создания Web-приложений

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

Визуальные редакторы HTML, то есть редакторы типа WYSIWING. При работе в этих программах пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа.

Редакторы собственно НТМL-текстов, позволяющие автоматизировать набор и редактирование. Эти программы дают возможность пользователю быстро и легко вставлять в документ элементы HTML, проверять синтаксис команд, выполнять запуск и отладку страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает работу в интерактивной среде программирования типа Delphi или Visual Basic.

Macromedia Dreamweaver

Компания Macromedia продолжает делать Dreamweaver интуитивно понятной и простой в использовании программой. Мощные средства с одной стороны и простота в использовании - с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web-дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver - сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand - добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:

Программа Dreamweaver поддерживает «чистый» HTML код, а также последние расширения DHTML и CSS.

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

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

Применяется «Динамическая проверка для различных браузеров».

Поддерживает расширения, как сторонних разработчиков, так и самой Macromedia (более 500).

С Dreamweaver поставляется библиотека элементов, которые можно применять на WEB-страницах, например панель навигации, дескриптор авторского права и др.

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

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

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

Macromedia FLASH.

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

Flаsh-содержимое публикуется в компактных файлах формата SWF для последующего показа на самых разных платформах с помощью Flаsh-проигрывателя. Во время воспроизведения файла формата SWF в оперативном режиме в него можно динамически загружать такое содержимое, как звуковые файлы формата МР3, Flash-видео и изображения формата JPEG. Flash-проигрыватель позволяет подключаться к источникам данных, чтобы объединить их с базой данных, XML или web-службами. Благодаря всем этим возможностям привлекательные фрагменты анимации и эффекты могут быть введены в приложения, управляемые данными. Flash имеет поддержку антиалайсинг (сглаживание контуров с помощью смешения соседних цветов). Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации.

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

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

Macromedia HomeSite

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

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

В процессе работы пользователь может видеть рабочую область с двумя вкладками - Browse и Edit. То есть программирование происходит во вкладке Edit, а результат можно увидеть, если выбрать вкладку Browse. При создании новой страницы на поле редактирования автоматически появляются некоторые теги вроде HTML и BODY. Это шаблон, загружаемый при создании новой страницы. Его содержание можно менять.

В HomeSite очень легко строить архитектуру сайта. Этому способствует панель Quick Bar с системой вкладок с готовыми тегами. Теги в этих вкладках самые разные - от простых вроде параграфа до java-скриптов. Можно вообще оставить одну вкладку, добавив в нее все необходимые теги через меню Customize. Также можно самому создавать теги или их комбинации. При нажатии на кнопку с определенным тегом появляется окно, где можно настроить опции тега и указать его атрибуты. Поддерживает режим WYSIWYG со всеми его плюсами и минусами.

Для скорости работы здесь имеется множество средств редактирования тегов. Это, например, такие функции, как Tag Completion, Tag Editors и Tag Insight. Они существенно облегчают редактирование тегов и их атрибутов. Так же есть заготовки кода (Code Snippets).

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

Microsoft FrontPage

Является наиболее популярным HTML-редактором на рынке, главным образом за счёт популярности пакета Microsoft Office. В программе предлагаются мощные функции и привлекательный пакет программ, включая Image Composer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB-компоненты, необходимые для добавления интерактивных свойств web-узлу. Microsoft FrontPage является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода.

В программе имеется три режима работы с документом: Normal, HTML и Preview.

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

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

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

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

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали - сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов (What You See Is What You Get - «что видите, то и получите»).

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

Microsoft Word

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

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

Adobe Photoshop

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

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

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

4.3 Разработка структуры Web-сайта

Изучив предметную область и собрав исходные данные можно представить предполагаемую схему сайта. Взаимодействие пользователя с сайтом можно представить как технологию «клиент-сервер». Клиент в данном случае это пользователь сети Internet, который осуществляет доступ к серверу посредством браузера. Сервером в данном случае является сайт. WEB-сервер обрабатывает запросы браузера на получение WEB-страниц и отсылает ему требуемые данные (рисунок 4). Обмен данными в сети Internet осуществляется на основе коммуникационного протокола TCP/IP и протокола более высокого уровня (приложений) HTTP.

Рисунок 3.1. Схема функционирования WEB-приложения

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

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

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

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

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

WEB-сайт компании «Ооо-Мегакомп»» организован из 6 основных, 8 тематических, 3-х подключаемых и множества информационных страниц, 6 страниц для вывода информации из баз данных, 3 подключаемые страницы.

Основные страницы

Index.html - главная страница содержит общую информацию о WEB-сайте и компании «Ооо-Мегакомп»».

company.html. - фотографии руководителей и информация о компании.

price.html - страница на доступ к прайс-листу. Копировальные аппараты, принтеры, «Ооо-Мегакомп», стоимость ремонта, скачать весь прайс-лист. На этой странице пользователь по ссылкам сможет загрузить интересующий его прайс-лист либо прейскурант для просмотра в браузере, или скачать прайс-лист к себе на компьютер для дальнейшего просмотра. Информация по прайс-листу выводится из базы данных.

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

Adres.html - страница позволяющая узнать посетителю сайта адреса филиалов фирмы guestbook \ index.php - страница со ссылками на форму для отправки сообщений (отзывов и предложений) в гостевую книгу и для просмотра гостевой книги.

Тематические страницы

Cat_copy. - тематическая страница с кратким описанием и фотографиями копировальных аппаратов имеющая ссылки на информационные страницы с подробным описанием.

Cat_monitor. - тематическая страница с кратким описанием и фотографиями мониторов имеющая ссылки на информационные страницы с подробным описанием.

Cat_sysbl. - тематическая страница с кратким описанием и фотографиями системных блоков, серверов имеющая ссылки на информационные страницы с подробным описанием.

Cat_print. - тематическая страница с кратким описанием и фотографиями принтеров имеющая ссылки на информационные страницы с подробным описанием.

Cat_material. - тематическая страница с кратким описанием и фотографиями расходных материалов имеющая ссылки на информационные страницы с подробным описанием.

Nov_copy. - тематическая страница с кратким описанием и фотографиями новинок копировальных аппаратов.

Nov_monitor. - тематическая страница с кратким описанием и фотографиями новинок мониторов.

Nov_print. - тематическая страница с кратким описанием и фотографиями новинок копировальных аппаратов.

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Рис. 3.2. Структурная схема сайта

Подключаемые страницы.

Cap.htm - страница формирующая «шапку» со ссылками по сайту на всех основных и тематических страницах.

Bot.htm - страница, формирующая нижнюю часть экрана со ссылками по сайту на всех основных и тематических страницах.

Bot_2.htm - страница, формирующая нижнюю часть экрана со ссылками по сайту на всех остальных страницах кроме основных и тематических страниц.

Страницы для ввода - вывода информации из баз данных.

Price/Copir.asp - страница осуществляет доступ к прайс листу копировальные аппараты находящемуся в базе данных.

Gbook/showmes.asp - просмотр гостевой книги.

Формы

Gbook/book.asp - форма для добавления записей в гостевую книгу.

Источники данных

Guestbook.mdb - база данных гостевой книги, Price.xls - прайс лист в формате Excel табл. 2.2.

Скрытые страницы

Price/Monitor.asp - страница осуществляет доступ и изменяет содержимое прайс - листа.

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

5. Эргономика созданного программного продукта

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

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

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

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

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

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

1. Естественность (интуитивность). Работа с сайтом не должна вызывать у пользователя сложностей в поиске необходимой информации (элементов интерфейса).

2. Непротиворечивость. Приёмы работы со схожими элементами интерфейса и структурами данных должны быть реализованы идентично. Также работа с системой через интерфейс должна соответствовать установленным нормам (например, использование клавиши Enter для выбора элемента, клавиша Tab для перемещения на следующий элемент, и т.д.).

3. Отсутствие избыточности информации. Это означает, что пользователь должен вводить только минимальную информацию для работы или управления системой. Например, пользователь при заполнении формы гостевой книги в пункте URL строку «http:// » не указывает, потому что она записана в поле по умолчанию. Нельзя требовать от пользователя ввести информацию, которая была предварительно введена или которая может быть автоматически получена из системы. Желательно использовать значения по умолчанию, где только возможно, чтобы минимизировать процесс ввода информации.

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

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

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

1. группировки информации;

2. выделения различий между информацией;

3. выделения простых сообщений (ошибки, состояния и т.д.)

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

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

· необходимо ограничить число цветов до 4 на экране и до 7 для последовательности экранов; для неактивных элементов нужно использовать бледные цвета;

· для отображения состояния: красный = опасность / стоп, зеленый = нормально / продолжение работы, желтый = предостережение;

· для привлечения внимания наиболее эффективны белый, желтый и красный цвета;

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