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.

D7826ab49f74589fcada00cb92e5ede7?s=128

James Pearce

April 17, 2012
Tweet

Transcript

  1. James Pearce

  2. None
  3. None
  4. None
  5. None
  6. @media  screen  and  (max-­‐width:  320px)

  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
  8. None
  9. None
  10. Web iPhone Android

  11. Device APIs

  12. Client-side APIs that enable the development of Web Applications that

    interact with device hardware http://www.w .org/ / /DeviceAPICharter “ ”
  13. Storage GPS device Audio player Video player Accelerometer Compass Camera

    Bluetooth Telephony Messaging Contacts Calendar Notifications Proximity sensor Thermometer Pressure gauge NFC RFID
  14. None
  15. <a  href="wtai://wp/mc;16505551234">    Call  us </a>

  16. <a  href="call.wmls#makeCall()">    Call  us </a> //  call.wmls extern  function

     makeCall()  {    WTAPublic.makeCall("16505551234"); }
  17. <a  href="calls.wmls#acceptCall()">    Pick  up! </a> //  call.wmls extern  function

     acceptCall()  {    WTACallCont.accept("1",  1); }
  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"    ); }
  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); }
  20. You still can’t do any of this in a contemporary

    mobile browser
  21. enables web based content to access native device capability, intermediated

    through a robust, but flexible security framework “ ” http://www.omtp.org/ .
  22. ▪ Accelerometer ▪ Calendar ▪ Camera ▪ Contacts ▪ Core

    ▪ Device interaction ▪ Device status ▪ File system ▪ Geolocation ▪ Messaging ▪ Orientation ▪ Tasks ▪ Viewport ▪ Webview http://specs.wacapps.net/
  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/
  24. ▪ Media Capture (forms) ▪ Media Capture (.getUserMedia) ▪ Contacts

    ▪ Battery Status ▪ Network Information ▪ Sensor ▪ Vibration ▪ Calendar ▪ Menu ▪ Permissions ▪ Media Capture (.device) ▪ Messaging ▪ Gallery ▪ System info
  25. Geolocation http://www.w .org/ /geolocation/ Web Apps http://www.w3.org/ /webapps/ Web Notifications

    http://www.w .org/ /web-notifications/
  26. A few quick examples

  27. navigator.geolocation.getCurrentPosition(    function(point)  {        console.log(point);    }

    ); www.w .org/TR/geolocation-API/
  28. <input  type="file"  accept="image/*"  /> http://dev.w .org/ /dap/camera/

  29. None
  30. <input  type="file"  accept="image/*"    capture="camera" /> http://dev.w .org/ /dap/camera/

  31. <input  type="file"  accept="image/*"  id="photo"  /> 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/
  32. navigator.getUserMedia(    {        audio:  false,    

       video:  true    },    function  (stream)  {},  //  success    function  ()  {}                //  error ); //  stream  is  a  LocalMediaStream: //  use  URL.createObjectURL(stream) //  to  bind  to  <video>  src http://dev.w .org/ /webrtc/editor/getusermedia.html
  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/
  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
  35. Temperature, ºC AmbientLight, Lux AmbientNoise, dbA MagneticField, uTesla Proximity, cm

    AtmPressure, kP RelHumidity,
  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/
  37. The ability to add and update contact information is not

    a function of the API provided in this specification “ ”
  38. <a  id="vcard">Save  Contacts</a> 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);
  39. None
  40. None
  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 “ ”
  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
  43. ▪ Telephony ▪ Messaging ▪ Contacts ▪ Camera ▪ Network

    ▪ USB ▪ Embedded browser ▪ Battery ▪ Device Status ▪ Settings ▪ Mouse Lock ▪ Vibration ▪ NFC ▪ Bluetooth ▪ Calendar ▪ Background services
  44. None
  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
  46. None
  47. var  contact  =  new  mozContact(); contact.init({    name:  'James',  

     tel:  '16505551234' }); navigator.mozContacts.save(contact);
  48. Our proposal might or might not look like [the W

    C APIs] for the moment “ ”
  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 “ ”
  50. None
  51. None
  52. https://github.com/jamesgpearce/gumstogram http://jamesgpearce.github.com/gumstogram

  53. Use cases

  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
  55. https://github.com/jamesgpearce/compios

  56. None
  57. None
  58. None
  59. None
  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
  61. ▪ Check-in ▪ Localizing search ▪ Store finder ▪ Weather

    Geolocation
  62. None
  63. ▪ Sharing ▪ Notifications ▪ Offline transport fallback ▪ Frictionless

    web sign-on Messaging
  64. ▪ Profile pictures ▪ Photo sharing ▪ Review sites ▪

    Recognition Camera & User media
  65. Challenges & moving forward

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

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

    Compromise
  69. None
  70. http://rng.io

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

  72. @ Labs

  73. None
  74. James Pearce

  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 /