?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?
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
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)
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/