HTML5 и CSS3 Современные средства Web-разработки: Вебинар

Урок 1. HTML5

•  Способ ускоренного написания HTML и CSS кода.
•  Знакомство с текстовым редактором Sublime text 2
•  Что такое HTML5?
•  Краткая история HTML
•  Новая идеология HTML5
•  Отличия HTML5 от HTML4.01 и XHTML1.x
•  Новые теги и атрибуты
•  Устаревшие теги
•  Основная структура документа
•  Обзор новых тегов HTML5, таких как , , , и и др.
•  Смысл появления новых элементов и примеры использования
•  Поддержка новых тегов в устаревших браузерах
•  Новые типы ввода данных: search, email, url, tel, range, number, datetime и др.
•  Новые атрибуты полей ввода: autofocus, placeholder, reqired, autocpmlete и др.
•  Валидация данных форм на стороне клиента
•  Обратная совместимость с устаревшими браузерами

Урок 2. CSS3

•  Боксы — основная экранная единица
•  Строчные и блочные боксы
•  Поток и расположение элементов
•  Позиционирование: абсолютное и относительное
•  Схлопывание границ (margin collapsing)
•  Выступ за границы родительского элемента
•  Верска плавающими (float) блоками
•  Очистка float
•  Приоритет селекторов CSS (специфичность)
•  Что такое CSS3?
•  Что нового в CSS3?
•  Преимущества CSS3
•  Новые подходы к разработке: прогрессивное усовершенствование и постепенная деградация
•  Можем ли мы использовать CSS3 уже сегодня?
•  
  3. Границы
•  Cоздание загругленных углов у блоков, тени под боксом, использование изображений в качестве рамки блока
•  Добавление тени к тексту
•  Текстовые эффекты: свечение, вдавленный текст, винтажный текст, эффект огня и др.
•  Автоматический перенос длинных слов в блоке
•  Форматы цвета
•  RGBA, HSLA и прозрачность
•  Удобство использования формата HSLA

Урок 3. CSS3, часть 2

•  Заливка градиентом
•  Использование полупрозрачных градиентных заливок для создания эффекта блика
•  Генераторы градиентов
•  Новые методы работы с фоном блока
•  Использование нескольких изображений для создания фона
•  Использование подгружаемых шрифтов в браузерах
•  Обзор библиотек открытых шрифтов
•  Простое создание многоколоночной раскладки текста на странице
•  Новые функции для управления интерфейсом пользователя
•  Новые методы доступа к элементам без использования классов и идентификаторов

Урок 4. CSS3, часть 3

•  Преобразования элементов на плоскости: перемещение, масштабирование, вращение и растягивание
•  Трехмерные преобразования элементов
•  Эффекты плавного перехода от одного стиля к другому без использования Flash и JavaScript
•  Создание анимации на веб-странице с помощью CSS3

Урок 5. Современные инструменты
веб-разработчика

•  Понимание media queries
•  Адаптивный и мобильный дизайн средствами CSS3
•  JavaScript-библиотека для проверки поддержки возможностей HTML5 и CSS3 в браузере
•  Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов для разработки веб-сайтов и веб-приложений

Урок 6. Less и Bootstrap

•  Динамический язык стилевой разметки. Удобный инструмент для построения больших CSS файлов
•  Обзор возможностей Twitter Bootstrap
•  Twitter Bootstrap как прекрасный пример современного кроссбраузерного CSS-фреймворка
•  Быстрое создание современных веб-интерфейсов с помощью Twitter Bootstrap

Урок 7. Canvas и Video

•  Что такое холст?
•  Координаты холста
•  Рисование изображений в реальном времени
•  Методы создания изображений в реальном времени: пути, обводка, заливка, преобразования, кривые, градиенты, тени
•  Анимация на холсте
•  Поддержка спецификации HTML 5 Canvas браузерами
•  Плюсы и минусы в использовании элементов video и audio
•  Поддержка видео и аудио форматов браузерами
•  Атрибуты элементов video/audio
•  Управление воспроизведением

Урок 8. Новые возможности HTML5

1. Новые атрибуты HTML5
•  contentEditable, data-*, tabindex, hidden и др.
2. Хранение данных
•  Web Storage — мощная, хорошо поддерживаемая замена файлам cookie
3. Автономные приложения
•  Создание веб-приложений работающих без постоянного подключения к интернету
4. Геолокация
•  Встроенные возможности определения местоположения пользователя
5. Сообщения (Web Messaging)
•  Обмен сообщениями между окнами
6. Фоновые вычисления (Web Workers)
•  Создание отдельных потоков для нагруженных вычислений
7. Сокеты (Web Sockets)
•  Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени