Upload
eliezer-bernart
View
768
Download
4
Embed Size (px)
DESCRIPTION
Apresentação sobre Web APIs realizada na URI Erechim - RS
Citation preview
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@[email protected]