Upload
tim-wright
View
331
Download
1
Tags:
Embed Size (px)
Citation preview
Creating Contextual Applications with Maslow & the Device API
Tim Wright, @csskarma Fresh Tilled Soil
What?
How?
Why?
Contextual Applications Maslow
Device APIMaslowMaslow
SAFTEY
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
!});
Geolocation
PHYSIOLOGICAL
Connectivity
Bandwidth
Do I have internet right now?
Do I have enough to get the content?
Online & Offline events
PHYSIOLOGICAL
navigator.onLine = true; // or false
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
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>
Battery Manager
SAFETY
navigator.getBattery().then(function(battery) {
console.log(battery.level);
! battery.addEventListener('levelchange', function() {
console.log(this.level);
};
});
Battery Manager
SAFETY
navigator.battery.charging
navigator.battery.chargingTime
navigator.battery.dischargingTime
navigator.battery.level
onchargingchange
onchargingtimechange
ondischargingtimechange
onlevelchange
LOVE & BELONGING
Connecting With People
Feeling Comfort
How can I meet and be around people?
Is the environment I’m in comforting?
Ambient Light
LOVE & BELONGING
window.addEventListener("devicelight", function(e){
console.log(e.value);
!});
LOVE & BELONGING
Self-respect
Self-esteem
How do I feel about myself?
How do other people feel about me?
Vibrate
SELF-ACTUALIZATION
navigator.vibrate(1000);
navigator.vibrate([1000]);
navigator.vibrate([50, 100, 50]);
navigator.vibrate(0);
navigator.vibrate([]);
Questions, now?
Questions, later?
Use words!
csskarma.com/contact