Developing HTML5 apps for TV

4,633 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/

×