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

Patrick H. Lauke / Apps World / London / 29 November 2011

Web Evangelist at Opera

Opera – one browser on many devices

issues with web on TV

usability of “wild web”

discoverability

introducing the

Opera TV Store

curated list ofTV-optimised web apps

based on Opera SDKbut a separate standalone product

distribution to different OEMsno need for separate app submissions

built on web technologies

browser asuniversal platform

developing for TV

1. input mechanism2. display size3. performance

1. input mechanism2. display size3. performance

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

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

…

e.preventDefault();

}, useCapture);

<!-- Optional script, provides keycode constants -->

<script src="http://tv.opera.com/js-api/api.js"></script>

…

<script>

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

…

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

…

e.preventDefault();

}, useCapture);

</script>

don't lose your focus

a:hover { … }

a:hover, a:focus { … }

opera.app.close()

1. input mechanism2. display size3. performance

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

720×5761280×7201920×1080

1. input mechanism2. display size3. performance

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

no magic bullet...

testing and debugging

Opera TV Emulatoropera.com/developer/tools

opera.com/dragonfly

dev.opera.com/tv

publish.tvstore.opera.com

$€¥₤

● free to submit● advertising (AdMarvel integration)● subscription services● payment API Q2-Q3

Opera TV Storelaunching at CES 2012

www.opera.com/developerpatrick.lauke@opera.com