 So, what's up? My name is Mike, and we're going to be talking about each TML file on the... but actually, it's not related to each TML. It's not, because it says it got a script in UX and other weird things, and it follows lots of comments. So, I'm Mike, I live here in Austin, Texas, I work for Apple Software, which is a... I guess we're a Norwegian browser a little later. We're making browsers. And as of yesterday, I bought a new team on the Web standards team. I have no idea what my job is. My boss is traffic, so I'll let you know later. And I'm pretty fitness, I would say. That's not actually true. So, let's see if this works. So, let's just get started. This joke is funny every time I hear it. This one, we actually have to wait 30 seconds. So, here's kind of the rough outline of what I'm going to talk about. Just the history of Opera on TV, because I think it's kind of actually interesting to hear how we got into doing browsers for TVs and set-top boxes. I'm going to talk about kind of how this is something that you may be doing in the future, or if you just want to optimize your website or your web app for television. And then some tools that are available to make this easier, and then really briefly talk about this thing called the Opera TV Store. This is like a web app you want to make and try to monetize or whatever. So, this is going to be like the three-minute version of history. Did anyone ever own this thing? So, the Nintendo DS had a browser you could buy. This was a dedicated kind of cartridge. And we built this for Nintendo. They approached us and they said, okay, we need, we want a web browser and we're going to give you a graph and calculator if it surf the web. So, this was kind of like a really complex engineering challenge. Like, how do we surf the web with CPU, very little memory? So, it turns out it was doable. You had the browser there and the little DSI chip. But the thing on the top, that's a memory expansion pack. So, the DS was not capable of browsing the web, so you had to give it an extra deep megabytes of RAM in this x-ray before add-on. A couple years passed and we had this thing called the DSI. And this had built-in internet. You can see this little blue line, I think. Now it's the green line, which means you're connected to Wi-Fi. By then, the hardware was better. We could do internets. And that was happy. So, we interrupt the switch. But this is a Wii, which I have a web browser, which I think we originally had to buy up for a while. The Nintendo said, everyone gets to browse the web. And so, that one certainly was in a lot more households. And it was just kind of a fun experience, you know, pointing and browsing with a Wi-Mote. Kind of tedious to type in URLs and stuff, but actually a better experience than most TVs today. The fun part about the Wii, the entire UI, it's all done in HTML and CSS and JavaScript. So, everything you see here, you know, you pop in Skyward Sword, you want to play Zelda, you're actually running through the interface in HTML. And I hear there's some Easter eggs that a French colleague programmed in and Nintendo doesn't know about. They're just like so impossible to find no one's ever seen them, but that's the real reason. So, a quick little aside, there's this project on GitHub you can look it up. It's called MeeJS. This guy, Ryan, I don't know him. But he's kind of hacking this thing together where he's set it up. So, if you wanted to build a game, for example, that's just using the bold Wii browser in your Wi-Mote, you can create JavaScript-based games and fire vents. Here we have the pressed A button is fired. And so it's got support for multiple Wi-Motes. Pretty interesting. I'm curious to know if people ever kind of took this up and built Wii Internet games. That's not really what we're talking about though, but that's cool. Hit refresh. So, anyway, it's Opera Presto-based TVs in set-top boxes. There's a lot of them, and you probably don't know if you had one. For example, I had a Sony Blu-ray player that has an Opera TV in it. You wouldn't know that unless you ran the fine print. Wow, that's really exciting. I don't think I'm allowed to announce this, but there's like a Swedish meatball manufacturer that's going to have a smart TV that has Opera integrated. Yeah. Sorry, I don't know. Okay, so that's kind of like the three-minute version of Opera on TV. That was really fascinating. So this is the part, kind of the interesting bits where we might learn something. Okay, so the user experience of a... First of all, can you raise your hand if you have a smart TV or a TV that can browse the Internet? All right. Okay, I can't gauge the numbers. That was like 18%. For those watching the video, raise your hand if you've ever surfed the web on your TV a little bit less. It's terrible in my opinion. The interaction is just painful. UX is something that I think we need to really rethink and cater to the TV experience. This is what my browser looks like when I fired up on the Sony Blu-ray about six months ago. That's legit. Like someone in Japan said, this is a critic and probably a fantastic person. Enter URL, push the options button, and it gives you this link. And it's really painful, and then you've got this keyboard that pops up and you have to cycle through, and w-w-w-w. It's kind of like a control on a leash log on. Yeah. It's really painful with one finger. This is really the experience that we're used to when we're in front of a TV, right? I'm really proud of this image. TV is ultimately a social experience, right? You're sitting there with your significant other friends or kids, whatever, and you're collaboratively watching something. You're watching a show, you're playing video game. You're not sitting there to check your Facebook private messages. Have your mom come in or something. So keep that in mind as you're developing for TV. Certain types of content just fundamentally will not work. Twitter maybe. I still think that's a little weird. Like, publicly retweets together. Might be good. So that was like five minutes of UX. Just think about that. There's actually a ton of research done by video game manufacturers that you can read. Microsoft has done a ton of work and they published reports on this kind of stuff. But I'm not really a UX guy, so I haven't experienced it much today. Other than the fact that my experience is that right now it's super awkward. But it can't be nice. So you want to know what overscan is? Do you remember? Conflicts. Crisis notes. I know everyone by name. Excellent. So I love this image. This is one of the original design images for the Legend of Zelda on Nintendo powered a few years ago. You can see they were figuring out, okay, let's draw what this is going to look like. Here's a potential thing, but I can't really point to it. Yeah, I guess I can. You see this cross and you see this cross. There's one there and one here. This is them planning for overscan because TVs will display, I guess you could say different parts of the image that's being broadcast. Historically bits of information have been sent along on the side. That'll help the TV to do alignment or they would actually send metadata through that. And so there's this notion of overscan, right, where you have this action safe area, you have a title safe area, which is the middlemost. The core information should be. And then you have this other stuff, that could totally get cut off. If you're watching this parade, you don't care about the dragons, kens or whatever those are. You actually have to think about this when you're designing for TV because overscan is still a reality. I might have a flat screen TV. It's really cheap. But there's no reason for overscan to exist in 2012. It was on by default. So I went to w3.org in my web browser. I was trying to think of a really short URL because it's so flippin' hard to browse the web. So I go to w3.org and it's like, load me whole. What's going on? This is overscan. The header got chopped off. Took me a while to figure out how to turn that off. All of a sudden, bam, I know where I'm at. So you can imagine building your site and all your really important contact information and whatever is totally chopped off. So the recommendation that our UX group gives is you want to give a 10% all the way around padding. Kind of as a don't put anything important in there. So navigation, which is totally different, right? We're talking about how awkward it is. We don't really have touch yet. In the future, I think we'll have companion devices. But what we're nice with right now, we've got this piece of crap. It's remote control. If you're lucky, you'll have these four colored buttons on top which are kind of special magic buttons. But there's no guarantee that those exist. We'll talk about that in a second. But let me show you... Hang on a second. I've never heard of spatial navigation. This is... Hang on a second. So spatial navigation is what happens when you're navigating the web with your keyboard. And so this is also used in assistive technologies. This is how remote controls navigate the web. So in Opera, you can emulate this with Shift. Anyone can do this. Okay, I'm going to use Shift. You can see this kind of blue focus. We're getting weird paint artifacts because of the projector. So it looks like when you're using your TV, you're pushing the right, the left, the up, and the down. You can see how I'm interacting with that with spatial navigation. So you can actually control the behavior of that focus box where it goes. There's a CSS3 module called the user interface module. And it has these properties that we define which maybe aren't so well known because we really wouldn't interact with these unless you're in the TV context. We have this nav index, nav right, nav left, nav top, and nav bottom. And what you do is you give it an ID and basically what you're saying is if I'm on card A and I nav right, which maps to my right on my remote control, focus should hop to card B. So this is how I can control the clock wise or the counter clock wise movement of the card game. So another thing that's interesting about SPATNAV, spatial navigation is how cool kids say it, is it'll react to mouse over and click events. So you can write your code as if you weren't trying to do special things with remote controls, but it'll work. So if you look at this code, take a second to see what's going on. Nothing super complex. So I'm looping over the images, which are my cards. I'm going to have this as a log element, which is just kind of dump information. Basically I'm saying if anyone clicks on a card, apply a toggle class, a rotate class, sorry. And if anyone mouse is over, show this log. So let's, let's do a nod. So you can see the log changing. That's the mystery. That's the pot. And then if I hit enter, which is what happens on the remote control, that's the same as clicking. And it's really, this holds your applause. Thank you. Right, so there's actually an event, so I'm not going to go back to that. We'll come back to that in a second, right? But let's look at input. Okay, so remote control is awkward and weird, but there's actually ways that are defined by the W3C that you can have special events you can listen for in special key constants that are defined. So we'll look at the constants. So you have this vk up, vk right, down, left, et cetera. This is virtual key as it were. And so you can listen for these and you can inspect the key event. You can say, oh, if vk up was pushed, move your pony up, your pony game. So look at the comment. You can see you're guaranteed to have five of these, right? All TV remotes are going to have up, down, left, right, and enter. Exit is there. You can't really, it depends on the hardware. You can't really mess with it. But then you've got these optional things. Blue, red, green, and yellow. So check this out. Imagine a scenario where you have an amazing app. So you have an app. It's a cow, right? And you push the cow and you feed it. You don't push the cow, it dies. And you thought, oh, I have a green button, so I'm going to push the green button to feed it, right? Because that's like cows like grass. I haven't done any fact checking. I assume the cow is like grass. Right? And so you say, when you push the green button, the cow gets fed and that's awesome. You make billions of dollars. But it turns out half your user base doesn't have the green button and their cow's all died. You're a terrible person, right? So this is how you could do that. You could look at the key code. You could say, is this VK green or red constant present? Feed the cow. Like we said, that's not super safe. So you want to check if that exists. Feed the cow, et cetera. If not created in your UI, like something where they can navigate to and click, et cetera. So that was blazingly fast interaction. And that's CSS, the world of CSS, which is insane. So if, I think there's been a couple of talks about responsive design, that's like the hot new thing. It's been around for ever. It somehow got invented a few years ago. If you read the spec, it looks that there's this TV media type thing, hooray. I could serve special TV style sheets to my TV users. And it turns out that this, like forget this ever existed. You can't use this because TV is ignoring it. Google has said publicly, we'll never recognize this opera doesn't. I don't think we ever said it, we just don't. I mean, there's just too much content on the web that says media type on the screen. So if you hit your website and all of a sudden the TV is saying, hey, I'm on the screen, I'm on the TV. I'm not going to file a CSS and everything is broken. So you can't really use media queries for TV using the media attribute. And then you think about it and you look at all the various different kinds of resolutions for TV and you start to get angry because it's absurd the different resolutions, right? Absurd or awesome? There's ways to work around this though, right? So these are the three media queries that we've recommended or used in our own products. So you've got full HD, right? Whereas the main width is 19, 20 pixels. It does 9,000 pixels. You've got HD ready, which I think my crap TV is. I think that roughly translated the 720p full HD being 1080p. And then you have smaller, which are the old TVs. So you could really use these three, what do you guys call these break points? Is that right? Use these three break points to serve appropriate styles to the different devices that you have. Always well. I'm going to come back to this maybe, but it's possible to do profiling on your CSS. If you care, come talk to me later. So what's the story is with librarians on TVs, right? You remember when we were trying to do a browser for the DS, it was super hard. There wasn't a ton of memory. That's basically still the case for televisions. It's wild that my phone was super powerful, yet my giant TV is crappy. Does anyone know what this trend represents? Unless you were looking at this like two days ago. Yeah, so my friend Matthias, a brilliant kid, a Belgian developer, he tracks this. This is the size of jQuery. So I took this before, 1.9 came out. But if you look, so we have uncompressed, gzipped, minified, minified gzipped. If you look at the general trend, the library is getting rather hefty, right? Nearly 280k for jQuery. Obviously that's super dramatic because the green line is the one you're supposed to care about because we all minify gzipped or code, right? All of us, yes. That's what I thought. Point being, don't do this. This is actual code from an actual TV application and the customer came to us and said like, my application keeps crashing. What is going on? Nothing works. So if you look and you're like, okay, you're pushing megabytes of JavaScript to a graphic calculator, it's not actually going to work. Modern browsers on relatively nice hardware, this is fine. It's not the end of the world. The performance guy isn't going to upset that it works. But on TVs and phones, this isn't the nicest thing to do in the world. Right, because... So, what do you do? So Thomas folks made this micro-JSI, but the basic idea is you need smaller components, right? You don't need jQuery for a TV app. There's just too much there that's going on. If you needed a small bit binding library or you need some kind of selector library, you can find those. It's not even that hard to write your own. You guys saw like the four lines of code I had for my silly card game. We're just using native DOM APIs. We're adding classes for interaction, et cetera. You can check out the vanilla.js framework. It's pretty sweet. Okay, so that's just the part of the talk that you came for. That's the part of the talk about HTML5. But I'm mostly going to talk about how broken it is. So, a while ago, our good friend Dion, he wrote this blog post called HTML5 is a jewel that we need to cut into a little bit. I have no idea what that means. But I found this gift out of the diamond, so it worked. So, on your TV, this is stuff you do have, stuff that works, right? You've got basically ES5.1, so you can use all the fantastic stuff. ES5, you've got native binary data, you can push GTV, which is crazy, but you can do it. The performance is terrible, right? You've got typed arrays. So, we've got all this really cool JavaScript stuff that basically works. I've never run into a bug where you're like, oh, crap. It doesn't work. It's all there. The problem, as you might expect, is when you get to the DOM, the stuff breaks all over the place. So, storage is interesting. Estelle, in her talk, she was talking about a couple of the storage APIs you can use in a browser. It's exciting. I can store little bits of text for various mechanisms. It turns out this is different on TV, right? So, if you go to one of our websites, there's your web test. You look at your TV and you're like, hey, I've got local storage. That's fantastic. I'm going to store my app in there. And then you look and see how much you will actually store. I was actually pretty excited when I found out I've got a 47 pay. It's actually half of that, because local storage text stores UTF-16 in the browser. So, it's like half of what you're looking at. So, all right, 23k worth of strings. That's so bad. Some of my colleagues' TVs have zero. They'll just explode if you put anything in there. This is really up to the device integrator. So, the Sony Blu-ray player guys, they did a pretty good job, right? They hooked me up with Session Storage. Some of the other people might not think about it, or break it, whatever. Same thing goes with cookies. Cookies work. The weird thing we found was, I turned off your TV and you lost all your data, right? You lost your Session Storage, you lost everything in local storage, in Session Storage, you're hosed and you're frustrated. So, yeah, what's the solution? You have to kind of think back to yesterday when you were storing information on the server. Okay, because that's not, it's really the best solution there is for TV if you have critical functionality, right? So, the story for audio video is maybe less terrible. It really depends. The good news is all the TVs support H.264. It's all natively on the hardware. You don't have to worry about different versions, which is great news because that's a pain in the neck. Bad news is, for certain devices, you can only have one playing at a time, right? You can have side-by-side videos. So that's what we do, which perhaps is an issue for games. The sound effects have multiple audio effects. And sometimes the events misfire, which is kind of a pain. Okay, so those are kind of like the main things to keep in mind. All this stuff is documented in greater detail on our dev.opera.com blog. You can just go look for the TV stuff if you're interested. So in terms of tooling, so we make this thing called the Opera TV emulator. Which I think is pretty nice. If you don't have a smart TV, or even if you do, you probably still want to use this. We package this up as just a virtual box image. So you can just click on that and you're good to go. And with that, we've got this kind of... When you fire it up, it starts a local server. And you've got this little remote control emulator so you can test that all that stuff is working. Opera Drive and Fly, which is the name of our developer tools. You could do remote debugging against your TV emulator instance. So what that means is you connect it and then you're able to inspect from your browser what's appearing in theory on your TV, which is nice. So for example here, you can't see because it's tiny. I've manipulated. I've changed the name of the button to Shusha. Does anyone know who Shusha is? I can go back. So you click on your Shusha button. This joke goes really well. If you're there in the 80s. And then you've got a full rebel that you can do stuff. Which is sweet. So Drive and Fly works with the TV emulator. You can just Google that. I'll show you what it looks like in a second. But the TV store, so this exists. It's a thing. You can go here. This is kind of... It's an app store for TV apps, right? Let me show you. We're not going to wait for that. Let me show you what it looks like. The resolution sucks. I apologize. So these are the apps you have installed. This is my favorite app. We're going to play this one together. I have a six-year-old son, Pearson, who thinks this is the coolest thing in the world. He'll play our internet store. So this is called MathNet. This is kind of an example of... I think a super cool example of what an app on TV can be. How it can be interactive, interesting. You won't be able to see everything because of projector stuff. Let's start this game. I'm very confident about the game. So, you can't even see the app. Let me scroll. So this is King Rat. And it is, you have to solve this problem before the time runs out, or between five push-ups, right? So this is the remote control, and that's how you interact with it. Let's pretend this is 57 of crabs, and the rat hit us, and you go through, and you defeat bigger and bigger rats. This is really fun. If I watch a six-year-old, it gets stressed out about it. Okay, so let's go back. And then we can look at... So I'm just pushing my keyboard so that you can see this. This is spatial navigation that we talked about. Obviously, this TV store is all just built in HTML. Here you can, on your TV, you can shop around for more apps. You can try them out, etc. So this stuff is shipping today, out on the road players here in the US. It's shipping in various... I think it's in Brazil, in various other markets, but it's pretty cool. I want to say it's interesting, right? It could develop into something cool, so it's a place where you can experiment with... Maybe if you have a fun gap map, and it makes sense, you could probably port it to this, and, you know, have days worth of work. Essentially, so let's hop back over here. The architecture of this is really simple. So we have this portal dashboard, which is what you just saw as the TV store, and all the metadata, like screenshots for your app that's hosted on the upper side. Essentially, once people install your app, it's a .9-core server, so you control that, you know, that math planet that's running on, like, some Norwegian news kitchen, Fox's kitchen. So updates and stuff, you don't have to worry about resubmitting them. Maybe I shouldn't tell you guys that, right? Just like I pushed that. The TV browser is hot, directly to your server. Which I think is cool. It's a very simple architecture. And then we're working on this. Some of this is done now already, but, like, if you're into advertising, we can do that. We can do subscription-based billing, and things that could be syncing with your cable bill and so on. So there will be a way to make money off this. And so to get started, there will be templates online, which they're totally boring. There's a video template, an RSS template, RSS apps are the future. Right, just a little bit of CSS, it needs to look less crappy. So this is a super memorable URL, is where you can go a little bit more about those things. I don't design these things. Devopper.com TVs, there's a ton of articles that are really well-written, less flippant. Right, so... That's my talk. But that's the Norwegian word for thank you. So yeah, if you have a question or whatever, you can email me. If you like those kits, that's all you should look at. It's a nice capacity to do. All right, so thank you.