Самые 






странные

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

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

полезные



 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  ...


Демо  работает только

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

 
ref.li/dor 



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};

Демо  работает только

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

 
ref.li/dmo 

Поддержка


"Зачем мне все это?" 

"Я не сталкиваюсь с таким на работе!"

"Оно же все сырое и не работает в 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