-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
318 lines (287 loc) · 12.5 KB
/
index.html
File metadata and controls
318 lines (287 loc) · 12.5 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
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<!--
/****************************************
*
* $filename: index.html
* $author: Simone Kalb
* $email: kalb@crs4.it
* $date: 10/28/2011
*
*****************************************/
-->
<html>
<head>
<title>:: Alla ricerca del Pixel perduto ::</title>
<meta charset="utf-8" />
<meta name="author" content="Simone Kalb" />
<meta property="fb:admins" content="717880706" />
<meta property="fb:app_id" content="171222119635513" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:400,800,700,600' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssbase/cssbase-min.css">
<meta name="viewport" content="width=1600" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" / >
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" / >
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".picture.intro").show("slide", { direction: "right" }, 1000);
$(".footer #home").click(function(){
$(".picture").fadeOut("fast");
$(".picture.intro").show("slide", { direction: "right" }, 1000);
});
$(".footer #credits").click(function(){
$(".picture").fadeOut("fast");
$(".picture.description.credits").css("font-size","0.9em");
$(".picture.description.credits").show("slide", { direction: "right" }, 1000);
});
$(".footer #video").click(function(){
$(".picture").fadeOut("fast");
$(".picture.description.video").css("font-size","1.2em");
$(".picture.description.video").show("slide", { direction: "right" }, 1000);
});
$(".label .leo").click(function(){
$(".picture").fadeOut("fast");
$(".picture.leo").show("slide", { direction: "right" }, 1000);
});
$(".label .tilde").click(function(){
$(".picture").fadeOut("fast");
$(".picture.tilde").show("slide", { direction: "right" }, 1000);
});
$(".label .albert").click(function(){
$(".picture").fadeOut("fast");
$(".picture.albert").show("slide", { direction: "right" }, 1000);
});
$(".label .pixel").click(function(){
$(".picture").fadeOut("fast");
$(".picture.pixel").show("slide", { direction: "right" }, 1000);
});
$(".label .robocat").click(function(){
$(".picture").fadeOut("fast");
$(".picture.robocat").show("slide", { direction: "right" }, 1000);
});
$(".footer #home").hover(function(){
$(this).attr("src","img/home_hover.png");
});
$(".footer #credits").hover(function(){
$(this).attr("src","img/credits_hover.png");
});
$(".footer #home").mouseout(function(){
$(this).attr("src","img/home.png");
});
$(".footer #credits").mouseout(function(){
$(this).attr("src","img/credits.png");
});
$(".footer #video").hover(function(){
$(this).attr("src","img/video_hover.png");
});
$(".footer #video").mouseout(function(){
$(this).attr("src","img/video.png");
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26763034-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>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Pixelstory', // App ID
channelURL : '//labomc.it/pixelstory/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=171222119635513";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Main Content Section -->
<div id="mainContainer">
<!-- Header Section -->
<div class="label">
<div class="leo">
<img src="img/label_leo.png" alt="label Leo"/>
</div>
<div class="tilde">
<img src="img/label_tilde.png" alt="label Tilde"/>
</div>
<div class="albert">
<img src="img/label_albert.png" alt="label Albert"/>
</div>
<div class="pixel">
<img src="img/label_pixel.png" alt="label Pixel"/>
</div>
<div class="robocat">
<img src="img/label_robocat.png" alt="label Robocat"/>
</div>
</div>
<div id="corners">
<img id="top_right_corner" src="img/px_tr.png" alt="top right corner" />
<img id="top_left_corner" src="img/px_tl.png" alt="top left corner" />
</div>
<img id="logo" src="img/titolo.png" alt="Header"/>
<div class="picture leo" >
<span class="field">Nome: </span>
<span class="description">Leonardo, ma a lui piace essere chiamato Leo</span>
<br />
<span class="field">Età: </span>
<span class="description">8 Anni</span>
<br />
<span class="field">Hobby: </span>
<span class="description">Astrofisica, Informatica e Videogiochi</span>
<br />
<span class="field">Aspirazioni: </span>
<span class="description">Diventare scienziato come la mamma</span>
<br />
<span class="field">Piatto preferito: </span>
<span class="description">Pizza con patatine</span>
<br/>
<div class="description lastDesc">Leo è sempre attivo e dinamico. Adora la tecnologia e non gli sfugge mai nessuna novità informatica. È molto pratico ma gli capita di avere la testa per aria quando..osserva le stelle. È lo smanettone del gruppo e pensa che tutte le soluzioni si trovino sul web.
</div>
</div>
<div class="picture tilde" >
<span class="field">Nome:</span>
<span class="description">Tilde, Matilde solo nei momenti importanti</span>
<br />
<span class="field">Età:</span>
<span class="description">6 Anni</span>
<br />
<span class="field">Hobby:</span>
<span class="description">Accudire i piccoli animali, pallavolo, computer</span>
<br />
<span class="field">Aspirazioni:</span>
<span class="description">Fare la veterinaria come il papà</span>
<br />
<span class="field">Piatto preferito:</span>
<span class="description">gelato fragola e cioccolato</span>
<br/>
<div class="description lastDesc">Tilde è dolce e sensibile. Le piace la compagnia e ogni occasione è buona per farsi nuovi amici. La incuriosiscono le novità e le piace capire tutto, specialmente ciò che riguarda l'amatissimo mondo degli animali.
</div>
</div>
<div class="picture albert">
<span class="field">Nome:</span>
<span class="description">Albert</span>
<br />
<span class="field">Età:</span>
<span class="description">26 Anni</span>
<br />
<span class="field">Hobby:</span>
<span class="description">Fotografia, viaggi e bicicletta</span>
<br />
<span class="field">Aspirazioni:</span>
<span class="description">Vincere il Nobel</span>
<br />
<span class="field">Piatto preferito:</span>
<span class="description">Lasagne della signora Nina</span>
<br/>
<div class="description lastDesc">Albert è socievole e solare. È un grande studioso e la mattina corre entusiasta a lavoro. Ha una cultura sterminata ma non la ostenta anzi, la usa per aiutare gli altri.
</div>
</div>
<div class="picture pixel">
<span class="field">Nome:</span>
<span class="description">Pixel</span>
<br />
<span class="field">Età:</span>
<span class="description">4 Anni</span>
<br />
<span class="field">Hobby:</span>
<span class="description">dormire sopra il computer</span>
<br />
<span class="field">Aspirazioni:</span>
<span class="description">Rincorrere Jerry</span>
<br />
<span class="field">Piatto preferito:</span>
<span class="description">crocchette croccanti</span>
<br/>
<div class="description lastDesc">Pixel è curioso e gli piace esplorare il mondo, anche se adora tornare a casa e dormire sul computer di Tilde. Segue sempre la sua padroncina ovunque vada
</div>
</div>
<div class="picture robocat">
<span class="field">Nome:</span>
<span class="description">Robocat</span>
<br />
<span class="field">Età:</span>
<span class="description">1 Anno</span>
<br />
<span class="field">Hobby:</span>
<span class="description">Raccogliere Dati</span>
<br />
<span class="field">Aspirazioni:</span>
<span class="description">Robocat 2.0</span>
<br />
<span class="field">Piatto preferito:</span>
<span class="description">01000010 01001001 01010100</span><br/>
<div class="description lastDesc">Robocat ha le sembianze di una gattina ma è un sofisticato dispositivo in via di sperimentazione. Ha un cuore elettronico che pulsa...
</div>
</div>
<div class="picture description intro">
Chi è Pixel? Cosa potranno mai fare due ragazzini a Polaris, il <strong>Parco Scientifico e Tecnologico della Sardegna</strong>, tra computer e ricercatori?
Sfoglia le schede dei personaggi e vieni a scoprire la loro avventurosa storia al <strong>Festival della Scienza di Cagliari</strong>, all'<strong>Exmà</strong> dal 5 al 8 Novembre 2011.
Per info e prenotazioni clicca <a href="http://www.scienzasocietascienza.eu/">qui</a>.
</div>
<div class="picture description credits">
<em>"Alla Ricerca del Pixel perduto"</em> è una storia realizzata per un'applicazione
interattiva sviluppata dal Laboratorio OMC e dal CRS4.<br />
<a href="http://www.labomc.it/pixelstory">http://www.labomc.it/pixelstory</a><br />
Storia e personaggi ideati da <strong>Gavino Paddeu</strong> e <strong>Selene Uras</strong> con la collaborazione di <strong>Ivan Marcialis</strong>.
Applicazione interattiva a cura del <a href="http://www.labomc.it">Lab OMC</a> (Massimo Deriu e Daniele Ardu).<br />
Sito web a cura di <strong>Simone Kalb</strong>.<br />
Animazioni, character design e progetto grafico a cura di <a href="http://www.seies.it">Seiès Comunicazione & Design</a>, Cagliari.<br />
</div>
<div class="picture description video">
I video e i testi dell'intera storia saranno presto disponibili online.<br />
<p style="margin-top:1.2em">Visita nuovamente questo sito dopo l'<strong>8 novembre</strong>.</br>Grazie.</p>
</div>
<!-- End Header Section -->
</div>
<!-- Main Content Section -->
</div>
<img id="photo_group" src="img/photo_group_no_footer_crop.png" alt="Photo Group" />
<div class="footer">
<a href="http://www.sardegnaricerche.it">
<img src="img/sardegna_ricerche.png" alt="logos sr"/></a>
<a href="http://www.labomc.it">
<img src="img/labomc.png" alt="logos labomc"/></a>
<a href="http://www.crs4.it">
<img src="img/crs4.png" alt="logos crs4"/></a>
<!-- Social Networks Icons -->
<div id="buttons">
<img id="home" src="img/home.png" alt="Home Button" />
<img id="credits" src="img/credits.png" alt="Credits Button" />
<img id="video" src="img/video.png" alt="Video Button" />
</div>
<div id="social">
<div class="fb-like" data-href="http://labomc.it/pixelstory" data-send="true" data-layout="box_count" data-width="200" data-show-faces="false" style="position:absolute; top:10px; left:10px">
</div>
<a href="https://www.facebook.com/event.php?eid=300617296620968" >
<img src="img/fb.png" alt="fb" id="facebook" />
</a>
<a href="https://twitter.com/#!/openmediacenter" >
<img src="img/twitter.png" alt="tweeter" id="twitter" />
</a>
</div>
<!-- End Social Network Section -->
</div>
</div>
</body>
</html>