Facing the Future - Speaker Deck

Slide 1

Slide 1 text

James Pearce

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

A medium that would be innovative, beautiful, disruptive, and with us everywhere “ ”

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Need Android Phone examples

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

A medium that would be innovative, beautiful, disruptive, and with us everywhere “ ”

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

How many innovative, beautiful, & disruptive native apps can you name? web

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Web iPhone Android

Slide 13

Slide 13 text

Facing the future

Slide 14

Slide 14 text

Discovery Distribution Monetization

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

What apps do my friends use?

Slide 23

Slide 23 text

Open Graph http://ogp.me/ enables any web page to become a rich object in a social graph “ ”

Slide 24

Slide 24 text

LISTEN READ RUN EAT Like Like Like Like

Slide 25

Slide 25 text

▪ Play a Sound ▪ Like a Sound ▪ Post a Sound ▪ Follow a User ▪ Join a Group

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Standardization Implementation Fragmentation

Slide 29

Slide 29 text

Support Capabilities

Slide 30

Slide 30 text

Core Mobile Web Platform http://coremob.org

Slide 31

Slide 31 text

@ Labs

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

http://rng.io

Slide 34

Slide 34 text

Device APIs Client-side APIs that enable the development of Web Applications that interact with device hardware http://www.w .org/ / /DeviceAPICharter “ ”

Slide 35

Slide 35 text

Device APIs enable the development of Web Applications [..] that interact with devices' services such as Calendar, Contacts, Camera, etc http://www.w .org/ / /DeviceAPICharter “ ”

Slide 36

Slide 36 text

▪ Media Capture (forms) ▪ Media Capture (.getUserMedia) ▪ Contacts ▪ Battery Status ▪ Network Information ▪ Sensor ▪ Vibration ▪ Calendar ▪ Menu ▪ Permissions ▪ Media Capture (.device) ▪ Messaging ▪ Gallery ▪ System info

Slide 37

Slide 37 text

navigator.geolocation.getCurrentPosition( function(point) { console.log(point); } ); http://www.w .org/TR/geolocation-API/

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

var bearing = Math.atan2( Math.sin(lon2 -‐ lon1) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) -‐ Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 -‐ lon1) ) * 180 / Math.PI; arrow.style.webkitTransform = 'rotateZ(' + bearing + 'deg)'; http://www.movable-type.co.uk/scripts/latlong.html

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Temperature, ºC AmbientLight, Lux AmbientNoise, dbA MagneticField, uTesla Proximity, cm AtmPressure, kP RelHumidity, var sensor = new SensorConnection( 'Temperature' );

Slide 44

Slide 44 text

http://dev.w .org/ /dap/camera/

Slide 45

Slide 45 text

navigator.getUserMedia( { audio: false, video: true }, function (stream) {}, // success function () {} // error ); // stream is a LocalMediaStream: // use URL.createObjectURL(stream) // to bind to src http://dev.w .org/ /webrtc/editor/getusermedia.html

Slide 46

Slide 46 text

http://bit.ly/gumsto

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

▪ Telephony ▪ Messaging ▪ Contacts ▪ Camera ▪ Network ▪ USB ▪ Embedded browser ▪ Battery ▪ Device Status ▪ Settings ▪ Mouse Lock ▪ Vibration ▪ NFC ▪ Bluetooth ▪ Calendar ▪ Background services

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

var myCall = navigator.telephony.dial("16505551234"); myCall.state; // dialing, ringing, busy, connecting, // connected, disconnecting, disconnected, // incoming myCall.onconnected = function () {}; // onbusy, ondisconnected etc myCall.hangup(); myCall2.answer(); https://wiki.mozilla.org/WebAPI/WebTelephony

Slide 51

Slide 51 text

Facing the future

Slide 52

Slide 52 text

320px

Slide 53

Slide 53 text

@media screen and (max-‐width: 320px)

Slide 54

Slide 54 text

Storage GPS device Audio player Video player Accelerometer Compass Camera Bluetooth Telephony Messaging Contacts Calendar Notiﬁcations Proximity sensor Thermometer Pressure gauge NFC RFID