mobile

fenicento · Sep 25, 2012 · 870cb04 · 870cb04
1 parent 4cd179e
commit 870cb04
Show file tree

Hide file tree

Showing 25 changed files with 493 additions and 34 deletions.
diff --git a/.settings/org.eclipse.core.resources.prefs b/.settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,3 @@
+#Tue Sep 25 20:19:05 CEST 2012
+eclipse.preferences.version=1
+encoding//m/index2.htm=UTF-8
diff --git a/fonts/HELVETICANEUELTCOM-LT.TTF b/fonts/HELVETICANEUELTCOM-LT.TTF
diff --git a/img/dave.jpg b/img/dave.jpg
diff --git a/m/fonts/CPF Serif Pro-Regular.otf b/m/fonts/CPF Serif Pro-Regular.otf
diff --git a/m/fonts/HELVETICANEUELTCOM-HV.TTF b/m/fonts/HELVETICANEUELTCOM-HV.TTF
diff --git a/m/fonts/HELVETICANEUELTCOM-LT.TTF b/m/fonts/HELVETICANEUELTCOM-LT.TTF
diff --git a/m/fonts/HelveticaNeueLTCom-BdCn.ttf b/m/fonts/HelveticaNeueLTCom-BdCn.ttf
diff --git a/m/geplab.iphone.mp4 b/m/geplab.iphone.mp4
diff --git a/m/geplab.theora.ogv b/m/geplab.theora.ogv
diff --git a/m/geplab.webmvp8.webm b/m/geplab.webmvp8.webm
diff --git a/m/img/Untitled-1.jpg b/m/img/Untitled-1.jpg
diff --git a/m/img/conIco.png b/m/img/conIco.png
diff --git a/m/img/gepIco.png b/m/img/gepIco.png
diff --git a/m/img/labIco.jpg b/m/img/labIco.jpg
diff --git a/m/img/menu-off.jpg b/m/img/menu-off.jpg
diff --git a/m/img/menu-off.png b/m/img/menu-off.png
diff --git a/m/img/menu-on.jpg b/m/img/menu-on.jpg
diff --git a/m/img/menu-on.png b/m/img/menu-on.png
diff --git a/m/img/proIco.png b/m/img/proIco.png
diff --git a/m/img/upIco.png b/m/img/upIco.png
diff --git a/m/index.htm b/m/index.htm
@@ -1,20 +1,77 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="it">
 <head>
-    <title>Laboratorio Creativo Geppetto</title>
-    <link href="style.css" media="all" rel="stylesheet">
-    <meta name="viewport" content="width=device-width"/>
+<meta charset="utf-8" />
+<title>Laboratorio Creativo Geppetto - mobile site</title>
+<link href="style.css" media="all" rel="stylesheet" />
+<meta name="viewport"
+ content="width=device-width, initial-scale=1, maximum-scale=1" />
 </head>
- 
+
 <body>
-<header>
- <img id="logo" alt="Laboratorio Creativo Geppetto"
-    src="img/logo-m.png"/>
-
-    <h3>TECHNOLOGICAL CRAFTMANSHIP</h3>
-
-    <a href="index2.htm">PROVA PAGINA INTERNA</a>
+ <header>
+  <img id="logo" alt="Laboratorio Creativo Geppetto"
+   src="img/logo-m.png" />
+ </header>
+
+ <nav>
+  <a href="index2.htm">
+  <div class="tablink" id="menu1">
+    <div class="tabtext">
+     <div class="tabtitle">Il Laboratorio</div>
+     <div class="tabsubtitle">Chi siamo e cosa facciamo</div>
+    </div>
+
+    <div class="tabimg">
+     <img src="img/labIco.jpg" / alt="lab">
+    </div>
+   </div>
+    </a>
+    <a href="index2.htm">
+   <div class="tablink" id="menu2">
+    <div class="tabtext">
+     <div class="tabtitle">Progetti</div>
+     <div class="tabsubtitle">I nostri lavori</div>
+    </div>
+
+    <div class="tabimg">
+     <img src="img/proIco.png" / alt="lab">
+    </div>
+   </div>
+  </a> 
+  <a href="index3.htm">
+   <div class="tablink" id="menu3">
+    <div class="tabtext">
+     <div class="tabtitle">I Geppetti</div>
+     <div class="tabsubtitle">I membri del team</div>
+    </div>
+
+    <div class="tabimg">
+     <img src="img/gepIco.png" / alt="lab">
+    </div>
+   </div>
+  </a>
+   <a href="index2.htm">
+   <div class="tablink" id="menu4">
+    <div class="tabtext">
+     <div class="tabtitle">Contatti</div>
+     <div class="tabsubtitle">Tutte le coordinate del lab</div>
+    </div>
+
+    <div class="tabimg">
+     <img src="img/conIco.png" / alt="lab">
+    </div>
+   </div>
+  </a>
+ </nav>
 
