Современный подход к HTML-верстке Текстовый материал для лекции, проводимой в рамках образовательной программы белорусского портала IT-JOB.BY. Павел Ловцевич,технический директор «Lovata Group», участник WSG-Россия 23.04.2009

2

Оглавление Вступление............................................................................................................................................. 3

Вебстандарты не религия, вебстандартисты не сектанты. Презентация WSG Russia ...................... 3

Три кита качественной верстки ............................................................................................................. 4

Опора на вебстандарты ..................................................................................................................... 4

Выработка codestyle .......................................................................................................................... 5

Применение объектно-ориентированного подхода ........................................................................ 5

Независимые блоки .............................................................................................................................. 6

Простые и составные блоки .............................................................................................................. 6

Введение понятия префикса ............................................................................................................. 8

И снова о codestyle ............................................................................................................................ 9

Объектно-ориентированный подход.................................................................................................. 10

Введение класса .............................................................................................................................. 10

Создание модификатора класса ..................................................................................................... 11

Применение глобальных классов ................................................................................................... 12

Заключение ......................................................................................................................................... 12

Презентация конкурса WebHiTech 2009 ......................................................................................... 13

3

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

Вебстандарты не религия, вебстандартисты не сектанты. Презентация WSG Russia

Об эту тему было сломано уже немало копий. Мне кажется, что сегодня споры вокруг нее уже несколько утратили актуальность в виду ряда причин. Во-первых, большинство вебразработчиков для себя уже сделало осознанный выбор в пользу спецификаций W3C. Перефразировав слова Алексея Рыбакова из Яндекса о верстке таблицами можно сказать, что те, кто до сих пор считают вебстандарты пустым звуком, будут гореть в аду. Во-вторых, главный серьезный барьер распространения вебстандартов в лице браузера Internet Explorer с невероятной скоростью сдает свои позиции. А его последняя, вышедшая буквально месяц назад восьмая версия, обещает полную поддержку CSS2.1, внимание, БЕЗ БАГОВ! Ну, без багов или нет, покажет время. Поэтому выбора особо как бы и нет, либо стандарты, либо меняем профессию. А «холиворы» в интернете, да, были зачетные, на сотни сообщений. И главное, каждый раз, как в первый раз.

С целью популяризации идеологии вебстандартов было создано международное сообщество, объединяющее приверженцев вебстандартов со всего мира, получившее название Web Standards Group. Я лишь перечислю некоторые имена тех, кто входит в него, дабы Вы могли оценить масштабность проекта: Джеффри Зельдман, Молли Хольцшлаг, Дэн Сэдерхольм Эрик Мейер и многие другие авторитетные личности. Целью сообщества является, популяризация вебстандартов, коллективное обсуждение насущных проблем, обмен опытом, проведение образовательных мероприятий.

Активным и прогрессивным специалистам индустрии вебразработок русскоязычного сегмента сети Интернет в 2006 году пришла мысль о создании подобного объединения в региональных рамках. Костяк сообщества на первом этапе составили активные пользователи проекта webmascon.com. А уже в 2007 году, организация, получив статус официального крыла WSG, начала свою активную деятельность. Кстати, в начале 2007 года и я присоединился к ребятам. Далее о WSG-Россия я буду говорить от своего лица.

Целями WSG-Россия являются:

1. расширение возможностей обмена мнениями и знаниями (через форумы и регулярные встречи);

2. предоставление информации и помощи в освоении вебстандартов; 3. способствование росту популярности вебстандартов среди разработчиков.

За эти несколько лет нами были организованы 4 встречи членов WSG-Россия, одна из которых проводилась при поддержке питерского офиса компании Яндекс и стала первой

4

открытой, посетить которую мог любой желающий. На эту историческую встречу, послушать сильных Рунета сего, пришло более 70-ти человек, что значительно превысило наши ожидания. Отчет об этом мероприятии вы можете прочитать в моем блоге. При непосредственном участии и поддержке WSG-Россия прошли крупнейшие российские форумы вебразработчиков за последние 2 года: РИТ, HighLoad, Clientside, UA WEB, конкурс WebHiTech. Сегодня ряды WSG-Россия составляют более 30 человек. Вместе с нами Вадим Макеев, Максим Россомахин, Юрий Артюх, Алексей Рыбаков, Дмитрий Барановский, Николай Мациевский, Виталий Харисов, Ольга Алексашенко и многие другие. В этом году мы планируем завершить наш долгострой – собственный сайт. Сегодня он представляет собой только заглушку с общей информацией и контактами. А совсем скоро он станет полноценным сайтом сообщества, на котором мы будем размещать самые интересные статьи на тему клиентской разработки, как авторские, так и переводные, откроем доступ к готовым решениям для наиболее часто встречающихся задач и проблем. Также мы планируем открытие публичного форума обсуждения клиентской разработки и для общения с представителями сообщества напрямую. Открытая встреча WSG-Россия в Минске планировалась еще в 2008 году. К сожалению, организовать ее не получилось. Однако спешу Вас обрадовать, вопрос о проведении в текущем году этой встречи на данный момент находится в стадии обсуждения. В общем, скрестим пальцы и будем надеяться, что на этот раз все получится. Опережая возможный вопрос «Как вступить в ряды WSG-Россия?», отвечу на него заранее. Все, что Вам нужно это:

1. зарегистрироваться на сайте Web Standards Group; 2. посетить WSG-митинг; 3. общаться с членами WSG-Россия онлайн.

Три кита качественной верстки

Опора на вебстандарты

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

5

Гораздо важнее использование при разработке html-тэгов, учитывая их семантику. Семантика – это система правил определения поведения отдельных структурных элементов. Она определяет смысловое назначение каждого такого элемента. К сожалению, на сегодняшний день машинная проверка семантичности применения html-тэгов невозможна. Итак, помним, валидация не панацея, но ее очень легко добиться!

Выработка codestyle

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

1. шапка страницы - header 2. область контента - content 3. боковая колонка - sidebar 4. подвал страницы - footer 5. экстра разметка - extra 6. и т.п.

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

Применение объектно-ориентированного подхода

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

6

признаками, позволяющими их разграничивать с другими блоками (классами). Под наследованием мы будем понимать возможность порождения одного класса от другого с сохранением всех свойств первого и добавляя новые свойства или переопределяя имеющиеся при необходимости. Что это нам дает? Подобный подход значительно упрощает разработку путем использования готовых классов. При необходимости некоторой доработки классов для новых блоков нам не придется писать классы с нуля. Техника ООВ также значительно упрощает чтение кода и дальнейшее ориентирование в нем. Из минусов можно отметить некоторое увеличение размера HTML-кода в виду применения нескольких классов для описания одного блока.

Независимые блоки

Простые и составные блоки

Название этой технике дал небезызвестный руководитель отдела верстки компании Яндекс, он же ее изобретатель, Виталий Харисов. Из первых уст о ней вы можете узнать на его личном сайте. Эта техника вобрала в себя большой опыт Виталия по верстке крупных проектов и позднее переросла в отдельный проект Yet Another CSS Framework. Техника, описываемая в подходе YACF к верстке сайтов, весьма любопытна и построена как раз по принципу ООП. Однако, на мой взгляд, во многих случаях она избыточна для средних и небольших по размеру проектов. Именно поэтому далее я буду рассказывать о своей интерпретации, подходов, описываемых Виталием в YACF. Для начала, дадим понятие независимому блоку. Это прямоугольный, имеющий возможность вложения один в другой, фрагмент страницы, который описывается обособленной разметкой. Для описания каждого блока назначается один или несколько классов. Одним из основополагающих условий независимости является описание блока исключительно с помощью классов (class). Идентификатор (id), как все мы знаем, является уникальным и не может быть использован, в отличие от класса, несколько раз в одном документе, а нам понадобится необходимость активного использования множественных классов у одного элемента. По этой причине id мы оставляем для описания поведения элементов в документе, т.е. для клиентского программирования. К слову, когда все браузеры научатся поддерживать multiple classes, ООВ сможет еще больше развернуться. Multiple class позволит задавать стили для блока, опираясь не на конкретный класс, а на их комбинацию. Следующим условием является применение минимума глобальных стилей. Виталий говорит о том, что из глобальных стилей допускается фактически только глобальный ресет. От себя я хочу добавить, что в небольших и средних проектах, на мой взгляд,

7

