9.7.2. Сетевые технологииWeb-дизайна
Основным средством создания Web-страниц является язык гипертекстовой разметки HTML. Заметим, что в перспективе ему на смену должен прийти язык XML (extensible Markup Language – расширяемый язык разметки).
Стандартный язык HTML позволяет создавать статичные Web-страницы, которые содержат текст, неподвижные рисунки. Такие страницы напоминают плакаты на досках объявлений, традиционные полотна в картинных галереях или фотографии на выставках. Но, используя лишь язык HTML, невозможно создать сайт, отвечающий современным требованиям Web-дизайна. Образно язык HTML можно сравнить с шампуром, на который должны быть нанизаны лакомые кусочки.
Специальные добавки к HTML позволяют оживить неподвижные страницы (ввести мерцание, движущийся текст, обеспечить интерактивность – возможность передачи информации не только с сервера, но и на сервер и т. д.).
Такими дополнениями к языку разметки HTML являются каскадные таблицы стилей CSS, скрипты, написанные на языках JavaScript или VBScript, апплеты, составленные на языке Java, CGI-скрипты – программы, для создания которых применяют языки Perl, C++, скриплеты, написанные на языке DHTML. Для создания движущихся надписей и рисунков используют GIF- и Flash-анимацию. Технологии AVI и MPEG позволяют вставлять видеоклипы. Имеются средства для озвучивания Web-страниц с помощью аудиоклипов, созданных в форматах WAV и MIDI.
Каждое дополнение решает свою определенную задачу, расширяя возможности стандартного языка HTML.
Так, таблицы стилей CSS упрощают процедуру форматирования текста, придания сайту единообразного вида.
CSS (Cascading Style Sheets – каскадные таблицы стилей) – сетевая технология, расширяющая возможности языка HTML. Каскадные таблицы стилей упрощают и ускоряют процедуру форматирования Web-страницы, позволяют представить страницы одного сайта в едином стиле. С помощью CSS несложно быстро изменить сразу на всех страницах сайта цвет шрифта, его размер, начертание, гарнитуру, величину отступа в красной строке, вид выравнивания текста и т. д. Это реализуется за счет заранее подготовленных шаблонов, которые удобно разместить в отдельном файле. Загрузка нового файла приводит к изменению внешнего вида (стиля) сразу всех страниц данного сайта.
Стиль – набор правил оформления и форматирования, который может быть применен к различным элементам страницы. Другими словами, набор атрибутов текста (размер, цвет символов, гарнитура и т. д.), обозначенных одним именем.
В соответствии с концепцией CSS весь текст страницы представляют в виде набора контейнеров (блоков), к каждому из которых можно применить свой вид форматирования. Контейнерами могут быть, например, заголовки разделов статьи или книги. При этом контейнеры можно интерпретировать как переменные, которые принимают различные значения (например, размер шрифта). В этом случае легко изменить цвет сразу всех заголовков на всей Web-странице и даже сайте.
Каскадные таблицы стилей позволяют без затруднений создавать любопытные эффекты, например, проплывание (парение) текста над неподвижным фоном, формирование разнообразных рамок (box), эффект объемного текста.
Так, эффект парения текста над фоном достигается благодаря директиве:
Здесь bgr.gif – имя графического файла с изображением фона.
Для браузера MS Internet Explorer (в рамках языка DHTML) разработаны специальные программы, которые позволяют просто создать разнообразные эффекты: свечение текста, создание тени, смазывание, горизонтальное и вертикальное отражение текста, создание рельефного и гравированного изображений, инверсия цветов (цветной негатив) и др. Благодаря DHTML Web-страницы могут динамически изменяться при наступлении какого-либо события.
Программы, написанные на языке DHTML, называются DHTML-скриптами или скриплетами.
DHTML (Dinamic Hypertext Markup Language) – динамической язык разметки гипертекста. Конкурирующие фирмы Microsoft и Netscape вкладывают разный смысл в понятие «динамический HTML». Это часто приводит к тому, что одна и та же Web-страница по-разному выглядит при ее просмотре разными браузерами. По этой же причине существует некоторая путаница с определением самого понятия DHTML.
Сценарии (или скрипты) – программы, которые составляются на специальных языках программирования с целью расширения возможностей HTML. В качестве языков программирования используют JavaScript, VBScript, Java, Perl, C++ и др. Сценарии позволяют обрабатывать (реагировать на) различные события (например, щелчок мышью, размещение курсора мыши на некотором объекте, нажатие клавиши). Ответной реакцией на произошедшие события становятся изменение внешнего вида Web-страницы, пересылка данных от клиента на сервер и др.
Слово Script в переводе с английского языка означает «сценарий». Термины «скрипт» и «сценарий», которые используются в публикациях по Web-дизайну, являются синонимами.
Традиционное значение слова «сценарий», которое используется в театре, кино, телевидении, – сюжетная схема. В Web-дизайне значение термина «сценарий» отличается от традиционного значения этого слова.
Следует различать две принципиально различные группы сценариев (скриптов): JavaScript (VBSript) и CGI-скрипты.
Скрипты первой группы размещаются прямо в тексте программы, написанной на языке HTML. Для их составления используют два языка программирования: JavaScript и VBScript. Язык JavaScript поддерживается всеми современными браузерами. Скрипты, написанные на языке VBScript, работают только на браузерах MS Internet Explorer. Скрипты обрабатываются (интерпретируются) браузером одновременно с кодом HTML. В HTML-программах скрипты размещаются внутри контейнеров, которые обрамлены тегами <script> и </script>.
Самой характерной особенностью этих скриптов является то, что они выполняются на стороне клиента, т. е. в самом браузере.
Скрипты первой группы позволяют индицировать текущее время и дату, формировать бегущую строку с текстом (скроллинг), создавать мерцающие рамки, изменять оформление страницы в зависимости от времени суток, открывать новые окна, выполнять определенные команды через заданные промежутки времени.
Описать все возможности скриптов практически невозможно. Они создаются программистами непрерывно. Однако трудно удержаться и не упомянуть о следующих возможностях. Скрипты могут проверять правильность заполнения форм, менять картинки на странице, динамически варьировать вид кнопок при попадании на них курсора, создавать сетевые игры, вести математическую обработку данных.
Существенным недостатком скриптов первой группы является принципиальная невозможность записи данных с машины клиента на сервер.
Вторая группа скриптов – CGI-скрипты – организована значительно сложнее, чем первая группа скриптов. CGI-скрипты могут быть написаны
на различных языках программирования (чаще всего Perl, C++). Для их работы необходимо, чтобы на сервере был установлен интерпретатор соответствующего языка программирования.
Эти скрипты являются программами, исполняемыми на стороне сервера. Они должны располагаться на сервере отдельно от основного текста HTML-программы. Не все серверы допускают работу CGI-скриптов, так как существует потенциальная опасность «взлома» сервера с их помощью. Скрипты могут выполнять различные команды (в том числе и системные). Поэтому квалифицированный злоумышленник (кракер) может нарушить нормальную работу сервера.
Кроме того, существует опасность неумышленного нарушения нормальной работы сервера из-за неправильно спроектированного CGI-скрипта.
Работу этой группы скриптов должен поддерживать особый интерфейс. CGI (Common Gateway Interface) – специальный интерфейс (способ взаимодействия сервера и клиента), с помощью которого происходит запуск программ, расположенных на сервере.
За счет интерфейса CGI-программы (CGI-скрипты) исполняются на сервере по командам (запросам), поступающим от компьютера клиента. Результаты выполнения CGI-скриптов передаются на машину клиента в виде HTML-документа. По этой технологии создают гостевые книги, чаты, поисковые машины, виртуальные магазины. Эта технология позволяет осуществлять поиск в сетевых базах данных, а также запоминать на сервере информацию, поступающую с машины-клиента. Например, можно сделать запись в гостевой книге. Эта запись сохранится на сервере, и следующие посетители страницы смогут с нею ознакомиться.
Все CGI-скрипты хранятся на сервере в специальной папке, как правило, с названием cgi-bin.
Разработка сетевых технологий ведется несколькими фирмами в условиях жесткой конкуренции. Поэтому для каждого языка программирования и каждой технологии создаются альтернативные варианты.
Альтернативой для технологии CGI является язык ASP (Active Server Pages – активные страницы на сервере). Язык ASP разработан фирмой Microsoft и предполагает использование языка VBScript и элементов ActivX, которые созданы этой же фирмой.
Еще один язык – PHP (Personal Home Page tools) no назначению аналогичен языку ASP и также является альтернативой для CGI. Программы, написанные на РНР, выполняются на сервере, а результаты пересылаются клиенту в виде HTML-документа. Сами программы на РНР пишутся прямо внутри HTML-документа. После обработки страницы с помощью интерпретатора РНР вид страницы существенно меняется по сравнению с документом, хранящимся на сервере. Файлы, содержащие программы на РНР, должны иметь расширение .phtml или .php3.
Разработчиком языка РНР является Rasmus Lerdorf (1994).
Важными понятиями для объяснения принципа действия скриптов являются понятия: событие, объекты и методы.
Событие – это действие, производимое пользователем, в результате которого запускается скрипт (нажатие клавиши, пересечение курсором мыши гиперссылки, размещение курсора на гиперссылке, щелчок мышью, загрузка страницы в браузер и т. д.). Событие – это сигнал, по которому выполняется программа, подготовленная заранее программистом.
Объект – некоторый элемент с набором собственных свойств и методов (например, открытое окно).
Свойство – параметр объекта, который может быть изменен или считан (например, ширина окна).
Метод – функция, показывающая, какие действия производятся над объектом (например, закрыть окно).
Апплеты (applets) – программы, которые составляются на языке Java и хранятся на сервере отдельно от основного документа, написанного на языке HTML. В переводе с английского языка слово applet означает небольшое приложение. Таким образом, апплет (иногда пишут аплет) – это маленькое приложение (программа на языке Java), служащее для создания разнообразных визуальных эффектов на основной Web-странице. Можно заметить некоторое сходство Java-апплетов с CGI-скриптами (и те и другие хранятся отдельно от основного HTML-документа). Самое существенное их различие состоит в том, что Java-апплеты не позволяют сохранять на сервере информацию, подготовленную пользователем-клиентом.
По своему внешнему проявлению Java-апплеты похожи на сценарии, написанные на языке JavaScript. Однако скрипты располагаются прямо в тексте Web-страницы, а апплеты размещаются на сервере в виде отдельных файлов.
Вызываются апплеты из основного документа, написанного на языке HTML. В результате вызова апплеты считываются (скачиваются) с сервера и после проверки на корректность исполняются на компьютере-клиенте. При этом в браузере должны быть установлены соответствующие опции, разрешающие обработку Java-апплетов. В противном случае апплеты будут проигнорированы.
Достоинством языка Java является его независимость от используемой операционной системы и платформы (аппаратной части), на которой реализована ЭВМ. На этом языке можно создавать приложения, способные работать на компьютерах самых разных типов: Pentium, Macintosh, рабочих станциях Sun. Это достигается установкой на каждую ЭВМ виртуальной Java-машины (Java Virtual Machine – программный эмулятор). Эмулятор – это специальная программа, преобразующая инструкции для виртуальной машины (или байт-коды) в инструкции для конкретного процессора. Независимость языка Java от платформы (типа процессора и операционной системы) является одним из основных достоинств этого языка.
Технология создания и использования Java-апплетов следующая. Программист составляет программу на языке Java. Затем компилирует ее, превращая текст программы в байт-коды. Откомпилированная программа размещается на сервере в виде файлов Java-классов (с расширением .class).
Вызываются апплеты из HTML-документа с помощью опций, которые обрамляются дескрипторами <applet> и </applet>. Между этими тегами указываются параметры, с которыми осуществляется запуск апплета.
Рассмотрим еще одну полезную сетевую технологию Web-дизайна – SSI.
SSI (Server Side Include) с английского языка переводится так: включаемый на стороне сервера. Здесь имеется ввиду, что технология SSI позволяет добавлять в текст страницы дополнительные фрагменты, которые хранятся на сервере в отдельных файлах.
При рассмотрении технологии SSI слышны «знакомые мотивы», которые звучали при рассмотрении предыдущих технологий (CGI-скриты и Java-апплеты). Отличительной особенностью технологии SSI является то, что и основной текст Web-страницы, и добавляемый блок написаны на одном языке программирования – HTML.
Технологию SSI можно образно сравнить с конструированием игрушечных зданий из кубиков. Только здесь речь идет о проектировании сайта из заранее подготовленных фрагментов Web-страниц. Причем одни и те же кубики (блоки, файлы) можно вставлять на различные страницы сайта. Легко изменить внешний вид одинаковых элементов сразу на всех страницах сайта (скажем, вид элементов навигации или текст электронного адреса). Включение (добавление) дополнительных блоков происходит непосредственно при передаче текста Web-страницы от сервера к клиенту. По этой причине коды добавляемых блоков нельзя увидеть при просмотре страниц в виде HTML.
Изменив всего лишь один файл, дизайнер меняет внешний вид сразу всех страниц сайта. Таким образом, технология SSI позволяет легко «собирать», «конструировать» сайт, используя заранее подготовленные заготовки (блоки).
Web-страница, на которую производится вставка дополнительного блока, должна иметь расширение shtml (или shtm). Добавляемый файл в принципе может иметь любое расширение. Синтаксис вызова присоединяемого блока
Здесь navig.htm – имя добавляемого файла.
Не все серверы поддерживают технологию SSI. Для этого требуются специальные настройки, которые выполняет администратор сервера.
Технологии GIF и Flash дают возможность создать динамические картины (анимация и мультипликация) путем демонстрации быстро сменяющихся кадров (принцип кино).
Наверное, многим приходилось в детстве «создавать» собственные мультфильмы. Для этого на углах книги рисовали пляшущих человечков, причем на каждой странице изображали различную фазу движения. При быстром перелистывании страниц возникала иллюзия движения человечков.
Эта же идея используется в аниматорах: поочередно демонстрируются несколько тематически и композиционно связанных кадров, что вызывает иллюзию движения.
Если демонстрировать с достаточно большой скоростью показанную на трех рисунках букву, то возникнет иллюзия ее движения по диагонали сверху вниз. Чтобы движения были плавными, число промежуточных фаз движущихся объектов должно быть большим.
Web-страницы содержат типичные элементы, реализация которых осуществляется с помощью рассмотренных технологий. Элемент страницы – это та часть документа, которую пользователь наблюдает на своем браузере. Рассмотрим некоторые типичные элементы.
Текст – традиционная, наиболее информативная часть Web-страницы. Составляется на языке HTML. Нередко для создания документа используются текстовые редакторы. Это позволяет уменьшить число грамматических ошибок. Однако код HTML, сформированный текстовым редактором MS Word, характеризуется избыточностью (имеется большое число бессмысленно повторяющихся тегов).
Фрейм (frame) – некоторое выделенное в окне браузера поле в форме прямоугольника. Фреймы позволяют разделить страницу на несколько независимых окон. Каждый из фреймов является практически автономной Web-страницей. Фреймы часто используются для решения следующей задачи: в одном фрейме размещаются элементы навигации (с их помощью выбираются доступные Web-страницы), а во втором фрейме выводится содержимое выбранных страниц.
Таким образом, если пользователь активизирует гиперссылку в первом фрейме, то загружаемая страница появляется в соседнем (втором) фрейме. Достоинством фреймов является возможность независимого одновременного просмотра содержимого двух соседних окон. При этом если просматриваемый документ не умещается в окне, то у каждого окна может быть своя линия прокрутки (возможен скроллинг).
Фреймы формируются при помощи стандартного языка программирования HTML. Основными тегами являются <frameset> и <frame>. С помощью первого тега задают число и размеры фреймов, а с помощью второго тега – индивидуальные параметры каждого фрейма.
Форма – прямоугольная область на Web-странице, которая используется для ввода в нее информации, передаваемой на сервер или по указанному электронному адресу.
Внешний вид формы может быть сформирован при помощи различных технологий: средствами стандартного языка HTML, при помощи Java-скрипта или Java-апплета. Передача информации из формы на сервер должна осуществляться с помощью технологии CGI.
Гостевая книга (Guest Book) – программа, запущенная на стороне сервера (технология CGI) и позволяющая посетителям высказать свое мнение о содержании данного сайта или послать приветствие автору ресурса. Запись отзыва производится в специальную форму.
Счетчик посещений (Counter) – небольшая программа, функционирующая на стороне сервера и подсчитывающая количество обращений (заходов) к данной странице. Как правило, на этой странице находится графический индикатор, показывающий число посещений. Счетчик применяется для ведения статистического учета посещаемости страницы за определенный период времени. Работает счетчик с использованием интерфейса CGI.
Логотип – специально разработанная, стилизованная форма названия фирмы, часто в оригинальном начертании. Логотип может быть создан самыми различными способами: на стандартном языке HTML, в виде графического объекта (форматы GIF, JPEG, PNG), скрипта и даже апплета. На рисунке показан логотип виртуального Интернет-магазина Bolero.
