Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Ответы на вопросы дополнено.docx
Скачиваний:
10
Добавлен:
19.09.2019
Размер:
1.4 Mб
Скачать

Пустая область вокруг изображения html-страницы

Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.

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

Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения.

Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.

Пример:

HTML-код:

<p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.</p>

Отображение в браузере:

Э тот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.

Горизотнальная линейка html-страницы

Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH.

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

Атрибут NOSHADE устраняет эффект объемности линейки.

Пример:

HTML-код:

<hr>

<hr align="left" width="50" size="5" noshade>

Отображение в браузере:

Списки с графическими маркерами html-страницы

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

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

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

Пример:

HTML-код:

<ul>

<br><img src="img/list.gif" align="middle" hspace="5">Глава 1

<br><img src="img/list.gif" align="top">Глава 2

<br><img src="img/list.gif" align="middle" hspace="15">Глава 3

</ul>

Отображение в браузере:

Глава 1 Глава 2

Работа с мультимедией

<MAP>...</MAP>

Создание нескольких активных областей на одном рисунке <AREA> - задает чувствительную область

Атрибуты <MAP>:

  • NAME - имя карты координат

Атрибуты <AREA>:

  • SHAPE - форма области

SHAPE=rect - прямоугольник (задаются две пары координат: x1,y1,x2,y2 (для верхнего левого и нижнего правого углов))

SHAPE=circle - окружность (задается x,y,r , где x,y - координаты центра, r - радиус)

SHAPE=poly - многоугольник (задается x1,y1,x2,y2,...xn,yn , где x,y - координаты углов)

  • HREF - URL ссылки при щелчке на область мыщью

  • NOHREF - задание неактивной но чувствительной области

  • COORDS - координаты области

Пример:

<MAP NAME="menu">

<AREA SHAPE=rect COORDS="0,0,20,20" HREF="file1.html">

<AREA SHAPE=rect COORDS="40,0,60,20" HREF="file2.html">

</MAP>

Определение рисунка как меню производится в теге <IMG> при помощи атрибута USEMAP:

<IMG SRC="pic.gif" border=0 USEMAP=#menu>

<BGSOUND>...</BGSOUND>

Вставить звуковой файл в документ (вставляется после <HEAD>). Только для IE.

Параметры BGSOUND:

  • SRC - имя звукового файла (wav)

SRC="Sound.wav"

  • LOOP - число повторов

LOOP=3

  • VOLUME

  • DELAY

  • BALANCE

<IMG>...</IMG>

Вставка изображения, видео или звука.

Синтаксис:

<IMG SRC="имя файла">

  • имя файла=file.jpg

  • имя файла=file.gif - вставка графического изображения

  • имя файла=file.wav - вставка звука

  • имя файла=file.avi - вставка видео фрагмента

Параметры:

  • WIDTH - ширина картинки в пикселях

  • HEIGHT - высота картинки в пикселях

  • ALIGN - выравнивание

ALIGN=LEFT - изображение прижимается к левому полю окна, текст обтекает изображение с правой стороны

ALIGN=CENTER - выравнивание по центру

ALIGN=RIGHT - изображение прижимается к правому полю окна, текст обтекает изображение с левой стороны

VALIGN=TOP - верхняя граница изображения выравнивается по самому высокому элементу текущей строки

VALIGN=TEXTTOP - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки

VALIGN=MIDDLE - выравнивание середины изображения по базовой линии текущей строки

VALIGN=ABSMIDDLE - выравнивание середины изображения посередине текущей строки

VALIGN=BOTTOM,BASELINE - выравнивание нижней границы изображения по базовой линии текущей строки

VALIGN=ABSBOTTOM - выравнивание нижней границы изображения по нижней границе текущей строки

  • HSPACE - горизонтальный отступ от графического изображения

  • ALT - альтернативный текст

<MARQUEE>...</MARQUEE>

