Your SlideShare is downloading. ×
0
Human APIs
                         expanding the mobile web
                             SWDC - June 3rd 2010


         ...
Thursday, June 3, 2010
We open the mobile web.




Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
JavaScript                            AJAX
                                FrontEnd
       Usability                UserEx...
Remember Risk?




                         http://news.bbc.co.uk/2/hi/technology/8552410.stm

Thursday, June 3, 2010
Remember Risk?




                         http://news.bbc.co.uk/2/hi/technology/8552410.stm

Thursday, June 3, 2010
Dec, 2009
                         1,802 millions
                             26.6 %


Thursday, June 3, 2010
The mobile web
                                           AdMob Requests

       20000000000


       15000000000


      ...
The mobile web
                                           AdMob Requests

       20000000000


       15000000000


      ...
The mobile web
                                           AdMob Requests

       20000000000


       15000000000


      ...
The reality

                    • Internet is growing (fast)
                    • Mobile is growing (fast)
             ...
The browser is the
                           central piece


Thursday, June 3, 2010
The browser is the
                          interface to the
                              internet


Thursday, June 3, 2...
71% of all modern
                           phones have a
                             browser
                          ...
IPv6

                         2 128




Thursday, June 3, 2010
There will be a lot of
              things we can talk to :)

                         (using a browser)
Thursday, June 3...
Thursday, June 3, 2010
Is JavaScript good
                              enough?


Thursday, June 3, 2010
Flash with
                         JavaScript?



Thursday, June 3, 2010
http://github.com/tobeytailor/gordon

Thursday, June 3, 2010
HTML5 Apps
                          or web apps as we know them




Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
New HTML Elements



Thursday, June 3, 2010
<input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">




                                    ...
High performance
                             graphics
                               WebGL



Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
Media



Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
JavaScript     HTTP




Thursday, June 3, 2010
JavaScript        HTTP
                         Accelerometer
                           Camera
                          ...
RFID
                          Bluetooth

          JavaScript        HTTP
                         Accelerometer
        ...
RFID
                         CSS     Bluetooth

          JavaScript               HTTP
                         HTML   A...
RFID
                         CSS     Bluetooth

          JavaScript               HTTP
                         HTML   A...
The Hype




Thursday, June 3, 2010
The Hype




                          o

Thursday, June 3, 2010
The Hype

                         The cloud



                                      o

Thursday, June 3, 2010
The Hype

                         The cloud              Location, etc.



                                      o

Thurs...
The Potential

                         The cloud                   Location, etc.



                                    ...
The Potential

                         The cloud                   Location, etc.



                                    ...
Use cases



Thursday, June 3, 2010
Transportation



Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
Health



Thursday, June 3, 2010
3311 Health/Fitness
           Apps in Apple app store


Thursday, June 3, 2010
HumanAPI




Thursday, June 3, 2010
HumanAPI




Thursday, June 3, 2010
Home automation



Thursday, June 3, 2010
http://digitalstrom.org




Thursday, June 3, 2010
http://home-pad.com




Thursday, June 3, 2010
How can we do this?



Thursday, June 3, 2010
Mobile SDKs




Thursday, June 3, 2010
Mobile SDKs


              Objective-C




Thursday, June 3, 2010
Mobile SDKs


              Objective-C    Java




Thursday, June 3, 2010
Mobile SDKs


              Objective-C    Java      ...

Thursday, June 3, 2010
How the magic happens




Thursday, June 3, 2010
How the magic happens




                                  Low level APIs

                    Camera Accelerometer Push ...
How the magic happens


                              Chromeless Browser




                                  Low level A...
