Вебстандарты в свете нового поколения Веба : webDev

Вебстандарты в свете нового поколения Веба

Опубликовано June 24, 2007
Категория Вебстандарты, События |

Как и обещал выкладываю материалы своего доклада на Байнет 2.0. В конце статьи вы найдете ссылки для скачивания pdf-версии доклада и архив с презентацией.

Всегда поступайте правильно.
У некоторых людей это будет вызывать одобрение, у остальных – удивление.

Марк Твен.

Вступление. Выделение проблемных вопросов.

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

Что такое вебстандарты?

Вебстандарты это патентованные рекомендации Консорциума всемирной паутины World Wide Web Consortium, которые представляют собой технические спецификации. Благодаря особой патентной политике, основанной на W3C Royalty-Free License, стандарты могут свободно применяться при разработке любых информационных систем.

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

Любой стандарт W3C проходит 4 стадии согласования до того, как официально станет Рекомендацией W3C.

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

World Wide Web Consortium (W3C) — организация, разрабатывающая и внедряющая технологические стандарты для сети Интернет. Она была создана в 1994 году, как консультативный орган для лидеров компьютерной индустрии. Консорциум возглавляет Тим Бернерс-Ли, изобретатель HTTP, HTML, URI, автор множества других разработок в области информационных технологий и отец-основатель Интернета.

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

Более конкретной целью W3C можно выделить помощь компьютерным программам в достижении способности к взаимодействию в Сети, т. н. «сетевой интероперабельности». Применение единых стандартов в Сети — это ключевой шаг для достижения такого взаимодействия.

Со времени своего основания Консорциум всемирной паутины проделал огромную работу, выпустив более 80 рекомендаций. Членами Консорциума ныне являются более 350 организаций из 28 стран мира. На рекомендациях W3C основаны тысячи программ и сотни миллионов файлов в сети Интернет. В настоящее время Консорциум является, пожалуй, самой авторитетной организацией в области стандартизации Всемирной паутины.

Что такое сайты нового поколения Веб 2.0?

Само понятие Веба 2.0 появилось с легкой руки известного компьютерного эксперта Тима О’Рейли, владельца известного издательства O’Reilly Media, в процессе подготовки очередной интернет-конференции. Так что же он имел в виду, говоря о концепции Веб 2.0?

По версии Тима Веб 2.0 это не столько технология, сколько подход к созданию и использованию приложений, когда Веб рассматривается не просто как транспорт для передачи данных, а является неотъемлемой частью приложения. Так же и пользователи — не просто являются потребителями сервиса, но зачастую и соразработчиками, поставляя для него контент. Сложив эти два компонента вместе и добавив современных технологий — мы и получим Веб 2.0.

Четкого определения этого модного понятия до сих пор не дал ни один эксперт. Просто потому что его и не существует. Говоря о Веб 2.0, мы можем излагать мысли тезисно. Вот такие тезисы, на мой взгляд, можно выделить. Веб 2.0 это:

  1. социальная направленность;
  2. применение веба в качестве платформы;
  3. предоставление сервиса, вместо контента;
  4. генерация контента пользователями сервисов;
  5. импорт/экспорт контента между сервисами;
  6. маркировка контента;
  7. новое поколение настраиваемых интерфейсов;
  8. маркетинговый инструмент, в конце концов и пр.

Как видим, идеология “сайтов второго поколения” основывается на социальной ориентации и той самой сетевой интероперабельности, которая предполагает широкие возможности взаимодействии независимых сервисов через стандартные, открытые интерфейсы. Однако на сегодняшний день реализация взаимодействия сервисов в сети усложняется без применения единых форматов представления данных, основанных на строгости представления.

Таким образом, поколение сайтов 2.0 предполагает корректное применение в технологическом процессе таких технологии, как ECMAScript, XHTML, XML, JSON, AJAX, CSS, разработанных Консорциумом W3.

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

Какие преимущества дают вебстандарты в рамках нового поколения вебсайтов?

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

  1. наличие атрибута alt=”” для изображений (с записью, соответствующей содержанию изображения);
  2. для элементов Flash используйте звуковое сопровождение, заменяющее атрибут alt=””;
    используйте относительные размеры шрифтов для возможности их масштабирования;
    создавайте метки табуляции для полей и кнопок форм вашего документа, управляйте порядком табуляции, создавайте горячие клавиши;
  3. фон содержащего текст блока всегда делайте контрастный, для проверки отключайте отображение графики в браузере и убедитесь, что весь текст остается доступным для чтения;
  4. проверяйте ваш документ с отключенным CSS, он должен быть удобочитаемым;
  5. проверяйте ваш документ в основных браузерах;
  6. обеспечьте альтернативу для посетителей, не пользующихся мышью: onclick=”” применяйте вместе с onkeypress=””;
  7. внимательно относитесь к формам, обрамляйте их в <fieldset> с описанием в <legend> и скрывайте при необходимости с помощью стилей.
  1. Экранные устройства. В первую очередь цветные мониторы.
  2. Портативные устройства. КПК, мобильные телефоны и прочее.
  1. All – любое устройство отображения.
  2. Aural – устройство речевой синтезатор.
  3. Braille – для устройств с обратной связью, на основе шрифта Брайля.
  4. Embossed – Намеченный для пронумерованных страницы для слепых принтеров.
  5. Handheld – карманные устройства, например, КПК.
  6. Print – устройства печати.
  7. Projection – проекционные устройства.
  8. Screen – экранные устройства, например, монитор.
  9. Tty – устройства, использующие сетку с фиксированным размером знаков, например, телетайпы.
  10. Tv – телевизионные устройства.

