Web on TVTHE JOY AND (MOSTLY) PAIN OF TV DEVELOPMENTPatrick H. Lauke / jQuery Europe / Vienna / 23 February 2013
“web” on TV is nothing new
CE-HTMLXHTML 1.0, CSS 2.1, DOM Level 2,   Ajax, special APIs for TV            hbbtv.org
“Smart” TV = runs apps (optionally, has a web browser)
Apps●   native apps (Android, Apple TV, ...)●    packaged web apps (W3C widgets or similar)●    “in the cloud” (theyre URLs)
developing for TV
1. display size2. input mechanisms3. features/performance
1. display size2. input mechanisms3. features/performance
720×576 960×5401280×7201920×1080
CSS 2 Media Types?
Media typesall           brailleembossed      handheldprint         projectionscreen        speechtty           tv
<!-- mobile/tablet viewport sanity --><meta name=”viewport”      content=”width=device-width”><!-- but TVs dont support vi...
old-school browser sniffing       http://www.flickr.com/photos/timdorr/2096272747/
/* Still make it responsive/adaptive *//* Full HD */@media screen and (min-width: 1920px) { … }/* HD-Ready */@media screen...
●    large text and images●    large UI elements for interaction●    minimise scrolling
1. display size2. input mechanisms3. features/performance
●    mouse pointer (“magic” remotes)●    spatial navigation (Opera only?)●    D-pad key events
●    not very precise (giant mouse pointer)●    scrolling can be an issue
Opera-specific: spatial navigation  Shift + cursor keysfocusable elements and elements with mouseover / click
dont lose your focusa:focus, button:focus { … }
blah.addEventListener("keydown", function(e) {  …  switch (e.keyCode) {    case 37:       // left       break;    case 38:...
blah.addEventListener("keydown", function(e) {  …  e.preventDefault(); // prevent Operas spatnav}, useCapture);
var   VK_ENTER       =   13;   var   VK_RED        =   403;var   VK_PAUSE       =   19;   var   VK_GREEN      =   404;var ...
// abstracted VK_ globals … better?blah.addEventListener("keydown", function(e) {  …  switch (e.keyCode) {    case VK_LEFT...
w3.org/TR/DOM-Level-3-Events
// DOM Level 3 … better?blah.addEventListener("keydown", function(e) {  …  switch (e.key) {    case Left:       // left   ...
key repeats and lag[keydown]+ > keyup[keydown > keyup]+
minimise form input / text entry
1. display size2. input mechanisms3. features/performance
tl;drdesign like for mobiles … 5 years ago
www.webkit.org/perf/sunspider/...
CSS3 transitions / animations vs JS
paulirish.com/2012/why-moving-elements...
microjs.com
developer.lge.com
html5test.com
// Feature detect?var hasStorage = (function() {     try {       localStorage.setItem(mod, mod);       localStorage.remove...
dev-test.nemikor.com/web-storage/support-test
no magic bullet...
testing and debugging
developer.lge.com
developer.vieraconnect.com
developer.vieraconnect.com
samsungdforum.com
developers.google.com/tv
opera.com/business/tv/emulator
dev.opera.com/tv
console.maban.co.uk
@patrick_h_laukeslideshare.net/redux
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013
Upcoming SlideShare
Loading in...5
×

Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013

12,998

Published on

Published in: Technology
1 Comment
39 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,998
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
180
Comments
1
Likes
39
Embeds 0
No embeds

No notes for slide

Web on TV - the joy and (mostly) pain of TV development / jQuery Europe / Vienna 23.02.2013

  1. 1. Web on TVTHE JOY AND (MOSTLY) PAIN OF TV DEVELOPMENTPatrick H. Lauke / jQuery Europe / Vienna / 23 February 2013
  2. 2. “web” on TV is nothing new
  3. 3. CE-HTMLXHTML 1.0, CSS 2.1, DOM Level 2, Ajax, special APIs for TV hbbtv.org
  4. 4. “Smart” TV = runs apps (optionally, has a web browser)
  5. 5. Apps● native apps (Android, Apple TV, ...)● packaged web apps (W3C widgets or similar)● “in the cloud” (theyre URLs)
  6. 6. developing for TV
  7. 7. 1. display size2. input mechanisms3. features/performance
  8. 8. 1. display size2. input mechanisms3. features/performance
  9. 9. 720×576 960×5401280×7201920×1080
  10. 10. CSS 2 Media Types?
  11. 11. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  12. 12. <!-- mobile/tablet viewport sanity --><meta name=”viewport” content=”width=device-width”><!-- but TVs dont support viewport -->
  13. 13. old-school browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  14. 14. /* Still make it responsive/adaptive *//* Full HD */@media screen and (min-width: 1920px) { … }/* HD-Ready */@media screen and (min-width: 1280px) and (max-width: 1920px) { … }/* Smaller */@media screen and (max-width: 1280px) { … }
  15. 15. ● large text and images● large UI elements for interaction● minimise scrolling
  16. 16. 1. display size2. input mechanisms3. features/performance
  17. 17. ● mouse pointer (“magic” remotes)● spatial navigation (Opera only?)● D-pad key events
  18. 18. ● not very precise (giant mouse pointer)● scrolling can be an issue
  19. 19. Opera-specific: spatial navigation Shift + cursor keysfocusable elements and elements with mouseover / click
  20. 20. dont lose your focusa:focus, button:focus { … }
  21. 21. blah.addEventListener("keydown", function(e) { … switch (e.keyCode) { case 37: // left break; case 38: // up break; case 39: // right break; … }}, useCapture);// Fun fact: key codes can vary between devices!
  22. 22. blah.addEventListener("keydown", function(e) { … e.preventDefault(); // prevent Operas spatnav}, useCapture);
  23. 23. var VK_ENTER = 13; var VK_RED = 403;var VK_PAUSE = 19; var VK_GREEN = 404;var VK_PAGE_UP = 33; var VK_YELLOW = 405;var VK_PAGE_DOWN = 34; var VK_BLUE = 406;var VK_LEFT = 37; var VK_REWIND = 412;var VK_UP = 38; var VK_STOP = 413;var VK_RIGHT = 39; var VK_PLAY = 415;var VK_DOWN = 40; var VK_FAST_FWD = 417;var VK_0 = 48; var VK_INFO = 457;var VK_1 = 49; var VK_BACK = 461;var VK_2 = 50;var VK_3 = 51;var VK_4 = 52;var VK_5 = 53;var VK_6 = 54;var VK_7 = 55;var VK_8 = 56;var VK_9 = 57;
  24. 24. // abstracted VK_ globals … better?blah.addEventListener("keydown", function(e) { … switch (e.keyCode) { case VK_LEFT: // left break; case VK_UP: // up break; case VK_RIGHT: // right break; … }}, useCapture);
  25. 25. w3.org/TR/DOM-Level-3-Events
  26. 26. // DOM Level 3 … better?blah.addEventListener("keydown", function(e) { … switch (e.key) { case Left: // left break; case Up: // up break; case Right: // right break; … }}, useCapture);
  27. 27. key repeats and lag[keydown]+ > keyup[keydown > keyup]+
  28. 28. minimise form input / text entry
  29. 29. 1. display size2. input mechanisms3. features/performance
  30. 30. tl;drdesign like for mobiles … 5 years ago
  31. 31. www.webkit.org/perf/sunspider/...
  32. 32. CSS3 transitions / animations vs JS
  33. 33. paulirish.com/2012/why-moving-elements...
  34. 34. microjs.com
  35. 35. developer.lge.com
  36. 36. html5test.com
  37. 37. // Feature detect?var hasStorage = (function() { try { localStorage.setItem(mod, mod); localStorage.removeItem(mod); return true; } catch(e) { return false; }}());
  38. 38. dev-test.nemikor.com/web-storage/support-test
  39. 39. no magic bullet...
  40. 40. testing and debugging
  41. 41. developer.lge.com
  42. 42. developer.vieraconnect.com
  43. 43. developer.vieraconnect.com
  44. 44. samsungdforum.com
  45. 45. developers.google.com/tv
  46. 46. opera.com/business/tv/emulator
  47. 47. dev.opera.com/tv
  48. 48. console.maban.co.uk
  49. 49. @patrick_h_laukeslideshare.net/redux
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×