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.

James Pearce

May 10, 2012
Tweet

More Decks by James Pearce

Other Decks in Technology

Transcript

  1. James Pearce

    View Slide

  2. View Slide

  3. A medium that would be
    innovative, beautiful, disruptive,
    and with us everywhere


    View Slide

  4. View Slide

  5. Need Android
    Phone
    examples

    View Slide

  6. View Slide

  7. View Slide

  8. A medium that would be
    innovative, beautiful, disruptive,
    and with us everywhere


    View Slide

  9. View Slide

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

    View Slide

  11. View Slide

  12. Web
    iPhone
    Android

    View Slide

  13. Facing the future

    View Slide

  14. Discovery
    Distribution
    Monetization

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. What apps do my friends use?

    View Slide

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


    View Slide

  24. LISTEN
    READ
    RUN
    EAT
    Like
    Like
    Like
    Like

    View Slide

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

    View Slide

  26. View Slide

  27. View Slide

  28. Standardization
    Implementation
    Fragmentation

    View Slide

  29. Support
    Capabilities

    View Slide

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

    View Slide

  31. @ Labs

    View Slide

  32. View Slide

  33. http://rng.io

    View Slide

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


    View Slide

  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


    View Slide

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

    View Slide

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

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  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

    View Slide

  42. View Slide

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

    View Slide

  44.    type="file"
       accept="image/*"  
    />
    http://dev.w .org/ /dap/camera/

    View Slide

  45. 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

    View Slide

  46. http://bit.ly/gumsto

    View Slide

  47. View Slide

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

    View Slide

  49. View Slide

  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

    View Slide

  51. Facing the future

    View Slide

  52. 320px

    View Slide

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

    View Slide

  54. Storage
    GPS device
    Audio player
    Video player
    Accelerometer
    Compass
    Camera
    Bluetooth
    Telephony
    Messaging
    Contacts
    Calendar
    Notifications
    Proximity sensor
    Thermometer
    Pressure gauge
    NFC
    RFID

    View Slide

  55. View Slide

  56. it depends
    “ ”
    isn't good enough

    View Slide

  57. View Slide

  58. View Slide

  59. James Pearce

    View Slide

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

    View Slide