Введение в HTML5

План:

• основные структурные элементы;
• новые элементы разметки и атрибуты;
• улучшающие формы;
• элемент video и создание индивидуального видеоплеера;
• "холст";
• API сокеты;
• кэширование приложение;
• хранилища данных на клиентских компьютерах;
• технология многопоточного выполнения кода Web Workers;
• основные возможности геолокации.

1. Знакомство с HTML5!
2. Новые структурные элементы в HTML5
3. Новые свойства форм в HTML5
4. Как вставить видео на веб-страницу
5. HTML5 видео-плеер Acorn Media Player (jQuery плагин)
6. Простейшие примеры использования HTML5 Canvas
7. Введение в Web Sockets API
8. Использование AppCache для локального сохранения ресурсов
9. Сессионные (Session Storage) и локальные (Local Storage) хранилища данных на стороне клиента
10. Многопоточное выполнение кода с помощью Web Workers
11. API геолокации W3C

API геолокации W3C

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

Представьте себе первую поездку в незнакомый город. Вы голодны, но не знаете, где находится ближайший ресторан, и какой из них хороший. Не правда ли будет удобно, если какое-то приложение сможет определить ваше местоположение и предоставить список ближайших ресторанов, каждый вместе с рецензией и рейтингом?

Можно создать слyжбу Web для предоставления информации о ближайшей больнице или с пошаговым навигационным маршрутом. Или как насчет приложения, которое сообщает обо всех интересных событиях, происходящих в вашей области в ближайшие дни с указанием точного местоположения?

API геолокации консорциума W3C определен для предоставления разработчикам унифицированного способа создания приложений Web, использующих информацию о местоположении. Он значительно более точен и создан таким образом, что пользователь может контролировать, может ли информация о его местоположении быть доступна на данном сайте или нет.

В браузерах, которые поддерживают геолокацию, местоположения пользователя определяются на основе комбинации данных о точках доступа wifi пользователя и IP-адресе пользователя.

Браузер предупреждает пользователя, что приложение пытается получить доступ к данным местоположения через API геолокации, и запрашивает разрешения на получение доступа

Многопоточное выполнение кода с помощью Web Workers

Страницы Web становятся все в большей степени перегружены JavaScript, иногда в такой степени, что не могут двигаться. Вездесущность JavaScript является благом для разработчиков, но это означает, что язык может выполняться на широком множестве устройств, включая такие, которым не хватает мощности для сегодняшних приложений Web. Существует несколько способов оптимизации JavaScript, но он все равно не будет работать так же быстро, как машинный код.

Превращение JavaScript в мультипоточный язык потребует значительных архитектурных изменений и фундаментального переосмысливания, поэтому Web Workers предлагают способ обойти эту проблему, позволяя расширить язык таким образом, что он может казаться в некоторых случаях мультипоточным. Другими словами может эффективно выполняться более одного процесса, но с некоторыми ограничениями. На самом деле достаточно много ограничений, поэтому они будут полезны только в определенных ситуациях.

Сессионные (Session Storage) и локальные (Local Storage) хранилища данных на стороне клиента

Хранилище Web является спецификацией W3C, которая предоставляет функции для сохранения данных на стороне клиента до конца сеанса (Session Storage – сессионное хранилище), или после завершения сеанса (Local Storage – локальное хранилище). Это значительно более мощное средство, чем традиционные cookies, и более простое в использовании.

Прежде чем двигаться дальше, давайте коротко разберем, почему текущий способ хранения данных на стороне клиента — cookies — является проблемой:

• Маленький размер: Cookies обычно имеют максимальный размер около 4KB, что не слишком хорошо подходит для хранения сложных данных любого вида.
• С помощью cookies трудно отслеживать две или больше транзакций на одном и том же сайте, которые могут происходить в двух или более различных вкладках.
• Cookies могут использоваться злонамеренно с помощью так называемой техники межсайтового скриптинга, что приводит к проблемам безопасности.

Другие (менее популярные) альтернативы для cookies включают методы, использующие строки запросов, скрытые поля форм, совместно используемые локальные объекты на основе flash, и т.д. Каждый со своим собственным набором проблем, связанным с безопасностью, легкостью использования, ограничениями на размер, и т.д. Поэтому до сих пор мы используем достаточно плохие способы хранения данных на стороне пользователя. Нам требуется улучшенный способ, и здесь на помощь приходит Хранилище Web.

Спецификация Хранилища Web W3C была разработана для улучшения способа хранения данных на стороне клиента. Она имеет два различных типа хранилища: Session Storage (Сессионное хранилище) и Local Storage (Локальное хранилище).

Как сессионное, так и локальное хранилище будут иметь возможность хранить около 5Mb данных на домен, что значительно больше чем cookies. По мере дальнейшего чтения вы больше узнаете о них, и о том, что делает хранилище Web более удобным механизмом хранения.

Использование AppCache для локального сохранения ресурсов

С появлением в W3C HTML5 кэша приложений, стало возможно выполнение приложения Web в автономном режиме, также как и в сети.

Автономное хранилище HTML5 определяет метод сохранения файлов в кэш-памяти, чтобы когда пользователь не подключен к сети, браузер имел, тем не менее, доступ к необходимым файлам. Это могут быть файлы HTML, CSS или JavaScript, или любые другие ресурсы необходимые сайту для работы.

HTML5 для автономных приложений web использует новое средство, называемое кэшем приложений, или коротко AppCache. Сохраняемые в этом AppCache файлы доступны для приложения, даже когда пользователь не находится в сети. С помощью файла манифеста можно определить, какие файлы необходимо сохранить в AppCache.

Существует ряд особенностей, которые отличают AppCache от обычного кэша браузера. Прежде всего, они решают различные задачи. AppCache предназначен для подходящих приложений Web, в то время как кэш браузера предназначен вообще для обычных страниц web. Обычная кэш-память будет кэшировать почти любую страницу, в то время как AppCache будет кэшировать только те страницы, которые специально указаны в файле манифеста. Кроме того, обычный кэш ненадежен, так как мы не знаем, какие страницы (и какие ресурсы этих страниц) будут наверняка доступны.

Преимущество использования AppCache состоит в том, что теперь разработчик имеет значительно больше программного контроля над кэшем, что означает значительно больше уверенности и контроля над тем, как приложения Web будут вести себя в автономном режиме. Отметим также, что можно иметь несколько страниц, совместно использующих одну память AppCache. Также с помощью AppCache можно использовать API для определения состояния памяти AppCache, и затем даже заставить ее обновиться.

Введение в Web Sockets API

Сокеты Web позволяют приложению передавать информацию между сервером и браузером, а не опрашивать сервер с заданным интервалом времени или использовать нестандартные приемы с помощью <iframe> — это позволяет разработчикам web уменьшить ненужный трафик HTTP и сложность программирования.

Сокеты Web отключены по умолчанию в связи со спецификацией связанной с проблемами безопасности. Тем не менее, можно включить их в браузере Opera с помощью opera:config#UserPrefs|EnableWebSockets.

Спецификация HTML5, часть TCPConnection.

Web Sockets API

Протокол

Простейшие примеры использования HTML5 Canvas

Спецификация HTML5 включает множество новых свойств, одним из которых является элемент canvas. Холст ( canvas ) HTML5 предоставляет простой и мощный способ создания графических изображений с помощью JavaScript. Для каждого элемента canvas можно использовать "контекст" (представьте страницу в альбоме для рисования), в который можно выполнять команды JavaScript для рисования. Браузеры могут реализовать несколько контекстов холстов и различные API предоставляют функции для рисования.

Большинство основных браузеров включают возможности контекста холста 2D - Opera, Firefox, Konqueror и Safari. Кроме того существуют экспериментальные сборки браузера Opera, которые включают поддержку контекста холста 3D, и дополнение, которое обеспечивает поддержку холста 3D в Firefox:

• Ссылка для загрузки сборки Opera с поддержкой холста 3D, HTML видео и в/в файлов.
• Узнайте больше об использовании контекста холста 3D в Opera.
• Узнайте больше о получении и использовании контекста холста 3D в Firefox.

В данной статье рассматриваются основы реализации контекста холста 2D и использования основных функций холста, включая: 

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

Код всех примеров можно загрузить одним файлом zip-архива.

HTML5 видео-плеер Acorn Media Player (jQuery плагин)

Настраиваемый, совместимый с различными браузерами видео-плеер, использующий элемент <video> из HTML5.

Спецификация WAI-ARIA.

Собственные элементы управления видео в браузере Opera 10.63, с фокусом на кнопке громкости

API элементов медиа.

Как вставить видео на веб-страницу

Одним из наиболее интересных новых свойств HTML5 является появление элемента <video>, который позволяет разработчикам включать видео непосредственно в свои страницы, без использования каких-либо решений на основе плагина. 

Новые свойства форм в HTML5

