Vreemde Browsers

?vreemde browsers? fronteers — 3 juni 2015

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

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

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

?vreemde browsers?

browsers en apparaten die niet aan de huidige verwachtingen voldoen

?vreemde browsers?

?vreemde browsers?

game consoles

portable game consoles

smart tv’s

e-readers

smartwatches

fotocamera’s

Andre Jay Meissner auto’s

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

smart tv’s en consoles

televisie-browsers zijn best goed de laatste generatie televisies gebruikt besturingssystemen die afkomstig zijn van mobiel

281 Google TV 443 414 238 Panasonic Firefox OS LG Netcast LG WebOS 0 555 301 414 Panasonic Viera Samsung 2014 465 Samsung Tizen 449 Opera Devices resultaten van smart tv’s op html5test.com

53 328 Playstation 3 Playstation TV 98 328 Xbox 360 Playstation 4 286 Xbox One 0 555 66 265 Wii Wii U resultaten van console’s op html5test.com

1 bediening

het grootste probleem van televisie-browsers is de bediening

navigatie (zonder muis of touchscreen)

d-pad

navigeren met de d-pad

maar het kan erger: de cursor sturen met de pijltjestoetsen

alternatieven

analoge controllers

afstandbediening met trackpad

afstandbediening met airmouse

second screen

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

tekstinvoer (zonder toetsenbord)

d-pads

tekst invoeren met de d-pad

alternatieven

afstandsbedieningen met toetsenbord

draadloze toetsenborden

en wederom apps

gesture control (als een gek in de lucht zwaaien)

navigeren met gesture control

kunnen we deze invoermethodes rechtstreeks gebruiken in javascript?

de d-pad misschien

1 keyboard events window.addEventListener(“keypress”, function(e) { e.preventDefault(); // no navigation … });

de gamepad misschien

1 de gamepad api var gamepads = navigator.getGamepads(); for (var i = 0; i < gamepads.length; i++) { … }

2 wii u api window.setInterval(function() { var state = window.wiiu.gamepad.update(); … }, 100);

de webcam nee*

gestures nee*

2 het verschil tussen een televisie en een monitor

overscan (laten we het even moeilijk maken)

vanwege historische redenen laten televisies de randen van het beeld niet zien

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

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

daarna wordt het beeld bijgesneden tot 1920 bij 1080 pixels

daarna wordt het beeld bijgesneden tot 1920 bij 1080 pixels

overscan zorgt voor onscherp beeld +5%

oplossing 1 overscan-correctie

1920 pixels de browser gebruikt de randen van het beeld niet

1920 pixels het beeld zal door de televisie worden vergroot met ongeveer 5%

de inhoud is nu volledig zichtbaar, de zwarte randen zijn verdwenen

maar niet elke televisie vergroot exact 5%, dit kan per merk en model verschillen

configureer de juiste overscan-correctie in de systeeminstellingen

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

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

oplossing 2 geen overscan

het is soms mogelijk om overscan uit te zetten bij televisies dit heet ‘screen fit’, ‘pixel perfect’ of ‘just scan’

de playstation 3 laat de browser altijd met overscan-correctie zien

de viewport (heeft iemand aspirine bij zich?)

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

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

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

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

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

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

iedere smart tv, console of set-top box heeft z’n eigen standaard layout viewport-breedte tussen 800 en 1920 css pixels

met de ‘meta viewport’ is het mogelijk om breedte van de layout viewport te veranderen fysieke device pixels device scale factor

probleem: meta viewport wordt niet ondersteund geen mogelijkheid de layout viewport gelijk te krijgen tussen verschillende browsers

probleem: device pixel ratio wordt niet ondersteund dus geen goede ondersteuning voor het tonen van afbeeldingen die bij de resolutie van het scherm passen

800 pixels nintendo wii

980 pixels nintendo wii u

960 pixels lg webos

1024 pixels google tv

1041 of 1050 pixels microsoft xbox 360

1200 of 1236 pixels microsoft xbox one

1226 pixels lg netcast

1824 pixels sony playstation 3

1920 pixels sony playstation 4

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

device pixels != device pixels (echt waar)

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

3 afstand tot het scherm

“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

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

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

2 baseer de fontgrootte op de viewport document.body.style.fontSize = ((window.innerWidth / 1920) * 300) + ‘%’;

3 of misschien viewport units – met polyfill body { font-size: 3vw; } .left { width: 60vw; height: 100vh; } .right { width: 40vw; height: 100vh; }

4 gebruik een veilige marge om de inhoud heen body { padding: 5%; }

youtube tv website

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

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

1 css media types alle televisie-browsers gebruiken css media type ‘screen’

2 × schermgrootte if (screen.width == 1920 && screen.height == 1080) { document.body.className += ” television”; }

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

3 × useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) { document.body.className += ” television”; }

3 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+

4 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 wees voorzichtig met feature-detectie

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

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

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

e-readers

187 280 Kindle Touch Kobo 157 Sony Reader 0 555 52 196 Kindle 3 Pocketbook resultaten van e-readers op html5test.com

infrarood touchscherm

led’s sensors

mouse events down/up move amazon kindle touch ja pocketbook basic touch ja kobo glow ja ja sony reader ja ja touch events 1 vinger

e-ink beeldschermen (traag, trager, traagst)

microscopische balletjes die geladen zijn

microscopische balletjes die geladen zijn + – – +

microscopische balletjes die geladen zijn + – – +

microscopische balletjes die geladen zijn

misschien zijn css animaties en transitions toch niet zo’n goed idee

twee contrastrijke kleuren kunnen exact hetzelfde lijken in zwart/wit

twee contrastrijke kleuren kunnen exact hetzelfde lijken in zwart/wit

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

1 × css monochrome mediaquery @media all and (monochrome) { … }

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

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

portable consoles

66 Nintendo DSi 80 311 Nintendo 3DS New Nintendo 3DS 0 555 309 Sony PlayStation Vita resultaten van portable consoles op html5test.com

twee schermen (eigenlijk verrassend normaal)

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

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

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

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

?vreemde browsers! niels leenheer @html5test

meer weten? smart tv browsers @patrick_h_lauke console browsers @anna_debenham

meer weten? viewports en meer @ppk