Веб дизайн - Дмитрий Кирсанов


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

Содержание:

  • Дмитрий Кирсанов - Веб–дизайн 1

    • Техминимум 1

    • Основы дизайна 16

    • ДИЗАЙН ВЕБ-САЙТОВ 42

    • Веб–графика 60

    • ПРИМЕРЫ 77

    • Галерея 82

Дмитрий Кирсанов
Веб–дизайн

Техминимум

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

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

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

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

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

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

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

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

ASCII

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

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

ОДНОБАЙТОВЫС КОДИРОВКИ

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

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

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

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

Однако первой фирмой, выпустившей русифицированную операционную систему, была все–таки не Microsoft, a Apple. И разумеется, русифицированные Макинтоши, появившиеся в конце 80‑х, имели свою собственную, ни с кем не совместимую кодировку кириллицы. Хотя в нашей стране компьютеры этой марки так и не приобрели популярности, сравнимой с их популярностью на Западе, в Сети можно встретить и кириллическую кодировку для Макинтошей.

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

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

Если кодировка ISO 8859–5 для кириллицы так и не прижилась, первая из этой серии - кодировка ISO 8859–1, известная также под именем Latin‑1, - сумела стать общепринятым стандартом для кодирования "расширенной" латиницы. В эту кодировку включены почти все символы, употребляющиеся в письменностях западноевропейских языков - французского, немецкого, испанского и т. д. По аналогии с ASCII первые 32 позиции во второй половине кодировок серии ISO 8859 (коды со 128 по 159 включительно) объявлены "неиспользуемыми". На сей раз, однако, производители программ решили обойти этот запрет. Так, большинство шрифтов для Windows соответствуют кодировке ISO 8859–1 начиная с позиции 160 до конца таблицы, но в диапазоне 128–159 размещают некоторые дополнительные символы (в частности, длинное тире и символ "торговой марки", стр.233). Поскольку HTML обязан соответствовать стандарту Latin‑1 (а начиная с версии 4 - Unicode), числовые подстановки (стр. 29) не могут ссылаться на коды из этого диапазона.

ДВУХБАЙТОВЫЕ КОДИРОВКИ

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

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

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

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

HTML

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

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

ИСТОРИЯ

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

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

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

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

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

Дальше