000
ОтложитьЧитал
Рекомендации
Information Management: A proposal by Tim Berners-Lee
Telecom Maps by TeleGeography
As We May Think by Vannevar Bush
Глава 2: Материалы
Рискуя научить
бабушку сосать яйца, я бы хотел, чтобы вы подумали о том, что происходит, когда браузер разбирает элемент HTML. Возьмите, например, элемент абзаца с каким-то текстом внутри него. Есть открывающий Р-тег, закрывающий Р-тег, и между этими тегами есть текст.
<p>some text</p>
Веб-браузер, столкнувшись с этим элементом, отобразит текст между открывающим и закрывающим тегами. Теперь рассмотрим, что произойдет, если тот же веб-браузер встретит элемент, который он не распознает.
<marklar>some more text</marklar>
И снова браузер отображает текст между открывающим и закрывающим тегами. Здесь интересно то, что браузер не делает. Браузер не выдает ошибку. Браузер не останавливает разбор HTML на этом этапе, отказываясь идти дальше. Вместо этого он просто игнорирует теги и отображает содержимое внутри них.
Такое либеральное отношение к ошибкам позволило со временем расширить словарный запас HTML с первоначального 21 элемента до 121 элемента в HTML5. Каждый раз, когда в HTML появляется новый элемент, мы точно знаем, как к нему отнесутся старые браузеры: они будут игнорировать теги и отображать содержимое.
Это удивительно мощная функция. Она позволяет браузерам внедрять новые возможности HTML с разной скоростью. Нам не нужно ждать, пока каждый браузер распознает новый элемент. Вместо этого мы можем начать использовать новый элемент в любое время, будучи уверенными, что не поддерживающие его браузеры не подавятся им.
<main>this text will display in any browser</main>
Если веб-браузеры относятся ко всем тегам одинаково – отображают их содержимое – тогда какой смысл в наличии словаря элементов в HTML?
Значение разметки
Некоторые элементы HTML буквально бессмысленны. Элемент SPAN ничего не говорит о содержимом внутри него. С точки зрения веб-браузера, вы можете использовать несуществующий элемент MARKLAR. Но это исключение. Большинство элементов HTML существуют не просто так. Они были созданы и согласованы для того, чтобы учитывать конкретные ситуации, с которыми могут столкнуться такие авторы, как вы и я.
Существуют специальные элементы, например, элемент A, которые наделены сверхспособностями. В случае с элементом A его суперспособность заключается в атрибуте HREF, который позволяет нам ссылаться на любой другой ресурс в Интернете. Другие элементы, такие как INPUT, SELECT, TEXTAREA и BUTTON, имеют свои собственные суперспособности, позволяя людям вводить данные и отправлять их на веб-сервер.
Кроме того, есть элементы, которые описывают содержание, которое они содержат. Содержимое элемента P следует рассматривать как абзац текста. Содержимое элемента LI следует рассматривать как элемент списка. Браузеры отображают содержимое этих элементов с некоторыми визуальными подсказками относительно их значения. Абзацы отображаются с пробелами до и после их содержимого. Элементы списка отображаются в виде точек или цифр перед их содержимым.
В начале развития лексикон HTML был наполнен новыми элементами, которые предоставляли визуальные инструкции веб-браузерам: BIG, SMALL, CENTER, FONT. На самом деле, визуальные инструкции были единственной причиной существования этих элементов – они не давали никакого намека на смысл содержимого, которое они содержали. HTML был в опасности превратиться в язык визуальных инструкций вместо словаря смысла.
Дело стиля
Хокон Виум Ли работал в ЦЕРНе в то же время, что и Тим Бернерс-Ли. Он сразу же распознал потенциал Всемирной паутины и ее языка HTML. Он также понимал, что выразительные возможности языка могут быть перегружены визуальными функциями. Ли предложил новый формат для описания представления HTML-документов: Каскадные таблицы стилей.
Вскоре к нему присоединился голландский программист Берт Бос. Вместе они приступили к созданию синтаксиса, который был бы достаточно мощным для удовлетворения потребностей дизайнеров, оставаясь достаточно простым, чтобы быстро учиться. Им это удалось.
Подумайте обо всех сайтах в Интернете. Существует огромное разнообразие визуального стиля: цветовые схемы, типографика, текстуры и макеты. Все это разнообразие стало возможным благодаря одному простому шаблону, который описывает весь когда-либо написанный CSS:
selector {
property: value;
}
Вот и все.
CSS разделяет снисходительное отношение HTML к ошибкам. Если браузер встречает непонятный ему селектор, он просто пропускает все, что находится между фигурными скобками этого селектора. Если браузер видит непонятное ему свойство или значение, он просто игнорирует это конкретное правило. Браузер не выдает ошибку. Браузер не выбрасывает ошибку. Браузер не прекращает разбор CSS на данном этапе, отказываясь идти дальше.
marklar {
marklar: marklar;
}
Как и в HTML, такая свободная обработка ошибок позволила CSS развиваться со временем. За эти годы в словарь языка были добавлены новые селекторы, новые свойства и новые значения. Когда в CSS появляется новая функция, дизайнеры и разработчики знают, что могут смело использовать ее, даже если она еще не получила широкой поддержки в браузерах. Они могут быть уверены, что старые браузеры отреагируют на новые возможности с полным безразличием.
Если язык элегантен и хорошо продуман, это еще не значит, что люди будут им пользоваться. CSS появился позже, чем HTML. Дизайнеры не тратили прошедшие годы на терпеливое ожидание способа стилизации своих документов в Интернете. Они использовали то, что было им доступно.
Убийственно
В 1996 году Дэвид Сигел опубликовал книгу под названием "Создание убийственных веб-сайтов". В ней он описал ряд гениальных приемов для создания привлекательного дизайна из исходного материала HTML.
Одна из техник предполагает использование прозрачного GIF, размером всего один пиксель на один пиксель. Если его вставить на страницу как элемент IMG, но задать точные значения атрибутов WIDTH и HEIGHT, то дизайнеры смогут контролировать количество пробельных элементов в своем дизайне.
Другая техника использует элемент TABLE. Этот элемент, а также его дочерние элементы TR и TD предназначались для описания табличных данных. Но при правильных значениях ширины и высоты ячеек таблицы его можно было использовать для воссоздания практически любого желаемого макета.
Это были хаки; умные решения сложных проблем. Но они имели печальные последствия. Дизайнеры относились к HTML как к инструменту для создания внешнего вида содержимого, а не как к языку для описания смысла содержимого. CSS был решением этой проблемы, если только дизайнеров можно было убедить использовать его.
Браузерные войны
Одной из причин, почему веб-дизайнеры не использовали CSS, было отсутствие поддержки браузера. Тогда были два основных браузера, конкурирующих за душу Интернета: Microsoft Internet Explorer и Netscape Navigator. Они были несовместимы по дизайну. Один браузер изобретал бы новый HTML-элемент или атрибут. Другой браузер изобретает свой собственный отдельный элемент или атрибут, чтобы делать точно то же самое.
Возможно, эта стратегия предполагала, что веб-дизайнерам придется выбирать, какие фирменные функции они будут поддерживать, подобно детям, вынужденным выбирать между родителями. В действительности у веб-дизайнеров не было выбора, кроме как писать для обоих браузеров, что означало делать в два раза больше работы.
Группа веб-дизайнеров решила, что хватит. Они собрались под знаменем проекта Web Standards Project и начали лоббировать Microsoft и Netscape, чтобы те отказались от своих проприетарных методов и приняли стандарты, такие как CSS.
Ситуация начала меняться с выходом Internet Explorer 5 для Mac, браузера, который поставлялся с впечатляющей поддержкой CSS. Если это было будущее веб-дизайна, то жизнь должна была стать гораздо более продуктивной и творческой.
Некоторые дальновидные веб-дизайнеры поймали ошибку CSS рано. Они переработали свои веб-сайты, используя CSS для макета, вместо использования TABLEs и spacer GIF. Будучи верными духу Интернета, они делились тем, чему учились, и призывали других перейти на CSS.
Некоторые дальновидные веб-дизайнеры рано поймали "жучка" CSS. Они изменили дизайн своих сайтов, используя CSS для верстки, вместо использования таблиц и распорных GIF. Верные духу основателей Интернета, они делились своими знаниями и призывали других перейти на CSS.
Возможно, лучшей демонстрацией возможностей CSS стал сайт под названием CSS Zen Garden, созданный Дейвом Ши. Это была витрина красивых и разнообразных дизайнов, все они были выполнены с помощью CSS. Важно отметить, что HTML остался прежним.
Выбор из множества дизайнов, созданных для CSS Zen Garden.
Видя, как один и тот же HTML-документ оформляется множеством различных способов, я убедился в одном из полезных эффектов CSS: разделении задач.
Связь
В любой системе, от городской инфраструктуры до компьютерной программы, разработчики этой системы могут выбрать степень зависимости частей системы друг от друга. В тесно связанной системе каждый элемент зависит от каждого элемента. В слабосвязанной системе все части независимы и практически не знают о других частях.
В тесно связанной системе каждая часть системы может делать предположения о других частях. Такие системы могут быть спроектированы довольно быстро, но за это приходится платить. Им не хватает устойчивости. Если одна часть выходит из строя, это может привести к отказу всей системы.
Проектирование слабосвязанной системы может потребовать больше работы. Платой за это является то, что общий результат более устойчив к сбоям. Отдельные части системы могут быть заменены с минимальными последствиями.
Хакеры, пионером которых был Дэвид Сигел, жестко связывали структуру и представление в единый монолитный HTML-файл. Принятие CSS ослабило эту зависимость, приблизив веб к модульному подходу философии UNIX. Презентационная информация может быть перенесена в отдельный файл – таблицу стилей. Вот почему к одному HTML-документу в CSS Zen Garden может быть применено так много различных дизайнов.
Таблица стилей по-прежнему должна обладать некоторыми знаниями о структуре HTML-документа. Довольно часто в разметку добавляются "крючки", облегчающие стилизацию: например, определенные значения атрибутов CLASS или ID. Таким образом, HTML и CSS не полностью разделены. Они образуют партнерство, но у них есть и договоренность. Документ разметки может решить, что иногда он хочет попробовать увидеть другие таблицы стилей. Между тем, таблица стилей потенциально может быть применена к другим документам. Они слабо связаны друг с другом.
Танцы, посвященные архитектуре
Для того чтобы сформировать собственные ценности дизайна, требуется время. Веб-дизайн – действительно молодая дисциплина. Пока мы медленно начинаем формировать свой собственный набор руководящих принципов, мы можем обратиться за вдохновением к другим дисциплинам.
Мир архитектуры за многие годы накопил свой собственный набор ценностей дизайна. Одна из них – принцип честности материалов. Один материал не должен использоваться в качестве заменителя другого. Иначе конечный результат будет обманчивым.
Использование таблиц TABLE для верстки – это материальная нечестность. Элемент TABLE предназначен для разметки структуры табличных данных. Конечный результат использования ТАБЛИЦ, элементов FONT и проставочных GIF – это фасад. На первый взгляд все выглядит хорошо, но при проверке это не выдерживает критики. Как только такой сайт подвергается стресс-тестированию при реальном использовании в различных браузерах, фасад рушится.
Использование CSS для представления материала является честным – это целевое использование CSS. Он также позволяет HTML быть честным в материальном плане. Вместо того чтобы пытаться выполнять две роли – структуры и представления – HTML может вернуться к выполнению своей истинной цели – разметке смысла содержимого.
По-прежнему можно использовать (или злоупотреблять) CSS, чтобы быть материально нечестным. Долгое время не существовало простого способа добавить закругленные углы к элементу с помощью CSS. Вместо этого веб-дизайнеры находили способы обойти эту проблему, накладывая на элемент фоновые изображения для имитации того же конечного эффекта. Это работало до определенного момента, но, как и в случае с проставкой GIF, это был фасад. Затем появилось свойство border-radius. Теперь дизайнеры могли получить свои закругленные углы честным с материальной точки зрения способом.
Важно отметить, что дизайнеры смогли использовать новые свойства, такие как border-radius, задолго до того, как их стали поддерживать все веб-браузеры. Все это благодаря либеральной модели обработки ошибок CSS. Новые браузеры отображали закругленные углы. Более старые браузеры не выдавали ошибку. Старые браузеры не прекращали разбор CSS и не отказывались разбирать его дальше. Они просто игнорировали бы непонятные инструкции и шли дальше. Ни вреда, ни вреда.
Конечно, это означает, что получившийся сайт будет выглядеть по-разному в разных браузерах. Некоторые люди увидят закругленные углы. Другие – нет.
И это нормально.
Рекомендации
The Web is Ruined and I Ruined it by David Siegel
CSS Zen Garden by Dave Shea
Глава 3: Visions
Дизайн добавляет ясности. Используя
цвет, типографику, иерархию, контраст и все другие имеющиеся в их распоряжении инструменты, дизайнеры могут взять неупорядоченную мешанину информации и превратить ее в нечто удобное для использования и приятное для восприятия. Как и сама жизнь, дизайн может одержать маленькую победу над энтропией вселенной, создавая очаги порядка из сырья хаоса.
Келлская книга – это прекрасно иллюстрированный манускрипт, созданный более 1200 лет назад. Заманчиво назвать ее произведением искусства, но это произведение дизайна. Цель книги – передать послание; Евангелия христианской религии. Благодаря использованию иллюстраций и каллиграфии это послание передается в привлекательном контексте, что делает его приятным для созерцания.
Начало Евангелия от Матфея в Келлской книге.
Дизайн работает в рамках ограничений. Колумбанские монахи, которые создали Келлскую книгу, работали с четырьмя чернилами на пергаменте, материале из телячьей кожи. Материалы были простыми, но четко определенными. Сенобистические дизайнеры знали оттенки чернил, вес пергамента, и, самое главное, они знали размеры каждой страницы.