Transcript
Page 1: Building second screen TV apps

Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

Building second screen TV appsBeyond the red button

Text

www.vrtmedialab.be@vrtmedialab

#iminds

Page 2: Building second screen TV apps

Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

1. IntroductionText

Page 3: Building second screen TV apps

INTERACTIVE TV?

Page 4: Building second screen TV apps

whats the problem

Page 5: Building second screen TV apps
Page 6: Building second screen TV apps

context change

Page 7: Building second screen TV apps

what broadcasters want

Page 8: Building second screen TV apps

so we startedbrainstorming

Page 9: Building second screen TV apps

the cycling race*

* de koers

Page 10: Building second screen TV apps
Page 11: Building second screen TV apps

also tested on humans*

* ook getest op mensen

Page 12: Building second screen TV apps

12

diabetes test

h"p://ogomquiz.appspot.com/

Page 13: Building second screen TV apps

13diabetes test

Page 14: Building second screen TV apps

14diabetes test

Page 15: Building second screen TV apps

EYEWITNESS test

h"p://ogomface.appspot.com/

Page 16: Building second screen TV apps
Page 17: Building second screen TV apps

17

Page 18: Building second screen TV apps

mediasquare*

* working title

Page 19: Building second screen TV apps
Page 20: Building second screen TV apps
Page 21: Building second screen TV apps

APPS! APPS! APPS!

Page 22: Building second screen TV apps

MediaSquare is a second screen platform for TV apps, to help primetime content consumers to interact digitally (talk about, having a dialogue, vote, poll, recommend, play games ...)

Page 23: Building second screen TV apps
Page 24: Building second screen TV apps

mockup

Page 25: Building second screen TV apps
Page 26: Building second screen TV apps
Page 27: Building second screen TV apps
Page 28: Building second screen TV apps
Page 29: Building second screen TV apps

Demo

working prototype

Page 30: Building second screen TV apps
Page 31: Building second screen TV apps
Page 32: Building second screen TV apps

Magical

Page 33: Building second screen TV apps
Page 34: Building second screen TV apps

4. villasquare

Page 35: Building second screen TV apps

launched without apps

Page 36: Building second screen TV apps

Apps! Apps! Apps!

Page 37: Building second screen TV apps
Page 38: Building second screen TV apps

36

ON AIR

Page 39: Building second screen TV apps

Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

2. On airText

Page 40: Building second screen TV apps

super hero

Page 41: Building second screen TV apps
Page 42: Building second screen TV apps
Page 43: Building second screen TV apps

35.000 messages

Page 44: Building second screen TV apps

600 messages/episode

Page 45: Building second screen TV apps

war room

Page 46: Building second screen TV apps

ready for launch

Page 47: Building second screen TV apps

DEMO@BOOTH

Page 48: Building second screen TV apps
Page 49: Building second screen TV apps
Page 50: Building second screen TV apps
Page 51: Building second screen TV apps
Page 52: Building second screen TV apps

15 kilobytes of fame

Page 53: Building second screen TV apps
Page 54: Building second screen TV apps

war room

super hero

on air

Page 55: Building second screen TV apps

IT WORKS IN THE BROWSER

Page 56: Building second screen TV apps

Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

3. Front end Text

Page 57: Building second screen TV apps

INTERACTIVE TV FOR ALL VIEWERS

Page 58: Building second screen TV apps
Page 59: Building second screen TV apps

32% IE7-IE8 USERS

Page 60: Building second screen TV apps

5.5% tablet USERS

Page 61: Building second screen TV apps

tools to the rescue

Page 62: Building second screen TV apps

COMPASS EXAMPLE

Page 63: Building second screen TV apps

COMPASS EXAMPLE

Page 64: Building second screen TV apps

COMPASS EXAMPLE

Page 65: Building second screen TV apps

2 finger scrolling, WTF?

iscroll, FTW!

Page 66: Building second screen TV apps
Page 67: Building second screen TV apps

65

a big mistake

Page 68: Building second screen TV apps

Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

4. Back end Text

Page 69: Building second screen TV apps

1. prototype

2. SKELETON

3. REALTIME

4. SCALING

Page 70: Building second screen TV apps

1. prototype

Page 71: Building second screen TV apps

focus on your appnot the underlying architecture

Page 72: Building second screen TV apps

1. prototype

2. SKELETON

Page 73: Building second screen TV apps

we knew excellentrails developers

Page 74: Building second screen TV apps

1. prototype

2. SKELETON

3. REALTIME

Page 75: Building second screen TV apps
Page 76: Building second screen TV apps

Activity

Page 77: Building second screen TV apps

publishInput

Handling

Activity

Page 78: Building second screen TV apps

RedisPub/Sub

publishInput

Handling

Activity

Page 79: Building second screen TV apps

RedisPub/Sub

subscribeNode.jsSocket.io

publishInput

Handling

Activity

Page 80: Building second screen TV apps

RedisPub/Sub

On Air App Villa.een.be ...

subscribeNode.jsSocket.io

publishInput

Handling

Activity

Page 81: Building second screen TV apps

1. prototype

2. SKELETON

3. REALTIME

4. SCALING

Page 82: Building second screen TV apps
Page 83: Building second screen TV apps

Team

Page 84: Building second screen TV apps

friends

Page 85: Building second screen TV apps

Teamco-produced with

Page 86: Building second screen TV apps

QUESTIONS?


Top Related