Human APIs
                         expanding the mobile web
                             SWDC - June 3rd 2010


                                  Nikolai Onken
                                     uxebu



Thursday, June 3, 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                UserExperience

                         CSS     mobile
        Browser                            Web2.0
                         dojo
                 TouchScroll    OpenSource
Thursday, June 3, 2010
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


       10000000000


         5000000000


                         0
                               Jan. 2008                    Mar. 2010



Thursday, June 3, 2010
The mobile web
                                           AdMob Requests

       20000000000


       15000000000


       10000000000


         5000000000


                         0
                               Jan. 2008                    Mar. 2010



Thursday, June 3, 2010
The mobile web
                                           AdMob Requests

       20000000000


       15000000000


       10000000000


         5000000000


                         0
                               Jan. 2008                    Mar. 2010



Thursday, June 3, 2010
The reality

                    • Internet is growing (fast)
                    • Mobile is growing (fast)
                    • Mobile internet is growing (fast!)


Thursday, June 3, 2010
The browser is the
                           central piece


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


Thursday, June 3, 2010
71% of all modern
                           phones have a
                             browser
                              Tomi Ahonen

Thursday, June 3, 2010
IPv6

                         2 128




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

                         (using a browser)
Thursday, June 3, 2010
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">




                                      http://bit.ly/audio-api



Thursday, June 3, 2010
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
                              ...
Thursday, June 3, 2010
RFID
                          Bluetooth

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

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

          JavaScript               HTTP
                         HTML   Accelerometer
                                  Camera
                                     ...
Thursday, June 3, 2010
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

Thursday, June 3, 2010
The Potential

                         The cloud                   Location, etc.



                                        o

Thursday, June 3, 2010
The Potential

                         The cloud                   Location, etc.



                                        o
                                      Hardware


Thursday, June 3, 2010
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 Notifications


Thursday, June 3, 2010
How the magic happens


                              Chromeless Browser




                                  Low level APIs

                    Camera Accelerometer Push Notifications


Thursday, June 3, 2010
How the magic happens


                              Chromeless Browser



                            browser.eval(“alert(1);”)


                                   Low level APIs

                    Camera Accelerometer Push Notifications


Thursday, June 3, 2010
PhoneGap



Thursday, June 3, 2010
PhoneGap


                                    Chromeless Browser



                           browser.eval(“document.geolocation...”)


                                         Low level APIs

                    Camera Accelerometer Push Notifications
                                                    ...

                         Android, iPhone, iPad, Nokia S60, Blackberry
Thursday, June 3, 2010
PhoneGap


                                    Chromeless Browser



                           browser.eval(“document.geolocation...”)


                                         Low level APIs

                    Camera Accelerometer Push Notifications
                                                    ...

                         Android, iPhone, iPad, Nokia S60, Blackberry
Thursday, June 3, 2010
Android



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




Thursday, June 3, 2010
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
Example



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




                            The browser
                               For anything else :)


Thursday, June 3, 2010
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 .lights").css("intensity", 0.75)
        });




      http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en




Thursday, June 3, 2010
Air Quality in Beijing
                              via Twitter:

                https://twitter.com/beijingair


Thursday, June 3, 2010
Challenge



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

                    • PhoneGap - http://phonegap.com
                    • http://blog.uxebu.com
                    • http://www.humanapi.org


Thursday, June 3, 2010
Questions?
                           @nonken




Thursday, June 3, 2010

Human APIs, the future of mobile