Итак, грядёт к нам 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, существует ещё один интересный проект —
В общем, далее я кратко опишу то, что сумел нарыть сам. Надеюсь, оное будет вам полезно :)
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 пикселей.
Всё очень просто. А
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>
Выглядит его использование вот так. Более чем подробное описание есть
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>
Вот, собственно, и всё — из того, что показалось мне самым вкусным. Кроме того, внизу есть ссылки — то, что показалось мне наиболее интересным.
Да, он неизбежен, мне кажется пользы много будет, но флеш врятли заменит. Сорцы пакмана, подобно тех что у гугла:https://github.com/daleharvey/pacman/
http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html
http://radio.momoiro.ru/ballz.html
http://vremenno.net/html-css/html5-video-players/
Вот конкурент твоему кошаку на хтпл5))
Шарики:
А по поводу кейгенов — раньше, к пхп-движкам — генераторы лицензий на пхп писали. на html5 еще не встречал, но видимо скоро встречу))
Вот еще смотрел недавно неплохую коллекцию плееров на сабже
А про плееры я подозревал, подозревал, что можно их внешний облик менять будет! :)) Кстати в кошаке тоже используется немного CSS3, где это можно :) В том смысле, что закруглённые углы у окошка всплывающего))
Блин, а мне бы с моим UPX’ом разобраться…Я уже столько протов перепробовал, даже приватные реверстимовские подгоняют, но они бьют демки, т.к. предназначены для комбайнов вроде DuP. Мб найдешь ТАКИ время, глянешь эти сорцы анполикса?! Алекс — буду дико признателен)))
Алекс, можешь скинуть пример на сайт, на котором используется чистый тег без всякого богомерзкого флэша например?
Дык последняя ссылка в посте :)
Имелся ввиду тег <video (видео). WOrdpress удаляет видеотег, так как считает это xss(кажется, это так называется)
А! А кстати и по-моему ещё не реализованы даже… Нет, тут не скажу, но кажется не видел реализации. Статья писалась довольно давно, и могло много поменяться, я тут уже немного не в теме :)