Занятие 1. Стандарт HTML5 в веб-разработке
Обзор технологий HTML5. HTML5 для верстки. Семантическая разметка. Микроданные. Новые элементы и атрибуты, введенные в HTML5. Обзор средств CSS3 – новые блоки свойств. Обзор ресурсов, используемых для верстки по новым стандартам. Выбор программных средств и сервисов для верстки и отладки. Поддержка HTML5 в браузерах. Способы решения проблем поддержки. Распознавание возможностей браузеров. Библиотека Modernizr.
Практическая работа: кроссбраузерная верстка страницы по стандарту HTML5
Занятие 2. Стандарт СSS3
Селекторы в CSS3. Свойства блочной модели. Поддержка новых свойств, селекторов CSS3 браузерами
Практическая работа: кроссбраузерная верстка веб-страницы с иcполь-зованием HTML5 и CSS3.
Занятие 3. Средства СSS3 для позиционирования
Выбор схем верстки. Обеспечение преемственности позиционирования элементов макета от этапа прототипирования до верстки. Новые средства позиционирования элементов графического интерфейса, предоставляемые CSS3. CSS3 box. Flexible Box. Multi-column.
Практическая работа: примеры верстки на основе различных свойств CSS3-позиционирования.
Занятие 4. Составляющие адаптируемого дизайна
Адаптируемые изображения. Применение и поддержка SVG. Паттерны адаптируемой навигации.
Практическая работа: верстка адаптируемых элементов.
Занятие 5. Фреймворки для верстки. Работа с фреймворком Boilerplate
Обзор фреймворков для верстки веб-сайтов. Фреймворки для адаптивных веб-сайтов. Состав фреймворка Boilerplate. Настраиваемые компоненты. Использование Boilerplate для верстки адаптивных веб-сайтов.
Практическая работа: верстка веб-страниц с применением фреймворка Boilerplate.
Занятие 6. Препроцессоры CSS
Обзор CSS-препроцессоров. LESS — динамический язык стилевой разметки. Средства работы с препроцессорами CSS.
Практическая работа: использование препроцессора LESS.
Занятие 7. Возможности фреймворка Twitter Bootstrap
Состав фреймворка. Настраиваемые компоненты. Использование Twitter Bootstrap для верстки адаптивных веб-сайтов.
Практическая работа: верстка веб-страниц с применением фреймворка Bootstrap.
Занятие 8. Новые возможности CSS3 и HTML5 для работы с элементами
CSS3 анимация. Переходы. Трансформации. Возможности HTML5 для работы с Web-формами в HTML5. Элементы audio, video.
Практическая работа: внедрение элементов с использованием возможностей HTML5.
Занятие 9. Подходы в веб-разработке для браузеров, поддерживающих разные возможности
Прогрессивное улучшение (progressive enhancement). Корректное сокращение функциональности (graceful degradation). Решения для старых браузеров по поддержке некоторых наиболее востребованных возможностей - SVG, canvas.
Практическая работа: тестирование сверстанных веб-интерфейсов «отзывчивого» дизайна.
Занятие 10. Экзамен
