CSS-live.ru

Новые обонятельные, осязательные и вкусовые элементы приходят в HTML5

HTML5 привносит столько потрясающих новинок, что люди готовы ждать от него самых невероятных чудес и легко верят в реальность содержания следующей статьи, даром что это первоапрельский прикол.

Веб — преимущественно визуальная среда, изредка в ней встречаются звуки. HTML5 поддерживает теги video и audio, но другие наши органы чувств были несправедливо обделены. До сих пор.

В ближайшее время W3C представит три новых элемента HTML5, поддерживающих интерфейсы для других органов чувств:

  • <texture> для осязания
  • <aroma> для обоняния
  • <flavor> для вкуса

Использование в HTML

Новые элементы обычно будут использоваться как «обертки» для чего-либо. Например, можно будет применить запах свежей травы к изображению с видом поля, наподобие

<aroma fresh="50%" sweet="20%" warm="35%">  
    <img src="myfield.jpg" alt="поле с травой" />  
</aroma>  

Атрибуты классификации будут различаться в зависимости от тега, например

  • texture: гладкость, жесткость, податливость, температура
  • aroma: сладость, острота, едкость, душистость, теплота, сухость, кислота
  • flavor: сладость, кислота, соленость

Также будут поддерживаться атрибуты volume (интенсивность) и muted (приглушенный), чтобы указывать силу запахов и вкусов.

Однако, если вы не эксперт-химик, определить эти атрибуты нелегко. По этой причине эти теги могут использовать атрибуты src и type, чтобы ссылаться на файлы определений, которые могут содержать одну или несколько текстур, ароматов или вкусов, например

<aroma src="cheese.odor" type="stilton">  
    <img src="stilton.jpg" alt="сыр стилтон" />  
</aroma>  

Наборы обонятельных, осязательных и вкусовых заготовок будут поставляться в составе браузеров. Однако представление сыра рокфор в Хроме может отличаться от его представления в IE. До выработки общепринятого обонятельного, осязательного и вкусового стандарта может пройти несколько лет. К счастью, будет возможность создавать свои собственные файлы определений, если вдруг возникнут проблемы с совместимостью.

Свойства CSS

Текстуры для осязания, запахи и вкусы также можно задавать из CSS. Например, ссылка на страницу сыра Stinking Bishop в нашем сырном интернет-магазине может выглядеть так:

<a id="stinking" href="stinking-bishop.html">  
    <img src="stinking-bishop.jpg" alt="сыр «stinking bishop»" />  
</a>  

CSS может применить соответствующие запах, вкус и текстуру для ощупывания, когда пользователь наводит мышку или переводит фокус клавиатуры на ссылку. Можно использовать файлы обонятельных, осязательных и вкусовых определений и параметры классификации:

a#stinking:hover, a#stinking:focus {  
    aroma: url("cheese.odor") stinkingbishop 50%; /* файл определений, тип, интенсивность */  
    flavor: url("cheese.taste") stinkingbishop 98%; /* файл определений, тип, интенсивность  */  
    texture: 25% 30% 20; /* гладкость, жесткость, температура (в градусах цельсия) */  
}  

API для JavaScript

Для новых обонятельных, осязательных и вкусовых элементов будут доступны свои JavaScript-овые API. Например, можно будет приглушить или изменить интенсивность (силу) одного из данных тегов, наподобие

var cheese = document.getElementById("stinking");  
var c = 0;  
Pungent();  
function Pungent() {  
    cheese.aroma.volume = c + "%";  
nbsp;   c += 5;  
    if (c < 100) setTimeout(arguments.callee, 500);  
}  

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

Аппаратная поддержка

Устройства с поддержкой данных элементов должны быть представлены в течение ближайшего года. Одно из первых — мультисенсорная мышь производства Ollofipra, производителя компьютеров из Скандинавии. В ней использована фирменная резиновая матрица, способная менять форму, текстуру поверхности и температуру. Она также испускает широкий спектр запахов, а ее колесико создает различные вкусовые ощущения. Фирма надеется применить эту технологию и для сенсорных экранов (тачскринов), чтобы их тоже можно было пробовать на вкус (языком).

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

Оригинал стать и автор

P.S. Это тоже может быть интересно:

4 комментария

  1. Маленькое послесловие от переводчиков: мы старались передать по возможности все щедро рассыпанные по оригиналу шутки (в т.ч. «потайные»), но я не уверен, что сам нашел их все:). Насколько я понимаю, пример про «сырный магазин» — отсылка к знаменитому номеру «Монти Пайтонов», а название «скандинавской фирмы» получено перестановкой букв «April fool». Ну и «опечатка» в последнем абзаце намеренная (в оригинале она удачнее, буду рад, если комментаторы предложат вариант лучше).

    Ну и, пользуясь случаем, хочу отдельно поблагодарить автора оригинала Крейга Баклера за высокую оценку моей темы для галереи CSS1k.com! :)

  2. Если эта технология будет доступна на мобильных устройствах, представляю как народ будет ходить нюхать и облизывать свои смартфоны xD

Добавить комментарий для alexriz Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.