ПРЕДИСЛОВИЕ

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

Слово «дизайн» в последние годы необычайно  девальвировалось. Лишь постепенно интернетовская публика начинает осознавать, что даже с приставкой

«веб-» это понятие отнюдь не является синонимом для языка HTML, сетево­го программирования на Java или компьютерной верстки. Поэтому в моей книге вы не найдете ни справочника по HTML, ни описаний последних версий Adobe Photoshop или Microsoft FrontPage. Самое трудное в любом деле — не как, а что, и вместо составления инструкций по тем или иным эффектам в той или иной программе я рассказываю о том, какие оформительские эффекты в принципе возможны, где они уместны и как воспринимаются зрителем.

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

Что здесь есть и чего здесь нет. Книга начи­нается с обзора основных технологий, имеющих отно­шение к веб-дизайну: текстовых кодировок, языков разметки (HTML и XML), способов представления графики (векторные и растровые форматы) и технологий Интернет- программирования (сценарии, модули и динамические стра­ницы).

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

Гораздо  систематичнее  подается в книге курс собственно визуального дизайна, начинающийся в гл. II с обзора аб­страктных материалов дизайнера (формы, цвета, текстуры, шрифта) и используемых в дизайне инструментов (контра­ста, баланса, динамики, нюансировки). Все эти понятия исследуются как в теории, так и в приложении к практике компьютерного и, в особенности, веб-дизайна. Вместе с тем веб-сайт как объект дизайна имеет множество особенно­стей, не выводимых из общих принципов и заслуживающих поэтому отдельной главы (гл. III). Наконец, ряд полудизай­нерских, полутехнических вопросов, связанных с созданием компьютерной графики, обсуждается в гл. IV.

Такая структура материала основана не на вычитанных где-то схе­мах, а исключительно на моем собственном опыте практического осво­ения, теоретического осмысления и последующего преподавания основ дизайна. Три центральные главы книги во многом построены на материале моих ежемесячных англоязычных статей, публикуемых на www.webreference.com/dlab/, — и, разумеется, на основе читательских откликов, вопросов, поправок и дополнений к этим статьям. Конечно, сюжет этого произведения не пытается повторять все зигзаги истории мо­его дизайнерского самообразования. Однако я старался, чтобы план книги как можно точнее соответствовал сложившейся у меня системе понятий и оценок.

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

Примеры. Как любой учебник, эта книга не могла обойтись без примеров обсуждаемых понятий и приемов дизайна. Возможно, кому-то покажется, что примеров этих маловато для книги такого объема. На это я могу возра­зить, что большинство примеров используются в тексте по нескольку раз, в каждом случае иллюстрируя что-то новое. Это и понятно: ведь любая реальная дизайнерская работа пользуется всем арсеналом средств, доступных ее автору, поэтому при внимательном анализе из нее можно извлечь очень много поучительного.

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

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

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

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

Соглашения. Кое-какие особенности верстки и ком­позиции книги, очевидно, требуют пояснения. Заголовки и подзаголовки идут в тексте без номеров, но снабжены

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

Все ссылки — на страницы, номера глав, URL-адреса и т. п. — выделены шрифтом и серым цветом. Ссылки вида «пример такой-то» относятся к одной из образцовых веб-страниц, собранных в «Галерее» в конце книги; если позволяет место, каждая ссылка на пример сопровождает­ся черно-белой копией обсуждаемой страницы на полях, а в «почти натуральную» величину все упомянутые в кни­ге сайты-примеры воспроизведены и пронумерованы  (частично на цветной вкладке). На цветную вкладку вынесены также несколько иллюстраций.

Кроме иллюстраций, заголовков и копий примеров, на полях изредка попадаются отдельные слова и фразы мелким шрифтом, — как правило, заготовленные в черновике кни­ги, но не нашедшие места в окончательном тексте и в то же время слишком удачные, чтобы от них отказаться. Вы можете относиться к ним, как вам больше нравится, — как к попыткам автора пошутить, еще одному уровню подзаголовков или просто удобному ориентиру для поиска нужного места в тексте методом «сканирования полей». Если все- таки местами поля будут казаться вам слишком пустыми — не стесняйтесь заполнять их своими собственными мыслями и комментариями!

Пара слов о словах — точнее, об используемых терминах. Не один раз мне приходилось придумывать русские названия для вещей, до сих пор существовавших только по-английски (кстати, все переводные термины обязательно сопровождаются английскими оригиналами в скобках), а ино­гда и вводить обозначения для своих собственных понятий и принципов. Я старался избегать обеих крайностей — и неудобоваримого, в советском сти­ле официоза (вроде «программное обеспечение» или «узел системы WEB»). и сетевого сленга («мэйл», «хомепага», «чат»), одинаково раздражающего как не знающих английского вообще, так и знающих его хорошо. Вместе с тем я охотно пользовался словечками вроде «скачать», «промотать» и даже «залинковать», привлекательными краткостью и выразительностью русской морфологии (хотя иногда в сочетании с нерусским корнем). Во­обще, способ рассказать о чем угодно на правильном и стилистически нейтральном русском языке существует всегда, нужно лишь не лениться поискать его.  Одно из главных технических понятий в этой книге — компьютерная программа для путешествий с сайта на сайт и просмотра веб-страниц — по-русски пишется двояко: браузер либо броузер.  Я придерживаюсь второго варианта, который хотя и менее правилен с точки зрения произноше­ния английского «browser», все же лидирует по количеству употреблений в русскоязычных интернетовских текстах (статистика получена с помощью поисковых систем). Я также хочу заранее попросить прошения у тех, кому могут не понравиться выражения вроде «оба броузера» или «только в одном из броузеров»,

— относящиеся, само собой, к программам фирм Netscape и Microsoft. В книге, посвященной не Интернету в целом, а лишь визуальному веб-дизайну для массовой аудитории, я счел возмож­ным ограничиться этими двумя самыми распространенными графическими броузерами, вполне сознавая их неидеальность и неединственность. Что же касается тех людей, которые броузерами пользуются, то для них (если не считать изредка встречающихся метафор типа «посетители сай­та», «жители Интернета» и т.п.) мне пришлось принять диковатую кальку «пользователи», — которая, как мне кажется, при всей своей нерусскости все же элегантнее давно уже ставших привычными этажерок вроде «телезрители» или «радиослушатели».

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

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

веб-дизайне (но, возможно, еще не приступавшим даже к освоению компьютера).

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

Дизайнера делают не книги, а его собственный талант и трудолюбие. Однако кое в чем, надеюсь, сможет помочь вам и эта книга — обобщение дизайнерского опыта, са­мим автором почерпнутого из практики, а не из книг или уроков.

Сверим часы. Есть, впрочем, еще несколько обяза­тельных условий для успешной веб-дизайнерской практики. Поскольку опыт большинства моих читателей, вероятно, ограничивается пока созданием страницы для себя или сво­ей фирмы, я начну с очевидного. Прежде чем приниматься за работу, ответьте честно сами себе: действительно ли у вас есть что сказать миру? Будет ли у вашей страницы достаточ­но посетителей, которым не придется жалеть о потерянном времени? Бессмысленные и бессодержательные сайты пло­хи не столько сами по себе (в конце концов, заходить на сайт или нет — личное дело каждого), сколько тем, что они снижают планку стандартов, «развращают» даже вполне талантливых сетевых журналистов, писателей и дизайнеров, которым уже не приходится прилагать больших усилий, чтобы блистать на таком фоне.

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

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

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

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

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

англо­язычного веб-дизайна во всей их полноте.

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

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

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

Собственно говоря, статический сайт средних размеров вполне под силу

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

Свободное владение не только графическими инструмен­тами, но и HTML и JavaScript входит в обязанности веб-дизайнера, хотя в крупных фирмах разделение труда может пойти еще дальше: один делает набросок дизайна, а другой реализует его в HTML. Не соблазнитесь только слишком де­шевыми «дизайнерскими» услугами, предлагаемыми обычно фирмами-провайдерами и состоящими только в перегонке предоставленного вами материала в HTML, иногда (и даже за отдельную плату!) с украшением его парой графиче­ских заголовков или картинок из коллекции бесплатной веб-графики .

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

Хорошее дизайнерское портфолио может быть небольшим, но составляющие его работы должны быть тщательно подобраны, прокомментированы и качественно оформлены: если дизайнер не заботится о том, чтобы красиво подать результаты своего труда, особой тщательности в работе для заказчика от него ожидать также не приходится. Стоит спросить у дизайнера контактные адреса его бывших клиентов и произвести среди них небольшой опрос, чтобы выяснить степень их удовлетворенности сотрудничеством с дизайнером, его ответственностью и пунктуальностью. Что же можно сказать о второй неизвестной в уравнении — цене? Мне не хочется приводить здесь даже приблизительную стоимость дизайна среднего сайта, так как из-за незрелости рынка разброс цен превосходит всякое разумение, и любая названная мною цифра неизбежно навлечет на меня гнев как тех дизайнеров, кто берет (или хотел бы брать) за свою работу больше, так и тех, кто ценит свои услуги дешевле. Отмечу только один любопытный момент. Вероятность прочитать на сайте западного дизайнера о стоимости его услуг, пусть даже с оговорками о приблизительности и предварительности любых цифр, тем меньше, чем дороже он ценит свои услуги и, как правило, чем выше их качество. У российских

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

Среди множества причин, заставивших меня взяться Обо мне за эту книгу, не на последнем месте стояло желание доказать себе и другим, что на почти компьютерную тему и на русском языке все-таки возможно написать хорошую книгу. Книгу, в которой не будет пошаговых инструкций, устаревающих с выходом следующей версии программы. Книгу, которую можно читать — и писать! — не торопясь и с удовольствием. Книгу, автор которой знает больше, чем рассказывает, и потому рассказывает связно и интересно — но который, с другой стороны, сам дошел до всего, о чем он пишет, и потому знает, что такое настоящее понимание (один из ранних вариантов названия книги — «Понятный HTML», по аналогии с другой моей книгой

 — «Понятный Интернет») и чем оно отличается от бессодержательной болтовни на модную тему.

Компьютерные книги — особые и в том, как они пишутся, и в том, как читаются. Странный анахронизм в «почти безбумажную» эпоху, этот жанр существует еще слишком недолго, чтобы можно было сказать с уверен­ностью — наследуют ли компьютерные книги хоть что-то, кроме чисто внешних черт сходства, у книг «обычных»? Лет через 50, когда все эти торопливые описания быстро созданных и быстро и навсегда забытых про­грамм будут громоздиться пыльными пожелтевшими грудами, сохранят ли они — не ценность, о нет, но хотя бы способность вызывать умиление, же­лание раскрыть их и перелистать? Мне остается лишь гадать — и стараться сделать в меру моего разумения так, чтобы книга эта, если и не достигла полной свободы от преходящего и сиюминутного (это невозможно), все же несла бы в себе максимум вневременных ценностей.

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

Почему эта тема? Конечно, потому, что я — дизайнер и знаю это ремесло лучше других. Однако ответ не настолько прост. Почему я стал дизайнером, хотя до знакомства с компьютерами и Интернетом никогда не предполагал, что выберу именно эту профессию? Еще ближе к сути будет другая формулировка этого вопроса

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

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

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

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

Отсюда и мое особое отношение к предмету изложения. Я ощущаю себя не потребителем, пассивным зрителем или «пользователем», но деятелем и делателем, в какой-то мере ответственным за то, каким будет Интернет завтрашнего дня. Чтобы разделять это мое отношение, не обязательно быть дизайнером или писателем

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

Сам себе Гутенберг. Остается добавить пару слов о том, как делалась эта книга. «Делалась» — не фигура речи; мне здесь принадлежит не только текст, но и все остальное: идея и план, текст и иллюстрации, дизайн и верстка. Если к тому же учесть, что концепция книги не раз кардинально менялась, отражая мои меняющиеся воззрения и интересы, то неудивительно, что от первых набросков текста до тиража прошло больше двух лет — срок для компьютерной книги огромный.

Какие-то из материалов выходили в виде статей в журналах и в Интернете, кое-что рождалось в частной переписке или в дискуссиях. Многое переводилось с русского на ан­глийский или наоборот. Кое-что устаревало, отбрасывалось или опровергалось опытом или размышлениями. Некото­рые части пухли как на дрожжах, рост их приходилось даже сдерживать; другие, наоборот, вымучивались медленно и с трудом. Развитие книги еще далеко не закончено, и я рассчитываю на то, что в будущих изданиях смогу  использовать, помимо прочего, критику и отклики моих чи­тателей. Пишите мне по адресу: dmitry@kirsanov.com.

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

Весь текст книги набирался в консольном текстовом редакторе Aurora (www.ntext.net) с одновременным внесением разметки в нотации си­стемы ТЕХ (www.tug.org). Кроме автоматического контроля право­писания спелл-чекером Ispell 3.1.20 (ficus-www.cs.ucla.edu/ficus- members/geoff/ispell.html) и многократной вычитки автором и корректором, текст был с большой пользой обработан программой Fresh Eye 1.21 (www.kirsanov.com/fresheye/). Схематические ил­люстрации, обложка и часть цветной вкладки делались в программе CorelXARA 2.0 (www.xara.com) и, как и снимки экрана, сохранялись в формате EPS. Стилевой ТЕХ -файл с макроопределениями был создан в самом начале работы, так что большая часть верстки делалась парал­лельно с писанием текста и созданием иллюстраций. Для компиляции ТЕХ -файлов использовался emTeX v. 3.14159 [4b]

(www.ctan.org/tex- archive/systems/msdos/emtex/) со слегка модифицированным форматом на основе  LATEX 2.09

(www.latex-project.org); dvi-файлы сразу же переводились в PostScript с помощью dvips 5.76 (www.radicaleye.com/dvips.html). Промежуточные гранки просма­тривались в Aladdin GhostScript 5.10 (www.cs.wisc.edu/~ghost/) с GSView 2.4 (www.cs.wisc.edu/~ghost/gsview/) и печатались на принтере HP LaserJet 5 с разрешением 600 dpi; окончательный макет (раз­мером около 1 Мб в виде ТЕХ -файлов и свыше 60 Мб в формате PostScript) был напечатан на принтере Lexmark Optra R+ с разрешением 1200 dpi. Лю­бопытные могут ознакомиться со стилевым ТЕХ -файлом и образцом верст­ки фрагмента книги по адресу www.kirsanov.com/web.design/.

 

 

ТЕХМИНИМУМ.

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

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

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

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

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

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

 

 

Кодировки текста.

Отказавшись от пре­тендующего на всеохватность изложения «от теории к прак­тике» и «от простого к сложному», я сразу же попал во власть встречных течений, то и дело отбрасывавших меня назад: «Об этом писать нельзя, пока не объяснено то, а перед этим обязательно нужно рассказать и о том».

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

В общем случае кодировка (encoding), или кодовая табли­ца, — это однозначное соответствие между подмножеством целых чисел (как правило, идущих подряд) и некоторым набором символов. Ключевым здесь является понятие сим­вола. Символ может быть буквой (а может и не быть), может соответствовать звуку речи (а может и не соответствовать) и может быть представлен графическим знаком (но может обходиться и без какого бы то ни было видимого образа). Символ — это атом смысла, мельчайшая неделимая частица информации. Так, латинское «А» и кириллическое «А» —  это разные символы, потому что они употребляются в разных контекстах и несут в себе разную информацию.

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

ASCII.  Однако прежде чем переходить к восьмибитным кодировкам, нужно сказать несколько слов о кодировке под названием ASCII (American Standard Code for Information Interchange) — кодировке также восьмибитной, но охваты­вающей только 128 символов и потому довольствующейся семью значимыми битами (старший, восьмой бит при этом всегда равен нулю). Важность этой кодировки, включающей латинский алфавит, цифры и основные знаки пунктуации, необычайно велика: почти все остальные (большие по раз­меру) кодировки совместимы с ней, т. е. размещают на своих первых 128 знакоместах те же самые символы в том же порядке.

Первые 32 позиции в кодировке ASCII заняты так назы­ваемыми управляющими символами (control characters), пред­назначенными не для передачи собственно текстовой ин­формации, а для управления устройством, читающим (или получающим по линии связи) текстовый файл. Лишь немно­гие из этих символов

 — возврат каретки, перевод строки, табуляция — до сих пор используются в

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

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

Хронологически одним из первых стандартов кодирования русских букв на компьютерах был КОИ8 («Код обме­на информацией, 8-битный»). Эта кодировка применялась еще в доисторические советские времена на компьюте­рах ЕС ЭВМ, и когда в середине 80-х появились первые русифицированные версии операционной системы UNIX, они унаследовали эту кодировку у своих «предков». Сеть Редком, открывшая в начале 90-х эпоху российского Интер­нета, в те годы состояла в основном из компьютеров с UNIX и потому также приняла кодировку КОИ8 в качестве стандартной. В результате КОИ8 является сейчас единственно допустимой кодировкой в русскоязычной электронной по­чте и телеконференциях Usenet и одной из кодировок, которые обязательно должна поддерживать любая русская веб-страница.

Вторая по значению в русском Интернете (и, безусловно, первая по употребимости на персональных компьютерах) кодировка — это стандартная кириллическая кодировка Microsoft Windows, обозначаемая аббревиатурой СР1251 («СР» расшифровывается как «Code Page», «кодовая стра­ница»). Все

Windows-приложения, работающие с русским языком, обязаны понимать эту кодировку без перевода. Благодаря распространенности Windows кодировка СР1251, вместе с КОИ8, входит в абсолютный минимум кодировок, которые приходится поддерживать русскоязычным сайтам.

Реликтом эпохи MS DOS остается так называемая «альтер­нативная» кодировка, в терминологии фирмы Microsoft — кодировка СР866. И хотя в Интернете компьютеры с MS DOS — большая редкость, кодировка эта сохра­няет определенный авторитет благодаря тому, что она принята в качестве стандартной в операционной системе OS/2 и в некоммерческой сети Фидо. Поэтому изредка можно встретить сайты, предлагающие посетителям в ка­честве одного из вариантов и альтернативную кодировку MS DOS.

Однако первой фирмой, выпустившей русифицированную операционную систему, была все-таки не Microsoft, a Apple. И разумеется, русифицированные Макинтоши, появивши­еся в конце 80-х, имели свою собственную, ни с кем не

совместимую кодировку кириллицы. Хотя в нашей стране компьютеры этой марки так и не приобрели популярности, сравнимой с их популярностью на Западе, в Сети можно встретить и кириллическую кодировку для Макинтошей.

Так и срослось.  Зачем, однако, вообще понадобилось создавать разные кодировки для одного и того же алфавита? Помимо соображений кон­куренции, вообще способствующих появлению несовместимых решений, изобретателями кодировок в первую очередь двигал чисто практический расчет. Как правило, еще до того, как операционная система русифици­руется, за символами из верхней половины таблицы ASCII (с кодами от I28 до 255) уже закреплено то или иное употребление, и чтобы разместить в этом же диапазоне кириллический алфавит, приходится чем-то жертвовать. Разумеется, наименее ценные кодовые позиции, замещение которых нанесет меньше всего ущерба функциональности системы, в каждом слу­чае свои, и чаше всего необходимые для полного набора кириллицы 66 знакомест (включая букву «ё», которая традиционно выносится за пределы основного алфавита) не удается расположить подряд. Этим и объясняет­ся тот факт, что ни в одной из кодировок, кроме ISO 8859-5 и Unicode, русские буквы не идут сплошным блоком. В некоторых кодировках допус­каются даже отклонения от алфавитного порядка — в частности, в КОИ8 расположение русских букв определяется, как это ни смешно, алфавитом тех латинских букв, которые на клавиатурах советского производства рас­полагались на одних клавишах с соответствующими буквами кириллицы: например, буква «Ю» стояла на одной клавише с символом «@», идущим в ASCII перед латинской «А», и потому стала в КОИ8 «первой буквой алфавита».

Семейство 8859.  Похожая ситуация с конкурирую­щими платформами и операционными системами и, как следствие, с конкурирующими несовместимыми кодировка­ми наблюдается и в других языках, пользующихся своим собственным алфавитом или даже латинским алфавитом с расширениями. Международная организация по стан­дартизации (International Standards Organization, ISO) попыталась навести порядок в восьмибитных кодировках, создав серию кодировок ISO 8859, расширяющих таблицу ASCII для латинских букв с диакритикой и лигатур (кодировка ISO 8859-1), кириллицы (ISO 8859-5), арабского (ISO 8859-6), греческого (ISO 8859-7), иврита (ISO 8859-8) и других алфавитов.

Если кодировка ISO 8859-5 для кириллицы так и не при­жилась, первая из этой серии — кодировка ISO 8859-1, известная также под именем Latin-1, — сумела стать об­щепринятым стандартом для кодирования «расширенной» латиницы. В эту кодировку включены почти все симво­лы, употребляющиеся в письменностях западноевропейских  языков — французского, немецкого, испанского и т.д.        

По аналогии с ASCII первые 32 позиции во второй половине кодировок серии ISO 8859 (коды со 128 по 159 включи­тельно) объявлены «неиспользуемыми». На сей раз, однако, производители программ решили обойти этот запрет. Так, большинство шрифтов для Windows соответствуют кодиров­ке ISO 8859-1 начиная с позиции 160 до конца таблицы, но в диапазоне 128—159 размещают некоторые дополнительные символы (в частности, длинное тире и символ «торговой марки». Поскольку HTML обязан соответство­вать стандарту Latin-1 (а начиная с версии 4 — Unicode), числовые подстановки  не могут ссылаться на коды из этого диапазона.

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

В 1991 году была предпринята попытка создать единую уни­версальную двухбайтовую кодировку, охватывающую все алфавиты и иероглифические системы мира. Результатом стал стандарт под названием Unicode, покрывающий не только системы письменности всех живых и большинства мертвых языков мира, но и множество музыкальных, мате­матических, химических и прочих символов. Хотя массовое применение Unicode в документах и программах остается делом будущего, для веб-дизайнера эта кодировка имеет особое значение, так как именно она объявлена «стандарт­ной кодировкой документа» в HTML начиная с версии 4 .

ISO 10646 и UTF-8. Предвидя неизбежное рано или поздно исчерпа­ние и двухбайтового кодового пространства (пока еще до этого далеко, так как около 30% кодов в Unicode до сих пор не заняты), ISO уже застолбила стандарт четырехбайтовой, совместимой с Unicode кодировки под названием ISO 10646. Пока что вместо этого обозначения, которое то и дело попадается в стандартах, вы можете с чистой совестью подста­влять «Unicode», так как никаких новых символов, выходящих за границы совпадающих с Unicode первых 65536 знакомест, в ISO 10646 еще не определено.

По-видимому, в ближайшее время все более важную роль будет играть особый формат Unicode (и ISO 10646) под названием UTF-8. Эта «про­изводная» кодировка пользуется для записи символов цепочками байтов  различной длины (от одного до шести), которые с помощью несложно­го алгоритма преобразуются в Unicode-коды, причем более употребитель­ным символам соответствуют более короткие цепочки. Главное достоинство этого формата — совместимость с ASCII не только по значениям кодов, но и по количеству бит на символ, так как для кодирования любого из первых 128 символов в UTF-8 достаточно одного байта (хотя, например, для букв кириллицы нужно уже по два байта).

 

 

HTML.

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

Текстовая часть любой веб-страницы теснейшим образом переплетена с управляющими конструкциями языка HTML, невидимыми сами по себе, но определяющими внешний вид и размещение всех остальных элементов страницы. Таким образом, в первую очередь HTML выполняет роль «скелета» страницы и сайта в целом — на HTML-разметку нанизываются текст, изображения, ссылки, интерактивные элементы и вообще все, что только может быть отображено в окне броузера. Лишь «по совместительству» HTML-файл содержит в себе еще и собственно текстовую часть стра­ницы.

История.  Давайте для начала проследим короткую, но необычайно насыщенную историю HTML — языка, в котором столкнулись противоположные (и, в идеале, взаимодопол­няющие) подходы к проблеме представления информации в компьютере и который стал в последние годы ареной сотрудничества и противоборства основных действующих лиц «компьютерного театра».

В начале был SGML. Начало истории HTML следует отнести к далекому 1969 году, когда Чарльз Гольдфарб, ра­ботавший тогда в компании IBM, создал прототип языка для разметки технической документации, впоследствии назван­ного GML, а с приданием ему в 1986 году статуса между­народного стандарта — SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки лю­бых разновидностей текстов. Слово «структурная» означает, что управляющие коды, вносимые в текст при такой

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

Создатели SGML стремились полностью абстрагироваться от проблем представления текста в разных программах, на разных компьютерных платформах и устройствах вывода. Хотя формально ничто не мешает записать средствами SGML любую информацию об элементах документа — в том числе и параметры его форматирования (например, шрифт Times полужирного начертания кегля 12 пунктов для за­головков), — идеология этого языка требует ограничиться указанием на уровень заголовка и его место в иерархической структуре документа. Все остальное должно быть вынесено в так называемые стилевые спецификации — совершен­но отдельный и, как принято выражаться, ортогональный (т. е. допускающий независимое изменение) по отношению к структурной основе информационный «слой».

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

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

Прикладная философия.  Разделение «содержания» и «представле­ния» как двух независимых аспектов информации — идея не особенно новая. Как и другие абстрактные противопоставления, до недавнего време­ни она оставалась чисто философской концепцией, не имевшей никакого выхода на практику. Вспомним, однако, что задолго до того, как фи­лософия смогла сделать свои первые шаги, способность к абстрактному мышлению и поаспектному анализу вещей и явлений должна была воз­никнуть и оформиться в языке. Лингвистам известно, что у языков, нахо­дящихся на начальных стадиях развития, зачастую отсутствует способность к разделению абстрактных аспектов явлений — такой язык может иметь самостоятельное слово для «падающего снега» при полном отсутствии слов для понятий «падать» и «снег» по отдельности. Очевидно, невозможность сказать что-то отражает и невозможность это помыслить. К чему я заговорил о языке? Дело в том, что история развития абстракт­ного мышления в целом — хороший аналог происходящему на наших глазах медленному и трудному процессу вычленения и очищения аспек­тов компьютерного представления информации. До сих пор подавляющее большинство текстов создаются и хранятся в «фирменных», ориентирован­ных на визуальное представление форматах вроде MS Word, — которые, как языки первобытных племен, неспособны отделить «существительное» содержимого документа от «прилагательного» его представления в той или иной среде.

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

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

Именно таким синтаксисом и является язык SGML. Теперь мы можем мыслить содержание и оформление как две не только потенциально, но и реально отдельные друг от друга сущности именно потому, что компьютер позволяет нам «высказать» их по отдельности. Важно отметить, однако, что SGML не есть инструмент для разделения содержания и представления, а всего лишь удобное средство хранения уже возогнанной и очищенной структурированной информации. Само же вычленение структуры — в лю­бом случае задача человека: как и язык, компьютер не может мыслить сам, а лишь помогает мыслить человеку.

Не менее важно и то, что в SGML нет никакой изначальной склон­ности к «содержанию» в ущерб «оформлению»; единственное требование к информации, сохраняемой средствами SGML, — это ее структурирован­ность. В виде иерархической структуры вложенных друг в друга элементов вполне можно представить не только содержимое документа, но и набор относящихся к нему правил и параметров оформления (как это и сдела­но в языке XSL). Собственно говоря,

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

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

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

Золотой век.  Принципы, на которых строится язык SGML, значительны и интересны; несомненно, идеология языка оказала влияние на многие компьютерные разработ­ки. Однако сам по себе SGML не получил сколько-нибудь заметного распространения до тех пор, пока в 1991 г. со­трудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых до­кументов. Этот язык — самое известное из приложений SGML — был назван HTML (HyperText Markup Language, «язык разметки гипертекста»).

Изначально HTML, как и положено SGML-приложению, разделял все особенности идеологии SGML. Из сорока с небольшим тегов HTML версии 1.2 (датированной июнем 1993 г.) всего три, да к тому же и не рекомендованных к использованию, тега осмеливались намекать на физические параметры представления документа. Вся разметка была чисто логической, и лишь в описательной части стандарта, сопровождающей формальное определение тегов, можно было прочесть что-нибудь вроде «в графических броузе­рах действие этого тега может передаваться курсивным начертанием».

Первым же (и единственным в те далекие времена) графи­ческим броузером была программа Mosaic, разработанная, как и сам WWW, в научном учреждении

 — Национальном центре суперкомпьютерных приложений США (NCSA). Так что нет ничего удивительного в том, что в этот «золотой век» никаких противоречий между официальными стандартами и их реализацией в броузерах еще не существовало. HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась подго­товка спецификации следующей версии языка — 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium, сокращенно W3C), перенявший от CERN верховную власть и авторитет в мире WWW.

В настоящий момент консорциум, имеющий статус «меж­дународного и некоммерческого», объединяет свыше 150 организаций-членов, в том числе фирмы Netscape, Microsoft и множество других. Однако в 1994—1995 гг. его членами были почти исключительно университеты и научные учре­ждения. Столь академический состав W3C сказывался как на самих документах, публикуемых консорциумом, так и на процедуре (и особенно на сроках) их принятия. Достаточ­но сказать, что спецификация HTML 2.0, единственным серьезным усовершенствованием в которой был механизм форм для отсылки информации с компьюте­ра пользователя на сервер, была окончательно утверждена лишь в сентябре 1995 г., когда в W3C уже полным ходом шло обсуждение HTML 3, — или, как его называли поначалу, «HTML+».

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

Противоречие это было разрешено опять-таки в полном соответствии с идеологией SGML: W3C ввел в HTML 3 поддержку так называемых иерархических стилевых специ­фикаций (CSS). Система CSS формально неза­висима от HTML, имеет совершенно иной синтаксис, не наследует никаких идеологических ограничений и позволя­ет, уже в совершенно иных терминах, задавать параметры графического (так же как и текстового, звукового и какого угодно другого) представления для любого тега HTML.

Нет сомнения, что CSS — почти идеальный способ изба­вить HTML от наследственных дефектов и перевести его развитие на принципиально новые рельсы. Тем досаднее то, как сложилась судьба этого замечательного изобретения. Поскольку спецификацию CSS увязали с другими нововве­дениями HTML 3, W3C долго не утверждал ее в качестве официального стандарта; задерживалось и доведение ее до более или менее завершенного вида, при котором стала бы возможной реализация CSS в коммерческих продуктах.

Идолы рынка. А между тем коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г. группа разработчиков броузера Mosaic основала корпора­цию Netscape Communications и вскоре выпустила первую версию коммерческого броузера Netscape (начиная с вер­сии 2.0 — Netscape Navigator, а с версии 4.0 — Netscape Communicator). С этого момента начался экспоненциаль­ный рост WWW, продолжающийся по сей день. Чтобы закрепить лидерство (на которое, впрочем, тогда еще мало кто покушался) и привлечь новых пользователей, Netscape вводила в HTML все новые и новые усовершенствова­ния, — поддерживаемые, разумеется, только броузером Netscape.

Практически все новые теги, без устали изобретаемые Net­scape, были направлены на улучшение внешнего вида до­кумента и расширение возможностей его форматирования. Причины понятны: чтобы убедить, скажем, бизнесмена, что ему пора обратить внимание на некую новую технологию, прежде всего нужно показать ему ее в привлекательном, «товарном» виде. Поставив себе целью завоевание корпора­тивного рынка, разработчики из Netscape не могли (да и не хотели, по-видимому) уделять должное внимание сложив­шимся традициям развития языка. В результате тот вариант HTML, который поддерживала выпущенная в начале 1996 г. версия Netscape Navigator 2.0, представлял собой довольно странную смесь старых логических тегов с беззастенчиво вломившимися новыми, ориентированными на графическое экранное представление документа и затрудняющими его воспроизведение на других устройствах вывода.

Бяки и буки. Такая политика компании, с одной сто­роны, принесла ей быстрый и впечатляющий успех (одно время версии Netscape Navigator составляли более 90% всех используемых броузеров), а с другой — вызвала ожесточенное сопротивление наиболее сознательной ча­сти HTML-сообщества. Энтузиасты неустанно разъясняли и разъясняют каждому, кто согласен их слушать, что HTML по природе своей не имеет права зависеть от какого-то конкретного броузера и что заявления типа «эту страницу лучше всего смотреть в Netscape Navigator» являются просто насмешкой над здравым смыслом.

Помимо использования «плохих» Netscape-ориентированных тегов, широко распространена также практика «зло­употребления» средствами HTML ради сопутствующих им  визуальных эффектов. Скажем, вместо того чтобы использо­вать тег TABLE только для оформления «настоящих» таблиц, веб-дизайнеры сплошь и рядом применяют таблицы без рамок для построения графического «каркаса» страницы (стр. 234). Нет нужды объяснять, что оформление в ви­де таблицы того, что по сути своей таблицей совсем не является, есть прямое нарушение идеологии структурной разметки.

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

Те же и Microsoft. В конце 1995 г. ситуация в ми­ре HTML была довольно смутной. Популярность броузера Netscape неуклонно росла; программисты этой фирмы гото­вили к выпуску версию 2.0, которая должна была утвердить господство Netscape на вечные времена благодаря не­слыханному набору новшеств (интерфейс подключаемых модулей, поддержка Java-апплетов, встроенный язык сце­нариев JavaScript, возможность разбивки окна на фреймы и многое другое). К этому времени W3C окончательно завяз в своем проекте HTML 3, который был слишком сильно оторван от реальности и на завершение которого у консор­циума попросту не хватало ни сил, ни средств. HTML 3 по сравнению с HTML 2.0 был важным шагом вперед, однако он развивался по-прежнему в рамках идеологии структурной разметки, а инструмент, дающий возможность выйти за эти рамки, — система CSS — был еще далек от завершения.

В этот переломный момент в игру вступил новый участ­ник — корпорация Microsoft. Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка, недооценивала перспективы Интернета и не собиралась как-либо участвовать в развитии этой информационной среды. Однако невероятный взлет Netscape (число копий броузера Navigator измерялось к этому времени уже десятками миллионов) заставил Microsoft изменить свое мнение.

И именно на броузерном фронте, где господство Netscape оставляло меньше всего шансов конкурентам, корпорация Microsoft нанесла свой главный удар. Поначалу мало кто верил, что броузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял собой ничего выдающегося, сможет составить конкуренцию Netscape. Тем не менее выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все расширения Netscape, вызвала настоящий бум и очень быстро утвер­дилась в качестве «второго главного броузера». Сейчас Microsoft и Netscape делят рынок броузеров почти поровну, и окончательный исход их битвы не берется предсказать никто.

Несколькими ловкими ударами поставив свой броузер на один уровень с казавшимся некогда непобедимым Netscape, корпорация Microsoft, оче­видно, не собирается останавливаться на достигнутом. Но еще интереснее то, что Microsoft при этом пытается создать для себя новый имидж — компании, поддерживающей независимые организации вроде W3C и забо­тящейся об авторитете официальных стандартов не меньше, чем о своей выгоде. На этом фоне Netscape, еще недавно имевшая репутацию главного генератора идей и технологического локомотива всей  Интернет-индустрии, начинает казаться слишком закрытой, негибкой и эгоистичной в своих на­мерениях. В действительности же стратегия Microsoft (как и незадолго до этого Netscape) заключается в том, чтобы, объявив официально о поддержке какого-то открытого стандарта, немедленно «улучшить» его расширениями, поддерживаемыми только в продуктах Microsoft, добиться признания этих расширений де-факто частью стандарта — и тем самым установить кон­троль как над самим стандартом, так и над соответствующим сегментом рынка.

Очевидно, чувствуя потерю инициативы, корпорация Netscape решилась весной 1998 г. на беспрецедентный шаг — опубликовала исходные тексты своего броузера на сайте www.mozilla.org и пригласила всех желаю­щих программистов и тестеров принять на некоммерческой основе участие в подготовке следующей версии. Как это ни странно, именно работаю­щие из чистой «любви к искусству» энтузиасты создали многие свободно распространяемые и пользующиеся притом огромной популярностью про­граммы (в их числе даже целая операционная система — Linux), и Netscape явно не прочь подзарядиться новыми силами и идеями из этого неис­черпаемого и почти бесплатного источника. По некоторым сведениям, не коммерческих конкурентов, а именно «открытые» программы со свободно распространяемым исходным кодом Microsoft считает главной угрозой для своего могущества.

Три, четыре... Одновременно с разработкой конкурен­тоспособного броузера Microsoft решила «навести порядок» и в мире HTML. Взяв под свою опеку W3C, она напи­тала его денежными и людскими ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации. Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2, который, по сути, всего лишь описывает большинство расширений Netscape (с тем же успехом их можно назвать теперь «рас­ширениями Microsoft»). Пройдя обычный в W3C процесс обсуждения и внесения поправок, спецификация HTML 3.2 была утверждена в январе 1997 года. Спираль развития  HTML завершила свой первый виток — как и в «зо­лотой век», расхождения между предписаниями стандарта и реализацией HTML в броузерах вновь были сведены к минимуму.

В декабре того же 1997 г., с принятием стандарта HTML 4.0, маятник, похоже, качнулся уже в обратную сторону — наряду с дальнейшим обогащением репертуара визуальных тегов, эта версия ввела немало пусть и не вполне «ло­гических», но очень важных расширений для поддержки многоязычных документов (стр. 32) и обеспечения доступ­ности документа в разных средах (стр. 34). Кроме того, в HTML 4 наконец-то прямо в тексте стандарта четко проведено разделение логических и визуальных тегов (по­следние объявлены «нерекомендованными», «deprecated»). Кстати, объем спецификации HTML 4 (которую я советую прочесть всем, кто имеет хоть какое-то отношение к веб- дизайну) в несколько раз больше, чем у 3.2, в основном не за счет описания новых тегов, а благодаря гораздо бо­лее подробному обоснованию целей и идеологии языка — так, в спецификацию включен даже краткий курс SGML и разбор HTML DTD.

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

— ведь в мире накоплено огромное количество ресурсов, жестко привязанных к этому языку. Очень хочется надеяться на то, что наследником HTML станет XML (стр. 47)

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

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

Синтаксис.  Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками — операторами, выражениями, переменными. С этой точки зрения язык HTML крайне прост, чтобы не сказать

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

Важно понимать различие между тегами — единицами разметки и элементами

 — составными частями документа. Теги, во-первых, разделяют исходный неформатированный текст документа на элементы, а во-вторых, создают новые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты). Со­ответственно, и сами теги бывают двух видов — парные, охватывающие какой-то фрагмент текста и/или другие теги, и стоящие в одиночестве непарные:

<парный-тег>текст или другие /теги</парный-тег>

<непарный-тег>

Парные теги должны вкладываться друг в друга без пересе­чений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А. Особый подкласс составляют парные теги с игнорируемым содержимым. Например, стандарт предписывает броузеру игнорировать все, что распо­ложено между тегом OBJECT и парным ему закрывающим тегом. С другой стороны, встретив любой неизвестный ему тег, броузер интерпретирует со­держимое этого тега как обычно, не обращая внимания на «скобки» парно­го тега. В результате новые версии броузеров, поддерживающие тег OBJECT, увидят именно этот тег и его атрибуты, а более старые версии, наоборот, отреагируют на его «заместитель» — текст или другие теги, вставленные внутрь парного тега OBJECT.

Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:

<тег  атрибут1="значение" атрибут2="значение" ...>

Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут = "значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами. В большинстве случаев атрибуты являются необязатель­ными, и в их отсутствие интерпретатор HTML должен использовать значения по умолчанию, заданные в стандарте языка. Существуют атрибуты, не требующие присвоения значения, сам факт присутствия которых просто включает какой-то режим работы данного тега. Согласно стандарту, кавычки вокруг значения атрибута обязательны в тех случа­ях, когда значение это содержит какие-либо символы кроме букв, цифр, точки или дефиса; однако если вас интересует совместимость с XML, то лучше пользоваться кавычка­ми всегда.

Подстановки.  Чтобы ввести в документ символы, от­сутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки (entities) двух видов — мнемонические и числовые. Первые имеют вид    мнемонический код;, например:

Набор мнемонических кодов, определенный в стандарте HTML, включает в себя, в частности, весь символьный репертуар Latin-1 (в том числе символ неразрываемого пробела   стр. 229), а начиная с HTML версии 4 и некоторые из символов Unicode (стр. 231).

В числовых подстановках вместо мнемонического кода используется десятичный числовой код нужного символа с добавлением впереди символа # (например, ; для того же символа неразрываемого пробела). Важно помнить, что код символа берется из стандарта Unicode вне зависимости от кодировки основного текста документа. Так, в какой бы кодировке ни был представлен русский текст документа, подстановка для кириллической буквы «А» всегда будет иметь вид  (хотя поймет ли такую подстановку броузер — это уже другой вопрос).

Минимальный документ.  Интересно задаться вопросом — каково содержимое минимального документа, который тем не менее отвечает с фор­мальной точки зрения стандарту HTML? Ответ на этот вопрос содержится в спецификации HTML 4, но он достаточно интересен, чтобы привести его и здесь. Оказывается, обязательными в HTML-документе являются только два тега: TITLE  и !DOCTYPE. Последний тег, о существовании которого очень многие не подозревают, согласно синтаксису SGML не­обходим, чтобы удостоверить, что данный файл

— именно HTML (а не, скажем, XML), и указать притом его версию (точнее, тот DTD, которому он соответствует, ). Например:

<!DOCTYPE  HTML  PUBLIC "-//W3C//DTD  HTML 4.0//EN">

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

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

Использование минимума структурных тегов, результатом которого является «академический стиль»— самый разумный выход для тех, кому не очень-то нужен  какой бы то ни было дизайн или нет средств на его создание.

CCЫЛКИ  И  ПРИВЯЗКИ.  Очевидно, возможность связывать документы паутиной взаимных ссылок — первое и главное отличие Интернета от всех других средств распространения ин­формации, отраженное даже в названии HTML — языка разметки гипертекста. В то же время тег А, реализующий это волшебство, сам по себе весьма прост и ограничен по возможностям. Любая ссылка в HTML имеет два обязатель­ных элемента: источник — то изображение или фрагмент текста (в более общей трактовке — тот элемент документа), который заключен между <А> и </А> и щелчок по которому активизирует ссылку, и пункт назначения — URL-адрес документа, на который ведет ссылка.

Адрес назначения может указывать не только на весь документ в целом, но и на