-   </header>
+ <footer>
+  <div class="footer-text">&copy; 2012 Laboratorio Creativo
+   Geppetto</div>
+  <div class="footer-link">
+   <a href="http://www.geppettolab.it?m=true">Vai alla versione
+    classica</a>
+  </div>
+ </footer>
 </body>
 </html>
diff --git a/m/index2.htm b/m/index2.htm
@@ -1,18 +1,86 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Laboratorio Creativo Geppetto</title>
-    <link href="style.css" media="all" rel="stylesheet">
-    <meta name="viewport" content="width=device-width"/>
+<meta charset="utf-8" />
+<title>Laboratorio Creativo Geppetto</title>
+<link href="style.css" media="all" rel="stylesheet">
+<meta name="viewport" content="width=device-width" />
+<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
 </head>
- 
+
 <body>
-<header>
- <img id="logo-lateral" alt="Laboratorio Creativo Geppetto"
-    src="img/logo-small.png"/>
+ <header>
+ <nav id="slideMenu">
+  <div class="menu-el">
+   <div class="menu-im"> <img src="img/labIco.jpg" / alt="lab"></div>
+   <div class="menu-txt">Il Laboratorio</div>
+  </div>
+
+  <div class="menu-el">
+   <div class="menu-im"> <img src="img/proIco.png" / alt="lab"></div>
+   <div class="menu-txt">Progetti</div>
+  </div>
+
+  <div class="menu-el">
+   <div class="menu-im"> <img src="img/gepIco.png" / alt="lab"></div>
+   <div class="menu-txt">I Geppetti</div>
+  </div>
+
+  <div class="menu-el">
+   <div class="menu-im"> <img src="img/conIco.png" / alt="lab"></div>
+   <div class="menu-txt">Contatti</div>
+  </div>
+ </nav>
+  <img id="logo-lateral" alt="Laboratorio Creativo Geppetto"
+   src="img/logo-small.png" />
+   <a class="menuButton" id="menuButton" href="#"> <img alt="Laboratorio Creativo Geppetto"
+   src="img/menu-off.png" /></a>
+
+ </header>
+<nav class="breadcrumb"><a href="index.htm">HOME</a> > IL LABORATORIO</nav>
+<section>
+ <h3>Il Laboratorio</h3>
+
+ <video width="100%" controls="controls">
+  <source src="./geplab.iphone.mp4" type="video/mp4" />
+   <source src="./geplab.webmvp8.webm" type="video/webm"/>
+  Il tuo dispositivo non supporta video in formato MP4, spiacente!
+  </video>
+   <article><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>
+
+
+</section>
+<a href="#logo-lateral">
+ <div class="tablink" id="menu1">
+    <div class="tabtext">
+     <div class="tabstring">Torna in cima</div>
+
+    </div>
+
+    <div class="tabimg">
+     <img src="img/upIco.png" / alt="lab">
+    </div>
 
-    <h3>PAGINA INTERNA</h3>
+   </div></a>
+ <footer>
+  <div class="footer-text">&copy; 2012 Laboratorio Creativo
+   Geppetto</div>
+  <div class="footer-link">
+   <a href="http://www.geppettolab.it?m=true">Vai alla versione
+    classica</a>
+  </div>
+
+ </footer>
+ <script type="text/javascript">
 
-   </header>
+$('#menuButton').click(function() {
+  $('#slideMenu').slideToggle('slow', function() {
+     // Animation complete.
+   });
+});
+
+  </script>
 </body>
 </html>
