O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ambient Light Events- Wylkon Queiroz

632 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
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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/

×