какое-то место (точнее, опять- таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name того же самого тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #.  Для документов, генерируемых в ответ на запрос программой на сервере  прямо в адресе можно передавать параметры вызова (например, строку поиска); обычно такие параметры, записанные в виде переменная=значение, отделяются от URL вызываемой программы символом ?.

Пожалуй, в гипертекстовом аспекте WWW новичков больше всего поража­ет не сама возможность ссылаться откуда угодно куда угодно, а тот факт, что для создания ссылки от владельца документа назначения не требуется ровным счетом ничего (за исключением описанного выше особого слу­жители         чая со ссылкой внутрь документа). Собственно говоря, владелец документа обычно вообще не знает, что на него поставлена ссылка, и обнаружить все ведущие к вам ссылки вы сможете только анализом статистики ваше­го сервера (броузер, делая запрос на документ, обязан сообщить серверу, с какого URL он пришел) или с помощью поисковой системы. Свобода ставить ссылки на кого угодно — интересный аспект свободы информа­ции в Интернете, и его непривычность даже для закаленных американцев хорошо иллюстрирует недавний судебный иск Microsoft против некоей компании, поставившей со своего сайта ссылки на внутренние страницы сайта Microsoft в обход «парадного подъезда»...

Формы. Еще одно принципиальное отличие интерактивных

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

Собственно тег FORM, объединяет группу связанных по смы­слу элементов и указывает адрес той программы на сервере, которой будут посланы введенные пользователем данные из всех элементов формы. HTML-страница может содержать любое количество независимых друг от друга форм, в каждой из которых должна присутствовать «пуско­вая кнопка», отправляющая данные на сервер. Кнопке этой не обязательно быть стандартной интерфейсной кнопкой (создаваемой тегом INPUT с атрибутом type="submit"); в этой же роли может использоваться изображение, а для простых форм, состоящих из одного поля ввода или выпа­дающего списка, посылка данных может активизироваться нажатием Enter в поле ввода или операцией выбора элемента в списке.

Тег IMG, предназначенный для Изображения и объекты вставки изображений, относится к тегам, создающим но­вые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG; этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в дру­гом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атрибутов этого тега управляют форматированием изображения, устанавливая его размеры, поля, выравнивание и проч. Правила использования атрибута alt приведены.

В последующих версиях HTML, вполне вероятно, будет предпринята по­пытка перейти на использование тега OBJECT для вставки любых внешних по отношению к документу объектов или данных, в том числе и изобра­жений. Обобщенный синтаксис тега OBJECT позволяет указать множество дополнительных сведений об изображении и его роли в документе, а при­надлежность этого тега к разряду «парных с игнорируемым содержимым»  обеспечит его обратную совместимость с броузерами, понимаю­щими только тег IMG.

Таблицы. Еще во второй версии  HTML не было никаких средств для создания таблиц, если не считать фрагментов  «префор­матированного» ASCII-текста с сохранением всех пробелов, табуляций и переносов строки. Сейчас, однако, тег TABLE гораздо чаще используется для визуального форматирова­ния страницы, чем для представления табличного по своей природе материала. Алгоритм верстки таблиц, которому приходится учитывать множество подчас противоречащих друг другу сведений (например, натуральную ширину со­держимого ячейки и ту ширину, которая «рекомендована» атрибутом width соответствующего тега TD), достаточ­но сложен и, к сожалению, плохо задокументирован, — а из-за этого в некоторых своих деталях несовместим у разных броузеров. Использованию таблиц для формати­рования основного содержимого страницы посвящен раздел .

Фреймы. Возможность поделить окно броузера на части, загру­зив в каждую из «форточек» — фреймов — отдельный HTML-файл, замечательна не столько открывающимися перспективами развития интерфейса сайта, сколько тем фактом, что один HTML-файл получает при этом возмож­ность ссылаться на другие. Таким образом, URL читаемой вами с экрана страницы может совершенно не совпадать с тем адресом, который отображен в строке URL броузера. Это особенно интересно, если учесть, что «просто вставить» внутрь одного файла содержимое другого средствами HTML невозможно (хотя для этого могут использоваться, напри­мер, SSI-вставки,  Сайты с фреймами нравятся не всем; иногда их критикуют за неудобство и нелогичность навигации. Более серьезными, однако, являются проблемы доступности фреймов для неграфических сред и для ав­томатических сборщиков информации (программ-роботов поисковых систем).  Дизайнерские аспекты работы с фреймами подробно обсуждаются.

Национальные особенности. Хотя с текстовыми кодиров­ками мы уже знакомились, теория и практика создания разноязычных HTML-документов — особая тема. Как я уже упоминал, стандартной кодировкой HTML-доку­ментов начиная с версии 4 объявлена кодировка Unicode. Однако это совсем не означает, что все

HTML-документы  должны создаваться, храниться и передаваться в этой ко­дировке. Стандарт допускает использование автором стра­ницы любых других кодировок (при условии, разумеется, что набор символов выбранной кодировки соответствует потребностям документа); однако «внутри себя», разбирая синтаксис документа, броузер обязан перекодировать его из внешней, заданной автором кодировки в Unicode.

Для дизайнера это требование имеет, пожалуй, только одно практическое следствие: числовые подстановки  должны ссылаться на Unicode-коды нужных символов, а не на их коды в текущей кодировке документа. Это сделано для того, чтобы не только мнемонические, но и числовые под­становки, во-первых, не зависели от кодировки документа, а во-вторых, давали возможность ссылаться на символы за пределами текущей кодировки. К сожалению, поскольку многие версии броузеров до сих пор не подозревают об этом требовании стандарта, с известной гарантией можно пользоваться только числовыми или мнемоническими кода­ми из репертуара Latin-1 (которая является подмножеством Unicode).

Согласование кодировок. Веб-сервер, посылая до­кумент по запросу броузера, обязан указывать внешнюю ко­дировку этого документа в так называемом HTTP-заголовке, предшествующем любому отправляемому с сервера файлу и содержащем служебную информацию о нем. Броузер же по получении такой посылки должен переключиться в эту кодировку, что сводится обычно к замене шрифтов, которы­ми выводится документ, и/или перекодировке (например, из  КОИ8  в  СР1251, если предполагается использовать функ­ции вывода операционной системы Windows, для которой эта кодировка «родная»).

К сожалению, этой возможностью пользуются далеко не все серверы русского Интернета. Часто, попав на стра­ницу по ссылке с другого сайта, приходится вручную переключать кодировку отображения командой в меню броузера. (Очевидно, что веб-серверы вряд ли игнориро­вали бы необходимость указывать кодировку отсылаемых документов, если бы броузеры не позволяли переключать кодировки пользователю.) Автор документа может эмулиро­вать HTTP-заголовок прямо в HTML с помощью тега МЕТА, заставляя броузер переключаться в нужную кодировку без перенастройки сервера.

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

СРЕДЫ И ДОСТУПНОСТЬ. Обеспечение доступа к сайту для любых платформ и любых сред (графической, текстовой, звуко­вой) — важный аспект

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

Доступность информации в Интернете опирается на два основных принципа, из которых вытекают все остальные, более частные рекомендации. Первый из этих принципов вам уже известен — это преимущественное (или, по край­ней мере, хоть какое-то) использование структурной, а не только визуальной разметки. Например, пометив фрагмент текста тегом I, вы тем самым даете команду переключить­ся в курсивное начертание, — что имеет смысл только в графической среде: речевой броузер, читающий страницу вслух, ничего похожего на «курсив» не имеет и, скорее всего, тег этот просто проигнорирует. Намного разумнее воспользоваться вместо этого тегом ЕМ, который вводит ло­гический элемент эмфазиса (выделения) и который можно интерпретировать соответствующими средствами в разных средах (например, в графике — курсивом, а в речи — интонацией).

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

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

Как писать alt-тексты. Особого внимания заслужи­вает атрибут alt тега IMG, предназначенный для запи­си текстового эквивалента изображения. Значением этого атрибута может быть строка символов, содержащая любые подстановки (например, ;), но не содержащая дру­гих тегов. (Впрочем, сам тег IMG можно вставить внутрь парного тега логического форматирования — например, HI, — чтобы приписать его alt-тексту соответствующую структурную роль и средства выделения в неграфических броузерах.)

Главный принцип, который нужно при этом иметь в виду, формулируется так: alt-текст должен давать текстовый эквивалент информации, содержащийся в изображении, а не некую метаинформацию о самом этом изображении. С этой точки зрения исключительно неуместно смотрятся  вставляемые иногда в alt-тексты размеры файлов изобра­жений в байтах или же советы типа «Включите загрузку графики, чтобы увидеть эту картинку». В простейшем слу­чае, когда картинка содержит заголовок, надпись на кнопке или другой текст, ее атрибут alt обязан содержать в точно­сти этот самый текст и ни слова больше. Ниже перечислены некоторые распространенные типы изображений и принци­пы выбора alt-текстов для них:

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

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

§        Для разделителей, аналогичных по функции тегу HR (стр. 203), подходящим alt-текстом будет ряд небук­венных значков — например, "======"  или  "******". С другой стороны, такое решение неплохо смотрится только в текстовых браузерах вроде Lynx, тогда как владельцам речевых браузеров, скорее всего, не очень-то понравится слушать монотонное «знак равенства, знак равенства, знак равенства...»

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

Приведенные здесь правила рассчитаны на то, чтобы облегчить доступ к информации на любых платформах и в любых средах — графической, текстовой или звуковой. В последнее время, однако, графические  браузеры несколько переопределили семантику атрибута alt: начиная с че­твертых версий браузеры Netscape и Microsoft не только показывают alt- текст на месте отсутствующей графики, но и выводят его в виде «всплыва­ющей подсказки» (floating tip), возникающей при поднесении курсора мыши к изображению. С одной стороны, это нововведение заставит визуальных дизайнеров внимательнее относиться к расстановке alt-текстов на своих страницах — не писать туда что попало и не забывать о пустых alt-текстах у вспомогательных изображений. С другой стороны, непосредственное участие alt-текстов в процессе интерактивного исследования страницы заста­вляет дизайнера отказаться от дословного воспроизведения в alt-текстах содержимого графических вставок: сейчас не редкость страницы, в ко­торых, например, alt-тексты дают расширенные пояснения для слишком лаконичных или же вообще лишенных текста кнопок навигации.

Доступность: изображения-карты. В HTML су­ществует два способа сделать так, чтобы части одного изображения служили ссылками на разные адреса: сервер­ные (server-side) и клиентские (client-side) изображения-карты (image maps). Первый из этих способов, предполагающий посылку серверу координат точки, в которой произошел щелчок мыши, и получение в ответ URL-адреса, на ко­торый нужно перейти, сейчас встречается уже довольно редко, и это нельзя не приветствовать: поскольку само понятие «координат» имеет смысл только в графической среде, оформленные таким образом ссылки по определе­нию недоступны никому, кроме пользователей графических браузеров.

Клиентские изображения-карты, которые хранят конфигу­рацию областей, чувствительных к щелчку мыши, и соот­ветствующие им URL прямо в HTML-файле, с этой точки зрения куда предпочтительнее: неграфический браузер мо­жет, проигнорировав само изображение, представить список его чувствительных областей в виде обычных ссылок. Для этого нужно не забыть снабдить каждый тег AREA вну­три тега MAP атрибутом alt (который, кстати, согласно стандарту является его единственным обязательным атрибу­том), чей текст и будет оформлен в виде соответствующей ссылки.

Еще предпочтительнее, однако, совсем отказаться от карт и разрезать изображение на отдельные «кнопки», не забыв прописать для каждой соответствующий alt-текст. Графические браузеры позволят вам заверстать изображения вплотную без каких-либо швов или зазоров, так что дизайн страницы от этого не пострадает. Кроме гарантированной доступности в неграфических средах, это решение позволя­ет иногда понизить для исходного изображения цветовую глубину и, соответственно, уменьшить общий объем файлов страницы.

Мета-данные  и поиск. Один из малоизученных аспектов веб- дизайна

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

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

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

Мертвая зона. Странствуя по ссылкам от одного сайта к другому, робот в идеале должен был бы рано или поздно обойти весь Интернет. На практике эта цель остается недо­стижимой, и не только из-за труднопредставимого объема Всемирной паутины и всегда ограниченных возможностей поисковых систем. В современном Интернете все большая доля страниц генерируется динамически в ответ на данные, введенные пользователем самостоятельно или сохраненные в его «профиле», созданном во время предыдущих посеще­ний этого сайта. Понятно, что роботу неоткуда узнать, что можно или нужно вводить в поля форм, так что любые динамически генерируемые страницы (в том числе, кстати, и результаты поиска на самих поисковых серверах) для робота недоступны.

Ограничения этим не исчерпываются. Существуют роботы, которым не по зубам документы с символами за пределами Latin-1, а в некоторых случаях даже и ASCII. Другие не могут индексировать сайты с фреймами. Наконец, многие робо­ты ограничивают количество страниц, сканируемых ими в каждом домене. Например, высказывались подозрения (не подтвержденные, но и не опровергнутые руководством компании), что Alta Vista сканирует не больше 600 страниц в каждом домене верхнего уровня.

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

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

С этой целью ключевые страницы сайта (как минимум, его первая страница) снабжаются аннотациями и списками ключевых слов. Для этого был приспособлен тег МЕТА (вообще предназначенный для хранения метаинформации документа, т.е. «информации об информации»):

<МЕТА name="keywords"

content="searching, search engines, keywords, HTML">

<META name="description"

content="A description of web search engines, spiders,

and search-friendly HTML authoring":»

Важно понимать, что стандарт HTML предписывает для тега МЕТА только наличие атрибутов name и content, то­гда как интерпретация значений этих атрибутов оставлена целиком на усмотрение того, кто их читает. Поэтому раз­ные поисковые системы имеют разные требования в том, что касается максимальной длины списка ключевых слов, его синтаксиса (например, нужны ли запятые между эле­ментами списка), допустимости повторений одного слова  в разных грамматических формах. Аннотация (description) используется многими поисковыми системами при выводе результатов поиска; если она отсутствует, страница в спис­ке результатов обычно представлена первыми несколькими словами своего текста.

Кроме вставки ключевых слов и аннотаций, тег МЕТА может использовать­ся для указания автора страницы, программного обеспечения, в котором она создана, а иногда и кодировки текста. Этот тег способен выполнять некоторые функции

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

Искусство выбора результативных ключевых слов, которые приведут на ваш сайт максимальное количество максималь­но заинтересованных в вашей информации посетителей, — одно из тех умений, которым могут научить только практика в сочетании с врожденной предрасположенностью. Вы без труда найдете в сети «секретные» списки самых популяр­ных слов в запросах разных поисковых систем, и первой приходящая в голову идея усилить ваши МЕТА-аттрактанты словами из этих списков в самом деле заметно поднимет траффик сайта, — но вряд ли повлияет на количество дей­ствительно ценных посетителей, приходящих на ваш сайт именно за тем, что вы можете им дать.

Хороший список ключевых слов не составишь за один присест — он требует от вас досконального знания своей предметной области и нужд ваших потенциальных посе­тителей. Как отец Браун, мысленно перевоплощавшийся в подозреваемых, чтобы понять, кто из них совершил пре­ступление, вы должны поставить себя на место тех, кому позарез нужен именно ваш сайт. Не старайтесь при этом слепить обобщенный образ «среднего посетителя»; наобо­рот, попытайтесь представить себе как можно более разные и даже на первый взгляд неправдоподобные сценарии поис­ка информации. В особо интересных случаях МЕТА-список становится настоящей «ментограммой» создателя страницы, несущей едва ли не больше информации, чем основной текст, и способной отфильтровать людей с близким автору мышлением среди тысяч случайных зевак.

 

 

CSS.

Язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS) был разработан в качестве дополнения  к HTML, призванного восполнить ограниченные возмож­ности этого языка в области визуального форматирования, а в идеале — и полностью взять на себя определение внеш­него вида документа, оставив за HTML только структурную разметку.

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

С распространением XML у CSS, возможно, откроется «второе дыхание», так как ничто не мешает пользоваться CSS-спецификациями для доку­ментов, размеченных в XML, а предназначенный специально для XML стилевой язык XSL  может оказаться слишком сложным для мас­сового применения.

Принципы.  Система CSS предоставляет в распоряжение дизайнеров набор обобщенных свойств (параметров оформления), та­ких как имя шрифта, цвет элемента и фона под ним, ширина любого из четырех окружающих элемент полей. Написание спецификации для HTML-документа заключа­ется в присвоении значений нужным свойствам для тех или иных элементов (т.е. HTML-тегов), классов элементов (которые маркируются в HTML с помощью атрибута class у соответствующих тегов) и отдельных экземпляров тегов (идентифицируемых атрибутом id). Кроме того, можно варьировать свойства элементов, стоящих в том или ином контексте (например, увеличить расстояние между строками только для тех элементов Р, которые следуют сразу за эле­ментом HI, — что было бы аналогом одной из особенностей верстки данной книги).

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

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

ВОЗМОЖНОСТИ.  От версии системы CSS очень сильно зависит, чего с ее помощью можно добиться. Первая версия спецификации (CSS level 1 или попросту CSS1), ставшая официальным стандартом в конце 1996 года, по сути, лишь предлагала CSS-запись для тех параметров форматирования, которые и без того уже, будь то «законно» или «незаконно», бы­ли доступны HTML-документам в тогдашних графических броузерах. Свойства CSS1 включали в себя выбор шриф­та, параметры форматирования текста, установку фонового цвета или изображения, ширину полей и еще несколько второстепенных параметров, в большинстве своем аналогич­ных атрибутам тех или иных тегов. Управлять положением элемента на странице можно было, лишь изменяя величину его полей и тем самым отодвигая его от границ предшеству­ющего элемента или элемента-родителя.

Стандарт CSS2, законченный к январю 1998 года, суще­ственно расширил возможности стилевых спецификаций сразу по нескольким направлениям. Прежде всего, его создатели вспомнили, что если содержимое у документа всегда одно и то же, то разнообразных представлений у него может быть сколько угодно, в том числе и в разных средах. В этой версии было введено понятие «типа среды» (media type), в зависимости от которого выбирается соответству­ющий набор свойств для тегов документа (пока, кроме графического, определен только один тип среды — звуковой,

свойства которого позволяют регулировать громкость, темп произнесения текста и тембр голоса).

Для графических дизайнеров в этой версии также есть немало интересного. Из главных нововведений отметим ме­ханизм подбора шрифтов, позволяющий не только выбирать один из установленных в системе шрифтов, но и подшивать к документу передаваемый вместе с ним по сети шрифт и даже синтезировать шрифт по его описанию . Очень важна также возможность абсолютного позициони­рования любого элемента относительно элемента-родителя или границ окна, в том числе с наложением элемен­тов друг на друга и даже с возможностью «оживлять» их JavaScript-сценариями . Наконец, в этой вер­сии впервые появились средства генерации содержимого, без которых невозможно создать сколько-нибудь сложные системы разметки. Самым частым примером такого генери­руемого содержимого является автоматическая нумерация заголовков, поддержка которой введена в CSS2. Любые технологии форматирования текста, предназначенные для Интерне­та, вынуждены учитывать ограниченную пропускную способность каналов связи  и тот факт, что пользователям вряд ли понравится ждать загрузки документа целиком, не имея возможности начать его чтение. Все реализации HTML и CSS выводят текст на экран по мере его поступле­ния из сети и, следовательно, не могут вернуться назад и перерисовать то, что уже выведено. Это на первый взгляд несущественное ограничение делает невозможным не только многие специальные эффекты, в которых содержимое или форматирование одной части документа зависит от дру­гой, но и просто достаточно качественную верстку текста. К примеру, система TЕX, прежде чем сверстать абзац текста, прочитывает его до конца и пробует разные варианты разбиения его на строки, минимизируя общее количество слишком тесных или слишком растянутых строк, переносов, висячих строк и прочих отклонений от идеала. Понятно, что ничего похожего нельзя ожидать от броузера, который выводит каждую строку текста, как только получает достаточно материала для ее заполнения (если только текст не заключен в таблицу).

Модульный HTML.  Нельзя сказать, чтобы доступная на сегодня

веб- дизайнерам технология текстовой разметки — HTML с не­большой (из-за проблем совместимости) примесью CSS — была начисто лишена способности к разделению аспектов содержания и представления . Опыт, врожден­ная аккуратность и ответственное отношение к материалу, с которым приходится работать, позволяет отдельным ди­зайнерам практиковать в HTML стиль, вполне отвечающий требованиям идеологии SGML (или, что сейчас более актуально, XML).

Конечно, многим дизайнерам с преимущественно визу­альным мышлением совсем не просто перестроиться на «ортогональный стиль» разметки. Так же как нельзя уви­деть бестелесную душу, вам, возможно, трудно вообразить себе, как будет выглядеть документ, размеченный толь­ко логически, равно как и представить себе идеальную ортогональность — независимость такого «дистиллирован­ного» содержимого от хранящегося отдельно оформления. Если даже примитивные «именованные стили» в текстовых процессорах считаются прерогативой «профессиональных пользователей», что уж говорить о более последовательных системах ортогональной разметки. Я думаю, что если бы умение воспринимать и создавать аспекты информации по отдельности было врожденным и не требовало обуче­ния, язык SGML уже давно стал бы основным средством хранения и распространения текстов.

Режем по живому. Даже если не учитывать несовершенство HTML, в котором логический и визуальный аспекты оказались смешанными по причинам скорее историческим, соблюдение ортогональности — как и любая реализация некоей абстрактной идеи на практике — сталкивается и с вполне объективными трудностями. Бывают случаи, в которых раздели­тельная линия между содержанием и оформлением может быть проведена по-разному; более того, иногда неудачное рассечение на аспекты докумен­та, изначально (в сознании его автора) целостного, приводит к частичной потере информации и к невозможности в дальнейшем удовлетворительно состыковать получившиеся половинки.

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

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

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

На любом сайте, превышающем по размеру страницу и содержащем хотя бы одну серию повторяющихся или од­нотипных элементов, форматирующие коды HTML удобно собирать в унифицированные модули, или блоки, играющие роль своеобразных «тегов логической разметки», параметры оформления которых хранятся в них же самих. Внутреннее устройство таких блоков может быть в принципе любым — в частности, в них можно как угодно смешивать логические и визуальные теги HTML. Однако, чтобы построенный таким образом логический план разметки действительно об­легчал создание и поддержку сайта, нужно придерживаться нескольких несложных правил:

§        Экземпляры одного блока должны быть абсолютно иден­тичны, за исключением вставок изменяемого содержи­мого (например, текста заголовка в блоке заголовка).

§        Общее количество разновидностей блоков должно быть минимальным, и после того как дизайн сайта устоялся, новые блоки могут вводиться в виде исключения — только когда на сайте появляется принципиально новое содержимое, не лезущее в старые «болванки».

§        За пределами блоков не должно оставаться никаких «висячих» тегов, за исключением самых необходимых средств оформления текста (тег Р и логические теги типа ЕМ и STRONG).

§        Каждый блок должен быть помечен в HTML-коде стандартным комментарием, который позволит легко опознать этот блок как при ручном редактировании, так и при автоматическом поиске.

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

Наоборот, редактирование «плана представления» после то­го, как сайт создан и запущен, в идеале должно быть событием исключительным, осуществляющимся только под контролем дизайнера. (Например, если вдруг выяснилось, что какой-то заголовок ведет себя неправильно, когда его текст превышает по длине некую заранее планировавшу­юся величину, может понадобиться изменить устройство заголовочного блока.) Это можно делать только глобаль­ным поиском и заменой во всех файлах сайта — ведь если вы поправите вручную одну из копий блока, ее уже не найдет следующий автоматический поиск, и рас- синхронизация поползет по сайту, как раковая опухоль. Программа, которой вы пользуетесь для редактирования HTML-кода, должна уметь искать и заменять многостроч­ные блоки текста и пользоваться регулярными выражениями (regular expressions) в тех случаях, когда блок содержит встав­ки, изменяющиеся от одной копии блока к другой. Обе эти возможности поддерживает, например, редактор HomeSite (www.allaire.com).

Например. Описанные выше принципы были взяты за основу в дизайне сайта www.oi.com (рис. 1). Этот корпоративный сайт по объему и ча­стоте обновления своего материала близок к контент-сайтам , и возможность свободно редактировать содержимое, оставляя нетронутым дизайн, для него особенно важна. Вот, к примеру, как выглядит блок, со­здающий стандартный внутритекстовый заголовок:

<!framed heading -->

<table border=0 cellpadding=0 cellspacing=0><tr>

td bgcolor=ffaf60><img alt="" src="e.gif" width=15 height=4></td>

<td gcolor=ffaf60><img alt="" src="e.gif" width=350 height=4></td>

<td gcolor=d8d8d8 align=right valign=top rowspan=2>

<img width=16 height=26 alt="" src="zak-gob.gif" >< td >

</tr><tr>

 

<td gcolor=d8d8d8><img alt="" src="e.gif" width=15 height=22></td>

<td gcolor=d8d8d8 valign=bottom><small>THE COAD METHOD</small></td>

</tr>< table>

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

— его текст (в данном случае «THE COAD METHOD»). Между собой блоки удобно разделять пустыми строками. Вся страница, показанная на рис. 1, состоит из следующих блоков (приведены только строки с комментариями):

<!-- top navigation -->

<!-- solid heading -- >

<!-- open text block -->

Peter Coad is perhaps ... Reach him at pc@oi.com.

<!-- close text block -->

<!-- framed heading -->

 <!-- open text block -->

The Coad Method focuses on ... frequent, tangible, working results.

<!-- close text block -->

<!-- decorated close -->

Модульный HTML — не только имитация имеющегося в других языках программирования структурного подхода и не только единственная реальная возможность приспосо­бить этот язык к созданию объемных и часто обновляемых сайтов. Это еще и необходимый промежуточный этап бу­дущей миграции к языку XML (о котором мы будем говорить чуть ниже): тем же самым глобальным поис­ком вы в любой момент можете заменить «псевдотеги» структурных блоков HTML на настоящие структурные те­ги XML, разработав для них соответствующие стилевые спецификации. Такая конверсия гораздо полнее отвечает целям и духу XML, чем приходящий в голову первым буквальный, «тег в тег» перевод HTML в формально кор­ректный, но совершенно бессмысленный XML (стр. 51), — ведь большинству визуально-ориентированных тегов HTML в структурном языке XML нет и не может быть никаких соответствий.

 

 

XML.

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

Именно такое естественное, а не насильственно наса­ждаемое разделение аспектов содержания и представления предлагает язык XML (extensible Markup Language, «Расши­ряемый язык разметки») — компактное упрощенное под­множество языка SGML, разработанное Консорциумом W3 в расчете на постепенное вытеснение из Интернета языка HTML. Этот «HTML будущего», как его нередко называ­ют, уже активно осваивается ведущими производителями  программ, причем не только броузеров — вероятно, под­держка XML через какое-то время появится в большинстве текстовых процессоров, баз данных, систем подготовки документации, а некоторые предрекают встраивание этого языка даже на уровне операционных систем.

Итак, язык XML впервые открывает перед многомиллионной интернетов­ской аудиторией дверь в мир настоящей структурной разметки и подлинной ортогональности аспектов содержания и представления. В конечном итоге эта новая технология должна резко увеличить производительность тру­да авторов, сняв необходимость утомительного, зачастую ручного перевода информации из одного визуально-ориентированного формата в другой. Од­нако не обойтись на этом пути и без трудностей «перепривыкания» и ломки сложившихся стереотипов. Перейти с HTML на XML — это совсем не то же самое, что обновить версию вашего любимого текстового процессора. Может показаться, что идеология ортогональности языка SGML, прекрасно работающая для устоявшихся типов документов с годами отлаживавшимися DTD, не справляется со слишком разнообразным и зачастую нелогичным содержимым современного Интернета. Вспомним, однако, что только про­тиворечие может быть двигателем прогресса, — нам предстоит еще увидеть, как развиваются, взаимообогашаясь и изменяясь под действием друг друга, Интернет и XML...

Синтаксис. Внешне XML-документ очень похож на HTML: те же угловые скобки, открывающие и закрывающие теги, атри­буты и подстановки. Но если в HTML все допустимые теги жестко заданы стандартом, то XML-документ может поль­зоваться любыми тегами, пусть даже изобретаемыми на ходу автором документа. Это объясняется разным статусом этих языков: если HTML есть одно из приложений SGML, его от­прыск и порождение, то XML — это подмножество SGML, его «младший брат», обладающий лишь чуть меньшими возможностями и точно так же пригодный для создания фиксированных систем разметки документов. Такие систе­мы на основе XML действительно создаются в последнее время во множестве — от сложного языка MathML для разметки математических текстов до простеньких наборов из пары десятков тегов для хранения кулинарных рецептов или текстов церковных проповедей.

DTD. Вся специфика HTML как одного из приложе­ний SGML выражена в особой формальной конструкции, называемой определением типа документа (Document Туре Definition, DTD). В идеале DTD — высший авторитет во всем, что касается синтаксиса той или иной версии HTML. Им, к примеру, пользуются

WTML-валидаторы — интерпре­таторы SGML, проверяющие соответствие

HTML-докумен­та некоторому DTD. Поскольку DTD для каждой версии HTML зафиксировано в официальной спецификации языка, в самом документе приводить его не нужно, — однако любой HTML-документ обязан ссылаться на свое DTD с помощью тега IDOCTYPE (стр. 29).

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

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

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

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

Например, в DTD для HTML 4.0 указано, что у элемента HTML можно опускать как открывающий, так и закрыва­ющий теги (границы элемента устанавливаются интерпретатором по контексту), а его содержимое должно состоять из элементов HEAD и BODY, идущих именно в таком по­рядке. Элемент OL (нумерованный список) обязан иметь как открывающий, так и закрывающий теги, а содержимое его должно состоять из одного или нескольких следую­щих друг за другом элементов LI. DTD в языке XML на этом уровне рассмотрения имеет только одно существенное отличие от DTD в SGML (и HTML): все элементы XML-до­кумента без исключения обязаны иметь и открывающий, и закрывающий тег.

Важно понимать, что ни в SGML, ни в XML DTD не имеет никаких средств для задания семантики тегов, — иными словами, DTD не дает ответа на вопрос, что означает каждый тег. В каком-то смысле идеология SGML следует Людвигу Витгенштейну, которому принадлежит высказы­вание: «The meaning of a word is its use» («Значение слова — это то, как оно употребляется»). Тот факт, к примеру, что тег I включает курсив­ное начертание, формально средствами SGML не выразим, — он лишь подразумевается авторами языка HTML и указывается в комментариях или в сопроводительной документации к HTML DTD.

Именно поэтому путь, избранный в HTML, — жесткое закрепление за каждым из тегов (набор которых ограничен) некоторой «рекомендуемой» роли и параметров форматирования — несмотря на свою простоту, плохо укладывается в рамки идеологии SGML и влечет за собой неприятные последствия. Если семантику тега невозможно определить формально, то нет ничего удивительного в том, что эффект даже простейших тегов иногда сильно различается у разных браузеров. Абстрактный вопрос «что делает  такой-то тег», по сути, лишен смысла — можно только выяснять, какой результат дает применение этого тега в том или ином браузере.

Уровни соответствия. Если в SGML каждый до­кумент обязан иметь свое DTD, а у HTML есть одно DTD на всех, то XML представляет собой компромисс: документ может иметь (или ссылаться на) DTD, а может и обходиться без DTD. В последнем случае каждый новый тег и атрибут определяются самим фактом своего употре­бления. Таким образом, для XML-документов существует два уровня соответствия стандарту: документы, не имею­щие DTD, но удовлетворяющие всем другим требованиям синтаксиса XML, называют правильно структурированными {well-formed), чтобы отличить их от документов валидных (valid), имеющих в своем составе DTD (или ссылку на внешнее DTD).

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

<ПРЕДЛОЖЕНИЕ>

 <ПОДЛЕЖАЩЕЕ>

<СУЩЕСТВИТЕЛЬНОЕ> мама </СУЩЕСТВИТЕЛЬНОЕ>

</ПОДЛЕЖАЩЕЕ>

<СКАЗУЕМОЕ тип="простое">

<ГЛАГОЛ> мыла </ГЛАГОЛ>

</СКАЗУЕМОЕ>

«ДОПОЛНЕНИЕ тип="прямое">

<СУЩЕСТВИТЕЛЬНОЕ> раму </СУЩЕСТВИТЕЛЬНОЕ> </ДОПОЛНЕНИЕ>

</ПРЕДЛОЖЕНИЕ>

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

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

 — который, таким образом, свободен от заботы о визуальном (или каком-либо ином) представлении до­кумента и позволяет сфокусироваться на его логической структуре.

Конверсия. Возможность использовать произвольные теги означает, в частности, что любой HTML-документ очень легко преобразовать в XML. Изменения, требуе­мые для этого преобразования, немногочисленны и сугубо формальны:

§        все значения атрибутов должны быть взяты в кавычки;

§        регистр букв в открывающих и закрывающих тегах должен совпадать (в отличие от HTML, язык XML чувствителен к регистру);

§        все элементы должны иметь открывающий и закры­вающий тег. Это относится не только к элементам с факультативными тегами (такими как упоминавшийся выше элемент HTML), но и к пустым элементам, которые в HTML имеют только открывающий тег. Например, тег IMG придется записывать так:

<IMG alt="" src="e.gif"></IMG>

XML также допускает особую сокращенную запись для пустых элементов:

<IMG alt="" src="e.gif"/>

Существуют утилиты, переводящие HTML в XML «тег в тег» с соблюдением всех перечисленных выше правил. Толку от такой конверсии, правда, немного: хотя результат ее будет «правильно структурированным» документом с точки зре­ния интерпретатора XML, его разметка не станет ни на йоту более структурной. Только заменяя на соответствующие логические теги унифицированные HTML-блоки, имеющие наряду с форматирующей еще и определенную структурную функцию, можно получить на выходе осмы­сленный XML-код, обнажающий содержательную основу документа и способный работать с любой подключенной стилевой спецификацией.

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

В отличие от HTML, многочисленные «расширения» кото­рого больше похожи на заплаты на расползающейся ткани, модульная структура XML является одним из важнейших преимуществ этого языка. Авторы XML прилагают все усилия к тому, чтобы логический базис и семантические надстройки удобно стыковались, не теряя при этом как формальной, так и содержательной независимости друг от друга.

XLL. Почти одновременно с самим XML Консорци­умом W3 был стандартизован XLL (extensible Linking Language, «Расширяемый язык ссылок»)

— механизм созда­ния гипертекстовых ссылок в XML-документах. Этот аспект языка значительно усовершенствован в сравнении с HTML. Вот основные черты гипертекстовой модели XML:

§        XML-ссылки реализованы не на уровне тегов (как в случае тега А языка HTML), а с помощью зарезер­вированных имен атрибутов. Это позволяет с легкостью превратить в гипертекстовую ссылку любой элемент до­кумента, просто расширив его список атрибутов.

§        Для XML-ссылки можно указать, будет ли она обычной ссылкой, активизируемой пользователем (щелчком мы­шью, к примеру), или же браузер, встретив в документе эту ссылку, должен активизировать ее сам, не дожидаясь команды пользователя.

§        Для ссылки можно указывать результат ее активации, а именно: вывести ли документ, на который она ссылает­ся, вместо текущего (например, в том же окне браузера), создать ли для него новый контекст вывода (напри­мер, новое окно), или же содержимое нового документа нужно вставить внутрь текущего документа.

§        Важные усовершенствования внесены в синтаксис URL- адресов, использующихся в ссылках. Выше я уже упо­минал, что адреса могут содержать параметры вызова программы или идентификатор фрагмента документа, отделяемые от основной части адреса соответственно символами ? и #.

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

по-особому разметил этот фрагмент (в HTML, как вы знаете, его нужно пометить тегом А с атрибутом name). Более того, вырезание этого фрагмента из документа можно пере­ложить на сервер, на котором документ хранится, тем самым избежав пересылки по сети документа целиком (правда, для этого нужно, чтобы сервер умел обрабаты­вать такие «расширенные» запросы).

XSL. Как я уже упоминал, ничто не мешает использовать с XML-документами стилевые спецификации на языке CSS , и для не особенно требовательных к дизайну до­кументов эта комбинация технологий, по-видимому, будет оптимальной. С другой стороны, оформить заголовки, блоки текста и навигационные элементы хотя бы приблизительно так же, как они оформлены на веб-странице, с помощью CSS невозможно. Поэтому в качестве одной из стандартных надстроек над XML Консорциум W3 раз­работал стилевой язык XSL (extensible Stylesheet Language, «Расширяемый язык стилевых спецификаций»).

Один из прототипов XSL — созданный уже довольно дав­но для использования совместно с SGML язык DSSSL (Document Style Semantics and Specification Language, «Язык стилистических и семантических спецификаций докумен­тов»). Как и DSSSL, XSL предполагает два последовательных этапа при обработке документа. На первом этапе иерархи­ческое дерево элементов исходного документа преобразуется в другое дерево, которое, в принципе, может не иметь с исходным почти ничего общего: содержимое может быть переупорядочено, по-иному разбито на элементы, в нем может отсутствовать часть исходного материала (фильтра­ция) и добавлен новый (генерируемое содержимое, ). Теги, которыми размечен этот преобразованный документ, могут опять-таки быть любыми (стилевая спецификация документа описывает правила их порождения в зависимости от содержимого оригинала), но общий принцип состоит в том, что эти новые теги уже не должны соотносить­ся со структурной основой документа, а могут содержать только параметры форматирования тех его частей, которые подлежат выводу.

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

ХМ L-документы на первом этапе обработки и которые обязан понимать форматировщик любого XSL-процессора. По предоставляемым возможностям эта «визуальная» часть XSL превосходит CSS2, однако пока она еще не закон­чена и, очевидно, в дальнейшем будет еще расширяться и пересматриваться.

Если же учесть тот факт, что «словарь» визуального форма­тирования XSL должен еще пройти долгий и болезненный процесс реализации и отладки в браузерах, на данный момент более реалистичным кажется другой подход к ис­пользованию XSL. Чуть выше я говорил, что на первом этапе обработки XML-документ может быть приведен к любому формату, использующему любые теги, с единственным требованием — чтобы формат этот не нарушал синтаксис XML (правильная вложенность тегов, кавычки вокруг зна­чений атрибутов и т. п.). Следовательно, ничто не мешает вам написать стилевую спецификацию, разворачивающую теги логической разметки в форматирующие блоки модуль­ного HTML. Полученный в результате

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

Этот сценарий предлагает путь относительно безболезнен­ной миграции на XML для огромной массы сайтов, исполь­зующих сейчас типично «визуальный» HTML. Для этого, однако, их HTML-разметка должна как можно точнее со­блюдать заповеди модульного HTML. Например, приведенный  блок внутритекстового заголов­ка глобальным поиском легко заменить на логический XML-элемент:

<FRAMED-HEADING>The Coad Method</FRAMED-HEADING>

Теперь достаточно написать стилевую спецификацию на XSL, которая преобразовывала бы каждую копию элемента FRAMED-HEADING в соответствующий HTML-блок и вста­вляла бы в нужное место внутри этого блока содержимое обрабатываемого элемента — т. е. текст заголовка, попутно переводя его в верхний регистр (несомненно, регистр текста принадлежит в данном случае к аспекту представления, а не содержания, так что из XML-документа эту подробность лучше убрать).

На момент написания этой книги конверсия модульного HTML в XML + XSL реализуема только в браузере MSIE 4.0 с помощью разра­ботанного фирмой Microsoft ActiveX-компонента (стр. 70), транслирую­щего XML в HTML и передающего полученный HTML-код стандартному механизму форматирования браузера.

 

 

Графика.

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

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

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

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

— разделение на собственно текст, который можно редактиро­вать, и параметры его оформления). Именно такой базовый набор возможностей предусмотрен в языке PostScript — од­ном из первых векторных форматов, появившемся в 1986 г. и до сих пор остающемся lingua franca для векторных изображений.

