creating contextual applications with maslow & the device api
TRANSCRIPT
Creating Contextual Applications with Maslow & the Device API
Tim Wright, @csskarma Fresh Tilled Soil
What?
How?
Why?
Contextual Applications Maslow
Device APIMaslowMaslow
Contextual Applications
Abraham Maslow
“If all you have is a hammer, everything looks
like a nail.”
Physiological
Safety
Love/Belonging
Esteem
Self- Actualization
Why does this matter?
The Device API
THE DEVICE API
2009
SAFTEY
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
!});
Geolocation
THE DEVICE API
2014?
Abraham Maslow’s Device API
“Physical requirements for human survival”
PHYSIOLOGICAL
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);
Network information API brings us all great sadness.
PHYSIOLOGICAL
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>
SAFETY
“The need for security in personal life, finances,
and health”
SAFETY
Physical Safety
Data Safety
Am I in a safe place?
Is all the work I’ve done safe?
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
“The desire for friendship, intimacy, and family”
LOVE & BELONGING
Connecting With People
Feeling Comfort
How can I meet and be around people?
Is the environment I’m in comforting?
LOVE & BELONGING
Contacts Manager
LOVE & BELONGING
contacts code here
WebNFC
LOVE & BELONGING
WebNFC code here
Messaging
LOVE & BELONGING
messaging code here
Ambient Light
LOVE & BELONGING
window.addEventListener("devicelight", function(e){
console.log(e.value);
!});
ESTEEM
“The need for self-esteem and self-respect.”
LOVE & BELONGING
Self-respect
Self-esteem
How do I feel about myself?
How do other people feel about me?
Media Capture & Streams
ESTEEM
Media capture
Proximity
ESTEEM
Proximity
SELF ACTUALIZATION
“The Desire to accomplish everything that one can.”
LOVE & BELONGING
Reaching Potential
Self-reflection
Am I doing the best I can?
Why am I here?
Vibrate
SELF-ACTUALIZATION
navigator.vibrate(1000);
navigator.vibrate([1000]);
navigator.vibrate([50, 100, 50]);
navigator.vibrate(0);
navigator.vibrate([]);
SELF-ACTUALIZATION
But seriously, folks…
The Web is an open medium.
Prototyping
It’s super cool!
Questions, now?
Questions, later?
Use words!
csskarma.com/contact