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

Нажмите для полного просмотра!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Современный подход к HTML-верстке Павел Ловцевич, Технический директор “LOVATA Group”, Участник WSG-Россия. Доклад-сообщение содержит 48 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

WebStandards Group - Россия Цели WSG-Россия: расширение возможностей обмена мнениями и знаниями (через форумы и регулярные встречи); предоставление информации и помощи в освоении веб-стандартов; способствование росту популярности веб-стандартов среди разработчиков. Адрес в интернете:

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

WebStandards Group - Россия Мероприятия, прошедшие при поддержке WSG-Россия: Российские Интернет Технологии 2007-2008 HighLoad 2007, HighLoad++ 2008 ClientSide 2007 UA WEB 2008 Конкурс WebHighTech 2008

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

WebStandards Group - Россия Как вступить в ряды WSG-Россия? зарегистрироваться на сайте Web Standards Group ( посетить WSG-митинг; общаться с членами WSG-Россия онлайн.

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

Выработка codestyle Именование элементов: шапка страницы – header; область контента – content; боковая колонка – sidebar; подвал страницы – footer; экстра разметка – extra; и т.п.

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

Простые и составные блоки Составные можно разделить на два вида: блоки разметки (layout blocks); блоки содержимого (content blocks).

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

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

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

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

Слайд 33

Описание слайда:

Введение класса HTML: CSS:

Слайд 34

Описание слайда:

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

Слайд 35

Описание слайда:

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

Слайд 36

Описание слайда:

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

Слайд 37

Описание слайда:

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

Слайд 38

Описание слайда:

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

Слайд 39

Описание слайда:

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

Слайд 40

Описание слайда:

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

Слайд 41

Описание слайда:

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

Слайд 42

Описание слайда:

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

Слайд 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)

Слайд 44

Описание слайда:

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

Слайд 45

Описание слайда:

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

Слайд 46

Описание слайда:

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

Слайд 47

Описание слайда:

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