Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Декабрь, 2016

htmlcssmanual.ru — Испытание временем

Испытание временем

Если вам доводилось писать документ, рассчитанный на сколько-нибудь продолжительное существование, то вы понимаете, как важно внимательно подойти к его составлению.

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

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

Хотя сайт Zen Garden и существует в Web, но у него есть особенности, из-за которых составление HTML для него оказалось ближе к написанию книги. Если бы было разрешено изменять разметку после того, как посетители начали присылать свои варианты, то все старые поступления оказались бы неработоспособны.

Возникновение

web   html  

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

Разумеется, в то время от основных производителей браузеров помощи было не дождаться. Казалось, что ситуация будет только ухудшаться. Два крупнейших игрока Microsoft и Netscape нагромождали одно нестандартное расширение на другое, стремясь обойти друг друга в знаменитой Войне Браузеров. Конкуренция, конечно, способствует инновациям, но может и задушить их на корню; веб-мастера были вынуждены поддерживать несколько версий сайта, поскольку одна и та же разметка, редко выглядела одинаково в разных браузерах, если вообще хоть как-то отображалась.

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

Возникновение

web   html  

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

Разумеется, в то время от основных производителей браузеров помощи было не дождаться. Казалось, что ситуация будет только ухудшаться. Два крупнейших игрока Microsoft и Netscape нагромождали одно нестандартное расширение на другое, стремясь обойти друг друга в знаменитой Войне Браузеров. Конкуренция, конечно, способствует инновациям, но может и задушить их на корню; веб-мастера были вынуждены поддерживать несколько версий сайта, поскольку одна и та же разметка, редко выглядела одинаково в разных браузерах, если вообще хоть как-то отображалась.

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

Зачем нужны стандарты

css   web   html   w3c   xhtml  

В рабочие группы W3C входят специалисты из разных областей, которые собираются для того, чтобы заблаговременно решать проблемы, о которых средний дизайнер и думать никогда не должен. Цель состоит в выработке набора рекомендаций, настолько продуманных, что разработчикам редакторов и браузеров остается лишь строго следовать спецификации. В результате же авторы контента и дизайнеры обретают уверенность в том, что их сайты можно будет просмотреть с помощью широчайшего спектра пользовательских агентов. Под «пользовательским агентом» мы, конечно, понимаем браузер, но браузер, установленный на типичном настольном компьютере, — это лишь верхушка айсберга. По мере распространения портативных устройств, таких, скажем, как мобильные телефоны, все больше пользователей станут просматривать веб-страницы, не будучи привязаны к своему домашнему компьютеру. Не все будут заходить в сеть с помощью вашего любимого браузера; просто потому, что не смогут. К примеру, для людей с физическими недостатками существуют специальные программы для чтения с экрана или печати азбукой Брайля; есть и программы для увеличения изображения. Поскольку весь смысл выпуска спецификаций W3C состоял в том, чтобы навести порядок в неразберихе, царившей в Web в 90-х годах, теперь вряд ли имеет смысл готовить разные версии сайта для разных пользовательских агентов. Все это было учтено в различных рекомендациях, в частности HTML 4.01, XHTML, CSS (каскадных таблицах стилей) и DOM (объектной модели документа).

Эти технологии были с восторгом приняты дизайнерами и программистами, объединившимися в проекте Web Standards Project. Казалось логичным поддержать спецификации, которые гарантировали широчайшей аудитории доступность контента при сохранении контроля над визуальным представлением. Технология CSS попала в самую точку, но вместе с тем.это был совершенно новый подход к созданию веб-сайтов. Не так-то просто оказалось убедить других дизайнеров в необходимости изучать CSS, и первые несколько лет нового тысячелетия ушли на то, чтобы понять, как этой методикой пользоваться. Вот так обстояли дела в Web, когда зародилась идея сайта Zen Garden. В то время CSS был в основном уделом программистов и кодировщиков, они прекрасно разбирались в технических нюансах, но макеты страниц, выходившие из их рук, часто оказывались минималистскими, без искорки. Дизайнеры же в области графики не воспринимали идею CSS, поскольку не видели настоящих примеров CSS-дизайна.

Семантическая разметка

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

Наша семья

На фотографии Мэтт и Джери. Как обычно, Мэтт корчит рожи. У нас не так много фотографий, где бы он этого не делал.

А вот и текст, размеченный семантически:

Наша семья

На фотографии Мэтт и Джереми. Как обычно, Мэтт корчит рожи. У нас не так много фотографий, где бы он этого не делал.

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

Главное во втором примере- это то, что внешнее представление элементов на данном этапе несущественно; мы все равно переопределим его с помощью CSS.Элементы выбраны только исходя из соображений адекватного описания контента. Именно в этом и состоит семантика HTML- выбирать элементы, основываясь на их предназначении, а не внешнем виде. У семантического форматирования документа есть весомые преимущества, которые мы обсудим чуть ниже. А пока имейте в виду, что применять таблицы стилей следует к правильному, хорошо семантически структурированному документу.

Испытание временем

Если вам доводилось писать документ, рассчитанный на сколько-нибудь продолжительное существование, то вы понимаете, как важно внимательно подойти к его составлению.

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

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

Хотя сайт Zen Garden и существует в Web, но у него есть особенности, из-за которых составление HTML для него оказалось ближе к написанию книги. Если бы было разрешено изменять разметку после того, как посетители начали присылать свои варианты, то все старые поступления оказались бы неработоспособны.

Испытание временем

Если вам доводилось писать документ, рассчитанный на сколько-нибудь продолжительное существование, то вы понимаете, как важно внимательно подойти к его составлению.

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

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

Хотя сайт Zen Garden и существует в Web, но у него есть особенности, из-за которых составление HTML для него оказалось ближе к написанию книги. Если бы было разрешено изменять разметку после того, как посетители начали присылать свои варианты, то все старые поступления оказались бы неработоспособны.

Основной вариант дизайна-«Безмятежность»

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

Все изображения и текст в основном варианте дизайна, за исключением текста в самом теле страницы, были нарисованы в Adobe Photoshop. Сначала предполагалось, что тексты заголовков будут состоять из нарисованных вручную каллиграфических штрихов, но, потратив час на работу с кисточкой и тушью, Ши решил, что шрифт Calligraphic 421 от компании Bitstream подходит гораздо лучше.

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

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

Засеваем почву

css  

 В конце 2002 года над этой проблемой задумался создатель сайта Zen Garden Дэйв Ши. Как далекие от изящества примеры могут вдохновить людей, способных создать с помощью CSS истинные шедевры? Поскольку у Дэйва был опыт и в кодировании, и в графике, то он сумел распознать потенциал CSS в качестве языка дизайнера, И понял, что им пользуются не те люди, которые должны бы. В результате зародилась идея: а здорово было бы создать центральное хранилище лучших дизайнерских работ с применением CSS. Очевидно, недостаточно было просто собрать имеющееся, поскольку ничего вообще не было. Воодушевить дизайнеров на создание новых прекрасных работ — вот ключ к реализации идеи. Так были посеяны семена нового проекта.

Заложение фундамента

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

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

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

Теперь целью становится перенос всего форматирования в CSS-файл и использование HTML-разметки только для описания структуры. CSS — это язык дизайна, который накладывается на существующую структуру и позволяет визуализировать ее. Язык HTML более не следует использовать для дизайна. Ну а все-таки- что мы выигрываем, уделяя такое внимание правильности структуры? Вообще, что в этом контексте означает слово «структура»?