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. 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
  2. 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
  3. 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
  4. 5.
  5. 13.
  6. 17.
  7. 18.
  8. 19.
  9. 21.
  10. 22.

    televisie-browsers zijn best goed de laatste generatie televisies 
 gebruikt

    besturingssystemen die 
 afkomstig zijn van mobiel
  11. 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
  12. 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
  13. 25.
  14. 26.
  15. 27.
  16. 28.
  17. 32.
  18. 40.
  19. 41.
  20. 42.
  21. 43.
  22. 45.
  23. 51.
  24. 52.
  25. 59.

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

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

    het beeld dat via hdmi binnenkomt 
 wordt door de

    televisie vergroot met 5% 1920 pixels
  27. 67.

    het beeld dat via hdmi binnenkomt 
 wordt door de

    televisie vergroot met 5% 1920 pixels
  28. 80.

    het is soms mogelijk om overscan 
 uit te zetten

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

    de visual viewport bepaalt welk gedeelte van de website zichtbaar

    is gemeten in 
 device pixels de visual viewport
  30. 84.

    de visual viewport bepaalt welk gedeelte van de website zichtbaar

    is gemeten in 
 device pixels de visual viewport
  31. 85.

    de visual viewport de visual viewport bepaalt welk gedeelte van

    de website zichtbaar is gemeten in 
 device pixels
  32. 86.

    de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
  33. 87.

    de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
  34. 88.

    de layout viewport de layout viewport bepaalt de breedte in

    css pixels waarop de website wordt afgebeeld
  35. 89.

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

    eigen standaard layout viewport-breedte tussen 800 en 1920 css pixels
  36. 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
  37. 91.

    probleem:
 meta viewport wordt niet ondersteund geen mogelijkheid de layout

    viewport gelijk te 
 krijgen tussen verschillende browsers
  38. 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
  39. 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
  40. 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
  41. 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
  42. 107.

    fluid design zorg ervoor dat de grootte van de inhoud

    wordt geleid door de breedte van de viewport
  43. 110.

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

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

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


    document.body.className += " television";
 } 2 ×
  45. 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
  46. 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
  47. 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
  48. 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
  49. 125.
  50. 126.
  51. 127.

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

    280 
 Kobo 157 
 Sony Reader 52 
 Kindle 3 187 
 Kindle Touch
  52. 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
  53. 136.
  54. 143.

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

    maar we kunnen wel individuele merken en modellen herkennen 2
  55. 144.
  56. 146.

    66 
 Nintendo DSi 309 
 Sony PlayStation Vita 311

    
 New Nintendo 3DS resultaten van portable consoles op html5test.com 555 0 80 
 Nintendo 3DS
  57. 147.
  58. 149.

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

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

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

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

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

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

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

    3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive 
 touch scherm
  62. 153.
  63. 154.