Создание бегущей строки.

  • BEHAVIOR-устанавливает движения текста

  • BEHAVIOR="scroll"(по умолчанию)-стандартное движение от правого края к левому

  • BEHAVIOR="alternate"-движение от правого края к левому и обратно

  • BEHAVIOR="slide"-один раз пробегает и остается

  • DIRECTION-направление движения текста

  • DIRECTION="left"(по умолчанию)

  • DIRECTION="right"

  • DIRECTION="up"

  • DIRECTION="down"

  • LOOP - число повторений цикла, по умолчанию "infinite"-вечно

  • WIDTH - ширина строки

  • WIDTH=n - ширина строки n пикселей

  • WIDTH=n% - ширина строки n% от ширины экрана

  • HEIGHT - высота строки

  • HEIGHT=n - высота строки n пикселей

  • HEIGHT=n% - высота строки n% от max возможного значения

  • scrollAmount - регулировка движения строки по экрану

  • scrollAmount=n - строка скачет через n пикселей

  • scrollDelay - скорость перерисовки строки

  • scrollDelay= t - скорость перерисовки t милисекунд

  • TrueSpeed - по умолчанию"false"

  • BGCOLOR - цвет поверхности бегущей строки

События:

  • onStart срабатывает, когда должна начаться прокрутка

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

  • onBounce срабатывает, когда бегущяя строка достигла границы и меняет направление

допускается, когда значение behavior установлено на "alternate"

  • onMouseOver срабатывает при наведении курсора на прокрутку

  • onMouseOut срабатывает, когда курсор убирается с прокрутки

  • onClick срабатывает при нажатии на прокрутку

Синтаксис:

<MARQUEE BEHAVIOR="alternate"><IMG SRC="001.PNG" BEHAVIOR=ALTERNATE HEIGHT=227 WIDTH=213 ALT="Idocs Guide to HTML">

<SCRIPT>...</SCRIPT>

Описывает язык скрипта.

Обычно это или JavaScript либо VBScript.

Атрибуты:

  • LANGUAGE="JavaScript" - указывает, что используется JavaScript

  • LANGUAGE="VBScript" - указывает, что используется VBScript

<EMBED>...</EMBED>

Размещает модуль на Web-странице.

Атрибуты EMBED:

  • ALIGN=value - Выравнивание.

  • BORDER=num - Ширина рамки в пикселях.

  • FRAMEBORDER=value (NO - не отображать рамку).

  • HEIGHT=num - Высота кадра, выраженная в единицах, которые установлены в атрибуте UNITS.

  • HIDDEN - Скрывает модули на странице.

  • HSPACE=num - Ширина левого и правого полей в пикселях.

  • NAME=name - имя модуля.

  • PALETTE=value

PALETTE=FOREGROUND - цвет переднего плана.

PALETTE=BACKGROUND - цвет фона.

  • PLUGINSPAGE=URL - URL Web-страницы, содержащей инструкции по инсталяции модуля.

  • SRC=URL - URL, указывающий местонахождение встроенного файла мультимедиа. Если этот атрибут не используется, то следует использовать атрибут TYPE.

  • TYPE=type - MIME-тип встроенного объекта, определяющий модуль, который необходимо загрузить. Используется для модулей, которым не требуются данные.

  • UNITS=value

Значение PIXELS - Единицами измерения служат пиксели.

Значение EN - Единицами измерения служит половина размера шрифта.

  • VSPACE=num - Ширина верхнего и нижнего полей в пикселях.

  • WIDTH=num - Ширина фрейма, выраженная в единицах, которые установлены в атрибуте UNITS.

  • AVTOSTART - Указывает, надо ли сразу проигрывать загружаемый файл.

<OBJECT>...</OBJECT>

Размещает модуль на Web-странице. Применяется внутренний тег <PARAM>.

Атрибуты OBJECT:

  • BORDER=num - Ширина рамки в пикселях.

  • CLASSID=URL - URL модуля для загрузки из Internet, если у пользователя этот модуль не инсталирован.

  • DATA=URL - URL файла, содержащего данные объекта.

  • HEIGHT=num - Высота кадра, выраженная в единицах, которые установлены в атрибуте UNITS.

  • HSPACE=num - Ширина левого и правого полей в пикселях.

  • ID=name - Имя встроенного объекта.

  • TYPE=type - MIME-тип встроенного объекта, определяющий модуль, который необходимо загрузить. VSPACE=num - Ширина верхнего и нижнего полей в пикселях.

  • WIDTH=num - Ширина фрейма, выраженная в единицах, которые установлены в атрибуте UNITS.

  • UNITS=value