Текущее положение вещей в сети.

Морально устаревший код в современных вебразработках.

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

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

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

Из основных архаизмов на сегодняшний день можно выделить следующие:

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

Препятствия к широкому внедрению вебстандартов.

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

Широкое распространение браузеров с очень низкой и зачастую неправильной поддержкой вебстандартов.
Массовая пассивность и безответственность вебразработчиков.

Низкий порог входа в среду веб-разработчиков.

На май 2007 года, согласно статистике liveinternet.ru, пользователями наиболее распространенных сегодня браузеров Internet Explorer 6-ой и 7-ой версий являются 72.6% аудитории русскоязычного сегмента Интернета. Internet Explorer 6.0 был выпущен в 2002 году, т.е. 5 лет назад и на сегодняшний день во всех отношениях является морально устаревшим продуктом. Однако, производитель этого браузера – компания Microsoft, пользуясь своим фактически монопольным положением на рынке браузеров, до последнего момента не спешила к обновлению линейки своего продукта.

Вебразработчики всего мира с надеждой ожидали выхода новой версии. Однако разочарование после столь долгого ожидания оставило неприятный осадок. Согласно независимой статистике сайта Web Devout, поддержка CSS2.1 у нового браузера составила всего 55% против 51% у предыдущей версии. Для сравнения у браузеров Firefox 2 и Opera 9 эти показатели составляют 93% и 96% соответственно. Если в эту статистику включить тест поддержки DOM, ECMA Script, то картина будет еще более удручающей.

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

Сейчас русскоязычный интернет переживает ситуацию 4-5 летней давности, которая имела место на Западе, где вебстандарты стали неотъемлемой и частью процесса вебразработок.

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

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

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

Раньше задача стояла так – решить насущные проблемы без учета завтрашнего дня.”

Внедрение вебстандартов в процесс разработки сайтов нового поколения.

Философия разделения структуры, представления и поведения.

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

Итак, структуру документа описывают языки разметки:

Стилистическое оформление берет на себя единственная актуальная технология в нескольких своих версиях:

За поведение отвечают стнадртизированный скриптовый язык и несколько версий объектной модели документа:

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

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

Документы, созданные таким образом, легки в “чтении” и понимании кода, гибки в его расширении, а также в его поддержке и изменении. С помощью разделения структуры и представления вы можете создавать бесчисленное множество стилей, которые можно подключать в зависимости от текущих потребностей.

Поведение документа контролируется с помощью стандартной объектной модели документа DOM1-2, которая замечательно работает с CSS, HTML, XHTML, XML и ECMAScript. Внесение в разметку того, что касается сугубо функциональности, в той же мере оÑ?ибочно, что и применение устаревших приемов верстки. Это нарушает принцип разделение функций во front-end-технологиях. Применение этих стандартов W3C позволяет в большинстве случаев отказаться от использования патентованных платформозависимых технологий.

Семантика документа, как повод к смене образа мышления.

Разработка вебсайтов по стандартам в контексте верстки несет в себе два критерия:

Семантика – это система правил определения поведения отдельных структурных элементов. Семантика определяет смысловое значение каждого такого элемента.

Таким образом, первым шагом к вебстандартам станет отказ от табличной верстки в пользу семантической или, как ее еще называют, “дивной”. Т.к. семантическая суть структурного элемента <table> – отображение табличных данных! В свое время таблицы стали применяться в отсутствие иного приемлемого способа разметки документа. Однако сегодня у разработчиков есть мощнейшие инструменты в виде технологий HTML, XHTML и CSS. Карты в руки, как говориться.

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

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

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

В общем, лучше не успеть научиться верстать таблицами, чем потом переучиваться.

Необходимо отметить, что существуют некоторые ограничения среды отображения, в частности, монитора, которые в своей работе должен учитывать дизайнер. Дизайнер не всегда может понять логику сервиса, ему важнее композиция работы. Но, увлекаясь тем, как сделать правильную композицию, он теряет “логику” своей модели. Таким образом, в идеале должен существовать тандем дизайнера и фронтенд разработчика. В своем совместном сотрудничестве они будут корректировать работу друг друга, что избавит от дальнейÑ?их проблем в реализации дизайна.

