Самые
странные
экзотические
необузданные
полезные
Web API
Что нас ждет в будущем
и почему экспериментировать нужно уже сейчас
Дима Дудин @html5by
. . .
classList API
W3C Last Call
Working Draft
04 February 2014
Все знают
jQuery(node).addClass('abc');
jQuery(node).removeClass('abc');
classList
el.classList.length;
el.classList.add('myCssClass');
el.classList.remove('myCssClass');
el.classList.contains('myCssClass');
el.classList.toggle('myCssClass');
el.classList.item('myCssClass');
Поддержка classList
существует множество полифилов
dataSet API
working draft
Все знают
jQuery(node).data('abc',123);
jQuery(node).data('abc'); //123
dataSet
<div data-id="123" data-foot-size>Ivan</div>
el.dataset.id === '123';
el.dataset.footSize === '';
// set el.dataset.footSize = '44';
// check
'someDataAttr' in el.dataset
Поддержка dataSet
и есть полифил
fullscreen API
Включить
document.documentElement.requestFullScreen()
el.requestFullScreen();
Выключить
document.cancelFullScreen();
Включено?
document.fullscreenEnabled;
У кого включено?
document.fullscreenElement;
События
fullscreenchange
fullscreenerror
Стилизация
:-webkit-full-screen {
background: red;
}
allowfullscreen для <Iframe>
<iframe allowfullscreen="true" />
Поддержка fullscreen
Применение
-
Игры
-
Видео, изображения, галлереи, карты
-
Любые онлайн сервисы/приложения в которых пользователь работает долго.
Pointer Lock API
Хотите сделать браузерный
шутер от первого лица?
Первое, что приходит на ум:
-
вешаем обработчик на mousemove
-
рассчитываем относительные перемещения мыши
-
cursor: none;
#чтотонетак
Основная идея
Pointer Lock Api
doc.addEventListener("mousemove", function(e){ // e.movementX
// e.movementY
}, false);
курсор скрывается
абсолютная позиция мыши не важна
Включить
el.requestPointerLock();
Выключить
document.exitPointerLock();
У кого включено?
document.pointerLockElement;
События
pointerlockchange и pointerlockerror
Поддержка Pointer Lock
chrome 23 +
firefox 14 +
Применение
-
Игры
-
3D онлайн приложения (streetmap, учебные приложения и т.п.)
Visibility change
Запускаем видео и переходим
на соседний таб
Событие
visibilitychange
Скрыт ли таб?
document.hidden
true / false
Состояние видимости
document.visibilityState
"visible"
"hidden"
"prerender"
Применение
-
Поставить видео/аудио на паузу,
пока таб неактивен.
-
Изменить title и favicon страницы, пока таб неактивен.
-
Оповестить пользователя о новых комментариях или других событиях, если ваш сайт находится в неактивном табе (так делают многие соц. сети)
Get User Media
Media Capture and Streams
1) Запрашиваем стрим
камеры и/или микрофона
navigator.getUserMedia(
{video:true, audio:false},
function(stream) {}, //ok
function(){} // fail
);
2) Получем URL стрима
streamUrl = window.URL.createObjectURL(stream)
file api
3) Устанавливаем URL <video>
video.src = streamUrl;
4) Делаем снапшот <video> в <canvas>
context = canvas.getContext('2d');
context.drawImage(video, 0, 0);
5) получаем картинку
canvas.toDataURL('image/png');
Поддержка
Flash и прочее ... как fallback
Применение
- Захват фото/видео/аудио с устройств юзера в браузере, без использования сторониих плагинов.
Battery Status API
window.navigator.battery
В него входят:
charging // true/false
chargingTime // время до конца зарядки
dischargingTime // время до полной разрядки
level // 0..1
И события:
onchargingchange
onchargingtimechange
ondischargingtimechange
onlevelchange
Поддержка
battery API
только
firefox 16 +
Демо
пока работает только в FF
Применение
-
Отключать функционал нагружающий процессор.
- Предкпреждать пользователя о низком заряде и предлагать сохраниться.
Vibration API
W3C Last Call Working Draft 11 February 2014
Только один метод:
window.navigator.vibrate()
Аргументы:
vibrate(1000) // вибрировать 1 сек
vibrate([1000]) // то же самое
vibrate([1000,2000,3000]) // // вибрировать 1 сек, // остановиться на 2 сек // вибрировать 3 сек
vibrate(0)// остановить все вибрации
Поддержка
vibration API
firefox 16 +
chrome 30+
Демо
работает только в мобильных браузерах
Применение
-
для создания эффекта обратной связи при нажатии кнопок
.
-
Для оповещении о пришедшем сообщении, письме, различных напоминаниях и т.п
.
-
Для браузерных игр. (что-то взрывается, персонажа убивают, машина упирается в борт трассы.. ну и любого подобного трэша.
- При просмотре видео или прослушивании музыки, в моменты усиления низких частот, можно добавить немного вибрации.
Deviceorientation
Editor's Draft 10 February 2014
Событие
win.addEventListener("deviceorientation", function(e){ // e.alpha
// e.beta
// e.gamma
}, false);
вот и весь API
...
Демо
работает только
Devicemotion
Editor's Draft 10 February 2014
Событие
win.addEventListener("devicemotion", function(e){ // e.acceleration
// e.accelerationIncludingGravity
// e.rotationRate
// e.interval
}, false);
Устройство, лежащее горизонтально на столе
e.acceleration = {
x: 0,
y: 0,
z: 9.81};
e.accelerationIncludingGravity = {
x: 0,
y: 0,
z: 0};
Демо
работает только
Поддержка
"Зачем мне все это?"
"Я не сталкиваюсь с таким на работе!"
"Оно же все сырое и не работает в IE!"
ФРОНТЕНДЕР
Знание о существовании новых API
дает новые идеи и возможности
GRACEFUL DEGRADATION!
Даешь приятные плюшки для
N% пользователей с новейшими браузерами
Пока вы доведете идею до продакшена
все эти API уже станут мэйнстримом #sarkasm
подробнее:
html5.by
все демо из презентации
на гитхабе:
github.com/Nedudi/html5by
Подписывайтесь на новые статьи ;)
facebook, twitter, vk - @html5by
Го ко мне в друзья
facebook, twitter, vk - @nedudi
web-api
By nedudi
web-api
- 2,967