Creating Contextual Applications with Maslow & The Device API

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!

@[email protected]

csskarma.com/contact