Фирма Adobe, которой принадлежит язык PostScript, раз­работала также первый векторный графический редактор Adobe Illustrator, для которого PostScript был стандартным форматом файлов. Однако долгие годы сохранявшееся мо­нопольное положение этого формата сыграло с ним злую шутку: тот факт, что он стал стандартным входным фор­матом появившихся к тому времени лазерных принтеров и фотонаборных автоматов, практически затормозил его раз­витие, так как зашитое в принтер программное обеспечение, в отличие от программы, установленной на компьютере, не так-то просто обновить. В результате уже к началу 90-х

PostScript стал узким местом и Adobe Illustrator, и векторных редакторов других фирм, — которые могли бы реализо­вать, к примеру, частичную прозрачность объектов, но не решались сделать это из боязни потерять совместимость с PostScript.

В последнее время, однако, избавившись от гипноза PostScripts, векторные форматы развиваются очень бурно — являясь по самой своей природе «сборниками абстракций», они легко заимствуют подходящие идеи из соседних обла­стей. Некоторые из этих форматов двигаются в направлении поддержки сложных многостраничных документов с эле­ментами логической разметки, а программы для работы с ними все больше походят на системы верстки. Другие вво­дят элементы анимации, мультимедиа и интерактивности. Все это сопровождается развитием собственно векторной основы графики, изобретением все новых свойств объектов и трансформаций для работы с ними. Конечно, вектор­ные эффекты еще не столь многочисленны, как растровые , но они позволяют иногда добиться в векторной графике, при сохранении всех присущих ей достоинств, таких вещей, которые до недавнего времени казались пре­рогативой только и исключительно растра.

