This repository has been archived by the owner on Dec 15, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
220 lines (213 loc) · 11.3 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
<!DOCTYPE html>
<html>
<head>
<title>School of Data:arts</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- css: -->
<!--link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,700"-->
<link rel="stylesheet" href="3rd/iconfont/css/pe-icon-7-stroke.min.css">
<link rel="stylesheet" href="3rd/socialfont/css/socicon.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="custom.css">
<!-- js: -->
<script src="3rd/jquery-1.11.2.min.js"></script>
<script src="script.js"></script>
<!-- handsontable:
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css"> -->
</head>
<body>
<div class="head">
<!-- /a.l (left top menu)-->
<div class="r">
<input id="explore" type="checkbox" name="explore">
<label for="explore" data-quicktap><small>~jump</small></label>
<nav>
<ul class="menu">
<li><a href="#about" target="_blank">About</a></li>
<li><a href="http://blog.soda.camp" target="_blank">Blog</a></li>
<!--<li><a href="#gallery">Gallery</a></li>-->
<li><a href="#inspire">Inspired</a></li>
<li><a href="#contact">Contact</a></li>
<li class="social"><a href="https://twitter.com/sodacamper">a</a></li>
<li class="social"><a href="https://facebook.com/sodacamper">b</a></li>
<!--<li class="social"><a href="#instagram">x</a></li>
<li class="social"><a href="#linkedin">j</a></li>-->
</ul>
<!-- /menu-->
</nav>
<!-- /nav (site navigation holder)-->
</div>
<!-- /r (right top menu)-->
</div>
<!-- /head-->
<div class="main">
<section style="background-image:url('images/33507074_44552399bd_o.jpg')" class="cover mod-light">
<figure>
<figcaption>
<p style="text-align:left">
<h1 style="display:none">School of Data:arts</h1>
</p><p style="padding-bottom:3em">
<img src="images/header.png" alt="logo" title="Welcome to the School of Data:arts">
</p>
</figcaption>
</figure>
</section>
<!-- /section.cover (mods: light)-->
<!--<section class="mod-wide"><img src="images/Saladeaula_itapevi_CROP.jpg" alt=""></section>-->
<!-- /section.mod-wide -->
<section class="call" id="about">
<FORM Method="POST" ACTION="http://lists.soda.camp/mailman/subscribe/colloquy">
<p>
This is a new collaboration to promote a fusion of <b>data literacy</b> and <b>computational art</b>.
An initiative of <a href="http://en.wikipedia.org/wiki/Socratic_questioning" class="def">socratic learning</a>,
a <a href="http://encyclopedia2.thefreedictionary.com/Communal+Movement" class="def">communal movement</a> in support of
<a href="http://www.citizenethics.org.uk/" class="def">citizen ethics</a> and
<a href="http://okfn.org" class="def">knowledge openness</a>.
This project is aligned with the Swiss association
<a href="http://make.opendata.ch/school">Opendata.ch</a> and the international
<a href="http://schoolofdata.org">School of Data</a>.
<br><br>
For more information, <a href="http://blog.soda.camp">have a look at our blog</a>, <a href="#contact">contact us</a>, or enter your e-mail here to join our merry list!<br>
<INPUT type="Text" name="email" size="13" value=""><INPUT type="Submit" value="Subscribe">
</p>
</FORM>
</section>
<!-- /section.call -->
<section class="call" id="inspire">
<h2>Greetings</h2>
<p>
<a href="http://make.opendata.ch/school">MAKE</a> /
<a href="http://schoolofdata.org/">ScoDa</a> /
<a href="http://okfnlabs.org">OKLabs</a> /
<a href="http://theodi.org/culture">ODI</a> /
<a href="http://www.meetup.com/Hacks-Hackers-Zurich/">Hacks/Hackers</a> /
<a href="http://demodays.org">Echtzeit</a>
<br/>
<a href="http://www.hek.ch/">HeK</a> /
<a href="http://www.ecal.ch/">éc a l</a> /
<a href="https://www.zhdk.ch/">ZHdK</a> /
<a href="https://www.media.mit.edu/">MITml</a> /
<a href="http://golancourses.net/2014/resources-and-tools/academic-integrity/">IACD</a> /
<a href="http://sfpc.io/">SFPC</a> /
<a href="http://schoolofma.org/">School of Maaa</a>
<br/>
<a href="http://rhizome.org/">Rhizome</a> /
<a href="http://www.yrs.io/">Rewired State</a> /
<a href="http://www.citizenethics.org.uk/">Citizen Ethics</a> /
<a href="http://www.wisecrack.co/8bitphilosophy/">8bitphilosophy</a>
</p>
</section>
<!-- /section.call -->
<section class="call" id="inspire">
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/sodacamper/favorites" data-widget-id="598238423573467136">Favorite Tweets by @sodacamper</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</section>
<!--
<section class="mediagrid mod-pad mod-fixed mod-hover" id="gallery">
<h3>Gallery</h3>
<article data-zoom-on="projects/20Hzcropped_smaller1.jpg">
<div style="background-image:url('projects/20Hzcropped_smaller1.jpg')" class="case">
<div class="titles">
<h2><a href="http://semiconductorfilms.com/art/20hz/">20 Hz</a> by Semiconductor Films</h2>
<p>"A geo-magnetic storm" visualised</p>
</div>
</div>
</article>
<article data-zoom-on="projects/lifelogging-one-human-heartbeat.jpg" class="media-up mod-r">
<div style="background-image:url('projects/lifelogging-one-human-heartbeat.jpg')" class="case">
<div class="titles">
<h2><a href="http://datatelling.com/projects/onehumanheartbeat/">One Human Heartbeat</a> by Jen Lowe</h2>
<p>"I've put my heartbeat on the internet."</p>
</div>
</div>
</article>
<article data-zoom-on="projects/martin_krzywinski.png">
<div style="background-image:url('projects/martin_krzywinski.png')" class="case">
<div class="titles">
<h2><a href="http://mkweb.bcgsc.ca/pi/piday2015">Celebrate π Day</a> by Martin Krzywinski</h2>
<p>"This year I use a treemap approach to encode the digits in the style of Piet Mondrian."</p>
</div>
</div>
</article>
<article data-zoom-on="projects/picturethis.png">
<div style="background-image:url('projects/picturethis.png')" class="case">
<div class="titles">
<h2><a href="http://make.opendata.ch/wiki/project:portrait_domain">Portrait Domain</a></h2>
<p>identity replacement with archival material</p>
</div>
</div>
</article>
<article data-zoom-on="projects/dataalps.png">
<div style="background-image:url('projects/dataalps.png')" class="case">
<div class="titles">
<h2><a href="http://opendata.utou.ch/alps/">Open Data Alps</a></h2>
<p>visualiser of geographically irreverent data</p>
</div>
</div>
</article>
<article data-zoom-on="projects/cake.png">
<div style="background-image:url('projects/cake.png')" class="case">
<div class="titles">
<h2><a href="http://opendata.utou.ch/cake/">Let there be data cake!</a></h2>
<p>(and fruitcake and muffins too, please)</p>
</div>
</div>
</article>
<article data-zoom-on="projects/threeffitti.png">
<div style="background-image:url('projects/threeffitti.png')" class="case">
<div class="titles">
<h2><a href="http://opendata.utou.ch/graff/zuri3d.html">threeffitti</a></h2>
<p>a virtual city of real street art</p>
</div>
</div>
</article>
<article data-zoom-on="projects/borndied.png" class="media-fill">
<div style="background-image:url('projects/borndied.png')" class="case">
<div class="titles">
<h2><a href="http://opendata.utou.ch/borndied/">born/died</a></h2>
<p>birth rates and death rates animated</p>
</div>
</div>
</article>
</section>
-->
<!-- /section.mediagrid (mods: pad, fixed, hover)-->
<section class="call" id="contact">
<h2>Say hello</h2>
<!--<article class="pane mod-nb mod-dark">
<form action="contact.php" method="post" class="aform">
<fieldset>
<div class="aform-item">
<input type="text" name="name" data-placeholder="A moniker" data-help="Your name"/>
</div>
<div class="aform-item">
<input type="email" name="email" data-placeholder="Box o' sp@m *" data-help="Your email address" data-email="Please enter a valid email"/>
</div>
<div class="aform-item">
<textarea name="message" data-placeholder="Something else? *" data-help="Drop us a few lines" data-required="Please enter your message"></textarea>
</div>
<div data-submit="data-submit" class="btn"><em>Ciao!</em><i class="if-paper-plane"></i></div>
</fieldset>
</form>
</article>-->
<p>Please write to <a href="mailto:colloquy@soda.camp">colloquy@soda.camp</a>,
or mention <a href="https://twitter.com/sodacamper">@sodacamper</a>.
</p>
</section>
<!-- /section.call -->
<section class="call">
<img src="images/thomson_soda.jpg">
</section>
<!-- /section.call -->
<section class="call">
<p><small>Image credits: <a href="https://www.flickr.com/photos/nationallibrarynz_commons/6296888747/in/photolist-aArcDn-6pAPdr-eCLQDC-7PBzXG-egdPXF-oeyqrW-oey2xQ-ow1Ncq-oexoff-ovQpL5-ovLgqT-ovL4yB-foC98q-5SPmSJ-oen5AM-ovQqmd-ow1ZYS-oexzcf-ow299E-ovQNoj-ow3wmr-oey1aQ-oeytC4-oey83C-ow3QsB-oen5J1-oexwew-oemNMJ-oen6sM-oeyXrR-oexczh-ou1Mb3-ow1QUE-ovQ7sN-ovRMUT-oenf6Y-oeyUHe-oemNis-otPPd1-ovzBW4-otPMXq-ovDBE7-ovDJRm-ow2fXQ-ovRNoD-oenfvW-oexNmv-ovQVkf-ow3Gj2-ow3hwc">Thomson Soda</a> from the National Library NZ (Public Domain), <a href="https://www.flickr.com/photos/tiarescott/33507074/in/photolist-3XJub-aKVQMM-4TQ88-twr8M-7QpPTD-cvZEc-nTRvKP-7chUCe-7cmKtd-6euzD6-6eyFhf-6eyFqS-6euyUp-6eyHzW-3C4qK-iBp7o-2EF5kN-o6D8gn-2EF6rA-2EACjR-2EF3nY-2EAM88-2EADE8-iBp7m-4TQ7d-ap9cym-9wnkNr-iBp7n-7r41LM-GC8RE-5wqrGg-88jGsD-88nUPj-88nUTW-88nUHo-GecXh-twhjk-cvZF6-2EF6Pj-6eyGuA-3C4qJ-2EAGrt-5T4jX7-6eyJvb-cw3aC-2EAFXF-2EF78U-2EAEHM-2EF4GE-8tAWHa" target="_blank">Ueno Park</a> by tiarescott (CC BY 2.0)</small></p>
</section>
<!-- /section.call -->
<small style="opacity:0.5"><sup>•</sup>punɥ</small>
</div>
<!-- /main-->
</body>
</html>