Developers
The Next Generation of SocialIs in a HangoutJonathan Beri        Amit FulayDeveloper Advocate   Product Manager           ...
Jonathan BeriDeveloper Advocate, Google+jonathanberi.com/+
Today’s Agenda             • The Hangouts Story             • Demos             • Code-Slingin’                           ...
Amit FulayProduct Manager, Google+http://goo.gl/HlOaO
The Hangouts Story
The Hangouts Story                     +          Social         Real Time                                     7
YouTube          8
Google Docs              9
Launched Google+ Hangouts Platform
Activities
Aces Poker             12
Scoot & Doodle                 13
Enhance Live Conversations
Mustache           15
Effects          16
Cheer On           17
Bring Hangouts to Your Apps
SlideShare             19
Cacoo        20
Symphonical              Text                     21
Google+ Hangouts Platform  1.Build Activities inside hangouts  2.Build enhancements for live conversations  3.Bring Google...
Demos
Hangouts are a New OpportunityHangout Apps are Something You Should be Building Today
What Can You Do?Scenarios You Can Build into a Hangout App
Show Who is Playing                      26
Watch While Someone Draws                            27
Use Your Face as a Controller                                28
Building Blocks of a Hangout AppHow You Can Integrate the Power of Hangouts
JavaScript + Hangout Features    Your HTML/JavaScript        hangout.js                                             30
App.xml: Pure Web with a Sprinkle of XML                                                                                  ...
App.xml: Pure Web with a Sprinkle of XML                                                                                  ...
Anything you can do in an iFrame, youcan do in a Hangoutbut you can do so much more...
JavaScript + Hangout Features    Your HTML/JavaScript        hangout.js                                             34
hangout.js• Including hangout.js gives you access to many hangout features, including:   - Participants   - Data Channels ...
Code-Slingin’ TimeLet’s Build a Hangout App
Guess the pastry                   37
What We’d Like• Show who’s playing   - List current participants• Track whose voted   - Record votes “somewhere”• Congratu...
There’s a Lot More Possible              Code Lab: http://goo.gl/Ezt0v                                              39
Insights to be SuccessfulDesign & UX Best Practices for Building Hangout Apps
Put People First    Identify Who is Playing with Profile Pictures and Overlays                                             ...
Social is About Being Together     Make everything collaborative and synchronous                                          ...
Users Will Join When You Least Expect Them    There are tons Participant callbacks - use them liberally!                  ...
Playing Alongside Friends Can be Fun Too       Think about different ways you can group users                              ...
React Immediately, Respond in Real-Time       Use the Data Channels to keep your App in sync                              ...
We are at the Cusp                     46
Next Steps• Get Started with Hangout Apps   - http://developers.google.com/+/hangouts• Promote Your App   - https://develo...
Credits• Slides    - 12: http://aceshangout.com/    - 13: http://scootdoodle.com/    - 19: http://www.slideshare.net/    -...
Credits• Live coding    - Pastry: http://flic.kr/p/9QwfyD    - Nyan Cat: http://nyan.cat• Slides    - 40: http://flic.kr/p/9...
<Questions?>https://developers.google.com/+/hangouts/Jonathan Beri                Amit Fulay            #io12jonathanberi....
Developers
Upcoming SlideShare
Loading in …5
×

The Next Generation of Social is in a Hangout

961 views
902 views

Published on