допустимо все-таки использовать еще и базового размера шрифта для страницы, чтобы в дальнейшем отталкиваться от него. Т.к. каждый раз нет смысла указывать один и тот же размер, это может вызвать дополнительное неоправданное увеличение размера CSS-файла. Здесь я говорю не о сбросе шрифта в базовое значение, а переопределении этого значения до размера шрифта, который является основным на странице. Минусом такого решения будет являться сложность создания масштабируемых блоков, размеры которых зависят от размера шрифта, когда значения высоты и ширины блока задаются в em'ах. Каждый класс начинается с префикса, наделяющего блок некоторой базовой сугубо визуальной семантикой. Из префикса становится понятно, к какому типу относится описываемый блок. Ну и последний аспект в том, что нет классов вне блоков. Классы могут быть либо привязаны к конкретным блокам с соответствующим именем либо вынесены в глобальные классы с соответствующим префиксом. Независимые блоки могут быть простыми и составными. Простой блок не может содержать других блоков, он не делим. Составной блок является контейнером для других блоков, как простых, так и составных. В составных блоках нельзя опираться на имена элементов, только на классы. Виталий Харисов обращает внимание, что при использовании простых блоков существует опасность, что завтра он может стать составным. Использовать простые блоки надо очень осторожно или не использовать совсем. Составные блоки можно разделить на два вида:

• блоки разметки (layout blocks); • блоки содержимого (content blocks).

Первые задают базовую раскладку страницы, а вторые всегда вложены в первые и содержат элементы, задающие этому блоку функционал. Полная независимость блока достигается с уплатой некоторой цены. Осуществляется она двумя условиями: никогда не опираться на элементы, а всем классам внутри блока необходимо давать имена, начинающиеся с имени этого блока (.b-news ul -> .b-news .b-news__list).

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

8

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

Введение понятия префикса

Как я упоминал выше, каждый класс начинается с префикса, который сразу говорит нам о том, к какому типу элементов страницы относится описываемый блок. Всего я выделяю 6 типов префиксов (5 от Харисова и 1 от меня лично). Префикс b- (block). Это, пожалуй, самый активно применяемый префикс, т.к. современные сайты и RIA состоят из большого количества средних по размеру и небольших блоков, которые группируют данные различных типов на экране монитора. Этот префикс говорит о том, что у блока нет какого-то специального назначения (раскладка, обертка, навигация и пр.). Примерами блоков являются:

• блок авторизации; • блок формы регистрации; • новостной блок; • блок подписки на рассылку; • и пр.

Префикс l- (layout). Префикс для блоков, которые служат для базовой раскладки страницы и размещения внутри себя других блоков. Эти блоки, упомянутые мной ранее, всем известны: шапка (header), подвал (footer), боковая колонка (sidebar), контент (content), экстраразметка (extra) и пр. На текущий момент в концепции YAСF остается открытым вопрос об оформительских стилях для этих блоков. Виталий Харисов предлагает в классах с этим префиксом описывать лишь позиционирование и поведение блока на странице (position, float, width, height, margin, padding), однако не исключает все-таки добавление оформительских правил (font, background, border и пр.) в виду острой необходимости в этом. Префикс h- (holster). Блок обертка. Бывают случаи, когда необходимо сгруппировать несколько блоков с целью задания им общего отступа или поля или даже для устранения проблем с раскладкой в некоторых браузерах. Например, посередине страницы у нас могут быть три блока в потоке с обтеканием с отступами сверху или снизу, тогда мы оборачиваем их в блок-обертку, делаем внутренний клиринг и задаем этому блоку отступы. Подобный подход является в некоторой степени избыточным, но при этом значительно упрощает (особенно для новичков) создание глобальной разметки страницы, позволяя избежать некоторых багов или особенностей разметки с использованием «плавающих» блоков. Префикс n- (navigation). Этот префикс я добавил от себя. Он предназначен для описания классов навигационных блоков. Раньше я пользовался схемой nav-тип-навигации. Теперь

9

же эта практика просто переросла в соответствующий префикс. Навигационными блоками являются глобальная навигация, локальная навигация, «пейджинг» страниц/блоков, «хлебные крошки». Никаких особенных правил для этого префикса нет, кроме того, что он присваивается только для элементов навигации. Префикс m- (modification). Данный префикс, предназначен для создания визуальных модификаций блока. Например, при смене шаблона страницы. В гипотетической ситуации, нам может понадобится смена внешнего вида (цветов, графики), но не заданной структуры блоков и страницы в целом. Здесь и пригодится этот префикс. Модификация блока также может осуществляться через подчеркивание для введения различных модификаций одного блока. И используется всегда в паре с основным классом. Подробнее на этом я остановлюсь позже. В концепции YACF описывается еще 2 принципа внесения модификаций в блок: через контекст (но это обычный каскад стилей, поэтому на этом мы останавливаться не станем) и модификация файлами (на мой взгляд, редко применимая в небольших и средних проектах, поэтому также рассматривать не будем). Префикс g- (global). Это своеобразный уникальный тип префикса, который применяется к классам, не привязанным к контексту. При добавлении класса с этим префиксом к элементу страницы меняется поведение элемента.

И снова о codestyle

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

1. Глобальный ресет 2. Глобальные стили 3. Глобальные классы 4. Классы лэйаута 5. Классы блоков и модификаций 6. Классы навигации

Группировка CSS-свойств внутри селектора. Все CSS свойства можно разбить на следующие типы:

10

1. Значения (Dimensions) 2. Боксовая модель (Boxes) 3. Позиционирование (Positioning) 4. Смешанные свойства (Miscellaneous) 5. Текст (Text) 6. Шрифты (Fonts) 7. Разбиение на страницы (Paging) 8. Таблицы (Tables) 9. Интерфейс (Interface) 10. Цвет (Color/Background) 11. Акустические свойства (Aural)

Именно в таком порядке я и описываю любой селектор. Этот порядок сложился за время моей многолетней практики. Например, первые 4 типа являются наиболее употребимыми, поэтому я выношу их в самое начало. Свойства, описывающие интерфейс я выношу в конец, т.к. всегда легко их там нахожу. А вот все остальное, связанное с представлением текстовых данных я располагаю в середине описания селектора. Акустические же стили стоят у меня в конце, как экзотика в некотором роде, т.к. я еще никогда не видел примеров применениях их на живых проектах. Все свойства каждого селектора я рекомендую писать одну строку. Мониторы сегодня широкие, поэтому явных проблем с длиной строки особенно не будет наблюдаться, зато вы очень сэкономите место по вертикали, вместив, максимальное количество селекторов за один раз, доступное для вашего взгляда. Каждый селектор, описывающий блок, вложенный в другой блок, я пишу сразу же за селектором родительского блока с табулированным отступом, что наглядно отображает уровень вложенности правил. Кроссбраузерность достигается разделением правил для непослушных браузеров. Так сложилось, что именно Firefox 3 имеет наиболее точную интерпретацию спецификации CSS. Поэтому мы пишем основные стили для него, вынося уникальные стили либо в отдельные файлы, как в случае с Internet Explorer, либо через CSS-фильтры для нормальных браузеров внутри основного файла. На CSS-фильтрах и Conditional Comments я останавливаться не стану, т.к. каждый из Вас с легкостью самостоятельно найдет материалы по данным темам в сети интернет.

Объектно-ориентированный подход

Введение класса

Еще году в 2006 я впервые для себя открыл технику, суть которой состояла в присвоении класса для элемента body, в зависимости от которого менялась, например, картинка в хедере сайта. Уже это было в какой-то мере внедрением принципа объектно-ориентированного подхода. В дальнейшем, изучая чужие работы, я стал замечать добавление нескольких однотипных классов для блоков. При детальном рассмотрении,

11

оказалось, что они выполняют фактически ту же роль, которой я наделял класс элемента body. Однако применение класса непосредственно для блока является более гибким методом. Давайте рассмотрим пример с блоками новостей на сайте. Пусть у нас будет блок «новость дня» на главной странице, а также блок заголовков последних двух новостей там же. Плюс к этому у нас будет отдельная страница с полноценной лентой новостей. А в дальнейшем первые два блока мы визуально объединим в один горизонтальный. На первом этапе мы должны вычленить все общее, имеющееся у этих двух блоков. Давайте детально рассмотрим их и найдем общие черты:

1. изображение к новости с обтеканием текста слева; 2. одинаковые поля у изображения справа (10px); 3. общие отступы от границ у блоков новостей (10px); 4. размеры заголовка (1.8em) и текста (1.4em) у блоков «новость дня» и каждой

