Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Contextual Applications with Maslow & The Device API

997 views

Published on

Touring through the device API and instances of where to use it.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Creating Contextual Applications with Maslow & The Device API

  1. 1. Creating Contextual Applications with Maslow & the Device API Tim Wright, @csskarma Fresh Tilled Soil What? How? Why? Contextual Applications Maslow Device API MaslowMaslow
  2. 2. Contextual Applications
  3. 3. Abraham Maslow
  4. 4. “If all you have is a hammer, everything looks like a nail.”
  5. 5. Physiological Safety Love/Belonging Esteem Self- Actualization
  6. 6. Why does this matter?
  7. 7. The Device API
  8. 8. THE DEVICE API 2009
  9. 9. SAFTEY navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; ! }); Geolocation
  10. 10. THE DEVICE API 2014?
  11. 11. Abraham Maslow’s Device API
  12. 12. “Physical requirements for human survival” PHYSIOLOGICAL
  13. 13. PHYSIOLOGICAL Connectivity Bandwidth Do I have internet right now? Do I have enough to get the content?
  14. 14. Online & Offline events PHYSIOLOGICAL navigator.onLine = true; // or false window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus);
  15. 15. Network information API brings us all great sadness. PHYSIOLOGICAL
  16. 16. PHYSIOLOGICAL <picture> <source srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=“dog barf"> </picture>
  17. 17. SAFETY “The need for security in personal life, finances, and health”
  18. 18. SAFETY Physical Safety Data Safety Am I in a safe place? Is all the work I’ve done safe?
  19. 19. Battery Manager SAFETY navigator.getBattery().then(function(battery) { console.log(battery.level); ! battery.addEventListener('levelchange', function() { console.log(this.level); }; });
  20. 20. Battery Manager SAFETY navigator.battery.charging navigator.battery.chargingTime navigator.battery.dischargingTime navigator.battery.level onchargingchange onchargingtimechange ondischargingtimechange onlevelchange
  21. 21. LOVE & BELONGING “The desire for friendship, intimacy, and family”
  22. 22. LOVE & BELONGING Connecting With People Feeling Comfort How can I meet and be around people? Is the environment I’m in comforting?
  23. 23. LOVE & BELONGING
  24. 24. Contacts Manager LOVE & BELONGING contacts code here
  25. 25. WebNFC LOVE & BELONGING WebNFC code here
  26. 26. Messaging LOVE & BELONGING messaging code here
  27. 27. Ambient Light LOVE & BELONGING window.addEventListener("devicelight", function(e){ console.log(e.value); ! });
  28. 28. ESTEEM “The need for self-esteem and self-respect.”
  29. 29. LOVE & BELONGING Self-respect Self-esteem How do I feel about myself? How do other people feel about me?
  30. 30. Media Capture & Streams ESTEEM Media capture
  31. 31. Proximity ESTEEM Proximity
  32. 32. SELF ACTUALIZATION “The Desire to accomplish everything that one can.”
  33. 33. LOVE & BELONGING Reaching Potential Self-reflection Am I doing the best I can? Why am I here?
  34. 34. Vibrate SELF-ACTUALIZATION navigator.vibrate(1000); navigator.vibrate([1000]); navigator.vibrate([50, 100, 50]); navigator.vibrate(0); navigator.vibrate([]);
  35. 35. SELF-ACTUALIZATION But seriously, folks…
  36. 36. The Web is an open medium.
  37. 37. Prototyping
  38. 38. It’s super cool!
  39. 39. Questions, now? Questions, later? Use words! @csskarma
 tim.wright@freshtilledsoil.com csskarma.com/contact

×