This Web Goes To 11

You've made your web site fit a 320px screen, but you had a hunch there was more to this whole mobile thing than that. And now you're thinking about geolocation, social design, photo uploading, NFC and augmented reality. Wait, what? CSS3 didn't prepare you for this.

The web is getting a whole lot more exciting, and mobile's at the vanguard. The boundaries between browser and device, device and user - as well as between users and their friends - are where many of its unexplored opportunities lie.

Let's talk about what works, what doesn't, what should, and what will - and discuss the real possibilities and opportunities that standardized device and network APIs can offer. Our hopes and dreams for a rich, contextual, social web will depend on them.

Transcript

1. James Pearce
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

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

   View Slide

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

   View Slide

8. View Slide

9. View Slide

10. Web
    iPhone
    Android
    

    View Slide

11. Device APIs
    

    View Slide

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

    View Slide

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

14. View Slide

15. 
       Call  us
    
    

    View Slide

16. 
       Call  us
    
    //  call.wmls
    extern  function  makeCall()  {
       WTAPublic.makeCall("16505551234");
    }
    

    View Slide

17. 
       Pick  up!
    
    //  call.wmls
    extern  function  acceptCall()  {
       WTACallCont.accept("1",  1);
    }
    

    View Slide

18. //  sms.wmls
    extern  function  sendMsg()  {
       WTANetText.send("16505551234",  "WML  rocks");
    }
    extern  function  readMsg(i)  {
       var  sms  =  WTANetText.read(i);
       return  WTANetText.getFieldValue(
           sms,  "body"
       );
    }
    

    View Slide

19. //  contacts.wmls
    extern  function  addFriend(i,  num,  name)  {
       WTAPhoneBook.write(i,  num,  name);
    }
    //  return  structs  of  contact  details
    extern  function  getFriendById(i)  {
       return  WTAPhoneBook.read("i",  i);
    }
    extern  function  getFriendByName(name)  {
       return  WTAPhoneBook.read("t",  name);
    }
    

    View Slide

20. You still can’t do any of this in a
    contemporary mobile browser
    

    View Slide

21. enables web based
    content to access native
    device capability,
    intermediated through a
    robust, but flexible
    security framework
    “
    ”
    http://www.omtp.org/ .
    

    View Slide

22. ▪ Accelerometer
    ▪ Calendar
    ▪ Camera
    ▪ Contacts
    ▪ Core
    ▪ Device interaction
    ▪ Device status
    ▪ File system
    ▪ Geolocation
    ▪ Messaging
    ▪ Orientation
    ▪ Tasks
    ▪ Viewport
    ▪ Webview
    http://specs.wacapps.net/
    

    View Slide

23. to create client-side APIs
    that enable the development of
    Web Applications [..] that
    interact with devices'
    services such as
    Calendar, Contacts, Camera, etc
    “
    ”
    http://www.w .org/ /dap/
    

    View Slide

24. ▪ 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

25. Geolocation
    http://www.w .org/ /geolocation/
    Web Apps
    http://www.w3.org/ /webapps/
    Web Notifications
    http://www.w .org/ /web-notifications/
    

    View Slide

26. A few quick examples
    

    View Slide

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

    View Slide

28. 
    http://dev.w .org/ /dap/camera/
    

    View Slide

29. View Slide

30.    capture="camera"
    />
    http://dev.w .org/ /dap/camera/
    

    View Slide

31. 
    var  photo  =  document.getElementById('photo');
    photo.files[0].getFormatData(
       function  (data)  {},  //  success
       function  ()  {}            //  error
    );
    //  file  is  a  MediaFile,  extending  File.
    //  data  is  a  MediaFileData,  containing:
    //      codecs,  bitrate,  height,  width,  duration
    http://dev.w .org/ /dap/camera/
    

    View Slide

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

33. navigator.sendMessage(
       "sms:16505551234?"  +
       "body=JavaScript%20says%20hi",  
       [],                          //  attachments  as  File  array
       function  ()  {},  //  success
       function  ()  {}    //  error
    );
    //  also  mms:  and  mailto:
    http://dev.w .org/ /dap/messaging/
    

    View Slide

34. navigator.findSensors().onsuccess  =  function()  {
       this.result.forEach(function  (sensor)  {
           //  ...
       });
    };
    var  sensor  =  new  SensorConnection('Temperature');
    sensor.addEventListener('sensordata',  function(e)  {
       if(e.data  >  20.0)  {
           window.console.log('Hot!');
       }
    });
    sensor.startWatch({  interval:  2000  });
    http://dvcs.w .org/hg/dap/raw-file/tip/sensor-api/Overview.html
    Guaranteed not to work
    

    View Slide

