The document discusses the expanding capabilities of mobile web applications through the use of HTML5 and JavaScript APIs. It describes how PhoneGap allows accessing device capabilities like the camera from within a web browser, and how this could enable applications in areas like transportation, health, and home automation. The presentation envisions a future where the web browser acts as an interface to access the internet, cloud services, and device capabilities through a common set of APIs.

1. Human APIs
expanding the mobile web
SWDC - June 3rd 2010
Nikolai Onken
uxebu
Thursday, June 3, 2010

2. Thursday, June 3, 2010

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

4. Thursday, June 3, 2010

5. Thursday, June 3, 2010

6. JavaScript AJAX
FrontEnd
Usability UserExperience
CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource
Thursday, June 3, 2010

7. Remember Risk?
http://news.bbc.co.uk/2/hi/technology/8552410.stm
Thursday, June 3, 2010

8. Remember Risk?
http://news.bbc.co.uk/2/hi/technology/8552410.stm
Thursday, June 3, 2010

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

10. The mobile web
AdMob Requests
20000000000
15000000000
10000000000
5000000000
0
Jan. 2008 Mar. 2010
Thursday, June 3, 2010

11. The mobile web
AdMob Requests
20000000000
15000000000
10000000000
5000000000
0
Jan. 2008 Mar. 2010
Thursday, June 3, 2010

12. The mobile web
AdMob Requests
20000000000
15000000000
10000000000
5000000000
0
Jan. 2008 Mar. 2010
Thursday, June 3, 2010

13. The reality
• Internet is growing (fast)
• Mobile is growing (fast)
• Mobile internet is growing (fast!)
Thursday, June 3, 2010

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

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

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

17. IPv6
2 128
Thursday, June 3, 2010

18. There will be a lot of
things we can talk to :)
(using a browser)
Thursday, June 3, 2010

19. Thursday, June 3, 2010

20. Is JavaScript good
enough?
Thursday, June 3, 2010

21. Flash with
JavaScript?
Thursday, June 3, 2010

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

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

24. Thursday, June 3, 2010

25. Thursday, June 3, 2010

26. New HTML Elements
Thursday, June 3, 2010

27. <input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">
http://bit.ly/audio-api
Thursday, June 3, 2010

28. High performance
graphics
WebGL
Thursday, June 3, 2010

29. Thursday, June 3, 2010

30. Thursday, June 3, 2010

31. Media
Thursday, June 3, 2010

32. Thursday, June 3, 2010

33. Thursday, June 3, 2010

34. Thursday, June 3, 2010

35. JavaScript HTTP
Thursday, June 3, 2010

36. JavaScript HTTP
Accelerometer
Camera
...
Thursday, June 3, 2010

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

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

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

40. The Hype
Thursday, June 3, 2010

41. The Hype
o
Thursday, June 3, 2010

42. The Hype
The cloud
o
Thursday, June 3, 2010

43. The Hype
The cloud Location, etc.
o
Thursday, June 3, 2010

44. The Potential
The cloud Location, etc.
o
Thursday, June 3, 2010

45. The Potential
The cloud Location, etc.
o
Hardware
Thursday, June 3, 2010

46. Use cases
Thursday, June 3, 2010

47. Transportation
Thursday, June 3, 2010

48. Thursday, June 3, 2010

49. Thursday, June 3, 2010

50. Health
Thursday, June 3, 2010

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

52. HumanAPI
Thursday, June 3, 2010

53. HumanAPI
Thursday, June 3, 2010

54. Home automation
Thursday, June 3, 2010

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

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

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

58. Mobile SDKs
Thursday, June 3, 2010

59. Mobile SDKs
Objective-C
Thursday, June 3, 2010

60. Mobile SDKs
Objective-C Java
Thursday, June 3, 2010

61. Mobile SDKs
Objective-C Java ...
Thursday, June 3, 2010

62. How the magic happens
Thursday, June 3, 2010

63. How the magic happens
Low level APIs
Camera Accelerometer Push Notifications
Thursday, June 3, 2010

64. How the magic happens
Chromeless Browser
Low level APIs
Camera Accelerometer Push Notifications
Thursday, June 3, 2010

65. How the magic happens
Chromeless Browser
browser.eval(“alert(1);”)
Low level APIs
Camera Accelerometer Push Notifications
Thursday, June 3, 2010

66. PhoneGap
Thursday, June 3, 2010

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. 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. Android
mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");
Thursday, June 3, 2010

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

72. Thursday, June 3, 2010

73. Lowlevel APIs
For things you can’t do in the browser (yet)
The browser
For anything else :)
Thursday, June 3, 2010

74. Check this out
Thursday, June 3, 2010

75. Serverside JS
Thursday, June 3, 2010

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. Air Quality in Beijing
via Twitter:
https://twitter.com/beijingair
Thursday, June 3, 2010

78. Challenge
Thursday, June 3, 2010

79. Raphaël could do this!
Thursday, June 3, 2010

80. Getting started
• PhoneGap - http://phonegap.com
• http://blog.uxebu.com
• http://www.humanapi.org
Thursday, June 3, 2010

81. Questions?
@nonken
Thursday, June 3, 2010