|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайтостроение по стандартамУважаемые коллеги! Положительным началом нового года для меня стало прочтение книги Джеффри Зельдмана “Web-дизайн по стандартам” (М.: NT Press, 2005). Настоятельно рекомендую эту книгу всем, кто занимается сайтостроением и обучением основам сайтостроения. Новичкам книга может показаться забавной по стилю изложения, но не всегда понятной по содержанию. Новичкам книга покажется сложной, но ее содержание очень важно. Если мы не хотим отстать от прогресса в нашей области, нужно срочно садиться в поезд под названием “Web-дизайн по стандартам”. Предлагаю вашему вниманию серию заметок, которые написаны для моего курса “Web-конструирование” (дистанционный курс в рамках Роботландского сетевого университета). Надеюсь, заметки помогут новичкам понять основные идеи книги Джеффри Зельдмана и освоить конкретные рецепты сайтостроения в современных условиях на практике. Заметка 1. Почему мир сайтостроения изменился
Так получилось, что книга попала в мои руки как раз в то время, когда я уже осознал происходящие в Web перемены и предпринял в связи с этим конкретные действия. В этом учебном году я предложил студентам курса 42 Роботландского сетевого университета новую программу обучения и новый учебник, в котором CSS излагается практически в самом начале, а основным принципом сайтостроения провозглашается отделение дизайна от содержания (говоря словами Джеффри Зельдмана, “оформление и контент не спят в одной постели”). Почему я изменил программу, написал новый учебник? Я увидел, что современные браузеры изменились, они стали работать примерно одинаково, они, наконец, стали поддерживать CSS (и DOM). Я понял, что настало время, когда прекрасные возможности CSS (и JavaScript) можно применять не только для создания локальных приложений, “заточенных” под один браузер, но создавать красивые, удобные и простые в изготовлении сайты для Web. Эти сайты будут хорошо работать во всех браузерах, а на изменения внешнего вида сотни страниц будет уходить только время редактирования одного-единственного CSS-файла (в котором оформление “спит” отдельно от содержания). В своем предисловии к книге “DHTML-конструирование” я писал в 2000 году:
Сейчас времена изменились. Во-первых, медленные аналоговые модемы сменяются быстрыми цифровыми (первые очень скоро, думаю, уйдут к динозаврам), во-вторых, война браузеров, наконец, закончилась и заменилась позитивной конкуренцией: производители теперь пытаются обогнать друг друга в наиболее полной и точной поддержке стандартов W3C, а не в стремлении ввести в свои браузеры патентованные технологии, поддерживаемые только их компанией и браузером, и не поддерживаемые остальными (как было раньше). Иными словами:
В соответствии с этим дизайнеры по всему миру стали по-другому строить свои сайты. Если раньше для поддержки разных браузеров приходилось либо строить простые страницы, либо писать варианты сайта для разных браузеров (и платформ), либо создавать в коде многочисленные переключатели по браузеру на JavaScript, то теперь настало время, когда можно строить сайты по стандартам и быть уверенными, что они будут работать во всех браузерах сегодня и через 10 лет. Ура! Книга Джеффри Зельдмана методично и обстоятельно описывает новый подход — создание сайта по стандартам. То, что я знал из собственного опыта и по разрозненным статьям в Интернете, то, о чем я только интуитивно догадывался, а также то, о чем не догадывался вовсе, приведено в этой книге в виде стройной системы взглядов и конкретных рекомендаций с фрагментами кода и ссылками на полезные ресурсы. На этом заканчиваю вводную часть. В следующей заметке рассмотрим подробнее пресловутую “войну браузеров”, интересную теперь уже с исторической точки зрения. Заметка 2. Война браузеров закончилась! Пора вылезать из окопов
Содержание заметки. Война браузеров, которая привела к отходу от стандартов и смешению в одном коде логической и визуальной разметки, закончилась. Теперь производители браузеров соревнуются за соблюдение стандартов W3C, и разработчики должны создавать свои сайты по этим стандартам, отделяя логическую разметку в коде HTML (или XHTML) от визуальной разметки в коде CSS. * * * HTML был создан как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области верстки. Изначально ни о каком дизайне HTML-документов речи просто не шло. HTML служил только для разметки структуры: тегами можно было обозначить заголовки, абзацы, списки, ссылки, другие логические части документа. Как известно, Web придумал Тим Бернерс-Ли (идея высказана в 1989 году), он же был главным автором первой и второй версий языка HTML.
Дмитрий Кирсанов “Веб-дизайн” Очень скоро интерес к гипертексту вышел за пределы деятельности научных работников, захватил широкие слои населения. Гипертекст стал не только удобным средством обмена документами, но и получил постоянную прописку в Сети в виде электронных изданий (сайтов), предназначенных для массового потребления. Понятно, что дизайнеров не устраивало отсутствие средств для управления внешним видом гипертекстовых страниц, и HTML стал под их напором стремительно расширяться за счет введения тегов и атрибутов, отвечающих за визуальное представление элементов на экране. Таким образом, содержание и внешний вид были “уложены в одну постель”, и первоначальная идея HTML, как языка для разметки структуры, была проигнорирована в практике сайтостроения. Что получилось? HTML задумывался как универсальный формат, независимый от компьютера (платформы), операционной системы и средств просмотра (HTML-браузеров). Независимость обеспечивалась тем, что HTML содержал лишь логические теги для разметки структуры текста. Используя HTML, можно было помечать заголовки, абзацы, списки, адреса, ссылки, цитаты... В этих тегах не было указаний на то, как должен выглядеть элемент на экране. За внешний вид документа ответственность возлагалась только на средства просмотра. Браузеры отображали документ в соответствии с принятыми в издательском деле правилами и возможностями среды, в которой работали. Так, заголовок первого уровня H1 выводился крупным жирным шрифтом, цитаты CITE — курсивом, абзацы P отделялись друг от друга пустыми строками, элементы списка UL снабжались маркерами, элементы списка OL — числовыми номерами. Растущий интерес к Web все испортил! Пользователи требовали визуальных красот на страницах сайта, соответственно, дизайнеры требовали расширений языка HTML средствами визуальной разметки. Разработчики браузеров активно откликнулись на веяние времени и стали, соревнуясь друг с другом, добавлять в HTML визуальные теги и атрибуты, которые поддерживались только их браузером. Так и началась война браузеров. Соперники старались увлечь разработчиков и пользователей возможностями своего продукта и тем самым вытеснить конкурентов с бурно растущего рынка. Иногда производители браузеров принимали нововведения соперников, иногда нет. Например, компания Netscape придумала тег FONT с атрибутом size для управления размером текста. Компания Microsoft приняла этот тег и добавила в него атрибут face для указания шрифта, и этот атрибут был принят Netscape. А вот элемент BGSOUND (музыка при открытии страницы) поддерживает только Microsoft. Элемент LAYER (слой) специфичен для Netscape. Организация W3C, отвечавшая за разработку стандартов (тогда они назывались рекомендациями), пришла в ужас и предложила в 1995 году язык CSS, который должен был работать совместно с HTML (начиная с версии 3).
Адрес сайта Консорциума: W3C рекомендовала переложить на CSS определение параметров представления элементов HTML в средствах просмотра (графических, текстовых, речевых, каких угодно других), освободив тем самым гипертекстовое содержание от многочисленного визуального мусора, не имеющего отношения к структурной разметке. Однако визуальные теги и атрибуты в HTML 3 остались, как и в последней версии HTML 4.01. Их уже невозможно было удалить из языка, так как в Сети прочно обосновались миллионы страниц, в которых они использовались. Но в описаниях языка четвертых версий W3C явно разделила элементы и атрибуты на логические и визуальные. Последние были объявлены “не рекомендованными”. Примеры не рекомендованных элементов.
Список нерекомендованных атрибутов:
Правда, непонятно, почему элементы B и I не попали в этот список — это типичные визуальные теги, и их не следует использовать. Вместо них надо использовать логические элементы вроде STRONG, EM, DFN, CITE. Запись: Это <B>важное</B> слово. не вкладывает никакого структурного смысла в помеченный фрагмент “важное”. Тег B должен отобразить это слово жирным, но жирность имеет отношение к визуальному образу, а не к структуре. Более того, жирность может быть переопределена средствами CSS на курсив или обычное начертание. Другое дело, когда мы пишем: Это <STRONG>важное</STRONG> слово. Тем самым мы выделяем важное слово в структуре текста независимо от представления этого слова на экране (которое может быть произвольным). Еще большее отношение к структуре имеют такие элементы, как DFN (термин), CITE (цитата) и другие из списка, который приводится ниже. Вот список из 31 структурного элемента. Этих элементов HTML вполне достаточно, чтобы построить сайт любой структуры (не считая форм, которые задаются элементом FORM, и объектов, обеспечивающих в них интерактивность: кнопки, флажки, радиокнопки, поля ввода и разворачивающиеся списки). Список структурных элементов HTML
Что делать, если этих элементов не хватает для разметки структуры документа? Используя элементы DIV и SPAN, можно конструировать новые “элементы”, вводя для них имена при помощи значения атрибута class. Так можно ввести элемент “ученик” и использовать его при формировании списка учеников, а также в любых других местах: <P> * * * Итак, W3C решила вернуть разработчиков на прежние позиции: использовать HTML только для разметки структуры документа. А как же дизайн? А для дизайна W3C предложила совершенно другой язык — CSS. Средства последнего существенно превосходят возможности визуальных тегов и атрибутов HTML.
Совмещение HTML с CSS решается просто. В головной части HTML-кода нужно записать элемент LINK, в котором указывается CSS-файл (в примере файл style.css), относящийся к данной гипертекстовой странице: <LINK rel="stylesheet" type="text/css" href="style.css"> Теперь браузер будет руководствоваться указаниями стилевого файла style.css при построении элементов HTML на экране. Так, в CSS-файле можно написать такое определение: BODY и текст на страницу будет выводиться размером, меньше обычного в два раза. После того, как тестеры (или заказчик) сделают замечание о плохой читаемости текста, можно отредактировать это определение, записав: BODY Текст на всех страницах, HTML-код которых содержит связь <LINK rel="stylesheet" type="text/css" href="style.css"> станет крупнее на 20%. При этом сам HTML-код страниц (которых может быть сотни) не меняется, правка выполняется в едином для всех страниц стилевом файле style.css. Какие выгоды приносит отделение содержания от его представления в средствах просмотра (графических, текстовых, языковых, любых)? Использование CSS позволяет:
Вы, наверное, думаете, что все закричали “ура!” и принялись за дело? Разработчики браузеров срочно написали новые продукты с поддержкой CSS, а разработчики сайтов оставили свою практику смешивать структуру и образ в HTML-коде и развели их по разным файлам? Как бы не так! В ответ на рекомендации W3C разработчики новых версий популярных браузеров Netscape Navigator и Microsoft Internet Explorer реализовали в своих продуктах поддержку CSS лишь частично. Причем эти части мало пересекались. Свойства CSS, реализованные в Netscape, не поддерживались Microsoft, и наоборот. А то, что поддерживалось в обоих браузерах, часто поддерживалось по-разному и не соответствовало стандарту. Понятно, что такое положение вещей не добавляло оптимизма разработчикам сайтов, и они почти не использовали CSS в своих кодах. По крайней мере о полном разделении содержания и его представления речи не шло.
Ситуация стала меняться только в 2001 году. Вышел браузер Netscape 6. Этот браузер не был модификацией ранних версий, он был написан с нуля специально для поддержки стандартов. CSS1 браузер Netscape 6 поддерживал полностью, а также большинство возможностей CSS2. Однако версия Netscape 6.0 не прижилась: она содержала много ошибок, была медленной и неуклюжей. На базе того же движка Gecko (на котором был построен браузер Netscape 6) в 2002 году был выпущен браузер Mozilla 1.0.
Википедия Современный браузер Mozilla Firefox 2 был выпущен в 2006 году. Он полностью поддерживает CSS1 и практически полностью CSS2, третья версия этого браузера планируется к выпуску в 2008 году. Современный браузер Opera 9 (выпуск 2007 года) полностью поддерживает CSS1 и CSS2.
Современные браузеры Internet Explorer 6 и 7 поддерживают большинство свойств CSS1 и частично CSS2.
http://www.habrahabr.ru/blog/columns/6393.html Совместимость браузера с CSS3 можно легко проверить, открыв в проверяемом браузере страницу http://www.css3.info/selectors-test/test.html.
Таким образом, ситуация с браузерами поменялась кардинально: если раньше браузеры воевали за рынок, не обращая внимания на стандарты, то теперь они соревнуются за наиболее полное соответствие стандартам. Разработчикам, наконец, можно вылезать из окопов и проектировать свои сайты, ориентируясь на стандарты W3C, а не защищать свои коды при помощи уловок и разных версий страниц для разных браузеров. И главное: разработчики, наконец, могут и должны в соответствии с рекомендациями W3C и здравым смыслом разделять в своих продуктах содержание от визуального представления, разнося их по разным файлам. Структура содержания страницы описывается в HTML-файле, и таких файлов на сайте может быть сотни. А визуальное представление — в одном-единственном файле CSS. Ложка дегтя. Об идеальной поддержке браузерами стандартов пока говорить еще не приходится, и это снова вынуждает разработчиков применять уловки, но эти заплаты переходного периода теперь можно конструировать на базе стандартов, сохраняя тем самым единство общего подхода и преемственность по отношению к будущим браузерам.
А.. А.. Дуванов,
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||