Google Dev Fest Bacelona 11/2012

1. Google TV
GDG@BCN

2. GDG@BCN
What is Google TV
Developing for TV
Developing for Google TV
Developing Second screens
Adapting sites/webapps

3. What is Google TV

4. What is Google TV

5. What is Google TV

6. What is Google TV

7. What is Google TV

8. What is Google TV

9. TV

10. TV

11. TV

12. TV

13. GTV

14. GTV

15. GTV
px = dp * (dpi/160)

16. GTV
px = dp * (dpi/160)
dp=(px/dpi) * 160

17. GTV
px = dp * (dpi/160)
dp=(px/dpi) * 160
dp1 = (720 / 213) * 160
dp2 = (1080 / 320) * 160

18. GTV
px = dp * (dpi/160)
dp=(px/dpi) * 160
dp1 = (720 / 213) * 160
dp2 = (1080 / 320) * 160
dp1 = dp2

19. GTV

20. GTV
android.hardware.bluetooth android.hardware.sensor.barometer
android.hardware.camera android.hardware.sensor.compass
android.hardware.location.gps android.hardware.telephony
android.hardware.microphone android.hardware.touchscreen
android.hardware.nfc android.hardware.touchscreen.multitouch
android.hardware.sensor.accelerometer android.hardware.sensor.light

21. GTV

22. GTV

23. GTV

24. GTV

25. GTV
http://code.google.com/p/googletv-android-samples/source/browse/#git%2FLeftNavBarDemo
http://code.google.com/p/googletv-android-samples/source/browse/#git%2FLeftNavBarLibrary

26. GTV
private LeftNavBar mLeftNavBar;
...
private LeftNavBar getLeftNavBar() {
if (mLeftNavBar == null) {
mLeftNavBar = new LeftNavBar(this);
}
return mLeftNavBar;
}

27. GTV

28. GTV

29. GTV

30. GTV

31. GTV
<uses-feature android:name="android.hardware.touchscreen" android:
required="false"/>

32. GTV
<uses-feature android:name="android.hardware.touchscreen" android:
required="false"/>
<uses-feature android:name="com.google.android.tv" android:required="true"/>

33. GTV
<uses-feature android:name="android.hardware.touchscreen" android:
required="false"/>
<uses-feature android:name="com.google.android.tv" android:required="true"/>
<supports-screens android:largeScreens="true"/>

34. GTV
#F1F1F1
BOLD fonts
Dark background

35. GTV
#F1F1F1
BOLD fonts
Dark background
Short lines / Line Spacing

36. GTV
#F1F1F1
BOLD fonts
Dark background
Short lines / Line Spacing
UI feedback. StateListDrawable

37. GTV
#F1F1F1
BOLD fonts
Dark background
Short lines / Line Spacing
UI feedback. StateListDrawable
Low Volume
setRequestedOrientation(ActivityInfo.
SCREEN_ORIENTATION_PORTRAIT);

38. GTV
#F1F1F1
BOLD fonts
Dark background
Short lines / Line Spacing
UI feedback. StateListDrawable
Low Volume
setRequestedOrientation(ActivityInfo.
SCREEN_ORIENTATION_PORTRAIT);

39. Second-Screen Apps

40. Second-Screen Apps
Discovers a Google TV device (mDNS)

41. Second-Screen Apps
Discovers a Google TV device (mDNS)
Authenticates itself with the Google TV device.

42. Second-Screen Apps
private void sendKeyEvent(final int keyEvent) {
// create new Thread to avoid network operations on UI Thread
new Thread(new Runnable() {
public void run() {
anymoteSender.sendKeyPress(keyEvent);
}
}).start();

43. Second-Screen Apps
private void sendKeyEvent(final int keyEvent) {
// create new Thread to avoid network operations on UI Thread
new Thread(new Runnable() {
public void run() {
anymoteSender.sendKeyPress(keyEvent);
}
}).start();
final Intent intent = new Intent();
intent.setAction ("com.example.googletv.myApp.VIEW_ACTION");
anymoteSender.sendUrl (intent.toUri(Intent.URI_INTENT_SCHEME));

44. Second-Screen Apps
private void sendKeyEvent(final int keyEvent) {
// create new Thread to avoid network operations on UI Thread
new Thread(new Runnable() {
public void run() {
anymoteSender.sendKeyPress(keyEvent);
}
}).start();
final Intent intent = new Intent();
intent.setAction ("com.example.googletv.myApp.VIEW_ACTION");
anymoteSender.sendUrl (intent.toUri(Intent.URI_INTENT_SCHEME));
final Intent intent = new Intent(Intent.ACTION_VIEW,
Uri.parse("http://<webpage_url>");
anymoteSender.sendUrl (intent.toUri(Intent.URI_INTENT_SCHEME));

45. Second-Screen Apps
Google TV Remote: http://goo.gl/ViqXE

46. Chrome

47. Chrome
HTML5 / CSS3
jQuery - Clousure

48. Chrome
HTML5 / CSS3
jQuery - Clousure
Optimized Templates

49. Chrome

50. Q&A
References:
https://developers.google.com
http://code.google.com/p/googletv-android-samples
http://en.wikipedia.org/wiki/10-foot_user_interface
https://developers.google.com/tv/web/docs/spotlight
http://code.google.com/p/anymote-protocol/
https://code.google.com/p/google-tv-chrome-extensions/
https://developers.google.com/tv/android/docs/gtv_presentations
Iñaki Villar
inaki.seri@gmail.com
@inyaki_mwc
+Iñaki Villar