-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
370 lines (294 loc) · 21.9 KB
/
index.htm
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
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<link href="style.css" media="all" rel="stylesheet">
<title>Laboratorio Creativo Geppetto</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> -->
<!-- <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script> -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script src="js/galleria/galleria-1.2.7.min.js"></script>
<script>
Galleria.loadTheme('js/galleria/themes/miniml/galleria.miniml.min.js');
Galleria.run('.galleria');
//Galleria.run('');
Galleria.configure({
width:$(window).width()*0.35,
height:$(window).height()*0.6,
});
</script>
<script type="text/javascript">
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.5296178,9.2272746);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyLogo = new google.maps.MarkerImage('img/marker.png',
new google.maps.Size(75,90),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(45.5296178,9.2272746);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyLogo,
title:"Some title"
});
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35058718-1']);
_gaq.push(['_setDomainName', 'geppettolab.it']);
_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 onload="initialize()">
<header>
<img id="wood" alt="il laboratorio" src="./img/wood.png" />
<h1>Laboratorio Creativo Geppetto</h1>
<div id="top">
<img id="logo" alt="Laboratorio Creativo Geppetto"
src="logo-dani.png"/>
<h3>
Geppetto è nato per mostrare un approccio contemporaneo
all'artigianato.<br /> I fili elettrici sono il suo legno, le
frequenze sonore i suoi chiodi, i link la sua spatola.
</h3>
<!-- <img id="lab" alt="il laboratorio" src="./img/lab5.png" /> -->
</div>
</header>
<nav id="primary">
<ul>
<li>
<h4>Il Laboratorio</h4>
<a href="#laboratorio" class="laboratorio active">View</a>
</li>
<li>
<h4 style="display: none;">I Progetti</h4>
<a href="#progetti" class="progetti">View</a>
</li>
<li>
<h4 style="display: none;">I Geppetti</h4>
<a href="#geppetti" class="geppetti">View</a>
</li>
<li>
<h4 style="display: none;">I Contatti</h4>
<a href="#contatti" class="contatti">View</a>
</li>
</ul>
</nav>
<div style="clear:both;"><div class="sep-left"></div><div class="saw-left"></div></div>
<section id="laboratorio">
<h2 class="title-right">IL LABORATORIO</h2>
<div style="clear:both;">
<iframe class="video-gep" src="http://player.vimeo.com/video/45543438" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<article class="article-right"><p>Il Laboratorio Creativo Geppetto si occupa di creare una realtà innovativa nel territorio italiano, per dar vita a tutte quelle iniziative artistiche che hanno bisogno di una componente interattiva e/o incentrata sulla multimedialità per potersi sviluppare nel miglior modo possibile.</p>
<p> Il team si offre come appoggio per privati ed aziende nella progettazione di installazioni interattive ed oggetti, ma anche come studio di progettazione e realizzazione completamente autonomo. Concentrando le sue esperienze sul recupero di materiali e sul loro riutilizzo, trova nel ready-made e nel lo-fi i suoi punti di forza.</p>
<p> Noi Geppetti ci proponiamo di dare nuova vita agli oggetti ignorati della vita quotidiana e del design, integrandoli con funzioni tecnologiche e modalità alternative di interazione. Ci basiamo sulll'alta formazione specializzata che ci caratterizza e che spazia dal design del prodotto a quello grafico, dall'ingegneria informatica all'elettronica.</p></article>
</div>
</section>
<div style="clear:both;"><div class="sep-right"></div><div class="saw-right"></div></div>
<section id="progetti">
<h2 class="title-left">PROGETTI</h2>
<div class="prog-container" style="margin:0 auto; width: 90%; height:400px;">
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div class="scroll-el">
<div class="full-height">
<article class="article-left-scroll">
<h3>LA CASA SU MARTE</h3>
<p><b>Designer: </b><a href="http://www.searif.com/">Francesco Bocola</a></p>
<p><b>Sito ufficiale: </b><a href="http://www.lacasasumarte.it">La casa su Marte</a></p>
<p><b>Descrizione: </b>Questa installazione immersiva progettata da Francesco Bocola esplora i confini dell'architettura sensoriale, spingendosi in una condizione in cui più che mai la casa è intesa come un rifugio: la vita umana su Marte.</p>
<p> In un contesto così estremo l'abitazione diventa l'unico spazio di sopravvivenza, un guscio che protegge il suo abitante dall'inospitalità del pianeta rosso e dall'instabilità psichica derivata dall'alienazione. Suoni, immagini e odori regolano l'equilibrio fisico e mentale dell'individuo, regolati dalla temperatura corporea.</p>
<p>Noi geppetti abbiamo avuto l'arduo compito di realizzare i sistemi interattivi e le automazioni della casa (porte, luci, sensori di temperatura e diffusione di fragranze), nonché di creare e governare i contenuti multimediali in base alle condizioni nterne della sfera.</p>
</article>
<div class="galleria">
<img src="img/casa1.jpg" alt="casa1" data-description="Il modulo abitativo visto dall'esterno. La porta sferica è comandata da un sensore di movimento, che aziona anche la gestione dell'ambiente.">
<img src="img/casa2.jpg" alt="casa2" data-description="Una visione d'insieme dell'interno: in uno spazio ridottissimo sono condensati un tavolo, due sedie, un letto pieghevole, bagno e cucina con elettrodomestici.">
<img src="img/casa3.jpg" alt="casa3" data-description="Le luci circondano tutto l'ambiente, e variano colore a seconda della temperatura corporea di chi si trova all'interno.">
<img src="img/casa4.jpg" alt="casa4" data-description="Un particolare del bagno, che nella sua essenzialità dispone di lavello, wc, doccia e specchio.">
<img src="img/casa5.jpg" alt="casa5" data-description="La colorazione verde indica lo stato di quiete del sistema: la persona all'interno ha raggiunto il suo equilibrio termico.">
<img src="img/casa6.png" alt="casa6" data-description="Un render di una possibile combinazione di moduli per un insediamento.">
</div>
</div>
</div>
<div class="scroll-el">
<div class="full-height">
<article class="article-left-scroll">
<h3>LOOPSHIRT</h3>
<p><b>Descrizione: </b>Nato come lavoro ad hoc e successivamente sviluppato come progetto interno del laboratorio, Loopshirt è una maglietta interattiva pensata per performance dal vivo in cui l'artista ha la necessità di controllare eventi multimediali (audio, video) o scenici (modifiche in tempo reale dell'ambiente) dovendosi allo stesso tempo muovere liberamente nello spazio circostante. </p>
<p>L'interazione avviene attraverso i 3 pulsanti in neoprene posti sulla maglietta, che tramite un microcontrollore ed un modem Bluetooth inviano segnali MIDI ad un computer adibito alla gestione degli eventi. L'alimentazione è fornita da una batteria al litio posta sulla schiena e ricaricabile via USB.</p>
<p>Tutti i componenti elettronici sono attaccati al tessuto tramite bottoni metallici e quindi rimuovibili per consentire il lavaggio della maglia.</p>
<p>I pulsanti hanno due funzioni ciascuno (a seconda della durata della pressione, breve o continuata), e la loro posizione è stata studiata per ottenere un utilizzo confortevole ed efficiente con entrambe le mani.</p>
</article>
<div class="galleria">
<img src="img/loop3.jpg" alt="loop3" data-description="Il microcontrollore ed il modem bluetooth usati per la comunicazione con il computer.">
<img src="img/loop1.jpg" alt="loop1" data-description="Un particolare dei pulsante in neoprene: i due strati interni in tessuto conduttivo vengono a contatto durante la pressione.">
<img src="img/loop2.jpg" alt="loop2" data-description="I pulsanti sono collegati tramite bottoni metallici per consentire il passaggio di corrente ed ulteriormente bloccati con un strato di feltro.">
<!-- <img src="img/cuprum4.jpg" alt="cuprum4" data-description="Un particolare della realizzazione tecnica"> -->
</div>
</div>
</div>
<div class="scroll-el">
<div class="full-height">
<article class="article-left-scroll">
<h3>CUPRUM</h3>
<p><b>Artista: </b><a href="http://www.danieladimaro.it/">Daniela Di Maro</a></p>
<p><b>Descrizione: </b>"Cuprum" è un’installazione interattiva di Daniela Di Maro frutto della ricerca sulle relazioni che intercorrono tra i processi vitali, propri dei sistemi naturali, e le opportunità intrinseche al progresso tecnologico. Le sue sperimentazioni, infatti, conducono alla forte connessione tra le dinamiche della natura e le potenzialità dovute alle tecnologie nate nell’ultimo secolo.</p>
<p>Cuprum, nome scientifico del rame, non è semplicemente la rivelazione del metallo costituente l’opera, ma è l’espressione della sintesi del rapporto tra natura e tecnica; ottimo conduttore di elettricità e termico, il rame diviene il mezzo per dar vita a un circuito elettronico alimentato dalla luce e modulato dalla presenza del pubblico. L’installazione si completa con una serie di forme vegetali, ricamate dall’artista con il filo metallico, selezionate in virtù della loro duplice funzione medicamentosa/velenosa, che si animano grazie a “presenze” sonore generate dall’energia catturata dalla luce naturale.</p>
<p>L’installazione è stata esposta in mostra dal 9/3/2012 al 12/4/2012 presso la <a href="http://www.dinomorraartecontemporanea.eu"><b>Galleria Dino Morra Arte Contemporanea</b></a> di Napoli.</p>
</article>
<div class="galleria">
<img src="img/cuprum1.jpg" alt="cuprum1" data-description="L'opera esposta presso la Galleria d'arte contemporanea Dino Morra">
<img src="img/cuprum2.jpg" alt="cuprum2" data-description="I ricami in rame sono realizzati a mano dall'artista">
<img src="img/cuprum3.jpg" alt="cuprum3" data-description="Un altro dettaglio dell'opera">
<img src="img/cuprum4.jpg" alt="cuprum4" data-description="Un particolare della realizzazione tecnica">
</div>
</div>
</div>
<!-- 5-10 -->
<div class="scroll-el">
<div class="full-height">
<article class="article-left-scroll">
<h3>IMAGINARY CORPUSCOLI</h3>
<p><b>Artista: </b><a href="http://eyeflux.wordpress.com/">Virginia Carlocchia</a> </p>
<p><b>Descrizione: </b>“Imaginary Corpuscoli” è un’installazione interattiva ideata da Virginia Carlocchia costituita da due strutture poste in luoghi diversi e collegate tra loro dalla rete internet. Ogni postazione è un dispositivo in grado di trasmettere e ricevere impulsi tattili, di modo che gli utenti potranno entrare in comunicazione tra loro introducendo l’elemento innovativo dell’interazione tangibile nella comunicazione a distanza.</p>
<p>La mostra offre un’amplificazione dell’empatia che spesso le persone provano attraverso lo schermo, dove la realtà inganna il virtuale servendosene.</p>
<p>Per la realizzazione tecnica sono stati utilizzati due Arduino Mega, ognuno dedito al controllo di 2 sensori di pressione e 2 motori servo, connessi tramite protocollo OSC.</p>
<p>L'opera è stata esposta presso lo <a href="http://www.fondazionedars.it"><b>Studio D’Ars</b></a> dal 20 al 26 Settembre 2011
</article>
<div class="galleria">
<img src="img/corpuscoli1.jpg" alt="corpuscoli1" data-description="L'opera in esposizione presso la Fondazione D'ars">
<img src="img/corpuscoli2.jpg" alt="corpuscoli2" data-description="Una delle postazioni in uso durante la mostra">
<img src="img/corpuscoli3.jpg" alt="corpuscoli3" data-description="L'opera insieme alla sua ideatrice, Virginia">
</div>
</div>
</div>
<!-- 10-15 -->
<div class="scroll-el">
<div class="full-height">
<article class="article-left-scroll">
<h3>STORMGLOVE</h3>
<p><b>Descrizione: </b>Storm Glove è un progetto di guanto interattivo realizzato per il Laboratorio sui sensori e le tecnologie per la cattura del movimento in applicazioni multimodali del Conservatorio di Como. La sua funzione è quella di fornire un nuovo metodo d’interazione con sistemi multimediali, attraverso l’uso naturale della mano.</p>
<p>In particolare, sul guanto sono montati 3 sensori di flessione, un potenziometro posizionato sul dorso della mano ed un pulsante posto lateralmente e raggiungibile dal pollice. Per testare le funzioni del guanto è stato realizzato uno sketch in Processing, i cui eventi visuali e sonori (pioggia, vento, fulmini) sono mappati all’output del guanto.</p>
</article>
<div class="galleria">
<img src="img/stormglove2.jpg" alt="stormglove1" data-description="Lo stormglove con tutti i suoi sensori in vista. L'interazione è controllata da un Arduino che si interfaccia direttamente ad un computer">
<img src="img/stormglove.png" alt="stormglove2" data-description="Lo sketch di prova realizzato con Max/MSP">
<!-- <img src="img/cuprum4.jpg" alt="cuprum4" data-description="Un particolare della realizzazione tecnica"> -->
</div>
</div>
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
</div>
</section>
<div style="clear:both;"><div class="sep-left"></div><div class="saw-left"></div></div>
<section id="geppetti">
<h2 class="title-center">I GEPPETTI</h2>
<div class="gep-person">
<div class="gep-person-img">
<img src="img/dani.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>DANIELE CIMINIERI</h3>Dopo una laurea triennale in ingegneria informatica conseguita a Roma, Daniele decide di cambiare parzialmente rotta e si trasferisce a Como per proseguire gli studi come ingegnere del suono. Qui viene a contatto con il mondo dell'interazione uomo-macchina e della programmazione multimediale, che da allora lo tiene felicemente impegnato. Programma in qualunque linguaggio purché il risultato finale sia colorato, assordante, stupfacente; da qui il titolo di code bard che ricopre con orgoglio.</div>
</div>
<div class="gep-person-right">
<div class="gep-person-img">
<img src="img/luca.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>LUCA FELICIANI</h3>Luca era il tipico bambino a cui un gioco nuovo durava circa un paio di giorni. Non perchè lo consumasse rapidamente, piuttosto perchè per capirne il funzionamento lo apriva, lo smontava e poi si inventava un modo tutto suo per ricomporlo. Così, pian piano, ha imparato a riutilizzare pezzi dispersi, a inventare per loro nuove funzioni, ed a coltivare la sua passione per gli oggetti costruiti a mano. Gli studi elettronici e la specializzazione in Ingegneria Informatica e Design del Suono gli hanno infine fornito le credenziali per poter ricoprire il ruolo di Multimedia Carpenter, all’interno del Laboratorio Creativo Geppetto, riunendo in un unico lavoro la sua passione per le lavorazioni manuali e per le scienze ingegneristiche.</div>
</div>
<div class="gep-person">
<div class="gep-person-img">
<img src="img/susy.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>SUSANNA PILIA</h3>Proveniente da un mondo fatto di cavalletti, colori e pennelli, Susanna (diplomatasi al liceo artistico) approda nella nuvolosa Como per frequentare il corso di Design dell'arredo presso il Politecnico di Milano. Qui apprende i dogmi della progettazione affinando la sua idea di Design, e con la tesi di laurea ha il suo primo incontro con resistenze, breadboard e Arduini. All'interno del laboratorio Geppetto si occupa della progettazione soft e hard dei prodotti e cura l'immagine grafica del gruppo.</div>
</div>
<div class="gep-person-right">
<div class="gep-person-img">
<img src="img/jimy.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>GIANMARCO "JIMMY" GOZZI</h3>Jimmy unisce al suo amore per la musica la razionalità della matematica: possiede uno spiccato senso dell’improvvisazione sia nel campo musicale che in quello scientifico, cercando sempre di trovare analogie e differenze tra i due ambienti. questo si rispecchia nei suoi studi - composizione e pianoforte al conservatorio, ingegneria all'università - e i risultati di questa miscela si intravedono nella sua attività di sound designer e compositore che svolge nel laboratorio, arricchendo i progetti con suoni e musiche mai banali, sempre pensate e coinvolgenti.</div>
</div>
<div class="gep-person">
<div class="gep-person-img">
<img src="img/dave.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>DAVIDE TOTARO</h3>Il primo impatto vero con la Tecnologia Davide lo ha all'università, dove consegue le lauree in Ingegneria Informatica ed in Ingegneria e Design del Suono presso il Politecnico di Milano. Nel frattempo non solo scopre di essere appassionato all'arte digitale, ma anche di possedere le capacità tecniche per poter lavorare in questo settore. Grande fautore del concetto di Artigianato Tecnologico, è attualmente impegnato nel coniugare tecnologie avanzate con l'approccio fai-da-te tipoco dell'artigiano.</div>
</div>
<div class="gep-person-right">
<div class="gep-person-img">
<img src="img/eros.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>EROS BLANCO</h3>Mamma, papà, zia... gli ripetevano sempre che avrebbe dovuto fare l'"ingegnere". Ed Eros, convintosi, ingegneria fece. Ma, finito il liceo scientifico, ancora non sapeva quali delle mille ingegnerie distinte potesse essere la più adatta a lui. E allora optò per Ingegneria dell'Automazione, che sembrava quella più varia. Conclusa la Laurea Triennale, fu colpito da "Ingegneria e Design del Suono"... e fu la scelta giusta, perché i suoi corsi gli permisero di continuare il percorso per diventare "ingegnere", pur soddisfacendo, allo stesso tempo, la sua fame di audio e multimedialità. Imparò così che l'ingegneria, quella bella, è sopratutto creativa ed eclettica. Anche alcuni suoi compagni di università la pensavano così... e Geppetto fu.</div>
</div>
<div class="gep-person">
<div class="gep-person-img">
<img src="img/andrei.jpg" alt="geppo">
</div>
<div class="gep-person-info"><h3>ANDREI CLODIUS</h3>Andrei si trasferisce in Italia per studiare Design presso il Politecnico di Milano. Sempre attento al contributo che l'innovazione può portare alla progettazione, si inserisce naturalmente nel contesto ad alto contenuto tecnologico del laboratorio, dove si occupa di design grafico e del prodotto e di scenario building.</div>
</div>
</section>
<div style="clear:both;"><div class="sep-right"></div><div class="saw-right"></div></div>
<section id="contatti">
<h2 class="title-left">CONTATTI</h2>
<div class="contatti-container">
<div class="contatti-text">
<p>La nostra sede si trova presso l'<a href="http://www.milanomet.it/"><b>HUB MILANO METROPOLI</b></a></p>
<h3>INDIRIZZO</h3><p>via Venezia 23 <br/>20099 Sesto San Giovanni (MI)</p>
<h3>MAIL</h3><p><a href="mailto:geppettolab@gmail.com">geppettolab@gmail.com</a></p>
<h3>TELEFONO</h3><p>Daniele - 347 7503783<br/>Luca - 339 3767565</p>
<h3>SEGUICI SU</h3>
<div class=social-container>
<div class="social-icon">
<a href="http://www.facebook.com/LaboratorioCreativoGeppetto"><img src="img/facebook.png" alt="facebook"></a>
</div>
<div class="social-icon">
<a href="https://twitter.com/GeppettoLab"><img src="img/twitter.png" alt="twitter"></a>
</div>
<div class="social-icon">
<a href="http://www.linkedin.com/groups/Laboratorio-Creativo-Geppetto-4022256"><img src="img/linkedin.png" alt="linkedin"></a>
</div>
</div>
</div>
<div id="map_canvas"></div>
</div>
</section>
<footer style="margin:0 auto; width:80%;">
Copyright © 2012 Laboratorio Creativo Geppetto | via Venezia 23, 20099 Sesto San Giovanni (MI) | tel. 3477503783 - 3393767565
</footer>
</body>
</html>