-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
139 lines (129 loc) · 6.99 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>carbonfive/html5-playground</title>
<link href=' http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'/>
<style type="text/css">
body {
margin-top: 1.0em;
background-color: #fff;
font-family: "Volkhorn,Helvetica,Arial,FreeSans";
line-height: 1.6em;
color: #000000;
}
#container {
margin: 0 auto;
width: 700px;
}
h1,h2,h3,h4,h5 { margin: 0; padding: 0; font-weight: normal;}
h1 { font-size: 2.25em; color: #000; margin: 1em 0 .5em 0; text-align: center;}
h1 .small { font-size: 0.4em; }
h2 { font-size: 1.5em; color: #000; text-align: center; margin: 1.5em 0 0 0; }
h3 { text-align: center; color: #000; margin: 0 0 1em 0; }
h4 { font-size: 1.4em; }
ul { margin: 30px 0 0 0; padding: 0; }
li { list-style: none; margin: 0 20px 20px 0; }
li h4 { margin: 0 0 0.4em 60px; }
li p { margin: 0 0 0 60px; font-size: .9em; }
li img { float: left; border: 1px solid #666; margin: 5px 20px 10px 0;}
a { color: #047; text-decoration: none; }
a:hover { text-decoration: underline;}
</style>
</head>
<body>
<div id="container">
<h1>A Few Experiments with HTML 5</h1>
<h3>Alex Cruikshank - <a href="http://www.carbonfive.com">Carbon Five</a></h3>
<h2>Single Page Applications</h2>
<p>
The following pages are exercises in minimalist programming. They are all written using
only HTML, JavaScript and CSS, and are completely contained within a single HTML file
(i.e. no JavaScript frameworks or external images). The goal of the exercises is to examine
the feasibility of developing small GUI applications to solve day-to-day problems entirely in
the browser. I was also hoping to familiarize myself with some new HTML 5 technologies
like the canvas tag. They were all written for fun, so no effort was spent on browser
compatibility (they all run in Safari 4+ and all but "surround" run on Firefox 3 on OS X).
<ul>
<li>
<a href="snowballs.html"><img src="snowballs-thumb.jpg"/></a>
<h4><a href="snowballs.html">Snowballs</a></h4>
<p>Snowballs is a video game that was mostly designed by my 7 year old daughter, Ada.
She started with a drawing that contained a maze filled with dots, a player and some
monsters, and she told me you throw snowballs at the monsters and build walls to block them.
I convinced her we could get roughly the same effect as walls if you could freeze the
monsters and then began developing. We started iterating and she continued to contribute
ideas which, somewhat surprisingly, always made the game more fun. The arrow keys move
the player and the spacebar launches a snowball. It's implemented as
a single canvas tag using a JavaScript interval as a run loop. The maze, players, monsters
and snowballs are all drawn with JS functions using the Canvas drawing API. Since this
application uses the Canvas tag, it won't run in Internet Explorer or older versions of
other browsers.
</p>
</li>
<li>
<a href="flashcards.html"><img src="flashcards-thumb.jpg"/></a>
<h4><a href="flashcards.html">Flashcards</a></h4>
<p>I wrote flashcards one evening when Ada's teacher suggested using flash cards to
help her memorize the words she shouldn't need to sound out. The idea is that the
parent clicks the spacebar when the child reads the word and they work together to
reduce the time needed to read all the words. The application doesn't need any graphics
(other than some external images at the end), so it doesn't use any HTML 5 features.
</p>
</li>
<li>
<a href="timetest.html"><img src="timetest-thumb.jpg"/></a>
<h4><a href="timetest.html">Timetest</a> - <a href="timetest.html#easy">Timetest (easy)</a></h4>
<p>
Like Flashcards, Timetest came about to help Ada with her schoolwork. In this case, she
was getting frustrated with a lesson on analog clocks, so I wrote this application to
make it a game. The goal is to answer as many questions as possible in the given
time. The test turned out to be more difficult than it really needed to be, so
I created an easy version (accessed by adding '#easy' to the url) that constrains times
to 5 minute intervals and labels the minutes. Since this
application uses the Canvas tag, it won't run in Internet Explorer or older versions of
other browsers.
</p>
</li>
<li>
<a href="arithmetic.html"><img src="arithmetic-thumb.jpg"/></a>
<h4><a href="arithmetic.html">Arithmetic</a></h4>
<p>
Arithmetic is another educational application designed to drill addition with carrying.
It provides spaces at the top which you can click to mark a carry from the previous column.
It doesn't have any fancy HTML 5 features but it does have a lot of stats.
</p>
</li>
<li>
<a href="surround.html"><img src="surround-thumb.jpg"/></a>
<h4><a href="surround.html">Surround</a></h4>
<p>
My wife and I had designed a fireplace surround and mantel for our remodeled living room,
but, when it came time to actually buy the materials and build the thing, we realized
we didn't know exactly how to scale it. Since the design was entirely composed of
rectangles, I realized it would be possible to build a simple one-off CAD program
to help us agree on some dimensions. The application makes use of the canvas tag and
the new HTML 5 slider inputs (which are currently only supported in Safari and Chrome
that I know of). It translates between pixels and feet/inches constrained to an 8th of
an inch to make the measurements more useful in the shop.
</p>
</li>
</ul>
</p>
<div class="footer">
get the source code on GitHub : <a href="http://github.com/carbonfive/html5-playground">carbonfive/html5-playground</a>
or right click on the applications and choose "view source" :).
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-620051-11");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>