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.
Contextual Applications

3.
Abraham Maslow

4.
“If all you have is a
hammer, everything looks
like a nail.”

5.
Physiological
Safety
Love/Belonging
Esteem
Self-
Actualization

6.
Why does this matter?

7.
The Device API

8.
THE DEVICE API
2009

9.
SAFTEY
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
!
});
Geolocation

10.
THE DEVICE API
2014?

11.
Abraham Maslow’s
Device API

12.
“Physical requirements for
human survival”
PHYSIOLOGICAL

13.
PHYSIOLOGICAL
Connectivity
Bandwidth
Do I have internet right now?
Do I have enough to get the content?

14.
Online & Offline events
PHYSIOLOGICAL
navigator.onLine = true; // or false
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

15.
Network information API
brings us all great sadness.
PHYSIOLOGICAL

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.
SAFETY
“The need for security in
personal life, finances,
and health”

18.
SAFETY
Physical Safety
Data Safety
Am I in a safe place?
Is all the work I’ve done safe?

19.
Battery Manager
SAFETY
navigator.getBattery().then(function(battery) {
console.log(battery.level);
!
battery.addEventListener('levelchange', function() {
console.log(this.level);
};
});

20.
Battery Manager
SAFETY
navigator.battery.charging
navigator.battery.chargingTime
navigator.battery.dischargingTime
navigator.battery.level
onchargingchange
onchargingtimechange
ondischargingtimechange
onlevelchange

21.
LOVE & BELONGING
“The desire for friendship,
intimacy, and family”

22.
LOVE & BELONGING
Connecting With People
Feeling Comfort
How can I meet and be around people?
Is the environment I’m in comforting?

23.
LOVE & BELONGING

24.
Contacts Manager
LOVE & BELONGING
contacts code here

25.
WebNFC
LOVE & BELONGING
WebNFC code here

26.
Messaging
LOVE & BELONGING
messaging code here

27.
Ambient Light
LOVE & BELONGING
window.addEventListener("devicelight", function(e){
console.log(e.value);
!
});

28.
ESTEEM
“The need for self-esteem
and self-respect.”

29.
LOVE & BELONGING
Self-respect
Self-esteem
How do I feel about myself?
How do other people feel about me?

30.
Media Capture & Streams
ESTEEM
Media capture

31.
Proximity
ESTEEM
Proximity

32.
SELF ACTUALIZATION
“The Desire to accomplish
everything that one can.”

33.
LOVE & BELONGING
Reaching Potential
Self-reflection
Am I doing the best I can?
Why am I here?

34.
Vibrate
SELF-ACTUALIZATION
navigator.vibrate(1000);
navigator.vibrate([1000]);
navigator.vibrate([50, 100, 50]);
navigator.vibrate(0);
navigator.vibrate([]);

35.
SELF-ACTUALIZATION
But seriously, folks…

36.
The Web is an
open medium.

37.
Prototyping

38.
It’s super cool!

39.
Questions, now?
Questions, later?
Use words!
@csskarma
tim.wright@freshtilledsoil.com
csskarma.com/contact