Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

31.279 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ➤➤ http://ishbv.com/rockhardx/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 'The future Tv, in the present'.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  1. Web on TVTHE JOY AND (MOSTLY) PAIN OF TV DEVELOPMENTPatrick H. Lauke / jQuery Europe / Vienna / 23 February 2013
  2. “web” on TV is nothing new
  3. CE-HTMLXHTML 1.0, CSS 2.1, DOM Level 2, Ajax, special APIs for TV hbbtv.org
  4. “Smart” TV = runs apps (optionally, has a web browser)
  5. Apps● native apps (Android, Apple TV, ...)● packaged web apps (W3C widgets or similar)● “in the cloud” (theyre URLs)
  6. developing for TV
  7. 1. display size2. input mechanisms3. features/performance
  8. 1. display size2. input mechanisms3. features/performance
  9. 720×576 960×5401280×7201920×1080
  10. CSS 2 Media Types?
  11. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  12. <!-- mobile/tablet viewport sanity --><meta name=”viewport” content=”width=device-width”><!-- but TVs dont support viewport -->
  13. old-school browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  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. ● large text and images● large UI elements for interaction● minimise scrolling
  16. 1. display size2. input mechanisms3. features/performance
  17. ● mouse pointer (“magic” remotes)● spatial navigation (Opera only?)● D-pad key events
  18. ● not very precise (giant mouse pointer)● scrolling can be an issue
  19. Opera-specific: spatial navigation Shift + cursor keysfocusable elements and elements with mouseover / click
  20. dont lose your focusa:focus, button:focus { … }
  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. blah.addEventListener("keydown", function(e) { … e.preventDefault(); // prevent Operas spatnav}, useCapture);
  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. // 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. w3.org/TR/DOM-Level-3-Events
  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. key repeats and lag[keydown]+ > keyup[keydown > keyup]+
  28. minimise form input / text entry
  29. 1. display size2. input mechanisms3. features/performance
  30. tl;drdesign like for mobiles … 5 years ago
  31. www.webkit.org/perf/sunspider/...
  32. CSS3 transitions / animations vs JS
  33. paulirish.com/2012/why-moving-elements...
  34. microjs.com
  35. developer.lge.com
  36. html5test.com
  37. // Feature detect?var hasStorage = (function() { try { localStorage.setItem(mod, mod); localStorage.removeItem(mod); return true; } catch(e) { return false; }}());
  38. dev-test.nemikor.com/web-storage/support-test
  39. no magic bullet...
  40. testing and debugging
  41. developer.lge.com
  42. developer.vieraconnect.com
  43. developer.vieraconnect.com
  44. samsungdforum.com
  45. developers.google.com/tv
  46. opera.com/business/tv/emulator
  47. dev.opera.com/tv
  48. console.maban.co.uk
  49. @patrick_h_laukeslideshare.net/redux

×