Human-Computer Interaction Human-Computer Interaction Tracking Hanyang University Jong-Il Park.
HTML5 and Human Interaction
-
Upload
thebeebs -
Category
Technology
-
view
402 -
download
0
description
Transcript of HTML5 and Human Interaction
![Page 1: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/1.jpg)
Martin Beeby - @thebeebs
![Page 2: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/2.jpg)
![Page 3: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/3.jpg)
![Page 4: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/4.jpg)
![Page 5: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/5.jpg)
![Page 6: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/6.jpg)
Human sensors are incredible
Computer sensors are dumb
Make dumb look magic
![Page 7: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/7.jpg)
![Page 8: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/8.jpg)
![Page 9: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/9.jpg)
Provide Keyboard Navigation
Audio Apps. Prev/Next Track
http://bit.ly/mousetrapJs
![Page 10: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/10.jpg)
Canvas Conf
Canvas Conf
<input type=number>
<input type=search>
![Page 11: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/11.jpg)
![Page 12: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/12.jpg)
![Page 13: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/13.jpg)
![Page 14: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/14.jpg)
![Page 15: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/15.jpg)
![Page 16: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/16.jpg)
CSS3 animations
@keyframes upKeys { from { transform:scale(0.95, 0.95) } to { transform:scale(1, 1) }
}@keyframes downKeys {
from { transform:scale(1, 1) } to { transform:scale(0.95, 0.95) }
}.up {
animation: upKeys 167ms cubic-bezier(0.1, 0.9, 0.2, 1); animation-fill-mode: forwards;
} .down {
animation: downKeys 167ms cubic-bezier(0.1, 0.9, 0.2, 1); animation-fill-mode: forwards;
}
![Page 17: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/17.jpg)
![Page 18: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/18.jpg)
![Page 19: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/19.jpg)
One in 30 taps will miss the
target
1 in 100 1 in 200
0.00%
5.00%
10.00%
15.00%
20.00%
25.00%
30.00%
3mm 5mm 7mm 9mm 11mm 13mm
![Page 20: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/20.jpg)
2mm padding (10 pixel) between targets
7x7mm = 40 pixels
5x5mm = 30 pixels
9x9mm = 50 pixels
2mm padding (10 pixels) between targets
2mm padding (10 pixels) between targets
![Page 21: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/21.jpg)
![Page 22: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/22.jpg)
![Page 23: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/23.jpg)
![Page 24: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/24.jpg)
![Page 25: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/25.jpg)
![Page 26: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/26.jpg)
![Page 27: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/27.jpg)
![Page 28: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/28.jpg)
![Page 29: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/29.jpg)
![Page 30: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/30.jpg)
![Page 31: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/31.jpg)
![Page 32: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/32.jpg)
![Page 33: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/33.jpg)
![Page 34: HTML5 and Human Interaction](https://reader034.fdocuments.in/reader034/viewer/2022042623/54c2dec84a795997108b465c/html5/thumbnails/34.jpg)