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 full-size slide

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


    View full-size slide

  3. Need Android
    Phone
    examples

    View full-size slide

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


    View full-size slide

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

    View full-size slide

  6. Web
    iPhone
    Android

    View full-size slide

  7. Facing the future

    View full-size slide

  8. Discovery
    Distribution
    Monetization

    View full-size slide

  9. What apps do my friends use?

    View full-size slide

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


    View full-size slide

  11. LISTEN
    READ
    RUN
    EAT
    Like
    Like
    Like
    Like

    View full-size slide

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

    View full-size slide

  13. Standardization
    Implementation
    Fragmentation

    View full-size slide

  14. Support
    Capabilities

    View full-size slide

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

    View full-size slide

  16. http://rng.io

    View full-size slide

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


    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

  25. http://bit.ly/gumsto

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. Facing the future

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. it depends
    “ ”
    isn't good enough

    View full-size slide

  32. James Pearce

    View full-size slide

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

    View full-size slide