Презентация Современный подход к HTML-верстке Павел Ловцевич, Технический директор LOVATA Group, Участник WSG-Россия онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Современный подход к HTML-верстке Павел Ловцевич, Технический директор LOVATA Group, Участник WSG-Россия абсолютно бесплатно. Урок-презентация на эту тему содержит всего 48 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:48 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:559.39 kB
- Просмотров:42
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Современный подход к HTML-верстке
Павел Ловцевич,
Технический директор “LOVATA Group”,
Участник WSG-Россия
№2 слайд
Содержание слайда: Тезисы
Вступление
Вебстандарты не религия, вебстандартисты не сектанты
Три кита качественной верстки
Опора на вебстандарты
Выработка codestyle
Применение объектно-ориентированного подхода
Независимые блоки
Простые и составные блоки
Введение понятия префикса
И снова о codestyle
№3 слайд
Содержание слайда: Тезисы
Объектно-ориентированный подход
Введения класса
Создание модификатора класса
Применение глобальных классов
Заключение
Выводы
Презентация конкурса WebHiTech 2009
№4 слайд
Содержание слайда: Вебстандарты не религия
№5 слайд
Содержание слайда: WebStandards Group
Цели:
популяризация вебстандартов;
коллективное обсуждение насущных проблем;
обмен опытом;
проведение образовательных мероприятий.
Адрес в интернете: http://webstandardsgroup.org
№6 слайд
Содержание слайда: WebStandards Group - Россия
Цели WSG-Россия:
расширение возможностей обмена мнениями и знаниями (через форумы и регулярные встречи);
предоставление информации и помощи в освоении веб-стандартов;
способствование росту популярности веб-стандартов среди разработчиков.
Адрес в интернете: http://web-standards.ru
№7 слайд
Содержание слайда: WebStandards Group - Россия
Первая открытая встреча прошла в
Санкт-Петербурге в конце ноября 2007 года.
Отчет с фотографиями - http://webdev.lovata.com/2007/11/19/tretya-vstrecha-wsg-russia
№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 (http://webstandardsgroup.org);
посетить WSG-митинг;
общаться с членами WSG-Россия онлайн.
№11 слайд
Содержание слайда: Три кита качественной верстки
Опора на вебстандарты.
Выработка codestyle.
Применение объектно-ориентированного подхода.
№12 слайд
Содержание слайда: Опора на вебстандарты
Приверженность духу вебстандартов, их идеологии, а не слепое фанатичное следование букве спецификаций.
Валидность документа не панацея, хотя в 99% случаев добиться ее очень легко.
Важность использования html-тэгов при разработке с учетом их семантики.
Семантика – это система правил определения поведения отдельных структурных элементов. Она определяет смысловое назначение каждого такого элемента.
№13 слайд
Содержание слайда: Опора на вебстандарты
Итак, помним, валидация не панацея, но ее очень легко добиться!
№14 слайд
Содержание слайда: Выработка codestyle
Codestyle – это некий почерк каждого верстальщика, выработанный с практикой.
Постоянная практика гарантия “шлифовки” вашего почерка в стремлении приблизить его к идеалу.
№15 слайд
Содержание слайда: Выработка codestyle
Именование элементов:
шапка страницы – header;
область контента – content;
боковая колонка – sidebar;
подвал страницы – footer;
экстра разметка – extra;
и т.п.
№16 слайд
Содержание слайда: Применение объектно-ориентированного подхода
Понятия классов, их наследования и переопределения – это самое главное, что нужно знать верстальщику об объектно-ориентированном подходе к верстке.
В нашем случае класс это имя блока данных на странице, объединенных некими общими признаками, позволяющими их разграничивать с другими блоками (классами).
№17 слайд
Содержание слайда: Применение объектно-ориентированного подхода
Под наследованием мы будем понимать возможность порождения одного класса от другого с сохранением всех свойств первого и добавляя новые свойства или переопределяя имеющиеся классы при необходимости.
№18 слайд
Содержание слайда: Независимые блоки
Простые и составные блоки.
Введение понятия префикса.
И снова о codestyle.
№19 слайд
Содержание слайда: Независимые блоки
Виталий Харисов о независимых блоках:
http://vitaly.harisov.name/article/independent-blocks.html
http://clubs.ya.ru/yacf
Независимый блок - это прямоугольный, имеющий возможность вложения один в другой, фрагмент страницы, который описывается своей обособленной разметкой. Для описания каждого блока назначается один или несколько классов.
№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
Цель конкурса — обратить внимание сообщества веб-разработчиков, создающих и поддерживающих русскоязычные сайты, на перспективные веб-технологии, новые отраслевые стандарты, правила хорошего тона и т. д., позволяющие существенно улучшить потребительские качества и повысить эффективность разработки сайтов, но при этом незаслуженно игнорируемые консервативным большинством.
Адрес в интернете: http://webhitech.ru
№48 слайд
Содержание слайда: Спасибо за внимание! Вопросы?
lovtsevich@lovata.com
pavel.lovtsevich@web-standards.ru
Скачать все slide презентации Современный подход к HTML-верстке Павел Ловцевич, Технический директор LOVATA Group, Участник WSG-Россия одним архивом:
