Новые возможности HTML 5

Итак, грядёт к нам HTML 5. До сего момента в ходу был HTML 4.01, на котором работает большинство современных сайтов. Однако, умные дяди из W3C покумекали, и решили сделать новый стандарт. Было введено несколько новых тегов, а также удалена парочка старых (например <font> и <center>. Ещё упоминаются несколько таких возможностей, как локальное хранилище данных, сокеты, геолокация, drag'n'drop на уровне браузера, улучшено взаимодействие полей форм с пользователем - добавлено множество параметров для увеличения смысловой нагрузки, cross-domain messaging... А ещё такая - уже достаточно известная возможность как HTML 5 Canvas и встраивание мультимедиа-контента в страницу без сторонних технологий (например, запросто можно встроить видео или аудио в страницу с помощью всего одного тега - <video> или <audio>, без подключения флеш-плеера. Прямо скажем - впечатляет. Впечатляют и проблемы с безопасностью в данных нововведениях, которые уже откопали любознательные люди...

Помимо прочего, очень интересным кажется нововведение по разбору синтаксиса. Вот, что гласит по этому поводу википедия: "Спецификация HTML5 предъявляет требования как к юзер-агентам (браузерам), так и к документам. Документы могут не всегда содержать корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM). Четкое определение требований к юзер-агентам делается с целью достижения совместимости между браузерами разных производителей. Так же, как и требования к синтаксису разметки документов с целью корректного отображения их в различных браузерах". Проще говоря, если есть некорректный HTML5 документ, браузер имеет полное право послать такой сайт на хер, а пользователя спросить, желает ли он лицезреть говновёрстку. Увы, я думаю, что это требование никто соблюдать не будет - иначе половину сайтов можно выбрасывать на помойку, пока на них не произведут рефакторинг. С одной стороны неплохо бы - по крайней мере порог вхождения на ниву веб-мастеринга повысится. А с другой - куча сайтов не все спецификации соблюдают (к примеру этот). Ибо некоторые расширения и функционал реализовать через стандартный HTML реализовать не всегда возможно. Я уж молчу про Google Mail, например (правда у них всё нормально работает, несмотря на 2,5 к. ошибок валидации).

Кроме 2D графики в браузере (на Canvas 2D), посредством того же Javascript + Canvas, существует ещё один интересный проект - WebGL. По большому счёту данный проект стремится к тому, чтобы 3D графику можно было отображать в браузере, причем используя аппаратные функции графических ускорителей. Это чудо, как утверждает та же вика, является дальнейшим развитием Canvas 3D. Я, кстати, видел вещи, которые делались на Canvas 3D, например можно взглянуть кое-что вот здесь. Прямо скажем - впечатляет, например 3D тетрис прямо в браузере, который практически не нагружает CPU. Если они действительно реализуют функционал OpenGL - это позволит, во-первых, создавать веб-приложения совершенно нового уровня. Представьте - 3D погружение в веб-ресурс. А учитывая всё возрастающую скорость современного интернет-канала, и возможности аппаратного обеспечения, это, возможно, позволит решить проблему между копирастами и пользователями. Браузерную игру очень тяжело скопировать, если ресурсы хранятся на сервере. При этом новый способ извлечения прибыли - оплата не копии игры, а времени, проведённого в игре. Разумеется, это хреново, но так вероятнее всего и будет - правда зависит от типа игры и уровня графики - кое с чем браузер весьма вероятно не справится.

В общем, далее я кратко опишу то, что сумел нарыть сам. Надеюсь, оное будет вам полезно
Canvas 2D.

Самый, на мой взгляд, значимый элемент в этом нововведении. В перспективе, как уже было сказано, существуют варианты с 3D графикой, и новым интерфейсом взаимодействия с пользователем. Если совсем просто - этот компонент позволяет выводить на себя графику, формируя растровое изображение. И - внимание - для формирования оного, используется не что-нибудь, а Javascript, который уже вполне прижился в этих наших интернетах. Скажем, можно формировать графики на стороне пользователя, передавая ему по Ajax сырые данные в Json-формате, и не нагружая сервер работой по формированию изображения (например на PHP + GD2). Да много чего... Делается же сие чудо чрезвычайно просто. Здесь приведён простенький пример, а более подробно - посмотреть можно в официальной спецификации этого компонента, правда на английском.


Всё очень просто. А вот пример чуть сложнее, он демонстрирует уже простенький рисунок, в стиле абстракционизма , созданный с помощью той же Canvas. Вот, как-то так. Возможности данного компонента поистине безграничны на самом деле. Я напоминаю - всё, что вы видите - создано не на сервере, а у вас в браузере (если он канву поддерживает).


HTML 5 Keygen.

Да, HTML5 позволяет теперь генерировать серийные номера к программам не отходя от кассы. Прямо при скачивании - представляете, как обрадуются торрент-трекеры?)) Шутка. Вообще, этот элемент позволяет создавать защищённые формы, т. е. примерно то же самое, что и SSL, но не совсем.
Выглядит его использование вот так. Более чем подробное описание есть здесь (англ). Если вкратце - браузер генерирует ключевую пару RSA, и в поле key формы отправляет его на сервер. Сервер получит его в виде $_POST['key']; (PHP), ну или говоря более абстрактно - в виде поля POST запроса. Теперь сервер может зашифровать свои данные открытым ключом клиента, и отправить ему. Видимо, проблемы с доверенностью сертификатов SSL и спровоцировали рождение такого вот функционала (хотя это я так думаю, на самом деле может быть и иные причины были). Мелочь - а приятно. Посмотрим, правда, как оное приживётся, и как хакеры всего мира протестируют надёжность данного элемента


HTML 5 Progress

Таки да, наконец-то появился кошерный ProgressBar, столь любимый в ГУЙ-ных приложениях для индикации прогресса выполнения процесса (!). До сих пор - в вебе использовались разнообразные хитрые кустарно изготовленные решения на JavaScript. К сожалению, в моём Firefox он, видимо, не реализован... Однако, выглядит сие чудо вот так:


Чтобы использовать ProgressBar достаточно из JavaScript менять свойство value. Две строчки (или одна, по вкусу) - прикольно, не так ли?))


HTML 5 Meter.

Ещё одно прикольное нововведение. По большому счёту представляет собой полоску наподобие ProgressBar, заполненную на указанный процент.

Что любопытно, данное нововведение реализовано только в хроме 6, 7 и опере 11.



HTML 5 Audio & Video

Ну и ещё одна возможность из вкусненького - это теги <audio> и <video>. По большому счёту, данные элементы позволяют "всего лишь" вставлять в страницу аудио или видео контент одним тегом. Например так: