Современный подход к HTML-верстке Павел Ловцевич, Технический директор “LOVATA Group”, Участник WSG-Россия

Тезисы

Вступление
Вебстандарты не религия, вебстандартисты не сектанты
Три кита качественной верстки
Опора на вебстандарты
Выработка

Тезисы

Объектно-ориентированный подход
Введения класса
Создание модификатора класса
Применение глобальных классов
Заключение
Выводы
Презентация конкурса WebHiTech 2009

Павел Ловцевич,

Вебстандарты не религия

Павел Ловцевич, LOVATA Group, EDU 2009

WebStandards Group

Цели:
популяризация вебстандартов;
коллективное обсуждение насущных проблем;
обмен опытом;
проведение образовательных мероприятий.
Адрес в интернете:

WebStandards Group - Россия
Цели WSG-Россия:
расширение возможностей обмена мнениями и знаниями (через

WebStandards Group - Россия

Первая открытая встреча прошла в
Санкт-Петербурге в конце

WebStandards Group - Россия

Мероприятия, прошедшие при поддержке
WSG-Россия:
Российские Интернет Технологии 2007-2008
HighLoad

WebStandards Group - Россия

Планы на 2009 год:
запуск web-standards.ru;
проведение конкурса WebHiTech 2009;
открытая

WebStandards Group - Россия

Как вступить в ряды WSG-Россия?
зарегистрироваться на сайте Web

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

Опора на вебстандарты.
Выработка codestyle.
Применение объектно-ориентированного подхода.

Павел Ловцевич, LOVATA

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

Приверженность духу вебстандартов, их идеологии, а не слепое фанатичное

Опора на вебстандарты
Итак, помним, валидация не панацея, но ее очень легко

Выработка codestyle

Codestyle – это некий почерк каждого верстальщика, выработанный с практикой.
Постоянная

Выработка codestyle

Именование элементов:
шапка страницы – header;
область контента – content;
боковая колонка –

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

Понятия классов, их наследования и переопределения – это самое

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

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

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

Простые и составные блоки.
Введение понятия префикса.
И снова о codestyle.

Павел Ловцевич,

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

Виталий Харисов о независимых блоках:
http://vitaly.harisov.name/article/independent-blocks.html
http://clubs.ya.ru/yacf
Независимый блок - это прямоугольный, имеющий

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

Условия независимости блока:
описание блока только с помощью классов, id только

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

Простой блок не может содержать других блоков, он

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

Составные можно разделить на два вида:
блоки разметки (layout

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

Полная независимость блока достигается опорой только на классы.
Именование

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

Каждый класс начинается с префикса, который сообщает о том,

И снова о codestyle

Общая группировка правил:
Глобальный ресет
Глобальные стили
Глобальные классы
Классы лэйаута
Классы блоков

И снова о codestyle

Группировка CSS-свойств внутри селектора:
Значения (Dimensions)
Боксовая модель (Boxes)
Позиционирование (Positioning)
Смешанные

И снова о codestyle

Каждый селектор пишем в одну строку.
Селектор дочернего блока

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

Введение класса
Создание модификатора класса
Применение глобальных классов

Павел Ловцевич, LOVATA Group, EDU

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

Павел Ловцевич, LOVATA Group, EDU 2009

Блок главной новости

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

Блок заголовков новостей

Павел Ловцевич, LOVATA Group, EDU 2009

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

Блок новостной ленты

Павел Ловцевич, LOVATA Group, EDU 2009

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

Общие черты у блоков новостей:
изображение к новости с обтеканием текста

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

HTML:
CSS:

Павел Ловцевич, LOVATA Group, EDU 2009

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

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

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

Блок ленты новостей с модификатором
HTML:

Павел Ловцевич, LOVATA Group, EDU

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

Блок ленты новостей с модификатором
CSS:

Павел Ловцевич, LOVATA Group, EDU

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

Блок заголовков новостей
HTML:

Павел Ловцевич, LOVATA Group, EDU 2009

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

Блок заголовков новостей
CSS:

Павел Ловцевич, LOVATA Group, EDU 2009

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

Блок главной новостей
HTML:
CSS:

Павел Ловцевич, LOVATA Group, EDU 2009

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

Обертка блоков главной новости и заголовков новостей:
HTML:
CSS:

Павел Ловцевич, LOVATA

ООВ в CSS

Применение объектно-ориентированного подхода в технике sprites:
Описываемы блок:
Единое фоновое изображение:

Павел

ООВ в CSS

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

Павел Ловцевич, LOVATA Group,

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

.g-active
.g-hide
.g-hide_txt
Группа .g-float (.g-float_left, .g-float_right, .g-float_none)
Группа .g-clear (.g-clear, .g-clear_left, .g-clear_right)

Павел

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

Глобальный класс .g-active
Внешний вид блока навигации:
CSS:

Павел Ловцевич, LOVATA Group,

Заключение

Плюсы:
уменьшение объема уникальных CSS-правил;
упрощение ориентации в CSS-коде;
упрощение развертывания новых блоков на

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

Первый в Рунете технологический конкурс веб-сайтов.
Номинации:
лучшее дизайнерское решение;
лучшие

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

Цель конкурса — обратить внимание сообщества веб-разработчиков, создающих