А достоинств у векторной графики действительно немало. С точки зрения дизайнера главное и решающее ее преиму­щество — всегда сохраняющаяся независимость объектов и невозможность совершить необратимые действия. Век­торную картинку можно править и изменять бесконечно, не боясь «протереть дырку» или ненароком потерять часть исходной информации. По моему мнению, это свойство векторной графики настолько важно, что композиции, име­ющие хоть какое-то отношение к дизайну, имеет смысл делать только в векторном редакторе, — хотя это может быть и неверным для компьютерного аналога, скажем, жи­вописи. (И в самом деле, наиболее отчетливо преимущества векторных редакторов над растровыми проявляются при работе над композициями, содержащими текст и именно по этому признаку относимыми к жанру дизайна, а не к графике как таковой.)

Вектор в Интернете. Есть у вектора и важные прак­тические преимущества: небольшой объем файлов (в срав­нении с сопоставимыми растровыми изображениями) и не­зависимость от разрешения устройства вывода. Эти два фактора сделали векторную графику вероятным кандидатом на роль одной из ключевых технологий Интернета. Если до сих пор векторные изображения встречаются на веб-­страницах довольно редко, то объяснить это можно лишь обилием конкурирующих технологий и нежеланием их вла­дельцев открывать доступ к техническим спецификациям своих форматов, — что является одним из обязательных условий их стандартизации Консорциумом W3.

Тем не менее среди реально применяемых в Интернете векторных форматов уже есть свои лидеры. У дизайнеров популярен формат Shockwave Flash фирмы Macromedia, замечательный своими богатыми интерактивными и анима­ционными возможностями (один из предков Flash — про­фессиональный пакет компьютерной анимации Macromedia Director). Приспособленный специально для Интернета, формат этот поддерживает гипертекстовые ссылки, а в до­полнение к своей врожденной векторной нетребователь­ности пользуется сжатием информации на манер утилит- архиваторов. Для просмотра этого формата в броузере нужен подключаемый модуль (plug-in), бесплатно распространяе­мый фирмой Macromedia. Для отдельных анимированных вставок использовать Flash вряд ли целесообразно, однако существуют сайты, целиком построенные на этой техноло­гии (например, www.olympic.org).

Для статических текстовых документов популярен формат PDF (Portable Document Format, «Переносимый формат документов») фирмы Adobe, разработанный на основе PostScript со сжатием данных, обязательным инкапсули­рованием растровой графики и шрифтов и с возможностью использования гипертекстовых ссылок и интерактивных форм. Хотя графические возможности PDF ничуть не бога­че, чем у PostScript, формат этот удобен для выкладывания в Интернете рекламных брошюр, проспектов, журнальных статей и прочих материалов, либо существовавших ранее в виде бумажных копий, либо предназначенных для распе­чатывания пользователем. Особенно удобно то, что формат PDF не привязан к какой-то одной графической программе и системе верстки: печатать на PostScript-принтерах и, сле­довательно, давать на выходе Postscript умеют все программы без исключения, а конвертация из PostScript в PDF — про­цедура полностью автоматическая. Программа для чтения этого формата под названием Acrobat Reader распростра­няется бесплатно и существует как в виде подключаемого модуля для броузера, так и в виде самостоятельного прило­жения.

Консорциум W3 готовит стандарт «языка векторной разметки» VML (Vector Markup Language), использующего синтаксис XML и семантику CSS2 для описания векторных объектов. Относительная примитивность этого язы­ка искупается тем, что для реализации его в современных браузерах не потребуется много усилий, так как VML максимально использует набор свойств элементов разметки и механизм абсолютного позиционирования CSS2 (стр. 241). Поэтому вполне можно надеяться на то, что язык этот сможет найти свою нишу в современном Интернете.

3D. Особую разновидность векторной графики предста­вляют трехмерные форматы, из которых самый известный и чаще всего встречающийся в Интернете

— язык VRML (Virtual Reality Modelling Language, «Язык моделирования виртуальной реальности»). Описываемые трехмерным фор­матом сцены состоят, как и векторные изображения, из математически описанных объектов, — с той только раз­ницей, что все их точки имеют по три пространственных координаты (а в форматах с поддержкой анимации — еще и четвертую, временную координату). Кроме обычных объектов, сцены могут содержать разноцветные и произ­вольно размещаемые источники освещения, а программа- интерпретатор покажет вам сцену с любой точки и даже позволит зайти внутрь и «побродить» между объектами. Ин­терактивная трехмерная графика как метод представления информации грозилась одно время занять место в арсена­ле приемов профессионального веб-дизайна, однако ничего подобного так и не произошло — трехмерность остается лю­бимой игрушкой непрофессионалов, но для создания в этом жанре вещей, интересных с художественной точки зрения, время,

по-видимому, еще не пришло.

Растр.  Растровое (bitmap) представление графики можно рассматривать как «вырожденную» разновидность векторного, в которой допустим только один вид объектов: расположен­ные в прямоугольной решетке разноцветные квадратики, называемые пикселями. Однако если на векторном изо­бражении мы видим именно те объекты, из которых оно состоит, то в растре вместо отдельных пикселов мы воспринимаем целостную картину, в которую пикселы скла­дываются уже в нашем сознании. Главное преимущество растра состоит в его абсолютной свободе: пиксел изображе­ния может быть любым — пусть его изменения ограничены только одной координатой (цветом), он не обязан подчи­няться каким-то математическим формулам или «помнить» об очертаниях того объекта в изображении, которому он принадлежит.

Разница между вектором и растром напоминает отличие студийной записи от «живого» концерта. Студийная мастер-копия сохраняет на отдельных дорожках партию каждого инструмента; как и векторное изображение, ее можно «пересводить», сколько угодно преобразуя, сдвигая, выбрасы­вая отдельные звуковые слои и добавляя новые. Концертная же запись и растровая картинка если и поддаются обработке и «приглаживанию», то лишь с помощью хитроумных фильтров. За эту негибкость вы получаете взамен в музыке — характерную экспрессию и «живую» фактуру звука, а в компьютерном растре — богатство текстур и некоторые принципиально недостижимые в векторе эффекты.

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

На все четыре стороны.  Экзотическая разновидность растровой гра­фики

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

Цвета. Самые важные для веб-дизайнера форматы — GIF и JPEG — подробно рассматриваются в гл. IV, поэтому здесь вместо форматов растровой графики мы обсудим цветовые ограничения этих форматов и компьютерных устройств вывода (ведь и компьютерный дисплей, и прин­тер могут отображать только растр, пусть и генерируемый программой «на лету» из векторного представления). Хотя цветовой спектр есть непрерывный континуум, компью­тер способен хранить лишь конечное число отличающихся друг от друга цветов. Поэтому особую важность приобре­тает вопрос о том, сколько оттенков способен различить человеческий глаз: если «цветовое разрешение» формата  превышает разборчивость нашего зрения, цветовые перехо­ды в изображении будут казаться нам идеально плавными, в обратном же случае неизбежны «ступеньки» или диффузия. В свою очередь, количество доступных цветов определяется тем, сколько бит информации приходится на каждый пиксел.

Так, формат GIF имеет от одного до восьми бит на пиксел и, следовательно, может отображать от 21 = 2 до 28 = 256 цветов. С использованием диффузии даже полноцветную  фотографию можно ужать в 256 цветов так, что она будет выглядеть пристойно — но, к сожалению, не более чем «пристойно». Уровень качества, при котором глаз неспособен отличить компьютерную фотографию от настоящей, достигается только при не менее чем трех байтах на пиксел, что дает 224, или около 16 миллионов цветов.

Кроме растрового формата, на пути к зрителю графика проходит через еще один фильтр — компьютерный дисплей, также способный отображать лишь конечное количество цветов. Если сам компьютер не в состоянии отобразить больше 256 цветов (а такие системы еще составляют значи­тельный процент всех подключенных к Интернету компью­теров), то от хранящегося в файле миллионного богатства оттенков проку будет мало. Цветовые возможности ком­пьютера зависят от количества его видеопамяти, в которой хранится экранное изображение, и, как правило, один и тот же компьютер может работать в нескольких режимах — либо с большим разрешением, но меньшим ко­личеством цветов, либо с меньшим разрешением, но более богатым цветом.

Видеопамять компьютера расположена не в мониторе, а на видеоплате в системном блоке; сам же монитор — устройство в основном аналоговое, а не цифровое, так что у него просто не может быть такой характеристики, как «количество отображаемых цветов». Тем не менее, в этой книге я буду пользоваться термином «256-цветные мониторы» для обозначения компью­теров, которые из-за аппаратных ограничений или установок ОС не могут отображать на своем мониторе больше 256 цветов.

Кроме идеального с точки зрения цветопередачи трехбай­тового режима, который обычно называется «true color», у многих дисплеев есть промежуточный режим

— «high color», отводящий по два байта (точнее, по 15 битов) на пиксел. На широких плавных цветовых переходах в режиме high color можно, приглядевшись, заметить «ступеньки», но для большинства практических нужд режим этот ничем не уступает true color.

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

Таким образом, объем памяти, выделенной на каждый пиксел, делится на три равные части, хранящие яркость красной, зеленой и синей составляющих цвета данного пикселя. В режиме high color на каждую составляющую приходится по 5 бит (что дает 32 градации яркости), а в true color — I байт (256 градаций). А поскольку известно, что режим true color превосходит цветовую разрешающую способность человеческого глаза, можно сделать вывод, что для качественной передачи монохромного изображения, изменяющегося только по одной цветовой координате (или, что то же самое, сохраняющего одно и то же соотношение трех составляющих), должно быть достаточно одного байта на пиксел.

