Slides for the talk given at Frontend Conference Zurich, Switzerland

1. max(imiliano) (@firt)man
GEARING UP
WITH GOOGLE GLASS
DEVELOPMENT
Zürich,Aug 29th, 2013
¡-­‐)
Thursday, August 29, 13

2. mobile+web developer
maximiliano
@firt
Thursday, August 29, 13

3. Thursday, August 29, 13

4. Thursday, August 29, 13

5. we’ll talk about glass
1- Experience
2- Glassware
3- Timeline
4- Browser
5- Code!
Thursday, August 29, 13

6. questions
yes, please
At the end or
during the conference
Thursday, August 29, 13

7. DISCLAIMER
Thursday, August 29, 13

8. Thursday, August 29, 13

9. HOLES
Thursday, August 29, 13

10. Thursday, August 29, 13

11. 1- glass experience
Thursday, August 29, 13

12. quick video( )
Thursday, August 29, 13

13. MYTHS
Thursday, August 29, 13

14. Thursday, August 29, 13

15. Thursday, August 29, 13

16. Thursday, August 29, 13

17. Thursday, August 29, 13

18. Thursday, August 29, 13

19. Thursday, August 29, 13

20. Thursday, August 29, 13

21. Thursday, August 29, 13

22. Thursday, August 29, 13

23. Notifications on
your head
Thursday, August 29, 13

24. Notifications on
your head
Thursday, August 29, 13

25. Your content is
not so important
Thursday, August 29, 13

26. specs
nHD transparent
640x360
25" - 2.5m / 8  away
Thursday, August 29, 13

27. specs
Sensors
Thursday, August 29, 13

28. specs
Camera
Thursday, August 29, 13

29. specs
Multi-touch panel
Thursday, August 29, 13

30. specs
wifi
bluetooth
Thursday, August 29, 13

31. specs
Android 4.0
Thursday, August 29, 13

32. specs
bone conduction
transducer
Thursday, August 29, 13

33. quick demo( )
Thursday, August 29, 13

34. the experience
- different device
- not transparent apps
- limited AR
Thursday, August 29, 13

35. 2- glassware
Thursday, August 29, 13

36. Thursday, August 29, 13

37. native
vs
web
Thursday, August 29, 13

38. today =
cloud
Thursday, August 29, 13

39. today =
cloud
Mirror API
Thursday, August 29, 13

40. tomorrow =
native
vs
cloud
Thursday, August 29, 13

41. tomorrow =
native GDK
vs
cloud Mirror API
Thursday, August 29, 13

42. quick demo( )
Thursday, August 29, 13

43. Thursday, August 29, 13

44. Thursday, August 29, 13

45. https
Thursday, August 29, 13

46. httpscontent
Thursday, August 29, 13

47. httpscontent
actions
Thursday, August 29, 13

48. https
http(s)
content
actions
Thursday, August 29, 13

49. glassware
Thursday, August 29, 13

50. glassware
Thursday, August 29, 13

51. glassware
- today vs tomorrow
- Mirror API
- GDK
- create a new architecture
Thursday, August 29, 13

52. 3- timeline
Thursday, August 29, 13

53. timeline
past, now, future
Thursday, August 29, 13

54. quick demo( )
Thursday, August 29, 13

55. timeline
timeline items = card
Thursday, August 29, 13

56. timeline
card
Thursday, August 29, 13

57. timeline
standard card
pinned card
system card past
past
future
Thursday, August 29, 13

58. httpscontent
Thursday, August 29, 13

59. it's probable that the
user will never see our
card
(
)
Thursday, August 29, 13

60. timeline
content type
Thursday, August 29, 13

61. timeline
textcontent type
Thursday, August 29, 13

62. timeline
image
video
content type
Thursday, August 29, 13

63. timeline
htmlcontent type
Thursday, August 29, 13

64. timeline
card actions = menu items
Thursday, August 29, 13

65. timeline
menu items 101
1 or 2 words & icon
no arguments
system vs custom
Thursday, August 29, 13

66. How can I listen to
actions?
Thursday, August 29, 13

67. http(s)actions
Thursday, August 29, 13

68. How to reply?
Thursday, August 29, 13

69. httpscontent
Thursday, August 29, 13

70. timeline
contextual events
geolocation
Thursday, August 29, 13

71. timeline
contextual events
geolocation
share
Thursday, August 29, 13

72. timeline
contextual events
geolocation
share
launch "ok glass" menu
Thursday, August 29, 13

73. http(s)actions
Thursday, August 29, 13

74. timeline
Invocation voice commands
take a note
post an update
Thursday, August 29, 13

