web apps on your tv - creating content for the opera tv store / tv hackfest / london / 27.11.2012

45
Web Apps on your TV CREATING CONTENT FOR THE OPERA TV STORE Patrick H. Lauke / TV Hackfest / London / 26 October 2012

Upload: patrick-lauke

Post on 15-May-2015

2.622 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

Web Apps on your TV CREATING CONTENT FOR THE OPERA TV STORE

Patrick H. Lauke / TV Hackfest / London / 26 October 2012

Page 2: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

issues with web on TV

Page 3: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

usability of “wild web”

Page 4: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 5: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

discoverability

Page 6: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 7: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

introducing the

Opera TV Store

Page 8: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 9: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

curated list ofTV-optimised web apps

Page 10: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

based on Opera SDKbut a separate standalone product

Page 11: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

distribution to different OEMsno need for separate app submissions

Page 12: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 13: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 14: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

built on web technologies

Page 15: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 16: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 17: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 18: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

browser asuniversal (meta)platform

Page 19: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 20: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

developing for TV

Page 21: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

1. input mechanism2. display size3. performance

Page 22: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

1. input mechanism2. display size3. performance

Page 23: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 24: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

● spatial navigation by default● handle key events directly ● minimise text entry

Page 25: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

blah.addEventListener("keydown", function(e) {

e.preventDefault();

}, useCapture);

Page 26: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

blah.addEventListener("keydown", function(e) {

if (VK_RED == e.keyCode) { … }

e.preventDefault();

}, useCapture);

Page 27: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

don't lose your focus

a:hover { … }

a:hover, a:focus { … }

Page 28: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

1. input mechanism2. display size3. performance

Page 29: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 30: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

● large text and images● large UI elements for interaction● minimise scrolling

Page 31: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

720×5761280×7201920×1080

Page 32: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

1. input mechanism2. display size3. performance

Page 33: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

● hardware acceleration?● avoid heavy JavaScript● keep animations (JS/CSS3/etc) minimal● space/memory extremely limited

Page 34: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

no magic bullet...

Page 35: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

testing and debugging

Page 36: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

Opera TV Emulatoropera.com/developer/tools

Page 37: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

opera.com/dragonfly

Page 38: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 39: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

dev.opera.com/tv

Page 40: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

publish.tvstore.opera.com

Page 41: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 42: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012

dev.opera.com/articles/view/testing-your-app-inside-the-opera-tv-store

Page 43: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012
Page 44: Web Apps on your TV - Creating content for the Opera TV Store / TV Hackfest / London / 27.11.2012