-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
319 lines (302 loc) · 21 KB
/
Copy pathindex.html
File metadata and controls
319 lines (302 loc) · 21 KB
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<!--[if IE]>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Raleway:500,700' rel='stylesheet' type='text/css'>
<![endif]-->
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>nustori</title>
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<!--[if !IE]> -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400|Raleway:500,700' rel='stylesheet' type='text/css'>
<!-- <![endif]-->
<link rel="stylesheet" href="/_css/skeleton/base.css" />
<link rel="stylesheet" href="/_css/skeleton/skeleton.css" />
<link rel="stylesheet" href="/_css/skeleton/layout.css" />
<!-- <link rel="stylesheet" href="/_css/nustyles.css" /> -->
<link rel="stylesheet/less" href="/_css/nustyles.less" />
<script src="/_js/less-1.5.0.min.js" type="text/javascript"></script>
<!--[if gte IE 9]>
<style type="text/css">
body> header {
filter: none;
}
</style>
<![endif]-->
<!-- JS
================================================== -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!--
<script>
$(function() {
$.getScript('/_js/load.js');
});
</script>
-->
<!--
<script src="/_js/parallax.js"></script>
<script src="/_js/index.js"></script>
-->
<script src="/_js/nustori.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<header>
<h1>nustori</h1>
<nav>
<ul></ul>
</nav><span class="nav-label"></span>
</header>
<div class="container">
<section data-bg-img="wood.jpg" data-bgt-img="wood-strokes.jpg" data-bg-color="#FFFFFF">
<header>
<h1>Nustori</h1>
<p>
we have a new language. let's use it to tell a new story.
</p>
<p>
version 0.1.01 | proof of concept release
</p>
</header>
<div class="sixteen columns">
<h1 class="remove-bottom">let's build</h1>
<strong>we have the resources</strong>
</div>
<div class="two-thirds column">
<h3>the nustori front end</h3>
<p>
Nustori is a set of HTML, CSS, and JavaScript files that provide a long form content experience. This site demonstrates a prerelease proof of concept version of Nustori. Consider this demo site a rough sketch. <a href="https://github.com/belling/nustori">Download from GitHub</a>.
</p>
<p>
Unlike the pattern of long form experiences being popularized by <em>The New York Times</em>, <em>Medium</em>, <em>Verge</em>, and others, Nustori is looking to support traditionally visual storytelling forms, by augmenting them with text rather than the other way around.
</p>
<h3>v0.1.01 Release Notes</h3>
<ol>
<li>
Tested on Chrome, Firefox, Internet Explorer 9, and Safari and Chrome for iOS
</li>
<li>
Known display bugs at iPhone resolutions to be addressed in later versions
</li>
<li>
Added local font-faces, but not including in distro due to licensing concerns
</li>
<li>
Added multiple image sizes to reduce image load and memory usage on smaller displays
</li>
<li>
Tweaked CSS to account for inconsistent IE behaviors
</li>
</ol>
<h3>dependencies</h3>
<p>
This demo requires the following:
</p>
<ol>
<li>
<strong><a href="http://jquery.com/">jQuery</a>:</strong> Provides easy DOM manipulation and behavioral effects. Linked to in Google's repository.
</li>
<li>
<strong><a href="http://www.getskeleton.com/">Skeleton</a>:</strong> Provides responsive layout grid. Included in _css directory.
</li>
<li>
<strong><a href="">LESS</a>:</strong> Provides CSS preprocessing. Included in client side _js directory but should be moved to server side in future when Nustori.com is hosted on a platform that supports Node.js or similar.
</li>
</ol>
</div>
<div class="one-third column">
<h3>the origin stori</h3>
<p>
Nustori was inspired by a desire to explore long form content presentation, coupled with my perception that small and non-profit media organzations could use a hand in engaging user experience design and web development. However the ultimate goal of the project is to produce a framework that may find uses in other visually-dynamic applications, including ecommerce, narrative storytelling, blogging, and distance learning.
</p>
</div>
</section>
<section data-bg-img="catan.jpg" data-bgt-img="catan-desat.jpg" data-bg-color="#FFFFFF">
<div class="sixteen columns">
<h1 class="remove-bottom">the state of the stori</h1>
<h5>what's in this release?</h5>
<p>
The current version is the result of an organic "designing with html" process, resulting in some pretty messy CSS and JavaScript. The code does not adhere to DRY (Don't Repeat Yourself) principles very well and is ripe for refactoring. But it does acheive some initial goals, as outlined below.
</p>
</div>
<section class="x-scroll">
<div class="scroll">
<div class="sixteen columns left">
<h2 class="remove-bottom">x and y axis navigation</h2>
<h5>stories in multiple dimensions</h5>
<p>
Stories no longer have to follow a linear path. They can have branches and related information that augment the content. This Nustori release delivers primary content on the y-axis (vertical), with secondary content on the x-axis (horizontal). The section you are reading now demonstrates x-axis navigation.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">coversheet image presentation</h2>
<h5>static or with effects</h5>
<p>
Strong imagery draws the audience into a story, making them more likely to engage with long form content. This release features a flexible image effect in which each section features an image that covers the full window, then crossfades to a transition image as the page scrolls.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">responsive design</h2>
<h5>reliable display on whatever device the audience uses</h5>
<p>
Trying to guess the capabilities of the software or device a given audience member is using is a losing proposition. It's better for the site to adapt as best it can to diffent display environments. This release of Nustori was built using the <a href="http://www.getskeleton.com/">Skeleton responsive grid boilerplate</a> to provide responsive adaptability.
</p>
</div>
<div class="sixteen columns left">
<div class="two-thirds column left" style="margin-left: 0">
<h2 class="remove-bottom">clean, semantic HTML5</h2>
<h5>accessible, discoverable, maintainable, and current</h5>
<p>
It's the first day of 2014 as I write this. HTML5 is still a candidate recommendation but much of it is decently supported in modern browsers and HTML 4 became a spec 16 years ago. It's time.
</p>
</div>
<div class="one-third column right" style="margin-right: 0">
<h3>the dom for data</h3>
<p>
With semantic HTML we don't need a super complex data model, because the presentation defines its own schema-less structure that is easily parsed and understood.
</p>
</div>
</div>
<div class="sixteen columns left">
<div class="two-thirds column left" style="margin-left: 0">
<h2 class="remove-bottom">multiple navigation options</h2>
<h5>opportunity for all input methods</h5>
<p>
People navigate in multiple ways. Sometimes they click a mouse, sometimes they turn a scrollwheel, sometimes they swipe their finger, sometimes they use their finger to tap. Nustori seeks to provide an obvious option that makes sense for whatever navigation input is being used.
</p>
</div>
<div class="one-third column right" style="margin-right: 0">
<h3>dynamic nav generation</h3>
<p>
Because we are using the DOM for data definition, we can easily easily generate navigation elements on the fly with JavaScript.
</p>
</div>
</div>
</div>
</section>
</section>
<section data-bg-img="courthouse_sepia.jpg" data-bgt-img="courthouse.jpg" data-bg-color="#FFFFFF">
<div class="sixteen columns">
<h1 class="remove-bottom">the next chapters</h1>
<h5>what to work on next?</h5>
</div>
<section class="x-scroll">
<div class="scroll">
<div class="sixteen columns left">
<h2 class="remove-bottom">asynchronous asset loading</h2>
<h5>ajax is the foaming scrubber</h5>
<p>
This release of Nustori fetches every asset it needs on page load. Some of those assets are awfully big images that you aren't even going to see until you scroll a bit. They slow down the page load unnecessarily. The bigger and more complex the page gets, the worse this will be. The basic HTML structure is in place to load assets that are not being used at the moment asynchronously, via AJAX calls. Now it's just a matter of writing the JavaScript to do it.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">html5 media support</h2>
<h5>video and audio to make the stori pop</h5>
<p>
We are at a turning point in the use of online multimedia. Video and audio online has typically been "boxed in" with embedded players, effectively giving us webpages with little TVs and CD players in them. With native HTML5 media elements, video and audio has become just another part of the page alongside text and graphics. Future releases of Nustori will address ways of presenting media content, both as background design and as central content. An intriguing path would be to flip common presentations entirely on their heads and create a video-first long form presentation in which the timing of the video provides core navigation through text and other ancillary material.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">css filter effects</h2>
<h5>somewhere there's a place for us</h5>
<p>
This demo site acheives photographic effects by loading two versions of each giant picture and then crossfading between them. That's dumb. Unfortunately CSS filter effects support in browsers hasn't progressed to the point where I can use them and only upload one giant picture instead of two. The day I can use them safely is not yet in site.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">a server-side javascript application</h2>
<h5>I've seen the future, and it isn't LAMP</h5>
<p>
For more than a decade, lightweight, open-source backend web development has relied on combinations of Apache Web Server and PHP/Perl/Python/Etc. Meanwhile, enterprise backend web development has tended towards application development in Java/ASP.NET/Etc. With the emergence of Node.js, a remarkable thing is happening: JavaScript, the language of front end scripting, has also become a viable option for back end application development. This changes everything, and well it should. With projects like <a href="https://ghost.org/">Ghost</a> being built with server-side JS, it's clear that this is where the serious work is headed.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">reduce reliance on jQuery</h2>
<h5>it's a fine line between helper and crutch</h5>
<p>
Don't get me wrong -- I <em>like</em> using jQuery. Writing
<code>
$('#thing')
</code>
is ever so much more enjoyable than writing
<code>
document.getElementById('thing')
</code>
. But native JavaScript is faster and using it to write core Nustori functions would help speed things up.
</p>
</div>
<div class="sixteen columns left">
<h2 class="remove-bottom">swappable themes and effects</h2>
<h5>some sort of plugin architecture is in order</h5>
<p>
I have no illusions about my coding skills. I'm competent, but I'm a liberal arts and communications guy, not a CS guy. Figuring out the best way to write plugins and themes in a web application is a little daunting to me, but I'm willing to give it a go. Or perhaps you want to help out? If so, get in touch through the <a href="https://github.com/belling/nustori">Nustori GitHub project</a>.
</p>
</div>
</div>
</section>
</section>
<section data-bg-img="painted_hills_blur.jpg" data-bgt-img="painted_hills.jpg" data-bg-color="#FFFFFF">
<div class="sixteen columns">
<h1 class="remove-bottom">a(n eventual) rich publishing system</h1>
<h5>Future version</h5>
</div>
<div class="sixteen columns">
<p>
Traditional Content Management Systems are better at "management" than "content." The ultimate expression of Nustori's goals would be a jointly distributed back end web application and front end presentation. The back end architecture would stress loose coupling between the data layers and the presentation layer, avoiding the mixing of logic and formatting that is endemic to many projects for popular CMSes such as Drupal and WordPress.
</p>
<p>
Additionally, in the real world, many websites aren't simple and self-contained like this demo site. They are interconnected with external data sources, which feed them content in a mishmash of formats, ranging from XML to JSON to preformatted HTML widgets that come with their own styling and look like parasitic growths on the site. An envisioned Nustori publishing system would collect and normalize these data sources into a serialized document to be intelligently transformed and formatted for use on the site.
</p>
<p>
Often, these disparate data sources aren't even external, but are internal to the publisher's own systems. A main website built with Drupal may coexist with a blog built using WordPress, for example. As envisioned, a full Nustori publishing system would be extended by modules and plugins built to provided serialized document output from these legacy CMSes. An envisioned architecture for Nustori publishing is heavily inspired by the publishing archicture I helped design and implement for <a href="http://REI.com">REI.com</a>, building on ideas proven out on a large ecommerce site with multiple use cases and heavy usage.
</p>
</div>
</section>
<section data-bg-img="harstine.jpg" data-bgt-img="harstine.jpg" data-bg-color="#FFFFFF">
<div class="sixteen columns">
<h1 class="remove-bottom">credits and license</h1>
<h5>the fine print</h5>
</div>
<div class="sixteen columns">
<p>
Nustori software, design, and content is copyright © 2013 - 2014 by Brook Ellingwood. Me: <a href="http://brookellingwood.com">My website</a> | <a href="http://linkedin.com/in/brookellingwood/">My LinkedIn Profile</a>
</p>
<p>
The Nustori software and design, not including photographic elements, is released under a non-restrictive open-source license that I haven't yet picked. All third party software included in the Nustori distribution retains the original licenses under which it was originally distributed.
</p>
<p>
Photographs and derivative images © 2013 - 2014 by Brook Ellingwood. All rights reserved.
</p>
</div>
</section>
<!-- container -->
</div>
<!-- End Document
================================================== -->
</body>
</html>