Павел Ловцевич, Технический директор LOVATA Group, Участник WSG-Россия

Тезисы 1. Вступление 1. Вебстандарты не религия, вебстандартисты не сектанты 2. Три кита качественной верстки 1. Опора на вебстандарты 2. Выработка codestyle 3. Применение объектно-ориентированного подхода 3. Независимые блоки 1. Простые и составные блоки 2. Введение понятия префикса 3. И снова о codestyle 2Павел Ловцевич, LOVATA Group, EDU 2009

Тезисы 4. Объектно-ориентированный подход 1. Введения класса 2. Создание модификатора класса 3. Применение глобальных классов 5. Заключение 1. Выводы 2. Презентация конкурса WebHiTech Павел Ловцевич, LOVATA Group, EDU 2009

Вебстандарты не религия 4Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group Цели: 1. популяризация вебстандартов; 2. коллективное обсуждение насущных проблем; 3. обмен опытом; 4. проведение образовательных мероприятий. Адрес в интернете: 5Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group - Россия Цели WSG-Россия: 1. расширение возможностей обмена мнениями и знаниями (через форумы и регулярные встречи); 2. предоставление информации и помощи в освоении веб-стандартов; 3. способствование росту популярности веб- стандартов среди разработчиков. Адрес в интернете: 6Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group - Россия Первая открытая встреча прошла в Санкт-Петербурге в конце ноября 2007 года. Отчет с фотографиями - wsg-russia 7Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group - Россия Мероприятия, прошедшие при поддержке WSG-Россия: 1. Российские Интернет Технологии HighLoad 2007, HighLoad ClientSide UA WEB Конкурс WebHighTech Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group - Россия Планы на 2009 год: 1. запуск web-standards.ru; 2. проведение конкурса WebHiTech 2009; 3. открытая встреча WSG-Россия в Минске. 9Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group - Россия Как вступить в ряды WSG-Россия? 1. зарегистрироваться на сайте Web Standards Group ( 2. посетить WSG-митинг; 3. общаться с членами WSG-Россия онлайн. 10Павел Ловцевич, LOVATA Group, EDU 2009

Три кита качественной верстки 1. Опора на вебстандарты. 2. Выработка codestyle. 3. Применение объектно-ориентированного подхода. 11Павел Ловцевич, LOVATA Group, EDU 2009

Опора на вебстандарты 1. Приверженность духу вебстандартов, их идеологии, а не слепое фанатичное следование букве спецификаций. 2. Валидность документа не панацея, хотя в 99% случаев добиться ее очень легко. 3. Важность использования html-тэгов при разработке с учетом их семантики. Семантика – это система правил определения поведения отдельных структурных элементов. Она определяет смысловое назначение каждого такого элемента. 12Павел Ловцевич, LOVATA Group, EDU 2009

Опора на вебстандарты Итак, помним, валидация не панацея, но ее очень легко добиться! 13Павел Ловцевич, LOVATA Group, EDU 2009

Выработка codestyle Codestyle – это некий почерк каждого верстальщика, выработанный с практикой. Постоянная практика гарантия шлифовки вашего почерка в стремлении приблизить его к идеалу. 14Павел Ловцевич, LOVATA Group, EDU 2009

Выработка codestyle Именование элементов: 1. шапка страницы – header; 2. область контента – content; 3. боковая колонка – sidebar; 4. подвал страницы – footer; 5. экстра разметка – extra; 6. и т.п. 15Павел Ловцевич, LOVATA Group, EDU 2009

Применение объектно- ориентированного подхода Понятия классов, их наследования и переопределения – это самое главное, что нужно знать верстальщику об объектно-ориентированном подходе к верстке. В нашем случае класс это имя блока данных на странице, объединенных некими общими признаками, позволяющими их разграничивать с другими блоками (классами). 16Павел Ловцевич, LOVATA Group, EDU 2009

Применение объектно- ориентированного подхода Под наследованием мы будем понимать возможность порождения одного класса от другого с сохранением всех свойств первого и добавляя новые свойства или переопределяя имеющиеся классы при необходимости. 17Павел Ловцевич, LOVATA Group, EDU 2009

Независимые блоки 1. Простые и составные блоки. 2. Введение понятия префикса. 3. И снова о codestyle. 18Павел Ловцевич, LOVATA Group, EDU 2009

Независимые блоки Виталий Харисов о независимых блоках: 1. blocks.html 2. Независимый блок - это прямоугольный, имеющий возможность вложения один в другой, фрагмент страницы, который описывается своей обособленной разметкой. Для описания каждого блока назначается один или несколько классов. 19Павел Ловцевич, LOVATA Group, EDU 2009

Независимые блоки Условия независимости блока: 1. описание блока только с помощью классов, id только для javascript; 2. использование минимума глобальных стилей, фактически только CSS Reset; 3. внедрение в название каждого класса префикса; 4. классы не могут существовать без префикса. 20Павел Ловцевич, LOVATA Group, EDU 2009

Простые и составные блоки Простой блок не может содержать других блоков, он неделим. Составной блок является контейнером для других блоков, как простых, так и составных. 21Павел Ловцевич, LOVATA Group, EDU 2009

Простые и составные блоки Составные можно разделить на два вида: 1. блоки разметки (layout blocks); 2. блоки содержимого (content blocks). 22Павел Ловцевич, LOVATA Group, EDU 2009

Простые и составные блоки Полная независимость блока достигается опорой только на классы. Именование внутренних классов должно осуществляться путем создания имен, начинающихся с имени родительского класса (.b- news ul ->.b-news.b-news__list). 23Павел Ловцевич, LOVATA Group, EDU 2009

Введение понятия префикса Каждый класс начинается с префикса, который сообщает о том, к какому типу элементов страницы относится описываемый блок. Виды префиксов: 1..b- (block) 2..l- (layout) 3..h- (holster) 4..n- (navigation) 5..m- (modification) 6..g- (global) 24Павел Ловцевич, LOVATA Group, EDU 2009

И снова о codestyle Общая группировка правил: 1. Глобальный ресет 2. Глобальные стили 3. Глобальные классы 4. Классы лэйаута 5. Классы блоков и модификаций 6. Классы навигации 25Павел Ловцевич, LOVATA Group, EDU 2009

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

И снова о codestyle 1. Каждый селектор пишем в одну строку. 2. Селектор дочернего блока пишем сразу под родительским с применением табулированным отступом. 3. Стили для Internet Explorer подключаем через Conditional Comments. 4. Стили для остальных браузеров пишем в конце CSS-файла методом CSS-фильтрации. Павел Ловцевич, LOVATA Group, EDU

Объектно-ориентированный подход 1. Введение класса 2. Создание модификатора класса 3. Применение глобальных классов Павел Ловцевич, LOVATA Group, EDU

Введение класса Павел Ловцевич, LOVATA Group, EDU Блок главной новости

Введение класса Блок заголовков новостей Павел Ловцевич, LOVATA Group, EDU

Введение класса Блок новостной ленты Павел Ловцевич, LOVATA Group, EDU

Введение класса Общие черты у блоков новостей: 1. изображение к новости с обтеканием текста слева; 2. одинаковые поля у изображения справа (10px); 3. общие отступы от границ у блоков новостей (10px); 4. размеры заголовка (1.8em) и текста (1.4em) у блоков "новость дня" и каждой новости ленты новостей; 5. цвет текста блока с датой новости (#737373). Павел Ловцевич, LOVATA Group, EDU

Введение класса HTML: CSS: Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Созданием имени модификатора класса основывается на имени класса и названии его модификатора через символ подчеркивания (.b-news ->.b-news_main). Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Блок ленты новостей с модификатором HTML: Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Блок ленты новостей с модификатором CSS: Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Блок заголовков новостей HTML: Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Блок заголовков новостей CSS: Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Блок главной новостей HTML: CSS: Павел Ловцевич, LOVATA Group, EDU

Создание модификатора класса Обертка блоков главной новости и заголовков новостей: HTML: CSS: Павел Ловцевич, LOVATA Group, EDU

ООВ в CSS Применение объектно-ориентированного подхода в технике sprites: Описываемы блок: Единое фоновое изображение: Павел Ловцевич, LOVATA Group, EDU

ООВ в CSS Применение объектно-ориентированного подхода в технике sprites: CSS: Павел Ловцевич, LOVATA Group, EDU

Применение глобальных классов 1..g-active 2..g-hide 3..g-hide_txt 4. Группа.g-float (.g-float_left,.g-float_right,.g- float_none) 5. Группа.g-clear (.g-clear,.g-clear_left,.g-clear_right) Павел Ловцевич, LOVATA Group, EDU

Применение глобальных классов Глобальный класс.g-active Внешний вид блока навигации: CSS: Павел Ловцевич, LOVATA Group, EDU

Заключение Плюсы: 1. уменьшение объема уникальных CSS-правил; 2. упрощение ориентации в CSS-коде; 3. упрощение развертывания новых блоков на основе существующих; 4. увеличение гибкости кода. Минусы: 1. увеличение объема HTML; 2. необходимость изучать что-то новое. ;) Павел Ловцевич, LOVATA Group, EDU

Презентация конкурса WebHiTech 2009 Первый в Рунете технологический конкурс веб- сайтов. Номинации: 1. лучшее дизайнерское решение; 2. лучшие потребительские качества; 3. лучшее использование технологий. Павел Ловцевич, LOVATA Group, EDU

Презентация конкурса WebHiTech 2009 Цель конкурса обратить внимание сообщества веб- разработчиков, создающих и поддерживающих русскоязычные сайты, на перспективные веб-технологии, новые отраслевые стандарты, правила хорошего тона и т. д., позволяющие существенно улучшить потребительские качества и повысить эффективность разработки сайтов, но при этом незаслуженно игнорируемые консервативным большинством. Адрес в интернете: Павел Ловцевич, LOVATA Group, EDU

Спасибо за внимание! Вопросы? Павел Ловцевич, LOVATA Group, EDU