Те же и 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 и не представлял собой ничего

26

выдающегося, сможет составить конкуренцию 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 считает главной угрозой для своего могущества.

Техника

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

245

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

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

Текст и фон

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

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

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

Необычные цветовые решения веб-страниц можно разбить на две большие группы: с темным текстом на светлом фоне и со светлым текстом на темном фоне. Вторые

114

Рис. 22

 (см.     цветную вкладку, стр. 114)

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

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

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

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

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

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


Вообще, для эффективного

115



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

Сайт www.chess.ibm.com  (пример 1?) являет собой великолепный образец сбалансированного цветового дизайна. Его светлый, но притом достаточно насыщенный фоновый цвет (#СССС99) выразителен сам по себе и не требует поддержки со стороны текста, для которого выбран слегка смягченный черный цвет (#333333). Для ссылок использован кон­трастный, но равным образом смягченный синий (#0033FF). Остальные графические элементы поддерживают эту разнообразную, но абсолютно лишенную пестроты цветовую гамму.

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



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

116

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

На втором месте по популярности после чисто черного фона стоят насыщенные холодные цвета — такие как, например, бархатно-синий фон сайта www.verso.com  (пример 19). Для текста, наоборот, популярны оттенки теплых цветов, в особенности желтого, призванного сим­волизировать золото. Необычный цветовой колорит сайта www.bdaweb.com  (пример 13) объясняется полным от­казом от цвета как такового — темно-серые буквы на черном фоне привлекательны своей сдержанностью, хотя они выглядели бы мрачновато, если бы не ярко-оранжевый цвет логотипа и ссылок.

Текст как текстура

Сходство этих двух слов не случайно. Текстура, определенная как форма, сложность которой превышаетет возможности одномоментного восприятия, находит в тексте свое самое яркое воплощение. Если не углубляться сразу же в чтение, а окинуть страницу беглым, «расфокусированным» взглядом, блоки текста предстанут перед вами как формы (стр. 91), заполненные специфической текстурой (стр. 116) серого цвета определенной яркости (стр. 101). (Разумеется, серым этот цвет будет только для черного текста на белом фоне или наоборот.)

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

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

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

149

в двух соседних абзацах при сохранении шрифта и всех остальных параметров недопустимы.

Текстовая разметка

О возможностях HTML и CSS в области разметки текста довольно подробно рассказывается в гл. III Здесь мне хотелось бы еще раз подчеркнуть врожденную двуплановость языка HTML, сплетенность в нем средств структурной и визуальной разметки, которая особенно Четко проявляется именно в текстовой части документа Использование минимума структурных тегов, результатом которого является «академический стиль» (стр. 150), — самый разумный выход для тех, кому не очень-то нужен

30

какой  бы то  ни  было дизайн  или  нет средств  на  его создание.

Текстовые выделения

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

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

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

Текстура

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

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

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

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

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

275

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

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

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

Рис. 67

Логотип AT&T был создан в 1982 г., в самом начале повальной моды на ими­тацию трехмерности, и именно этот прием лежит в основе его «скрытого смысла»

Текстура и размер

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

82

(а)

(б)

Рис. 5

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

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

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

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

Текстурирующие эффекты

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

Рис. 76 «Большой,   но   за пять или маленький, но за три»

300

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

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

Другой источник оптической размытости — быстро дви­ жущиеся объекты, представляющиеся человеческому глазу (и объективу фотоаппарата) размытыми вдоль направления движения. Соответственно, фильтры направленной раз­мывки, такие как Motion Blur и Wind в Photoshop, часто применяются для придания динамики статическим объектам и для подчеркивания движения того, что само по себе уже движется (например, элементов анимированных рекламных баннеров). Так, в примере 16 горизонтальное строение страницы подчеркивается горизонтальной же размывкой заголовка «IDEO» вверху, — подразумеваемое движение которого превращается в реальное в момент прокрутки страницы (см. также стр. 168).

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

Эффекту размывки родственны разнообразные искажения, отражающие изображение в кривом зеркале или волную­щейся поверхности воды (в Photoshop к этой категории относятся Ripple, Smear, Spherize, Pinch и др.). Иногда эти виды искажений применяются для создания трехмерных эффектов (например, развевающегося флага), а некоторые из них подразумевают и определенную размывку частей изображения. Чаще всего, однако, эти фильтры дают откро­венно юмористический эффект в применении к легко узна­ваемым объектам (например, к человеческому лицу) и не дают вообще никакого осмысленного эффекта в остальных случаях (если закрутить спиралью и без того бесформенное облако, ничего особенно интересного не получится).



Противоположный эффект дают фильтры, сводящие фо­тографические текстуры к плоским. Одни из них (филь­тры Cutout, Fresco) аппроксимируют исходное изображение областями плоского цвета (похожий эффект дает сохра­нение картинки в формате GIF с малым количеством цветов без диффузии), другие пытаются найти в изображе­нии и сделать видимыми контуры, т. е. достаточно резкие границы между объектами (фильтры Find Edges, Trace Contour). Дизайнерская ценность этого рода преобразова­ний заключается именно в контрасте очевидно фотогра­фического происхождения изображений с их абстрактным, почти геометрическим представлением. По этой же причи­не интересно бывает поэкспериментировать с трассировкой фотографий в векторном редакторе (стр. 100).

302

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

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

303

Текстуры

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

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

11?

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

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

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

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

The frame of reference

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

194

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

Общее число пикселов по горизонтали и вертикали обыч­но называют «разрешением» компьютерного экрана, хотя правильнее называть эту величину размером (ведь она из­меряется в пикселах, а не в пикселах на дюйм). Величина эта может различаться в разы — от 1600 на 1200 пикселов и выше в самых дорогих графических рабочих станциях до 640 на 480 у графического адаптера VGA, самого старого из все еще применяемых в IBM-совместимых компьютерах. Однако и это значение — 640 пикселов по горизонтали — еще нельзя принимать за искомый минимум: нужно учесть, что любое окно на экране компьютера имеет рамку и (почти всегда) вертикальную полосу прокрутки, а веб-страница в окне броузера окружена определенной величины полями. С учетом всех этих наслоений ширина страницы не должна превышать 600—610 пикселов, а если рассчитывать на поль­зователей со старыми моделями Макинтошей — то и еще меньше, около 580.

Типы сайтов

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

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

Топология сайта

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

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

И наоборот, если материал выстраивается в логическую Цепочку — как, к примеру, главы одной книги или

186

Рис. 47

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

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

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

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

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

Трехмерность

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

291

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

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

Три, четыре...

 Одновременно с разработкой конкурен­тоспособного броузера 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, и чаще всего такое тестирование не обходится без неприятных сюрпризов: отступы, пробелы, размеры элементов оформления и логика их размещения на странице даже для простейших тегов различаются довольно сильно.

У голубого экрана

 Получившиеся минимальные габариты видимой ча­сти страницы — 580 на 350 пикселов — определяются разрешением экрана массовых персональных компьютеров PC и Макинтош. Однако недавно появилось еще одно устройство для доступа к сети — гибрид компьютера и телевизора под названием WebTV (www.webtv.net ). Коробочка с мо­демом, процессором и зашитым в нестираемую память броузером, ценой около 200 долларов, позволяет путешествовать по сети, читая веб-страницы с экрана своего телевизора и выбирая ссылки при помощи пульта дистанци­онного управления (для ввода текста в поля бланков можно присоединить отдельно продающуюся клавиатуру).

Для дизайнера WebTV прежде всего интересен более жесткими ограничени­ями на формат страницы. Размер рабочей части экрана на всех устройствах этого типа один и тот же — 544 на 376 пикселов, и изменить его пользова­тель не может. А хуже всего то, что при более узком, чем у компьютерных броузеров, экране это устройство не позволяет прокручивать страницу по горизонтали — если что-то вылезет за правую границу экрана, оно так и останется недоступным. Очевидно, ограничения WebTV нет смысла учи­тывать в дизайне русскоязычных сайтов, так как в России эти устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже заметный и постоянно увеличивающийся процент.

Удар ниже пояса

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

Первыми появились баннеры с изображениями полей вво­да, кнопок «Искать», «Перейти», «Показать» и списков

285

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

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

286

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

Уровни соответствия

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

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

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

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

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

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

<СКАЗУЕМОЕ тип="простое"> <ГЛАГОЛ>  мыла </ГЛАГОЛ>

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

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

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

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

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

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

Устройство сайта

Слово сайт (англ. site) утвердилось в русской интернетовской терминологии срав­нительно недавно. Раньше, в 1995—1996 годах, в том же или примерно том же значении применялись сочетания «стра­ница WWW», «узел WWW» или «WWW-сервер».

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

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

В мире .org

 He столь многочисленная, но куда бо­лее интересная разновидность веб-сайтов — сайты неком­мерческие, принадлежащие всевозможным добровольным объединениям, временным проектам, международным или благотворительным организациям. К этой же категории можно отнести и многочисленные страницы учебных за­ведений, университетов и научных центров, официальные сайты некоммерческих программных проектов (например, www.lynx.browser.org ), а также организаций вроде ISO (www.iso.ch  ) или Консорциума W3 (www.w3.org ).

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

181

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

В начале был SGML

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

20

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

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

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

В начале было что-то

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

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

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

283

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

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

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

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

В нужное время и в нужном месте

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

91

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

От чего же зависит CTR баннера? Прежде всего, огромное влияние на этот показатель оказывают внешние по отношению

278

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

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

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

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

279

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

В полный рост

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

154

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

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

Вектор

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

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

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

57

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

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

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

Вектор в Интернете

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

58

на роль одной из ключевых технологий Интернета. Если до сих пор векторные изображения встречаются на веб-страницах довольно редко, то объяснить это можно лишь обилием конкурирующих технологий и нежеланием их вла­дельцев открывать доступ к техническим спецификациям своих форматов, — что является одним из обязательных условий их стандартизации Консорциумом 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 распростра­няется бесплатно и существует как в виде подключаемого модуля для броузера, так и в виде самостоятельного прило­жения.

59

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

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

Ветер по Гауссу

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

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

169

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

Входные цвета

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

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

308

веб-дизайне категорическим императивом, при прочих рав­ных все же дает определенные преимущества. После ряда проб я остановился на паре, состоящей из яркого желтовато-зеленого (#99ссЗЗ) для «k» и темного насыщенного зеленого (#003300) для «d» (см. стр. 33S).

Нетренированному взгляду, возможно, трудно будет заме­тить, что цвета эти различаются по тоновому компоненту. Поскольку в темных цветах компонент тона менее очевиден для глаза, для темного цвета я выбрал «более зеленый» тон (у этого цвета H = 120, ровно в середине зеленой области спектра). Для яркого же цвета можно было поискать менее очевидный тон, находящийся примерно посередине между зеленым и желтым (Н = 80). Интересно также отметить, что темный цвет имеет максимальную насыщенность (S = 255), тогда как ярко-зеленый, хотя и кажется необычайно «цвет­ным», на самом деле далек от полной насыщенности (S = 191).

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

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

309

Рис. 79 (см. цветную вкладку, стр. 335)

мотивов (как вы помните, градиенты вводят принципиально новый тип текстур, стр. 120).

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

Виды начертаний

 Из начертаний внутри одной гар­нитуры чаще всего используются прямое (англ. rотап) и курсивное (italic). Последнее призвано имитировать на­клоненный вправо, более округлый и беглый рукописный почерк, сохраняющий тем не менее графические особен­ности прямого начертания и хорошо сочетающийся с ним. Курсивная разновидность есть у всех текстовых шрифтов с засечками и у большинства рубленых шрифтов, хотя для последних создать близкий по стилю курсивный вариант значительно труднее, и некоторые из рубленых и моно­ширинных шрифтов употребляют вместо курсива просто слегка перекошенное вправо (англ. oblique) основное начер­тание (рис. 2,7). Большинство декоративных шрифтов не имеют курсива вообще.

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

abcdef abcdef abcdef abcdef

abcdef abcdef

Рис. 27

Принципы постро­ения курсива у шрифтов с засечками (Тайме), рубленых (Гельветика) и моноширинных (Курьер)

126

abcdefghijklmnopqr

abcdefghijklmnop abcdefghijklmm abcdefghijklir

Рис. 28 Рубленые шрифты обычно имеют богатый набор вариации насыщенности

сверхжирное (extra bold) начертания (рис. 28). Шриф­ты с засечками, как правило, ограничиваются обычным и полужирным начертаниями. Декоративные шрифты редко имеют вариации насыщенности.

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

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

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

Визуал

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

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

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

Внутренние страницы

Рис. 90 (см. цветную вкладку, стр. 336)

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

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

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

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

321

Рис. 91

(см.     цветную вкладку, стр. 336)

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

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

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

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

Во первых строках

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

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

196

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

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

Восприятие цвета

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

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

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

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

110

любого непрофессионала, и этого же он ожидает и от любой композиции на экране компьютера или на бумаге.

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

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

Возможности

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

<

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

43

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

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

Любые технологии форматирования текста, предназначенные для Интерне­та, вынуждены учитывать ограниченную пропускную способность каналов связи (стр. 177) и тот факт, что пользователям вряд ли понравится ждать загрузки документа целиком, не имея возможности начать его чтение. Все реализации HTML и CSS выводят текст на экран по мере его поступле­ния из сети и, следовательно, не могут вернуться назад и перерисовать то, что уже выведено. Это на первый взгляд несущественное ограничение делает невозможным не только многие специальные эффекты, в которых содержимое или форматирование одной части документа зависит от дру­гой, но и просто достаточно качественную верстку текста. К примеру, система TEX, прежде чем сверстать абзац текста, прочитывает его до конца и пробует разные варианты разбиения его на строки, минимизируя общее количество слишком тесных или слишком растянутых строк, переносов, висячих строк и прочих отклонений от идеала. Понятно, что ничего похо­жего нельзя ожидать от броузера, который выводит каждую строку текста, как только получает достаточно материала для ее заполнения (если только текст не заключен в таблицу, стр. 235).

Все шрифты ношу с собой

Официальная специ­фикация технологии встраивания шрифтов (font embedding), разработанная Консорциумом W3, является частью специ­фикации CSS уровня 2 (стр. 40). CSS не задается вопросом о том, как технология встраивания будет реализована в бро­узерах; спецификация лишь определяет синтаксис, позво­ляющий автору страницы описывать (или просто ссылаться на) нужный шрифт с помощью богатого набора свойств и шрифтовых дескрипторов. Эта информация (включенная либо в сам документ, либо в относящийся к нему стилевой файл) позволит броузеру выбрать, в зависимости от условий, один из следующих вариантов поведения:

• выбор заказанного шрифта (exact matching), если он уже присутствует на данном компьютере;

• выбор    близкого    по    характеру    шрифта    (intelligent matching) на основе информации шрифтовых дескрипторов — высоты строчных и заглавных, характера засечек, наклона букв и т. п.;

• синтез нужного шрифта (font synthesis), для чего кроме перечисленных выше общих свойств шрифта нужна также метрическая информация о габаритах каждой буквы. Броузер может, к примеру, воспользоваться технологией Multiple Masters фирмы Adobe, позволяющей плавно менять   ширину,   насыщенность   и   другие   параметры шрифта, и подогнать более-менее подходящий исходный шрифт под метрику требуемого;

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

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

222

В то же время оба главных визуальных броузера — MSIE и NC — начиная с четвертых версий также поддержива­ют встраивание шрифтов.
Технологии, используемые для этого извечными конкурентами, если можно так выра­зиться, гармонически дополняют недостатки друг друга. Броузер Microsoft использует синтаксис CSS2 для связыва­ния шрифтов с HTML-документом, однако может работать только со шрифтами в специально созданном для этого формате «шрифтовых объектов» (основанный на TrueType, этот формат позволяет, в частности, вырезать для отправ­ки только используемые в документе символы, содержит средства сжатия шрифтовых данных и предотвращения не­легального копирования распространяемых шрифтов). При­вязка к «фирменному» формату не только закрывает эту технологию от посягательств конкурентов, но и ограничи­вает ее применимость операционными системами Windows и Macintosh.

Ненамного лучше обстоят дела с открытостью и у техно­логии встраивания шрифтов, разработанной Netscape. Так называемые «динамические шрифты», почему-то реклами­руемые этой компанией как часть ее версии «динамиче­ского HTML», не привязаны к какой-то операционной системе, однако накрепко привязаны к броузеру Netscape Communicator, который один только может использовать для вывода на экран шрифты в формате TrueDoc (лицензи­рованном Netscape у фирмы Bitstream). Более того, привязка шрифта к HTML-документу у Netscape производится со­вершенно ни с чем не совместимым способом — через расширение тега LINK. Если бы броузеры-конкуренты были совместимы друг с другом хотя бы по синтаксису вызова шрифтов, различия в шрифтовых форматах были бы не столь существенны.

Всплеск и вскрик

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

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

Выравнивание и отступы

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

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

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

145

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

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

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

Выставочная графика

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

258

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

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

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

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

259

серого), прописыванию заглавия и центровке изображения относительно границ окна.

Взболтать и настоять

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

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

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

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

When all else fails

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

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

228

но зато есть полная свобода в использовании шрифтов и оформлении текстовых элементов.

Чаще всего графические вставки применяются для заго­ловков (о них мы уже говорили на стр. 200), кнопок на панелях навигации, а также для выделенных фрагментов текста, таких как рекламные лозунги, вводные абзацы статей или «выдернутые» цитаты (англ. pull-out quotes, пример 7). Эстетическое воздействие аккуратно сверстанного графи­ческого текста, к сожалению, бывает сильно подпорчено конфликтом с расположенным рядом обычным текстом, почти всегда имеющим на компьютере пользователя не тот кегль, на который рассчитывал дизайнер. Но безусловно самое ужасное, что только может сделать дизайнер в этой ситуации, — это отлить в графику текст с ошибками или даже просто с опечатками: по вполне объяснимым причинам неаккуратность в подготовке «кускового» текста раздражает во много раз сильнее, чем огрехи в обычном тексте «россыпью».

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

Www.kirsanov.com

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

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

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

Www.quiotix.com

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

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

315

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

XLL

 Почти одновременно с самим XML Консорци­умом W3 был стандартизован XLL (extensible Linking Language, «Расширяемый язык ссылок») — механизм созда­ния гипертекстовых ссылок в XML-документах. Этот аспект языка значительно усовершенствован в сравнении с HTML. Вот основные черты гипертекстовой модели XML:

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

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

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

53

• Важные усовершенствования внесены в синтаксис URL-адресов, использующихся в ссылках. Выше я уже упо­минал, что адреса могут содержать параметры вызова программы или идентификатор фрагмента документа, отделяемые от основной части адреса соответственно символами ? и # (стр. 30). XML расширяет синтаксис этих конструкций, благодаря чему, не теряя обратной совместимости с существующими адресами, они позво­ляют адресовать практически любой фрагмент любого XML- или HTML-файла. При этом не требуется, чтобы автор файла, на который ссылаются, как-то по-особому разметил этот фрагмент (в HTML, как вы знаете, его нужно пометить тегом А с атрибутом name). Более того, вырезание этого фрагмента из документа можно пере­ложить на сервер, на котором документ хранится, тем самым избежав пересылки по сети документа целиком (правда, для этого нужно, чтобы сервер умел обрабаты­вать такие «расширенные» запросы).

XML

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

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

48

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

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

XSL

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

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

54

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

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

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

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

55

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

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

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

Заглавие

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

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

200

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

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

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

Заглавия и заголовки

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

Конечно, не так уж редко на веб-страницах встречаются и более экзотические объекты — поля бланков, Java-апплеты. Однако именно текст и графика остаются и всегда будут оставаться основными носителями информации в Ин­тернете. Все, что нужно знать веб-дизайнеру об оформлении текстовых блоков, собрано в одном из разделов этой главы (стр. 215). Создание веб-графики — тема более обшир­ная, и ей целиком посвящена гл. IV (стр. 243). Здесь же мне хотелось бы отметить, что противопоставление текста и графики, как частное проявление дуализма содержания и представления в дизайне, особенно наглядно проявляется именно в дизайне заголовков.

Заголовки: дизайн

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

202

в этой области. Заголовки могут также заимствовать кое-какие приемы и подходы дизайна логотипов (стр. 264).

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

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

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

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

203

своеобразным,   хотя   и   близким   к  рубленому   шрифтом остальных заголовков.

Заголовки: логика

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

В то же время нужно отдавать себе отчет в том, что теги Н*, как и большинство тегов академического стиля, являются в гораздо большей степени средствами логической, нежели визуальной, разметки (стр. 22). Поэтому пользоваться ими (даже в том случае, когда на странице всего один заголовок) следует в первую очередь ради улучшения переносимости вашего документа, для приведения его разметки в соответ­ствие с его логической структурой, а не для сопутствующих визуальных эффектов (вроде изменения шрифта). Стандарт   HTML   не   возбраняет   помещать   между   <Н1> и  </Н1>  не  строки  текста,  а  графические  изображения заголовков со всеми требуемыми причудами оформления, alt-тексты которых (стр. 35) будут играть роль заголовков в  неграфических броузерах.  Такое  решение  —  казалось бы, удовлетворительное и с логической, и с визуальной точек зрения — не всегда выполнимо из-за нежелательных вертикальных отступов, которые оба графических броузера оставляют вокруг элементов Н* (из чего бы они ни состоя­ли — из текста или изображений). Единственный законный способ изменять параметры оформления стандартных тегов, включая теги заголовков, — использование CSS; к сожале­нию, из-за несовершенств реализации подавить эти отступы с  помощью  CSS  удается  только  в  одном  из  броузеров (в MSIE).

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

Заметки о полях

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

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

195

станавливать любую (в том числе нулевую и отрицательную) величину полей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игно­рируют эти «MSIE-only» атрибуты.

Более идеологически правильный, хотя и выходящий за рамки HTML под­ход — использование CSS-свойств (стр. 40) margin-left и margin-top для тега BODY. К сожалению, упоминавшаяся уже незрелость реализаций CSS (стр. 23) не позволяет воспользоваться даже таким невинным трюком: дело в том, что если MSIE отмеряет поле от рамки окна, то NC принимает за отправную точку то «поле по умолчанию», которое имеет место в отсут­ствие CSS. Поэтому, чтобы прижать содержимое страницы вплотную к ле­вой рамке окна, в MSIE достаточно сказать <BODY style="margin-left: 0рх">, тогда как в NC вместо 0рх придется подбирать некую отрицатель­ную величину (около -7рх).

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

Золото и пластмасса

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

83

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

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

Золотой век

Принципы, на которых строится язык 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

23

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

---

---