Несколько сложных элементов управления формой, созданных с помощью JavaScript

2 Введение в HTML5. Новые структурные элементы в HTML5

Теги логической компоновки документа

• <header>: Используется для верхнего колонтитула сайта.
• <footer>: Используется для нижнего колонтитула сайта.
• <nav>: Содержит навигационные функции страницы.
• <article>: Содержит автономный фрагмент контента, который будет иметь смысл, если используется как позиция RSS, например, новостное сообщение.
• <section>: Используется либо для объединения в группу различных статей с различной целью или по различным темам, или для определения различных разделов одной статьи.
• <time>: Используется для разметки времени и даты.
• <aside>: Определяет блок контента, который связан с основным контентом, но не входит в его основной поток.
• <hgroup>: Используется в качестве оболочки скрытия более одного заголовка, если требуется, чтобы учитывался только один заголовок в структуре заголовков страницы.
• <figure> и <figcaption>: Используется для инкапсуляции рисунка как единого элемента, и содержит, соответственно, подпись для рисунка.

1 Введение в HTML5. Знакомство с HTML5!

Истории создания HTML5

... -> HTML 4.0.1 -> XHMTL 1.0 и 2.0 -> Web Applications 1.0 (HTML5) -> ...

1. На рабочем семинаре в 1998 г. консорциум W3C решил что с точки зрения языков разметки будущим Web является XML и XHTML, а не HTML. Поэтому W3C подвел черту под HTML 4.01, и сконцентрировался после этого на спецификации XHTML 1.0, законченной в начале 2000 г. Язык XHTML 1.0 почти такой же, как и HTML 4.01, за исключением того, что использует правила синтаксиса разметки из XML.
2. Вскоре последовал язык XHTML 2.0, который добавил целый пакет новых мощных средств и тип mime только для XML, с целью стать следующей основой Web. Проблема с XHTML 2.0 состояла в том, что он не являлся обратно совместимым с уже имеющейся в Web разметкой – элементы работали по-разному, тип mime XHTML (application/xhtml+xml) вообще не работал в IE.
3. 2004 г., группа одинаково мыслящих разработчиков и исполнителей (включая представителей Opera, Mozilla, и немного позже, Apple) собрались и сформировали отколовшуюся группу по спецификации с названием WHATWG, с целью написать лучшую спецификацию разметки HTML, которая сможет помочь созданию нового поколения приложений Web, не разрушая – что было критически важно – обратной совместимости.
4. Появилась спецификация Web Applications 1.0, которая документирует существующие совместимые поведение и свойства браузеров, а также новые свойства стека Web, такие как API и новые правила синтаксического анализа DOM.
5. 7 марта 2007 г. работа над HTML была возобновлена новой Рабочей группой HTML в виде открытого процесса участия. Одним из первых решений Рабочей группы HTML было принятие спецификации Web Applications 1.0, которую назвали HTML5.

Свойства HTML5:

• Имеет четко определенный алгоритм синтаксического анализа, так что все браузеры, реализующие HTML5, будут создавать одинаковое дерево DOM из одной и той же разметки, независимо от правильности. Это огромный выигрыш для совместимости.
• Новые семантические элементы: <nav>, <header>, <footer> и <article> (до сих пор мы определяли их с помощью <div id="xxx"></div>, которые мы можем понять, но машины не могут, кроме того, различные разработчики web будут использовать различные ID и классы)
• Новые свойства форм: выбор даты, ползунки и клиентская проверка
• Собственная поддержка видео и аудио: <video> и <audio> (различные браузеры реализовали различные конкурирующие способы выполнения одних и тех же вещей, например, <object> и <embed>)
• API рисования на холсте: <canvas>
• Сокеты Web: постоянное соединение между сервером и клиентом на определенном порте (существенно улучшает эффективность приложений web, так как данные могут непрерывно и аккуратно передаваться между клиентом и сервером без постоянной перезагрузки страницы, и без постоянного опроса сервера, чтобы проверить, нет ли доступных обновлений)
• Автономные приложения web: кэши приложений и базы данных Web SQL (позволяют сохранить копию всех ресурсов и других файлов, необходимых для локального выполнения приложения web, и базы данных Web SQL позволяют сохранить локальную копию данных приложения web)
• Хранилище Web: позволяет хранить значительно больше данных, чем Cookies 
• Web workers: фоновые процессы для выполнения значительного объема вычислений 
• Геолокация: доступ к данным в любом местоположении, которое стало доступным (например, GPS)