-
Notifications
You must be signed in to change notification settings - Fork 88
/
Copy pathindex.html
130 lines (124 loc) · 7.11 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
<html>
<head>
<title>Waterbear: Welcome</title>
<link href="stylesheets/waterbear.css" rel="stylesheet">
<script src="lib/prefixfree.min.js"></script>
<meta charset="utf-8">
<meta name="description" content="Waterbear is a toolkit for creating drag-and-drop programming languages.">
<link rel="shortcut icon" href="/favicon.ico?v=2">
<script type="text/javascript">
<!-- Google Analytics -->
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-58671174-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<header class="s1"><img class="logo" src="images/logo/waterbear_icon_logo.svg"> waterbear</header>
<section class="s2">
<div>
<div class="s2-1"></div>
<div class="s2-2 steampunk">
<img src="images/png/steampunk.png">
</div>
<div class="s2-3">
<div>
<h2>The</h2>
<h1>WATERBEAR</h1>
<h2>welcomes you!</h2>
<p>Waterbear is a toolkit for making programming more accessible and fun. Having a visual language means you don't have to focus on learning a syntax to start programming.</p>
<a class="button" href="playground.html" onclick="_gaq.push(['_trackEvent', 'Marketing', 'tryDemo', 'Top Landing Page']);">Try it out</a>
</div>
</div>
</div>
</section>
<section class="s3">
<div>
<div class="s3-1">
<div class="circle community"></div>
<h2>Community</h2>
<p>Join our community of people using Waterbear to solve problems. Whether you are using it to build cool projects, teaching others to code, or contributing to expand Waterbear's capabilities, we would love to hear about how you use Waterbear. <a href="mailto:[email protected].">Email us</a> and join the <a href="http://lists.waterbearlang.com/listinfo.cgi/discuss-waterbearlang.com">mailing list</a>.</p>
</div>
<div class="s3-2">
<div class="circle scratch"></div>
<h2>Same Step</h2>
<p>Our blocks are heavily inspired by MIT's <a href="http://scratch.mit.edu">Scratch</a> language, but the goal is not to slavishly duplicate Scratch, or to create a programming language, but to create a visual syntax tool that can be used with a variety of languages and projects, and to make it as widely available as possible. Waterbear runs in a variety of web browsers, including Mobile Safari on the iPad</p>
</div>
<div class="s3-3">
<div class="circle tardigrade"></div>
<h2>The Reason Why</h2>
<p>Waterbears, also known as tardigrades, or moss piglets, are probably the most resilient creatures on Earth, able to survive extremes of heat and cold, pressure (high pressure and the vacuum of space), dehydration, radiation, environmental toxins. Since we want to be able to create code that is robust, they are an appropriate mascot. Also, they are cute.
<br><i>[mostly via <a href="https://en.wikipedia.org/wiki/Tardigrade">Wikipedia</a>]</i></p>
</div>
<div class="s3-4">
<div class="circle github"></div>
<h2>Fork us</h2>
<p>Our Waterbear is beta software and under active development as we work to improve the interface, organize the blocks, and build curriculum around it. <a href="https://github.com/waterbearlang/waterbear">Fork us on Github</a> and help us to make Waterbear even better!</p>
</div>
</div>
</section>
<section class="s4">
<div class="s4-1">
<p><b>Waterbear</b> is also a toolkit for making programming more accessible and fun. Having a visual language means you don't have to focus on learning a syntax to start programming. It's good for kids, artists, and anyone who would like to make thir computer do something new without having to become a "programmer" (although it could lead to that).</p>
<blockquote>"It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self critical"
<br>
<br><i>— Alan Perlis, first recipient of the Turing Award</i></blockquote>
<p>Waterbear's system of draggable, snappable blocks are build using clean HTML5, CSS3, and Javascript. The Javascript playground for Waterbear allows you to create Waterbear scripts, see the Javascript it will generate, and run it right in the browser.</p>
</div>
<div class="s4-2">
<iframe width="100%" height="300px" src="play.html?example=waterbear_in_space"></iframe>
</div>
</section>
<section class="s5">
<div class="s5-1">
<h2>Wiki</h2> Our featured pages from the Wiki.
<br>
<br>
<a href="https://github.com/waterbearlang/waterbear/wiki/Hello-Waterbear">Introduction: Hello Waterbear</a>
<br>
<br>
<a href="https://github.com/waterbearlang/waterbear/wiki/Contributors-and-Acknowledgements">Contributors</a>
<br>
<br>
<a href="https://github.com/waterbearlang/waterbear/wiki/How-to-Contribute">How to Contribute</a>
</div>
<div class="s5-2">
<h2>Friends</h2> Other projects based on Waterbear.
<br>
<br>
<a href="#">ProcessingJS</a>
<br>
<label>write Processing with blocks</label>
<br>
<br>
<a href="#">NodeJS</a>
<br>
<label>use blocks for server-side development</label>
</div>
<div class="s5-3">
<h2>Help us</h2> Waterbear is better with your help.
<br>
<br>
<a href="http://lists.waterbearlang.com/listinfo.cgi/discuss-waterbearlang.com">Discuss Waterbear on the mailing list</a>
<br>
<br>
<a href="https://github.com/waterbearlang/waterbear/issues">File an issue or feature request</a>
</div>
<div class="s5-4">
<h2>Keep in touch</h2>
<a class="btn ico ico-github" href="https://github.com/waterbearlang/waterbear/">Fork us</a>
<a class="btn ico ico-twitter" href="https://twitter.com/waterbearlang">Follow us</a>
<a class="btn ico ico-mailing-list" href="mailto:[email protected].">Mail us</a>
<a class="btn ico ico-blog" href="http://waterbearlang.github.io/">Read our blog</a>
</div>
</section>
</body>
</html>