Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Голосование

    Какую CMS Вы предпочитаете

    AtomX
    Fapos CMS
    Drunya CMS
Последние комментарии
Топ пользователей
Drunya
Репутация: 110
Сообщений: 3527
Сашка_из_Шебекино
Репутация: 87
Сообщений: 1803
boriska
Репутация: 65
Сообщений: 846
ARMI
Репутация: 46
Сообщений: 1858
BAH0
Репутация: 26
Сообщений: 544
Новые возможности 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). Да много чего... Делается же сие чудо чрезвычайно просто. Здесь приведён простенький пример, а более подробно - посмотреть можно в официальной спецификации этого компонента, правда на английском.

Code:
/* Где-то там, вверху, мы объявляем элемент
*/
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, но не совсем.
Code:
<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 он, видимо, не реализован... Однако, выглядит сие чудо вот так:

Code:
Progress: <progress id="progress_bar" max="100" value="20"><span>0</span>%</progress>

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


HTML 5 Meter.


Ещё одно прикольное нововведение. По большому счёту представляет собой полоску наподобие ProgressBar, заполненную на указанный процент.
Code:
<meter value="0" max="100" low="1" high="5">Холодно, однако</meter>

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



HTML 5 Audio & Video


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

Code:
<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>
Автор: Drunya
Категория: HTML & CSS
Просмотров: 4811
Комментариев: 5

Комментарии
  • User avatar

    Drunya

    Sash, именно)
    Дата отправления: 13 Мар 2012
  • User avatar

    Sash

    ПОРОШОК, НЕ ВХОДИ!
    http://spasiboeva.ru/img/incvisition.jpg
    Дата отправления: 13 Мар 2012
  • User avatar

    Drunya

    да, процент таких пещерных людей стремится к нулю. Так что не епет. Выводить на весь экран баннер "замените свою программу для скачивания браузера на браузер" )))))
    Дата отправления: 12 Мар 2012
  • User avatar

    Сашка_из_Шебекино

    LIFE-STALKER, забить на извращенцев! Мировой прогресс важнее 1%!
    Дата отправления: 12 Мар 2012
  • User avatar

    LIFE-STALKER

    Это же все хорошо, но как обходится с пользователями которые используют старые браузеры, ведь есть даже те кто пользуется IE 6.
    Дата отправления: 12 Мар 2012
Сейчас online: 6. Зарегистрированных: 0. Гостей: 6.
-->