html5 and human interaction
DESCRIPTION
My Talk at Canvas Conf 2013 : http://storify.com/thebeebs/canvas-conference-html5-and-human-interactionTRANSCRIPT
Martin Beeby - @thebeebs
Human sensors are incredible
Computer sensors are dumb
Make dumb look magic
Provide Keyboard Navigation
Audio Apps. Prev/Next Track
http://bit.ly/mousetrapJs
Canvas Conf
Canvas Conf
<input type=number>
<input type=search>
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;
}
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
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
