Современный подход к HTML-верстке презентация

Содержание

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

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


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

codestyle
Применение объектно-ориентированного подхода
Независимые блоки
Простые и составные блоки
Введение понятия префикса
И снова о codestyle

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


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

LOVATA Group, EDU 2009

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


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

Адрес в интернете:

http://webstandardsgroup.org

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


Слайд 6WebStandards Group - Россия


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

форумы и регулярные встречи);
предоставление информации и помощи в освоении веб-стандартов;
способствование росту популярности веб-стандартов среди разработчиков.
Адрес в интернете: http://web-standards.ru


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


Слайд 7WebStandards Group - Россия
Первая открытая встреча прошла в
Санкт-Петербурге в конце

ноября 2007 года.

Отчет с фотографиями - http://webdev.lovata.com/2007/11/19/tretya-vstrecha-wsg-russia

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


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

2007, HighLoad++ 2008
ClientSide 2007
UA WEB 2008
Конкурс WebHighTech 2008

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


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

встреча WSG-Россия в Минске.

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


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

Standards Group (http://webstandardsgroup.org);
посетить WSG-митинг;
общаться с членами WSG-Россия онлайн.

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


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

Group, EDU 2009

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

следование букве спецификаций.
Валидность документа не панацея, хотя в 99% случаев добиться ее очень легко.
Важность использования html-тэгов при разработке с учетом их семантики.

Семантика – это система правил определения поведения отдельных структурных элементов. Она определяет смысловое назначение каждого такого элемента.

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


Слайд 13Опора на вебстандарты



Итак, помним, валидация не панацея, но ее очень легко

добиться!

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


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

Постоянная

практика гарантия “шлифовки” вашего почерка в стремлении приблизить его к идеалу.

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


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

sidebar;
подвал страницы – footer;
экстра разметка – extra;
и т.п.

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


Слайд 16Применение объектно-ориентированного подхода
Понятия классов, их наследования и переопределения – это самое

главное, что нужно знать верстальщику об объектно-ориентированном подходе к верстке.

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

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


Слайд 17Применение объектно-ориентированного подхода
Под наследованием мы будем понимать возможность порождения одного класса

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

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


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

LOVATA Group, EDU 2009

Слайд 19Независимые блоки
Виталий Харисов о независимых блоках:
http://vitaly.harisov.name/article/independent-blocks.html
http://clubs.ya.ru/yacf

Независимый блок - это прямоугольный, имеющий

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

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


Слайд 20Независимые блоки
Условия независимости блока:
описание блока только с помощью классов, id только

для javascript;
использование минимума глобальных стилей, фактически только CSS Reset;
внедрение в название каждого класса префикса;
классы не могут существовать без префикса.

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


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

неделим.

Составной блок является контейнером для других блоков, как простых, так и составных.

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


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

blocks);
блоки содержимого (content blocks).

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


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

Именование

внутренних классов должно осуществляться путем создания имен, начинающихся с имени родительского класса (.b-news ul -> .b-news .b-news__list).


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


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

к какому типу элементов страницы относится описываемый блок.

Виды префиксов:
.b- (block)
.l- (layout)
.h- (holster)
.n- (navigation)
.m- (modification)
.g- (global)

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


Слайд 25И снова о codestyle
Общая группировка правил:

Глобальный ресет
Глобальные стили
Глобальные классы
Классы лэйаута
Классы блоков

и модификаций
Классы навигации


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


Слайд 26И снова о codestyle
Группировка CSS-свойств внутри селектора:

Значения (Dimensions)
Боксовая модель (Boxes)
Позиционирование (Positioning)
Смешанные

свойства (Miscellaneous)
Текст (Text)
Шрифты (Fonts)
Разбиение на страницы (Paging)
Таблицы (Tables)
Интерфейс (Interface)
Цвет (Color/Background)
Акустические свойства (Aural)

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


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

пишем сразу под родительским с применением табулированным отступом.
Стили для Internet Explorer подключаем через Conditional Comments.
Стили для остальных браузеров пишем в конце CSS-файла методом CSS-фильтрации.

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


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

2009

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



Слайд 30Введение класса
Блок заголовков новостей

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


Слайд 31Введение класса
Блок новостной ленты


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


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

слева;
одинаковые поля у изображения справа (10px);
общие отступы от границ у блоков новостей (10px);
размеры заголовка (1.8em) и текста (1.4em) у блоков "новость дня" и каждой новости ленты новостей;
цвет текста блока с датой новости (#737373).

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


Слайд 33Введение класса
HTML:




CSS:

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


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

названии его модификатора через символ подчеркивания
(.b-news -> .b-news_main).



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


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

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

2009

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

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

2009

Слайд 37Создание модификатора класса
Блок заголовков новостей
HTML:







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


Слайд 38Создание модификатора класса
Блок заголовков новостей
CSS:


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


Слайд 39Создание модификатора класса
Блок главной новостей
HTML:




CSS:



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


Слайд 40Создание модификатора класса
Обертка блоков главной новости и заголовков новостей:

HTML:


CSS:


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

Group, EDU 2009

Слайд 41ООВ в CSS
Применение объектно-ориентированного подхода в технике sprites:
Описываемы блок:


Единое фоновое изображение:



Павел

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

Слайд 42ООВ в CSS
Применение объектно-ориентированного подхода в технике sprites:
CSS:



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

EDU 2009

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

Слайд 44Применение глобальных классов
Глобальный класс .g-active

Внешний вид блока навигации:



CSS:


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

EDU 2009

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

основе существующих;
увеличение гибкости кода.

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

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


Слайд 46Презентация конкурса WebHiTech 2009
Первый в Рунете технологический конкурс веб-сайтов.

Номинации:
лучшее дизайнерское решение;
лучшие

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

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


Слайд 47Презентация конкурса WebHiTech 2009
Цель конкурса — обратить внимание сообщества веб-разработчиков, создающих

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

Адрес в интернете: http://webhitech.ru

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


Слайд 48

Спасибо за внимание! Вопросы?






lovtsevich@lovata.com
pavel.lovtsevich@web-standards.ru

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


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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


Для правообладателей

Яндекс.Метрика