- •Дмитрий кирсанов
- •Глава I. Техминимум 18
- •Глава II. Основы дизайна 56
- •Глава III. Дизайн веб-сайтов 131
- •Глава IV. Веб-графика 175
- •Оглавление
- •II.1 Пространственные отношения (78)
- •II.10 Нюансировка (172)
- •V.3 Галерея (323)
- •Предисловие
- •Что здесь есть и чего здесь нет
- •Примеры
- •Соглашения
- •Сверим часы
- •Как выбрать дизайнера
- •Почему эта тема?
- •Сам себе Гутенберг
- •Глава I. Техминимум
- •Кодировки текста
- •Однобайтовые кодировки
- •Семейство 8859
- •Двухбайтовые кодировки
- •История
- •В начале был sgml
- •Прикладная философия
- •Золотой век
- •Html плюс
- •Идолы рынка
- •Бяки и буки
- •Три, четыре...
- •Синтаксис
- •Подстановки
- •Минимальный документ
- •Текстовая разметка
- •Ссылки и привязки
- •Изображения и объекты
- •Национальные особенности
- •Согласование кодировок
- •Среды и доступность
- •Доступность: таблицы
- •Как писать alt-тексты
- •Доступность: изображения-карты
- •Мета-данные и поиск
- •Мертвая зона
- •Принципы
- •Возможности
- •Модульный html
- •Режем по живому
- •Сборно-панельный сайт
- •Например
- •Синтаксис
- •Уровни соответствия
- •Конверсия
- •Надстройки
- •Графика
- •Вектор в Интернете
- •На все четыре стороны
- •Палитры
- •Системы представления цвета
- •Программирование
- •Динамический html
- •Модульные технологии
- •Динамические страницы
- •Глава II. Основы дизайна
- •Как учиться дизайну
- •Дизайн и «чужое творчество»
- •Материалы и инструменты
- •Пространственные отношения
- •Относительность размера
- •Форма и размер
- •Искусство выравнивания текста
- •Цвет и размер
- •Текстура и размер
- •Пропорции
- •Золото и пластмасса
- •Пропорций простота
- •Микропропорции
- •Размещение
- •Одноуровневые элементы
- •Разноуровневые элементы
- •Плотность
- •Пол и характер
- •Плотность текста
- •В нужное время и в нужном месте
- •Дизайн Пизанской башни
- •Прямоугольники
- •Круги и закругления
- •Кривые Безье
- •Бесформенность
- •Как устроен цвет
- •Прогулка по цветовому кругу
- •Главные цвета
- •Восприятие цвета
- •Сочетаемость цветов
- •Текст и фон
- •Текстуры
- •Плоский цвет
- •Геометрические текстуры
- •Пиксельные текстуры
- •Фотографические текстуры
- •Материальные текстуры
- •Шрифт и текст
- •Элементы шрифта.
- •Гарнитура, начертание, шрифт
- •Виды начертаний
- •Шрифты и время.
- •Переходные шрифты
- •Новая антиква
- •Кларендон
- •Новые рубленые
- •Маятник гуманизма
- •Подбор Шрифтов
- •Единство противоположностей
- •Слишком декоративные шрифты
- •Развивая тему
- •Шрифты и названия
- •Параметры Набора
- •Прописные и строчные
- •Интервалы
- •Выравнивание и отступы
- •Размещение
- •Чья случайность лучше?
- •Текст как текстура
- •Единство
- •Академический стиль
- •В полный рост
- •Размещение
- •Текстура
- •Центр масс системы
- •Правило рычага
- •Контраст
- •Контраст — это продолжение единства другими средствами
- •Одномерный контраст
- •Многомерный контраст
- •Аспекты контраста
- •Расстояние
- •Расположение
- •Текстура
- •Динамика
- •Динамика явная
- •Ветер по Гауссу
- •Динамика совсем явная
- •Динамика неявная
- •Нюансировка
- •Пространственные отношения
- •Глава III. Дизайн веб-сайтов
- •Преграды и препоны
- •От общего к частному
- •Типы сайтов
- •Первый шаг
- •В мире .Org
- •Скорей любите нас
- •Бесплатный сыр
- •Устройство сайта
- •Неупорядоченный континуум
- •Топология сайта
- •Распределение материала
- •Фреймы и окна
- •Первая страница
- •Всплеск и вскрик
- •Формат страницы
- •Заметки о полях
- •Во первых строках
- •У голубого экрана
- •Если тебе дадут линованную бумагу — пиши поперек
- •Ступеньки ригидности
- •Заглавия и заголовки
- •Заглавие
- •Заголовки: логика
- •Заголовки: дизайн
- •Разделители
- •Баннеры
- •Навигация
- •Общий обзор
- •Семантика
- •Разновидности одинаковости
- •По ту сторону кнопок
- •Символы и метафоры
- •Особые случаи
- •Динамическая навигация
- •Блоки текста
- •Коренные шрифты
- •Все шрифты ношу с собой
- •Осторожно: кириллица
- •Другие параметры
- •Правила набора текстов
- •Расстановка пробелов
- •Неразрываемые пробелы
- •Текстовые выделения
- •Спецсимволы
- •Позиционирование
- •Дурная наследственность
- •Двойное дно
- •Белое место
- •Фэйсом об тэйбл
- •Позиционирование в css
- •Глава IV. Веб-графика
- •Техника
- •Палитра и диффузия
- •Цветовые границы
- •Экранный анти-алиасинг
- •Пиксельные эффекты
- •Оптимизация
- •Взболтать и настоять
- •Чудное мгновенье
- •Функции
- •Выставочная графика
- •Как не надо делать фон
- •Прогладить с изнанки
- •Одномерные фоны
- •Одним куском
- •Логотипы
- •Диалектика формы
- •На единицу площади
- •Про что картинка?
- •Символ и слово
- •Аспекты логотипа
- •Текстура
- •Баннеры
- •Сколько натикало?
- •Форматы
- •В нужное время и в нужном месте
- •Слева при входе
- •В начале было что-то
- •Собственная гордость
- •Удар ниже пояса
- •Смена поколений
- •На килограмм живого веса
- •Рынок визуалов
- •Трехмерность
- •Император иллюзий
- •Пластмассовый призрак
- •Скульптура или барельеф
- •Искусство искажений
- •Нетекстурирующие эффекты
- •Текстурирующие эффекты
- •Логотип
- •Цветовая схема
- •Входные цвета
- •Информационные цвета
- •Первая страница
- •Карты на стол
- •Навигация
- •Логотип
- •Первая страница
- •Внутренние страницы
- •Галерея
- •15. (Книги России 1) www.Books.Ru
- •Индекс Символы.
- •А(латиница).
Мертвая зона
Странствуя по ссылкам от одного сайта к другому, робот в идеале должен был бы рано или поздно обойти весь Интернет. На практике эта цель остается недостижимой, и не только из-за труднопредставимого объема Всемирной паутины и всегда ограниченных возможностей поисковых систем. В современном Интернете все большая доля страниц генерируется динамически в ответ на данные, введенные пользователем самостоятельно или сохраненные в его «профиле», созданном во время предыдущих посещений этого сайта. Понятно, что роботу неоткуда узнать, что можно или нужно вводить в поля форм, так что любые динамически генерируемые страницы (в том числе, кстати, и результаты поиска на самих поисковых серверах) для робота недоступны.
Ограничения этим не исчерпываются. Существуют роботы, которым не по зубам документы с символами за пределами
39
Latin-1, а в некоторых случаях даже и ASCII. Другие не могут индексировать сайты с фреймами. Наконец, многие роботы ограничивают количество страниц, сканируемых ими в каждом домене. Например, высказывались подозрения (не подтвержденные, но и не опровергнутые руководством компании), что Alta Vista сканирует не больше 600 страниц в каждом домене верхнего уровня.
Сухой остаток. Напомню прежде всего, что создание документов, доступных для роботов, подчиняется тем же основным принципам, что и обеспечение доступности информации в разных средах (стр. 34). И хотя, к сожалению, мало кто из современных роботов обращает внимание на теги структурной разметки, а некоторые не учитывают даже alt-тексты изображений, в целом автоматические сборщики информации больше всего похожи именно на пользователей текстовых или речевых броузеров.
Ограниченность роботов проявляется не только в их слепоте по отношению к графике, но и в том, что они не очень-то разумно обращаются и с текстом. Способность обобщать и классифицировать пока доступна только человеку, и чтобы обеспечить приемлемый уровень соответствия между тем, что именно хотел найти пользователь поисковой системы, и тем, какие ссылки он получил в ответ на свой запрос из базы данных, работу по «выпариванию» информационной сути страницы приходится брать на себя ее автору. С этой целью ключевые страницы сайта (как минимум, его первая страница) снабжаются аннотациями и списками ключевых слов. Для этого был приспособлен тег МЕТА (вообще предназначенный для хранения метаинформации документа, т.е. «информации об информации»):
<МЕТА name="keywords"
content="searching, search engines, keywords, HTML"> <META name="description"
content="A description of web search engines, spiders,
and search-friendly HTML authoring"> Важно понимать, что стандарт HTML предписывает для тега МЕТА только наличие атрибутов name и content, тогда как интерпретация значений этих атрибутов оставлена целиком на усмотрение того, кто их читает. Поэтому разные поисковые системы имеют разные требования в том, что касается максимальной длины списка ключевых слов, его синтаксиса (например, нужны ли запятые между элементами списка), допустимости повторений одного слова
40
в разных грамматических формах. Аннотация (description) используется многими поисковыми системами при выводе результатов поиска; если она отсутствует, страница в списке результатов обычно представлена первыми несколькими словами своего текста.
Кроме вставки ключевых слов и аннотаций, тег МЕТА может использоваться для указания автора страницы, программного обеспечения, в котором она создана, а иногда и кодировки текста. Этот тег способен выполнять некоторые функции HTTP-заголовка (стр. 33), пересылаемого вместе с документом с веб-сервера на компьютер пользователя, в том числе и такую важную для практики вещь, как автоматическое перенаправление броузера с данной страницы на другой URL-адрес (сразу или же через заданное количество секунд). С помощью этого же тега можно запретить индексировать данную страницу роботами (еще один пример установки семантики атрибутов по взаимному соглашению).
Искусство выбора результативных ключевых слов, которые приведут на ваш сайт максимальное количество максимально заинтересованных в вашей информации посетителей, — одно из тех умений, которым могут научить только практика в сочетании с врожденной предрасположенностью. Вы без труда найдете в сети «секретные» списки самых популярных слов в запросах разных поисковых систем, и первой приходящая в голову идея усилить ваши МЕТА-аттрактанты словами из этих списков в самом деле заметно поднимет траффик сайта, — но вряд ли повлияет на количество действительно ценных посетителей, приходящих на ваш сайт именно за тем, что вы можете им дать.
Хороший список ключевых слов не составишь за один присест — он требует от вас досконального знания своей предметной области и нужд ваших потенциальных посетителей. Как отец Браун, мысленно перевоплощавшийся в подозреваемых, чтобы понять, кто из них совершил преступление, вы должны поставить себя на место тех, кому позарез нужен именно ваш сайт. Не старайтесь при этом слепить обобщенный образ «среднего посетителя»; наоборот, попытайтесь представить себе как можно более разные и даже на первый взгляд неправдоподобные сценарии поиска информации. В особо интересных случаях МЕТА-список становится настоящей «ментограммой» создателя страницы, несущей едва ли не больше информации, чем основной текст, и способной отфильтровать людей с близким автору мышлением среди тысяч случайных зевак.
CSS
Язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS) был разработан в качестве дополнения
41
к HTML, призванного восполнить ограниченные возможности этого языка в области визуального форматирования, а в идеале — и полностью взять на себя определение внешнего вида документа, оставив за HTML только структурную разметку.
К сожалению, из-за сильно запоздавшей реализации в броузерах технология эта так и не стала по-настоящему общепринятой. В первой версии CSS отсутствовали многие важнейшие для дизайнера возможности, в первую очередь — свободное двумерное позиционирование объектов. Кроме того, не слишком ответственный подход разработчиков двух основных графических броузеров к поддержке CSS сказался в невероятном количестве ошибок, недоделок и несовместимостей между их реализациями. В результате визуальные дизайнеры до сих пор не могут пользоваться CSS иначе как для второстепенных, факультативных элементов оформления.
С распространением XML у CSS, возможно, откроется «второе дыхание» так как ничто не мешает пользоваться CSS-спецификациями для документов, размеченных в XML, а предназначенный специально для ХМL стилевой язык XSL (стр. 53) может оказаться слишком сложным для массового применения.