Make your apps come alive with live audio/video conversations using the Hangouts Platform API. Using the Google+ Hangouts API, you can develop collaborative apps that run inside of a Google+ Hangout.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
961
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Next Generation of Social is in a Hangout

  1. 1. Developers
  2. 2. The Next Generation of SocialIs in a HangoutJonathan Beri Amit FulayDeveloper Advocate Product Manager #io12
  3. 3. Jonathan BeriDeveloper Advocate, Google+jonathanberi.com/+
  4. 4. Today’s Agenda • The Hangouts Story • Demos • Code-Slingin’ 4
  5. 5. Amit FulayProduct Manager, Google+http://goo.gl/HlOaO
  6. 6. The Hangouts Story
  7. 7. The Hangouts Story + Social Real Time 7
  8. 8. YouTube 8
  9. 9. Google Docs 9
  10. 10. Launched Google+ Hangouts Platform
  11. 11. Activities
  12. 12. Aces Poker 12
  13. 13. Scoot & Doodle 13
  14. 14. Enhance Live Conversations
  15. 15. Mustache 15
  16. 16. Effects 16
  17. 17. Cheer On 17
  18. 18. Bring Hangouts to Your Apps
  19. 19. SlideShare 19
  20. 20. Cacoo 20
  21. 21. Symphonical Text 21
  22. 22. Google+ Hangouts Platform 1.Build Activities inside hangouts 2.Build enhancements for live conversations 3.Bring Google+ Hangouts to your app 22
  23. 23. Demos
  24. 24. Hangouts are a New OpportunityHangout Apps are Something You Should be Building Today
  25. 25. What Can You Do?Scenarios You Can Build into a Hangout App
  26. 26. Show Who is Playing 26
  27. 27. Watch While Someone Draws 27
  28. 28. Use Your Face as a Controller 28
  29. 29. Building Blocks of a Hangout AppHow You Can Integrate the Power of Hangouts
  30. 30. JavaScript + Hangout Features Your HTML/JavaScript hangout.js 30
  31. 31. App.xml: Pure Web with a Sprinkle of XML XML<?xml version=“1.0” encoding=“UTF-8” ?><Module> <ModulePrefs title=“Your App Name”> <Require feature=“rpc” /> <Require feature=“views” /> </ModulePrefs> <Content type=“html”> <!CDATA[ <script src=“//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1”></script> <!-- Your application code --> ]]> </Content></Module> 31
  32. 32. App.xml: Pure Web with a Sprinkle of XML XML<?xml version=“1.0” encoding=“UTF-8” ?><Module> <ModulePrefs title=“Your App Name”> <Require feature=“rpc” /> <Require feature=“views” /> </ModulePrefs> <Content type=“html”> <!CDATA[ <script src=“//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1”></script> <!-- Your application code --> ]]> </Content></Module> 32
  33. 33. Anything you can do in an iFrame, youcan do in a Hangoutbut you can do so much more...
  34. 34. JavaScript + Hangout Features Your HTML/JavaScript hangout.js 34
  35. 35. hangout.js• Including hangout.js gives you access to many hangout features, including: - Participants - Data Channels - A/V - Effects - Metadata JavaScript <script src="//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1"></script> 35
  36. 36. Code-Slingin’ TimeLet’s Build a Hangout App
  37. 37. Guess the pastry 37
  38. 38. What We’d Like• Show who’s playing - List current participants• Track whose voted - Record votes “somewhere”• Congratulate the winners - Web badge of honor 38
  39. 39. There’s a Lot More Possible Code Lab: http://goo.gl/Ezt0v 39
  40. 40. Insights to be SuccessfulDesign & UX Best Practices for Building Hangout Apps
  41. 41. Put People First Identify Who is Playing with Profile Pictures and Overlays 41
  42. 42. Social is About Being Together Make everything collaborative and synchronous 42
  43. 43. Users Will Join When You Least Expect Them There are tons Participant callbacks - use them liberally! 43
  44. 44. Playing Alongside Friends Can be Fun Too Think about different ways you can group users 44
  45. 45. React Immediately, Respond in Real-Time Use the Data Channels to keep your App in sync 45
  46. 46. We are at the Cusp 46
  47. 47. Next Steps• Get Started with Hangout Apps - http://developers.google.com/+/hangouts• Promote Your App - https://developers.google.com/+/hangouts/button• Attend the Hangouts Fireside Chat - https://developers.google.com/events/io/sessions/gooio2012/809/ 47
  48. 48. Credits• Slides - 12: http://aceshangout.com/ - 13: http://scootdoodle.com/ - 19: http://www.slideshare.net/ - 20: https://cacoo.com/ - 21: https://www.symphonical.com/ - 24: http://tabletopforge.com/ - 28: http://www.experimentsplus.com/details/donut-horns - 29: http://flic.kr/p/8syc8C - 37: http://flic.kr/p/9QwfyD 48
  49. 49. Credits• Live coding - Pastry: http://flic.kr/p/9QwfyD - Nyan Cat: http://nyan.cat• Slides - 40: http://flic.kr/p/9m9Nty - 41: http://goo.gl/qFQRP - 42: http://flic.kr/p/bAoSsK - 43: http://flic.kr/p/7qHfdt - 44: http://flic.kr/p/5jrwbw - 45: http://flic.kr/p/52D411 49
  50. 50. <Questions?>https://developers.google.com/+/hangouts/Jonathan Beri Amit Fulay #io12jonathanberi.com/+ http://goo.gl/HlOaO
  51. 51. Developers

×