-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
240 lines (224 loc) · 12 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta name="viewport" content="width=device-width" />
<title>Noam</title>
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<!-- Header -->
<div id="homepage-container">
<header id="header" >
<div class="row">
<div class="small-12 large-4 columns">
<div id="logo"><img src="images/logo.png" width="300" alt="Noam"></div>
</div>
<div class="small-12 large-8 columns">
<nav>
<ul>
<li><a href="#" class="active">Meet Noam</a></li>
<li><a href="/docs/">Documentation</a></li>
<li><a href="#" class="button radius ">Download Starter Kit</a></li>
<li><a href="#" class="icon"><img src="images/icon_mail.png" width="24" alt="Email"></a></li>
</ul>
</nav>
<div id="social-links" >
<ul>
<li><a href="#"><img src="images/icon_fb.png" width="26" height="26" alt="Facebook" title="Facebook"></a></li>
<li><a href="#"><img src="images/icon_fblike.png" width="26" height="26" alt="Like us on Facebook" title="Like us on Facebook"></a></li>
<li><a href="#"><img src="images/icon_twitter.png" width="26" height="26" alt="Twitter" title="Twitter"></a></li>
<li><a href="#"><img src="images/icon_git.png" width="26" height="26" alt="Github" title="Github"></a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- End Header -->
<!-- Hero -->
<section id="hero">
<div class="row ">
<div class="small-centered small-10 columns content-module">
<h3>What is it?</h3>
</div>
</div>
<div class="row ">
<div class="small-centered small-10 columns content-module">
<h1>Bridge the gap between hardware and software.</h1>
<p>Noam is a messaging platform that allows you to create complex interactive products by easily networking hardware and software elements together.</p>
<img src="images/arrow_down.png" width="62" height="31" alt="">
</div>
</section>
<!-- End Hero -->
<!-- How -->
<section id="how" class="topshadow">
<div class="row">
<div class="small-centered small-10 columns content-module">
<h4>How does it work?</h4>
<h2>Make complex conversations simple.</h2>
<p>Technology has a very human problem—everything speaks a different dialect. Getting hardware and software talking through a single coordinated conversation is a real challenge. Noam moderates the conversation, provides translation between dialects, and handles messaging between participants. Now creating multi-element protoytpes is simple, flexible and powerful.</p>
<img src="images/icon_diagram.png" width="445" height="263" alt="">
</div>
</div>
<div class="row">
<div class="small-centered small-10 columns curved-divider-top"></div>
</div>
<div class="row">
<div class="small-centered small-10 medium-uncentered medium-6 large-3 columns detail ">
<img src="images/icon_group.png" width="137" height="122" alt="">
<h5>Supports <br class="show-for-medium-up"><span class="nowrap">Diverse Languages</span></h5>
<p>
Noam supports the platforms and languages you're already using, it's as easy as typing
<code>lemma.sendEvent(YourTopic, "A test message string.");</code>
</p>
</div>
<div class="small-centered small-10 medium-uncentered medium-6 large-3 columns detail ">
<img src="images/icon_network.png" width="137" height="122" alt="">
<h5>Simplifies <br class="show-for-medium-up"> Networking</h5>
<p>
Don't worry about protocols, schema, queues, data types, or message parsing. If you can connect to the LAN, you can use Noam. Just load the lemma.h library, and write
<code>color=lemma.hear(ColorValue)</code>
</p>
</div>
<div class="hide-for-large-up" style="clear:both;"></div>
<div class="small-centered small-10 medium-uncentered medium-6 large-3 columns detail ">
<img src="images/icon_messages.png" width="137" height="122" alt="">
<h5>Easy Scalable <br class="show-for-medium-up"> Architecture</h5>
<p>
The Noam server installs in seconds and handles a large volume of messages between an Participants that share the same WiFi or Ethernet network.
</p>
</div>
<div class="show-for-small-only" style="clear:both;"></div>
<div class="small-centered small-11 medium-uncentered medium-6 large-3 columns detail">
<img src="images/icon_group2.png" width="137" height="122" alt="">
<h5>Diverse Uses <br class="hide-for-small-only"><span class="nowrap">& Application</span></h5>
<p>
We've used Noam to prototype digital interactions in a car simulator, create sensor laden intelligent adaptable spaces, and kinetic sculptures with a 100-strong array of moving LED light bulbs.
</p>
</div>
</div>
</section>
<!-- End How -->
<!-- Why -->
<section id="why" class="topshadow">
<div class="row">
<div class="small-offset-1 small-10 columns content-module">
<h4>Why Noam?</h4>
<h2>Create More, Code Less</h2>
<p>We believe the world is full of untapped creative potential. Noam was designed to make building interactive prototypes easier for makers and coders of all kinds. It is optimized for flexibility, simplicity of use, and support of common technology dialects.</p>
</div>
</div>
<div class="row">
<div class="small-centered small-10 medium-uncentered medium-offset-2 medium-4 columns detail">
<h4>Simple & Powerful Messaging</h4>
<p>It’s easy to use a variety of messages without worrying about servers, protocols, encryption, queues, time stamps, or other configuration efforts. Noam balances simplicity with power so that you can build more and code less. </p>
</div>
<div class="show-for-small" style="clear:both;"></div>
<div class="small-centered small-10 medium-uncentered medium-4 columns end detail">
<h4>Designed for Experimentation</h4>
<p>When you’re prototyping, you’re experimenting and flexibility is paramount—Noam makes it easy to play with different inputs and outputs to create or interpret the same messages. </p>
</div>
</div>
<div class="row"><div class="small-centered small-10 columns end curved-divider-top"></div></div>
<div class="row">
<div class="small-centered small-10 columns content-module">
<h2>Open Source. Community Supported.</h2>
<p>We built Noam to solve a recurring problem we encountered during prototyping. Now we’re hoping you’ll help us make it better by using it to create and sharing code you develop with the community.</p>
</div>
</div>
<div class="row">
<div class="small-centered small-10 medium-uncentered medium-offset-2 medium-4 columns detail">
<img src="images/icon_open.png" width="100" height="99" alt="">
<h5>Open Source, Open Standards</h5>
<p>We use the best open standards and frameworks available like Ruby, Sinatra, JSON, and TCP. Noam is intended to be shared freely and licensed as open source software. </p>
</div>
<div class="show-for-small" style="clear:both;"></div>
<div class="small-centered small-10 medium-uncentered medium-4 columns end detail">
<img src="images/icon_community.png" width="100" height="99" alt="">
<h5>Community Enabled</h5>
<p>Noam’s growth as a prototyping platform depends upon your contribution. We’re hopeful the community will add features, write new Lemmas, and share components so we can all build more and code less.</p>
</div>
</div>
</section>
<!-- End Why -->
<!-- Details -->
<section id="details" class="topshadow ">
<div class="row">
<div class="small-centered small-10 columns end content-module">
<h4>Technical Details</h4>
<h2>Tech Specs & Architecture</h2>
</div>
</div>
<div class="row">
<div class="small-centered small-10 medium-8 large-uncentered large-offset-1 large-3 columns detail">
<p>Noam is a networked implementation of a pub/sub pattern using TCP/IP protocols.</p>
<p>Noam uses an speak/hear asynchronous event-based messaging metaphor.</p>
</div>
<div class="small-centered small-10 medium-8 large-uncentered large-4 columns detail middle-col">
<p>Noam Lemmas register to ‘hear’ named Messages, and execute asynchronous call-backs when those Messages are heard.</p>
<p>Lemmas can also ‘speak’ named Messages, and the Noam server will pass the Message to all Lemmas that have registered for it.</p>
</div>
<div class="show-for-small" style="clear:both;"></div>
<div class="small-centered small-10 medium-8 large-uncentered large-3 columns end detail " >
<p>Message data is transmitted in JSON, allowing for type-agnostic Lemma methods.</p>
<p>Discovery and registration with the Noam server are handled automatically by the Lemma, the only public methods exposed to the application are the ‘speak’ and ‘hear’ methods.</p>
</div>
</div>
</section>
<!-- End Details -->
<!-- Get Started -->
<section id="getstarted" class="topshadow">
<div class="row">
<div class="small-12 columns">
<h1>Get Started.</h1>
</div>
</div>
<div class="row">
<div class="small-centered small-10 medium-8 large-uncentered large-offset-1 large-3 columns detail">
<img src="images/icon_install.png" width="100" height="99" alt="">
<h5>1. Install the<br>Noam Moderator</h5>
<p>Download the starter kit, launch the Noam app, name your Moderator and you’re ready to go.</p>
</div>
<div class="small-centered small-10 medium-8 large-uncentered large-4 columns detail middle-col">
<img src="images/icon_application.png" width="100" height="99" alt="">
<h5>2. Try a Noam<br>Conversation</h5>
<p>Launch the example applications included in the starter kit and check out how topics and messages work.</p>
</div>
<div class="show-for-small" style="clear:both;"></div>
<div class="small-centered small-10 medium-8 large-uncentered large-3 columns end detail">
<img class="img3" src="images/icon_participants.png" width="127" height="98" alt="">
<h5>3. Add your own<br>Participants</h5>
<p>Download the Lemmas that will help you add your own Participants to the conversation.</p>
</div>
</div>
<div id="ctas" class="row">
<div class="small-6 columns">
<a href="#" class="right button radius">See Detailed Guide</a>
</div>
<div class="small-6 columns">
<a href="#" class="left button radius">Download Starter Kit</a>
</div>
</div>
</section>
<!-- End Get Started -->
<!-- Footer -->
<footer class="topshadow">
<div class="row">
<div class="small-6 columns">
<img id="footer-logo" src="images/logo_footer.png" width="74" height="34" alt="a project by IDEO">
</div>
<div class="small-6 columns ">
<span id="copyright" class="right">© 2014 IDEO</span>
</div>
</div>
</footer>
</div> <!-- #container -->
<!-- End Footer -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>