HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3

HTML и CSS — основные инструменты гипертекстовой разметки, с помощью которых разрабатываются веб‑страницы. Формально HTML и CSS являются разными технологиями, но применяются в тесной связке друг с другом и на практике составляют единое целое. Этот учебный курс даст вам представление о современных технологиях HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.

Рассматриваются продвинутые технологии вёрстки веб‑страниц и специальные эффекты, в том числе с использованием абсолютного и относительного позиционирования, переполнения и обрезки блоков, внедрённых объектов, изображений в CSS. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб‑страниц.

Курс предназначен для веб‑мастеров, начинающих верстальщиков, редакторов кода, веб‑дизайнеров, веб‑программистов, оптимизаторов.

В рамках курса ведется работа над проектом "Кросс‑браузерная верстка PSD‑макета".

Программа курса

Модуль 1. Веб‑стандарты и их поддержка

• Стандарты W3C. Документация.

• DOCTYPE.

• Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.

• Протокол HTTP.

Модуль 2. Элементы и атрибуты HTML5 и структура страницы

• Секции, выноски, статьи, навигационные, «шапка», «подвал».

• Элементы форм и их атрибуты.

Модуль 3. Эффективное использование инструментов разработки веб‑страниц

• Инструментарий разработчика:, FTP‑клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.

• Составление и анализ требований к вёрстке веб‑страниц . Проектирование макетов. Тестирование веб‑страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц.

• Практическая работа: построение структуры страницы с использованием вспомогательных программ.

Модуль 4. Селекторы в HTML5

• Селекторы перешедшие из HTML4/xHTML.

• Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.

• Ролловеры, спрайты.

• Практическая работа: использование специфических селекторов при верстке страницы.

Модуль 5. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов

• Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.

• Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей

• Семинар: Учет удобства использования сайтов

Модуль 6. Продвинутые технологии HTML и CSS

• Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z‑index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display.

• Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow‑x и overflow‑y.

• Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.

• Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.

• Практическая работа: использование на практике CSS‑свойств позиционирования, отображения и др.

Модуль 7. Совместимость веб‑страниц с различными браузерами

• Условные комментарии.

• Скрипты для поддержки селекторов и изменения поведения старых браузеров.

• Программы эмуляторы старых версий IE.

• Фильтры.

• Практическая работа: использование кроссбраузерной верстки

Модуль 8. Использование свойств CSS2 и CSS3

• Градиенты, анимация, трансформация (2D и 3D), переходы

• Медиа‑запросы (построение мобильных версий сайтов, адаптивная верстка)

• font‑face (веб‑шрифты), текстовые эффекты,

• Многоколоночная верстка,

• Работа с фоном (+градиенты)

• Закругление углов, модель Flex‑блоков.

• Определение технологий, поддерживаемых браузером.

• Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

Модуль 9. Верстка макета

• Принципы нарезки макета из psd‑файла.

• Выбор размеров и вариантов верстки.

• Верстка.

• Практическая работа: нарезка макета страницы

• Практическая работа: верстка страницы по заданному макету.

Модуль 10. Типовые решения

• CSS‑фреймворки.

• Динамический CSS (на примере LESS).

• Шаблоны CMS

• Решения на JavaScript.

Аудиторная нагрузка в классе с преподавателем: 32 ак. ч. 

По окончании курса проводится итоговая аттестация в виде теста на последнем занятии или на основании оценок практических работ, выполняемых во время обучения.