HTML5 и CSS3 - Современные средства Web-разработки. (2012) Обучающий видеокурс
Курс знакомит слушателей с особенностями современной верстки веб-интерфейсов с помощью HTML5/CSS3. Курс рассчитан на слушателей, знакомых с HTML 4.01 и XHTML 1.1, CSS2.1 и javascript. Особое внимание уделено проблеме кроссбраузерности. Рассмотрены особенности применения HTML5 и CSS3 в современных браузерах: IE8/9, Google Chrome, Firefox, Opera, Safari.
По окончании курсы Вы будете уметь:
▪ Размечать страницу при помощи новых семантических тегов HTML5: header, footer, aside, nav и других;
▪ Использовать новые поля ввода для создания автоматически валидируемых форм без javascript;
▪ Рисовать на холсте: создавать 2d-графику, диаграммы, анимацию и браузерные игры;
▪ Использовать встроенные возможности браузера для воспроизведения аудио и видео на веб-страницах;
▪ Определять местоположение пользователя при помощи средств геолокации;
▪ Создавать восхитительные сайты используя возможности CSS3;
▪ Использовать тени, скругленные углы блоков без использования изображений;
▪ Создавать текстовые эффекты: вдавленный текст, неоновое свечение, эффект огня;
▪ Использовать на своих сайтах нестандартные загружаемые шрифты;
▪ Создавать страницы, одинаково хорошо выглядящие на устройствах с разным разрешением экрана;
▪ Определять поддерживаются ли возможности HTML5/CSS3 в браузере пользователя с помощью библиотеки Modernizer;
▪ Создавать быстрые и современные сайты на основе шаблона HTML5 Boilerplate.
Содержание:
Модуль 1. HTML5
1. Обзор HTML5
- Что такое HTML5?
- Краткая история HTML
- Новая идеология HTML5
- Отличия HTML5 от HTML4.01 и XHTML1.x
- Новые теги и атрибуты
- Устаревшие теги
2. Новые семантические элементы HTML5
- Основная структура документа
- Обзор новых тегов HTML5
- Смысл появления новых элементов и примеры использования
- Поддержка новых тегов в устаревших браузерах
3. Новые возможности для создания форм
- Новые типы ввода данных: search, email, url, tel, range, number, datetime и др.
- Новые атрибуты полей ввода: autofocus, placeholder, reqired, autocpmlete и др.
- Валидация данных форм на стороне клиента.
- Обратная совместимость с устаревшими браузерами
4. Элемент Canvas (Холст)
- Что такое холст?
- Координаты холста
- Рисование изображений в реальном времени
- Методы создания изображений в реальном времени: пути, обводка, заливка, преобразования, кривые, градиенты, тени
- Анимация на холсте
- Поддержка спецификации HTML 5 Canvas браузерами
5. Видео и аудио
- Плюсы и минусы в использовании элементов video и audio
- Поддержка видео и аудио форматов браузерами
- Атрибуты элементов video/audio
- Управление воспроизведением
6. Хранение данных
- Web Storage — мощная, хорошо поддерживаемая замена файлам cookie.
7. Автономные приложения
- Создание веб-приложений работающих без постоянного подключения к интернету.
8. Геолокация
- Встроенные возможности определения местоположения пользователя.
9. Сообщения (Web Messaging)
- Обмен сообщениями между окнами.
10. Фоновые вычисления (Web Workers)
- Создание отдельных потоков для нагруженных вычислений.
11. Сокеты (Web Sockets)
- Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени.
Модуль 2. CSS3
1. Введение в CSS3
- Что такое CSS3?
- Что нового в CSS3?
- Преимущества CSS3
- Новые подходы к разработке: прогрессивное усовершенствование и постепенная деградация
- Можем ли мы использовать CSS3 уже сегодня?
2. Границы
- Cоздание загругленных углов у блоков, тени под боксом, использование изображений в качестве рамки блока.
3. Текстовые эффекты
- Добавление тени к тексту
- Текстовые эффекты: свечение, вдавленный текст, винтажный текст, эффект огня и др.
- Автоматический перенос длинных слов в блоке
4. Градиенты
- Заливка градиентом
- Использование полупрозрачных градиентных заливок для создания эффекта блика
- Генераторы градиентов
5. 2D-преобразования
- Преобразования элементов на плоскости: перемещение, масштабирование, вращение и растягивание.
6. 3D-преобразования
- Трехмерные преобразования элементов.
7. Фон
- Новые методы работы с фоном блока
- Использование нескольких изображений для создания фона
8. Шрифты
- Использование подгружаемых шрифтов в браузерах
- Обзор библиотек открытых шрифтов
9. Переходы
- Эффекты плавного перехода от одного стиля к другому без использования Flash и javascript.
10. Анимация
- Создание анимации на веб-странице с помощью CSS3.
11. Многоколоночность
- Простое создание многоколоночной раскладки текста на странице.
12. Интерфейс пользователя
- Новые функции для управления интерфейсом пользователя.
13. Работа с цветом
- Форматы цвета
- RGBA, HSLA и прозрачность
- Удобство использования формата HSLA
14. Селекторы, комбинаторы и псевдо-классы
- Новые методы доступа к элементам без использования классов и идентификаторов.
Модуль 3. Современные инструменты веб-разработчика
1. Zen Coding
- Способ ускоренного написания HTML и CSS кода.
2. Медиа запросы (Media Queries)
- Понимание media queries
- Адаптивный и мобильный дизайн средствами CSS3
3. Модель гибкого поля
- Принципы создания верстки будущего
4. Modernizr
- javascript-библиотека для проверки поддержки возможностей HTML5 и CSS3 в браузере.
5. HTML5 Boilerplate
- Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов для разработки веб-сайтов и веб-приложений.
6. LESS
- Динамический язык стилевой разметки. Удобный инструмент для построения больших CSS файлов.
7. Twitter Bootstrap
- Обзор возможностей Twitter Bootstrap.
- Twitter Bootstrap как прекрасный пример современного кроссбраузерного CSS-фреймворка.
- Быстрое создание современных веб-интерфейсов с помощью Twitter Bootstrap.
8. Основы usability и accessibility
- Эргономика, практичность и удобство использования сайта (usability) и доступность (accessibility) сайтов.
Жанр: обучающее видео
Язык: Русский
Формат: МР4
Видео: 1680x1050, 1010 Kbps
Аудио: AAC, 44.1 KHz, 256 Kbps
Продолжительность: 72 ак. ч.
Размер файла: 4,35 Гб
