Ambient Light Events- Wylkon Queiroz

627 visualizações

Publicada em

Wylkon Queiroz fala sobre o Ambient Light events que são eventos CSS capazes de detectar mudanças na iluminação do ambiente.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
627
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ambient Light Events- Wylkon Queiroz

  1. 1. Ambient Light Events Wylkon Cardoso
  2. 2. A W3C sempre nos surpreende com suas novas especificações e uma delas define dois novos eventos capazes de detectar mudanças de luz no ambiente. Ambient Light Events Antes eles faziam parte da Sensors API, mas foram desmembrados em uma especificação independente de menor escopo.
  3. 3. Conheça outros sensores que já podem ser controlados via Web através da documentação do W3C: http://www.w3.org/2009/dap/ Ficou curioso né? Veja esse exemplo divertido abaixo: http://goo.gl/0FVzqT
  4. 4. Com esses eventos conseguimos de maneira prática fazer uma página web ou um aplicativo reconhecer qualquer mudança na intensidade da luz. E isso nos permite reagir a essas mudanças, por exemplo, alterando o contraste de cores da interface do usuário (UI) ou alterando a exposição necessária para tirar uma foto.
  5. 5. Quando o sensor de luz de um dispositivo detecta uma mudança no nível de luz, ele notifica o navegador dessa mudança, logo o navegador dispara um evento DeviceLightEvent que fornece informações sobre a intensidade da luz exata do ambiente. Este evento pode ser capturado no objeto window usando o método addEventListener (passando o nome do evento devicelight) ou com window.ondevicelight. Então você pode acessar a intensidade da luz expressa em “lux” através da propriedade DeviceLightEvent.value.
  6. 6. window.addEventListener('devicelight', function(event) { var html = document.getElementsByTagName('html')[0]; if (event.value < 50) { html.classList.add('darklight'); html.classList.remove('brightlight'); } else { html.classList.add('brightlight'); html.classList.remove('darklight'); } });
  7. 7. O que está por vir? @media (light-level: normal) { p { background: url("texture.jpg"); color: #333 } } @media (light-level: dim) { p { background: #222; color: #ccc } } @media (light-level: washed) { p { background: white; color: black} }
  8. 8. Obrigado :D http://wylkon.github.io/

×