Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developing HTML5 apps for TV

4,694 views

Published on

Published in: Technology, Business

Developing HTML5 apps for TV

  1. 1. Developing HTML5 apps for TV Luz Caballero @gerbille
  2. 2. • user interaction• standards support• hardware/network performance
  3. 3. • user interaction
  4. 4. button { position:absolute }button#b1 {    top:0; left:50%;    nav-index:1;    nav-right:#b2; nav-left:#b4;    nav-down:#b2; nav-up:#b4;}button#b2 { b1    top:50%; left:100%;    nav-index:2;    nav-right:#b3; nav-left:#b1;    nav-down:#b3; nav-up:#b1; b4 b2}button#b3 {    top:100%; left:50%; b3    nav-index:3;    nav-right:#b2; nav-left:#b4;    nav-down:#b4; nav-up:#b2;}    button#b4 {    top:50%; left:0;    nav-index:4;    nav-right:#b1; nav-left:#b3;    nav-down:#b3; nav-up:#b1;}
  5. 5. a:hover { /*styles*/ } a:focus, a:hover { /*styles*/ }
  6. 6. :focus { background: #0f0; outline: 0 solid; }
  7. 7. get creative ;)
  8. 8. navigator.userAgentmakes me a sad panda
  9. 9. media="tv" is not ready yet
  10. 10. 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 than HD-ready:<link rel="stylesheet" media="screen and (max-width: 1280px)"href="...">
  11. 11. single window browsing
  12. 12. text and fonts
  13. 13. color considerations
  14. 14. • standards support
  15. 15. <video src="/path/to/video.mp4"></video><audio src="/path/to/audio.mp3"></audio><video>    <source src="/path/to/video.mp4" type="video/mp4"></video><audio>    <source src="/path/to/audio.mp3" type="audio/mp3"></audio>
  16. 16. • hardware/network performance
  17. 17. large JS frameworks < custom optimized scripts < CSS animations
  18. 18. • Dragonfly, Opera’s debugger: http://www.opera.com/dragonfly/• Opera TV emulator: http://www.opera.com/business/tv/emulator/ & http://dev.opera.com/articles/view/opera-tv-emulator-user-guide/
  19. 19. http://www.opera.com/business/tv/store/
  20. 20. http://dev.opera.com/tv Luz Caballero @gerbille
  21. 21. Image Credits• Worship me http://www.flickr.com/photos/bdunnette/2072709902• TV http://www.flickr.com/photos/41836833@N06/4935804220/• Watching TV and joking around... http://www.flickr.com/photos/wonderlane/5351266905/• Yellow wall! http://www.flickr.com/photos/maheshkhanna/5876399305/• an evening playing http://www.flickr.com/photos/wonderlane/5351266905/•Old TV - Time Tunnel - Cameron Highland http://www.flickr.com/photos/liewcf/2427204350/• Screen shot 2011-08-12 at 4.54.52 PM http://www.flickr.com/photos/kylemcdonald/6035127581/• Brainless http://www.flickr.com/photos/blogography/5468835030/

×