По-иному устроены форматы с 256 цветами: вместо того чтобы делить и без того коротенькие байты на три части (тем более что восемь на три не делится), выгоднее хра­нить для каждого пикселя не его цвет, а номер его цвета в общей для всего файла таблице используемых цветов — палитре. Понятно, что количество цветов в этой таблице в любом случае не может превышать 256, но, посколь­ку цветовые значения в таблице задаются в трехбайтовом формате true color, цвета пикселов могут быть любыми, совсем не обязательно равномерно распределенными по цветовому континууму. В GIF-файлах палитра составляется на основе цветов, присутствовавших в исходном полноцвет­ном  изображении (это одно из ухищрений, позволяющих добиться приемлемого качества в ограниченной палитре), а у 256-цветных компьютерных дисплеев небольшая часть палитры фиксирована (она используется для отображения рамок окон, иконок и т. п.), а остаток отдается в распоряже­ние активной в данный момент программе, которая может переопределять эту часть палитры для своих нужд.

Системы представления цвета. Самая распро­страненная и понятная компьютеру без перевода система RGB (от англ. «Red, Green, Blue», т.е. «красный, зеленый, синий»)  — не единственная. Если цвет компьютерного экрана изменяется от черного (отсутствие цвета) до бе­лого (максимальная яркость всех трех составляющих), то на бумаге, наоборот, отсутствию цвета соответствует бе­лый, а смешению максимального количества красок — черный (точнее, темно-бурый). Поэтому вместо системы RGB, называемой аддитивной («складывающей»), при под­готовке к печати изображение должно быть переведено в субтрактивную («вычитающую») систему, использующую противоположные исходным цвета — противоположный красному голубой, противоположный зеленому пурпурный и противоположный синему желтый. Чтобы расширить диапазон цветовоспроизведения, к этим трем компонентам добавляется четвертый — черный, и вся система получает наименование CMYK («Cyan, Magenta, Yellow, blасК»; чер­ный обозначается в этой аббревиатуре буквой К, чтобы не путать его с синим). Таким образом, для подготовленного к печати изображения в системе CMYK нужно 4 байта на пиксел, и далеко не все растровые форматы способны хра­нить такое изображение (чаще всего для этого используется формат TIFF).

В компьютерных графических программах применяется еще одна система представления цвета — система HSV (от англ. Hue-Saturation-Value, тон-насыщенность-яркость; эту же систему называют иногда HSB, Hue-Saturation-Brightness, или HLS, Hue-Lightness-Saturation). Эта система представляет собой абстракцию, моделирующую не физические свойства цвета, а его восприятие человеком. Растровые форматы не используют систему HSV для хранения изображений, но с ее помощью очень удобно подбирать цвет при практической работе

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

 

 

Программирование.

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

Существуют, однако, исключения из этого правила. Ин­тересно отметить, что если до сих пор всегда программы порождали данные и оперировали ими, то в Интернете, наоборот, данные (веб-страницы) могут включать в се­бя и подчинять своим целям программные вставки. Эти «островки интерактивности» — JavaScript-сценарии,

Java- апплеты и даже элементы HTML-форм — до сих пор не стали и, очевидно, никогда уже не станут несущим карка­сом для информации Интернета. Однако во многих случаях программирование способно с выгодой «оживить» статиче­ские веб-страницы и реализовать те функции, без которых невозможно полноценное общение с компьютером, в какой бы среде оно ни происходило.

JavaScript.  Разработанный в 1995 г. фирмой Netscape для версии 2.0 своего броузера язык JavaScript до сих пор остается вспо­могательным, но в то же время абсолютно незаменимым инструментом, позволяющим загруженной в браузер стра­нице динамически управлять своим содержимым, а заодно и собственно браузером. По своему набору функций этот язык близок к макроязыкам, которые с давних пор встра­иваются в любую достаточно сложную программу или систему программ. В отличие от Java, JavaScript-сценарий не замыкается в изолированном апплете (стр. 69), а сво­бодно переплетается и взаимодействует с HTML-разметкой страницы. Будучи тесно связан с HTML, язык этот име­ет сходные недостатки и очень похожий по извилистости жизненный путь.

JavaScript из Netscape 2.0 не умел почти ничего, кроме как открывать и закрывать окна броузера (стр. 198), загружать в них документы, управлять фреймами и взаимодействовать с полями форм (например, проверяя правильность введен­ных в них значений). Сценарий, встроенный в документ с помощью тега SCRIPT, мог вставлять кусочки HTML-кода в то место документа, в котором расположен сам, но не мог ни считывать содержимое других частей документа, ни,  самое главное, изменять текст или графику документа после его загрузки на компьютер пользователя.

В третьей версии броузера Netscape набор объектов, ко­торыми мог манипулировать сценарий, был существенно, хотя и не кардинально расширен. Стали возможными такие трюки, как плавное изменение цвета фона при загруз­ке страницы или «живые» меню, каждый пункт которых изменяется, когда над ним проводишь мышью (эффект «перекатывания». Эти усовершенствования, од­нако, лишь разбудили аппетит

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

такой-то атрибут такого-то тега сценарий может менять динамически, а другие атрибуты этого же тега или аналогичный атрибут другого тега — нет?

Динамический HTML. Недоделанность JavaScript пришлась как нельзя более на руку компании Microsoft, как раз в это время бросившей все усилия на завоевание рынка браузеров. Еще в третьей версии Microsoft Internet Explorer язык сценариев (который фирме пришлось назвать JScript, так как марка JavaScript принадлежала Netscape) отличался от своего конкурента разве что тем, что многочисленные ошибки и упущения в его реализации были расположены в непривычных местах. В четвертой версии, однако, фирма Microsoft решила уйти в отрыв.

Как известно маркетологам, одно из главных условий успеха любой новинки

— запоминающееся название. Чтобы не раз­дражать пользователей путаницей между JScript и JavaScript, фирма Microsoft окрестила комбинацию, включающую расширенный язык сценариев, частичную поддержку CSS2 и несколько мелких усовершенствований, словосочетанием «динамический HTML», — развернув, по своему обыкнове­нию, массированную рекламную кампанию, подающую его как средство от всех без исключения болезней «обычного» HTML. Netscape волей-неволей должна была ответить на вызов и, скрепя сердце, объявила о поддержке динамиче­ского HTML в четвертой версии своего браузера, — хотя его возможности имели довольно мало общего с набором технологий Microsoft.

Основную идею динамического HTML можно сформулиро­вать очень просто: полный контроль языка сценариев над всеми без исключения элементами документа, параметра­ми их оформления и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и даже над самим текстом страницы. Благодаря этому любой элемент HTML-документа сможет двигаться в произволь­ном направлении, как угодно изменять свое формати­рование и буквально переписываться — как в ответ на действия пользователя, так и по собственной инициативе. В сочетании с абсолютным позиционированием элемен­тов средствами CSS это позволяет реализовать на веб-странице почти полноценный программный интер­фейс с выпадающими многоуровневыми меню, перетаскиванием объектов мышью и т. п.

До сих пор, впрочем, динамический HTML особого рас­пространения в Интернете не получил, и для этого есть объективные причины. Главную роль играет, конечно, несовместимость браузеров-конкурентов, из-за которой очень трудно, а в некоторых случаях и невозможно создать од­ну версию динамической страницы, которая сохраняла бы работоспособность в обоих браузерах. Сказывается также конкуренция со стороны формата Shockwave Flash, в кото­ром можно реализовать не менее интерактивные эффекты, чем в динамическом HTML, который притом полностью застрахован от несовместимостей (существует только один, разработанный самой фирмой Macromedia подключаемый модуль для просмотра Flash-вставок) и имеет стандартную специализированную среду разработки. Конечно, с доступ­ностью информации в неграфических средах  у Flash дела обстоят куда хуже, чем у динамического HTML, но графические дизайнеры, к сожалению, редко задумываются о таких вещах.

Как всегда с опозданием, свое слово сказал и W3C. Разработанный им стандарт «объектной модели докумен­та» (Document Object Model, DOM) подробно описывает взаимодействие встроенного в веб-страницу сценария с эле­ментами документа, перечисляя все возможные действия, свойства и взаимозависимости для объектов, на которые распадается содержимое документа с точки зрения сцена­рия. Пока достаточно близко к этим предписаниям подошел только броузер Microsoft.

Спецификация DOM оперирует достаточно общими прин­ципами и потому не зависит ни от конкретного языка разметки документа, ни от языка сценариев. В то же время стандартизации не избежал и сам JavaScript; его «официальная», в общественном пользовании находящаяся версия называется  ECMAScript (стандарт этот был создан не  W3C, а европейской промышленной ассоциацией ЕСМА). Интересно следить за тем, как компании, всегда стре­мившиеся любыми средствами добиться преимущества над конкурентами и по возможности монополизировать свой сектор рынка, начинают уступать инициативу независимым организациям-стандартизаторам (состоящим, впрочем, из представителей тех же самых фирм-конкурентов), посте­пенно осознавая важность единых и обязательных для всех «правил игры».

Модульные технологии. Недостатки JavaScript, как это обычно бывает, продолжают его достоинства. Тесная связь с HTML позволяет (по крайней мере, в идеале) сво­бодно манипулировать материалом страницы, но сильно ограничивает репертуар доступных этому языку «общеком­пьютерных» функций, которые бы позволили реализовать на веб-странице фрагменты по-настоящему интерактивного интерфейса.

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

К сожалению, существует сразу несколько препятствий к реализации этой простой схемы.

§        Исполняемый файл программы, скомпилированной для одной компьютерной платформы (например, для Windows 95), не будет работать на другом типе компьютеров (например, на Макинтоше) или в другой операционной системе (например, в DOS). Веб-страница не имеет возможности выяснить, в какую операционную систему она попала на компьютере пользователя, так что выбор нужной версии программы из нескольких имеющихся отпадает. Это ограничение можно обойти, пересылая с сервера не готовый к исполнению двоичный код, а исходный текст программы на языке програм­мирования, с тем чтобы компьютер пользователя само­стоятельно превращал его в понятный ему код. Такое решение, однако, имеет свои недостатки: потерю зна­чительной части быстродействия, незастрахованность от ошибок при компиляции и необходимость устанавливать на компьютер наряду с браузером еще и интерпретатор языка программирования (который будет тем объеми­стее, чем больше возможностей предоставляет данный язык).

§        Давать любому желающему возможность выполнять на вашем компьютере свои программы — более чем риско­ванная затея. В отличие от JavaScript-сценария, в котором соответствующих средств нет и не может быть в прин­ципе, программа на обычном языке программирования способна заразить вас вирусом, попортить данные на вашем диске или уворовать конфиденциальную инфор­мацию.

§        Наконец, довольно трудно обеспечить небольшой объем файла с программой, приемлемый для перекачивания по сети. Если графику всегда можно попытаться опти­мизировать, уменьшив ее размер за счет некоторой потери качества, то объем файла программы почти не поддается изменению без существенного усечения ее функций.

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

§        Технология подключаемых модулей (plug-in modules) под­разумевает наличие двух компонентов: общего для всех объектов данного типа модуля, который достаточно пе­рекачать из сети один раз и установить на компьютере пользователя как обычную программу, и подключаемых к HTML-странице объектов. Последние интерпретиру­ются и выводятся на отведенное им место в пределах страницы соответствующим модулем, запуск которого (как правило, в фоновом режиме, т. е. без создания соб­ственного окна) берет на себя броузер.

Объекты могут состоять исключительно из данных — например, звукозаписи или изображения в особом фор­мате, обрабатываемом только этим модулем. Если же они включают в себя и программный код, то объем его, как правило, невелик, так как самая трудоемкая часть до­ступных объекту функций реализована внутри основного модуля. Это позволяет добиться небольших объемов пе­ресылаемых по сети данных (разумеется, «небольшими» они будут только после того, как пользователь перекачает себе сам модуль, объем которого редко опускается ниже мегабайта).

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

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

§        Апплеты на языке Java, при всех своих особенностях, имеют немало пунктов сходства с подключаемыми мо­дулями. Основную часть выполняемой апплетом работы берет на себя не передаваемый по сети объект ми­нимального объема, а большая программная система, называемая «виртуальной машиной Java» и устанавлива­емая на компьютер пользователя только раз (в отличие от подключаемого модуля, пользователю не приходится перекачивать ее из сети, так как оба визуальных браузера поставляются уже со встроенными виртуальными маши­нами). Подключаемый к веб-странице объект содержит так называемые «байтовые коды» — нечто среднее между исходным текстом и скомпилированным двоич­ным файлом программы, компромисс между идеалами быстродействия и переносимости.

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

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

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

Java-апплеты можно считать достаточно безопасной технологией.

К сожалению, виртуальная машина у каждого из броузе­ров своя, и, несмотря на декларируемую совместимость между ними, апплет, который работает на одной из этих машин, иногда может отказаться работать на другой. Кроме того, как и любая многоуровневая система, Java- апплеты в сравнении с обычными программами сильно проигрывают в быстродействии. Наконец, необходи­мость «настоящего» программирования для изготовления апплетов обуславливает трудоемкость этого процесса. С другой стороны, наличие готовой виртуальной маши­ны почти на каждом компьютере и, опять-таки, богатые возможности полнофункционального языка программи­рования открывают перед этой технологией определен­ные перспективы. Так, уже упоминавшаяся технология Macromedia Flash (стр. 58) позволяет сохранять Flash- «мультики» в виде Java-апплетов, для работы которых не нужен установленный на компьютере Flash-модуль.

§        Одно время Java-апплетам пытались составить кон­куренцию так называемые «компоненты ActiveX» — технология фирмы Microsoft, ограниченная только бро­узером Internet Explorer и только платформой Windows. Это наделавшее поначалу много шума, но быстро за­бытое нововведение интересно отсутствием какой бы то ни было «прокладки» между программным модулем (по сути, обычным исполняемым файлом в форма­те Windows) и операционной системой. Для решения проблемы безопасности была разработана система «элек­тронных подписей» с регистрацией законопослушных авторов ActiveX-апплетов у спонсируемых Microsoft «ци­фровых нотариусов». Неудивительно, что эта громоздкая система оказалась нежизнеспособной. В настоящее вре­мя изредка используются лишь ActiveX-объекты самой фирмы Microsoft, поставляемые вместе с ее броузе­рами.

В Windows-версии броузера Internet Explorer (начиная с версии 4) тех­нология ActiveX является не одним из усовершенствований, а букваль­но фундаментом всей программы. При запуске броузера управление получает контейнер, сразу же вызывающий

ActiveX-модуль, в котором, собственно, и заключены все функции броузера. Любой программист может, таким образом, без труда встроить в свою программу самый настоящий броузер, написав всего лишь небольшую функцию для вы­зова этого модуля и обмена данными с ним. Отдельные функциональ­ные блоки броузера — виртуальная машина Java, интерпретатор HTML и даже сам блок взаимодействия с органами управления ActiveX — ре­ализованы в виде ActiveX-модулей.

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

По некоторым оценкам, больше половины всех страниц в современном Интернете генерируются и обновляются ди­намически — на основе информации из баз данных, в ответ на действия пользователя или в зависимости от каких-то внешних обстоятельств (например, текущей даты или курса доллара). Простейшая технология такого рода, поддержива­емая почти всеми веб-серверами, называется SSI {Server Side Include, «Вставки на уровне сервера»). Возможности ее огра­ничены вставкой внутрь одного HTML-файла содержимого другого, автоматической установкой даты, подсчетом числа загрузок страницы и т. п. Из более сложных технологий создания динамических сайтов особенно популярны две: CGI и ASP.

Стандарт CGI (Common Gateway Interface, «Общий интер­фейс шлюзов»), поддерживаемый большинством программ- серверов, не накладывает каких-либо ограничений на ис­пользуемый язык программирования, а лишь перечисляет правила, которые должна выполнять программа, генериру­ющая веб-страницу, чтобы сервер мог запускать ее в ответ на запрос документа с определенным URL. Однако по­скольку большинство таких программ пишутся на специ­ализированном языке Perl, термины «CGI» и «Perl» часто употребляются как синонимы. Стандарт CGI достаточно

прост и, в частности, ничего не говорит о взаимодействии с какими бы то ни было базами данных, оставляя этот аспект целиком на совести самой CGI-программы и того ЯЗЬ1Ка, на котором она написана. Язык Perl не является собственностью какой-либо фирмы, и существуют бесплат­но распространяемые интерпретаторы этого языка для всех операционных систем.

Альтернатива CGI, появившаяся в последнее время, — язык ASP (Active Server Pages, «Активные страницы на сервере») фирмы  Microsoft (вполне естественно, что поддержка ASP существует пока только в веб-сервере IIS этой же фирмы). д5Р-код хранится не в отдельных объектах, а встраива­ется прямо в HTML «активной» страницы, но в отличие от JavaScript никогда не выходит за пределы веб-сервера. Инструкции языка ASP позволяют генерировать фрагменты HTML-кода, выбирать один из вариантов кода в зависи­мости от каких-то условий, циклически повторять куски HTML с изменениями и т. п. ASP-файл может состоять це­ликом из

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

всех команд ASP. С практической точки зрения главным достоинством ASP являются развитые средства доступа к ба­зам данных, многие из которых, как и веб-сервер  Microsoft, работают на платформе Windows NT.

 

 

Основы дизайна.

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

От читателей моих статей по веб-дизайну, публикуемых по адресу www.webreference.com/dlab/,  я получаю немало писем с одобрением их скорее теоретической, чем практи­ческой направленности (особенно выделяющейся на фоне бесчисленных сайтов с «How То» и «Тор Ten Dont's», на разные лады повторяющих небольшой набор разрозненных практических советов). Многие читатели спрашивают, где начинающий веб-дизайнер — иногда поневоле, иногда по зову сердца окунувшийся в эту область творчества, но ни­когда не учившийся в художественном училище и даже не  очень хорошо представляющий, чему там учат, — мог бы найти достаточно полный и в то же время по возможности популярный курс основ дизайна.

Хорошие книги по теории дизайна, конечно, есть. Но вместо того, чтобы опираться на авторитет классиков, я решил сам написать небольшое введение в предмет.

Поводов для такого решения несколько. Во-первых, тема моей книги — именно

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

Наконец, есть еще одна причина, без которой я бы не рискнул взяться за столь ответственное дело, как написание учебника дизайна. Причина эта заключается в свойствах дизайна как науки (разумеется, я вынужден здесь подхо­дить к дизайну именно с этой точки зрения, поскольку «учебник искусства» — не очень-то осмысленное сочетание слов).

Подыскивая аналог теории дизайна среди наук традици­онных, нельзя не заметить, что она стоит гораздо ближе к таким гуманитарным дисциплинам, как философия или филология, а не к точным наукам вроде математики. Как и в дизайне, в философии есть свои общепризнанные фак­ты, принципы и подходы, истинность которых никто не подвергает сомнению. Однако ценность нового философ­ского сочинения определяется все же свойствами скорее субъективными: новизной идей, убедительностью аргументации, иногда даже достоинствами литературного стиля. Философскую систему невозможно опровергнуть в принци­пе — она живет по своим собственным законам, и Витген­штейн не «опровергает» Платона, хотя и противоречит ему на каждом шагу.

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

Как учиться дизайну. Философия эта, как и любая философия, родилась из наблюдений, размышлений и со­поставлений. Я совсем не хочу, чтобы вы всегда и во всем разделяли мою точку зрения; моя цель — не вербовать сто­ронников, а сделать так, чтобы после прочтения этой книги вы глубже понимали свое ремесло и свободнее чувствовали себя с палитрой дизайнера в руках. Поэтому я призываю вас сразу же проверять все почерпнутые здесь знания своей практикой и анализом чужих работ и не пугаться, если ваши выводы не совпадут с моими. (И разумеется, я всегда буду рад услышать от вас любые комментарии или возражения как по теоретическим, так и по самым что ни на есть прак­тическим вопросам веб-дизайна. Пишите мне по адресу: dmitry@kirsanov.com.)

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

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

Дизайн и «чужое творчество». Попробуем теперь определить место той области визуального творчества, кото­рой мы собираемся заниматься, среди других видов дизайна. Из жанров более или менее традиционных веб-дизайн бли­же всего стоит к дизайну книг и журналов, скрещенному с дизайном интерактивных компьютерных программ. Кое- какие черты он унаследовал также от дизайна рекламы, теле- и видеопродукции. Пожалуй, вернее всего определить эту смесь термином информационный дизайн, так как его главное назначение — помогать потребителю воспринимать и усваивать некую информацию, а не, скажем, пользо­ваться вещью (промышленный дизайн) или делать выбор (реклама).

Что же определяет дизайн как таковой, что отличает его от других визуальных искусств? Помимо очевидно утили­тарного назначения, одно из главных отличий заключается в том, что дизайнер использует в своей работе — а нередко и кладет в ее основу — не им созданные художествен­ные ценности. Не только текстовое содержимое сайта или страницы принадлежит обычно другим людям; нор­ма в профессиональном дизайне сегодня — использование покупных фотографий, заказной графики, не говоря уж о создаваемых специализированными компаниями шриф­тах. Как и в других областях массового производства (а дизайн в современном обществе

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

Веб-дизайн, однако, в массе своей есть явление любитель­ское — и таким он,

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

Разумеется, чтобы решиться потратить даже несколько долларов на образец «чужого творчества», вы должны хо­рошо представлять себе, для чего он вам нужен, — что само по себе уже предполагает некую степень професси­онализма. К сожалению, многие начинающие дизайнеры предпочитают вместо этого пользоваться наихудшей из всех разновидностей «чужого творчества»: рисуемыми и бес­платно раздаваемыми такими же любителями кнопками,       garbage m. garbage out линейками, фонами и прочей «графикой для оформления сайтов».

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

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

 

 

 

 

Пространственные отношения.

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

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

— пространственные отношения, к которым относятся пропорции (соотношения размеров) и взаимное расположение элементов.

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

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

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

Относительность размера. Первый и самый су­щественный фактор — размер всей композиции, частью которой является элемент. Человеческое восприятие необычайно гибко, и когда мы рассматриваем миниатюру на перстне, наши понятия о большом и маленьком совсем другие, чем когда мы смотрим на фреску во всю стену. По сути, в дизайне нет понятия абсолютного размера, а есть лишь относительный, кажущийся, перцептивный размер в данных условиях и данном окружении. Редко когда можно заимствовать элемент из одной композиции в другую, пусть даже почти идентичную, без подгонки его размеров по месту (то же, конечно, справедливо и в отношении других свойств объектов). И никогда нельзя устанавливать размеры объектов, исходя из чисто умозрительных соображений — вам обязательно понадобится ручная, «на глазок», подгонка с тем, чтобы элемент не обязательно был, но обязательно казался нужного размера.

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

Форма и размер. Зачастую объекты имеют сложные, почти аморфные очертания, затрудняющие даже приблизительное определение их размеров. Взять, напри­мер, букву позаковыристее из какого-нибудь шрифта с за­сечками — от каких точек правильнее всего отсчитывать ее ширину и высоту?

Интуитивно ясно, что такого рода сложные формы рас­падаются на «важные» (в нашем случае это основные штрихи буквы) и «неважные» (засечки) элементы, и при определении субъективного размера неважные элементы учитываются лишь частично или игнорируются вообще. Важность компонентов формы, однако, сама зависит не только от формы, но и от размера — в крупном кегле засечки труднее игнорировать, чем в мелком. Соотноше­ние важных и неважных частей (их можно также назвать «ядром» и «оболочкой») определяет компактность формы, очень сильно влияющую на ее воспринимаемый размер

   

(рис. 2). Теоретически максимальной компактностью обла­дает окружность (не имеющая «оболочки» вообще), ми­нимальной — сложные фигуры с выступами и пустотами, лишенные какой-либо логики формы.

Но это лишь один из аспектов. При всевозможных вы­равниваниях элементов друг относительно друга большое значение имеет то, насколько резко форма кон­чается в направлении, перпендикулярном отсчитываемому размеру. Так, круг и квадрат на рис. 3, а одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в од­ной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы («о», «с») выступают вниз за базовую линию шрифта — только эта небольшая (2—3%) искусственная неправильность, называемая наплы­вом, позволяет создать впечатление равной высоты букв в строке (рис. 3, б).

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

Искусство выравнивания текста. Рассмотрим более подробно при­мер с различными формами букв. Допустим, стоит задача визуально вы­ровнять правый край строки текста по некоей вертикали — например, по габаритной вертикали прямоугольника, под или над которым расположен текст. Если используется шрифт без засечек и текст кончается, напри­мер, буквой «н», никаких проблем не возникает: мы просто выравниваем правый край последней буквы по требуемой вертикали. Если же послед­ней буквой является, скажем, «т», буква с закруглением типа «ь» или же «н» из шрифта с засечками, то выступающие горизонтальные штрихи или закругления обязательно должны немного свешиваться за вертикаль вы­равнивания. Если же в конце стоит точка или запятая, ее нередко выносят

за линию выравнивания целиком (так называемая «висячая пунктуация», пример которой показан на рис. 39.

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

Цвет и размер. Поскольку понятие «воспринимаемого размера» тесно граничит с понятием «заметности» элемента, вполне естественно, что цвет может существенно влиять на эту характеристику. Чем контрастнее цвет элемента на фоне его окружения, тем он заметнее и тем кажется больше. У этого правила, однако, есть и обратная сторона: если контраст между объектом и фоном слишком мал, границы его становятся трудноразличимыми и субъективно он может восприниматься большим, чем на самом деле (особенно если общий спектр композиции достаточно темен — «у страха глаза велики» отчасти и потому, что страх может вызываться темнотой).

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

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

             

воспринимаемого образа объекта, чтобы «дать место» всем его прожилкам, морщинам и пупырышкам.

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

Если элементы узора или текстуры вытянуты в каком-то одном направлении, сама фигура также будет выглядеть удлиненной в этом направлении и сплющенной в перпен­дикулярном (рис. 5, а). На этом основан известный совет полным людям носить одежду с продольными, а ни в коем случае не поперечными полосами. Интересно, однако, что именно в случае узора из простых полосок следование этому совету может дать совершенно обратный эффект: так как при движении глаза поперек полос узор выглядит значи­тельно пестрее и потому визуально «тяжелее», чем вдоль, полосатый квадрат всегда кажется шире в направлении, пер­пендикулярном полосам (рис. 5, б).

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

Золото и пластмасса. Архитекторы и художники древности придавали огромное значение выбору пропорций. Некоторые из их открытий, такие как «золотое сечение» (рис. 6), вполне могут пригодиться и сегодняшнему ди­зайнеру, но в целом классический подход к определению пропорций, обычно заключающийся в вычислении разме­ров по формулам, в современном дизайне применяется редко. Субъективность размеров, о которой мы говорили в предыдущем разделе, делает субъективными и пропорции, и нет никакого смысла вычислять габариты прямоугольников с точностью до третьего знака после запятой, если их воспринимаемый размер все равно будет отличаться  от реального из-за факторов, о которых не задумывались художники эпохи Возрождения. Современный дизайнер выбирает пропорции почти исключительно «на глазок», добиваясь нужного ему соотношения активностей элемен­тов не только варьированием размеров, но и с помощью множества других инструментов.

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

Пропорций простота.  Можно лишь указать на отно­сительную популярность простейших пропорций — в пер­вую очередь равновеликости объектов, а также кратных соотношений их размеров (1:2, 1:3), что является следстви­ем общего принципа единства и экономии средств («не следует усложнять без необходимости»). Но точно так же не следует и увлекаться простотой — композиция, где все выровнено со всем, может показаться скучной. Удобно представить себе что-то вроде наложенной на вашу страни­цу координатной сетки, ячейки которой имеют размер того или иного выдающегося элемента, и учитывать стремление других элементов «прилипать» (наподобие функции «snap» в векторных графических редакторах) к линиям этой сет­ки — лишь учитывать, впрочем, а отнюдь не безоговорочно подчиняться этому их стремлению.

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

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

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

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

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

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

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

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

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

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

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

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

Если однородные элементы достаточно велики по размеру или сложны по конфигурации (например, абзацы текста), может оказаться необходимым снабдить их однотипны­ми, достаточно заметными и даже выступающими по форме точками привязки, по которым эти элементы будут выравни­ваться и которые сделают более заметной и выразительной их линейную последовательность. В случае абзацев роль таких точек часто выполняют маркеры списка (то, что по-английски называется bullets — адекватного русского термина, видимо, еще не найдено), а в случае кнопок на навигационной панели — одинаковые по размеру и стилю пиктограммы, символизирующие функцию каждой кнопки, или же просто отрезки линий, кружки, треугольники и тому подобные маркеры, объединяющие кнопки в единое целое и одновременно как бы говорящие: «это кнопка, а не просто надпись».

Если элементов столько, что все они не умещаются в один горизонтальный или вертикальный ряд, неизбежен выход в новое измерение — построение двумерной «таблицы» элементов. Здесь можно порекомендовать выделить одно из направлений (горизонтальное или вертикальное), сблизив элементы по этому направлению заметно сильнее, чем по перпендикулярному. Это позволяет достичь группирования на двух уровнях и, как результат, более оживленных и раз­нообразных пространственных отношений в композиции (особенно если такое группирование оправдано содержи­мым элементов). При этом следует учитывать и пропорции самих элементов, как показано на рис. 8. Преимущества од­ного из направлений перед другим можно достичь и другими способами — например, только вертикальной или только горизонтальной разлиновкой, чередованием фонового цвета в строках или столбцах таблицы. Из других типов размещения одноуровневых элементов следует особо вы­делить намеренно случайное, хаотическое расположение — весьма силь­нодействующий композиционный прием, почти всегда выступающий на первый план (а потому применимый только к элементам, которые са­ми по себе достаточно активны в композиции) и обязательно требую­щий поддержки со стороны других элементов. Хотя прием этот популярен в современном дизайне, пользоваться им нужно с большой осторожно­стью; у профессиональных дизайнеров «псевдослучайное» расположение, как правило, прочно зафиксировано множеством малозаметных нюансных координации. Любители же, чувствуя носящуюся в воздухе моду на разбросанность, обычно вытесняют этот прием на задворки компози­ции, применяя хаотическое расположение для элементов заднего плана — так возникают бессчетные фоны со «звездным небом» или «мятой бума­гой», беспорядочность которых только раздражает (еще и потому, что она нередко сочетается с назойливой повторяемостью изразца фонового изо­бражения).

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

  

 

 

 

 

вписать их в композицию, и далеко не всегда эти усилия вознаграждаются по заслугам.

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

веб-страницы (с ло­готипом, навигационной панелью и т. п.), а «текстом» — все остальное содержимое этой страницы.

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

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

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

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

Плотность Нам осталось рассмотреть, чем определяется соотношение заполненного и пустого пространства при различных видах размещения. Вспомним понятие компактности фор­мы, введенное; плотность размещения является аналогом этого понятия для случая двух и более элементов, как-либо скомпонованных на плоскости страницы. Очевид­но, что прежде всего плотность композиции должна быть увязана с компактностью составляющих его элементов — как правило, компактные формы требуют более плотного размещения, чем «дырявые».

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

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

пространством от соседних элементов. Такой рваный, син­копический ритм плотности бывает совершенно необходим для свободного и выразительного звучания материала (при­мер 6, см. раздел «Галерея»).

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

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

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

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

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

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

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

       

 

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