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. Storage GPS device Audio player Video player Accelerometer Compass Camera

    Bluetooth Telephony Messaging Contacts Calendar Notifications Proximity sensor Thermometer Pressure gauge NFC RFID 320px
  2. Client-side APIs that enable the development of Web Applications that

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

    Bluetooth Telephony Messaging Contacts Calendar Notifications Proximity sensor Thermometer Pressure gauge NFC RFID
  4. <a  href="call.wmls#makeCall()">    Call  us </a> //  call.wmls extern  function

     makeCall()  {    WTAPublic.makeCall("16505551234"); }
  5. //  sms.wmls extern  function  sendMsg()  {    WTANetText.send("16505551234",  "WML  rocks");

    } extern  function  readMsg(i)  {    var  sms  =  WTANetText.read(i);    return  WTANetText.getFieldValue(        sms,  "body"    ); }
  6. //  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); }
  7. enables web based content to access native device capability, intermediated

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

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

    ▪ Battery Status ▪ Network Information ▪ Sensor ▪ Vibration ▪ Calendar ▪ Menu ▪ Permissions ▪ Media Capture (.device) ▪ Messaging ▪ Gallery ▪ System info
  11. <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/
  12. 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
  13. 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/
  14. 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
  15. 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/
  16. The ability to add and update contact information is not

    a function of the API provided in this specification “ ”
  17. <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);
  18. 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 “ ”
  19. 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
  20. ▪ Telephony ▪ Messaging ▪ Contacts ▪ Camera ▪ Network

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

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

    C APIs] for the moment “ ”
  24. 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 “ ”
  25. 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
  26. 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