Vreemde browsers @ Amsterdam University of Applied Sciences

Transcript

1. 1.

   ?vreemde browsers? hogeschool van amsterdam — 8 maart 2016 @html5test

2. 2.

   None
3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   400 
 Safari 9 521 
 Chrome 49 555 0

   resultaten van desktop-browsers op html5test.com 458 
 Edge 13 478 
 Firefox 44
7. 7.

   400 
 Safari 9 555 0 resultaten van desktop-browsers op

   html5test.com 521 
 Chrome 49 458 
 Edge 13 478 
 Firefox 44
8. 8.

   402 
 Edge 12 400 
 Safari 9 521 


   Chrome 49 555 0 resultaten van desktop-browsers op html5test.com 16 
 Internet Explorer 6 458 
 Edge 13 336 
 Internet Explorer 11 478 
 Firefox 44
9. 9.

   None
10. 10.

    ?vreemde browsers?

11. 11.

    None
12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    None
22. 22.

    None
23. 23.

    None
24. 24.

    None
25. 25.

    ?vreemde browsers?

26. 26.

    ?vreemde browsers?

27. 27.

    game consoles

28. 28.

    portable game consoles

29. 29.

    smart tv’s

30. 30.

    e-readers

31. 31.

    smartwatches

32. 32.

    fotocamera’s

33. 33.

    auto’s Andre Jay Meissner

34. 34.

    None
35. 35.

    smart tv’s, set-top boxen en consoles

36. 36.

    “big screen browsers”

37. 37.

    None
38. 38.

    televisie-browsers zijn best goed de laatste generatie televisies 
 gebruikt

    besturingssystemen die 
 afkomstig zijn van mobiel
39. 39.

    418 
 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 407 
 Samsung
 2014
40. 40.

    328 
 Playstation 4 53 
 Playstation 3 309 


    Playstation TV 98 
 Xbox 360 286 
 Xbox One 311 
 Wii U 66 
 Wii 555 0 resultaten van console’s op html5test.com
41. 41.

    328 
 Playstation 4 53 
 Playstation 3 309 


    Playstation TV 98 
 Xbox 360 286 
 Xbox One 311 
 Wii U 66 
 Wii 555 0 resultaten van console’s op html5test.com 426 
 Xbox One with Edge
42. 42.

    None
43. 43.

    1 bediening

44. 44.

    het grootste probleem van 
 televisie-browsers is de bediening

45. 45.

    navigatie (zonder muis of touchscreen)

46. 46.

    d-pad

47. 47.

    navigeren met de d-pad

48. 48.

    maar het kan erger: de cursor sturen met de pijltjestoetsen

49. 49.

    alternatieven

50. 50.

    analoge controllers

51. 51.

    afstandbediening met trackpad

52. 52.

    afstandbediening met airmouse

53. 53.

    second screen

54. 54.

    veel fabrikanten brengen ook apps uit voor de bediening van

    de smart tv, console of set-top box
55. 55.

    None
56. 56.

    None
57. 57.

    tekstinvoer (zonder toetsenbord)

58. 58.

    d-pads

59. 59.

    tekst invoeren met de d-pad

60. 60.

    alternatieven

61. 61.

    afstandsbedieningen met toetsenbord

62. 62.

    draadloze toetsenborden

63. 63.

    en wederom apps

64. 64.

    None
65. 65.

    gesture control (als een gek in de lucht zwaaien)

66. 66.

    navigeren met gesture control

67. 67.

    kunnen we deze invoermethodes 
 rechtstreeks gebruiken in javascript?

68. 68.

    de d-pad misschien

69. 69.

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

    }); 1
70. 70.

    de gamepad misschien

71. 71.

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

    = 0; i < gamepads.length; i++) {
 ...
 } 1
72. 72.

    wii u api window.setInterval(function() {
 var state = window.wiiu.gamepad.update();
 ...

    }, 100); 2
73. 73.

    de webcam misschien

74. 74.

    de getusermedia api navigator.getUserMedia(
 { audio: true, video: { width:

    1280, height: 720 } },
 function(stream) { ... },
 function(error) { ... }
 ); 1
