Web Rangers Web Rangers e Power APIse Power APIsA Web como plataformaA Web como plataforma

Eliezer Bernart1010aa Fase Engenharia de Fase Engenharia de Computação - UnoescComputação - Unoesc

Visão ComputacionalVisão Computacional

DocumentaçãoDocumentação

Web APIsWeb APIs

O propósito da Web

A Web em múltiplos dispositivos, a mudança

que revolucionou

WHATWGWHATWGNavegadoresNavegadores

W3CW3C

~ 2008~ 2008

O que são Web APIs?

API, [ . . . ]ou Interface de Programação de Aplicativos é um conjunto de rotinas e padrões

estabelecidos por um software para a utilização das suas funcionalidades por aplicativos que não

pretendem envolver-se em detalhes da implementação do software, mas apenas usar

seus serviços.

Wikipedia - http://pt.wikipedia.org/wiki/API

E o que eu ganho com isso?

Um código,múltiplas plataformas

Row 1 Row 2 Row 3 Row 40

2

4

6

8

10

12

Column 1

Column 2

Column 3FerramentasFerramentas

Navegador atualizado

Editor de texto favorito

Hora da Ação!

navigator.battery.level;

navigator.battery.charging;

navigator.battery.chargingTime;

navigator.battery.dischargingTime;

navigator.battery.addEventListener('levelchange', function () {

// Seu código

});●

navigator.battery.addEventListener('chargingchange', function () { });

navigator.battery.addEventListener('chargingtimechange', function () { });

navigator.battery.addEventListener('dischargingtimechange', function () { });

Battery Status APIBattery Status API

Demo!

// Vibrar por 100ms

navigator.vibrate(100);

// Vibrar por 100ms e depois aguardar 50ms

navigator.vibrate([100, 50]);

// Parar vibração

navigator.vibrate(0);

navigator.vibrate([]);

Vibration APIVibration API

Demo!

if ('ondevicelight' in window) {

window.addEventListener('devicelight', function (event) {

console.log(event.value + ' lx');

// Seu código

});

}

Ambient Light APIAmbient Light API

Demo!

if ('ondeviceproximity' in window) {

window.addEventListener('deviceproximity', function (event) { // Seu código console.log(event.min); console.log(event.max); console.log(event.value); });

window.addEventListener('userproximity', function (event) { // Seu código console.log(event.near); });

}

Proximity APIProximity API

Demo!

Device Orientation APIDevice Orientation API

Device Orientation APIDevice Orientation API

if ('ondevicemotion' in window) {

window.addEventListener('devicemotion', function (event) { // Seu código // x, y, z - m/s² console.log(event.accelerationIncludingGravity.x); // x, y, z - m/s² console.log(event.acceleration.x); // alpha (Z), beta(X), gamma(Y) – deg/s console.log(event.rotationRate.beta); // ms console.log(event.interval); });

}

Demo!

Notification.requestPermission ( function (permission) { console.log(permission); // 'default', 'granted', 'denied'});

var notification = new Notification('Olá Mundo!', { dir: 'rtl', lang: 'pt-BR', body: 'Seja bem vindo!', icon: '/images/mensagem.png', onclick: function (event) { console.log('click!'); } // onshow, onerror, onclose});

Web Notifications APIWeb Notifications API

Demo!

navigator.geolocation.getCurrentPosition ( function (position) { console.log(Date(position.timestamp)); console.log(position.coords.latitude); console.log(position.coords.longitude); console.log(position.coords.altitude + ' metros'); console.log(position.coords.accuracy + ' metros'); console.log(position.coords.altitudeAccuracy + ' metros'); console.log(position.coords.heading + ' graus'); console.log(position.coords.speed + ' m/s'); }, function (positionError) { // PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT console.log(positionError.code + ', ' + positionError.message); }, { enableHighAccuracy: true });

Geolocation APIGeolocation API

Demo!

Guia Rápido de Desenvolvimento para Firefox OS – André Garzia

https://leanpub.com/guiarapidofirefoxos

Mozilla Developers Network – Firefox OS

https://developer.mozilla.org/pt-BR/Firefox_OS

Mozilla Hacks

https://hacks.mozilla.org/

Can I Use

http://caniuse.com

W3C Specs

http://www.w3.org/TR/

Power Rangers e todas as demais imagens relacionadas são uma marca registrada e todos os direitos pertencem aos seus criadores.

ReferênciasReferências

Obrigado!Obrigado!

Eliezer BernartEliezer Bernart@eliezerbernart@eliezerbernart

eliezerb.com.breliezerb.com.breliezerbernart@gmail.comeliezerbernart@gmail.com