75. timeline
- card is the king
- menu items <> endpoint
- contextual events
- server-side intelligence
Thursday, August 29, 13

76. 4- the browser
Thursday, August 29, 13

77. browser
invocation
google search
card's action
Thursday, August 29, 13

78. quick demo( )
Thursday, August 29, 13

79. browser
interaction
scroll
point and click
Thursday, August 29, 13

80. browser
responsive web design
mobile user agent
width: 427px
pixel ratio: 1.5
Thursday, August 29, 13

81. browser
html5
video, audio
devicemotion
scroll and touch events
no geo, speech, camera yet
Thursday, August 29, 13

82. browser
- better than it looks like
- experimental
- new ideas will come
- card + html5
Thursday, August 29, 13

83. 5- code!
Thursday, August 29, 13

84. code!
Mirror API
OAuth 2.0
RESTful services
JSON
Thursday, August 29, 13

85. code!
1- Use HTTP
2- Use official APIs
Thursday, August 29, 13

86. new card
POST /mirror/v1/timeline HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer {auth token}
Content-Type: application/json
Content-Length: 26
{ "text": "Hello world" }
HTTP
code!
Thursday, August 29, 13

87. new card
$card = new Google_TimelineItem();
$card->setText("Hello World");
$parameters = array();
$service->timeline
->insert($card, $parameters);
PHP
code!
Thursday, August 29, 13

88. new card
{
"kind": "glass#timelineItem",
"id": "1234567890",
"created": "2012-09-25",
"updated": "2012-09-25",
"text": "Hello world"
}
(just an example)
code!
Thursday, August 29, 13

89. html!
{
"html": "<h1>Hello world<h1>
<p>Sorry, no marquee support</p>
"
}
JSON
code!
Thursday, August 29, 13

90. code!
static content
all semantic containers
tables, lists
custom css
no <script> <link> <iframe>
html5 on cards
Thursday, August 29, 13

91. map images
{
"html": "<h1>Your wife's location<h1>
<img src='glass://map?
w=240&h=360&marker=0;42.369590,-71.107132&m
arker=1;42.36254,-71.08726 height=360
width=240>"
}
JSON
code!
Thursday, August 29, 13

92. menu items
{ "text": "Hello world",
"menuItems": [
{
"action": "REPLY"
}
]
}
JSON
code!
Thursday, August 29, 13

93. code!
built-in menu items
Thursday, August 29, 13

94. code!
built-in menu items
share
Thursday, August 29, 13

95. code!
built-in menu items
share
navigate to
Thursday, August 29, 13

96. code!
built-in menu items
share
navigate to
read aloud
Thursday, August 29, 13

97. code!
built-in menu items
share
navigate to
read aloud
delete
Thursday, August 29, 13

98. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
Thursday, August 29, 13

99. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
Thursday, August 29, 13

100. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
Thursday, August 29, 13

101. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
view website
Thursday, August 29, 13

102. voice call
reply
toggle pin
view website
code!
built-in menu items
share
navigate to
read aloud
deleteYOU CAN CHANGE TITLE AND ICON
Thursday, August 29, 13

103. code!
bundles
Multi-page card
Different cards over time
Thursday, August 29, 13

104. I don't have a Glass!!!
Thursday, August 29, 13

105. I don't have a Glass!!!
Don't steal one
Thursday, August 29, 13

106. I don't have a Glass!!!
Don't steal one
Thursday, August 29, 13

107. I don't have a Glass!!!
Playground (official)
Thursday, August 29, 13

108. I don't have a Glass!!!
Glasssim.com
Thursday, August 29, 13

109. I don't have a Glass!!!
Xenologer for Android
Mirror API Emulator by Scarygami
Thursday, August 29, 13

110. I don't have a Glass!!!
At the end, you will need one
google.com/glass
Thursday, August 29, 13

111. code!
- mirror API: HTTP & JSON
- cards, menu items
- experimental emulation
Thursday, August 29, 13

112. 6- what's next
Thursday, August 29, 13

113. what's next
- GDK
- Localization
- More Invocation Voice commands
For Glass
Thursday, August 29, 13

114. what's next
- developers.google.com/glass
- youtube.com/user/GoogleDevelopers
For You
Thursday, August 29, 13

115. wrapping up
Thursday, August 29, 13

116. glass
- understand the experience
- mirror api vs gdk vs browser
- Glassware cloud-based
- it's just the beginning
Thursday, August 29, 13

117. Thursday, August 29, 13

118. you can reach a good
experience
Pictures)from)freedigitalphotos.net)
Thanks!
firtman@gmail.com
@firt
firt.mobi/pmw
¡-­‐)
Ask me for 50% off
Thursday, August 29, 13