-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathi.html
142 lines (142 loc) · 6.96 KB
/
i.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script type="text/javascript" src="http://use.typekit.com/aow5drr.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset='utf-8' />
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<meta content='The Miso Project' name='description' />
<meta content='The Miso Project' name='name' />
<meta content='width=device-width' name='viewport' />
<title>
The Miso Project
</title>
<link href='/stylesheets/screen.css' rel='stylesheet' />
<link href='/stylesheets/codemirror.css' rel='stylesheet' />
</head>
<body>
<article class='miso'>
<section class='intro big'>
<img alt="Logo" class="logo" src="/images/logo.png"/>
<div class='text'>
<p>
Miso is an open source toolkit designed to expedite the creation of high-quality interactive storytelling and data visualisation content.
</p>
<p>
Miso consists of libraries that simplify the process of managing data, building and using reusable components and authoring narratives. Miso is currently in development and will be released in stages over the coming months. Follow along:
<a href='http://www.twitter.com/themisoproject'>@TheMisoProject</a>
&
<a href='http://www.github.com/misoproject'>Github</a>
</p>
</div>
</section>
<section class='big'>
<a href='/dataset'>
<h2>
<svg class='icon' viewBox='0 0 28.141 23.273'>
<path xmlns="http://www.w3.org/2000/svg" fill="#010101" d="M21.523,11.255c0-2.768-1.502-5.187-3.731-6.485V0l-3.767,1.971L10.257,0v4.77 c-2.232,1.299-3.734,3.717-3.734,6.485c0,0.782,0.119,1.534,0.341,2.243l5.285-2.126c-0.002-0.041-0.002-0.077-0.002-0.116 c0-1.036,0.839-1.881,1.877-1.881c1.036,0,1.878,0.845,1.878,1.881c0,0.479-0.179,0.917-0.472,1.247l-0.004-0.007 c-0.346,0.384-0.843,0.628-1.402,0.628c-0.784,0-1.456-0.483-1.735-1.168l-0.008,0.004l-1.988,0.798l-3.23,1.289 c0,0.001,0,0.001,0,0.001l-5.574,2.232L0,21.244l4.29,2.029c0,0,11.733-4.626,13.286-5.41 C19.924,16.596,21.523,14.112,21.523,11.255z"/>
<path xmlns="http://www.w3.org/2000/svg" fill="#010101" d="M26.605,16.279l-4.925-1.97c-0.705,1.74-2.006,3.182-3.653,4.06l-0.005,0.003l-0.006,0.001 c-0.751,0.368-2.329,1.014-3.127,1.331l8.92,3.569l4.331-2.493L26.605,16.279z"/>
</svg>
<span>
Dataset
</span>
</h2>
<div class='content'>
<p>
Dataset makes managing the data behind client-side visualisations easy. It takes care of loading, parsing, sorting, filtering and querying of datasets as well as the creation of derivative datasets
<span class='color'>
→
</span>
</p>
</div>
</a>
</section>
<section class='soon big'>
<h2>
<svg class='icon' viewBox='0 0 30 30'>
<path xmlns="http://www.w3.org/2000/svg" fill="#999999" d="M14.173,0C6.346,0,0,6.346,0,14.173C0,22,6.346,28.346,14.173,28.346C22,28.346,28.346,22,28.346,14.173 C28.346,6.346,22,0,14.173,0z M14.166,21.486c-4.039,0-7.313-3.274-7.313-7.313c0-4.039,3.274-7.313,7.313-7.313 c4.039,0,7.313,3.274,7.313,7.313C21.479,18.211,18.205,21.486,14.166,21.486z"/>
</svg>
<span>
Component Framework
</span>
</h2>
<div class='content'>
<p>
Release: May 2012. <br>The component framework provides a structure with which to build reusable, cross-platform components and wire them together, expediting the creation of interactive content and increasing code reuse.
</p>
</div>
</section>
<section class='soon big'>
<h2>
<svg class='icon' viewBox='0 0 30 30'>
<path xmlns="http://www.w3.org/2000/svg" fill="#999999" d="M14.173,0C6.346,0,0,6.346,0,14.173C0,22,6.346,28.346,14.173,28.346C22,28.346,28.346,22,28.346,14.173 C28.346,6.346,22,0,14.173,0z M14.166,21.486c-4.039,0-7.313-3.274-7.313-7.313c0-4.039,3.274-7.313,7.313-7.313 c4.039,0,7.313,3.274,7.313,7.313C21.479,18.211,18.205,21.486,14.166,21.486z"/>
</svg>
<span>
Component Library
</span>
</h2>
<div class='content'>
<p>
Release: May 2012. <br> A library of pre-built battle-tested components handling everything from multi-media slideshows to data visualisation, mapping interface components.
</p>
</div>
</section>
<section class='soon big'>
<h2>
<svg class='icon' viewBox='0 0 30 30'>
<path xmlns="http://www.w3.org/2000/svg" fill="#999999" d="M14.173,0C6.346,0,0,6.346,0,14.173C0,22,6.346,28.346,14.173,28.346C22,28.346,28.346,22,28.346,14.173 C28.346,6.346,22,0,14.173,0z M14.166,21.486c-4.039,0-7.313-3.274-7.313-7.313c0-4.039,3.274-7.313,7.313-7.313 c4.039,0,7.313,3.274,7.313,7.313C21.479,18.211,18.205,21.486,14.166,21.486z"/>
</svg>
<span>
Narration Framework
</span>
</h2>
<div class='content'>
<p>
Release: June 2012. <br> A framework for simply authoring complex narrated interactive content.
</p>
</div>
</section>
</article>
<footer>
<div class='container'>
<section>
<h2>
A joint project between
</h2>
<div class='content'>
<a href='http://www.guardian.co.uk/profile/guardian-interactive-department'>
<img alt="Guardian" src="/images/guardian.png"/>
</a>
<a href='http://www.bocoup.com'>
<img alt="Bob" src="/images/bob.png"/>
</a>
</div>
</section>
<section>
<h2>
With sponsorship from
</h2>
<div class='content'>
<a href='http://www.guardian.co.uk/development'>
<img alt="Global dev" src="/images/global-dev.png"/>
</a>
<a href='http://www.gatesfoundation.org/'>
<img alt="Gates" src="/images/gates.png"/>
</a>
</div>
</section>
</div>
</footer>
<script src='/js/jquery.min.js'></script>
<script src='/js/miso.ds.deps.js'></script>
<script src='/js/bootstrap/transition.js'></script>
<script src='/js/bootstrap/collapse.js'></script>
<script src='/js/codemirror.js'></script>
<script src='/js/main.js'></script>
<script src='/js/nav.js'></script>
</body>
</html>