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

This Web Goes To 11

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.

James Pearce

April 17, 2012
Tweet

More Decks by James Pearce

Other Decks in Technology

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