max(imiliano) (@firt)man
GEARING UP
WITH GOOGLE GLASS
DEVELOPMENT
Zürich,Aug 29th, 2013
¡-­‐)
Thursday, August 29, 13
mobile+web developer
maximiliano
@firt
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
we’ll talk about glass
1- Experience
2- Glassware
3- Timeline
4- Browser
5- Code!
Thursday, August 29, 13
questions
yes, please
At the end or
during the conference
Thursday, August 29, 13
DISCLAIMER
Thursday, August 29, 13
Thursday, August 29, 13
HOLES
Thursday, August 29, 13
Thursday, August 29, 13
1- glass experience
Thursday, August 29, 13
quick video( )
Thursday, August 29, 13
MYTHS
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
Notifications on
your head
Thursday, August 29, 13
Notifications on
your head
Thursday, August 29, 13
Your content is
not so important
Thursday, August 29, 13
specs
nHD transparent
640x360
25" - 2.5m / 8  away
Thursday, August 29, 13
specs
Sensors
Thursday, August 29, 13
specs
Camera
Thursday, August 29, 13
specs
Multi-touch panel
Thursday, August 29, 13
specs
wifi
bluetooth
Thursday, August 29, 13
specs
Android 4.0
Thursday, August 29, 13
specs
bone conduction
transducer
Thursday, August 29, 13
quick demo( )
Thursday, August 29, 13
the experience
- different device
- not transparent apps
- limited AR
Thursday, August 29, 13
2- glassware
Thursday, August 29, 13
Thursday, August 29, 13
native
vs
web
Thursday, August 29, 13
today =
cloud
Thursday, August 29, 13
today =
cloud
Mirror API
Thursday, August 29, 13
tomorrow =
native
vs
cloud
Thursday, August 29, 13
tomorrow =
native GDK
vs
cloud Mirror API
Thursday, August 29, 13
quick demo( )
Thursday, August 29, 13
Thursday, August 29, 13
Thursday, August 29, 13
https
Thursday, August 29, 13
httpscontent
Thursday, August 29, 13
httpscontent
actions
Thursday, August 29, 13
https
http(s)
content
actions
Thursday, August 29, 13
glassware
Thursday, August 29, 13
glassware
Thursday, August 29, 13
glassware
- today vs tomorrow
- Mirror API
- GDK
- create a new architecture
Thursday, August 29, 13
3- timeline
Thursday, August 29, 13
timeline
past, now, future
Thursday, August 29, 13
quick demo( )
Thursday, August 29, 13
timeline
timeline items = card
Thursday, August 29, 13
timeline
card
Thursday, August 29, 13
timeline
standard card
pinned card
system card past
past
future
Thursday, August 29, 13
httpscontent
Thursday, August 29, 13
it's probable that the
user will never see our
card
(
)
Thursday, August 29, 13
timeline
content type
Thursday, August 29, 13
timeline
textcontent type
Thursday, August 29, 13
timeline
image
video
content type
Thursday, August 29, 13
timeline
htmlcontent type
Thursday, August 29, 13
timeline
card actions = menu items
Thursday, August 29, 13
timeline
menu items 101
1 or 2 words & icon
no arguments
system vs custom
Thursday, August 29, 13
How can I listen to
actions?
Thursday, August 29, 13
http(s)actions
Thursday, August 29, 13
How to reply?
Thursday, August 29, 13
httpscontent
Thursday, August 29, 13
timeline
contextual events
geolocation
Thursday, August 29, 13
timeline
contextual events
geolocation
share
Thursday, August 29, 13
timeline
contextual events
geolocation
share
launch "ok glass" menu
Thursday, August 29, 13
http(s)actions
Thursday, August 29, 13
timeline
Invocation voice commands
take a note
post an update
Thursday, August 29, 13
timeline
- card is the king
- menu items <> endpoint
- contextual events
- server-side intelligence
Thursday, August 29, 13
4- the browser
Thursday, August 29, 13
browser
invocation
google search
card's action
Thursday, August 29, 13
quick demo( )
Thursday, August 29, 13
browser
interaction
scroll
point and click
Thursday, August 29, 13
browser
responsive web design
mobile user agent
width: 427px
pixel ratio: 1.5
Thursday, August 29, 13
browser
html5
video, audio
devicemotion
scroll and touch events
no geo, speech, camera yet
Thursday, August 29, 13
browser
- better than it looks like
- experimental
- new ideas will come
- card + html5
Thursday, August 29, 13
5- code!
Thursday, August 29, 13
code!
Mirror API
OAuth 2.0
RESTful services
JSON
Thursday, August 29, 13
code!
1- Use HTTP
2- Use official APIs
Thursday, August 29, 13
new card
POST /mirror/v1/timeline HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer {auth token}
Content-Type: appli...
new card
$card = new Google_TimelineItem();
$card->setText("Hello World");
$parameters = array();
$service->timeline
->ins...
new card
{
 "kind": "glass#timelineItem",
 "id": "1234567890",
 "created": "2012-09-25",
 "updated": "2012-09-25",
 "text"...
html!
{
"html": "<h1>Hello world<h1>
<p>Sorry, no marquee support</p>
"
}
JSON
code!
Thursday, August 29, 13
code!
static content
all semantic containers
tables, lists
custom css
no <script> <link> <iframe>
html5 on cards
Thursday,...
map images
{
"html": "<h1>Your wife's location<h1>
<img src='glass://map?
w=240&h=360&marker=0;42.369590,-71.107132&m
arke...
menu items
{ "text": "Hello world",
"menuItems": [
    {
      "action": "REPLY"
    }
  ]
}
JSON
code!
Thursday, August 2...
code!
built-in menu items
Thursday, August 29, 13
code!
built-in menu items
share
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
read aloud
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
read aloud
delete
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
read aloud
delete
voice call
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
Thursday, August 29, 13
code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
view website
Thursday, August 29...
voice call
reply
toggle pin
view website
code!
built-in menu items
share
navigate to
read aloud
deleteYOU CAN CHANGE TITLE...
code!
bundles
Multi-page card
Different cards over time
Thursday, August 29, 13
I don't have a Glass!!!
Thursday, August 29, 13
I don't have a Glass!!!
Don't steal one
Thursday, August 29, 13
I don't have a Glass!!!
Don't steal one
Thursday, August 29, 13
I don't have a Glass!!!
Playground (official)
Thursday, August 29, 13
I don't have a Glass!!!
Glasssim.com
Thursday, August 29, 13
I don't have a Glass!!!
Xenologer for Android
Mirror API Emulator by Scarygami
Thursday, August 29, 13
I don't have a Glass!!!
At the end, you will need one
google.com/glass
Thursday, August 29, 13
code!
- mirror API: HTTP & JSON
- cards, menu items
- experimental emulation
Thursday, August 29, 13
6- what's next
Thursday, August 29, 13
what's next
- GDK
- Localization
- More Invocation Voice commands
For Glass
Thursday, August 29, 13
what's next
- developers.google.com/glass
- youtube.com/user/GoogleDevelopers
For You
Thursday, August 29, 13
wrapping up
Thursday, August 29, 13
glass
- understand the experience
- mirror api vs gdk vs browser
- Glassware cloud-based
- it's just the beginning
Thursda...
Thursday, August 29, 13
you can reach a good
experience
Pictures)from)freedigitalphotos.net)
Thanks!
firtman@gmail.com
@firt
firt.mobi/pmw
¡-­‐)
A...
Upcoming SlideShare
Loading in …5
×