35. Temperature, ºC
    AmbientLight, Lux
    AmbientNoise, dbA
    MagneticField, uTesla
    Proximity, cm
    AtmPressure, kP
    RelHumidity,
    

    View Slide

36. navigator.contacts.find(
       [                                              //  fields
           'name',  
           'emails'
       ],  
       function  (contacts)  {},  //  success
       function  ()  {},                  //  error
       {                                              //  find  options
             filter:  'James',  
             multiple:  true
       }
    );
    //  displayName,  name,  nickname,  phoneNumbers
    //  emails,  addresses,  ims,  organizations,  birthday
    //  note,  photos,  categories,  urls
    http://www.w .org/TR/contacts-api/
    

    View Slide

37. The ability to add and update
    contact information is not a
    function of the API provided in
    this specification
    “
    ”
    

    View Slide

38. Save  Contacts
    var  vcard  =  
       'BEGIN:VCARD\r\n'  +
       'VERSION:3.0\r\n'  +
       'UID:'  +  contact.id  +  '\r\n'  +      
       'N:Pearce;James\r\n'  +
       'FN:James  Pearce\r\n'  +
       'END:VCARD';
    document.getElementById('vcard').href  =
       'data:text/x-­‐vcard;charset=utf-­‐8,'  +
       encodeURIComponent(vcard);
    

    View Slide

39. View Slide

40. View Slide

41. https://wiki.mozilla.org/WebAPI
    We are aiming at providing all
    the necessary APIs to build a
    basic HTML phone experience
    within the next - months
    “
    ”
    

    View Slide

42. https://wiki.mozilla.org/WebAPI
    “
    ”
    The Mozilla WebAPI team is pushing
    the envelope of the web to include
    - and in places exceed -
    the capabilities of competing stacks
    

    View Slide

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

    View Slide

44. View Slide

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

46. View Slide

47. var  contact  =  new  mozContact();
    contact.init({
       name:  'James',
       tel:  '16505551234'
    });
    navigator.mozContacts.save(contact);
    

    View Slide

48. Our proposal might or might
    not look like [the W C APIs]
    for the moment
    “
    ”
    

    View Slide

49. Once we have an API that we
    feel that we are satisfied with,
    we will submit the new API for
    standardization to the W C
    “
    ”
    

    View Slide

50. View Slide

51. View Slide

52. https://github.com/jamesgpearce/gumstogram
    http://jamesgpearce.github.com/gumstogram
    

    View Slide

53. Use cases
    

    View Slide

54. window.addEventListener('deviceorientation',
       function  (e)  {
           orientation  =  Math.abs(w.orientation);
           rotation  =  Math.abs(e.gamma);
           if  (rotation  >  8  &&  orientation  ===  0)  {
               if  (enabled)  {
                   disableZoom();
               }  else  {
                   restoreZoom();
               }
           }
       },  false
    );
    https://github.com/scottjehl/iOS-Orientationchange-Fix
    

    View Slide

55. https://github.com/jamesgpearce/compios
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

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

61. ▪ Check-in
    ▪ Localizing search
    ▪ Store finder
    ▪ Weather
    Geolocation
    

    View Slide

62. View Slide

63. ▪ Sharing
    ▪ Notifications
    ▪ Offline transport fallback
    ▪ Frictionless web sign-on
    Messaging
    

    View Slide

64. ▪ Profile pictures
    ▪ Photo sharing
    ▪ Review sites
    ▪ Recognition
    Camera & User media
    

    View Slide

65. Challenges &
    moving forward
    

    View Slide

66. View Slide

67. http://caniuse.com/#search=getusermedia
    

    View Slide

68. At some point,
    Progressive Enhancement
    can give way to
    No Compromise
    

    View Slide

69. View Slide

70. http://rng.io
    

    View Slide

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

    View Slide

72. @ Labs
    

    View Slide

73. View Slide

74. James Pearce
    

    View Slide

75. ▪ http://www.flickr.com/photos/troymccluresf
    ▪ http://www.flickr.com/photos/chrisangle
    ▪ http://www.flickr.com/photos/ivan_kaurin
    ▪ http://www.flickr.com/photos/ @N /
    

    View Slide