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
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
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
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/
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);
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
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
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 “ ”
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
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
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
67. http://caniuse.com/#search=getusermedia
68. At some point, Progressive Enhancement can give way to No Compromise
70. http://rng.io
71. Core Mobile Web Platform http://coremob.org
72. @ Labs
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 /