Значение PIXELS - Единицами измерения служат пиксели.

Значение EN - Единицами измерения служит половина размера шрифта.

<PARAM>...</PARAM>

Указывает дополнительные свойства вставляемого модуля. Размещается между <OBJECT>...</OBJECT>

Пример:

<OBJECT определение_объекта>

<PARAM NAME="LOOP" VALUE="TRUE">

</OBJECT>

HTML-формы.

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

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

Теперь займемся практикой. Для создания формы используется тег <form></form>. И сразу первый атрибут - action. Дело в том, что после заполнения формы пользователем и нажатия кнопки "Отправить", все эти данные необходимо обработать (сохранить, преобразовать, вывести и т.д.). Средствами простого HTML это сделать невозможно, так как он не предназначен для обработки.

Данные из формы передаются специальному скрипту (программе), который написан на языке программирования (PHP, Perl и др.) и он уже ними распоряжается. Таким образом, работающая форма должна состоять из двух частей: внешней (то, что видит пользователь, заполняет) и внутренней (скрипт, который выполняется на стороне сервера и обрабатывает информацию). Параметр action "связывает" эти две части и сообщает, куда отправить данные. Параметром этому атрибуту задается путь к файлу обработчика. Допустим он будет называться "obrab.php" и находиться в той же директории, что и HTML-документ. Атрибут method используется для указания метода, по которому будет передаваться информация в скрипт. Методы передачи данных относятся к теме языков программирования, здесь я скажу только, что используют метод GET или метод POST. И последний атрибут - name. Он задает имя формы. На иллюстрации вы видите принцип работы формы.

 

Давайте посмотрим на код страницы, пока не зашли в дебри :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Формы</title> <meta http-equiv="content-type" content="text/html" charset=Windows-1251"> <meta name="description" content="Изучение форм в HTML"> <meta name="keywords" content="формы"> </head> <body> <form action="obrab.php" method="POST" name="forma"> </form> </body> </html>

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

<p>Введите имя: <input type="text" name="imya"   width="20"></p>

Тег <input> - одинарный (закрывать его не надо), обозначает расположение поля для ввода. Атрибут type определяет тип поля (текст, список и т.д., об этом позже). Знакомый нам атрибут width обозначает ширину поля. Атрибут name задает имя поля. Вставьте эту строку внутрь <form></form> и давайте посмотрим:

Хорошо, давайте добавим поле для ввода пароля. А делается это так:

<p>Введите пароль: <input type="password"  name="parol" width="20"></p>

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

При вводе пароля мы не видим символы (с целью безопасности).

Допустим, нам надо знать пол пользователя, для статистики или еще для чего-то. И снова тег <input> но с параметром radio в атрибуте type.

<p>М или Ж?: <input type="radio" name="pol" value="male"> М <input type="radio" name="pol" value="female"> Ж</p>

Давайте посмотрим, что получается:

Вы наверное поняли принцип работы атрибута type. В данном случае мы задали тип radio, который определяет вот такой вид поля (переключатель). Пользователь выбирает, мальчик он или девочка :). Важную роль здесь играет имя поля (name="pol"). Оно одинаково для двух полей не спроста :) При передаче данных в скрипт обработки будет создана переменная с именем pol и она сможет иметь только одно из перечисленных значений value - male (мужчина) или famale (женщина). Мы можем создать сколько угодно полей типа radio с именем "pol" и разными значениями value и они будут объединены логически, как варианты ответа на один и тот же вопрос. У пользователя будет возможность выбрать только один вариант ответа. Если мы зададим разные имена этим двум полям (например, value="pol" и value="pol1"), то пользователь сможет выбрать оба варианта одновременно. Можете попробовать вставить еще несколько полей с тем же типом и именем, но с разными значениями value. Хотя здесь сложно еще что-то придумать :) Итак, небольшой вывод: чтобы создать несколько вариантов ответа на вопрос и дать пользователю выбрать один ответ используются поля ввода type="radio" с одинаковым именем, если у вас несколько таких вопросов, то можно использовать несколько групп переключателей (каждая группа - со своим именем).

Хорошо, с этим понятно. Идем дальше. Чтобы пользователь мог выбрать сразу несколько пунктов используется поле ввода c type="checkbox". Допустим, пользователь должен выбрать, какую информацию он хочет получать от нас по почте. Сразу приведу фрагмент кода:

... <body> <form action="obrab.php" method="POST" name="forma"> <p>Введите имя: <input type="text" name="imya" width="20"> </p> <p>Введите пароль: <input type="password" name="parol" width="20"> </p> <p>М или Ж?: <input type="radio" name="pol" value="male"> М <input type="radio" name="pol" value="female"> Ж </p> <p>Какую информацию вы хотите получать по почте?<br> <input type="checkbox" name="news"> Новости сайта <br> <input type="checkbox" name="info"> Информация  о новых товарах<br> <input type="checkbox" name="kurs"> Курсы валют</p> </form> </body> ...

В браузере мы увидим вот такую картину:

Мы задаем каждому полю свое произвольное имя, и каждый пункт "полетит" на сервер в отдельной переменной. Кажется я не говорил раньше о теге <br>. Он никак не связан с темой форм, это самостоятельный тег и применяться он может в любом месте тела документа. Используется он для переноса строки. Мы сообщаем браузеру, что следующий текст нужно вывести на новой строчке. Таким образом наши поля выстроились в столбик. Пользователь выберет нужные ему пункты, а не нужные оставит пустыми.

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

<p>Ваш e-mail: <input type="text" name="email"  width="20"></p>

Так, теперь предоставим пользователю возможность выбрать страну, в которой он проживает. Для этого опять таки создадим поле ввода. В этот раз мы используем новый тег <select></select>. Он парный, и обозначает выпадающий список. Также помещается все в тот же контейнер<form></form>. Для создания пунктов выбора (опций) используют тег <option></option>, который вкладывают внутрь <select></select>. Снова привожу фрагмент кода:

... <p>Выберите страну:<br> <select name="country"> <option>Украина</option> <option>Россия</option> <option>Китай</option> <option>Египет</option> </select> </p> ...

Вставьте этот фрагмент после абзаца с e-mail. Смотрим в браузер:

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

Если мы хотим предоставить возможность выбрать несколько вариантов, то в теге <select> необходимо прописать атрибут multiple="multiple". В этом случае пользователь увидит весь список сразу и сможет при зажатой клавише [Ctrl] выбрать несколько вариантов одновременно.

В нашем случае это будет не логичным, поэтому я оставляю первый вариант. Еще один атрибут тега <select> - size, обозначает количество вариантов, отображаемых в поле. Пропишем, например, в теге <select> атрибут size="2":

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

Создадим еще одно поле, в котором пользователю предлагается написать несколько слов о себе. Для этого используем тег <textarea></textarea>, не забываем его закрывать, помещается он также между тегами <form></form>. Кроме name ему прописывают параметры: cols - сколько символов будет помещаться в ширину поля; rows - сколько строчек текста будет видно в этом поле. Давайте посмотрим на фрагмент кода:

... <p>Напишите нам несколько строк о себе :)<br> <textarea name="aboutme" cols="40" rows="5"> Пишем здесь... </textarea> </p> ...

Мы видим поле шириной 40 символов, высотой в 5 строк, в поле уже появился текст, который мы написали в коде. Например, текст "Напишите нам несколько строк о себе :)" можно вставить сразу в поле, написав его между тегами <textarea></textarea>. Текст из этого поля "полетит" на сервер в переменной aboutme (соответствует имени поля).

Осталось создать кнопку "Отправить". Это делается просто. Заодно посмотрим конечный результат нашей работы:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Формы</title> <meta http-equiv="content-type" content="text/html" charset=Windows-1251"> <meta name="description" content="Изучение форм в HTML"> <meta name="keywords" content="формы"> </head> <body> <form action="obrab.php" method="POST" name="forma"> <p>Введите имя: <input type="text" name="imya" width="20"> </p> <p>Введите пароль: <input type="password" name="parol" width="20"> </p> <p>М или Ж?: <input type="radio" name="pol" value="male"> М <input type="radio" name="pol" value="female"> Ж </p> <p>Какую информацию вы хотите получать по почте?<br> <input type="checkbox" name="news"> Новости сайта <br> <input type="checkbox" name="info"> Информация о новых товарах<br> <input type="checkbox" name="kurs"> Курсы валют </p> <p>Ваш e-mail: <input type="text" name="email" width="20"> </p> <p>Выберите страну:<br> <select name="country" size="2"> <option>Украина</option> <option>Россия</option> <option>Китай</option> <option>Египет</option> </select> </p> <p>Напишите нам несколько строк о себе :)<br> <textarea name="aboutme" cols="40" rows="5"> Пишем здесь... </textarea> </p> <p> <input type="submit" name="button" value="Отправить"> </p> </form> </body> </html>