75. 75.

    2 het verschil tussen een televisie en een monitor

76. 76.

    overscan (laten we het even moeilijk maken)

77. 77.

    vanwege historische redenen laten televisies 
 de randen van het

    beeld niet zien
78. 78.

    het beeld dat via hdmi binnenkomt 
 wordt door de

    televisie vergroot met 5% 1920 pixels
79. 79.

    het beeld dat via hdmi binnenkomt 
 wordt door de

    televisie vergroot met 5% 1920 pixels
80. 80.

    daarna wordt het beeld bijgesneden 
 tot 1920 bij 1080

    pixels
81. 81.

    daarna wordt het beeld bijgesneden 
 tot 1920 bij 1080

    pixels
82. 82.

    overscan zorgt voor onscherp beeld +5%

83. 83.

    oplossing 1 overscan-correctie

84. 84.

    de browser gebruikt 
 de randen van het beeld niet

    1920 pixels
85. 85.

    het beeld zal door de televisie 
 worden vergroot met

    ongeveer 5% 1920 pixels
86. 86.

    de inhoud is nu volledig zichtbaar,
 de zwarte randen zijn

    verdwenen
87. 87.

    maar niet elke televisie vergroot exact 5%, 
 dit kan

    per merk en model verschillen
88. 88.

    configureer de juiste overscan-correctie
 in de systeeminstellingen

89. 89.

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

    overscan-correctie zien
90. 90.

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

    overscan-correctie zien
91. 91.

    oplossing 2 geen overscan

92. 92.

    het is soms mogelijk om overscan 
 uit te zetten

    bij televisies dit heet ‘screen fit’, ‘pixel perfect’ of ‘just scan’
93. 93.

    de playstation 3 laat de browser 
 altijd met overscan-correctie

    zien
94. 94.

    de viewport (heeft iemand aspirine bij zich?)

95. 95.

    de visual viewport bepaalt welk gedeelte van de website zichtbaar

    is gemeten in 
 device pixels de visual viewport
96. 96.

    de visual viewport bepaalt welk gedeelte van de website zichtbaar

    is gemeten in 
 device pixels de visual viewport
97. 97.

    de visual viewport de visual viewport bepaalt welk gedeelte van

    de website zichtbaar is gemeten in 
 device pixels
98. 98.

    de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
99. 99.

    de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
100. 100.

     de layout viewport de layout viewport bepaalt de breedte in

     css pixels waarop de website wordt afgebeeld
101. 101.

     iedere smart tv, console of set-top box heeft 
 z’n

     eigen standaard layout viewport-breedte tussen 800 en 1920 css pixels
102. 102.

     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
103. 103.

     probleem:
 meta viewport wordt niet ondersteund geen mogelijkheid de layout

     viewport gelijk te 
 krijgen tussen verschillende browsers
104. 104.

     probleem:
 device pixel ratio wordt niet ondersteund dus geen goede

     ondersteuning voor het tonen van
 afbeeldingen die bij de resolutie van het scherm passen
105. 105.

     nintendo wii 800 pixels

106. 106.

     nintendo wii u 980 pixels

107. 107.

     lg webos 960 pixels

108. 108.

     microsoft xbox 360 1041 of 1050 pixels

109. 109.

     microsoft xbox one 1200 of 1236 pixels

110. 110.

     sony playstation 3 1824 pixels

111. 111.

     sony playstation 4 1920 pixels

112. 112.

     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
113. 113.

     device pixels != device pixels (natuurlijk niet)

114. 114.

     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
115. 115.

     3 afstand tot het scherm

116. 116.

     50 cm

117. 117.

     50 cm

118. 118.

     4 meter

119. 119.

     “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
120. 120.

     Maak tekst en 
 afbeeldingen twee 
 tot drie keer

     groter
121. 121.

     Maak tekst en 
 afbeeldingen twee 
 tot drie keer

     groter
122. 122.

     Maak tekst en 
 afbeeldingen twee 
 tot drie keer

     groter
