Tweet
Tweet

Slide 1

Slide 1 text

James Pearce

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Web iPhone Android

Slide 11

Slide 11 text

Device APIs

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

   Call  us

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

//  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); }

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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/

Slide 24

Slide 24 text

▪ Media Capture (forms) ▪ Media Capture (.getUserMedia) ▪ Contacts ▪ Battery Status ▪ Network Information ▪ Sensor ▪ Vibration ▪ Calendar ▪ Menu ▪ Permissions ▪ Media Capture (.device) ▪ Messaging ▪ Gallery ▪ System info

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

A few quick examples

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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/

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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/

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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/

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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);

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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 “ ”

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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 “ ”

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Use cases

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

https://github.com/jamesgpearce/compios

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Challenges & moving forward

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

http://rng.io

Slide 71

Slide 71 text

Core Mobile Web Platform http://coremob.org

Slide 72

Slide 72 text

@ Labs

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

James Pearce

Slide 75

Slide 75 text

▪ 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 /