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.

Transcript

1. ?vreemde browsers?
   fronteers — 3 juni 2015
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. View Slide

6. ?vreemde browsers?
   

   View Slide

7. browsers en apparaten die niet 

   aan de huidige verwachtingen voldoen
   

   View Slide

8. ?vreemde browsers?
   

   View Slide

9. ?vreemde browsers?
   

   View Slide

10. game consoles
    

    View Slide

11. portable game consoles
    

    View Slide

12. smart tv’s
    

    View Slide

13. e-readers
    

    View Slide

14. smartwatches
    

    View Slide

15. fotocamera’s
    

    View Slide

16. auto’s
    Andre Jay Meissner
    

    View Slide

17. vergelijkbaar met mobiel 

    vóór de komst van de iphone en android
    iedereen doet maar wat
    

    View Slide

18. View Slide

19. View Slide

20. smart tv’s en consoles
    

    View Slide

21. View Slide

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

    gebruikt besturingssystemen die 

    afkomstig zijn van mobiel
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. 1
    bediening
    

    View Slide

30. het grootste probleem van 

    televisie-browsers is de bediening
    

    View Slide

31. navigatie
    (zonder muis of touchscreen)
    

    View Slide

32. d-pad
    

    View Slide

33. navigeren met de d-pad
    

    View Slide

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

    View Slide

35. alternatieven
    

    View Slide

36. analoge controllers
    

    View Slide

37. afstandbediening met trackpad
    

    View Slide

38. afstandbediening met airmouse
    

    View Slide

39. second screen
    

    View Slide

40. veel fabrikanten brengen ook apps uit voor de
    bediening van de smart tv, console of set-top box
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. tekstinvoer
    (zonder toetsenbord)
    

    View Slide

45. d-pads
    

    View Slide

46. tekst invoeren met de d-pad
    

    View Slide

47. alternatieven
    

    View Slide

48. afstandsbedieningen met toetsenbord
    

    View Slide

49. draadloze toetsenborden
    

    View Slide

50. en wederom apps
    

    View Slide

51. View Slide

52. View Slide

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

    View Slide

54. navigeren met gesture control
    

    View Slide

55. kunnen we deze invoermethodes 

    rechtstreeks gebruiken in javascript?
    

    View Slide

56. de d-pad
    misschien
    

    View Slide

57. keyboard events
    window.addEventListener("keypress", function(e) {

    e.preventDefault(); // no navigation

    ...
    });
    1
    

    View Slide

58. de gamepad
    misschien
    

    View Slide

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

    for (var i = 0; i < gamepads.length; i++) {

    ...

    }
    1
    

    View Slide

60. wii u api
    window.setInterval(function() {

    var state = window.wiiu.gamepad.update();

    ...
    }, 100);
    2
    

    View Slide

61. de webcam
    nee*
    

    View Slide

62. gestures
    nee*
    

    View Slide

63. 2
    het verschil tussen een
    televisie en een monitor
    

    View Slide

64. overscan
    (laten we het even moeilijk maken)
    

    View Slide

65. vanwege historische redenen laten televisies 

    de randen van het beeld niet zien
    

    View Slide

66. het beeld dat via hdmi binnenkomt 

    wordt door de televisie vergroot met 5%
    1920 pixels
    

    View Slide

67. het beeld dat via hdmi binnenkomt 

    wordt door de televisie vergroot met 5%
    1920 pixels
    

    View Slide

68. daarna wordt het beeld bijgesneden 

    tot 1920 bij 1080 pixels
    

    View Slide

69. daarna wordt het beeld bijgesneden 

    tot 1920 bij 1080 pixels
    

    View Slide

70. overscan zorgt voor onscherp beeld
    +5%
    

    View Slide

71. oplossing 1
    overscan-correctie
    

    View Slide

72. de browser gebruikt 

    de randen van het beeld niet
    1920 pixels
    

    View Slide

73. het beeld zal door de televisie 

    worden vergroot met ongeveer 5%
    1920 pixels
    

    View Slide

74. de inhoud is nu volledig zichtbaar,

    de zwarte randen zijn verdwenen
    

    View Slide

75. maar niet elke televisie vergroot exact 5%, 

    dit kan per merk en model verschillen
    

    View Slide

76. configureer de juiste overscan-correctie

    in de systeeminstellingen
    

    View Slide

77. de playstation 4 laat in fullscreen-mode

    de browser altijd zonder overscan-correctie zien
    

    View Slide

78. de playstation 4 laat in fullscreen-mode

    de browser altijd zonder overscan-correctie zien
    

    View Slide

79. oplossing 2
    geen overscan
    

    View Slide

80. het is soms mogelijk om overscan 

    uit te zetten bij televisies
    dit heet ‘screen fit’, ‘pixel perfect’ of ‘just scan’
    

    View Slide

81. de playstation 3 laat de browser 

    altijd met overscan-correctie zien
    

    View Slide

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

    View Slide

83. de visual viewport
    bepaalt welk
    gedeelte van de
    website zichtbaar is
    gemeten in 

    device pixels
    de visual viewport
    

    View Slide

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

    device pixels
    de visual viewport
    

    View Slide

85. de visual viewport
    de visual viewport
    bepaalt welk
    gedeelte van de
    website zichtbaar is
    gemeten in 

    device pixels
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. iedere smart tv, console of set-top box heeft 

    z’n eigen standaard layout viewport-breedte
    tussen 800 en 1920 css pixels
    

    View Slide

90. met de ‘meta viewport’ is het mogelijk om 

    breedte van de layout viewport te veranderen
    
    
    fysieke device pixels
    device scale factor
    

    View Slide

