The Next Generation of Social is in a Hangout
-
Upload
jonathan-beri -
Category
Technology
-
view
795 -
download
2
description
Transcript of The Next Generation of Social is in a Hangout
![Page 1: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/1.jpg)
Developers
![Page 2: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/2.jpg)
Amit FulayProduct Manager
The Next Generation of SocialIs in a Hangout
Jonathan BeriDeveloper Advocate
#io12
![Page 3: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/3.jpg)
Jonathan Beri
Developer Advocate, Google+jonathanberi.com/+
![Page 4: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/4.jpg)
Today’s Agenda
•The Hangouts Story
•Demos
•Code-Slingin’
4
![Page 6: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/6.jpg)
The Hangouts Story
![Page 7: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/7.jpg)
The Hangouts Story
7
+
Social Real Time
![Page 8: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/8.jpg)
8
YouTube
![Page 9: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/9.jpg)
9
Google Docs
![Page 10: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/10.jpg)
Launched Google+ Hangouts Platform
![Page 11: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/11.jpg)
Activities
![Page 12: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/12.jpg)
12
Aces Poker
![Page 13: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/13.jpg)
13
Scoot & Doodle
![Page 14: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/14.jpg)
Enhance Live Conversations
![Page 15: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/15.jpg)
15
Mustache
![Page 16: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/16.jpg)
16
Effects
![Page 17: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/17.jpg)
17
Cheer On
![Page 18: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/18.jpg)
Bring Hangouts to Your Apps
![Page 19: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/19.jpg)
19
SlideShare
![Page 20: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/20.jpg)
20
Cacoo
![Page 21: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/21.jpg)
21
Symphonical
Text
![Page 22: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/22.jpg)
Google+ Hangouts Platform
1.Build Activities inside hangouts
2.Build enhancements for live conversations
3.Bring Google+ Hangouts to your app
22
![Page 23: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/23.jpg)
Demos
![Page 24: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/24.jpg)
Hangouts are a New OpportunityHangout Apps are Something You Should be Building Today
![Page 25: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/25.jpg)
What Can You Do?Scenarios You Can Build into a Hangout App
![Page 26: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/26.jpg)
Show Who is Playing
26
![Page 27: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/27.jpg)
Watch While Someone Draws
27
![Page 28: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/28.jpg)
28
Use Your Face as a Controller
![Page 29: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/29.jpg)
Building Blocks of a Hangout AppHow You Can Integrate the Power of Hangouts
![Page 30: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/30.jpg)
JavaScript + Hangout Features
30
Your HTML/JavaScript hangout.js
![Page 31: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/31.jpg)
App.xml: Pure Web with a Sprinkle of 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
XML
![Page 32: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/32.jpg)
App.xml: Pure Web with a Sprinkle of 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
XML
![Page 33: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/33.jpg)
Anything you can do in an iFrame, you can do in a Hangout
but you can do so much more...
![Page 34: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/34.jpg)
JavaScript + Hangout Features
34
Your HTML/JavaScript hangout.js
![Page 35: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/35.jpg)
• Including hangout.js gives you access to many hangout features, including:- Participants- Data Channels- A/V- Effects- Metadata
hangout.js
<script src="//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1"></script>
35
JavaScript
![Page 36: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/36.jpg)
Code-Slingin’ TimeLet’s Build a Hangout App
![Page 37: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/37.jpg)
37
Guess the pastry
![Page 38: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/38.jpg)
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
![Page 39: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/39.jpg)
There’s a Lot More Possible
39
Code Lab: http://goo.gl/Ezt0v
![Page 40: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/40.jpg)
Insights to be SuccessfulDesign & UX Best Practices for Building Hangout Apps
![Page 41: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/41.jpg)
41
Identify Who is Playing with Profile Pictures and Overlays
Put People First
![Page 42: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/42.jpg)
42
Social is About Being Together
Make everything collaborative and synchronous
![Page 43: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/43.jpg)
43
Users Will Join When You Least Expect Them
There are tons Participant callbacks - use them liberally!
![Page 44: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/44.jpg)
Think about different ways you can group users
44
Playing Alongside Friends Can be Fun Too
![Page 45: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/45.jpg)
45
React Immediately, Respond in Real-Time
Use the Data Channels to keep your App in sync
![Page 46: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/46.jpg)
We are at the Cusp
46
![Page 47: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/47.jpg)
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
![Page 48: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/48.jpg)
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
![Page 49: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/49.jpg)
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
![Page 50: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/50.jpg)
<Questions?>https://developers.google.com/+/hangouts/
Jonathan Berijonathanberi.com/+
Amit Fulayhttp://goo.gl/HlOaO
#io12
![Page 51: The Next Generation of Social is in a Hangout](https://reader034.fdocuments.in/reader034/viewer/2022052321/5554b478b4c90559398b4689/html5/thumbnails/51.jpg)
Developers