JS on TV

@miketaylr, Opera Software

JS on TV

but actually, lots of stuff related to making webapps on TV

@miketaylr, Opera Software

HELLO MY NAME IS MIKE

Web Opener, Dev Relations & Site Compat.
Two time college dropout.
World's foremost living expert on the syntactic structure of non-standard 3rd person pronouns of Brazilian Portuguese dialects spoken in Piripiri, Piauí. LOL.

Maybe you know me from a few sites.*

*probably not

List of Things I'm Going to Talk About

History of Opera on TV
So like, how do I build a Webapp for TV
Tools
Opera TV Store

A Most Brief History of Opera on TV

An Aside

Wii.js by Ryan McGrath

				var wiimote = new Wii.Remote(1, {horizontal: true});
				 
				wiimote.when('pressed_a', function() {
				    alert('Wiimote #1 pressed the A Button!');
				});
				 
				Wii.listen();

okay.jpg

Opera is Everywhere

So like, how do I build a webapp for TV

UX

Overscan

Navigation

Spatial Navigation

Spatnav Demo

Directional Focus Navigation (CSS3 UI)

				#card-a {
				  nav-index: 1;
				  nav-right: #card-b;
				  nav-left: #card-c;
				}

See also nav-top & nav-bottom properties.

Mouseover & Click events

				var cards = document.querySelectorAll('img'),
				    log = document.getElementById('log').querySelector('span');
				 
				Array.prototype.forEach.call(cards, function(card){
				    card.onclick* = function(){this.classList.toggle('rotate')};
				    card.onmouseover* = showLog;
				});

*But really, just use addEventListener or Rick Waldron will come after you.

Spatial Navigation & Events

Spatnav Demo, again

Input

Remote Control Key Events

Hardware key	Key code constant	Comment
↑	VK_UP	Always available*
→	VK_RIGHT	Always available*
↓	VK_DOWN	Always available*
←	VK_LEFT	Always available*
Confirm/Select/OK	VK_ENTER	Always available*
Exit	N/A	Always available (handled by native firmware)
Back/Return	VK_BACK_SPACE	Optional but recommended
BLUE	VK_BLUE	Optional but recommended
RED	VK_RED	Optional but recommended
GREEN	VK_GREEN	Optional but recommended
YELLOW	VK_YELLOW	Optional but recommended

Remote Control Key Events

				function handler(e){
				  if (e.keyCode == VK_RED){
				    amazingRedButtonFn();
				  }
				}

Remote Control Key Events, be safe!

				function handler(e){
				  if (('VK_RED' in window)&&(e.keyCode == VK_RED)){
				    amazingRedButtonFn();
				  }
				}

CSS

Media Queries

				media="tv"

Google TV's browser will not respond to the TV media type, because there are enough 'screen' stylesheets on the web that doing so would produce too much breakage for Gtv users.

Basically useless.

Usable Media Queries

Full HD

				<link rel="stylesheet" media="screen and (min-width: 1920px)" href="...">

HD-Ready

				<link rel="stylesheet" media="screen and (min-width: 1280px)
					                 and (max-width: 1920px)" href="...">

Smaller

				<link rel="stylesheet" media="screen and (max-width: 1280px)" href="...">

Libraries

Don't do this.

				<script src="/s/jquery-1.7.1.min-core-ord1.js"</script>
				<script> jQuery.noConflict(); </script>
				<script src="/s/mootools-1.2.5-core-nc.js"></script>
				<script src="/s/mootools-1.2-more-nc.js"></script>
				<script src="/s/swfobject.js"></script>
				<script src="/s/global.js"></script>
				<script src="/s/nav.js"></script>