Pro Yearly is on sale from $80 to $50! »

Vreemde browsers @ Fronteers

Vreemde browsers @ Fronteers

A talk about weird browsers in smart tv's, consoles and e-books. Presented during a Fronteers meeting at VI company in Rotterdam. Sorry dutch only.

De023a9aff4c7a5ede3a81e8c76f17b5?s=128

Niels Leenheer

June 03, 2015
Tweet

Transcript

  1. ?vreemde browsers? fronteers — 3 juni 2015

  2. 402 
 Edge 396 
 Safari 8 526 
 Chrome

    43 467 
 Firefox 38 555 0 336 
 Internet Explorer 11 resultaten van desktop-browsers op html5test.com
  3. 402 Edge 396 Safari 8 526 
 Chrome 43 467

    
 Firefox 38 555 0 336 Internet Explorer 11 resultaten van desktop-browsers op html5test.com
  4. 402 
 Edge 396 Safari 8 526 Chrome 43 467

    Firefox 38 555 0 336 Internet Explorer 11 resultaten van desktop-browsers op html5test.com 16 
 Internet Explorer 6
  5. None
  6. ?vreemde browsers?

  7. browsers en apparaten die niet 
 aan de huidige verwachtingen

    voldoen
  8. ?vreemde browsers?

  9. ?vreemde browsers?

  10. game consoles

  11. portable game consoles

  12. smart tv’s

  13. e-readers

  14. smartwatches

  15. fotocamera’s

  16. auto’s Andre Jay Meissner

  17. vergelijkbaar met mobiel 
 vóór de komst van de iphone

    en android iedereen doet maar wat
  18. None
  19. None
  20. smart tv’s en consoles

  21. None
  22. televisie-browsers zijn best goed de laatste generatie televisies 
 gebruikt

    besturingssystemen die 
 afkomstig zijn van mobiel
  23. 443 
 LG WebOS 281 
 Google TV 238 


    LG Netcast 465 
 Samsung Tizen 449 
 Opera Devices 301 
 Panasonic
 Viera resultaten van smart tv’s op html5test.com 555 0 414 
 Panasonic
 Firefox OS 414 
 Samsung
 2014
  24. 328 
 Playstation 4 53 
 Playstation 3 328 


    Playstation TV 98 
 Xbox 360 286 
 Xbox One 265 
 Wii U 66 
 Wii 555 0 resultaten van console’s op html5test.com
  25. None
  26. None
  27. None
  28. None
  29. 1 bediening

  30. het grootste probleem van 
 televisie-browsers is de bediening

  31. navigatie (zonder muis of touchscreen)

  32. d-pad

  33. navigeren met de d-pad

  34. maar het kan erger: de cursor sturen met de pijltjestoetsen

  35. alternatieven

  36. analoge controllers

  37. afstandbediening met trackpad

  38. afstandbediening met airmouse

  39. second screen

  40. veel fabrikanten brengen ook apps uit voor de bediening van

    de smart tv, console of set-top box
  41. None
  42. None
  43. None
  44. tekstinvoer (zonder toetsenbord)

  45. d-pads

  46. tekst invoeren met de d-pad

  47. alternatieven

  48. afstandsbedieningen met toetsenbord

  49. draadloze toetsenborden

  50. en wederom apps

  51. None
  52. None
  53. gesture control (als een gek in de lucht zwaaien)

  54. navigeren met gesture control

  55. kunnen we deze invoermethodes 
 rechtstreeks gebruiken in javascript?

  56. de d-pad misschien

  57. keyboard events window.addEventListener("keypress", function(e) {
 e.preventDefault(); // no navigation
 ...

    }); 1
  58. de gamepad misschien

  59. de gamepad api var gamepads = navigator.getGamepads();
 for (var i

    = 0; i < gamepads.length; i++) {
 ...
 } 1
  60. wii u api window.setInterval(function() {
 var state = window.wiiu.gamepad.update();
 ...

    }, 100); 2
  61. de webcam nee*

  62. gestures nee*

  63. 2 het verschil tussen een televisie en een monitor

  64. overscan (laten we het even moeilijk maken)

  65. vanwege historische redenen laten televisies 
 de randen van het

    beeld niet zien
  66. het beeld dat via hdmi binnenkomt 
 wordt door de

    televisie vergroot met 5% 1920 pixels
  67. het beeld dat via hdmi binnenkomt 
 wordt door de

    televisie vergroot met 5% 1920 pixels
  68. daarna wordt het beeld bijgesneden 
 tot 1920 bij 1080

    pixels
  69. daarna wordt het beeld bijgesneden 
 tot 1920 bij 1080

    pixels
  70. overscan zorgt voor onscherp beeld +5%

  71. oplossing 1 overscan-correctie

  72. de browser gebruikt 
 de randen van het beeld niet

    1920 pixels
  73. het beeld zal door de televisie 
 worden vergroot met

    ongeveer 5% 1920 pixels
  74. de inhoud is nu volledig zichtbaar,
 de zwarte randen zijn

    verdwenen
  75. maar niet elke televisie vergroot exact 5%, 
 dit kan

    per merk en model verschillen
  76. configureer de juiste overscan-correctie
 in de systeeminstellingen

  77. de playstation 4 laat in fullscreen-mode
 de browser altijd zonder

    overscan-correctie zien
  78. de playstation 4 laat in fullscreen-mode
 de browser altijd zonder

    overscan-correctie zien
  79. oplossing 2 geen overscan

  80. het is soms mogelijk om overscan 
 uit te zetten

    bij televisies dit heet ‘screen fit’, ‘pixel perfect’ of ‘just scan’
  81. de playstation 3 laat de browser 
 altijd met overscan-correctie

    zien
  82. de viewport (heeft iemand aspirine bij zich?)

  83. de visual viewport bepaalt welk gedeelte van de website zichtbaar

    is gemeten in 
 device pixels de visual viewport
  84. de visual viewport bepaalt welk gedeelte van de website zichtbaar

    is gemeten in 
 device pixels de visual viewport
  85. de visual viewport de visual viewport bepaalt welk gedeelte van

    de website zichtbaar is gemeten in 
 device pixels
  86. de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
  87. de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
  88. de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
  89. iedere smart tv, console of set-top box heeft 
 z’n

    eigen standaard layout viewport-breedte tussen 800 en 1920 css pixels
  90. met de ‘meta viewport’ is het mogelijk om 
 breedte

    van de layout viewport te veranderen <meta name="viewport" content=“width=device-width"> <meta name="viewport" content="width=1024"> fysieke device pixels device scale factor
  91. probleem:
 meta viewport wordt niet ondersteund geen mogelijkheid de layout

    viewport gelijk te 
 krijgen tussen verschillende browsers
  92. probleem:
 device pixel ratio wordt niet ondersteund dus geen goede

    ondersteuning voor het tonen van
 afbeeldingen die bij de resolutie van het scherm passen
  93. nintendo wii 800 pixels

  94. nintendo wii u 980 pixels

  95. lg webos 960 pixels

  96. google tv 1024 pixels

  97. microsoft xbox 360 1041 of 1050 pixels

  98. microsoft xbox one 1200 of 1236 pixels

  99. lg netcast 1226 pixels

  100. sony playstation 3 1824 pixels

  101. sony playstation 4 1920 pixels

  102. Nintendo Wii 800 LG WebOS 960 Nintendo Wii U 980

    Philips 2014 series 980 Google TV 1024 Playstation TV 1024 Samsung Tizen 1024 Xbox 360 1051 Xbox One 1200 LG Netcast 1226 Panasonic Viera 1256 Opera Devices 1280 Samsung 2014 series 1280 Panasonic Firefox OS 1536 Playstation 3 1824 Playstation 4 1920
  103. device pixels != device pixels (echt waar)

  104. soms zijn device pixels geen fysieke 
 device pixels, maar

    virtuele device pixels de browser werkt bijvoorbeeld 
 op een lagere resolutie en wordt ge-upscaled 
 naar de resolutie van het beeldscherm
  105. 3 afstand tot het scherm

  106. “Make fonts and graphics on the site larger to account

    for viewing distance. People sit proportionally farther from a TV than from a computer monitor of the same size.” 
 Internet Explorer for Xbox One Developer Guide https://msdn.microsoft.com/en-us/library/dn532261(v=vs.85).aspx
  107. fluid design zorg ervoor dat de grootte van de inhoud

    wordt geleid door de breedte van de viewport
  108. gebruik percentages voor positionering .left { width: 60%; }
 .right

    { left: 60%; width: 40%; } 1
  109. baseer de fontgrootte op de viewport document.body.style.fontSize = 
 ((window.innerWidth

    / 1920) * 300) + '%'; 2
  110. of misschien viewport units – met polyfill body { font-size:

    3vw; }
 .left { width: 60vw; height: 100vh; }
 .right { width: 40vw; height: 100vh; } 3
  111. gebruik een veilige marge om de inhoud heen body {


    padding: 5%;
 } 4
  112. youtube tv website

  113. herkennen van smart tv’s (css speciaal voor televisies)

  114. css media types @media tv {
 body {
 font-size: 300%;

    } } 1 ×
  115. css media types alle televisie-browsers gebruiken 
 css media type

    ‘screen’ 1
  116. schermgrootte if (screen.width == 1920 && screen.height == 1080) {


    document.body.className += " television";
 } 2 ×
  117. schermgrootte monitoren en telefoons hebben 
 soms hd-resoluties, televisie-browsers hebben

    vaak andere resoluties 2
  118. useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) {
 document.body.className += "

    television";
 } 3 ×
  119. useragent sniffing niet alle televisies zijn herkenbaar Mozilla/5.0 (X11; Linux;

    ko-KR) 
 AppleWebKit/534.26+ (KHTML, like Gecko) 
 Version/5.0 Safari/534.26+ 3
  120. couch mode de enige betrouwbare manier om een 
 website

    voor televisie te optimaliseren is 
 twee verschillende sites maken… of de bezoeker de mogelijkheid te geven 
 om couch mode aan te zetten 4
  121. 4 wees voorzichtig 
 met feature-detectie

  122. alle features die praten met het besturingssysteem of de hardware

    zijn verdacht…
  123. if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); } 1 failure

    wordt aangeroepen met een 
 “permission denied”-foutcode 2 helemaal geen callback naar success of failure
  124. if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); } 3 success

    wordt aangeroepen met longitude = 0 en latitude = 0 4 success wordt aangeroepen met de coördinaten 
 van Mountain View, USA
  125. None
  126. e-readers

  127. resultaten van e-readers op html5test.com 555 0 196 
 Pocketbook

    280 
 Kobo 157 
 Sony Reader 52 
 Kindle 3 187 
 Kindle Touch
  128. infrarood touchscherm

  129. led’s sensors

  130. mouse events down/up move touch events amazon kindle touch ja

    pocketbook basic touch ja kobo glow ja ja sony reader ja ja 1 vinger
  131. e-ink beeldschermen (traag, trager, traagst)

  132. microscopische balletjes die geladen zijn

  133. microscopische balletjes die geladen zijn + – – +

  134. + – – + microscopische balletjes die geladen zijn

  135. microscopische balletjes die geladen zijn

  136. None
  137. misschien zijn css animaties en 
 transitions toch niet zo’n

    goed idee
  138. twee contrastrijke kleuren kunnen 
 exact hetzelfde lijken in zwart/wit

  139. twee contrastrijke kleuren kunnen 
 exact hetzelfde lijken in zwart/wit

  140. herkennen van e-readers (css voor e-ink beeldschermen)

  141. css monochrome mediaquery @media all and (monochrome) {
 ... }

    1 ×
  142. css monochrome mediaquery alle geteste e-readers doen net alsof ze

    een kleurenscherm hebben 1
  143. useragent sniffing er is geen universele marker in de useragent-string,

    maar we kunnen wel individuele merken en modellen herkennen 2
  144. None
  145. portable consoles

  146. 66 
 Nintendo DSi 309 
 Sony PlayStation Vita 311

    
 New Nintendo 3DS resultaten van portable consoles op html5test.com 555 0 80 
 Nintendo 3DS
  147. None
  148. twee schermen (eigenlijk verrassend normaal)

  149. een dubbele viewport
 (de onderste is de primaire visual viewport)

    3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
  150. een dubbele viewport
 (de onderste is de primaire visual viewport)

    3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
  151. een dubbele viewport
 (de onderste is de primaire visual viewport)

    3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
  152. een dubbele viewport
 (de onderste is de primaire visual viewport)

    3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
  153. None
  154. None
  155. ?vreemde browsers! niels leenheer
 @html5test

  156. meer weten? smart tv browsers 
 @patrick_h_lauke console browsers 


    @anna_debenham
  157. meer weten? viewports en meer
 @ppk