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
   

   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