Итак, грядёт к нам 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, существует ещё один интересный проект — . По большому счёту данный проект стремится к тому, чтобы 3D графику можно было отображать в браузере, причем используя аппаратные функции графических ускорителей. Это чудо, как утверждает та же вика, является дальнейшим развитием Canvas 3D. Я, кстати, видел вещи, которые делались на Canvas 3D, например можно взглянуть кое-что . Прямо скажем — впечатляет, например 3D тетрис прямо в браузере, который практически не нагружает CPU. Если они действительно реализуют функционал OpenGL — это позволит, во-первых, создавать веб-приложения совершенно нового уровня. Представьте — 3D погружение в веб-ресурс. А учитывая всё возрастающую скорость современного интернет-канала, и возможности аппаратного обеспечения, это, возможно, позволит решить проблему между копирастами и пользователями. Браузерную игру очень тяжело скопировать, если ресурсы хранятся на сервере. При этом новый способ извлечения прибыли — оплата не копии игры, а времени, проведённого в игре. Разумеется, это хреново, но так вероятнее всего и будет — правда зависит от типа игры и уровня графики — кое с чем браузер весьма вероятно не справится.
В общем, далее я кратко опишу то, что сумел нарыть сам. Надеюсь, оное будет вам полезно :)
Canvas 2D.
Самый, на мой взгляд, значимый элемент в этом нововведении. В перспективе, как уже было сказано, существуют варианты с 3D графикой, и новым интерфейсом взаимодействия с пользователем. Если совсем просто — этот компонент позволяет выводить на себя графику, формируя растровое изображение. И — внимание — для формирования оного, используется не что-нибудь, а Javascript, который уже вполне прижился в этих наших интернетах. Скажем, можно формировать графики на стороне пользователя, передавая ему по Ajax сырые данные в Json-формате, и не нагружая сервер работой по формированию изображения (например на PHP + GD2). Да много чего… Делается же сие чудо чрезвычайно просто. Здесь приведён простенький пример, а более подробно — посмотреть можно в этого компонента, правда на английском.
/* Где-то там, вверху, мы объявляем элемент
*/
var canvas = document.getElementById('holst'); // Для начала - получаем наш canvas
// Устанавливаем ему высоту (кстати, попутно этот метод позволяет очистить canvas)
canvas.setAttribute('width', 300);
var context = canvas.getContext("2d"); // Получаем 2D контекст
context.fillRect(10,10,30,30); // И рисуем прямоугольник в точке 10,10 размерами 30 на 30 пикселей.
Всё очень просто. А , он демонстрирует уже простенький рисунок, в стиле абстракционизма :), созданный с помощью той же Canvas. Вот, как-то так. Возможности данного компонента поистине безграничны на самом деле. Я напоминаю — всё, что вы видите — создано не на сервере, а у вас в браузере (если он канву поддерживает).
HTML 5 Keygen.
Да, HTML5 позволяет теперь генерировать серийные номера к программам не отходя от кассы. Прямо при скачивании — представляете, как обрадуются торрент-трекеры?)) Шутка. Вообще, этот элемент позволяет создавать защищённые формы, т. е. примерно то же самое, что и SSL, но не совсем.
<form action="processkey.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></p> <p><input type=submit value="Submit key..."></p> </form>
Выглядит его использование вот так. Более чем подробное описание есть (англ). Если вкратце — браузер генерирует ключевую пару RSA, и в поле key формы отправляет его на сервер. Сервер получит его в виде $_POST[‘key’]; (PHP), ну или говоря более абстрактно — в виде поля POST запроса. Теперь сервер может зашифровать свои данные открытым ключом клиента, и отправить ему. Видимо, проблемы с доверенностью сертификатов SSL и спровоцировали рождение такого вот функционала (хотя это я так думаю, на самом деле может быть и иные причины были). Мелочь — а приятно. Посмотрим, правда, как оное приживётся, и как хакеры всего мира протестируют надёжность данного элемента :)
HTML 5 Progress
Таки да, наконец-то появился кошерный ProgressBar, столь любимый в ГУЙ-ных приложениях для индикации прогресса выполнения процесса (!). До сих пор — в вебе использовались разнообразные хитрые кустарно изготовленные решения на JavaScript. К сожалению, в моём Firefox он, видимо, не реализован… Однако, выглядит сие чудо вот так:
Progress: <progress id="progress_bar" max="100" value="20"><span>0</span>%</progress>
Чтобы использовать ProgressBar достаточно из JavaScript менять свойство value. Две строчки (или одна, по вкусу) — прикольно, не так ли?))
HTML 5 Meter.
Ещё одно прикольное нововведение. По большому счёту представляет собой полоску наподобие ProgressBar, заполненную на указанный процент.
<meter value="0" max="100" low="1" high="5">Холодно, однако</meter>
Что любопытно, данное нововведение реализовано только в хроме 6, 7 и опере 11.
HTML 5 Audio & Video
Ну и ещё одна возможность из вкусненького — это теги <audio> и <video>. По большому счёту, данные элементы позволяют «всего лишь» вставлять в страницу аудио или видео контент одним тегом. Например так:
<video width="300" height="200"poster="posters/poster1.jpg"controls="controls"><source src="video/123.ogv" type='video/ogg; codecs="theora, vorbis"'> Таки да, у вас браузер не поддерживает HTML5-тег Video... </video>
Вот, собственно, и всё — из того, что показалось мне самым вкусным. Кроме того, внизу есть ссылки — то, что показалось мне наиболее интересным.
— большой сайт, посвящённый вёрстке. Есть раздел по тегам HTML 5 с таблицей совместимости по браузерам.
— вопросы безопасности HTML 5
— официальная спецификация Canvas 2D
— Очень красивые примеры применения HTML 5 — 3Д шутер, 3Д тетрис, рисование графиков…
Да, он неизбежен, мне кажется пользы много будет, но флеш врятли заменит. Сорцы пакмана, подобно тех что у гугла:
Вот конкурент твоему кошаку на хтпл5))
Шарики:
А по поводу кейгенов — раньше, к пхп-движкам — генераторы лицензий на пхп писали. на html5 еще не встречал, но видимо скоро встречу))
Вот еще смотрел недавно неплохую коллекцию плееров на сабже
А про плееры я подозревал, подозревал, что можно их внешний облик менять будет! :)) Кстати в кошаке тоже используется немного CSS3, где это можно :) В том смысле, что закруглённые углы у окошка всплывающего))
Блин, а мне бы с моим UPX’ом разобраться…Я уже столько протов перепробовал, даже приватные реверстимовские подгоняют, но они бьют демки, т.к. предназначены для комбайнов вроде DuP. Мб найдешь ТАКИ время, глянешь эти сорцы анполикса?! Алекс — буду дико признателен)))
Алекс, можешь скинуть пример на сайт, на котором используется чистый тег без всякого богомерзкого флэша например?
Дык последняя ссылка в посте :)
Имелся ввиду тег <video (видео). WOrdpress удаляет видеотег, так как считает это xss(кажется, это так называется)
А! А кстати и по-моему ещё не реализованы даже… Нет, тут не скажу, но кажется не видел реализации. Статья писалась довольно давно, и могло много поменяться, я тут уже немного не в теме :)