Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

HTML5 and Human Interaction

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Thorp_illustration
Thorp_illustration
Wird geladen in …3
×

Hier ansehen

1 von 35 Anzeige
Anzeige

Weitere Verwandte Inhalte

Aktuellste (20)

Anzeige

HTML5 and Human Interaction

  1. 1. Martin Beeby - @thebeebs
  2. 2. Human sensors are incredible Computer sensors are dumb Make dumb look magic
  3. 3. Provide Keyboard Navigation Audio Apps. Prev/Next Track http://bit.ly/mousetrapJs
  4. 4. Canvas Conf <input type=search> Canvas Conf <input type=number>
  5. 5. 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; }
  6. 6. 30.00% 25.00% 20.00% One in 30 taps will miss the target 15.00% 10.00% 1 in 100 5.00% 1 in 200 7mm 9mm 0.00% 3mm 5mm 11mm 13mm
  7. 7. 7x7mm = 40 pixels 2mm padding (10 pixel) between targets 9x9mm = 50 pixels 2mm padding (10 pixels) between targets 5x5mm = 30 pixels 2mm padding (10 pixels) between targets
  8. 8. @thebeebs http://www.ubelly.com martin.beeby@microsoft.com

×