-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
78 lines (78 loc) · 4.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Text Entry on Tiny QWERTY Soft Keyboards – Live demos</title>
<meta name="Title" content="Text Entry on Tiny QWERTY Soft Keyboards" />
<meta name="Author" content="Luis Leiva" />
<meta name="Description" content="Demo page for our work on text entry on very small touchscreens, presented at CHI'15." />
<meta name="Keywords" content="Text Entry; Small Screens; Small Devices; QWERTY; Diminutive Touchscreen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css" />
<style>
* { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body { font:normal 100% "Open Sans", sans-serif; padding:0 1em; max-width:840px; margin:auto; }
#forkMe { top:3em; right:-6em; color:#fff; display:block; position:fixed; text-align:center; text-decoration:none; letter-spacing:.06em; background-color:#A00; padding:0.5em 5em 0.4em 5em; text-shadow:0 0 0.75em #444; box-shadow:0 0 0.5em rgba(0,0,0,0.5); transform:rotate(45deg) scale(0.75,1); font:bold 16px/1.2em Arial, Sans-Serif; -webkit-text-shadow:0 0 0.75em #444; -webkit-box-shadow:0 0 0.5em rgba(0,0,0,0.5); -webkit-transform:rotate(45deg) scale(0.75,1); z-index:10; }
#forkMe:before { content:''; top:0; left:0; right:0; bottom:0; position:absolute; margin:-0.3em -5em; transform:scale(0.7); -webkit-transform:scale(0.7); border:2px rgba(255,255,255,0.7) dashed; }
#forkMe:hover {opacity:0.9;}
nav img { margin:3%; }
h1, h2, .center { text-align:center; }
h1 { font-size:240%; font-weight:lighter; }
h2 { margin:1em 0; }
dl dt,
dl dd { display:inline; }
dl dd::after { display:block; content:''; margin-bottom:0.5em; }
footer { margin-top:2em; border-top:medium double #999; padding-top:0.5em; }
footer p { padding-bottom:0.5em; }
</style>
</head>
<body>
<a id="forkMe" href="https://github.com/luileito/tinyqwerty">Fork me on GitHub</a>
<h1>Live Demos of Tiny QWERTY Soft Keyboards</h1>
<nav>
<h2>Choose a keyboard</h2>
<p class="center">
<a href="./zoomboard/index.html"><img src="./common/img/teaser-zoomboard.jpg" alt="ZoomBoard" title="ZoomBoard" /></a>
<a href="./callout/index.html"><img src="./common/img/teaser-callout.jpg" alt="Callout" title="Callout" /></a>
<a href="./zshift/index.html"><img src="./common/img/teaser-zshift.jpg" alt="ZShift" title="ZShift" /></a>
</p>
</nav>
<main>
<h2>Usage instructions</h2>
<dl class="keyboard-usage">
<dt><strong>ZoomBoard keyboard:</strong></dt>
<dd>Tap/Click once on a key and the keyboard will enlarge the tapped area. Tap/Click again on the desired key to enter the character.</dd>
<dt><strong>Callout keyboard:</strong></dt>
<dd>Press/Click a key and a callout will inform you about the character that will be entered. Release the key to enter the character.</dd>
<dt><strong>ZShift keyboard:</strong></dt>
<dd>Press/Click a key and a zoomed callout will inform you about the character that will be entered. Release the key to enter the character.</dd>
</dl>
<h2>Common shortcuts</h2>
<p class="center"><img src="./common/img/arrowkeys.jpg" alt="Shortcuts" /></p>
<dl class="common-keys">
<dt><strong>Swipe Up over the keyboard</strong> or <strong>Press the Up arrow key</strong></dt>
<dd>to change keyboard layout <em>forward</em>.</dd>
<dt><strong>Swipe Down over the keyboard</strong> or <strong>Press the Down arrow key</strong></dt>
<dd>to change keyboard layout <em>backward</em>.</dd>
<dt><strong>Swipe Right over the keyboard</strong> or <strong>Press the Right arrow key</strong></dt>
<dd>to <em>enter</em> a space.</dd>
<dt><strong>Swipe Left over the keyboard</strong> or <strong>Press the Left arrow key</strong></dt>
<dd>to <em>delete</em> the previous character.</dd>
<dt><strong>Tap/Click on the upper part of the screen</strong> or <strong>Press the Enter key</strong></dt>
<dd>to <em>submit</em> the entered text. Actually nothing gets submitted... it's just a demo.</dd>
</dl>
</main>
<footer>
<p>
<strong>Disclaimer:</strong> ZoomBoard was developed by <a href="http://from.so/">S. Oney</a>,
our version was adapted for conducting some research experiments.
You can download the source code of the original ZoomBoard prototype at <a href="https://github.com/soney/zoomboard">GitHub</a>.
</p>
<p>
Discover more about this work at <a href="http://personales.upv.es/luileito/tinyqwerty/">http://personales.upv.es/luileito/tinyqwerty/</a>
</p>
</footer>
</body>
</html>