Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Facing the Future

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.

D7826ab49f74589fcada00cb92e5ede7?s=128

James Pearce

May 10, 2012
Tweet

Transcript

  1. James Pearce

  2. None
  3. A medium that would be innovative, beautiful, disruptive, and with

    us everywhere “ ”
  4. None
  5. Need Android Phone examples

  6. None
  7. None
  8. A medium that would be innovative, beautiful, disruptive, and with

    us everywhere “ ”
  9. None
  10. How many innovative, beautiful, & disruptive native apps can you

    name? web
  11. None
  12. Web iPhone Android

  13. Facing the future

  14. Discovery Distribution Monetization

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  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
  26. None
  27. None
  28. Standardization Implementation Fragmentation

  29. Support Capabilities

  30. Core Mobile Web Platform http://coremob.org

  31. @ Labs

  32. None
  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/
  38. None
  39. None
  40. None
  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
  42. None
  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

  47. None
  48. ▪ Telephony ▪ Messaging ▪ Contacts ▪ Camera ▪ Network

    ▪ USB ▪ Embedded browser ▪ Battery ▪ Device Status ▪ Settings ▪ Mouse Lock ▪ Vibration ▪ NFC ▪ Bluetooth ▪ Calendar ▪ Background services
  49. None
  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
  55. None
  56. it depends “ ” isn't good enough

  57. None
  58. None
  59. James Pearce

  60. ▪ http://www.flickr.com/photos/chrisangle