И запомните, стандарт – это, прежде всего, эталон!

Синтаксическая корректность документа (well-formed).

Синтаксическая корректность (англ. well-formed) – это набор четких, строгих правил составления документов, форматируемых посредством тэгов. В нашем случае мы будем рассматривать ее в контексте XML-совместимых документов, в частности, XHTML.

Основными правилами являются:

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

Сегодня большинство гипертекстовых документов обрабатываются не XML, а SGML-парсером, который “прощает” встречающиеся ошибки. Ð?менно поэтому и существует такое безразличное отношение к контролю качества разработки.

Правила синтаксической корректности ничего не говорят о наличии или отсутствии каких-то конкретных элементов. За этот аспект отвечают правила корректности конкретного языка разметки, так называемая валидность.

Синтаксические правила корректности языка разметки (valid).

Корректность языка разметки (валидность) - это синтаксические правила корректности конкретных языков разметки.

Правила валидности определяют следующие аспекты:

Правила валидности записываются формально в виде DTD-описания, подключаемого к документу, путем объявления его типа (DOCTYPE).

Объявление типа документа (англ. DOCTYPE) – это элемент структуры (x)HTML-документа, указывающий браузеру, каким образом следует обрабатывать документ, а службам проверки он сообщает, какая версия языка разметки используется и как тестировать документ на соответствие стандартам.

Указание типа документа является ключевым компонентом в совместимости гипертекстовых документов и влияет на поведение документа в различных браузерах.

Элемент DOCTYPE помещается над всеми (x)HTML-документами, предшествуя остальному коду. После объявления типа документа для (x)HTML-документов следует пространство имен. Пространством имен в XML является набор элементов и имен атрибутов, связанных с определенным типом документа (DTD). Декларация пространства имен позволяет идентифицировать пространство имен, путем указания его расположения. Также вместе с декларацией указывается язык документа и языковая версия XML.

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

Типов режимов существует три:

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

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

Итак, подытожим реакцию браузеров на объявление типа документа:

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

Сейчас идёт постепенный отказ от формата DTD по ряду причин:

На смену DTD идет стандарт консорциума W3C XML Schema, однако более детальное углубление в этот вопрос выходит за рамки обсуждаемой темы.

Конформность документа (conformance).

Конформность – это полное соответствие документа стандарту W3C.

Соответствие стандарту W3C подразумевает не только прохождение синтетических тестов, таких, как валидатор (x)HTML, CSS. Многие правила в спецификации сформулированы в виде простого человеческого языка.

Ошибками в валидных, но не конформных документах могут быть следующие примеры:

К сожалению, конформность документа невозможно проверить машинным способом. Это проверяется только со здравым умом и светлой памятью живого специалиста.

Повышение доступности содержимого сайтов нового поколения.

Пользователи с ограниченными возможностями.

Доступность сайта и вебстандарты связаны самым непосредственным образом. В конце 90-х готов W3C даже запустил специальный проект в помощь разработчикам для повышения доступности их сайтов, получивший название Web Accessibility Initiative (WAI).

Согласно этому документу доступность разделяется на 3 уровня, которые позволяют постепенно добиваться максимальной доступности сайта:

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

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

Все средства повышения доступности никак не влияют на дизайн сайта, они применяются в разметке незаметно для пользователя. Я перечислю основные из них:

Думаю, всем известна история Дага Баумана, который после редизайна сайта wired.com получил благодарственное письмо от некоего Марка, посетителя обновленного сайта, получившего удовольствие от работы с ним. Эта история не получила бы широкой огласки, если бы не одно «но». Этот посетитель оказался слепым человеком.

Так что выбор остается за вами – терять или не терять огромное число возможных посетителей с ограниченными физическими возможностями.

Многообразие сред отображения документов.

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

Согласно спецификации CSS2 можно выделить следующие типы актуальные типы сред отображения пользовательских агентов:

Кроме того, определяются и более экзотические среды, такие как:

Полный список выглядит следующим образом:

Скачать доклад в PDF-формате. Скачать презентацию в формате s5 (работает под Mozilla Firefox).

Коментарии



4 коментариев к “Вебстандарты в свете нового поколения Веба”

  1. Atik on June 24th, 2007 1:02 pm

    отличный доклад!

  2. Артем on June 25th, 2007 7:30 am

    Доклад замечательный.
    Боль

  3. Kot Matroskin© on June 26th, 2007 6:09 pm

    Есть три символа - и &, которые обязаны быть экранированы везде с помощью и &. А внутри атрибутов надо экранировать еще и двойную кавычку с помощью “.

    бугага! :)

  4. Stranger on June 29th, 2007 5:37 am

    Спасибо. Отличный доклад!

Оставить комментарий