Введение в HTML5

: Информация
Опубликован: 30.06.2011 | Доступ: свободный | Студентов: 5526 / 722 | Оценка: 4.31 / 4.12 | Длительность: 07:51:00
Введение в HTML5 В курсе рассказывается об истории создания HTML5, возможностях, совместимости с другими стандартами, основных структурных элементах и их использовании в современных браузерах.
Демонстрируются новые элементы разметки и атрибуты, улучшающие формы, элемент video и создание индивидуального видеоплеера, "холст", API сокеты, кэширование приложение и хранилища данных на клиентских компьютерах. Дается введение в технологию многопоточного выполнения кода Web Workers и описываются основные возможности геолокации.

План занятий

Глава <<ЗанятиеЗаголовок <<Дата изучения
Глава 1 <<Основы HTML5
Лекция 1
23 минуты
Знакомство с HTML5!
Основные вехи истории создания HTML5. Перспективы языка, сравнение с другими стандартами. Проблемы совместимости. Обсуждаются новые свойства языка разметки, а также технологии, не имеющие прямого отношения к стандарту HTML5, но тесно с ним связанные. API браузеров. JavaScript/DOM. Сокеты. Автономные web приложения, кэши приложений и локальная база данных Web SQL. Увеличение производительности за счет компонента Web Workers. Геолокация.
-
Лекция 2
41 минута
Новые структурные элементы в HTML5
В лекции рассматриваются структурные элементы HTML5. Демонстрируется, каким образом новые свойства языка взаимодействуют друг с другом в контексте реальной web-страницы. Использование тегов логической компоновки документа: колонтитулов, навигационных панелей, автономных фрагментов контента, блоков для иллюстраций, разметки времени и даты. Специфика описания типа документа (DTD - Document Type Definition). Как новые средства языка поддерживаются в популярных браузерах. Методики, позволяющие заставить старые клиентские программы отображать неизвестные элементы разметки.
-
Лекция 3
27 минут
Новые свойства форм в HTML5
Рассказывается о новых элементах разметки и атрибутах, улучшающих формы. Примеры новых элементов числового ввода, ползунков, списков выбора даты и времени, выбора цвета из цветовой палитры, индивидуального поиска по сайту, элементов ввода со списком вариантов, поля для телефонных номеров, e-mail- и url-адресов. Новые механизмы вывода информации: вывод результатов вычислений, панель индикатора выполнения. Встроенная в HTML5 проверка заполнения формы.
-
Тест 1
-
Глава 2 <<Видео
Лекция 4
29 минут
Введение в видео HTML5
В данной лекции описывается элемент <video> и некоторые связанные с ним API. Перечислены основные поддерживаемые видеоформаты. Автор рассказывает о наиболее важных способах, с помощью которых можно управлять видео через JavaScript и возможностях создания собственных элементов управления проигрывателем. Как элемент <video> сочетается с другими элементами web страницы. Оформление видео с помощью каскадных таблиц стилей (CSS3). Особое внимание уделяется совместимости новых свойств языка со старыми браузерами.
-
Лекция 5
42 минуты
Улучшение доступности видео-плеера HTML5
Лекция представляет собой описание проекта создания индивидуального видеоплеера HTML5 с улучшенной доступностью. На примерах рассматривается разработка элементов управления плеером: кнопок и ползунков. Создание титров и стенограмм. Описывается проблемы, связанные с управлением плеером посредством клавиатуры. Использование JavaScript-библиотеки jQuery для программирования индивидуальных особенностей видеоплеера. Приводится подборка полезных ресурсов в сети интернет.
-
Тест 2
-
Глава 3 <<Холст и сокеты
Лекция 6
26 минут
Холст HTML5 – основы
Основы использования элемента "холст". Из данной лекции вы узнаете, как создавать на холсте графические примитивы в виде прямоугольных и треугольных областей со свойствами заливки и обводки. Даны особенности рисования линий и штрихов. Рисование фигур с помощью путей. Вставка в холст других изображений, сформированных элементами img и canvas. Манипуляции с пикселями изображения. Методики добавления на холст текста, теней и градиентов.
-
Лекция 7
18 минут
Введение в сокеты Web
Приводится описание API сокетов HTML5 с примерами использования. Основные протоколы для обмена информацией между клиентскими и серверными приложениями. Методы, свойства и события объекта WebSocket. Описаны конструкторы для создания соединения с сервером, использующие различные настройки. Открытие и закрытие соединений. Характеристика сообщений от сервера, обработка основных ошибок, возникающих при работе с сокетами. Методики проверки поддержки сокетов в браузере клиента.
-
Тест 3
-
Глава 4 <<Кэширование и хранение клиентских данных
Лекция 8
33 минуты
Автономное выполнение приложений Web с помощью HTML5 AppCache
В данной лекции речь идет о методах кэширования приложений на клиентских компьютерах. Отличия кэша браузеров от кэша приложений HTML5. Файл манифеста и его основные директивы. Подключение манифеста к web приложению. Явное определение файлов для кэширования. Предоставление пользователю резервного контента. Использование API кэша приложений и событий для проверки использования актуальных версий файлов. Проверка поддержки технологии браузером. Статусы, события и обработчики событий кэша приложений.
-
Лекция 9
19 минут
Хранилище Web: более удобное и мощное хранилище клиентских данных
Рассматриваются сессионные (Session Storage) и локальные (Local Storage) хранилища данных на стороне клиента. Сравнение технологий хранилищ HTML5 с технологией Cookie. Помещение и извлечение данных из сессионного и локального хранилищ. Удаление данных. Лимит хранилища. Использование событий хранилища. Вопросы безопасности и соответствующие рекомендации.
-
Тест 4
-
Глава 5 <<Технология Web Workers и геолокация
Лекция 10
14 минут
Web Workers за работой
Введение в технологию многопоточного выполнения кода Web Workers. Принципы работы и случаи использования. Какие стандартные объекты JavaScript доступны для Web Workers. Присущие ему ограничения. Поддержка в современных браузерах. Дополнительные ссылки по теме.
-
Лекция 11
19 минут
Как использовать API геолокации W3C
В завершающей курс лекции описываются основные возможности API геолокации. Как определяется местоположение пользователя. Стандартные предупреждения безопасности. Способы использования API геолокации в приложениях web. Прямое и обратное геокодирование. Геолокация на примере карт от Google.
-
Тест 5
-
Иван Журавлев
Иван Журавлев
Россия, Тула, Тульский государственный университет, 2010
Анатолий Шкред
Анатолий Шкред
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Вячеслав Олейник
Вячеслав Олейник
Идеально для быстрого ознакомления с нововведениями HTML5. Огорчают только битые ссылки на примеры.
Дмитрий Кудасов
Дмитрий Кудасов
Единственная проблема урока - отсутствие рабочих ссылок на все примеры dev.opera