новости ленты новостей; 5. цвет текста блока с датой новости (#737373).

Для описания всех этих идентичных параметров мы вводим класс b-news. Теперь все наши блоки выглядят максимально одинаково. Некоторые различия будут лишь в потоке html.

Создание модификатора класса

Теперь нам необходимо внести в шаблоны каждого блока те стилистические отличия, которые есть у этих блоков. Для этого мы создадим модификатор класса вида “название-класса_название-модификатора”.

У нас уже есть общий класс b-news. Для главной новости мы вводим b-news_main, для ленты новостей - b-news_belt, а для блока заголовков новостей - b-news_headers.

И для каждого из этих блоков в дополнение к основному классу в HTML дописываем новые модифицированные классы. А в CSS соответственно описываем уникальные стили для модифицированных классов.

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

Оборачиваем блоки b-news_main и b-news_headers блоком-оберткой. И описываем новый класс.

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

12

CSS, работая с описанием селекторов. Это актуально, в частности, для техники sprite'ов. Рассмотрим следующий блок.

Каждая иконка в рассматриваемом блоке является фоновым изображением, причем все иконки зашиты в одно изображение.

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

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

Применение глобальных классов

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

Класс g-active, пожалуй, самый употребимый из глобальных классов. Он используется для изменения поведения элемента на странице, придания какой-либо динамики. Чаще всего я его употребляю в различного рода навигациях. Каждый активный пункт меню помечается этим классом.

Употребление этого и других глобальных модификаторов обязательно применяется в контексте с использованием каскада стилей.

Класс g-hide используется для скрытия различных динамических блоков. Это могут быть и неактивные табы и раскрывающиеся блоки по типу расширенных вебформ. Класс g-hide_txt используется для скрытия текста через свойство красной строки абзаца (text-indent). Это необходимо для того, чтобы поисковые системы испытывали меньше стресса, находя скрытый текст и пытаясь уличить вас в мошенничестве. Группа классов g-float (g-float_left, g-float_right, g-float_none). Иногда необходимо задать обтекание блоку в контексте какой-либо страницы, а в водить при этом модификатор только ради обтекания не имеет смысла. В этом случае мы и используем эти классы. Их же мы используем для отмены обтекания. Группа блоков клиринга g-clear (g-clear, g-clear_left, g-clear_right). Как понятно из названия, классы этой группы мы применяем в случае необходимости сброса обтекания блока, идущего за блоком с этим обтеканием установленным.

Заключение В заключение я хочу выделить плюсы и минусы объектно-ориентированного подхода к верстке. Плюсы:

13

1. уменьшение объема уникальных CSS-правил; 2. упрощение ориентации в CSS-коде; 3. упрощение развертывания новых блоков на основе существующих; 4. увеличение гибкости кода.

Минусы:

1. увеличение объема HTML; 2. необходимость изучать что-то новое. ;)

Презентация конкурса WebHiTech 2009

В прошлом году при поддержке RU-CENTER прошел первый в Рунете технологический конкурс вебсайтов — «WebHiTech». Конкурс проводился в трех номинациях:

• лучшее дизайнерское решение; • лучшие потребительские качества; • лучшее использование технологий.

Всего в конкурсе принял участие 141 проект из 286 принятых к рассмотрению на этапе отбора. В этом году конкурс будет проводиться снова. Прием заявок намечен на конец лета. Я хочу кратко рассказать вам о конкурсе. Профессиональный сетевой конкурс «WebHiTech» – это конкурс технологического совершенства сайтов. Претендовать на победу в конкурсе может любой из общедоступных вебсайтов, ориентированных на русскоговорящую аудиторию. Победителей определяет жюри конкурса. Если вы пишете чистый и валидный HTML- и CSS-код, разделяете контент и представление на уровне конечного кода веб-страниц, придерживаетесь идеалов семантической разметки, с пиететом относитесь к слову «вебстандарты», и при этом ваши сайты красивы, аккуратны, удобны в использовании и функционально доступны максимально широкому кругу пользователей, то тогда наш конкурс для вас! О начале приема заявок на конкурс будет сообщено на официальном сайте. В каждой номинации планируется вручение трех призов: за первое, второе и третье места. Цель конкурса – обратить внимание сообщества вебразработчиков, создающих и поддерживающих русскоязычные сайты, на перспективные вебтехнологии, новые отраслевые стандарты, правила хорошего тона и т. д., позволяющие существенно улучшить потребительские качества и повысить эффективность разработки сайтов, но при этом незаслуженно игнорируемые консервативным большинством. Конкурс призван выявлять вебпроекты, способные убедительно доказывать и

14

недвусмысленно демонстрировать широкому кругу практикующих вебразработчиков явную целесообразность применения технологических новаций такого рода. Миссия конкурса «WebHiTech» – посильное содействие повышению культуры вебразработки в Рунете посредством популяризации уважительного отношения вебразработчиков к духу (первостепенно) и букве (не первостепенно, но тоже важно) актуальных рекомендаций Консорциума W3C. Имеются в виду, главным образом, спецификации расширяемого языка разметки гипертекста XHTML 1.0 Strict и XHTML 1.1, каскадных листов стилей CSS2 и руководящие указания по обеспечению доступности вебконтента WCAG 1.0. Порядок заявления сайтов на конкурс, отбора номинантов и выявления победителей подробно описан в официальных правилах конкурса, неизменных в течение всего времени его проведения с момента начала приема заявок до момента вручения призов победителям. Спасибо за внимание! Вопросы?