Facing the Future

The web deserves to be the third mobile runtime, but it isn't. What is holding it back? It faces challenges from industry, the standards process, browser implementations, and probably our own short-sightedness.

The web's unnerving ability to disrupt shouldn't be taken for granted. It wants to evolve, but we must encourage that process in order for it to become competitive again.

On a journey from device APIs to standards groups, from test suites to provocative demos, let's figure out how to move the web forward towards a brave mobile future.

Transcript

1. James Pearce
3. A medium that would be innovative, beautiful, disruptive, and with us everywhere “ ”
5. Need Android Phone examples
8. A medium that would be innovative, beautiful, disruptive, and with us everywhere “ ”
10. How many innovative, beautiful, & disruptive native apps can you name? web
12. Web iPhone Android
13. Facing the future
14. Discovery Distribution Monetization
22. What apps do my friends use?
23. Open Graph http://ogp.me/ enables any web page to become a rich object in a social graph “ ”
24. LISTEN READ RUN EAT Like Like Like Like
25. ▪ Play a Sound ▪ Like a Sound ▪ Post a Sound ▪ Follow a User ▪ Join a Group
28. Standardization Implementation Fragmentation
29. Support Capabilities
30. Core Mobile Web Platform http://coremob.org
31. @ Labs
33. http://rng.io
34. Device APIs Client-side APIs that enable the development of Web Applications that interact with device hardware http://www.w .org/ / /DeviceAPICharter “ ”
35. Device APIs enable the development of Web Applications [..] that interact with devices' services such as Calendar, Contacts, Camera, etc http://www.w .org/ / /DeviceAPICharter “ ”
36. ▪ Media Capture (forms) ▪ Media Capture (.getUserMedia) ▪ Contacts ▪ Battery Status ▪ Network Information ▪ Sensor ▪ Vibration ▪ Calendar ▪ Menu ▪ Permissions ▪ Media Capture (.device) ▪ Messaging ▪ Gallery ▪ System info
37. navigator.geolocation.getCurrentPosition(    function(point)  {        console.log(point);    } ); http://www.w .org/TR/geolocation-API/
41. 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
43. Temperature, ºC AmbientLight, Lux AmbientNoise, dbA MagneticField, uTesla Proximity, cm AtmPressure, kP RelHumidity, var  sensor  =  new      SensorConnection(        'Temperature'    );
44. <input      type="file"    accept="image/*"   /> http://dev.w .org/ /dap/camera/
45. navigator.getUserMedia(    {        audio:  false,        video:  true    },    function  (stream)  {},  //  success    function  ()  {}                //  error ); //  stream  is  a  LocalMediaStream: //  use  URL.createObjectURL(stream) //  to  bind  to  <video>  src http://dev.w .org/ /webrtc/editor/getusermedia.html
46. http://bit.ly/gumsto
48. ▪ Telephony ▪ Messaging ▪ Contacts ▪ Camera ▪ Network ▪ USB ▪ Embedded browser ▪ Battery ▪ Device Status ▪ Settings ▪ Mouse Lock ▪ Vibration ▪ NFC ▪ Bluetooth ▪ Calendar ▪ Background services
50. 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
51. Facing the future
52. 320px
53. @media  screen  and  (max-­‐width:  320px)
54. Storage GPS device Audio player Video player Accelerometer Compass Camera Bluetooth Telephony Messaging Contacts Calendar Notifications Proximity sensor Thermometer Pressure gauge NFC RFID
56. it depends “ ” isn't good enough
59. James Pearce
60. ▪ http://www.flickr.com/photos/chrisangle