Итак, окончательный вариант нашей с вами формы:

Атрибут type="submit" означает, что это кнопка. При нажатии на нее все данные, введенные пользователем в форму отправляются на сервер к обработчику в виде переменных. В данном случае обработчик - это файл "obrab.php". Каждое поле отправляет информацию в отдельной переменной, название которой соответствует имени поля. Скрипт обрабатывает данные, и как правило, присылает браузеру сообщение примерно такого содержания: "Спасибо, вы зарегистрированы" или типа того :)

Еще один момент: часто требуется, чтобы при загрузке страницы с формой некоторые поля уже были отмечены или заполнены. Для полей типа radio и checkbox можно использовать атрибут checked="cecked". Пропишите его для полей выбора информации и для одного из полей выбора пола. Обновите страницу. Разница понятна. Для текстовых полей используют атрибут value, а в кавычках указывают текст, который хотят видеть в поле при загрузке страницы. Установите для поля ввода имени value="Ваше имя...". Для наглядности:

Страница только что загрузилась, я ничего не отмечал.

Это все, что я хотел сказать о формах. Остальная часть работы с данными выполняется скриптом-обработчиком.

Вы можете посетить один из сайтов, посвященных конкретно теме HTML (например, htmlbook.ru). Там вы найдете перечень всех тегов и атрибутов, а также узнаете их назначение. Для вас не составит труда разобраться в них, так как вы уже хорошо знакомы с языком. Повторюсь, что мы изучаем основную часть HTML, при помощи которой выполняется 85% задач с ним связанных. В следующих статьях мы еще поговорим об XHTML - более строгой версии HTML. А на этом я с вами прощаюсь. Изучайте, экспериментируйте и у вас все получится!

Каскадные таблицы стилей (CSS).

В отдельном документе.

Основные понятия технологии «Клиент-Сервер»

Что такое архитектура "клиент-сервер"?

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

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

По такой схеме могут быть построены системы обработки данных на основе СУБД, почтовые и другие системы. Мы будем говорить о базах данных и системах на их основе. И здесь удобнее будет не просто рассматривать клиент-серверную архитектуру, а сравнить ее с другой - файл-серверной.

В файл-серверной системе данные хранятся на файловом сервере (например, Novell NetWare или Windows NT Server), а их обработка осуществляется на рабочих станциях, на которых, как правило, функционирует одна из, так называемых, "настольных СУБД" - Access, FoxPro, Paradox и т.п..

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

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

Рис. Сравнение файл-серверной и клиент-серверной моделей

В клиент-серверной системе функционируют (как минимум) два приложения - клиент и сервер, делящие между собой те функции, которые в файл-серверной архитектуре целиком выполняет приложение на рабочей станции. Хранением и непосредственным манипулированием данными занимается сервер баз данных, в качестве которого может выступать Microsoft SQL Server, Oracle, Sybase и т.п..

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

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

Что дает архитектура клиент-сервер?

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

Надежность

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

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

  • независимость - транзакции, инициированные разными пользователями, не вмешиваются в дела друг друга;

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

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

Масштабируемость

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

Общеизвестно, что возможности настольных СУБД серьезно ограничены - это пять-семь пользователей и 30-50 Мб, соответственно. Цифры, разумеется, представляют собой некие средние значения, в конкретных случаях они могут отклоняться как в ту, так и в другую сторону. Что наиболее существенно, эти барьеры нельзя преодолеть за счет наращивания возможностей аппаратуры.

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

Безопасность

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

Гибкость

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

  • пользовательского интерфейса;

  • правил логической обработки (бизнес-правил);

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

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

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

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

Рис. Трехуровневая модель клиент-серверного приложения

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

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

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

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

DHTML

Полная версия в отдельном документе.

DHTML

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

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).