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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26 И снова о 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

43 Применение глобальных классов 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

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

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

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

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

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