91. probleem:

    meta viewport wordt niet ondersteund
    geen mogelijkheid de layout viewport gelijk te 

    krijgen tussen verschillende browsers
    

    View Slide

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
    

    View Slide

93. nintendo wii
    800 pixels
    

    View Slide

94. nintendo wii u
    980 pixels
    

    View Slide

95. lg webos
    960 pixels
    

    View Slide

96. google tv
    1024 pixels
    

    View Slide

97. microsoft xbox 360
    1041 of 1050 pixels
    

    View Slide

98. microsoft xbox one
    1200 of 1236 pixels
    

    View Slide

99. lg netcast
    1226 pixels
    

    View Slide

100. sony playstation 3
     1824 pixels
     

     View Slide

101. sony playstation 4
     1920 pixels
     

     View Slide

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
     

     View Slide

103. device pixels != device pixels
     (echt waar)
     

     View Slide

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
     

     View Slide

105. 3
     afstand tot het scherm
     

     View Slide

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
     

     View Slide

107. fluid design
     zorg ervoor dat de grootte van de inhoud wordt
     geleid door de breedte van de viewport
     

     View Slide

108. gebruik percentages voor positionering
     .left { width: 60%; }

     .right { left: 60%; width: 40%; }
     1
     

     View Slide

109. baseer de fontgrootte op de viewport
     document.body.style.fontSize = 

     ((window.innerWidth / 1920) * 300) + '%';
     2
     

     View Slide

110. of misschien viewport units – met polyfill
     body { font-size: 3vw; }

     .left { width: 60vw; height: 100vh; }

     .right { width: 40vw; height: 100vh; }
     3
     

     View Slide

111. gebruik een veilige marge om de inhoud heen
     body {

     padding: 5%;

     }
     4
     

     View Slide

112. youtube tv website
     

     View Slide

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

     View Slide

114. css media types
     @media tv {

     body {

     font-size: 300%;
     }
     }
     1
     ×
     

     View Slide

115. css media types
     alle televisie-browsers gebruiken 

     css media type ‘screen’
     1
     

     View Slide

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

     document.body.className += " television";

     }
     2
     ×
     

     View Slide

117. schermgrootte
     monitoren en telefoons hebben 

     soms hd-resoluties, televisie-browsers
     hebben vaak andere resoluties
     2
     

     View Slide

118. useragent sniffing
     if (navigator.userAgent.search(/TV/i) >= 0) {

     document.body.className += " television";

     }
     3
     ×
     

     View Slide

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
     

     View Slide

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
     

     View Slide

121. 4
     wees voorzichtig 

     met feature-detectie
     

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

125. View Slide

126. e-readers
     

     View Slide

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

     Pocketbook
     280
     

     Kobo
     157
     

     Sony Reader
     52
     

     Kindle 3
     187
     

     Kindle Touch
     

     View Slide

128. infrarood touchscherm
     

     View Slide

129. led’s sensors
     

     View Slide

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
     

     View Slide

131. e-ink beeldschermen
     (traag, trager, traagst)
     

     View Slide

132. microscopische balletjes die geladen zijn
     

     View Slide

133. microscopische balletjes die geladen zijn
     + –
     – +
     

     View Slide

134. + –
     – +
     microscopische balletjes die geladen zijn
     

     View Slide

135. microscopische balletjes die geladen zijn
     

     View Slide

136. View Slide

137. misschien zijn css animaties en 

     transitions toch niet zo’n goed idee
     

     View Slide

138. twee contrastrijke kleuren kunnen 

     exact hetzelfde lijken in zwart/wit
     

     View Slide

139. twee contrastrijke kleuren kunnen 

     exact hetzelfde lijken in zwart/wit
     

     View Slide

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

     View Slide

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

     ...
     }
     1
     ×
     

     View Slide

142. css monochrome mediaquery
     alle geteste e-readers doen net alsof ze
     een kleurenscherm hebben
     1
     

     View Slide

143. useragent sniffing
     er is geen universele marker in de
     useragent-string, maar we kunnen wel
     individuele merken en modellen
     herkennen
     2
     

     View Slide

144. View Slide

145. portable consoles
     

     View Slide

146. 66
     

     Nintendo DSi
     309
     

     Sony PlayStation Vita
     311
     

     New Nintendo 3DS
     resultaten van portable consoles op html5test.com
     555
     0
     80
     

     Nintendo 3DS
     

     View Slide

147. View Slide

148. twee schermen
     (eigenlijk verrassend normaal)
     

     View Slide

149. een dubbele viewport

     (de onderste is de primaire visual viewport)
     3d beeldscherm,
     maar alleen 2d
     wordt ondersteund
     in de browser
     resistive 

     touch scherm
     

     View Slide

150. een dubbele viewport

     (de onderste is de primaire visual viewport)
     3d beeldscherm,
     maar alleen 2d
     wordt ondersteund
     in de browser
     resistive 

     touch scherm
     

     View Slide

151. een dubbele viewport

     (de onderste is de primaire visual viewport)
     3d beeldscherm,
     maar alleen 2d
     wordt ondersteund
     in de browser
     resistive 

     touch scherm
     

     View Slide

152. een dubbele viewport

     (de onderste is de primaire visual viewport)
     3d beeldscherm,
     maar alleen 2d
     wordt ondersteund
     in de browser
     resistive 

     touch scherm
     

     View Slide

153. View Slide

154. View Slide

155. ?vreemde browsers!
     niels leenheer

     @html5test
     

     View Slide

156. meer weten?
     smart tv browsers 

     @patrick_h_lauke
     console browsers 

     @anna_debenham
     

     View Slide

157. meer weten?
     viewports en meer

     @ppk
     

     View Slide