'

Современный подход к HTML-верстке

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

Независимые блоки Виталий Харисов о независимых блоках: http://vitaly.harisov.name/article/independent-blocks.html http://clubs.ya.ru/yacf Независимый блок - это прямоугольный, имеющий возможность вложения один в другой, фрагмент страницы, который описывается своей обособленной разметкой. Для описания каждого блока назначается один или несколько классов. 19 Павел Ловцевич, LOVATA Group, EDU 2009


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35

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


Слайд 36

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


Слайд 37

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


Слайд 38

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


Слайд 39

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


Слайд 40

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


Слайд 41

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


Слайд 42

Применение глобальных классов .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) Павел Ловцевич, LOVATA Group, EDU 2009 43


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

Спасибо за внимание! Вопросы? lovtsevich@lovata.com pavel.lovtsevich@web-standards.ru Павел Ловцевич, LOVATA Group, EDU 2009 48


×

HTML:





Ссылка: