Сетевые технологии Web-дизайна - Основные понятия Web-дизайна

Основным средством создания Web-страниц в настоящее время является язык гипертекстовой разметки HTML.

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

Специальные добавки к HTML позволяют оживить неподвижные страницы (ввести мерцание, движущийся текст, обеспечить интерактивность - возможность передачи информации не только с сервера, но и на сервер и т. д.). Такими дополнениями к языку разметки HTML являются каскадные таблицы стилей CSS, скрипты, написанные на языке JavaScript или VBScript, апплеты, составленные на языке Java, CGI-скрипты - программы, для создания которых применяют языки Perl, C++, скриплеты, написанные на языке DHTML. Для создания движущихся надписей и рисунков используют GIF-и Flash-анимацию. Технологии AVI и MPEG позволяют вставлять видеоклипы. Имеются средства для озвучивания Web-страниц с помощью аудио-клипов, созданных в форматах WAV, MP3 и MIDI.

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

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

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

Для браузера MS Internet Explorer (в рамках языка DHTML) разработаны специальные программы, которые позволяют просто создать разнообразные эффекты: свечение текста, создание тени, смазывание, горизонтальное и вертикальное отражение текста, создание рельефного и гравированного изображений, инверсия цветов (цветной негатив) и др. Благодаря DHTML Web-страницы могут динамически изменяться при наступлении какого-либо события.

Программы, написанные на языке DHTML, называются DHTML-скриптами или скриплетами.

DHTML (Dinamic Hypertext Markup Language) - динамической язык разметки гипертекста. Конкурирующие фирмы Microsoft и Netscape вкладывают разный смысл в понятие "динамический HTML". Это часто приводит к тому, что одна и та же Web-страница по-разному выглядит при ее просмотре разными браузерами. По этой же причине существует некоторая путаница с определением самого понятия DHTML.

Сценарии (или скрипты) - программы, которые составляются на специальных языках программирования с целью расширения возможностей HTML. В качестве языков программирования используют JavaScript, VBScript. Java. Perl, C++ и др. Сценарии позволяют обрабатывать (peaгировать на) различные события (например, щелчок мышью, размещение курсора мыши на некотором объекте, нажатие клавиши). Ответной реакцией на произошедшие события становится изменение внешнего вида Web-страницы, пересылка данных от клиента на сервер и др. Слово Script в переиоле с английского языка означает "сценарий". Термины "скрипт" и "сценарий", которые используются в публикациях по Web-дизайну, являются синонимами.

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

Следует выделить две принципиально различные группы сценариев (скриптов): JavaScript (VBSript) и CGI-скрипты.

Скрипты первой группы размещаются прямо в тексте программы, написанной на языке HTML. Для их составления используют два языка программирования: JavaScript и VBScript. Язык JavaScript поддерживается всеми современными браузерами. Скрипты, написанные на языке VBScript, работают только на браузерах MS Internet Explorer. Скрипты обрабатываются (интерпретируются) браузером одновременно с кодом HTML. В HTML-программах скрипты размещаются внутри контейнеров, которые обрамлены тегами <script> и </script>.

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

Вторая группа скриптов - CGI-скрипты - организована значительно сложнее, чем первая группа скриптов. CGI-скрипты могут быть написаны на различных языках программирования (чаще всего PHP, 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. Разработчиком языка РНР является Rasmus Lerdorf. Программы, написанные на языке РНP, выполняются на сервере а результаты пересылаются клиенту в виде HTML-документа. Сами программы на РНР пишутся прямо внутри HTML-документа. После обработки страницы с помощью интерпретатора РНР вид страницы существенно меняется по сравнению с документом, хранящимся на сервере. Файлы, содержащие программы на РНР, должны иметь расширение phtml или. php3.

Важными для объяснения принципа действия скриптов являются понятия: событие, объекты и методы.

Событие - это сигнал, по которому выполняется программа, заранее подготовленная программистом.

Объект - некоторый элемент с набором собственных свойств и методов (например, открытое окно).

Свойство - параметр объекта, который может быть изменен или считан (например, ширина окна).

Метод - функция, показывающая, какие действия производятся над объектом (например, закрыть окно).

Апплеты (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. Для этого требуются специальные настройки, которые устанавливает администратор сервера.

Похожие статьи




Сетевые технологии Web-дизайна - Основные понятия Web-дизайна

Предыдущая | Следующая