Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

400 
 Safari 9 521 
 Chrome 49 555 0 resultaten van desktop-browsers op html5test.com 458 
 Edge 13 478 
 Firefox 44

Slide 7

Slide 7 text

400 
 Safari 9 555 0 resultaten van desktop-browsers op html5test.com 521 
 Chrome 49 458 
 Edge 13 478 
 Firefox 44

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

?vreemde browsers?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

?vreemde browsers?

Slide 26

Slide 26 text

?vreemde browsers?

Slide 27

Slide 27 text

game consoles

Slide 28

Slide 28 text

portable game consoles

Slide 29

Slide 29 text

smart tv’s

Slide 30

Slide 30 text

e-readers

Slide 31

Slide 31 text

smartwatches

Slide 32

Slide 32 text

fotocamera’s

Slide 33

Slide 33 text

auto’s Andre Jay Meissner

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

smart tv’s, set-top boxen en consoles

Slide 36

Slide 36 text

“big screen browsers”

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

1 bediening

Slide 44

Slide 44 text

het grootste probleem van 
 televisie-browsers is de bediening

Slide 45

Slide 45 text

navigatie (zonder muis of touchscreen)

Slide 46

Slide 46 text

d-pad

Slide 47

Slide 47 text

navigeren met de d-pad

Slide 48

Slide 48 text

maar het kan erger: de cursor sturen met de pijltjestoetsen

Slide 49

Slide 49 text

alternatieven

Slide 50

Slide 50 text

analoge controllers

Slide 51

Slide 51 text

afstandbediening met trackpad

Slide 52

Slide 52 text

afstandbediening met airmouse

Slide 53

Slide 53 text

second screen

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

tekstinvoer (zonder toetsenbord)

Slide 58

Slide 58 text

d-pads

Slide 59

Slide 59 text

tekst invoeren met de d-pad

Slide 60

Slide 60 text

alternatieven

Slide 61

Slide 61 text

afstandsbedieningen met toetsenbord

Slide 62

Slide 62 text

draadloze toetsenborden

Slide 63

Slide 63 text

en wederom apps

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

gesture control (als een gek in de lucht zwaaien)

Slide 66

Slide 66 text

navigeren met gesture control

Slide 67

Slide 67 text

kunnen we deze invoermethodes 
 rechtstreeks gebruiken in javascript?

Slide 68

Slide 68 text

de d-pad misschien

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

de gamepad misschien

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

de webcam misschien

Slide 74

Slide 74 text

de getusermedia api navigator.getUserMedia(
 { audio: true, video: { width: 1280, height: 720 } },
 function(stream) { ... },
 function(error) { ... }
 ); 1

Slide 75

Slide 75 text

2 het verschil tussen een televisie en een monitor

Slide 76

Slide 76 text

overscan (laten we het even moeilijk maken)

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

daarna wordt het beeld bijgesneden 
 tot 1920 bij 1080 pixels

Slide 81

Slide 81 text

daarna wordt het beeld bijgesneden 
 tot 1920 bij 1080 pixels

Slide 82

Slide 82 text

overscan zorgt voor onscherp beeld +5%

Slide 83

Slide 83 text

oplossing 1 overscan-correctie

Slide 84

Slide 84 text

de browser gebruikt 
 de randen van het beeld niet 1920 pixels

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

configureer de juiste overscan-correctie
 in de systeeminstellingen

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

oplossing 2 geen overscan

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

de viewport (heeft iemand aspirine bij zich?)

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

nintendo wii 800 pixels

Slide 106

Slide 106 text

nintendo wii u 980 pixels

Slide 107

Slide 107 text

lg webos 960 pixels

Slide 108

Slide 108 text

microsoft xbox 360 1041 of 1050 pixels

Slide 109

Slide 109 text

microsoft xbox one 1200 of 1236 pixels

Slide 110

Slide 110 text

sony playstation 3 1824 pixels

Slide 111

Slide 111 text

sony playstation 4 1920 pixels

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

device pixels != device pixels (natuurlijk niet)

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

3 afstand tot het scherm

Slide 116

Slide 116 text

50 cm

Slide 117

Slide 117 text

50 cm

Slide 118

Slide 118 text

4 meter

Slide 119

Slide 119 text

“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

Slide 120

Slide 120 text

Maak tekst en 
 afbeeldingen twee 
 tot drie keer groter

Slide 121

Slide 121 text

Maak tekst en 
 afbeeldingen twee 
 tot drie keer groter

Slide 122

Slide 122 text

Maak tekst en 
 afbeeldingen twee 
 tot drie keer groter

Slide 123

Slide 123 text

youtube tv website

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

4 wees voorzichtig 
 met feature-detectie

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

is er toekomst voor het web 
 op het grote scherm?

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

de nieuwe apple tv heeft 
 standaard geen browser

Slide 145

Slide 145 text

android tv heeft 
 standaard geen browser

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

e-readers

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

infrarood touchscherm

Slide 150

Slide 150 text

led’s sensors

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

e-ink beeldschermen (traag, trager, traagst)

Slide 153

Slide 153 text

microscopische balletjes die geladen zijn

Slide 154

Slide 154 text

microscopische balletjes die geladen zijn + – – +

Slide 155

Slide 155 text

+ – – + microscopische balletjes die geladen zijn

Slide 156

Slide 156 text

microscopische balletjes die geladen zijn

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

twee contrastrijke kleuren kunnen 
 exact hetzelfde lijken in zwart/wit

Slide 160

Slide 160 text

twee contrastrijke kleuren kunnen 
 exact hetzelfde lijken in zwart/wit

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text

portable consoles

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

twee schermen (eigenlijk verrassend normaal)

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

No content

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

?vreemde browsers!

Slide 177

Slide 177 text

“We cannot predict future behavior 
 from a current experience that sucks” 
 – Jason Grigsby http://blog.cloudfour.com/on-the-device-context-continuum/

Slide 178

Slide 178 text

maar wacht…

Slide 179

Slide 179 text

browsers! vreemde

Slide 180

Slide 180 text

vreemde browsers!

Slide 181

Slide 181 text

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

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

No content

Slide 184

Slide 184 text

bedankt niels leenheer
 @html5test