diff --git a/m/index3.htm b/m/index3.htm
@@ -0,0 +1,142 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Laboratorio Creativo Geppetto</title>
+<link href="style.css" media="all" rel="stylesheet">
+<meta name="viewport" content="width=device-width" />
+<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
+</head>
+
+<body>
+ <header>
+  <nav id="slideMenu">
+   <div class="menu-el">
+    <div class="menu-im">
+     <img src="img/labIco.jpg" / alt="lab">
+    </div>
+    <div class="menu-txt">Il Laboratorio</div>
+   </div>
+
+   <div class="menu-el">
+    <div class="menu-im">
+     <img src="img/proIco.png" / alt="lab">
+    </div>
+    <div class="menu-txt">Progetti</div>
+   </div>
+
+   <div class="menu-el">
+    <div class="menu-im">
+     <img src="img/gepIco.png" / alt="lab">
+    </div>
+    <div class="menu-txt">I Geppetti</div>
+   </div>
+
+   <div class="menu-el">
+    <div class="menu-im">
+     <img src="img/conIco.png" / alt="lab">
+    </div>
+    <div class="menu-txt">Contatti</div>
+   </div>
+  </nav>
+  <img id="logo-lateral" alt="Laboratorio Creativo Geppetto"
+   src="img/logo-small.png" /> <a class="menuButton" id="menuButton"
+   href="#"> <img alt="Laboratorio Creativo Geppetto"
+   src="img/menu-off.png" /></a>
+
+ </header>
+ <nav class="breadcrumb">
+  <a href="index.htm">HOME</a> > I GEPPETTI
+ </nav>
+ <section>
+  <h3>I Geppetti</h3>
+<div class="geppo">
+<div class="geppo-im"><img src="./img/luca.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Luca Feliciani</div>
+ <div class="geppo-role">Elettronica, Modellazione, realizzazione fisica di installazioni</div>
+</div>
+</div>
+
+
+<div class="geppo">
+<div class="geppo-im"><img src="./img/dave.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Davide Totaro</div>
+ <div class="geppo-role">Design e sviluppo di sistemi interattivi, arte digitale</div>
+</div>
+</div>
+
+<div class="geppo">
+<div class="geppo-im"><img src="./img/dani.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Daniele Ciminieri</div>
+ <div class="geppo-role">Programmazione multimediale, video making, sviluppo web</div>
+</div>
+</div>
+
+
+<div class="geppo">
+<div class="geppo-im"><img src="./img/susy.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Susanna Pilia</div>
+ <div class="geppo-role">Grafica, Product Design</div>
+</div>
+</div>
+
+<div class="geppo">
+<div class="geppo-im"><img src="./img/jimy.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Gianmarco Gozzi</div>
+ <div class="geppo-role">Composizione musicale, Sound Design</div>
+</div>
+</div>
+
+<div class="geppo">
+<div class="geppo-im"><img src="./img/eros.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Eros Blanco</div>
+ <div class="geppo-role">Sviluppo di prototipi, programmazione multimediale</div>
+</div>
+</div>
+
+<div class="geppo">
+<div class="geppo-im"><img src="./img/andrei.jpg"/></div>
+<div class="geppo-txt">
+ <div class="geppo-name">Andrei Clodius</div>
+ <div class="geppo-role">Graphic e Product design, Scenario Building</div>
+</div>
+</div>
+
+ </section>
+ <a href="#logo-lateral">
+  <div class="tablink" id="menu1">
+   <div class="tabtext">
+    <div class="tabstring">Torna in cima</div>
+
+   </div>
+
+   <div class="tabimg">
+    <img src="img/upIco.png" / alt="lab">
+   </div>
+
+  </div>
+ </a>
+ <footer>
+  <div class="footer-text">&copy; 2012 Laboratorio Creativo
+   Geppetto</div>
+  <div class="footer-link">
+   <a href="http://www.geppettolab.it?m=true">Vai alla versione
+    classica</a>
+  </div>
+
+ </footer>
+ <script type="text/javascript">
+		$('#menuButton').click(function() {
+			$('#slideMenu').slideToggle('slow', function() {
+				// Animation complete.
+			});
+		});
+	</script>
+</body>
+</html>
diff --git a/m/js/jquery-1.8.2.min.js b/m/js/jquery-1.8.2.min.js