Villa Square, one of the latest exploits of the VRT-medialab MediaSquare and MediaCRM teams, is a purpose-built platform for the popular live één-television program “Villa Vanthilt”. This platform is in many ways a pioneering second screen project and has received numerous positive feedback. We will present the stepping stones towards the Villa Square use cases and discuss the underlying technologies we have put to work. Come and see the mayhem HTML5 caused in the broadcast world.

1. Beyond the red button
Building second screen TV apps
#iminds
Text
Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe
www.vrtmedialab.be
@vrtmedialab

2. 1. Introduction
Text
Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

3. INTERACTIVE TV?

4. whats the problem

6. context change

7. what broadcasters want

8. so we started
brainstorming

9. the cycling race*
* de koers

11. also tested on humans*
* ook getest op mensen

12. diabetes test
h"p://ogomquiz.appspot.com/
12

13. diabetes test
13

14. diabetes test
14

15. EYEWITNESS test
h"p://ogomface.appspot.com/

17. 17

18. mediasquare*
* working title

21. APPS! APPS! APPS!

22. 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 ...)

24. mockup

29. working prototype
Demo

32. Magical

34. 4. villasquare

35. launched without apps

36. Apps! Apps! Apps!

38. ON AIR
36

39. 2. On air
Text
Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

40. super hero

43. 35.000 messages

44. 600 messages/episode

45. war room

46. ready for launch

47. DEMO@BOOTH

52. 15 kilobytes of fame

54. war room
on air
super hero

55. IT WORKS IN THE BROWSER

56. 3. Front end
Text
Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

57. INTERACTIVE TV FOR ALL VIEWERS

59. 32% IE7-IE8 USERS

60. 5.5% tablet USERS

61. tools to the rescue

62. COMPASS EXAMPLE

63. COMPASS EXAMPLE

64. COMPASS EXAMPLE

65. 2 finger scrolling, WTF?
iscroll, FTW!

67. a big mistake
65

68. 4. Back end
Text
Hendrik Dacquin Kasper Jordaens Bert Wijnants and Ilja Strobbe

69. 1. prototype
2. SKELETON
3. REALTIME
4. SCALING

70. 1. prototype

71. focus on your app
not the underlying
architecture

72. 1. prototype
2. SKELETON

73. we knew excellent
rails developers

74. 1. prototype
2. SKELETON
3. REALTIME

76. Activity

77. publish
Input
Handling
Activity

78. Redis
Pub/Sub
publish
Input
Handling
Activity

79. Redis
Pub/Sub
subscribe publish
Node.js Input
Socket.io Handling
Activity

80. Redis
Pub/Sub
subscribe publish
Node.js Input
Socket.io Handling
On Air App Villa.een.be ... Activity

81. 1. prototype
2. SKELETON
3. REALTIME
4. SCALING

83. Team

84. friends

85. co-produced with
Team

86. QUESTIONS?