Задача курса познакомить слушателей с особенностями современной верстки веб-интерфейсов с помощью HTML5/CSS3.
Особое внимание уделено проблеме кроссбраузерности. Рассмотрены особенности применения HTML5 и CSS3 в современных браузерах: IE8/9, Google Chrome, Firefox, Opera, Safari.
Программа курса:
Обзор HTML5
Что такое HTML5?
Краткая история HTML
Новая идеология HTML5
Отличия HTML5 от HTML4.01 и XHTML1.x
Новые теги и атрибуты
Устаревшие теги
Новые семантические элементы HTML5
Основная структура документа
Обзор новых тегов HTML5, таких как <section>, <article>, <header>, <footer> и <nav> и др.
Смысл появления новых элементов и примеры использования
Поддержка новых тегов в устаревших браузерах
Новые возможности для создания форм
Новые типы ввода данных: search, email, url, tel, range, number, datetime и др.
Новые атрибуты полей ввода: autofocus, placeholder, reqired, autocpmlete и др.
Валидация данных форм на стороне клиента
Обратная совместимость с устаревшими браузерами
Элемент Canvas (Холст)
Что такое холст?
Координаты холста
Рисование изображений в реальном времени
Методы создания изображений в реальном времени: пути, обводка, заливка, преобразования, кривые, градиенты, тени
Анимация на холсте
Поддержка спецификации HTML 5 Canvas браузерами
Видео и аудио
Плюсы и минусы в использовании элементов video и audio
Поддержка видео и аудио форматов браузерами
Атрибуты элементов video/audio
Управление воспроизведением
Хранение данных
Web Storage — мощная, хорошо поддерживаемая замена файлам cookie
Автономные приложения
Создание веб-приложений работающих без постоянного подключения к интернету
Геолокация
Встроенные возможности определения местоположения пользователя
Сообщения (Web Messaging)
Обмен сообщениями между окнами.
Фоновые вычисления (Web Workers)
Создание отдельных потоков для нагруженных вычислений
Сокеты (Web Sockets)
Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени
Введение в CSS3
Что такое CSS3?
Что нового в CSS3?
Преимущества CSS3
Новые подходы к разработке: прогрессивное усовершенствование и постепенная деградация
Можем ли мы использовать CSS3 уже сегодня?
Границы
Cоздание загругленных углов у блоков, тени под боксом, использование изображений в качестве рамки блока
Текстовые эффекты
Добавление тени к тексту
Текстовые эффекты: свечение, вдавленный текст, винтажный текст, эффект огня и др.
Автоматический перенос длинных слов в блоке
Градиенты
Заливка градиентом
Использование полупрозрачных градиентных заливок для создания эффекта блика
Генераторы градиентов
2D-преобразования
Преобразования элементов на плоскости: перемещение, масштабирование, вращение и растягивание
3D-преобразования
Трехмерные преобразования элементов
Фон
Новые методы работы с фоном блока
Использование нескольких изображений для создания фона
Шрифты
Использование подгружаемых шрифтов в браузерах
Обзор библиотек открытых шрифтов
Переходы
Эффекты плавного перехода от одного стиля к другому без использования Flash и JavaScript
Анимация
Создание анимации на веб-странице с помощью CSS3
Многоколоночность
Простое создание многоколоночной раскладки текста на странице
Интерфейс пользователя
Новые функции для управления интерфейсом пользователя
Работа с цветом
Форматы цвета
RGBA, HSLA и прозрачность
Удобство использования формата HSLA
Селекторы, комбинаторы и псевдо-классы
Новые методы доступа к элементам без использования классов и идентификаторов
Zen Coding
Способ ускоренного написания HTML и CSS кода
Медиа запросы (Media Queries)
Понимание media queries
Адаптивный и мобильный дизайн средствами CSS3
Модель гибкого поля
Принципы создания верстки будущего
Modernizr
JavaScript-библиотека для проверки поддержки возможностей HTML5 и CSS3 в браузере
HTML5 Boilerplate
Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов для разработки веб-сайтов и веб-приложений
LESS
Динамический язык стилевой разметки. Удобный инструмент для построения больших CSS файлов
Twitter Bootstrap
Обзор возможностей Twitter Bootstrap
Twitter Bootstrap как прекрасный пример современного кроссбраузерного CSS-фреймворка
Быстрое создание современных веб-интерфейсов с помощью Twitter Bootstrap
Основы usability и accessibility
Эргономика, практичность и удобство использования сайта (usability) и доступность (accessibility) сайтов
Цена вопроса: 12370
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.