Biz-Books.biz ©

info@biz-books.biz

<<

Кирсанов Дмитрий Михайлович. Веб‑дизайн. 2006

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

<< | >>

Техминимум

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

ASCII

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

Так и срослось.

Семейство 8859.

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

ISO 10646 и UTF‑8.

HTML

В начале был SGML.

Прикладная философия.

Золотой век.

Идолы рынка.

Бяки и буки.

Те же и Microsoft.

Три, четыре…

СИНТАКСИС

Подстановки.

Минимальный документ.

ТЕКСТОВАЯ РАЗМЕТКА

ССЫЛКИ И ПРИВЯЗКИ

переменная=значени

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

ИЗОБРАЖЕНИЯ И ОБЪЕКТЫ

НАЦИОНАЛЬНЫЕ ОСОБЕННОСТИ

Согласование кодировок.

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

СРЕДЫ И ДОСТУПНОСТЬ

Доступность: таблицы.

Как писать alt–тексты.

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

Доступность: изображения–карты.

МЕТА‑ДАННЫЕ И ПОИСК

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

Мертвая зона.

Сухой остаток.

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

CSS

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

ПРИНЦИПЫ

ВОЗМОЖНОСТИ

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

Модульный HTML

Режем по живому.

Сборно–панельный сайт.

XML

СИНТАКСИС

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

Конверсия.

НАДСТРОЙКИ

Графика

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

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

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

На все четыре стороны.

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

Палитры.

СИСТЕМЫ ПРЕДСТАВЛЕНИЯ ЦВЕТА

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

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

Динамический HTML

МОДУЛЬНЫЕ ТЕХНОЛОГИИ

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

ДИНАМИЧЕСКИЕ СТРАНИЦЫ

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

Как учиться дизайну.

Дизайн и «чужое творчество».

Материалы и инструменты.

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

Относительность размера.

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

Форма и размер.

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

Рис. 3 В (а) круг кажется уже, чем равновеликий ему квадрат; в (б) увеличенный фрагмент буквы с закруглением (справа) выступает вниз за базовую линию, проведенную по низу букв без закруглении (показаны строчные буквы «и» и «о» из шрифта Тайме)

Искусство выравнивания текста.

Цвет и размер.

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

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

Рис. 6 Золотое сечение (sectio aureu): b так относится к а, как а к сумме а + b (при этом b = 0,618а). С древних времен золотое сечение считается самой совершенной, гармоничной, уравновешенной пропорцией

ПРОПОРЦИИ

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

Пропорций простота.

Рис. 7 Природа подсказывает пропорции для больших и для маленьких.

Микропропорции.

Размещение.

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

Одноуровневые элементы.

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

Разноуровневые элементы.

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

Пол и характер.

Плотность текста.

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

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

Форма

Рис. 9 Усложняясь, эта фрактальная форма теряет свою изначальную геометричность, становится аморфной и плавно переходит в разряд текстур

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

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

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

Рис. 11 Вспомогательные построения из прямых и дуг как художественный прием

Рис. 12 Стремление построить устойчивую композицию на основе наклонных линий завело дизайнера слишком далеко (http://www.yandex.ru/)

Дизайн Пизанской башни.

ПРЯМОУГОЛЬНИКИ

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

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

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

КРУГИ И ЗАКРУГЛЕНИЯ

Рис. 14 Сравните ощущения, которые у вас вызывают эти две композиции, отличающиеся только закругленностью углов прямоугольников

Рис. 15 Кривые Безье могут поспорить с фракталами за честь называться самы/ красивым математически! открытием нашего века

КРИВЫЕ БЕЗЬЕ

Рис. 16 Сочетание регулярного, повторяющегося геометрического узора с нарочито бесформенным общим контуром определяет своеобразие этого объекта

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

Рис. 17 Фрагмент фотографии (а) легко превратить с помощью трассировки в восхитительный набор почти по–человечески небрежных живописных пятен (б) или же в плотный сгусток аморфных форм (в)

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

Цвет

Рис. 18 Стиль этой вещи – небрежность рисунка, помноженная на «натуралистическую» аморфность мазков

Как устроен цвет

Прогулки по цветовому кругу

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

Ну и что?

Главные цвета

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

Сочетаемость цветов

Вы не хотите тратить время на поиски необычных, запоминающихся цветов? Простота ваших страниц не требует неординарных цветовых решений. Тогда примите к сведению совет дизайнера Роджера Блэка, отлитый в чеканную формулу: «The First Color is White, The Second Color is Black, Tin Third Color is Red». Все действительно настолько просто: самый яркий и самый темный из всех возможных цветов создают ощущение тесного единства и максимального контраста, а если вам нужен третий цвет–красный великолепно соч

Текст и фон

Текстуры

Плоский цвет

Геометрические структуры

Рис. 23 Сочетание геометрической и фотографической текстур

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

Рис. 25 Фон сайта (в увеличении горизонтальные полосы имеют высоту в один пиксел )

Пиксельные структуры

Фотографические текстуры

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

Материальные текстуры

Шрифт и текст

ЭЛЕМЕНТЫ ШРИФТОВ

Гарнитура, начертание, шрифт.

Systems naturae.

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

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

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

ШРИФТЫ И ВРЕМЯ

Классическая антиква.

Рис. 29 Гарнитура Гарамон (Garumond) – характерный представитель гуманистической антиквы

Рис. 30 Форма засечек (а, гарнитура Лизурского) и смещение наплывов на округлых частях букв (б, шрифт Adobe Jenson) в шрифтах, гуманистической антиквы объясняются подражанием рукописному почерку наклонным пером с плоским концом

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

Переходные шрифты.

Новая антиква.

Рис 32 Гарнитура Бодони; (Bodoni) – ранний, «классический» образец повои антиквы, сохранивший некоторые черты шрифтов переходного периода

Кларендон.

Рис. 33 Гарнитуры Школьная (New Century Schoolbook) – типичный шрифт типаКларендон

Новые рубленые.

Рис. 34 Шрифт Футура (Futuru) оказал сильнейшее влияние на шрифтовое искусство XX века

Маятник гуманизма.

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

ПОДБОР ШРИФТОВ

Единство противоположностей.

Слишком декоративные шрифты.

Развивая тему.

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

Рис. 36 Какое из этих двух шрифтовых сочетаний, ни ваш взгляд, более гармонично?

Шрифты и названия.

ПАРАМЕТРЫ НАБОРОВ

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

Прописные и строчные.

Интервалы.

Рис. 37 Автоматическая регулировка межбуквенных расстояний в зависимости от кегля: текст без трекинга (вверху) и с тренингом (внизу)

Рис. 38 Ручная регулировка межбуквенных расстояний – кернинг

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

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

Рис. 39 Выравнивание в сочетании со строгой осевой симметрией – классический, «античный» стиль

Размещение.

Чья случайность лучше?

ТЕКСТ КАК ТЕКСТУРА

Единство

Content is king.

Академический стиль.

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

В полный рост.

Размещение.

Текстура.

Центр масс системы.

Правило рычага.

Рис. 40 Тяжелая, но компактная темная полоса по левому краю страниц www.books.ru (пример 15) уравновешивается легкой, но вынесенной далеко вправо асимметричной линейкой – разделителем блоков текста (значком ® на физических чертежах обозначают центр масс)

Контраст

Контраст – это продолжение единства другими средствами.

ОДНОМЕРНЫИ КОНТРАСТ

Рис. 41 Поиск максимума одномерного контраста

МНОГОМЕРНЫЙ КОНТРАСТ

Рис. 42 Поиск максимума многомерного контраста

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

АСПЕКТЫ КОНТРАСТА

Расстояние.

Расположение.

Текстура.

Динамика

Рис. 44 Примерная карта движений восприятия ни странице сайта www.bdaweb.com (пример 13)

ДИНАМИКА ЯВНАЯ

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

Динамика совсем явная.

ДИНАМИКА НЕЯВНАЯ

Рис. 45 Развитие движения вдоль горизонтальной прямой

НЬЮАНСИРОВКА

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

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

ДИЗАЙН ВЕБ‑САЙТОВ

Преграды и препоны.

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

Неудивительно, что дизайнеры не очень–то любят соблюдать официальные стандарты HTML: ведь одной из провозглашенных Консорциумом W3 целей стандартизации является именно поддержка альтернативных (чисто текстовых, звуковых и т. п.) средств доступа к веб–содержимому (стр. 34) – то есть, по сути, узаконение того самого разнобоя, следствием которого является принцип «общего знаменателя». Именно для того, чтобы не относиться к Консорциуму W3 как к душителю творческой свободы, стоит потратить некоторое

От общего к частному.

Типы сайтов

Первый шаг.

Рис. 46 Примерное распределение четырех основных типов спитое ни диаграмме «дизайн–содержание». Обратите внимание, что по горизонтали и вертикали отложена сложность, а никак не качество дизайна и содержания соответственно. В противном случае пришлось бы поменять мести–ми 1 и 2 по горизонтали, а 2 и 3 – по вертикали

В мире. org

Конечно, грань между личными и некоммерческими сайтами довольно условна. Стоит автору чем–нибудь серьезно увлечься и захотеть увлечь этим своих посетителей, как страница его приобретает явственные черты некоммерческого или даже контент–сайта. Есть верный признак, позволяющий легко отличить такие сайты от сайтов коммерческого толка: каждая страница некоммерческого сайта знает, что она хочет сказать своим читателям, и знает, зачем им это нужно. Результатом этого является логичное и последовательно

Скорей любите нас.

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

Бесплатный сыр.

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

НЕУПОРЯДОЧЕННЫЙ КОНТИНУУМ

ТОПОЛОГИЯ САЙТА

древовидные (иерархические) и линейные (последовательные)

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

РАСПРЕДЕЛЕНИЕ МАТЕРИАЛА

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

Фреймы и окна.

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

ПЕРВАЯ СТРАНИЦА

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

Формат страницы

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

И все–таки – каково физическое разрешение компьютерного экрана? Хотя величина эта меняется из–за множества почти случайных обстоятельств (она зависит не только от паспортного размера экрана дисплея и количества пикселов по вертикали и горизонтали, но и от модели дисплея, положения ручек настройки, иногда даже от положения измеряемой области на экране), традиционно принято считать, что среднее значение разрешения экрана составляет 96 dpi на компьютерах с Windows (в режиме 800х 600 на 15‑дюй

The frame of reference

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

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

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

Если тебе дадут линованную бумагу – пиши поперек.

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

СТУПЕНЬКИ РИГИДНОСТИ

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

ЗАГЛАВИЕ

ЗАГОЛОВКИ: ЛОГИКА

ЗАГОЛОВКИ: ДИЗАЙН

РАЗДЕЛИТЕЛИ

Рис. 48 Псевдотрехмерность под микроскопом: концы линеек HR в NC (слева) и MSIE (справа)

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

Навигация

ОБЩИЙ ОБЗОР

СЕМАНТИКА

Разновидности одинаковости.

Рис. 49 Приемы выравнивания навигационных кнопок с надписями неодинаковой длины

По ту сторону кнопок.

Рис. 50 Тема прямых линий с засечками в двухуровневой навигации на сайте www.revo.com

Символы и метафоры.

Особыеслучаи.

ДИНАМИЧЕСКАЯ НАВИГАЦИЯ

Рис. 51 Выпадающие меню на первой странице сайта www.ibm.com реализованы с помощью динамического HTML

Блоки текста

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

Особо следует остановиться на видимом отличии размеров букв в разных шрифтах. Пользуясь тегом FONT с атрибутом face (а иногда и строго логическими тегами вроде CODE или SAMP, устанавливающими моноширинный шрифт), вы можете столкнуться с тем, что буквы «чужого» шрифта выглядят заметно больше или заметно меньше расположенных рядом букв основного шрифта. В таких случаях нужно удержаться от соблазна выровнять кегли атрибутом size, так как, во–первых, на другом компьютере соотношение размеров может б

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

Коренные шрифты.

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

Осторожно: кириллица.

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

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

ДРУГИЕ ПАРАМЕТРЫ

Спецификация HTML 4.0, принятая в начале 1998 года, значительно расширила, по сравнению с предыдущими версиями, набор средств для разметки таблиц. Большинство новых тегов и атрибутов предназначены для более адекватной структурной разметки таблиц и для более гибкого представления табличной информации в невизуальных броузерах. Есть, однако, и усовершенствования в средствах визуального форматирования – в частности, атрибуты frame и rules позволяют выборочно проводить линейки между ячейками и вокруг

WHEN ALL ELSE FAILS

ПРАВИЛА НАБОРА ТЕКСТОВ

Расстановка пробелов.

Неразрываемые пробелы.

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

Спецсимволы.

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

Кстати, имейте в виду, что в английском языке точки и запятые принято вносить внутрь кавычек, даже если по смыслу они должны стоять снаружи: «так," а не «так».

Позиционирование

ТАБЛИЦЫ И РАСПОРКИ

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

Дурная наследственность.

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

Двойное дно.

Белое место.

Если вы никак не можете разобраться в странностях поведения невидимых распорок на ваших страницах, для отладки можно порекомендовать такой прием: заведите еше один однопиксельный GIF‑файл, но не прозрачный, а какого–нибудь яркого цвета, и временно подставьте его вместо прозрачного пиксела в тот каталог, где у вас хранятся изображения. Все невидимые распорки при этом станут видимыми, и расставить их по местам будет намного легче.

Фэйсом об тэйбл.

Рис. 52 Условия задачи: ячейки А должна иметь переменную высоту, тик кик содержит текст; ячейка В содержит графическую вставку и должна точно соответствовать ей по размерам; высота ячейки С, следовательно, должна быть равна разности высот ячеек А и В. Попытка решить задачу с помощью rowspan=2 в ячейке А к успеху не приводит; как ни старайся, ячейка В выходит выше, чем надо, а С упорно не дотягивает до нужной высоты Жесткая распорка в С делу не поможет, так как искомая высота С зависит от А и, сл

ПОЗИЦИОНИРОВАНИЕ В CSS

Оба визуальных броузера поддерживают абсолютное позиционирование начиная с четвертых версий. К сожалению, как и в других компонентах CSS, в реализации этой технологии пока что много ошибок и несовместимости. Причем вместо того, чтобы бросить все силы на доводку своего сырого продукта, создатели Netscape Communicator сочли более важным застолбить новый участок очередным нестандартным тегом. Тег LAYER, хотя и предоставляет ровно те же возможности, что и абсолютное позиционирование средствами CSS,

Веб–графика

Техника

ПАЛИТРА И ДИФФУЗИЯ

Рис. 54 Диффузия под микроскопом: так Adobe Photo–shop распределяет пикселы при попытке передать черно–белый градиент восьмицветной палитрой

ЦВЕТОВЫЕ ГРАНИЦЫ

Рис. 55 Кик воспроизвести цветовую границу сложной формы в пиксельной решетке растрового изображения (а)? Без сглаживания каждый граничный пиксел закрашивается одним или другим цветом в зависимости от того, по какую сторону границы лежит большая чисть его площади (б). Анти–алиасинг вводит для граничных пикселов промежуточные тона, в которых пропорция смешения определяется соотношением площадей цветов, приходящихся на соответствующий пиксел (в)

В то же время в самых мелких кеглях (меньше 5–6 пикселов на высоту буквы) от анти–алиасинга лучше все же отказаться, взяв вместо этого особый шрифт, оптимизированный для подобных экстремальных условий (к таким шрифтам относятся, например, большинство системных шрифтов Windows). Лучшие результаты дают шрифты без засечек; конечно, вряд ли при этом стоит рассчитывать на узнаваемость шрифта, но надпись по крайней мере можно будет прочесть .

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

Экранный анти–алиасинг.

Из–под пятницы суббота.

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

ПИКСЕЛЬНЫЕ ЭФФЕКТЫ

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

ОПТИМИЗАЦИЯ

Когда проект завершен, в архиве безусловно должны остаться векторные оригиналы и конечный результат работы – оптимизированная графика в GIF или JPEG. Промежуточные же растровые файлы (для которых чаще всего используется формат TIFF) вполне можно стереть, если только к ним не применялось никакой специфической пост–векторной обработки.

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

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

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

Чудное мгновенье.

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

Функции

ВЫСТАВОЧНАЯ ГРАФИКА

Как не надо делать фон.

Прогладить с изнанки.

рис. 58 Создание бесшовного фона перестановкой четвертей. Обратите внимание, как заметны стали в (б) нестыковки деталей фона между четвертями 4 и 2, 4 и 3

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

Одномерные фоны.

рис. 60 Типология фонов: (а) – обычный фон, размножаемый по обоим измерениям; (б) и (в) – полосатые фоны, размножаемые только по вертикали и горизонтали соответственно; (г) – полностраничный фон

Одним куском.

Этот пример дает повод обсудить еще один технический аспект полностраничных фонов: чтобы общин вес страницы с таким фоном не выходил за рамки приличия, все фоновое изображение размерами в сотни и даже тысячи (по высоте) пикселов должно уложиться не более чем в 20–30 Кб. Достичь этого можно двумя путями: либо сжатием в JPEG с большими потерями, которые будут незаметны только для «очень фотографических», размытых и к тому же темных по цвету изображении, либо сжатием плоско–цветных изображений в GI

ЛОГОТИПЫ

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

Рис. 61 «Скрытый смысл» логотипа: фигура, которой нет (и), и борьба симметричных противоположностей (б)

Диалектика формы.

Важное понятие «скрытого смысла» стоит пояснить на паре примеров. Логотип на рис. 81, а пользуется очень распространенным приемом «доказательства от противного»: форма пустот и вырезов в главной фигуре подразумевает наличие некоей другой фигуры – «пуансона», по форме которого были проделаны эти вырезы и в котором к тому же угадывается намек на очертания буквы «Q» (заглавной буквы названия компании). Фигура эта задает нам задачку, пусть и очень несложную, и интеллектуальное удовлетворение от ее р

На единицу площади.

Про что картинка?

рис. 62 Чаще всего встречающиеся варианты композиции логотипа

Символ и слово.

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

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

Аспекты логотипа.

По адресу www.att.com/identity/standards/graphic/ сама фирма AT&T дает всем заинтересованным дизайнерам очень детальные и поучительные инструкции: как выбрать один из вариантов логотипа, какие схемы его раскраски допустимы, как правильно разместить знак на странице, и даже – какие ошибки типичны для дизайнеров, работающих с этим логотипом …

Lucent Technologies

Рис. 64 «Красное колесо» фирмы Lucent призвано символизировать оригинальность и новаторский дух ее разработок

рис. 65 Эмблемы олимпийских игр всегда были характерными представителями дизайна своего времени

Рис. 66 Использование в логотипе шрифты с засечками требует от графической части особой лаконичности

Текстура.

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

Сколько натикало?

Форматы.

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

Слева при входе.

Больше жизни.

Пьеса в трех действиях.

В начале было что–то.

Рис. 68 Типичный трехчастный анимированныйбаннер. Кадры с 1 по 7 – завязка, привлечение внимания: трудно удержаться и не проследить с сочувствием за страданиями симпатичного персонажа. Второй этап (кадр 8) – заявление основной темы: оказывается, речь идет о некоем продукте, который поможет вам следить за многочисленными конференциями и выставками, чтобы они не заставали вас врасплох. Наконец, финал баннера (кадр 9) решен в традиционном стиле: мы видим полное название продукта, имя разработчика (

Собственная гордость.

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

рис. 70 Еще один баннер, пользующийся вопросом для привлечения внимания в самом начале сюжета. Особенность этого экземпляра – в том, что главная тема сообщения («graduate schools») заявлена в первом же кадре, а необычно бедный информацией этап экспозиции (кадры 2–4) намеренно задерживает действие своей монотонной анимацией (поворачивающийся из стороны в сторону «аспирант» с биноклем) нагнетает напряжение перед финальной развязкой (кадр 5)

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

Рис. 71 Баннер (и) довольно типичен для русского Интернета: он комбинирует два самых распространенных «муляжи» элементов интерфейсы – поле вводи с кнопкой поиска и полосу прокрутки вдоль правого края. Баннер (б), наоборот, без обмина и подвоха предлагает вам раскрыть самый настоящий выпадающий список, элементы которого разъясняют и конкретизируют основное содержание баннера

Смена поколений.

На килограмм живого веса.

Рис. 72 Менее «агрессивный» вариант баннера на рис. 6 8, использующий иные средства для начального привлечения внимания

Рис. 73 Самый простой и незамысловатый баннер из той же серии (см. рис. 6 8, 72)

Acknowledgements.

Рынок визуалов

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

Приемы

ТРЁХМЕРНОСТЬ

Император иллюзий.

Пластмассовый призрак.

Скульптура или барельеф.

Рис. 75 «Скульптурная» (а) и «барельефная» (б) разновидности трехмерных изображений

ИСКУССТВО ИСКАЖЕНИЙ

Что упало, то пропало.

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

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

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

ПРИМЕРЫ

www.kirsanov.com

Рис. 77 Генезис логотипа www.kirsanov.com

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

ЦВЕТОВАЯ СХЕМА

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

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

Информационные цвета.

ПЕРВАЯ СТРАНИЦА

Карты на стол.

рис. 80 Четырехчленная структура страницы иллюстрируется четырьмя фотографическими визуалами, сменяющими друг друга «перекатыванием» (стр. 213)

НАВИГАЦИЯ

Рис. 81 Текстовая страница Р ис. 82 Страница раздела портфолио

www.quiotix.com

Рис. 84 Попытка уклониться в сторону (а) заказчиком пресечена, и окончательный вариант (б) почти ничем не отличается от первого наброска

Рис. 85 Пример подгонки графики логотипа под характер шрифта; в увеличении можно увидеть, что торцы деталей графики вогнуты так же, как и концы штрихов букв

ПЕРВАЯ СТРАНИЦА

Рис. 86 Эволюция буквы «Q»

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

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

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

ВНУТРЕННИЕ СТРАНИЦЫ

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

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

MISCELANEA

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

Рис. 93 QEWS и news, или об относительности строчных и заглавных

Галерея

1 www.avsi.com/avalanche/company/index.html

2 www.elliottdickens.com

3 www.elliottdickens.com/browser.cgi

4 www.finemagazine.com/fine1/music/torih.htm

5 www.prophetcomm.com/iconoclast/

6 http://www.metadesign.com/

7 http://www.metadesign.com/metawho/index.htm

8 aboutus.miningco.com

9 www.microsoft.com/license/opendrive/

10 www.splashtech.com

11 www.supercede.com/prodserv/scfjava.html

12 http://www.wps.ru/

13 http://www.bdaweb.com/

Помощь с написанием учебных работ

Книги и учебники по дисциплине Раскрутка и продвижение сайтов:

- Библиотека программиста - Интернет-маркетинг - компьютерная литература - Копирайтинг - Онлайн магазин - Раскрутка и продвижение сайтов - Реклама - Свой бизнес -

- Бизнес - Биржи - Интернет-бизнес -

Biz-Books.biz

Biz-Books.biz ©

info@biz-books.biz