123. 123.

     youtube tv website

124. 124.

     responsive design zorg ervoor dat de grootte van de inhoud

     wordt geleid door de breedte van de viewport
125. 125.

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

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

     baseer de fontgrootte op de viewport document.body.style.fontSize = 
 ((window.innerWidth

     / 1920) * 300) + '%'; 2
127. 127.

     of misschien viewport units – met polyfill body { font-size:

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

     gebruik een veilige marge om de inhoud heen body {


     padding: 5%;
 } 4
129. 129.

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

130. 130.

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

     } } 1 ×
131. 131.

     css media types alle televisie-browsers gebruiken 
 css media type

     ‘screen’ 1
132. 132.

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


     document.body.className += " television";
 } 2 ×
133. 133.

     schermgrootte monitoren en telefoons hebben 
 soms hd-resoluties, televisie-browsers hebben

     vaak andere resoluties 2
134. 134.

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

     television";
 } 3 ×
135. 135.

     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
136. 136.

     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
137. 137.

     4 wees voorzichtig 
 met feature-detectie

138. 138.

     “Basically every feature that talks to the 
 operating system

     or hardware, is suspect.” 
 – Ik http://blog.html5test.com/2015/08/the-problems-with-feature-detection/
139. 139.

     if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
 else {


     // alternative
 }
140. 140.

     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
141. 141.

     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
142. 142.

     is er toekomst voor het web 
 op het grote

     scherm?
143. 143.

     None
144. 144.

     de nieuwe apple tv heeft 
 standaard geen browser

145. 145.

     android tv heeft 
 standaard geen browser

146. 146.

     None
147. 147.

     e-readers

148. 148.

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

     280 
 Kobo 157 
 Sony Reader 52 
 Kindle 3 187 
 Kindle Touch
149. 149.

     infrarood touchscherm

150. 150.

     led’s sensors

151. 151.

     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
152. 152.

     e-ink beeldschermen (traag, trager, traagst)

153. 153.

     microscopische balletjes die geladen zijn

154. 154.

     microscopische balletjes die geladen zijn + – – +

155. 155.

     + – – + microscopische balletjes die geladen zijn

156. 156.

     microscopische balletjes die geladen zijn

157. 157.

     None
158. 158.

     misschien zijn css animaties en 
 transitions toch niet zo’n

     goed idee
159. 159.

     twee contrastrijke kleuren kunnen 
 exact hetzelfde lijken in zwart/wit

160. 160.

     twee contrastrijke kleuren kunnen 
 exact hetzelfde lijken in zwart/wit

161. 161.

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

162. 162.

     css monochrome mediaquery @media (monochrome) {
 ... } 1 ×

163. 163.

     css monochrome mediaquery alle geteste e-readers doen net alsof ze

     een kleurenscherm hebben 1
164. 164.

     useragent sniffing er is geen universele token in de useragent-string,

     maar we kunnen wel individuele merken en modellen herkennen 2
165. 165.

     None
166. 166.

     portable consoles

167. 167.

     66 
 Nintendo DSi 309 
 Sony PlayStation Vita 311

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

     None
169. 169.

     twee schermen (eigenlijk verrassend normaal)

170. 170.

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

     3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
171. 171.

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

     3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
172. 172.

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

     3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
173. 173.

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

     3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
174. 174.

     None
175. 175.

     None
176. 176.

     ?vreemde browsers!

177. 177.

     “We cannot predict future behavior 
 from a current experience

     that sucks” 
 – Jason Grigsby http://blog.cloudfour.com/on-the-device-context-continuum/
178. 178.

     maar wacht…

179. 179.

     browsers! vreemde

180. 180.

     vreemde browsers!

181. 181.

     browsers! browsers browsers browser browsers! browsers rowsers browsers browsers brows

     browsers wsers! browsers
182. 182.

     one arm arm injury new parent permanent situational https://www.microsoft.com/en-us/design/practice

183. 183.

     None
184. 184.

     bedankt niels leenheer
 @html5test