Самые 






странные

экзотические

необузданные

полезные



 Web API


Что нас ждет в будущем 
и почему экспериментировать нужно уже сейчас


Дима Дудин @html5by


 


  .    .    .



classList API



W3C DOM4 
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

working draft



Включить

document.documentElement.requestFullScreen()

el.requestFullScreen();

Выключить

 document.cancelFullScreen();


Включено?

document.fullscreenEnabled;

У кого включено?

document.fullscreenElement;

События

fullscreenchangefullscreenerror


Стилизация

 :-webkit-full-screen {
  background: red;
}


allowfullscreen для <Iframe>

<iframe allowfullscreen="true" />

Поддержка fullscreen


Применение


  • Игры

  • Видео, изображения, галлереи, карты

  • Любые онлайн сервисы/приложения в которых пользователь работает долго.

Pointer Lock API

candidate recomendation



Хотите сделать браузерный 

шутер от первого лица?



 

Первое, что приходит на ум:

  • вешаем обработчик на 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

w3c recomendation



Запускаем видео и переходим 

на соседний таб


Событие

visibilitychange


Скрыт ли таб?

document.hidden

true / false


Состояние видимости

document.visibilityState

"visible"     "hidden"     "prerender"

Применение


  • Поставить видео/аудио на паузу,
    пока таб неактивен. 

  • Изменить title и favicon страницы, пока таб неактивен

  • Оповестить пользователя о новых комментариях или других событиях, если ваш сайт находится в неактивном табе (так делают многие соц. сети)


Get User Media

Media Capture and Streams
W3C Editor's Draft



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

W3C Candidate Recommendation



window.navigator.battery

В него входят:

charging  // true/falsechargingTime // время до конца зарядки
dischargingTime // время до полной разрядки
level // 0..1

И события:

onchargingchangeonchargingtimechange
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+

Демо 

работает только в мобильных браузерах


ref.li/vibr

Применение

  • для создания эффекта обратной связи при нажатии кнопок .

  • Для оповещении о пришедшем сообщении, письме, различных напоминаниях и т.п .

  • Для браузерных игр. (что-то взрывается, персонажа убивают, машина упирается в борт трассы.. ну и любого подобного трэша.

  • При просмотре видео или прослушивании музыки, в моменты усиления низких частот, можно добавить немного вибрации.

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

  

Made with Slides.com