Gearing Up Google Glass Development - August 2013

2,438 views

Published on

Slides for the talk given at Frontend Conference Zurich, Switzerland

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,438
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
22
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Gearing Up Google Glass Development - August 2013

  1. 1. max(imiliano) (@firt)man GEARING UP WITH GOOGLE GLASS DEVELOPMENT Zürich,Aug 29th, 2013 ¡-­‐) Thursday, August 29, 13
  2. 2. mobile+web developer maximiliano @firt Thursday, August 29, 13
  3. 3. Thursday, August 29, 13
  4. 4. Thursday, August 29, 13
  5. 5. we’ll talk about glass 1- Experience 2- Glassware 3- Timeline 4- Browser 5- Code! Thursday, August 29, 13
  6. 6. questions yes, please At the end or during the conference Thursday, August 29, 13
  7. 7. DISCLAIMER Thursday, August 29, 13
  8. 8. Thursday, August 29, 13
  9. 9. HOLES Thursday, August 29, 13
  10. 10. Thursday, August 29, 13
  11. 11. 1- glass experience Thursday, August 29, 13
  12. 12. quick video( ) Thursday, August 29, 13
  13. 13. MYTHS Thursday, August 29, 13
  14. 14. Thursday, August 29, 13
  15. 15. Thursday, August 29, 13
  16. 16. Thursday, August 29, 13
  17. 17. Thursday, August 29, 13
  18. 18. Thursday, August 29, 13
  19. 19. Thursday, August 29, 13
  20. 20. Thursday, August 29, 13
  21. 21. Thursday, August 29, 13
  22. 22. Thursday, August 29, 13
  23. 23. Notifications on your head Thursday, August 29, 13
  24. 24. Notifications on your head Thursday, August 29, 13
  25. 25. Your content is not so important Thursday, August 29, 13
  26. 26. specs nHD transparent 640x360 25" - 2.5m / 8  away Thursday, August 29, 13
  27. 27. specs Sensors Thursday, August 29, 13
  28. 28. specs Camera Thursday, August 29, 13
  29. 29. specs Multi-touch panel Thursday, August 29, 13
  30. 30. specs wifi bluetooth Thursday, August 29, 13
  31. 31. specs Android 4.0 Thursday, August 29, 13
  32. 32. specs bone conduction transducer Thursday, August 29, 13
  33. 33. quick demo( ) Thursday, August 29, 13
  34. 34. the experience - different device - not transparent apps - limited AR Thursday, August 29, 13
  35. 35. 2- glassware Thursday, August 29, 13
  36. 36. Thursday, August 29, 13
  37. 37. native vs web Thursday, August 29, 13
  38. 38. today = cloud Thursday, August 29, 13
  39. 39. today = cloud Mirror API Thursday, August 29, 13
  40. 40. tomorrow = native vs cloud Thursday, August 29, 13
  41. 41. tomorrow = native GDK vs cloud Mirror API Thursday, August 29, 13
  42. 42. quick demo( ) Thursday, August 29, 13
  43. 43. Thursday, August 29, 13
  44. 44. Thursday, August 29, 13
  45. 45. https Thursday, August 29, 13
  46. 46. httpscontent Thursday, August 29, 13
  47. 47. httpscontent actions Thursday, August 29, 13
  48. 48. https http(s) content actions Thursday, August 29, 13
  49. 49. glassware Thursday, August 29, 13
  50. 50. glassware Thursday, August 29, 13
  51. 51. glassware - today vs tomorrow - Mirror API - GDK - create a new architecture Thursday, August 29, 13
  52. 52. 3- timeline Thursday, August 29, 13
  53. 53. timeline past, now, future Thursday, August 29, 13
  54. 54. quick demo( ) Thursday, August 29, 13
  55. 55. timeline timeline items = card Thursday, August 29, 13
  56. 56. timeline card Thursday, August 29, 13
  57. 57. timeline standard card pinned card system card past past future Thursday, August 29, 13
  58. 58. httpscontent Thursday, August 29, 13
  59. 59. it's probable that the user will never see our card ( ) Thursday, August 29, 13
  60. 60. timeline content type Thursday, August 29, 13
  61. 61. timeline textcontent type Thursday, August 29, 13
  62. 62. timeline image video content type Thursday, August 29, 13
  63. 63. timeline htmlcontent type Thursday, August 29, 13
  64. 64. timeline card actions = menu items Thursday, August 29, 13
  65. 65. timeline menu items 101 1 or 2 words & icon no arguments system vs custom Thursday, August 29, 13
  66. 66. How can I listen to actions? Thursday, August 29, 13
  67. 67. http(s)actions Thursday, August 29, 13
  68. 68. How to reply? Thursday, August 29, 13
  69. 69. httpscontent Thursday, August 29, 13
  70. 70. timeline contextual events geolocation Thursday, August 29, 13
  71. 71. timeline contextual events geolocation share Thursday, August 29, 13
  72. 72. timeline contextual events geolocation share launch "ok glass" menu Thursday, August 29, 13
  73. 73. http(s)actions Thursday, August 29, 13
  74. 74. timeline Invocation voice commands take a note post an update Thursday, August 29, 13
  75. 75. timeline - card is the king - menu items <> endpoint - contextual events - server-side intelligence Thursday, August 29, 13
  76. 76. 4- the browser Thursday, August 29, 13
  77. 77. browser invocation google search card's action Thursday, August 29, 13
  78. 78. quick demo( ) Thursday, August 29, 13
  79. 79. browser interaction scroll point and click Thursday, August 29, 13
  80. 80. browser responsive web design mobile user agent width: 427px pixel ratio: 1.5 Thursday, August 29, 13
  81. 81. browser html5 video, audio devicemotion scroll and touch events no geo, speech, camera yet Thursday, August 29, 13
  82. 82. browser - better than it looks like - experimental - new ideas will come - card + html5 Thursday, August 29, 13
  83. 83. 5- code! Thursday, August 29, 13
  84. 84. code! Mirror API OAuth 2.0 RESTful services JSON Thursday, August 29, 13
  85. 85. code! 1- Use HTTP 2- Use official APIs Thursday, August 29, 13
  86. 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. 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. 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. 89. html! { "html": "<h1>Hello world<h1> <p>Sorry, no marquee support</p> " } JSON code! Thursday, August 29, 13
  90. 90. code! static content all semantic containers tables, lists custom css no <script> <link> <iframe> html5 on cards Thursday, August 29, 13
  91. 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. 92. menu items { "text": "Hello world", "menuItems": [     {       "action": "REPLY"     }   ] } JSON code! Thursday, August 29, 13
  93. 93. code! built-in menu items Thursday, August 29, 13
  94. 94. code! built-in menu items share Thursday, August 29, 13
  95. 95. code! built-in menu items share navigate to Thursday, August 29, 13
  96. 96. code! built-in menu items share navigate to read aloud Thursday, August 29, 13
  97. 97. code! built-in menu items share navigate to read aloud delete Thursday, August 29, 13
  98. 98. code! built-in menu items share navigate to read aloud delete voice call Thursday, August 29, 13
  99. 99. code! built-in menu items share navigate to read aloud delete voice call reply Thursday, August 29, 13
  100. 100. code! built-in menu items share navigate to read aloud delete voice call reply toggle pin Thursday, August 29, 13
  101. 101. code! built-in menu items share navigate to read aloud delete voice call reply toggle pin view website Thursday, August 29, 13
  102. 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. 103. code! bundles Multi-page card Different cards over time Thursday, August 29, 13
  104. 104. I don't have a Glass!!! Thursday, August 29, 13
  105. 105. I don't have a Glass!!! Don't steal one Thursday, August 29, 13
  106. 106. I don't have a Glass!!! Don't steal one Thursday, August 29, 13
  107. 107. I don't have a Glass!!! Playground (official) Thursday, August 29, 13
  108. 108. I don't have a Glass!!! Glasssim.com Thursday, August 29, 13
  109. 109. I don't have a Glass!!! Xenologer for Android Mirror API Emulator by Scarygami Thursday, August 29, 13
  110. 110. I don't have a Glass!!! At the end, you will need one google.com/glass Thursday, August 29, 13
  111. 111. code! - mirror API: HTTP & JSON - cards, menu items - experimental emulation Thursday, August 29, 13
  112. 112. 6- what's next Thursday, August 29, 13
  113. 113. what's next - GDK - Localization - More Invocation Voice commands For Glass Thursday, August 29, 13
  114. 114. what's next - developers.google.com/glass - youtube.com/user/GoogleDevelopers For You Thursday, August 29, 13
  115. 115. wrapping up Thursday, August 29, 13
  116. 116. glass - understand the experience - mirror api vs gdk vs browser - Glassware cloud-based - it's just the beginning Thursday, August 29, 13
  117. 117. Thursday, August 29, 13
  118. 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

×