How the magic happens


                              Chromeless Browser



                            browser.eval(“aler...
PhoneGap



Thursday, June 3, 2010
PhoneGap


                                    Chromeless Browser



                           browser.eval(“document.geo...
PhoneGap


                                    Chromeless Browser



                           browser.eval(“document.geo...
Android



        mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");




Thursday, June 3, 2010
iPhone/iPad



        jsCallBack = [[NSString alloc] initWithFormat:@"navigator.
                accelerometer._onAccelUp...
Example



Thursday, June 3, 2010
Thursday, June 3, 2010
Lowlevel APIs
                   For things you can’t do in the browser (yet)




                            The browser
...
Check this out



Thursday, June 3, 2010
Serverside JS



Thursday, June 3, 2010
Your house == DOM

        $(".living-room").delegate(".motion-sensor", "onmotion", function(){
          $(".living-room ...
Air Quality in Beijing
                              via Twitter:

                https://twitter.com/beijingair


Thursd...
Challenge



Thursday, June 3, 2010
Raphaël could do this!
Thursday, June 3, 2010
Getting started

                    • PhoneGap - http://phonegap.com
                    • http://blog.uxebu.com
        ...
Questions?
                           @nonken




Thursday, June 3, 2010
Upcoming SlideShare
Loading in...5
×

Human APIs, the future of mobile

4,694

Published on

In this talk I am looking at the potential of the browser, how we already today can expose custom APIs to mobile devices. Topics include Audio APIs, accessing Bluetooth from the browser, the browser in transportation and more.

Published in: Technology, Design

Transcript of "Human APIs, the future of mobile"

  1. 1. Human APIs expanding the mobile web SWDC - June 3rd 2010 Nikolai Onken uxebu Thursday, June 3, 2010
  2. 2. Thursday, June 3, 2010
  3. 3. We open the mobile web. Thursday, June 3, 2010
  4. 4. Thursday, June 3, 2010
  5. 5. Thursday, June 3, 2010
  6. 6. JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Thursday, June 3, 2010
  7. 7. Remember Risk? http://news.bbc.co.uk/2/hi/technology/8552410.stm Thursday, June 3, 2010
  8. 8. Remember Risk? http://news.bbc.co.uk/2/hi/technology/8552410.stm Thursday, June 3, 2010
  9. 9. Dec, 2009 1,802 millions 26.6 % Thursday, June 3, 2010
  10. 10. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Thursday, June 3, 2010
  11. 11. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Thursday, June 3, 2010
  12. 12. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Thursday, June 3, 2010
  13. 13. The reality • Internet is growing (fast) • Mobile is growing (fast) • Mobile internet is growing (fast!) Thursday, June 3, 2010
  14. 14. The browser is the central piece Thursday, June 3, 2010
  15. 15. The browser is the interface to the internet Thursday, June 3, 2010
  16. 16. 71% of all modern phones have a browser Tomi Ahonen Thursday, June 3, 2010
  17. 17. IPv6 2 128 Thursday, June 3, 2010
  18. 18. There will be a lot of things we can talk to :) (using a browser) Thursday, June 3, 2010
  19. 19. Thursday, June 3, 2010
  20. 20. Is JavaScript good enough? Thursday, June 3, 2010
  21. 21. Flash with JavaScript? Thursday, June 3, 2010
  22. 22. http://github.com/tobeytailor/gordon Thursday, June 3, 2010
  23. 23. HTML5 Apps or web apps as we know them Thursday, June 3, 2010
  24. 24. Thursday, June 3, 2010
  25. 25. Thursday, June 3, 2010
  26. 26. New HTML Elements Thursday, June 3, 2010
  27. 27. <input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput"> http://bit.ly/audio-api Thursday, June 3, 2010
  28. 28. High performance graphics WebGL Thursday, June 3, 2010
  29. 29. Thursday, June 3, 2010
  30. 30. Thursday, June 3, 2010
  31. 31. Media Thursday, June 3, 2010
  32. 32. Thursday, June 3, 2010
  33. 33. Thursday, June 3, 2010
  34. 34. Thursday, June 3, 2010
  35. 35. JavaScript HTTP Thursday, June 3, 2010
  36. 36. JavaScript HTTP Accelerometer Camera ... Thursday, June 3, 2010
  37. 37. RFID Bluetooth JavaScript HTTP Accelerometer Camera ... Thursday, June 3, 2010
  38. 38. RFID CSS Bluetooth JavaScript HTTP HTML Accelerometer Camera ... Thursday, June 3, 2010
  39. 39. RFID CSS Bluetooth JavaScript HTTP HTML Accelerometer Camera ... Thursday, June 3, 2010
  40. 40. The Hype Thursday, June 3, 2010
  41. 41. The Hype o Thursday, June 3, 2010
  42. 42. The Hype The cloud o Thursday, June 3, 2010
  43. 43. The Hype The cloud Location, etc. o Thursday, June 3, 2010
  44. 44. The Potential The cloud Location, etc. o Thursday, June 3, 2010
  45. 45. The Potential The cloud Location, etc. o Hardware Thursday, June 3, 2010
  46. 46. Use cases Thursday, June 3, 2010
  47. 47. Transportation Thursday, June 3, 2010
  48. 48. Thursday, June 3, 2010
  49. 49. Thursday, June 3, 2010
  50. 50. Health Thursday, June 3, 2010
  51. 51. 3311 Health/Fitness Apps in Apple app store Thursday, June 3, 2010
  52. 52. HumanAPI Thursday, June 3, 2010
  53. 53. HumanAPI Thursday, June 3, 2010
  54. 54. Home automation Thursday, June 3, 2010
  55. 55. http://digitalstrom.org Thursday, June 3, 2010
  56. 56. http://home-pad.com Thursday, June 3, 2010
  57. 57. How can we do this? Thursday, June 3, 2010
  58. 58. Mobile SDKs Thursday, June 3, 2010
  59. 59. Mobile SDKs Objective-C Thursday, June 3, 2010
  60. 60. Mobile SDKs Objective-C Java Thursday, June 3, 2010
  61. 61. Mobile SDKs Objective-C Java ... Thursday, June 3, 2010
  62. 62. How the magic happens Thursday, June 3, 2010
  63. 63. How the magic happens Low level APIs Camera Accelerometer Push Notifications Thursday, June 3, 2010
  64. 64. How the magic happens Chromeless Browser Low level APIs Camera Accelerometer Push Notifications Thursday, June 3, 2010
  65. 65. How the magic happens Chromeless Browser browser.eval(“alert(1);”) Low level APIs Camera Accelerometer Push Notifications Thursday, June 3, 2010
  66. 66. PhoneGap Thursday, June 3, 2010
  67. 67. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Android, iPhone, iPad, Nokia S60, Blackberry Thursday, June 3, 2010
  68. 68. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Android, iPhone, iPad, Nokia S60, Blackberry Thursday, June 3, 2010
  69. 69. Android mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")"); Thursday, June 3, 2010
  70. 70. iPhone/iPad jsCallBack = [[NSString alloc] initWithFormat:@"navigator. accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z]; [webView stringByEvaluatingJavaScriptFromString:jsCallBack]; Thursday, June 3, 2010
  71. 71. Example Thursday, June 3, 2010
  72. 72. Thursday, June 3, 2010
  73. 73. Lowlevel APIs For things you can’t do in the browser (yet) The browser For anything else :) Thursday, June 3, 2010
  74. 74. Check this out Thursday, June 3, 2010
  75. 75. Serverside JS Thursday, June 3, 2010
  76. 76. Your house == DOM $(".living-room").delegate(".motion-sensor", "onmotion", function(){   $(".living-room .lights").css("intensity", 0.75) }); http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en Thursday, June 3, 2010
  77. 77. Air Quality in Beijing via Twitter: https://twitter.com/beijingair Thursday, June 3, 2010
  78. 78. Challenge Thursday, June 3, 2010
  79. 79. Raphaël could do this! Thursday, June 3, 2010
  80. 80. Getting started • PhoneGap - http://phonegap.com • http://blog.uxebu.com • http://www.humanapi.org Thursday, June 3, 2010
  81. 81. Questions? @nonken Thursday, June 3, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×