Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vreemde browsers @ Amsterdam University of Applied Sciences

Vreemde browsers @ Amsterdam University of Applied Sciences

A talk about weird browsers in smart tv's, consoles and e-books. Presented during during a guest lecture at Amsterdam University of Applied Sciences. Sorry dutch only.

Niels Leenheer

March 08, 2016
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 400

    Safari 9
    521

    Chrome 49
    555
    0
    resultaten van desktop-browsers op html5test.com
    458

    Edge 13
    478

    Firefox 44

    View full-size slide

  3. 400

    Safari 9
    555
    0
    resultaten van desktop-browsers op html5test.com
    521

    Chrome 49
    458

    Edge 13
    478

    Firefox 44

    View full-size slide

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

    View full-size slide

  5. ?vreemde browsers?

    View full-size slide

  6. ?vreemde browsers?

    View full-size slide

  7. ?vreemde browsers?

    View full-size slide

  8. game consoles

    View full-size slide

  9. portable game consoles

    View full-size slide

  10. smart tv’s

    View full-size slide

  11. smartwatches

    View full-size slide

  12. fotocamera’s

    View full-size slide

  13. auto’s
    Andre Jay Meissner

    View full-size slide

  14. smart tv’s, set-top boxen
    en consoles

    View full-size slide

  15. “big screen browsers”

    View full-size slide

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

    gebruikt besturingssystemen die 

    afkomstig zijn van mobiel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. het grootste probleem van 

    televisie-browsers is de bediening

    View full-size slide

  21. navigatie
    (zonder muis of touchscreen)

    View full-size slide

  22. navigeren met de d-pad

    View full-size slide

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

    View full-size slide

  24. alternatieven

    View full-size slide

  25. analoge controllers

    View full-size slide

  26. afstandbediening met trackpad

    View full-size slide

  27. afstandbediening met airmouse

    View full-size slide

  28. second screen

    View full-size slide

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

    View full-size slide

  30. tekstinvoer
    (zonder toetsenbord)

    View full-size slide

  31. tekst invoeren met de d-pad

    View full-size slide

  32. alternatieven

    View full-size slide

  33. afstandsbedieningen met toetsenbord

    View full-size slide

  34. draadloze toetsenborden

    View full-size slide

  35. en wederom apps

    View full-size slide

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

    View full-size slide

  37. navigeren met gesture control

    View full-size slide

  38. kunnen we deze invoermethodes 

    rechtstreeks gebruiken in javascript?

    View full-size slide

  39. de d-pad
    misschien

    View full-size slide

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

    e.preventDefault(); // no navigation

    ...
    });
    1

    View full-size slide

  41. de gamepad
    misschien

    View full-size slide

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

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

    ...

    }
    1

    View full-size slide

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

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

    ...
    }, 100);
    2

    View full-size slide

  44. de webcam
    misschien

    View full-size slide

  45. de getusermedia api
    navigator.getUserMedia(

    { audio: true, video: { width: 1280, height: 720 } },

    function(stream) { ... },

    function(error) { ... }

    );
    1

    View full-size slide

  46. 2
    het verschil tussen een
    televisie en een monitor

    View full-size slide

  47. overscan
    (laten we het even moeilijk maken)

    View full-size slide

  48. vanwege historische redenen laten televisies 

    de randen van het beeld niet zien

    View full-size slide

  49. het beeld dat via hdmi binnenkomt 

    wordt door de televisie vergroot met 5%
    1920 pixels

    View full-size slide

  50. het beeld dat via hdmi binnenkomt 

    wordt door de televisie vergroot met 5%
    1920 pixels

    View full-size slide

  51. daarna wordt het beeld bijgesneden 

    tot 1920 bij 1080 pixels

    View full-size slide

  52. daarna wordt het beeld bijgesneden 

    tot 1920 bij 1080 pixels

    View full-size slide

  53. overscan zorgt voor onscherp beeld
    +5%

    View full-size slide

  54. oplossing 1
    overscan-correctie

    View full-size slide

  55. de browser gebruikt 

    de randen van het beeld niet
    1920 pixels

    View full-size slide

  56. het beeld zal door de televisie 

    worden vergroot met ongeveer 5%
    1920 pixels

    View full-size slide

  57. de inhoud is nu volledig zichtbaar,

    de zwarte randen zijn verdwenen

    View full-size slide

  58. maar niet elke televisie vergroot exact 5%, 

    dit kan per merk en model verschillen

    View full-size slide

  59. configureer de juiste overscan-correctie

    in de systeeminstellingen

    View full-size slide

  60. de playstation 4 laat in fullscreen-mode

    de browser altijd zonder overscan-correctie zien

    View full-size slide

  61. de playstation 4 laat in fullscreen-mode

    de browser altijd zonder overscan-correctie zien

    View full-size slide

  62. oplossing 2
    geen overscan

    View full-size slide

  63. het is soms mogelijk om overscan 

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

    View full-size slide

  64. de playstation 3 laat de browser 

    altijd met overscan-correctie zien

    View full-size slide

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

    View full-size slide

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

    device pixels
    de visual viewport

    View full-size slide

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

    device pixels
    de visual viewport

    View full-size slide

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

    device pixels

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    breedte van de layout viewport te veranderen


    fysieke device pixels
    device scale factor

    View full-size slide

  74. probleem:

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

    krijgen tussen verschillende browsers

    View full-size slide

  75. 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 full-size slide

  76. nintendo wii
    800 pixels

    View full-size slide

  77. nintendo wii u
    980 pixels

    View full-size slide

  78. lg webos
    960 pixels

    View full-size slide

  79. microsoft xbox 360
    1041 of 1050 pixels

    View full-size slide

  80. microsoft xbox one
    1200 of 1236 pixels

    View full-size slide

  81. sony playstation 3
    1824 pixels

    View full-size slide

  82. sony playstation 4
    1920 pixels

    View full-size slide

  83. 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 full-size slide

  84. device pixels != device pixels
    (natuurlijk niet)

    View full-size slide

  85. 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 full-size slide

  86. 3
    afstand tot het scherm

    View full-size slide

  87. “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 full-size slide

  88. Maak tekst en 

    afbeeldingen twee 

    tot drie keer groter

    View full-size slide

  89. Maak tekst en 

    afbeeldingen twee 

    tot drie keer groter

    View full-size slide

  90. Maak tekst en 

    afbeeldingen twee 

    tot drie keer groter

    View full-size slide

  91. youtube tv website

    View full-size slide

  92. responsive design
    zorg ervoor dat de grootte van de inhoud wordt
    geleid door de breedte van de viewport

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

    View full-size slide

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

    padding: 5%;

    }
    4

    View full-size slide

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

    View full-size slide

  98. css media types
    @media tv {

    body {

    font-size: 300%;
    }
    }
    1
    ×

    View full-size slide

  99. css media types
    alle televisie-browsers gebruiken 

    css media type ‘screen’
    1

    View full-size slide

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

    document.body.className += " television";

    }
    2
    ×

    View full-size slide

  101. schermgrootte
    monitoren en telefoons hebben 

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

    View full-size slide

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

    document.body.className += " television";

    }
    3
    ×

    View full-size slide

  103. 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 full-size slide

  104. 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 full-size slide

  105. 4
    wees voorzichtig 

    met feature-detectie

    View full-size slide

  106. “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/

    View full-size slide

  107. if (!!navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(

    success, failure

    );
    }

    else {

    // alternative

    }

    View full-size slide

  108. 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 full-size slide

  109. 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 full-size slide

  110. is er toekomst voor het web 

    op het grote scherm?

    View full-size slide

  111. de nieuwe apple tv heeft 

    standaard geen browser

    View full-size slide

  112. android tv heeft 

    standaard geen browser

    View full-size slide

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

    Pocketbook
    280

    Kobo
    157

    Sony Reader
    52

    Kindle 3
    187

    Kindle Touch

    View full-size slide

  114. infrarood touchscherm

    View full-size slide

  115. led’s sensors

    View full-size slide

  116. 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 full-size slide

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

    View full-size slide

  118. microscopische balletjes die geladen zijn

    View full-size slide

  119. microscopische balletjes die geladen zijn
    + –
    – +

    View full-size slide

  120. + –
    – +
    microscopische balletjes die geladen zijn

    View full-size slide

  121. microscopische balletjes die geladen zijn

    View full-size slide

  122. misschien zijn css animaties en 

    transitions toch niet zo’n goed idee

    View full-size slide

  123. twee contrastrijke kleuren kunnen 

    exact hetzelfde lijken in zwart/wit

    View full-size slide

  124. twee contrastrijke kleuren kunnen 

    exact hetzelfde lijken in zwart/wit

    View full-size slide

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

    View full-size slide

  126. css monochrome mediaquery
    @media (monochrome) {

    ...
    }
    1
    ×

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  129. portable consoles

    View full-size slide

  130. 66

    Nintendo DSi
    309

    Sony PlayStation Vita
    311

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

    Nintendo 3DS

    View full-size slide

  131. twee schermen
    (eigenlijk verrassend normaal)

    View full-size slide

  132. een dubbele viewport

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

    touch scherm

    View full-size slide

  133. een dubbele viewport

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

    touch scherm

    View full-size slide

  134. een dubbele viewport

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

    touch scherm

    View full-size slide

  135. een dubbele viewport

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

    touch scherm

    View full-size slide

  136. ?vreemde browsers!

    View full-size slide

  137. “We cannot predict future behavior 

    from a current experience that sucks”

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

    View full-size slide

  138. maar wacht…

    View full-size slide

  139. browsers!
    vreemde

    View full-size slide

  140. vreemde browsers!

    View full-size slide

  141. browsers!
    browsers
    browsers
    browser
    browsers!
    browsers
    rowsers
    browsers
    browsers
    brows
    browsers
    wsers!
    browsers

    View full-size slide

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

    View full-size slide

  143. bedankt
    niels leenheer

    @html5test

    View full-size slide